preliminary/src/components/Symptom.vue

<template>
  <div class="symp-wrap">
    <div class="choose" v-if="chooseSymp.length>0">
      <p class="quest">已选症状</p>
      <p class="choo-symp" v-for="(v,i) in chooseSymp">
        <span>{{v.name}}</span>
        <span @click="deletSymp(v,i)"><img src="../images/delete.png" alt=""></span>
      </p>
    </div>
    <div class="label">
      <p class="quest">请问您有哪些不适？</p>
      <span class="symp" 
      v-for="(it,ind) in symp" 
      :key="it.conceptId"
      @click="showDetil(it)">{{it.name}}</span>
    </div>
    <div class="result" v-if="JSON.stringify(checkText) !== '{}'">
      <p class="title">症状情况</p>
      <p v-for="(value,key,index) in checkText">{{value}}</p>
    </div>
    <div :class="['footer',{'nofoot':chooseSymp.length==0}]" @click="toNext">下一步</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 api from '@utils/api.js';
import DetailBox from './DetailBox.vue';
import Toast from '../common/Toast.vue';
  export default {
    name:'Symptom',
    data(){
      let {datas,update} = this.$store.state;
      const {pathInfo,originDatas} = this.$store.state;
      return {
        age:pathInfo.patientAge,
        sexType:pathInfo.patientSex=='男'?1:(pathInfo.patientSex=='女'?2:3),
        deptName:pathInfo.selfDeptName,
        hosCode:pathInfo.hospitalCode,
        choose:false,
        check:false,
        show:false, //显示明细
        chooseSymp:[], //已选症状
        symp:[], //症状
        labelDetail:{}, //明细
        checkText:{}, //选中拼好的明细
        questId:null, //id
        // symptomName:'', //点击的症状名称
        delText:"是否删除该信息？ （已填内容将清除）",
        delIndex:null,
        showToast:false,
        finished:false,   //是否填写了明细
        upData:update
      }
    },
    created(){
      this.getSympList();
    },
    methods:{
      getSympList(){ 
        const param = {
          "age":this.age,
          "deptName":this.deptName,
          "sexType":this.sexType
        }
        api.getSymptom(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.symp = result.data;
          }
        })
      },
      toNext(){
        // 把1切换成完成图标，且2高亮
        if(this.chooseSymp.length==0){return}
        this.$emit('next');
      },
      showDetil(item){
        this.chooseSymp.push(item);
        // this.questId = item.conceptId;
        this.questId = item.questionId;
        const param = {
          "age":this.age,
          "id":item.questionId,
          "sexType":this.sexType
        }
        api.getById(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            const mapping = result.data.questionMapping;
            this.labelDetail = result.data;
            this.$store.commit('setOrigin',result.data);
            // this.$store.commit('getUpdate');
            if(mapping&&mapping.length>0){
              this.show = true;
            } 
          }
        })
        // 推理 
        const sympText = this.getSympText();
        this.getPush(sympText);
      },
      getSympText(){
        let sympText = "";
        for(let k in this.chooseSymp){
          sympText += this.chooseSymp[k].name;
        }
        return sympText;
      },
      getPush(symptoms){//推理
        const param = {
          "age":this.age,
          "hosCode":this.hosCode,
          "sex":this.sexType,
          "symptom":symptoms //症状+选择的明细,string
        }
        api.getPush(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.symp = result.data.symptom;
          }
        })
      },
      closeDetal(msg){
        const questId = this.questId;
        this.getPush(msg);
        // this.checkText = Object.assign({},this.checkText,{[questId]:msg});
        this.show = false;
        this.questId = null;
      },
      deletSymp(item,index){
        this.delIndex = index;
        this.questId = item.questionId;
        if(this.chooseSymp.length==1){
          this.delText = "是否删除该信息？删除后将重新填写预问诊流程 （已填内容将清除）"
        }
        this.showToast = true;
      },
      comfirnDel(){
        this.chooseSymp.splice(this.delIndex,1);
        delete(this.checkText[this.questId]);
        // 删除完-常见；其他-推送
        if(this.chooseSymp.length>0){
          const sympText = this.getSympText();
          this.getPush(sympText);//删除后重新调推理-入参：拼好的内容
        }else{
          this.getSympList();
        } 
        this.cancelDel();
      },
      cancelDel(){
        this.showToast = false;
        this.delIndex = null;
        this.questId = null;
        this.delText = "是否删除该信息？ （已填内容将清除）";
      },
      complete(msg){//明细填写完成
        // 获取选择后的明细数据-拼接症状情况-关闭明细弹窗
        // let text = this.symptomName + text;
        this.checkText = Object.assign({},this.checkText,{[this.questId]:msg});
        this.show = false;
        this.questId = null;
      }
    },
    components:{
      DetailBox,
      Toast
    },
    computed:{
      getQuestId(){
        return this.upData;
      }
    },
    watch:{
      getQuestId:{
        handler(newVal,oldVal){
          console.log("数据更新了11",newVal,oldVal);
          let datas = this.$store.state.datas;
          let originDatas = this.$store.state.originDatas;
          this.labelDetail = datas[this.questId] || originDatas[this.questId];
        },
        deep:true
      }
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .symp-wrap{
    font-size: .3rem;
    .quest{
      color: #000;
      margin-bottom: .36rem;
      font-weight: 700;
    }
  }
  .choose{
    padding-bottom: .2rem;
    .choo-symp{
      display: inline-block;
      width:1.9rem;
      height: .74rem;
      background: linear-gradient(-270deg, #4F4FFF, #4F8BFF);
      box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
      border-radius: .08rem;
      white-space: nowrap;
      margin: 0 .3rem .3rem 0;
      span{
        display: inline-block;
        vertical-align: top;
      }
      span:first-child{
        width:1.34rem;
        height: .74rem;
        line-height: .74rem;
        text-align: center;
        color: #fff;
      }
      img{
        width:.56rem;
        height: .74rem;
      }
    }
  }
  .label{
    padding-bottom: .2rem;
    .symp{
      display: inline-block;
      width:1.9rem;
      height: .74rem;
      line-height: .74rem;
      border: 1px solid #DFE0E4;
      border-radius: .08rem;
      text-align: center;
      color: #7C828E;
      margin: 0 0 .3rem .3rem;
      box-sizing: border-box;
    }
    .symp:nth-child(3n+2){
      margin-left: 0;
    }
  }
  .result{
    .title{
      color: #4F50FF;
      padding-left: .1rem;
      border-left: .08rem solid #4F50FF;
      margin-bottom: .19rem;
      font-weight: 700;
    }
    p{
      color: #666;
      line-height: .44rem;
    }
  }
  .footer{
    .footer;
  }
  .nofoot{
    opacity: 0.3;
    background: linear-gradient(-270deg,#4F4FFF, #4F8BFF);
  }
  .detail{
    .mask;
    z-index: 66;
  }
</style>