智能开方-左侧中医电子病历添加 脉诊图片和详情

src/api/diagnosis.js

@@ -69,8 +69,12 @@ export function refreshElectronicInfo(data) {
     }).then(res => {
         if (res.ResultCode !== 0) throw Error(res.ResultInfo || `请重试`);
         if (res.Data == null) throw Error(`暂无新数据，请稍后刷新`);
-        const data = removeRedundantSemicolons(res.Data);
-        return data.outpatientElectronicmedicalrecord != null ? data : {outpatientElectronicmedicalrecord: data};
+        const {pulseDiagnosisReportVo, ..._data} = res.Data;
+        const data = removeRedundantSemicolons(_data);
+        return data.outpatientElectronicmedicalrecord != null ? data : {
+            outpatientElectronicmedicalrecord: data,
+            pulseDiagnosisReportVo,
+        };
     });
 }
 

src/components/PulseImage.vue

@@ -0,0 +1,155 @@
+<script>
+let listener;
+let timer;
+export default {
+  name: 'PulseImage',
+  props: {
+    id: {type: String, required: true},
+    addition: {type: String, required: false, default: ''},
+    dataset: {type: Object, required: true},
+  },
+  data() {
+    return {
+      thumbnail: '',
+      updating: false,
+      preview: false,
+    };
+  },
+  computed: {
+    url() {
+      return this.dataset ? this.dataset[this.id] : void 0;
+    },
+    previewUrl() {
+      return this.url ? this.url + this.addition : '';
+    },
+    tooltip() {
+      return {overallLeft: '左手脉象', overallRight: '右手脉象'}[this.id];
+    },
+  },
+  watch: {
+    url: {
+      handler(value, oldValue) {
+        if (!value) {
+          this.updating = false;
+          this.thumbnail = '';
+          this.$emit('update', this.thumbnail);
+        } else if (value !== oldValue) {
+          clearTimeout(timer);
+          if (this.updating) {
+            this.updating = false;
+            timer = setTimeout(() => { this.updating = true; }, 100);
+          } else {
+            this.updating = true;
+          }
+        } else {
+          this.$emit('update', this.thumbnail);
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  beforeMount() {
+    const callback = (event) => {
+      if (event.data && event.data.type === 'event:draw') {
+        const iframe = this.$refs.iframe;
+        if (!iframe) {this.updating = false;} else if (event.source === iframe.contentWindow) {
+          this.thumbnail = event.data.data;
+          if (event.data.done) {
+            this.updating = false;
+            this.$emit('update', this.thumbnail);
+          }
+        }
+      }
+    };
+    window.addEventListener('message', callback);
+    listener = () => { window.removeEventListener('message', callback); };
+  },
+  beforeDestroy() {
+    if (listener) listener();
+  },
+  methods: {
+    onPreviewLoad() {
+      const iframe = document.querySelector(`#${this.id} .preview-wrapper iframe`);
+      iframe.contentWindow.postMessage({
+        type: 'insert:css', code: `
+          .wrap { margin-top: -35px!important; padding-top: 0!important; }
+        `,
+      }, '*');
+    },
+  },
+};
+</script>
+
+<template>
+  <div :id="id" v-if="!!url" v-loading="!thumbnail" class="el-image">
+    <el-tooltip class="wrapper" placement="bottom">
+      <div slot="content" style="font-size: 14px;">{{tooltip}}<br/><span style="margin-top: 4px;font-size: 12px; color: #9ca3af">(点击查看详情)</span></div>
+      <div>
+        <img v-if="thumbnail" :src="thumbnail" :alt="tooltip" @click="preview = true;">
+      </div>
+    </el-tooltip>
+    <iframe ref="iframe" class="render-wrapper" v-if="updating" :src="url"></iframe>
+    <el-dialog class="preview-wrapper" :title="tooltip" :visible.sync="preview" center>
+      <iframe v-if="previewUrl" :src="previewUrl" @load="onPreviewLoad"></iframe>
+    </el-dialog>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+.wrapper, .wrapper img {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+.render-wrapper {
+  $width: 510px;
+  $height: 432px;
+
+  position: fixed;
+  //top: $width * -1;
+  //left: $height * -1;
+  width: $width;
+  height: $height;
+  z-index: -1;
+}
+
+.preview-wrapper {
+  $top: 5vh;
+
+  ::v-deep {
+    .el-dialog {
+      display: flex;
+      flex-direction: column;
+      margin-top: $top !important;
+      //min-width: 510px + 200px;
+      max-width: 510px + 100px;
+      width: 90vw;
+      height: calc(100vh - #{$top} * 2);
+    }
+
+    .el-dialog__header {
+      position: relative;
+      z-index: 11;
+    }
+
+    .el-dialog__body {
+      flex: auto;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+
+  iframe {
+    flex: auto;
+    width: 100%;
+    border: none;
+  }
+}
+
+
+</style>

src/views/diagnosis/Prescribing.vue

@@ -57,13 +57,22 @@
         <div v-if="patiensMsg.outpatientElectronicmedicalrecord.image1.length>0">
           <div style="margin: 4px 0 8px;">报告上传：</div>
           <el-image
-            :preview-src-list="patiensMsg.outpatientElectronicmedicalrecord.image1"
+            :preview-src-list="patientMsgPreviewImages"
             :src="item"
             :key="index"
             style="width:64px;height: 64px;margin-right: 10px;"
-            alt
+            alt=""
             v-for="(item,index) in patiensMsg.outpatientElectronicmedicalrecord.image1"
           />
+          <template v-for="item in [
+            {id: 'overallLeft', addition: '&leftHand=true'},
+            {id: 'overallRight', addition: '&rightHand=true'},
+          ]">
+            <PulseImage ref="pulseImage" style="margin-right: 10px; width: 64px; height: 64px;"
+                        :key="item.id" :id="item.id" :addition="item.addition" :dataset="patiensMsg.pulseDiagnosisReportVo"
+                        @update="updatePatientMsgPreviewImages"
+            />
+          </template>
         </div>
       </div>
       <!-- mr-t30 -->
@@ -1146,6 +1155,7 @@ import TongueAnalysis from "./components/tongue-analysis.vue";
 import safeDrug from "./components/safeDrug.vue";
 import medAdress from "./components/medAddress.vue";
 import medAdressNew from "./components/medAddressNew.vue";
+import PulseImage from '@/components/PulseImage.vue';
 import {
   getPatiensBasisM,
   refreshElectronicInfo,
@@ -1191,6 +1201,7 @@ import {CC_Dosage2Basis} from '@/utils/medicine';
 export default {
   mixins: [prescribing],
   components: {
+    PulseImage,
     Popup,
     chineseMedicine,
     medicineChinese,
@@ -1336,6 +1347,7 @@ export default {
         }
       ],
       patiensMsg: {}, // 患者信息
+      patientMsgPreviewImages: [], // 患者信息预览图片
       dianosisMsg: [], // 诊断信息
 
       ops: {
@@ -1401,20 +1413,31 @@ export default {
     }
   },
   methods: {
-    async loadRecord() {
+    async loadRecord(tips = true) {
       this.recordLoading = true;
       try {
         let data = await refreshElectronicInfo({
           patientId: this.getPatiensInfo.pid
         });
-        if (data.outpatientElectronicmedicalrecord) data.outpatientElectronicmedicalrecord.image1 = formatPicture(data.outpatientElectronicmedicalrecord.image1);
+        if (data.outpatientElectronicmedicalrecord) {
+          data.outpatientElectronicmedicalrecord.image1 = formatPicture(data.outpatientElectronicmedicalrecord.image1);
+          this.patientMsgPreviewImages = [...data.outpatientElectronicmedicalrecord.image1];
+        }
         this.patiensMsg = {...this.patiensMsg, ...data};
-        this.$message.success('刷新成功');
+        if (tips) this.$message.success('刷新成功');
       } catch (e) {
-        this.$message.error(e.message);
+        if (tips) this.$message.error(e.message);
       }
       this.recordLoading = false;
     },
+    updatePatientMsgPreviewImages(image) {
+      let refs = this.$refs.pulseImage;
+      if (!Array.isArray(refs)) refs = [refs];
+      this.patientMsgPreviewImages = [
+          ...this.patiensMsg.outpatientElectronicmedicalrecord.image1,
+          ...refs.map(ref => ref.thumbnail)
+      ].filter(Boolean);
+    },
     // 处理路由参数
    async _processRouteQuery() {
       const query = this.$route.query || {};
@@ -3228,6 +3251,8 @@ export default {
         this.patiensMsg = res.Data;
 
         this.patiensMsg.outpatientElectronicmedicalrecord.image1 = formatPicture(this.patiensMsg.outpatientElectronicmedicalrecord.image1);
+        this.patientMsgPreviewImages = [...this.patiensMsg.outpatientElectronicmedicalrecord.image1];
+        await this.loadRecord(false);
         // if (!this.patiensMsg.maindiagnosis.disid) {
         //   this.$message.warning("请先提交一条诊断信息");
         //   this.$router.replace({