preliminary/src/common/Select.vue

<template>
  <portal to="notification-outlet">
  <div class="select" @touchmove.prevent>
    <ul class="clearfix">
      <li
        v-for="(item,idx) in result"
        :class="[{'liSelect':item.select,'noBorder':((item.description||item.name).indexOf('${'))!=-1}]"
        :key="item.id"

      >
        <span v-if="((item.description||item.name).indexOf('${'))==-1" @click="selectResult(item,idx)">{{item.description||item.name}}</span>
        <OptionInp v-else :item="item" @handleInp="inpVal" :inx="idx" @handleSelect="selectResult(item,idx)"/>
      </li>
    </ul>
    <div :class="sure?'realSure sure':'sure'" @click="makeSuer">
      确定 <span v-if="numPlus">({{numPlus}})</span>
    </div>
  </div>
  </portal>
</template>
<script>
  import OptionInp from '../common/OptionInp.vue';
  import {concatVal,getExpStr} from '../utils/tools.js';
  import api from '@utils/api.js';
export default {
  props: ["symptomResult","num"],
  data() {
    return {
      result: [], //答案结果
      connectResult: [], //id
      contentResult: "", //name
      rules: [], //规则所需数据value
      sure:false,
      numPlus:0     //已选答案个数
    };
  },
  mounted() {
    //this.numPlus = this.num
    //console.log(this.symptomResult.questionDetailList)
    this.result = this.symptomResult.questionDetailList;
  },
  watch:{
    result: {
      handler(newArr) {
        let num = 0,sldNum=0;
        for(let i = 0;i < newArr.length;i++){
          if(!newArr[i].select){
            ++num;
          }else{
            newArr[i].exclusion!=1&&sldNum++;
          }
        }
        this.numPlus =sldNum;
        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;
    },
    /*handleClick(it,index,flg,ipt){
      if(flg){
        document.activeElement.blur();
        document.activeElement.scrollIntoViewIfNeeded(true);
        setTimeout(()=>{
          document.activeElement.scrollIntoViewIfNeeded(true);
        },300)
      }
    },*/
    getExtQa(ids){
      const userInfo = this.$store.state.pathInfo;
      const param = {
        age:userInfo.patientAge,
        ids:ids,
        sexType:userInfo.sexType
      };
      return new Promise((resolve,reject)=>{
        api.getByIds(param).then((res)=>{
          resolve(res);
        });
      })
    },
    async makeSuer() {
      if(!this.sure){return}
      let result = this.result;
      // if(this.numPlus == 1){
        let tmpResult=[],tmpResultp=[],subQas='';
        for (let i = 0; i < result.length; i++) {
          const text=result[i].name;
          const textp=result[i].description||result[i].name;
          const msg = getExpStr(text);
          const msgp = getExpStr(textp);
          if(result[i].select){
            subQas = subQas+","+result[i].subQuestion;
            if(result[i].name.indexOf("${")!==-1){
              if(!result[i].value){
                this.$emit("warning","选中项输入框必填");
                return;
              }
              tmpResult.push(msg.prefix+(result[i].value||"")+msg.suffix);
              tmpResultp.push(msgp.prefix+(result[i].value||"")+msgp.suffix);
            }else {
              //tmpIds=tmpIds.concat(result[i].connectId)
              tmpResult.push(text);
              tmpResultp.push(textp);
            }
          }
        }
        subQas=subQas.replace(/^,|,$/g,'').replace(/,+/g,',');
        const subQs=subQas.split(",");
        if(subQas){
          await this.getExtQa(subQs).then((res)=>{
            this.$emit("getExtQa",res.data.data,this.num,subQs.length);
          });
        }
        //tmpIds=tmpIds.concat(staticArr)
        //this.connectResult = tmpIds
        //this.contentResult = tmpResult.join('、')
      // }else{

      // }
      if(+this.symptomResult.flag===2){   //为诱因控件
        const orgChoose = this.$store.state.symptom.choose;
        orgChoose[0].reason = tmpResult;
        orgChoose[0].reasonP = tmpResultp;
        this.$store.commit('setChoose', { choose: orgChoose, type: 1 });
      }
      let number = this.num;
      this.$emit("updataResult", this.symptomResult,  {val:tmpResult.join('、'),valp:tmpResultp.join('、')},++number);
    },
    selectResult(item,idx) {
      const { exclusion, select, value } = item;
      let result = JSON.parse(JSON.stringify(this.result));
      if (select&&!value) {//判断是否选中,选中的取消,关联id删除，未选中判断是否互斥
        for (let i = 0; i < result.length; i++) {
          if(i == idx){
            result[i].select = false
          }
        }
      }else{
        if(+exclusion === 1){
          for (let i = 0; i < result.length; i++) {
              if(i == idx){
                result[i].select = true
              }else{
                result[i].select = false
              }
          }
        }else{
          for (let i = 0; i < result.length; i++) {
            if(result[i].select&&+result[i].exclusion === 1){
              result[i].select=false
            }else{
              if(i == idx&&value){
                result[i].select = true
              }
            }
          }
        }
      }
      this.result = result
    }
  },
  components:{
    OptionInp
  }
};
</script>
<style lang="less" scoped>
  @import "../less/base.less";
.select {
  background-color: #fff;
  padding: 0.28rem 0 0 0;
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  box-shadow: 0 0 30px -10px rgba(104, 124, 189, 0.25);
  li {
    padding: 0.14rem 0.2rem;
    border:1px #DFE0E4 solid;
    border-radius: 0.36rem;
    font-size: #font[select];
    margin: 0.15rem;
    float: left;
    color: #colors[text];
  }
  .liSelect {
    color: #fff;
    background-color: #colors[btn];
    border-color:  #colors[btn];
  }
  .noBorder{
    border: none;
    width: 100%;
    padding: 0 0.2rem;
    margin: 0 0.15rem;
    &.liSelect{
       background: none;
    }
  }
}
</style>