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 @click="showChecked(v)">{{v.name}}</span>
        <span @click="deletSymp(v,i)"><img
            src="../images/delete.png"
            alt=""
          ></span>
      </p>
    </div>
    <div class="label">
      <p class="quest">请问您有哪些不适？<img
          @click="search(true)"
          class="searchImg"
          src="../images/search.png"
          alt=""
        ></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="checkText.length>0"
    >
      <p class="title">症状情况</p>
      <p v-for="(value,index) in checkText">{{value.text}}</p>
    </div>
    <div :class="['footer',{'nofoot':chooseSymp.length==0}]"
      @click="toNext"
    >下一步</div>
    <div
      class="detail"
      v-if="show"
    >
      <DetailBox
        @close="closeDetal"
        :data="labelDetail"
        :moduleType="1"
        v-if="labelDetail.questionMapping&&labelDetail.questionMapping.length>0"
        @pComplete="complete"
        @reload="reload"
      />
    </div>
    <Toast
      :message="delText"
      :show="showToast"
      @comfirn="comfirnDel"
      @cancel="cancelDel"
    />
    <Search
      v-if="searchShow"
      @search="search"
      @showDetil="showDetil"
      :age="age"
      :chooseSymp="chooseSymp"
      :sexType="sexType"
    ></Search>
  </div>
</template>
<script type="text/javascript">
import api from '@utils/api.js';
import DetailBox from './DetailBox.vue';
import Toast from '../common/Toast.vue';
import Search from './Search.vue';
export default {
  name: 'Symptom',
  data() {
    let { datas, pathInfo } = this.$store.state;
    const { choose, text } = this.$store.state.symptom;
    return {
      age: pathInfo.patientAge,
      sexType: pathInfo.patientSex == '男' ? 1 : (pathInfo.patientSex == '女' ? 2 : 3),
      deptName: pathInfo.selfDeptName,
      hosCode: pathInfo.hospitalCode,
      show: false, //显示明细
      chooseSymp: choose, //已选症状
      symp: [], //症状
      labelDetail: {}, //明细
      checkText: text, //症状情况文字
      questId: null, //id
      delText: "是否删除该信息？<br/> （已填内容将清除）",
      delIndex: null,
      showToast: false,
      searchShow: false,//显示搜索界面
      tmpItem:{},//检索的症状
      isSearch:false
    }
  },
  created() {
    if (this.chooseSymp.length > 0) {
      // 推送
      const sympText = this.getSympText();
      this.getPush(sympText);
    } else {
      this.getSympList(); //常见
    }
  },
  methods: {
    searchVal(val) {
      console.log(val)
    },
    search(flg) {
      this.searchShow = flg
    },

    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高亮--判断有几个模块显示，1个--提交预览；1个以上--下一步
      if (this.chooseSymp.length == 0) { return }
      this.$emit('next');
      // 把症状情况的数据存起-已选
      this.$store.commit('setChoose', { choose: this.chooseSymp, type: "1" });

    },
    showDetil(item,flg) {
      if(!flg){
        this.chooseSymp.push(item);
      }else{
        this.tmpItem=item
        this.isSearch=flg
      }
      this.questId = item.questionId || item.id || item.conceptId;
      const id = item.questionId || item.id; //常见症状questionId，推送id,两者均有可能没有
      //将选中的name存到store中的text
      this.$store.commit('setText', { type: "1", text: item.name, pId: this.questId });
      if (id) {
        const param = {
          "age": this.age,
          "id": id,
          "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', { type: "1", data: result.data });
            if (mapping && mapping.length > 0) {
              this.show = true;
            } else { //没有详情,推送
              const sympText = this.getSympText();
              this.getPush(sympText);
            }
          }
        })
      } else {//没有questionId或id 则直接调推送
        const sympText = this.getSympText();
        this.getPush(sympText);
        this.checkText = this.$store.state.symptom.text;
      }

    },
    getSympText() {
      const text = this.$store.state.symptom.text;
      let msg = "";
      for (let i in text) {
        msg += text[i].text;
      }
      return msg;
    },
    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() {
      // 推理 
      const sympText = this.getSympText();
      this.getPush(sympText);
      this.show = false;
      this.questId = null;
    },
    deletSymp(item, index) {
      this.delIndex = index;
      this.questId = item.questionId || item.conceptId;
      if (this.chooseSymp.length == 1) {
        this.delText = "是否删除该信息？删除后将重新填写预问诊流程 （已填内容将清除）"
      }
      this.showToast = true;
    },
    comfirnDel() {
      this.chooseSymp.splice(this.delIndex, 1);
      // delete(this.checkText[this.questId]);
      this.checkText.splice(this.delIndex, 1);
      this.$store.commit('delText', { type: "1", pId: 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 = "是否删除该信息？<br/> （已填内容将清除）";
    },
    complete() {//明细填写完成
      if(this.isSearch){
        this.chooseSymp.push(this.tmpItem);
        this.searchShow = false
      }
      this.isSearch = false; //重置，否则每次点开都会叠加
      this.checkText = this.$store.state.symptom.text;
      this.show = false;
      this.questId = null;
      // 推理 
      const sympText = this.getSympText();
      this.getPush(sympText);
    },
    showChecked(item) {
      const origin = this.$store.state.symptom.origin;
      const read = this.$store.state.symptom.datas;
      const data = read[item.questionId] || origin[item.questionId];
      if (data.questionMapping && data.questionMapping.length > 0) {
        this.labelDetail = data;
        this.show = true;
      }
    },
    reload(id) {//清空重新赋值
      const read = this.$store.state.symptom.datas;
      const data = read[id];
      this.labelDetail = data;
    }
  },
  components: {
    DetailBox,
    Toast,
    Search
  },
}
</script>
<style lang="less" scoped>
@import "../less/base.less";
.symp-wrap {
  font-size: 0.3rem;
  .quest {
    color: #000;
    margin-bottom: 0.36rem;
    font-weight: 700;
    .searchImg {
      width: 0.44rem;
      height: 0.44rem;
      float: right;
    }
  }
}
.choose{
  padding-bottom: .2rem;
  .choo-symp{
      display: inline-block;
      width:1.9rem;
      height: .74rem;
      // background: linear-gradient(-270deg, #4F4FFF, #4F8BFF);
      background: linear-gradient(-270deg, #3638EE, #4E72FF);
      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{
        min-width:1.34rem;
        height: .74rem;
        line-height: .74rem;
        text-align: center;
        color: #fff;
      }
      img{
        width:.56rem;
        height: .74rem;
      }
    }
  .label{
    .label;
  }
  .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;
  }
}
.label{
  .label;
}
.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);
  background:#CACCFF;
}
.detail{
  .mask;
  z-index: 66;
}
</style>