preliminary/src/common/Label.vue

<template>
  <div class="label-wrap bgques" 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,true)">
      <span>{{it.description||it.name}}</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>
  import Toast from '../common/Toast.vue';
  import {moduleCP} from '@utils/tools';
  import $ from 'jquery';
  export default {
    name:'Label',
    data(){
      return{
        datas:{},
        checkTxt:[],
        showToast:false,
        delText:"是否取消当前选中内容？",
        tempItem:{},
        exclusion:999, //互斥
        delIndx:null
      }
    },
    props:['item','moduleType','ppId','order'],
    created(){
      this.datas = this.item;
      // 回读互斥项标识
      const arr = this.datas.questionMapping;console.log(this.item,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,flg){
        if(flg){
          document.activeElement.blur();
          document.activeElement.scrollIntoViewIfNeeded(true);
          setTimeout(()=>{
            document.activeElement.scrollIntoViewIfNeeded(true);
          },300)
        }
        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  arrFlag:true说明要区分pId
        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,textP:(it.description||it.name),pId:it.id,order:this.order,index:index,arrFlag:true});
        if(it.questionMapping&&it.questionMapping.length>0){//有明细
          this.$store.commit('setDetail',{detail:it,ppId:this.ppId,moduleType:this.moduleType,order:this.order,index:index})
        }
      },
      deletSymp(e,it,index){
        e.stopPropagation();
        // 删除互斥项（无）不弹窗提醒 7-18
        this.delIndx = index;
        this.tempItem = it;
        if(it.exclusionType == 1){
          this.comfirnDel();
          return
        }
        this.showToast = true;
        $(".btscroll").css({'position':'fixed'})
        $(".foot").css({'position':'fixed','bottom':'0'})
        // 底部body不可滑动
        // const prehandler = function(e){e.preventDefault();}
        // document.body.addEventListener("touchmove",prehandler,false)
      },
      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,order:this.order,index:this.delIndx});
        this.cancelDel();
      },
      cancelDel(){
        this.showToast = false;
        $(".btscroll").css({'position':'absolute','top':'0'})
        $(".foot").css({'position':'absolute','bottom':'0'})
        this.tempItem = {};
        this.delIndx = null;
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .label-wrap{
    font-size: .3rem;
     .symp{
      display: inline-block;
      min-width:2.05rem;
      height: .72rem;
      border-radius: .08rem;
      span{
        display: inline-block;
        vertical-align: top;
      }
      span:first-child{
        min-width:1.42rem;
        height: .72rem;
        line-height: .72rem;
        text-align: center;
      }
      img{
        width:.48rem;
        height: .70rem;
        vertical-align: top;
        z-index: 22;
      }
    }
    .symp:last-child{
      margin-right: 0;
    }
    .check{
      color: #fff;
      background: #colors[btn];
    }
    .exclu{
      // background:#E3E4E8;
    }
  }

</style>