preliminary/src/common/Radio.vue

<template>
 <!-- <portal to="notification-outlet">-->
  <div class="select">
    <ul class="clearfix">
      <li
        v-for="(item,idx) in result"
        :class="[{'liSelect':item.select,'noBorder':((item.description||item.name).indexOf('${'))!=-1}]"
        :key="item.id"
        @click="selectResult(item,idx)"
      >
        <span v-if="((item.description||item.name).indexOf('${'))==-1">{{item.description||item.name}}</span>
        <OptionInp v-else :item="item" @handleInp="inpVal($event,idx)" @handleSelec="handleClick(item,idx,false,true)"/>
      </li>
    </ul>
    <div :class="sure?'realSure sure':'sure'" @click="makeSuer">
      确定
    </div>
  </div>
  <!--</portal>-->
</template>
<script>
  import OptionInp from '../common/OptionInp.vue';
  import {concatVal} from '../utils/tools.js';
export default {
  props: ["symptomResult","num"],
  data() {
    return {
      result: [], //答案结果
      connectResult: [], //id
      contentResult: "", //name
      rules: [], //规则所需数据value
      sure:false,
      numPlus:1
    };
  },
  mounted() {
    this.numPlus = this.num;
    const list = this.symptomResult.questionDetailList;
    this.result = list.length>0?list:this.symptomResult.questionMapping;
  },
  watch:{
    result: {
      handler(newArr) {
        let num = 0;
        for(let i = 0;i < newArr.length;i++){
          if(!newArr[i].select){
            ++num
          }
        }
        if(num == newArr.length){
          this.sure = false
        }else{
          this.sure = true
        }
      },
      immediate: true,
      deep:true
    }
  },
  methods: {
    inpVal(val,index){//输入框失焦处理
      // 输入框回读
      let detailList = this.result;
      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);*/
    },
    handleClick(it,index,flg,ipt){
      if(flg){
        document.activeElement.blur();
        document.activeElement.scrollIntoViewIfNeeded(true);
        setTimeout(()=>{
          document.activeElement.scrollIntoViewIfNeeded(true);
        },300)
      }
      const list = this.datas;
      let data = list.questionDetailList&&list.questionDetailList.slice(0); //数组深拷贝
      if(ipt){//输入框单选，输入了内容才算选中,删除内容算取消
        for(let i=0;i<data.length; i++){
          if(i==index){
            data[i].select=data[i].value?1:0;
          }else{
            data[i].select = 0
          }
        }
      }else{
        for(let i=0;i<data.length; i++){
          if(i==index){
            data[i].select = data[i].select==1?0:1;
          }else{
            data[i].select = 0
          }
        }
      }
      let temp = concatVal(data);
      const newData = Object.assign({},this.datas,{questionDetailList:data,value:temp.value,valueP:temp.valueP});
      this.$emit("updata",newData);
    },
    makeSuer() {
      if(!this.sure){return}
      let result = this.result;
      let number = this.numPlus,tmpResult='';
      for (let i = 0; i < result.length; i++) {
          if(result[i].select){
            tmpResult=result[i].description||result[i].name
          }
        }
        this.contentResult = tmpResult;
      this.$emit("updataResultSingle", this.result, this.contentResult,++number);
    },
    selectResult(item,idx) {
      const { select } = item;
      let result = JSON.parse(JSON.stringify(this.result))
      if (select) {//判断是否选中,选中的取消,关联id删除，未选中判断是否互斥
        for (let i = 0; i < result.length; i++) {
          if(i == idx){
            result[i].select = false
          }
        }
      }else{
        for (let i = 0; i < result.length; i++) {
          if(i == idx){
            result[i].select = true
          }else{
            result[i].select = false
          }
        }
      }
      this.result = result
    }
  },
  components:{
    OptionInp
  }
};
</script>
<style lang="less" scoped>
  @import "../less/base.less";
.select {
  background-color: #fff;
  padding: 0.3rem 0 0;
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  li {
    padding: 0.14rem 0.2rem;
    border:1px #DFE0E4 solid;
    border-radius: 0.36rem;
    font-size: 0.26rem;
    margin: 0.15rem;
    float: left;
    color: #666;
    &.noBorder{
      border: none;
      width: 100%;
     }
  }
  .liSelect {
    color: #fff;
    background-color: #colors[btn];
    border-color:  #colors[btn];
  }
}
</style>