preliminary/src/components/Detail.vue

<template>
  <div class="detail-wrap">
    <!-- <div v-for="(item,index) in datas"> -->
    <div v-for="(item,index) in checkDatas.questionMapping">
      <p class="quest"><span v-show="item.required==1" style="color: red;">*</span>{{index + 1 +'.' + (item.description || item.name)}}</p>
      <img class="questionImg" :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
      <Radio v-if="item.controlType==1" 
            :item="item"
            :key="item.id"
            @updata="updataData"/>
      <RadioSelect v-if="item.controlType==8" 
            :item="item"
            :key="item.id"
            @updata="updataData"/>
      <CheckBox v-if="item.controlType==2" 
            :item="item"
            :key="item.id"
            @updata="updataData"/>
      <!-- 文本域 -->
      <ComTextArea v-if="item.controlType == 5"
            :item="item"
            @updata="updataData"/>
      <!-- 输入框 -->
      <Input v-if="item.controlType==6 || item.controlType==7"
            :item="item"
            :key="item.id"
            @updata="updataData"/>
      <template
        v-if="item.controlType == 3"
        v-for="(part,index) in item.questionDetailList"
      >
        <MultiLineInput
          v-if="item.controlType == 3"
          :msg="part.description||part.name"
          :part="part"
          @updata="updataData($event,item)"
        ></MultiLineInput>
      </template>
    </div>
  </div>
</template>
<script type="text/javascript">
import Radio from '../common/Radio.vue';
import CheckBox from '../common/CheckBox.vue';
import Input from '../common/Input.vue';
import ComTextArea from '../common/ComTextArea.vue';
import RadioSelect from '../common/RadioSelect.vue';
import MultiLineInput from '../common/MultiLineInput.vue';
import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
// 将获取到的数据源转换成私有数据，处理选择事件。点击完成后统一存到store中，便于回读
  export default {
    name:'Detail',
    data(){
      return{
        checkDatas:{},
        imgUrl:imageUrlPrefix,
      }
    },
    props:['datas','data'],
    created(){
      this.checkDatas = JSON.parse(JSON.stringify(this.datas));
    },
    components:{
      Radio,
      CheckBox,
      Input,
      ComTextArea,
      MultiLineInput,
      RadioSelect
    },
    methods:{
      updataData(data,item){
        const origMapping = this.datas.questionMapping;
        let mapping = this.checkDatas.questionMapping;
        for(let i in origMapping){
          if(data.controlType==3){//多列类型多一层
            if(mapping[i].id == item.id){
              let tempVal = '';
              let tempValP = '';
              let detList = mapping[i].questionDetailList;
              for(let k in detList){//替换
                if(detList[k].id==data.id){
                  detList.splice(k,1,data)
                }
              } 
              for(let n in detList){//给父级赋值
                if(detList[n].value){
                  tempVal += detList[n].name.replace(patt,detList[n].value)+'，';
                  tempValP += (detList[n].description||detList[n].name).replace(patt,detList[n].value)+'，';
                  // 去掉最后一个逗号
                  mapping[i].value = tempVal.substring(0,tempVal.length-1);
                  mapping[i].valueP = tempValP.substring(0,tempValP.length-1);
                }
              }
            }
          }else{
            if(origMapping[i].id==data.id){
              mapping.splice(i,1,data)
            }
          }
          
        }
        // 实时更新清空样式
        if(data.value){
          this.$emit('check',true)
        }else{
          let flag = this.check();
          if(flag){
            this.$emit('check',true)
          }else{
            this.$emit('check',false)
          }
        }
        // 更新完成样式
        let checkReq = this.checkReq();
        if(checkReq){
          this.$emit('checkReq',true)
        }else{
          this.$emit('checkReq',false)
        }
      },
      saveData(){//存值
        this.checkDatas = Object.assign({},this.checkDatas,{select:1});
        const datas = this.checkDatas.questionMapping;
        const id = this.checkDatas.id;
        let chooseSymp = this.$store.state.symptom.choose;
        
        let text = ""; //医生
        let textP = "";//患者
        let special = ""; //拼到主诉
        let specialP = "";
        for(let i in datas){
          // 校验必填项
         /* if(datas[i].required==1 && !datas[i].value){
            alert("请先将必填项填完");
            return
          }*/
          // 拼到主诉
          if(datas[i].specFlag==1 && datas[i].value){
            special += datas[i].value;
            specialP += datas[i].valueP;
          }
          if(datas[i].value){
            text += datas[i].value+'，';
            textP += datas[i].valueP+'，';
          }
        }
        if(special){//拼接到主诉的内容存到chooseSymp
          for(let k in chooseSymp){
            if(id == (chooseSymp[k].id ||chooseSymp[k].questionId)){
              chooseSymp[k].special = special;
              chooseSymp[k].specialP = specialP;
            }
          }
        }
        
        let msg = this.checkDatas.name+ '，' + text;
        let msgP = (this.checkDatas.description || this.checkDatas.name)+ '，' + textP;
        let newMsg = "";
        let newMsgP = "";
        if(msg[msg.length-1] == '，'){
          newMsg = msg.substring(0,msg.length-1);
          newMsgP = msgP.substring(0,msgP.length-1);
        }else{
          newMsg = msg;
          newMsgP = msgP;
        }
        this.$store.commit('setDatas',{data:this.checkDatas,pId:id,type:this.data.moduleType,ppId:this.data.ppId});
        // flag是区分点开已选症状 未点完成
        this.$store.commit('setText',{text:trimDots(newMsg),textP:trimDots(newMsgP),pId:id,type:this.data.moduleType,flag:true,order:this.data.order,arrFlag:true,index:this.data.index});
        // 关闭详情
        this.$store.commit('setDetail',{detail:{}})
      },
      clearData(){//清空
        // const datas = this.checkDatas.questionMapping;
        const datas = JSON.parse(JSON.stringify(this.checkDatas.questionMapping))
        let reqFlag = false;//必填项标识
        for(let i in datas){
          datas[i].value = "";
          datas[i].valueP = "";
          if(datas[i].required==1){
            reqFlag = true;
          }
          let detaiList = datas[i].questionDetailList;
          if(detaiList.length>0){
            for(let k in detaiList){
              detaiList[k].select = 0;
              if(detaiList[k].value){
                detaiList[k].value = "";
                detaiList[k].valueP = "";
              }
            }
          }
        }

        this.checkDatas = Object.assign({},this.checkDatas,{questionMapping:datas});
        // 已有选中内容重新进来，点清空时并非真的清空
        if(this.checkDatas.select ==1){return}
        let msg = this.checkDatas.name;
        let msgP = (this.checkDatas.description||this.checkDatas.name);
        // 没有点过完成直接选择然后清空，外层不会处于选中状态,故没有必填项时添加{select:1}
        if(reqFlag){
          this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.data.moduleType,ppId:this.data.ppId});
        }else{
          this.$store.commit('setDatas',{data:Object.assign({},this.checkDatas,{select:1}),pId:this.checkDatas.id,type:this.data.moduleType,ppId:this.data.ppId});
        }
        
        this.$store.commit('setText',{text:msg,textP:msgP,pId:this.checkDatas.id,type:this.data.moduleType,flag:true,order:this.data.order,arrFlag:true,index:this.data.index});
      },
      check(){// 校验是否有已填项
        const datas = this.checkDatas.questionMapping;
        let checkArr = [];
        for(let i in datas){
          if(datas[i].value){
            checkArr.push(datas[i]);
          }
          let detaiList = datas[i].questionDetailList;
          if(detaiList.length>0){
            for(let k in detaiList){
              if(detaiList[k].select == 1){
                checkArr.push(detaiList[k]);
              }
            }
          }
        }

        if(checkArr.length>0){
          return true;
        }
        return false;
      },
      checkReq(){// 校验必填项
        const datas = this.checkDatas.questionMapping;
        for(let k in datas){
          if(datas[k].required==1 && !datas[k].value){
            return false;
          }
        }
        return true;
      }
    },
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .detail-wrap{
    // padding: .3rem .5rem 1.2rem .6rem;
    padding: .3rem .4rem 1rem ;
    font-size: .3rem;
    .quest{
      color:#colors[quest];
      margin-bottom: .2rem;
    }
    .questionImg {
      width: 100%;
    }
  }
</style>