6. 智能辩证 -> 问卷采集页 添加左侧边栏

src/views/diagnosis/DialecticalQ.vue

@@ -1,8 +1,75 @@
 <template>
   <div class="dialecticalq">
     <div class="flex flex-row-left flex-col-top top-questions">
-      <div class="dialecticalq-left">
+      <div class="dialectical-left" v-if="!isShrink">
+        <!-- 标题信息 -->
+        <div class="pre-title">
+          <div class="flex-vertical-center-l title-container">
+            <span></span>
+            <div>患者信息</div>
+          </div>
+        </div>
+        <div class="patiens-msg" v-if="Object.keys(patiensMsg).length>0">
+          <p v-if="patiensMsg.sex">患者性别：{{patiensMsg.sex}}</p>
+          <p v-if="patiensMsg.age">患者年龄：{{patiensMsg.age}}</p>
+          <p
+              v-if="patiensMsg.isGravidity && patiensMsg.isGravidity=='2'"
+          >是否怀孕：{{patiensMsg.isGravidity=='1'?'否':patiensMsg.isGravidity=='2'?'是':'无'}}</p>
+          <p
+              v-if="patiensMsg.isBreastFeeding && patiensMsg.isBreastFeeding==1"
+          >是否哺乳：{{patiensMsg.isBreastFeeding==1?'是':patiensMsg.isBreastFeeding==2?'否':'无'}}</p>
+        </div>
+        <div class="pre-title mr-t10">
+          <div class="flex-vertical-center-l title-container">
+            <span></span>
+            <div>中医电子病历</div>
+          </div>
+        </div>
+        <div class="patiens-msg" v-if="patiensMsg.outpatientElectronicmedicalrecord">
+          <p v-if="patiensMsg.outpatientElectronicmedicalrecord.chiefcomplaint">
+            <span>主诉：</span>
+            {{patiensMsg.outpatientElectronicmedicalrecord.chiefcomplaint}}
+          </p>
+          <p v-if="patiensMsg.outpatientElectronicmedicalrecord.historypresent">
+            <span>现病史：</span>
+            {{patiensMsg.outpatientElectronicmedicalrecord.historypresent}}
+          </p>
+          <p v-if="patiensMsg.outpatientElectronicmedicalrecord.pasthistory">
+            <span>既往史：</span>
+            {{patiensMsg.outpatientElectronicmedicalrecord.pasthistory}}
+          </p>
+          <p v-if="patiensMsg.outpatientElectronicmedicalrecord.fourmedicine">
+            <span>中医四诊：</span>
+            {{patiensMsg.outpatientElectronicmedicalrecord.fourmedicine}}
+          </p>
+          <p v-if="patiensMsg.outpatientElectronicmedicalrecord.physicalexamination">
+            <span>体格检查：</span>
+            {{patiensMsg.outpatientElectronicmedicalrecord.physicalexamination}}
+          </p>
+          <p v-if="patiensMsg.outpatientElectronicmedicalrecord.supplementaryexamination">
+            <span>辅助检查：</span>
+            {{patiensMsg.outpatientElectronicmedicalrecord.supplementaryexamination}}
+          </p>
+          <div v-if="patiensMsg.outpatientElectronicmedicalrecord.image1.length>0">
+            <div style="margin: 4px 0 8px;">报告上传：</div>
+            <el-image
+                :preview-src-list="patiensMsg.outpatientElectronicmedicalrecord.image1"
+                :src="item"
+                :key="index"
+                style="width:64px;height: 64px;margin-right: 10px;"
+                alt
+                v-for="(item,index) in patiensMsg.outpatientElectronicmedicalrecord.image1"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="dialectical-center">
         <div class="now-title">
+          <!-- 扩展icon -->
+          <div class="kz-icon" @click="setShrink">
+            <i class="el-icon-d-arrow-right" v-if="!isShrink"></i>
+            <i class="el-icon-d-arrow-left" v-if="isShrink"></i>
+          </div>
           当前疾病：
           <span>{{info.groupname}}</span>
         </div>
@@ -147,6 +214,7 @@
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 import { getDialecticalq, submitDialetQ } from "@/api/knowledge.js";
 import {
+  getPatiensBasisM,
   addDiagnosisData,
   znQuestionSave,
   znQusetionShow
@@ -154,11 +222,14 @@ import {
 import { addRecipeFrom } from "@/api/dataAnalysis.js";
 import { setTimeout } from "timers";
 import Emr from "@/views/diagnosis/Emr.vue";
+import {formatPicture} from "@/utils/picture";
 export default {
   components: {Emr},
   data() {
     return {
       hack__show_EMR: false,
+      isShrink: false, // 是否是收缩状态
+      patiensMsg: {}, // 患者信息
       year: "",
       month: "",
       day: "",
@@ -201,6 +272,13 @@ export default {
         this._znQusetionShow();
       }, 500);
     }
+
+    if (this.getPatiensInfo.pid) {
+      this.getPatiensBasisM();
+    }
+  },
+  mounted() {
+    this.isShrink = window.sessionStorage.getItem('dia_isShrink') == 1
   },
   beforeRouteLeave(to, from, next) {
     if (this.isEdit) {
@@ -220,6 +298,30 @@ export default {
     }
   },
   methods: {
+    // 设置收缩模式
+    setShrink() {
+      this.isShrink = !this.isShrink
+      window.sessionStorage.setItem('dia_isShrink', this.isShrink ? 1 : 0)
+    },
+    // 获取病人 左侧信息
+    async getPatiensBasisM() {
+      let res = await getPatiensBasisM({
+        patientId: this.getPatiensInfo.pid
+      });
+      if (res.ResultCode == 0) {
+        this.agree_key1 = res.Data.maindiagnosis
+          ? res.Data.maindiagnosis.namemedicine
+            ? res.Data.maindiagnosis.namemedicine
+            : ""
+          : "";
+        res.Data.secondarydiagnosis = res.Data.secondarydiagnosis
+          ? res.Data.secondarydiagnosis
+          : [];
+        this.patiensMsg = res.Data;
+
+        this.patiensMsg.outpatientElectronicmedicalrecord.image1 = formatPicture(this.patiensMsg.outpatientElectronicmedicalrecord.image1);
+      }
+    },
     // 返回
     backPage() {
       // this.$router.go(-1)
@@ -507,7 +609,7 @@ export default {
 .dialecticalq {
   height: 100%;
 
-  .dialecticalq-left {
+  .dialectical-center {
     flex: 1;
     height: 100%;
     min-height: 420px;
@@ -518,6 +620,7 @@ export default {
     box-sizing: border-box;
 
     .now-title {
+      display: flex;
       font-size: 18px;
       font-family: PingFang SC;
       font-weight: 400;
@@ -616,6 +719,131 @@ export default {
     }
   }
 
+  .kz-icon {
+    margin-right: 8px;
+  }
+
+  .dialectical-left {
+    height: 100%;
+    width: 200px;
+    padding: 10px 12px;
+    background: #fff;
+    box-sizing: border-box;
+    margin-right: 20px;
+    overflow-y: auto;
+
+    .patiens-msg {
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #333333;
+
+      h4 {
+        font-size: 16px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        margin-bottom: 5px;
+      }
+
+      p {
+        span {
+          display: inline-block;
+          width: 70px;
+          text-align: right;
+        }
+
+        margin-bottom: 5px;
+      }
+    }
+
+    .pre-steps {
+      .find-more {
+        cursor: pointer;
+
+        img {
+          width: 12px;
+        }
+
+        span {
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #ffae45;
+          margin-left: 7px;
+        }
+      }
+
+      .icon {
+        width: 22px;
+      }
+
+      .step-body:hover {
+        background: #d8d8d8;
+      }
+
+      .step-name {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        cursor: pointer;
+      }
+    }
+
+    .pre-title {
+      margin-bottom: 10px;
+
+      .title-container {
+        span {
+          width: 3px;
+          height: 14px;
+          background: #5386f6;
+          border-radius: 1px;
+          display: inline-block;
+        }
+
+        div {
+          font-size: 18px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #5386f6;
+          margin-left: 9px;
+        }
+      }
+
+      .patiens-msg {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #333333;
+
+        .p {
+          margin-bottom: 5px;
+          cursor: default;
+
+          .patiens-name {
+            color: #5386f6;
+            font-weight: bold;
+            font-size: 16px;
+          }
+
+          .patiens-desc {
+            display: inline-block;
+
+            .matname {
+              color: #5386f6;
+            }
+          }
+
+          .patiens-cate {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
   .dialectical-right {
     height: 100%;
     min-height: 420px;