platformFront/src/components/icss/SymptomPush.vue

<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 clearfix">
      <p class="symptomPushPoolTitle">操作界面：</p>
      <ul v-for="(item, index) in rightTagsList" 
            :key="index"    
            class="symptomPushTagList symptomPushOperationPool"
            :class="{symptomPushOperationPoolPush:index === 1,  hasSymptomPush: index === 1&&item.id} "
            :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 ellipsis">   
                {{it.name}}
            </li>
        </ul>
        <div class="symptomPushTagListPartBox fl">
            <ul v-for="(item, index) in rightTagsList" 
                :key="index+'part'"    
                class="symptomPushTagListPart fl"
            >
                <p v-if="item.controlType" class="symptomPushTagListPartItem">{{getControlType(item.controlType)}} </p> 
                <p v-if="item.tagName" class="symptomPushTagListPartItem">{{item.tagName}} </p>  
            </ul>
        </div>
    </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
        },
        tipLis: {
            default: () => [],
            type: Array
        },
        type: {
            default: '',
            type: String
        },
        sexType: {
            default: '',
            type: String
        },
        options: {
            default: () => [],
            type: Array
        }
    },
    data() {
        return {
            leftTagsList: [],
            selectLeftTagId: {},    //标签池中选中标签
            rightTagsList: [{}, {}],
            currentSelectIndex: -1,    //选中操作界面索引
            currentTipLis:[],         //右侧选中的标签提示
            searchVal: '',
            styles:{
                background:'#eae7e7'
            },
        }
    },
    mounted() {
        this.currentTipLis = this.tipLis
        this.$nextTick(()=>{ 
            if(this.options.length) {
                if(this.options.length === 2) {     //当两个模块都有值时
                    this.rightTagsList = this.options
                    
                } else if(this.options.length === 1) {
                    this.options[0].controlType == 99 ? this.rightTagsList.splice(1, 1, this.options[0]) :this.rightTagsList.splice(0, 1, this.options[0])
                }
                 this.$emit('changeActionData',this.rightTagsList, false);
                this.searchTagList()
            }

        })
        
    },
    watch: {
        pool(newVal, preVal) {
            if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
                this.leftTagsList = newVal
            }
        },
        tipLis(newVal, preVal) {
            console.log(newVal,preVal)
            if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
                this.currentTipLis = newVal
            }
        },
        searchVal(newVal, preVal){
            if(newVal.trim() == ''){
                this.searchTagList()
            }else if(newVal.trim() != preVal.trim()){
                this.searchTagList()
            }
        },
    },
    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(Object.keys(this.selectLeftTagId).length === 0) { //判断标签池有没有选中标签
                this.$message({
                    showClose: true,
                    message: '请选择标签池',
                    type: 'warning'
                });
                return
            }
            let fillIndex = -1
            if(this.currentSelectIndex === -1) {    //操作界面没有选择模块时
                for(let i = 0; i < this.rightTagsList.length; i++) {
                    if(Object.keys(this.rightTagsList[i]).length === 0) {
                        fillIndex = i
                        break
                     }
                }

            } else {
                fillIndex = this.currentSelectIndex
            }
            if(fillIndex === -1) {
                this.$message({
                    showClose: true,
                    message: '请选择标签池',
                    type: 'warning'
                });
                return;
            } else {
                this.getcontrolType(fillIndex)
            }
            
           
        },
        getcontrolType(fillIndex) {
            if(fillIndex === 0) {
                    if(this.selectLeftTagId.controlType != 99) {
                        this.getRighDetailsTag(fillIndex)
                    } else {
                        this.$message({
                            showClose: true,
                            message: '请选择正确的标签类型',
                            type: 'warning'
                        });
                        return;
                    }  
                    
                } else if (fillIndex === 1) {
                    if(this.selectLeftTagId.controlType == 99) {
                        this.rightTagsList.splice(fillIndex, 1, this.selectLeftTagId)
                         this.searchTagList()
                        this.$emit('changeActionData',this.rightTagsList, false);
                    } else {
                        this.$message({
                            showClose: true,
                            message: '请选择正确的标签类型',
                            type: 'warning'
                        });
                        return;
                    }
                }
        },
        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) {
                        //    this.rightTagsList[this.currentSelectIndex] = this.selectLeftTagId;
                        this.rightTagsList.splice(this.currentSelectIndex, 1, this.selectLeftTagId)
                    } else {
                        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()
                    this.$emit('changeActionData',this.rightTagsList, false);
                 }
             })
        },
        SelectList(index) {
            
            this.currentSelectIndex = this.currentSelectIndex === index ? -1 : index;
        },
        getControlType(controlType) {
            for (let i = 0; i < this.currentTipLis.length; i++) {
                if(this.currentTipLis[i].val == controlType) {
                     return this.currentTipLis[i].name
                }
            }
           
        }
    }
}
</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;
    }
    .hasSymptomPush {
        background: #abcdef;
    }
    .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);
            }
        }
    }
    .symptomPushTagListPartBox {
        width: 100%;
    }
    .symptomPushTagListPart {
        width: 30%;
        padding: 5px;
    }
    .symptomPushTagListPartItem {
        display: inline-block;
        text-align: center;
        border: 1px solid #c0c4cc;
        padding: 2px 3px;
        border-radius: 5px;
        margin: 0 3px 3px 0;
    }
    .symptomPushTagItemPushBox {
        text-align: center
    }
    .symptomPushTagItemPush {
        display: inline-block;
        padding: 5px 10px;
    }

    .active {
        color: #aBcdef;
    }
}
</style>