preliminary/src/common/CheckBox.vue

<template>
  <div class="check-wrap" v-if="item">
    <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,'',true)"> -->
      <p v-for="(it,index) in datas.questionDetailList" :key="it.id" :class="['list',{'block':((it.description||it.name).indexOf('${'))!=-1}]" @click="handleClick(it,index,'',true)">
      <img :src="it.select==1?check:defaultPic">
      <span v-if="((it.description||it.name).indexOf('${'))==-1" :class="[{'check':it.select==1},{'exclu':exclusion !==999 && it.exclusion !== exclusion}]">{{it.description||it.name}}</span>
      <OptionInp v-else 
          :item="it" 
          ref="inp"
          @handleInp="inpVal($event,index)" 
          @handleSelec="handleClick(it,index,true)"
          :exclu="exclusion !==999 && it.exclusion !== exclusion" 
          />
    </p>
  </div>
</template>
<script type="text/javascript">
import {imageUrlPrefix,patt,concatVal} from '@utils/tools.js';
import icon from '../images/check-default.png';
import checkIcon from '../images/check.png';
import MultiLineInput from '../common/MultiLineInput.vue';
import OptionInp from '../common/OptionInp.vue';
  export default{
    name:'CheckBox',
    data(){
      return{
        imgUrl:imageUrlPrefix,
        defaultPic:icon,
        check:checkIcon,
        datas:{},
        exclusion:999 //互斥
      }
    },
    props:['item'],
    created(){
      // this.datas = JSON.parse(JSON.stringify(this.item));
      this.datas = this.item;
      this.resetExc();
    },
    methods:{
      handleClick(it,index,flag,flg){
        if(flg){
          document.activeElement.blur();      
          document.activeElement.scrollIntoViewIfNeeded(true);
          setTimeout(()=>{
            document.activeElement.scrollIntoViewIfNeeded(true);
          },300)
        }
        const that = this;
        const list = this.datas;
        let data = list.questionDetailList&&list.questionDetailList.slice(0);
        // 处理互斥
        const excluArr = data.filter(it=>it.exclusion==1);
        const filArr = data.filter(it=>it.select==1);

        if(excluArr.length>0){//有互斥
          if(filArr.length>0){//有选中
            if(it.exclusion !== filArr[0].exclusion){
              return
            }
          }
          this.exclusion = it.exclusion;  
        }
        // 处理选中状态
        if(flag){//输入框反选
          data[index].select = 1;
          this.exclusion = it.exclusion;
        }else{
          if(data[index].select){
            data[index].select = 0;
          }else{
            data[index].select = 1;
            this.exclusion = it.exclusion;
          }
        }
        
        // 处理取消-互斥
        const filArr1 = data.filter(it=>it.select==1);
        if(excluArr.length>0){//有互斥
          if(filArr1.length==0){//无选中
            this.exclusion = 999;
          }else{
            this.exclusion = filArr1[0].exclusion;
          }
        }
        let temp = concatVal(data);
        const newData = Object.assign({},this.datas,{questionDetailList:data},{value:temp.value?temp.value:''},{valueP:temp.valueP?temp.valueP:''});
        this.$emit("updata",newData);
      },
      inpVal(val,index){//输入框失焦处理
        // 输入框回读
        let detailList = this.datas.questionDetailList;
        let currItem = detailList[index];
        currItem.value = val;
        // 输入框失焦重新拼接父级的value
        let temp = concatVal(detailList);
        this.datas.value = temp.value;
        this.datas.valueP = temp.valueP;
        this.$emit("updata",this.datas);
      },
      resetExc(){
        // 回读互斥项标识
        const arr = this.datas.questionDetailList;
        const filArr = arr.filter(it=>it.select==1);
        if(filArr.length > 0){
          this.exclusion = filArr[0].exclusion;
        }else{
          this.exclusion = 999;
        }
      }
    },
    watch:{
      item:{
        handler(newVal,oldVal){
          this.datas = JSON.parse(JSON.stringify(newVal));
          this.resetExc();
        },
        deep:true
      }
    },
    components:{
      MultiLineInput,
      OptionInp
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .check-wrap{
    img{
      width:100%;
    }
    .block{
      width:100%;
    }
    .list{
      color: #colors[text];
      margin:0 .1rem .1rem 0;
      padding: .12rem .1rem;
      display: inline-block;
      white-space: nowrap;
      overflow-x: hidden;
      img{
        width: .38rem;
        vertical-align: middle;
      }
      >span{
        white-space: normal;
        vertical-align: middle;
      }
    }
    .check{
      color: #colors[theme];
    }
    .exclu{
      color:#colors[exclu];
    }
  }
</style>