preliminary/src/common/PushSymptom.vue

<template>
  <portal to="notification-outlet">
    <div class="select">
      <div class="selected-tags">
        <p class="title">已选伴随症状:</p>
        <ul class="clearfix">
          <li v-if="selecteds.length>0" v-for="it in selecteds">
            <span>{{it.description||it.name}}</span>
            <img @click="delSelected(it)" src="../images/closeimg.png" alt=""/>
          </li>
        </ul>
      </div>
      <ul class="tags clearfix">
        <li
          v-for="(item,idx) in symptoms"
          :class="[{'liSelect':item.select,'big':item.explains}]"
          :key="item.id"
          @click="selectResult(item,idx)"
        >
          {{item.description||item.name}}
          <img src="../images/icon_que.png" alt="解释说明" @click.stop="showExplain(item)" v-if="item.explains"/>
        </li>
      </ul>
      <div :class="selecteds.length>0?'realSure sure':'sure'" @click="makeSuer">
        确定 <span v-if="numPlus">({{numPlus}})</span>
      </div>
      <Tiptoast :show="showExp" :data="message" @close="closeTip"/>
    </div>
  </portal>
</template>
<script>
  import api from '../utils/api.js';
  import {mapState} from 'vuex';
  import {delResymptoms} from '@utils/tools';
  import Tiptoast from '../common/Tiptoast.vue';
  export default {
    props: ["num"],
    data() {
      return {
        selecteds: [], //已选伴随症状
        selectedsName:'',   //已选伴随症状名称
        symptoms:[],      //症状
        sure:false,
        numPlus:0,     //已选答案个数
        showExp:false,
        message:{
          title:'',
          text:''
        },
      };
    },
    computed:{
      ...mapState({
        activeModule: state => state.activeModule,
        chooseSymp: state => state.symptom.choose,//已选症状
        checkText: state => state.symptom.text,//症状情况文字
        config: state => state.sysConfig,
        pathInfo: state => state.pathInfo,
        extSyms: state => state.extPushSymptom
      }),
    },
    mounted() {
      //this.numPlus = this.num
      //this.result = this.symptomResult.questionDetailList;
      this.getPush(this.chooseSymp[0].name);
    },
    methods: {
      getSympText() {//推送使用医生端信息
        const text = this.$store.state.symptom.text;
        let msg = "";
        for (let i in text) {
          if(text[i] && text[i].text){
            msg += text[i].text;
          }
        }
        return trimDots(msg);
      },
      getPush(symptoms) {//推理
        const param = {
          "age": this.pathInfo.patientAge,
          "hosCode": this.pathInfo.hospitalCode,
          "sex": this.pathInfo.sexType,
          "symptom": symptoms //症状+选择的明细,string
        };
        api.getPush(param).then((res) => {
          const result = res.data;
          if (result.code == 0&&result.data) {
            const syms = result.data.symptom;
            const none={
              conceptId: 0,
              name: "没有了",
              tagName: "没有了",
              libType: 1,
              id: 0,
              type: 1,
              description: "",
              exclusion:1,
              hasExplain: 0,
              explains: null,
            };
            //没有了与其他互斥
            const hasNone = symptoms.indexOf("没有了")!==-1;
            const selecteds = this.selecteds;
            const exts=JSON.parse(JSON.stringify(this.extSyms));
            const newSyms = delResymptoms(exts,syms);
            const newSymsCopy=JSON.parse(JSON.stringify(newSyms));
            const newExt =selecteds.length>0?newSymsCopy.reduce((total,it)=>{
                if(selecteds.findIndex((i)=>i.name===it.name)===-1){
                  total.push(it);
                }
              return total;
            },[]):newSyms;
            if(hasNone){
              this.symptoms = [...newExt];
            }else{
              this.symptoms = [none,...newExt];
            }
            this.symptoms.length=this.symptoms.length>10?10:this.symptoms.length;
            //this.getSymptomLisCom(result)
          }else{
            //this.getSymptomLisCom()
          }
        }).catch((err)=>{

        })
      },
      showExplain(it){
        if(it.explains){
          this.message.title = it.description || it.name;
          this.message.text = it.explains;
        }else{
          this.message.title = "";
          this.message.text = "暂无资料";
        }
        this.showExp = true
      },
      closeTip(){
        this.showExp = false;
        this.message.title = '';
        this.message.text = '';
      },
      getSymptomLisCom(result){
        let symp = (result&&result.data.symptom)||[];
        let symped = JSON.parse(JSON.stringify(this.chooseSymp));//已选症状
        let sympStic = JSON.parse(localStorage.getItem('staticSymp'))||[];//首次有无症状
        let sympAll = sympStic.concat(symp);
        var obj = {};
        sympAll = sympAll.reduce(function(item, next) {
          obj[next.name] ? '' : obj[next.name] = true && item.push(next);
          return item;
        }, []);
        for(let i = 0;i < symped.length;i++){//去掉已选的已选症状
          for(let j = 0;j < sympAll.length;j++){//去掉
            if(sympAll[j].name == symped[i].name){
              sympAll.splice(j,1)
            }
          }
        }
        this.symp = sympAll.slice(0,12);
        this.$refs.showHide.style.height = 'auto'
      },
      makeSuer() {
        if(!this.selecteds.length>0){return}
        let number = this.num;
        const sName=this.selectedsName.replace(/、+/g,"、").replace(/^、|、$/g,'');
        const sNamep=this.selectedsName.replace(/、+/g,"、").replace(/^、|、$/g,'');
        this.$emit("updataResult", '',{val:sName,valp:sNamep,idx:2},++number);
        this.$store.commit("setChoose",{choose:[...this.chooseSymp,...this.selecteds]});
      },
      selectResult(item) {
        if(this.selecteds.length>2&&item.name!=="没有了"){
          this.$emit('warning','最多选择3个症状');
          return;
        }
        const hasNone = this.selecteds.findIndex((it)=>{
          return it.name==='没有了';
        })!==-1;
        if(hasNone){
          this.selecteds.splice(0,1);
          this.selectedsName = this.selectedsName.replace("没有了",'');
          this.selectedsNamep = this.selectedsNamep.replace("没有了",'');
        }else if(item.name==='没有了'){
          this.selecteds=[];
          this.selectedsName = '';
          this.selectedsNamep ='';
        }
        const name = item.name;
        const namep=item.description||item.name;
        this.selectedsName = this.selectedsName?this.selectedsName+"、"+name:name;
        this.selectedsNamep = this.selectedsNamep?this.selectedsNamep+"、"+namep:namep;
        this.selecteds.push(item);
        this.numPlus = this.selectedsName==="没有了"?0:this.selecteds.length;
        this.getPush(this.chooseSymp[0].name+this.selectedsName);
      },
      delSelected(item){    //删除已选伴随症状
        const selecteds = JSON.parse(JSON.stringify(this.selecteds));
        const inx = selecteds.findIndex((it)=>{
          return it.tagName === item.tagName;
        });
        if(inx!==-1){
          this.selectedsName = this.selectedsName.replace(item.name,"");
          this.selectedsNamep = this.selectedsNamep.replace(item.description||item.name,"");
          selecteds.splice(inx,1);
        }
        this.selecteds = selecteds;
        this.numPlus = this.selectedsName==="没有了"?0:this.selecteds.length;
        this.getPush(this.chooseSymp[0].name+this.selectedsName);
      }
    },
    components:{
      Tiptoast
    }
  };
</script>
<style lang="less" scoped>
  @import "../less/base.less";
  .select{
    background-color: #fff;
    padding: 0.28rem 0 0 0;
    position: fixed;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    box-shadow: 0 0 30px -10px rgba(104, 124, 189, 0.25);
  }
  .selected-tags{
    margin-bottom: .8rem;
    .title{
      color: #aaa;
      font-size: #font[dialog];
      margin-bottom: .4rem;
      text-indent: .28rem;
    }
    li{
      position: relative;
      display:inline-block;
      span{
        display: inline-block;
        padding: 0.14rem 0.2rem;
        background-color: #colors[btn];
        border:1px #colors[btn] solid;
        border-radius: 0.36rem;
        font-size: #font[select];
        margin: 0.15rem;
        float: left;
        color: #fff;
      }
      img{
        width: .3rem;
        height: .3rem;
        position: absolute;
        right: .05rem;
        top: .1rem;
      }
    }
  }
  .tags {
  li {
    padding: 0.14rem 0.2rem;
    border:1px #DFE0E4 solid;
    border-radius: 0.36rem;
    font-size: #font[select];
    margin: 0.15rem;
    float: left;
    color: #666;
    position: relative;
    &.big{
       margin: 0.15rem .65rem .15rem .15rem
     }
  img{
    width: .35rem;
    position: absolute;
    right: -0.55rem;
  }
  }
  .liSelect {
    color: #fff;
    background-color: #colors[btn];
    border-color:  #colors[btn];
  }
  }
</style>