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">{{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"/>
      <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 MultiLineInput from '../common/MultiLineInput.vue';
import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
// 将获取到的数据源转换成私有数据，处理选择事件。点击完成后统一存到store中，便于回读
  export default {
    name:'Detail',
    data(){
      return{
        checkDatas:{},
        finished:false,
        imgUrl:imageUrlPrefix,
      }
    },
    props:['datas','type','ppId'],
    created(){
      this.checkDatas = JSON.parse(JSON.stringify(this.datas));
    },
    components:{
      Radio,
      CheckBox,
      Input,
      ComTextArea,
      MultiLineInput
    },
    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){
              mapping[i].value = '';
              mapping[i].valueP = '';
              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){
                  mapping[i].value += detList[n].name.replace(patt,detList[n].value)+'，';
                  mapping[i].valueP += (detList[n].description||detList[n].name).replace(patt,detList[n].value)+'，';
                }
              }
            }
          }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)
          }
        }
      },
      saveData(){//存值
        this.finished = true;
        this.checkDatas = Object.assign({},this.checkDatas,{select:1});
        const datas = this.checkDatas.questionMapping;
        let text = ""; //医生
        let textP = "";//患者
        for(let i in datas){
          if(datas[i].value){
            text += datas[i].value+'，';
            textP += datas[i].valueP+'，';
          }
        }
        
        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:this.checkDatas.id,type:this.type,ppId:this.ppId});
        // flag是区分点开已选症状 未点完成
        this.$store.commit('setText',{text:trimDots(newMsg),textP:trimDots(newMsgP),pId:this.checkDatas.id,type:this.type,flag:true});
      },
      clearData(){//清空
        const datas = this.checkDatas.questionMapping;
        for(let i in datas){
          datas[i].value = "";
          datas[i].valueP = "";
          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});
        let msg = this.checkDatas.name;
        let msgP = (this.checkDatas.description||this.checkDatas.name);
        this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
        this.$store.commit('setText',{text:msg,textP:msgP,pId:this.checkDatas.id,type:this.type,flag:true});
      },
      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;
      }
    },
  }
</script>
<style lang="less" scoped>
  .detail-wrap{
    // padding: .3rem .5rem 1.2rem .6rem;
    padding: .3rem .5rem 2rem .6rem;
    font-size: .3rem;
    .quest{
      color:#000;
      margin-bottom: .2rem;
    }
    .questionImg {
      width: 100%;
    }
  }
</style>