preliminary/src/common/Label.vue

<template>
  <div class="label-wrap" v-if="item">
    <p v-for="(it,index) in datas.questionMapping" :key="it.id" :class="['symp',{'check':it.select==1},{'exclu':exclusion !==999 && it.exclusionType !== exclusion}]" @click="handleClick(it,index)">
      <span>{{it.description||it.name}}</span>
      <!-- <span v-if="it.select==1" @click="deletSymp($event,it,index)"><img src="../images/delete.png" alt=""></span> -->
      <span v-if="it.select==1" @click="deletSymp($event,it,index)"><img src="../images/del.png" alt=""></span>
    </p>
    <Toast :message="delText" 
          :show="showToast"
          @comfirn="comfirnDel" 
          @cancel="cancelDel"/>
  </div>
</template>
<script type="text/javascript">
import Toast from '../common/Toast.vue';
import {moduleCP} from '@utils/tools';
  export default{
    name:'Label',
    data(){
      return{
        datas:{},
        checkTxt:[],
        showToast:false,
        delText:"是否取消当前选中内容？",
        tempItem:{},
        exclusion:999 //互斥
      }
    },
    props:['item','moduleType','ppId'],
    created(){
      this.datas = this.item;
      // 回读互斥项标识
      const arr = this.datas.questionMapping;
      const filArr = arr.filter(it=>it.select==1);
      if(filArr.length > 0){
        this.exclusion = filArr[0].exclusionType;
      }
    },
    components:{
      Toast
    },
    methods:{
      handleClick(it,index){
        const arr = this.datas.questionMapping;
        const excluArr = arr.filter(it=>it.exclusionType==1);
        const filArr = arr.filter(it=>it.select==1);
        if(excluArr.length>0){//有互斥
          if(filArr.length>0){//有选中
            if(it.exclusionType !== filArr[0].exclusionType){
              return
            }
          }
          this.exclusion = it.exclusionType;
        }
        const newItem = Object.assign({},it,{select:1});
        const origMapping = this.item.questionMapping;
        let mapping = this.datas.questionMapping;
        for(let i in origMapping){
          if(origMapping[i].id==it.id){
            mapping.splice(i,1,newItem)
          }
        }
        // 存值到store
        this.$store.commit('setDatas',{type:this.moduleType,data:newItem,pId:this.datas.id,ppId:this.ppId});
        this.$store.commit('setText',{type:this.moduleType,text:it.name,pId:it.id});
        if(it.questionMapping&&it.questionMapping.length>0){//有明细
          this.$emit("setDetail",{detail:it,ppId:this.ppId})
        }
      },
      deletSymp(e,it,index){
        e.stopPropagation();
        // 删除互斥项（无）不弹窗提醒 7-18
        this.tempItem = it;
        if(it.exclusionType == 1){
          this.comfirnDel();
          return
        }
        this.showToast = true;
      },
      comfirnDel(){
        const temp = this.tempItem;
        // 从store中取origin的值
        let origin,newItem;
        if(this.moduleType==moduleCP['diagT']){
          origin = this.$store.state.diagnose.origin
        }else if(this.moduleType == moduleCP['other']){
          origin = this.$store.state.others.origin
        }
        if(origin){
          for(let i in origin){
            if(origin[i].id==this.ppId){
              let origItem = origin[i].questionMapping;
              for(let j in origItem){
                if(origItem[j].id==temp.id){
                  newItem = origItem[j];
                }
              }
            }
          }
          let mapping = this.datas.questionMapping;
          for(let n in mapping){
            if(mapping[n].id==temp.id){
              mapping.splice(n,1,newItem)
            }
          }
        }
        // 是否解除互斥
        const arr = this.datas.questionMapping;
        const filArr = arr.filter(it=>it.select==1);
        if(filArr.length==0){
          this.exclusion = 999;
        }
        //存值
        this.$store.commit('setDatas',{type:this.moduleType,data:newItem,pId:this.datas.id,ppId:this.ppId});
        this.$store.commit('delText',{type:this.moduleType,pId:temp.id});
        this.cancelDel();
      },
      cancelDel(){
        this.showToast = false;
        this.tempItem = {};
      }
    }
  }
</script>
<style lang="less" scoped>
  .label-wrap{
    font-size: .3rem;
     .symp{
      // position: relative;
      display: inline-block;
      min-width:1.9rem;
      height: .72rem;
      span{
        display: inline-block;
        vertical-align: top;
      }
      span:first-child{
        // min-width:1.34rem;
        min-width:1.42rem;
        height: .72rem;
        line-height: .72rem;
        text-align: center;
      }
      img{
        // width:.56rem;
        width:.48rem;
        height: .70rem;
        vertical-align: top;
        z-index: 22;
        // position: absolute;
        // top:0;
        // right: 0;
      }
    }
    .symp:last-child{
      margin-right: 0;
    }
    .check{
      color: #fff;
      // background: linear-gradient(-270deg, #4F4FFF, #4F8BFF);
      background: linear-gradient(-270deg, #3638EE, #4E72FF);
      box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
      // padding-right: 0.57rem;
    }
    .exclu{
      // background:#f0f1f5;
      background:#E3E4E8;
    }
  }
  
</style>