preliminary/src/components/DiagTreat.vue

<template>
  <div class="treat-wrap">
    <div v-for="(it,i) in dtoList" 
        v-if="dtoList"
        :key="it.id">
      <div class="label" v-if="it.controlType==0">
        <p class="quest">{{it.name}}</p>
        <span v-for="(item,indx) in it.questionMapping" class="symp" @click="handleClick(item,indx,i)">
          {{item.name}}
          <i v-if="item.select==1" @click="deletSymp(item,indx)"><img src="../images/delete.png" alt=""></i>
        </span>
      </div>
      <UploadImg v-if="it.controlType==4" 
            :item="it" 
            :moduleType="datas.type"
            :imgList="imgs"
            />
    </div>
    <div class="result">
      <p class="title">治疗情况</p>
      <p>经典款了估计的结果</p>
    </div>
    <div class="foot">
      <span class="back" @click="beBack">{{'返回'+ preName}}</span>
      <span class="next" @click="toNext">{{'进入'+ nextName}}</span>
    </div>
    <!-- <div class="detail" v-if="show">
      <DetailBox @close="closeDetal" 
              :data="labelDetail" 
              v-if="labelDetail.questionMapping&&labelDetail.questionMapping.length>0"
              @pComplete="complete"/>
    </div>
    <Toast :message="delText" 
          :show="showToast"
          @comfirn="comfirnDel" 
          @cancel="cancelDel"/> -->
  </div>
</template>
<script type="text/javascript">
  import UploadImg from '../common/UploadImg.vue'
  export default {
    name:'DiagTreat',
    data(){
      return{
        msg:"诊疗情况",
        chooseSymp:[{name:'未治疗'}],
        imgs:this.$store.state.diagnose.imgSrc,
        dtoList:[], //选项
        details:[], //明细
        chooseTxt:{} //选中的文字
      }
    },
    props:['datas','preName','nextName'],
    created(){
      let dataArr = this.datas&&this.datas.moduleDetailDTOList;
      if(dataArr){
        this.dtoList = JSON.parse(JSON.stringify(dataArr));
      }
    },
    methods:{
      beBack(){
        this.$emit('back');
      },
      toNext(){
        this.$emit('next');
      },
      handleClick(item,index,pIndex){ 
        // 存值到store并实现及时更新
        let value = item.name;
        let currMapping = JSON.parse(JSON.stringify(this.dtoList[pIndex].questionMapping));
        currMapping[index].select = 1
        this.dtoList[pIndex] = Object.assign({},this.dtoList[pIndex],{questionMapping:currMapping},{value:value})
         console.log(222,this.dtoList[pIndex],currMapping)
      },
      deletSymp(item,index){
        console.log(456,item)
      }
    },
    components:{
      UploadImg
    },
    watch:{
      dtoList:{
        handler(newVal,oldVal){
          console.log("诊疗数据更新:",newVal,oldVal); 
        },
        deep:true
      }
    },
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .treat-wrap{
    font-size: .3rem;
    .quest{
      color: #000;
      margin-bottom: .36rem;
      font-weight: 700;
    }
    .label{
      .label;
      img{
        width:.56rem;
        height: .74rem;
        vertical-align: top;
      }
    }
    .result{
      .title{
        color: #4F50FF;
        padding-left: .1rem;
        border-left: .08rem solid #4F50FF;
        margin-bottom: .19rem;
        font-weight: 700;
      }
      p{
        color: #666;
        line-height: .44rem;
      }
    }
    .choose{
      color:#fff;
      background: linear-gradient(-270deg, #4F4FFF, #4F8BFF);
      box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
    }
  }
  .foot{
    .dbfooter;
  }
  
</style>