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.name}}</p>
      <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"/>
    </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';
// 将获取到的数据源转换成私有数据，处理选择事件。点击完成后统一存到store中，便于回读
  export default {
    name:'Detail',
    data(){
      return{
        checkDatas:{},
        finished:false
      }
    },
    props:['datas','type','ppId'],
    created(){
      this.checkDatas = JSON.parse(JSON.stringify(this.datas));
    },
    components:{
      Radio,
      CheckBox,
      Input,
      ComTextArea
    },
    methods:{
      updataData(data){
        const origMapping = this.datas.questionMapping;
        let mapping = this.checkDatas.questionMapping;
        for(let i in origMapping){
          if(origMapping[i].id==data.id){
            mapping.splice(i,1,data)
          }
        }
      },
      saveData(){//存值
        this.finished = true;
        this.checkDatas = Object.assign({},this.checkDatas,{select:1});
        const datas = this.checkDatas.questionMapping;
        let text = "";
        for(let i in datas){
          if(datas[i].value){
            text += datas[i].value+'，';
          }
        }
        // let msg = this.checkDatas.name+ '，' + text.substring(0,text.length-1);
        let msg = this.checkDatas.name+ '，' + text;
        let newMsg = "";
        if(msg[msg.length-1] == '，'){
          newMsg = msg.substring(0,msg.length-1);
        }else{
          newMsg = msg
        }

        this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:this.type,ppId:this.ppId});
        // flag是区分点开已选症状 未点完成
        this.$store.commit('setText',{text:newMsg,pId:this.checkDatas.id,type:this.type,flag:true});
      },
      clearData(){//清空
        const datas = this.checkDatas.questionMapping;
        for(let i in datas){
          datas[i].value = "";
          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 = "";
              }
            }
          }
        }
        this.checkDatas = Object.assign({},this.checkDatas,{questionMapping:datas});
        let msg = 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,pId:this.checkDatas.id,type:this.type,flag:true});
      }
    },
  }
</script>
<style lang="less" scoped>
  .detail-wrap{
    padding: .3rem .5rem 1.2rem .6rem;
    font-size: .3rem;
    .quest{
      color:#000;
      margin-bottom: .2rem;
    }
  }
</style>