|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <div class="symptomPushWrapper clearfix">
|
|
|
+ <div class="symptomPushBottomPartLeft">
|
|
|
+ <p class="symptomPushPoolTitle">标签池</p>
|
|
|
+ <div class="symptomPushPool">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ v-model="searchVal"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ slot="prefix"
|
|
|
+ class="el-input__icon el-icon-search"
|
|
|
+ ></i>
|
|
|
+ </el-input>
|
|
|
+ <ul class="symptomPushTagList symptomPushTagPool">
|
|
|
+ <li v-for="(item, index) in leftTagsList"
|
|
|
+ class = "symptomPushTagItem"
|
|
|
+ :key='item.id'
|
|
|
+ :title="'[ '+item.tagName+' ]'"
|
|
|
+ :style="getStyle(item)?styles:null"
|
|
|
+ @click='selectLeftTag(item, index, $event)'
|
|
|
+ >
|
|
|
+ <p class="symptomPushTagName ellipsis" >{{item.tagName}} </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="symptomPushBottomPartMid fl">
|
|
|
+ <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
|
|
|
+ <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
|
|
|
+ </div>
|
|
|
+ <div class="symptomPushBottomPartRight ">
|
|
|
+ <p class="symptomPushPoolTitle">操作界面:</p>
|
|
|
+ <ul v-for="(item, index) in rightTagsList"
|
|
|
+ :key="index"
|
|
|
+ class="symptomPushTagList symptomPushOperationPool"
|
|
|
+ :class="index === 1 ? 'symptomPushOperationPoolPush':'' "
|
|
|
+ :style="currentSelectIndex === index?styles:null"
|
|
|
+ @click="SelectList(index)"
|
|
|
+ >
|
|
|
+
|
|
|
+ <li v-if="index===1" class = "symptomPushTagItemPushBox">
|
|
|
+ <p class = "symptomPushTagItemPush" v-if="index===1">此处放置推送模块</p>
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ v-for="(it) in item.questionDetailList"
|
|
|
+ :key = "it.id"
|
|
|
+ class = "symptomPushTagItem">
|
|
|
+ {{it.name}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import api from '@api/icss.js';
|
|
|
+import utils from '@api/utils.js';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "SymptomPush",
|
|
|
+ props: {
|
|
|
+ pool: {
|
|
|
+ default: () => [],
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ default: '',
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ sexType: {
|
|
|
+ default: '',
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ default: () => [],
|
|
|
+ type: Array
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ leftTagsList: [],
|
|
|
+ selectLeftTagId: '',
|
|
|
+ rightTagsList: [{}, {}],
|
|
|
+ currentSelectIndex: -1,
|
|
|
+ searchVal: '',
|
|
|
+ styles:{
|
|
|
+ background:'#eae7e7'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.rightTagsList = this.options
|
|
|
+ // let newArr = []
|
|
|
+ // for (let i = 0; i < this.rightTagsList2.length; i++) {
|
|
|
+ // if(this.rightTagsList2[i].tagType == 8) {
|
|
|
+ // newArr.push({ text: this.rightTagsList2[i].tagName ,type:'input' ,id: i+',,,'})
|
|
|
+ // } else {
|
|
|
+ // if(i === 0 ) {
|
|
|
+ // newArr.push({ text: '' ,type:'input' ,id: i+',,,'})
|
|
|
+ // }
|
|
|
+ // newArr.push(this.rightTagsList2[i])
|
|
|
+ // if(!this.rightTagsList2[i+1] || this.rightTagsList2[i+1]&&this.rightTagsList2[i+1].tagType != 8) {
|
|
|
+ // newArr.push({ text: '' ,type:'input' ,id: i+',,,,'})
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // this.rightTagsList2 = newArr
|
|
|
+ console.log('this.options',this.options)
|
|
|
+ if(this.options.length) {
|
|
|
+ this.rightTagsList = this.options
|
|
|
+ this.$emit('changeActionData',this.rightTagsList, false);
|
|
|
+ }
|
|
|
+ this.searchTagList()
|
|
|
+ // this.leftTagsList = this.pool
|
|
|
+ // console.log('TAGPOOL', this.pool)
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ pool(newVal, preVal) {
|
|
|
+ if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
|
|
|
+ this.leftTagsList = newVal
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchVal(newVal, preVal){
|
|
|
+ if(newVal.trim() == ''){
|
|
|
+ this.searchTagList()
|
|
|
+ }else if(newVal.trim() != preVal.trim()){
|
|
|
+ this.searchTagList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sexType(newVal, preVal) {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectLeftTag(tag, index, e) {
|
|
|
+ let isFull = true
|
|
|
+ for(let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
+ if(Object.keys(this.rightTagsList[i]).length === 0) {
|
|
|
+ isFull = false
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (isFull && this.currentSelectIndex === -1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.selectLeftTagId = tag
|
|
|
+ console.log(this.selectLeftTagId)
|
|
|
+ },
|
|
|
+
|
|
|
+ getStyle(item){ //左侧选中状态
|
|
|
+ return item.id == this.selectLeftTagId.id
|
|
|
+ },
|
|
|
+
|
|
|
+ toLeftList() {
|
|
|
+ if(this.currentSelectIndex === -1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.rightTagsList.splice(this.currentSelectIndex, 1, { })
|
|
|
+ this.selectLeftTagId = {}
|
|
|
+ this.searchTagList()
|
|
|
+ this.$emit('changeActionData',this.rightTagsList, false);
|
|
|
+ },
|
|
|
+ toRightList() {
|
|
|
+
|
|
|
+ if(this.currentSelectIndex === -1) {
|
|
|
+ let fillIndex = -1
|
|
|
+ for(let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
+ if(Object.keys(this.rightTagsList[i]).length === 0) {
|
|
|
+ fillIndex = i
|
|
|
+ break
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if(fillIndex === 0) {
|
|
|
+ this.getRighDetailsTag(fillIndex)
|
|
|
+ } else if (fillIndex === 1) {
|
|
|
+ this.getRighDetailsTag(fillIndex)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ searchTagList() {
|
|
|
+ let notIds = []
|
|
|
+ for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
+ if(this.rightTagsList[i].id) {
|
|
|
+ notIds.push(this.rightTagsList[i].id)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ let param = {
|
|
|
+ "tagName": this.searchVal,
|
|
|
+ "tagType": [1],
|
|
|
+ "controlType": [1,2,99],
|
|
|
+ "type": this.type || '',
|
|
|
+ "notIds": notIds,
|
|
|
+ "sexType": this.sexType,
|
|
|
+
|
|
|
+ }
|
|
|
+ api.searchTagList(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ this.leftTagsList = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getRighDetailsTag(fillIndex) {
|
|
|
+ let param = {
|
|
|
+ // "age": 0,
|
|
|
+ "id": this.selectLeftTagId.id,
|
|
|
+ // "sexType": 3
|
|
|
+ }
|
|
|
+ api.detailsTag(param).then((res) =>{
|
|
|
+ // if (res.data.code === '0') {
|
|
|
+ // this.selectLeftTagId = res.data.data
|
|
|
+ // if(this.currentSelectIndex !== -1) {
|
|
|
+ // console.log('this.selectLeftTagId',this.selectLeftTagId)
|
|
|
+ // // this.rightTagsList[this.currentSelectIndex] = this.selectLeftTagId;
|
|
|
+ // this.rightTagsList.splice(this.currentSelectIndex, 1, this.selectLeftTagId)
|
|
|
+ // } else {
|
|
|
+ // console.log(55656,this.selectLeftTagId)
|
|
|
+ // for(let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
+ // if(Object.keys(this.rightTagsList[i]).length === 0) {
|
|
|
+ // this.rightTagsList.splice(i, 1, this.selectLeftTagId)
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // this.searchTagList()
|
|
|
+ // console.log('this.rightTagsList',this.rightTagsList)
|
|
|
+ // this.$emit('changeActionData',this.rightTagsList, false);
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ SelectList(index) {
|
|
|
+
|
|
|
+ this.currentSelectIndex = this.currentSelectIndex === index ? -1 : index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" >
|
|
|
+@import '../../less/common.less';
|
|
|
+.symptomPushWrapper {
|
|
|
+ .symptomPushBottomPartLeft {
|
|
|
+ width: 30%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .symptomPushPoolTitle {
|
|
|
+ // border-bottom: 1px solid @icssBorder;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .symptomPushPool {
|
|
|
+ // border:1px solid @icssBorder;
|
|
|
+
|
|
|
+ }
|
|
|
+ .symptomPushSearch {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid @icssBorder;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .symptomPushTagList {
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ }
|
|
|
+ .symptomPushTagPool {
|
|
|
+ height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ }
|
|
|
+ .symptomPushOperationPoolPush {
|
|
|
+ border: 1px dashed @icssBorder;
|
|
|
+ }
|
|
|
+ .symptomPushTagItem {
|
|
|
+ position: relative;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .symptomPushOperationPool {
|
|
|
+ position: relative;
|
|
|
+ width: 30%;
|
|
|
+ min-height: 300px;
|
|
|
+ padding: 10px 0;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .symptomPushTagName:before {
|
|
|
+ content: '['
|
|
|
+ }
|
|
|
+ .symptomPushTagName::after {
|
|
|
+ content: ']'
|
|
|
+ }
|
|
|
+ .symptomPushBottomPartMid {
|
|
|
+ width: 8%;
|
|
|
+ margin-top: 60px;
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .symptomPushBottomPartRight {
|
|
|
+ float: left;
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ .symptomPushButtonBox {
|
|
|
+ width: 10%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .symptomPushFollowButton {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .symptomPushInputBox {
|
|
|
+ width: 120px;
|
|
|
+ .el-input {
|
|
|
+ .el-input__inner {
|
|
|
+ height: 30px;
|
|
|
+ background: rgb(234, 231, 231);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .symptomPushTagItemPushBox {
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+ .symptomPushTagItemPush {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #aBcdef;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|