preliminary/src/components/Symptom.vue

<template>
  <div class="symp-wrap">
    <div class="choose" v-if="chooseSymp.length>0">
      <h3>已选症状</h3>
      <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">
      <h3>请问您有哪些不适？</h3>
      <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) !== '{}'">
      <h4>症状情况</h4>
      <p v-for="(value,key,index) in checkText">{{value}}</p>
    </div>
    <div class="footer" @click="toNext">下一步</div>
    <div class="detail" v-if="show">
      <DetailBox @close="closeDetal" :data="labelDetail"/>
    </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(){
      const pathInfo = this.$store.state.pathInfo;
      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:{}, //选中拼好的明细
        current:null,
        delText:"是否删除该信息？",
        delIndex:null,
        showToast:false
      }
    },
    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高亮
        this.$emit("nextStep",3);
      },
      showDetil(item){
        this.chooseSymp.push(item);
        this.current = item.conceptId;
        const id = item.questionId;
        const param = {
          "age":this.age,
          "id":id,
          "sexType":this.sexType
        }
        api.getById(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.labelDetail = result.data;
            this.show = true;
          }
        })
        // 推理
        
      },
      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 current = this.current;
        this.getPush(msg);
        this.checkText = Object.assign({},this.checkText,{[current]:msg});
        this.show = false;
        this.current = null;console.log('子组件触发关闭',this.checkText);
      },
      deletSymp(item,index){
        this.delIndex = index;
        this.current = item.conceptId;
        if(this.chooseSymp.length==1){
          this.delText = "是否删除该信息？删除后将重新填写预问诊流程"
        }
        this.showToast = true;
      },
      comfirnDel(){
        this.chooseSymp.splice(this.delIndex,1);
        delete(this.checkText[this.current]);
        // this.getPush(''); //删除后重新调推理-入参：拼好的内容
        this.cancelDel();
        console.log("确认删除：",this.chooseSymp,this.checkText)
      },
      cancelDel(){
        this.showToast = false;
        this.delIndex = null;
        this.current = null;
      }
    },
    components:{
      DetailBox,
      Toast
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .symp-wrap{
    font-size: .3rem;
    h3{
      color: #000;
      margin-bottom: .36rem;
    }
  }
  .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{
    h4{
      color: #4F50FF;
      padding-left: .1rem;
      border-left: .08rem solid #4F50FF;
      margin-bottom: .19rem;
    }
    p{
      color: #666;
      line-height: .44rem;
    }
  }
  .footer{
    .footer;
  }
  .detail{
    .mask;
    z-index: 66;
  }
</style>