preliminary/src/components/Preview.vue

<template>
  <div class="wrapper">
    <div class="preview previewper">
      <div class="content">
        <div class="tmpDiv"></div>
        <div class="personMsg personMsg1">
          <p class="baseMsg">
            {{ pathInfo.patientName }}&nbsp;&nbsp;&nbsp;&nbsp;{{
              pathInfo.patientSex
            }}&nbsp;&nbsp;&nbsp;&nbsp;{{ pathInfo.patientAge }}岁
          </p>
          <table>
            <tr>
              <td><span>挂号科室：</span>{{ pathInfo.selfDeptName }}</td>
            </tr>
            <tr v-if="pathInfo.recordId">
              <td><span>排队号：</span>{{ pathInfo.recordId }}</td>
            </tr>
            <tr v-if="pathInfo.doctorName">
              <td><span>预约医生：</span>{{ pathInfo.doctorName }}</td>
            </tr>
            <tr v-if="time">
              <td><span>就诊时间：</span>{{ time }}</td>
            </tr>
          </table>
          <!-- <div class="line"></div>
          <p>采集时间：{{pathInfo.systemTime}}</p> -->
        </div>
        <div class="personMsg personMsg2">
          <ul class="previewParts">
            <li>
              <h4><i></i>主诉：</h4>
              <p>
                <span
                  v-for="(item, idx) in symptom.choose"
                  :key="item.name + idx"
                  v-if="item.idx == 1"
                >
                  {{
                    item.specialP
                      ? (item.description || item.name) + item.specialP
                      : item.description || item.name
                  }}
                </span>
              </p>
            </li>
            <li>
              <h4><i></i> 现病史：</h4>
              <p>
                <!-- 患者于时间单位前诱因出现症状，其余题目的内容； -->
                <span>{{ mainTextP ? mainTextP + "," : "" }}</span>
                <template v-for="(value, index) in checkText">
                  <!-- 患者于时间单位前诱因出现症状，其余题目的内容； -->
                  <span
                    :key="index"
                    v-if="
                      index > 0 &&
                      value.flag != 1 &&
                      value.flag != 2 &&
                      index < checkText.length - 1
                    "
                    >{{ value.textP ? value.textP + "," : "" }}</span
                  >
                </template>
                <span>{{ banTextP }}</span>
              </p>
              <p>
                <span>{{ getDetailText(diagnose.text, false).view }}</span>
              </p>
              <div v-if="scaleInfo">
                <p>{{ scaleInfo[0].scaleName }}</p>
                <p>得分：{{ scaleInfo[0].score }}</p>
                <p>结果为{{ scaleInfo[0].result }}</p>
              </div>
            </li>
            <li v-if="tabType[moduleCP['other']] == 1">
              <h4><i></i> 其他史：</h4>
              <p>
                <span>{{ getDetailText(others.text, false).view }}</span>
              </p>
            </li>
            <li v-if="tabType[moduleCP['suplement']] == 1">
              <h4><i></i> 补充内容：</h4>
              <p>{{ getDetailText(addContent.text, false).view }}</p>
            </li>
            <li v-if="Object.keys(diagnose.imgSrc).length > 0" class="imgLis">
              <h4 class="imgTitle"><i></i>最近一次治疗报告：</h4>
              <div v-for="(value, key, idx) in diagnose.imgSrc" class="imgView">
                <img :src="value" alt="" />
              </div>
            </li>
          </ul>
        </div>
        <div v-if="showDoctor" class="doctorData" @click="handleClick(true)">
          医生端数据展示
        </div>
      </div>
    </div>
    <!--<div class="foot">
        <span
          class="back"
          @click="back"
        >上一步</span>
        <span
          class="submit-btn"
          @click="saveAllImage"
        >提交给医生</span>
      </div>-->
    <div class="realSure sure" @click="saveAllDate">提交给医生</div>
    <Submit
      v-if="submit"
      :showType="showType"
      @showSubmit="showSubmit"
    ></Submit>
    <Loading v-if="this.$store.state.loadingShow"></Loading>
    <div class="personMsgDoc" v-show="showDoc">
      <div class="personMsgDocModal" @click="handleClick(false)"></div>
      <div class="personMsgDocDetail">
        <img
          class="close"
          src="../images/small-close.png"
          alt=""
          @click="handleClick(false)"
        />
        <div class="personMsg personMsg2 modal">
          <ul class="previewParts">
            <li>
              <h4><i></i> 主诉：</h4>
              <p>
                <span
                  v-for="(item, idx) in symptom.choose"
                  :key="item.name + idx"
                  v-if="item.idx == 1"
                >
                  {{ item.special ? item.name + item.special : item.name }}
                </span>
              </p>
            </li>
            <li>
              <h4><i></i> 现病史：</h4>
              <p>
                <!-- 患者于时间单位前诱因出现症状，其余题目的内容； -->
                <span>{{ mainText + "," }}</span>
                <template v-for="(value, index) in checkText">
                  <!-- 患者于时间单位前诱因出现症状，其余题目的内容； -->
                  <span
                    :key="index"
                    v-if="
                      index > 0 &&
                      value.flag != 1 &&
                      value.flag != 2 &&
                      index < checkText.length - 1
                    "
                    >{{ value.text + "," }}</span
                  >
                </template>
                <span>{{ banText }}</span>
              </p>
              <p>
                <span>{{ getDetailText(diagnose.text, false).content }}</span>
              </p>
            </li>
            <li v-if="tabType[moduleCP['other']] == 1">
              <h4><i></i> 其他史：</h4>
              <p>
                <span>{{ getDetailText(others.text, false).content }}</span>
              </p>
            </li>
            <li v-if="tabType[moduleCP['suplement']] == 1">
              <h4><i></i> 补充内容：</h4>
              <p>{{ getDetailText(addContent.text, false).content }}</p>
            </li>
            <li v-if="JSON.stringify(diagnose.imgSrc) != '{}'" class="imgLis">
              <h4 class="imgTitle"><i></i> 最近一次治疗报告：</h4>
              <div v-for="(value, key, idx) in diagnose.imgSrc" class="imgView">
                <img :src="value" alt="" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@utils/api.js";
import Submit from "../common/Submit";
import Loading from "../common/Loading";
import BScroll from "better-scroll";
import { moduleCP, trimDots, setScroll, dateParser } from "@utils/tools.js";
import { mapState } from "vuex";
export default {
  data() {
    const { pathInfo, scaleInfo, originDatas, showDoctor } = this.$store.state;
    let sysConfig = this.$store.state.sysConfig;
    let symptomDate = this.$store.state.symptom;
    let diagnoseDate = this.$store.state.diagnose;
    let othersDate = this.$store.state.others;
    let addContentDate = this.$store.state.addContent;
    return {
      msg: "预览",
      showDoctor: showDoctor,
      pathInfo: pathInfo,
      scaleInfo: scaleInfo,
      symptom: symptomDate,
      diagnose: diagnoseDate,
      others: othersDate,
      addContent: addContentDate,
      checkText: symptomDate.text, //症状情况文字
      symChoose: symptomDate.choose,
      mainText: "", //患者于**前**出现
      banText: "", //伴**
      mainTextP: "", //患者于**前**出现
      banTextP: "", //伴**
      symLast: "", //除主诉伴随剩余的症状详情内容
      submit: false,
      showType: "fail",
      //imgList:[],
      tmpNum: 0,
      moduleCP: moduleCP,
      showDoc: false,
      time: "",
    };
  },
  computed: {
    ...mapState({
      tabType: (state) => state.tabType,
      config: (state) => state.sysConfig,
      addBuriedSomeList: (state) => state.addBuriedSomeList,
      imgList: (state) => state.uploadImgs,
    }),
  },
  created() {
    console.log(this.scaleInfo);
    this.getTime();
    if (this.config.length == 0) {
      //登录进去返回到列表页，扫码返回到开始页
      let scan = localStorage.getItem("scan");
      let params = JSON.parse(localStorage.getItem("infoParam"));
      let param = JSON.parse(localStorage.getItem("loginParam"));
      let data = JSON.parse(localStorage.getItem("loginData"));
      if (!scan) {
        if (data.length > 1) {
          this.$router.push({ path: "/department" });
        } else {
          this.$router.push({ path: "/home", query: param });
        }
      } else {
        this.$router.push({
          path: "/home",
          query: Object.assign({}, params, { scan: true }),
        });
      }
    }
  },
  mounted() {
    console.log(this.$store.state);
    let scroll = setScroll(BScroll, true, ".previewper");
    this.scroll = scroll;
    this.formatSymText(); //拼出现病史规则句型
  },
  methods: {
    getTime() {
      let scan = localStorage.getItem("scan");
      let params = JSON.parse(localStorage.getItem("infoParam"));
      let param = JSON.parse(localStorage.getItem("loginParam"));
      let tmpArr = localStorage.getItem("recordTime");
      let tmpTime =
        tmpArr && Array.isArray(JSON.parse(tmpArr)) ? JSON.parse(tmpArr) : [];
      if (!scan) {
        this.time = dateParser(param.time);
      } else {
        this.time = dateParser(params.recordTime);
      }
    },
    handleClick(flg) {
      this.showDoc = flg;
    },
    showSubmit(flg) {
      this.submit = flg;
    },
    back() {
      this.$router.go(-1);
    },
    getDetailText(textArr, flg) {
      let msg = "",
        obg = {},
        msgP = "";
      if (flg == 1) {
        // for(let k in textArr){
        let item = textArr[0];
        if (item) {
          if (item.special) {
            msg += item.name + item.special;
            msgP += item.name + item.specialP;
          } else {
            msg += item.name;
            msgP += item.name;
          }
        }

        // }
      } else {
        for (let k in textArr) {
          if (textArr[k] && Array.isArray(textArr[k])) {
            let temp = textArr[k];
            for (let j in temp) {
              if (temp[j]) {
                msg += temp[j].text + "，";
                msgP += temp[j].textP + "，";
              }
            }
          } else if (textArr[k]) {
            msg += textArr[k].text + "，";
            msgP += textArr[k].textP + "，";
          }
        }
      }
      obg.view = trimDots(msgP.replace(/，$/, ""));
      obg.content = trimDots(msg.replace(/，$/, ""));
      obg.contentJson = trimDots(msg.replace(/，$/, ""));
      obg.contentValue = trimDots(msg.replace(/，$/, ""));
      obg.type = flg;
      return obg;
    },
    formatSymText() {
      if (this.symptom.choose.lengtn > 0 && his.symptom.text.length > 0) {
        const symChoose = this.symptom.choose;
        const symText = this.symptom.text;
        const bans = symText[symText.length - 1];
        const call = this.pathInfo.patientAge > 18 ? "患者" : "患儿";
        const times = symChoose[0].special || "";
        const reason = symChoose[0].reason || "";
        const timesp = symChoose[0].specialP || "";
        const reasonp = symChoose[0].reasonP || "";
        const timeText = times
          ? "于" + times + "前" + reason + "出现"
          : reason + "出现";
        const timeTextp = times
          ? "于" + timesp + "前" + reasonp + "出现"
          : reasonp + "出现";
        this.mainText = call + timeText + symChoose[0].name;
        this.mainTextP =
          call + timeTextp + (symChoose[0].description || symChoose[0].name);
        this.banText = bans.text === "没有了" ? "" : "伴" + bans.text;
        this.banTextP = bans.text === "没有了" ? "" : "伴" + bans.textP;
      }
    },
    saveAllDate() {
      const { pathInfo, symptom, diagnose, others, addContent, scaleInfo } = this;
      let detailList
      if (symptom.choose.length == 0) {
        detailList = [];
      } else {
        let tmpSymptom = JSON.parse(JSON.stringify(symptom));
        detailList = [{ type: 1 }, { type: 2 }, { type: 3 }, { type: 4 }];
        for (let i = 0; i < detailList.length; i++) {
          if (i == 0) {
            detailList[0] = this.getDetailText(tmpSymptom.choose, 1);
          } else if (i == 1) {
            let tmpArr = [this.mainText];
            let tmpStr = this.banText;
            let symText = tmpSymptom.text;
            for (let j = 1; j < symText.length - 1; j++) {
              if (
                +symText[j].flag !== 1 &&
                +symText[j].flag !== 2 &&
                typeof symText[j].text !== "object"
              ) {
                //诱因和时间已拼不重复添加，上传的图片不拼单独显示
                tmpArr.push(symText[j].text);
              }
            }
            const diagObj = this.getDetailText(diagnose.text, false);
            const diagStr = diagObj.content;
            const diagJson = diagObj.contentJson;
            tmpStr ? tmpArr.push(tmpStr) : null;
            detailList[1].content = tmpArr.join() + "," + diagStr;
            detailList[1].contentJson = JSON.stringify(tmpArr.concat(diagJson));
            detailList[1].contentValue = tmpArr.join();
          } else if (i == 2) {
            detailList[2] = this.getDetailText(others.text, 3);
          } else if (i == 3) {
            detailList[3] = this.getDetailText(addContent.text, 4);
          }
        }
      }

      let params = {
        dataJson: "1",
        detailList: detailList,
        hospitalId: pathInfo.hospitalId, //医院id
        hospitalName: pathInfo.hospitalName, //医院名称
        hospitalCode: pathInfo.hospitalCode, //医院编码
        doctorId: pathInfo.doctorId, //医生id
        doctorCode: pathInfo.doctorCode, //医生编码
        doctorName: pathInfo.doctorName, //医生name
        hospitalDeptCode: pathInfo.hospitalDeptCode, //医院科室编码
        hospitalDeptId: pathInfo.hospitalDeptId, //科室id
        hospitalDeptName: pathInfo.hospitalDeptName, //科室name
        inquiryCode: pathInfo.recordId, //就诊序列号,目前是门诊号
        patientBirthday: pathInfo.birthday + ":00", //患者出生日期，格式为：2018-11-28 17:25:30
        patientCode: pathInfo.patientCode, //患者编号
        patientId: pathInfo.patientId, //患者id
        patientIdNo: pathInfo.patientIdNo, //患者证件号码(病历号)
        patientName: pathInfo.patientName, //患者姓名
        // "patientPhone": pathInfo,//患者联系电话(非)
        patientSex: pathInfo.patientSex == "男" ? 1 : 2, //患者性别：1男2女（非）
        // "regVisitedState": pathInfo,//就诊状态(0待接诊，1接诊中，2完成接诊)（非）
        reportList: this.imgList || [],
        sonHospitalCode: pathInfo.sonHospitalCode,
        sonHospitalId: pathInfo.sonHospitalId,
        sonHospitalName: pathInfo.sonHospitalName,
        scaleList: scaleInfo,
        // "type": 0//病历分类(1:门诊,2:住院)
      };
      // console.log(params)
      this.saveBuriedSome(pathInfo); //埋点
      api
        .saveInquiry(params)
        .then((res) => {
          if (res.data.code == 0) {
            this.$store.commit("handleToggleShow", false);
            this.showType = "success";
            this.submit = true;
          } else {
            this.defaultWaring(res);
          }
        })
        .catch((err) => {
          this.defaultWaring(err);
        });
    },
    saveBuriedSome(pathInfo) {
      let params = {
        doctorId: pathInfo.doctorId || "",
        hospitalDeptId: pathInfo.hospitalDeptId || "",
        hospitalId: pathInfo.hospitalDeptId || "",
        inquiryCode: pathInfo.hospitalDeptId || "",
        patientId: pathInfo.hospitalDeptId || "",
        taggeds: this.addBuriedSomeList || [],
      };
      api.saveBuriedSome(params).then((res) => {
        console.log("埋点");
      });
    },
    defaultWaring(res) {
      this.$store.commit("handleToggleShow", false);
      this.showType = "fail";
      this.submit = true;
      let timer = setTimeout(() => {
        this.submit = false;
        clearTimeout(timer);
      }, 2000);
    },
  },
  components: {
    Submit,
    Loading,
  },
};
</script>
<style lang="less" scoped>
@import "../less/base.less";
body{
  overflow-y: auto
}
.foot {
  .dbfooter;
  z-index: 998;
}
.doctorData {
  float: right;
  color: #0043e8;
  margin-bottom: 30px;
  font-size: 14px;
}
.preview {
  color: red;
  background-color: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 0.4rem 1rem 0.4rem;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  .btscroll;
  .content {
    padding-top: 0;
    padding-bottom: 2rem;
  }
}
.tmpDiv {
  height: 0.3rem;
}

.imgView {
  width: 1.86rem;
  height: 1.9rem;
  float: left;
  border: 1px solid #dfe0e4;
  margin: 0 0.2rem 0.3rem 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: 0.08rem;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
  }
}
.imgTitle {
  padding-bottom: 0.2rem;
}
.personMsg {
  padding: 0.3rem 0.4rem;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0.16rem;
  margin-bottom: 0.38rem;
  box-shadow: 0px 3px 20px 0px rgba(192, 187, 224, 0.23);
  .previewParts {
    li {
      padding: 0.1rem 0.3rem;
      overflow: hidden;
    }
    /*li.imgLis {
      padding-right: 0;
      padding-left: 0;
    }*/
    h4 {
      color: #colors[quest];
      font-size: 0.32rem;
      font-weight: bold;
      position: relative;
      i {
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%;
        background: #ffad00;
        display: inline-block;
        position: absolute;
        top: 0.15rem;
        left: -0.3rem;
      }
    }
    p {
      font-size: 0.28rem;
      color: #424242;
      margin: 0.2rem 0;
      word-break: break-all;
    }
  }
  .baseMsg {
    font-size: 0.32rem;
    color: #colors[quest];
    letter-spacing: 0;
    text-align: justify;
    font-weight: bold;
    margin-bottom: 0.15rem;
  }
  table {
    width: 100%;
    font-size: 0.3rem;
    color: #333333;
    letter-spacing: 0;
    text-align: justify;
    margin-top: 0.2rem;
    tr {
      padding: 0.2rem 0;
      line-height: 0.5rem;
      td {
        padding-bottom: 0.1rem;
      }
      span {
        color: #777;
        width: 1.6rem;
        display: inline-block;
      }
    }
  }
  .line {
    opacity: 0.3;
    background: #d8d8d8;
    margin: 0.2rem 0;
    height: 1px;
  }
}

.personMsg2 {
  padding-right: 0;
}
.personMsg2.modal {
  margin-bottom: 0;
}
.personMsgDoc {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: auto;
  z-index: 999;
  .personMsgDocModal {
    .mask;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .personMsgDocDetail {
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // padding: 0 .4rem;
    background-color: #fff;
    box-sizing: border-box;
    width: 90%;
    border-radius: 0.1rem;
    overflow: hidden;
    .personMsg {
      max-height: 9rem;
      overflow: auto;
      width: 100%;
      border-radius: 0;
      -webkit-overflow-scrolling: touch;
    }
  }
}
.close {
  width: 0.34rem;
  height: 0.34rem;
  position: absolute;
  right: 0;
  top: 0;
  padding: 8px;
  z-index: 1001;
}
.sure {
  position: fixed;
  bottom: 0;
  z-index: 100;
}
</style>