添加报告图片预览功能

.env.development

@@ -4,6 +4,6 @@ BASE_URL = '/'
 VUE_APP_BASE_API = '/WebAPI'
 
 VUE_APP_CODE_IMG='http://192.168.0.20:8063/'
-VUE_APP_UPLOAD='http://192.168.0.34:8063/'
+VUE_APP_UPLOAD='/'
 VUE_APP_XUEWEI = 'http://www.hzxunmai.com/'
 VUE_APP_DOWNLOAD = 'http://47.118.22.101:8080'

src/components/ui/outpatientRecords.vue

@@ -72,6 +72,18 @@
                 </div>
             </div>
 
+          <div class="msg-item flex flex-row-left flex-col-top" v-if="info.image1 && info.image1.length>0">
+            <div style="margin: 4px 0 8px;">报告图片：</div>
+            <el-image
+                :preview-src-list="info.image1"
+                :src="item"
+                :key="index"
+                style="width:64px;height: 64px;margin-right: 10px;"
+                alt
+                v-for="(item,index) in info.image1"
+            />
+          </div>
+
             <div class="msg-item flex flex-row-left flex-col-top">
                 <div class="name">诊断：</div>
                 <div class="desc">

src/utils/picture.js

@@ -0,0 +1,4 @@
+export function formatPicture(picture) {
+    if (!picture) return [];
+    return picture.split(',').filter(Boolean).map(url => /https?/.test(url) ? url : `${process.env.VUE_APP_UPLOAD}file/${url}`);
+}

src/views/business/MedRecordDetail.vue

@@ -99,6 +99,19 @@
             <div class="right flex-plane-center-l flex-wrap">无</div>
           </div>
         </div>
+        <div class="r-msg-item flex-plane-center-l">
+          <span class="name">报告照片：</span>
+          <div class="right flex-plane-center-l flex-wrap">
+            <el-image
+                :preview-src-list="item.electronicmedicalrecord.image1"
+                style="width:100px;height:100px;margin-right:20px;"
+                :src="item1"
+                alt
+                v-for="(item1,index1) in item.electronicmedicalrecord.image1"
+                :key="index1"
+            />
+          </div>
+        </div>
         <div class="r-msg-item flex-plane-center-l">
           <span class="name">诊断：</span>
           <div
@@ -143,16 +156,16 @@
                     </div>
         </div>-->
 
-        <div>
+        <!--<div>
           <el-image
-            :preview-src-list="[item1]"
+            :preview-src-list="item.electronicmedicalrecord.image1"
             style="width:100px;height:100px;margin-right:20px;"
             :src="item1"
             alt
             v-for="(item1,index1) in item.electronicmedicalrecord.image1"
             :key="index1"
           />
-        </div>
+        </div>-->
       </div>
     </div>
   </div>
@@ -160,6 +173,7 @@
 <script>
 import { mapGetters, mapMutations } from "vuex";
 import { getPatiensMedDetail, patiensTrunCase } from "@/api/business.js";
+import {formatPicture} from "@/utils/picture";
 export default {
   data() {
     return {
@@ -227,10 +241,7 @@ export default {
       });
       if (res.ResultCode == 0) {
         res.Data.patientDetailVos.forEach((item, index) => {
-          item.electronicmedicalrecord.image1 = item.electronicmedicalrecord
-            .image1
-            ? item.electronicmedicalrecord.image1.split(",")
-            : [];
+          item.electronicmedicalrecord.image1 = formatPicture(item.electronicmedicalrecord.image1);
 
           if (index == res.Data.patientDetailVos.length - 1) {
             item.color = "#5386F6";

src/views/business/MedicalContol.vue

@@ -134,6 +134,7 @@ import { getCDiseaseName, getCCardType } from "@/api/knowledge.js";
 import medcalPad from "@/components/ui/outpatientRecords";
 import proup from "@/components/Propup";
 import { mapGetters } from "vuex";
+import {formatPicture} from "@/utils/picture";
 export default {
   components: {
     proup,
@@ -298,6 +299,7 @@ export default {
       if (res.ResultCode == 0) {
         loading.close();
         this.medicalItem = res.Data;
+        this.medicalItem.image1 = formatPicture(this.medicalItem.image1);
         this.showCase = true;
       } else {
         loading.close();

src/views/business/RecipeAuditD.vue

@@ -130,7 +130,7 @@
             <span>报告图片：</span>
             <div>
               <el-image
-                :preview-src-list="[item1]"
+                :preview-src-list="msg.electronicmedicalrecord.image1"
                 style="width:100px;height:100px;margin-right:20px;"
                 :src="item1"
                 alt
@@ -212,6 +212,9 @@ import chineseMadepad from "@/components/ui/chineseMadePad.vue";
 import suitPad from "@/components/ui/suitMadePad.vue";
 import { getRecordDetail } from "@/api/diagnosis";
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+import {formatPicture} from "@/utils/picture";
+
 export default {
   components: {
     chinesepad,
@@ -350,10 +353,7 @@ export default {
     async getRecipeAuditD() {
       let res = await getRecipeAuditD(this.$route.query.pid);
       if (res.ResultCode == 0) {
-        res.Data.electronicmedicalrecord.image1 = res.Data
-          .electronicmedicalrecord.image1
-          ? res.Data.electronicmedicalrecord.image1.split(",")
-          : [];
+        res.Data.electronicmedicalrecord.image1 = formatPicture(res.Data.electronicmedicalrecord.image1);
 
         res.Data.patientprescription.forEach(item => {
           item.reason = "";

src/views/business/components/PriviewEdit.vue

@@ -255,6 +255,7 @@
 
 <script>
 import { fileUpload } from "@/api/upload.js";
+import { formatPicture } from "@/utils/picture";
 export default {
   props: {
     editListF: {
@@ -262,8 +263,16 @@ export default {
       default: () => {
         return [];
       }
+    },
+    imageUrl: {
+      type: Array,
+      default: () => { return []; }
     }
   },
+  model: {
+    prop: "imageUrl",
+    event: "upload",
+  },
   created() {
     this.editList = JSON.parse(JSON.stringify(this.editListF));
     if (this.$route.path == "/index/emr") {
@@ -630,7 +639,6 @@ export default {
       },
       dialogVisible: false,
       dialogVisibleConfirm: false,
-      imageUrl: []
     };
   },
   methods: {
@@ -642,13 +650,11 @@ export default {
           message: "上传成功",
           showClose: true
         });
-        this.imageUrl.push(
-          process.env.VUE_APP_UPLOAD + "file/" + res.ResultInfo
-        );
+        this.$emit('upload', [...this.imageUrl, ...formatPicture(res.ResultInfo),]);
       }
     },
     handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
+      // this.imageUrl = URL.createObjectURL(file.raw);
     },
     beforeAvatarUpload(file) {
       console.log(file, "file文件");
@@ -666,7 +672,8 @@ export default {
       return false;
     },
     deleteImgList(ind) {
-      this.imageUrl.splice(ind, 1);
+      const value = this.imageUrl[ind];
+      this.$emit('upload', this.imageUrl.filter(url => url !== value ));
     },
     add(type, index, item) {
       const arr = {

src/views/diagnosis/Diagnosis.vue

@@ -50,16 +50,17 @@
           <span>辅助检查：</span>
           {{patiensMsg.outpatientElectronicmedicalrecord.supplementaryexamination}}
         </p>
-        <p v-if="patiensMsg.outpatientElectronicmedicalrecord.image1.length>0">
+        <div v-if="patiensMsg.outpatientElectronicmedicalrecord.image1.length>0">
+          <div style="margin: 4px 0 8px;">报告上传：</div>
           <el-image
-            :preview-src-list="[item]"
+            :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"
           />
-        </p>
+        </div>
       </div>
     </div>
     <div class="diagnosis-container">
@@ -253,6 +254,9 @@ import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 import TCMDiagnosis from "../../components/TCMDiagnosis.vue";
 
 import { setTimeout } from "timers";
+
+import { formatPicture } from "@/utils/picture";
+
 export default {
   components: {
     TCMDiagnosis
@@ -810,21 +814,7 @@ export default {
           // // this.$router.back()
           // return
         }
-
-        if (res.Data.outpatientElectronicmedicalrecord.image1) {
-          let img1 = res.Data.outpatientElectronicmedicalrecord.image1.split(
-            ","
-          );
-          let arr = [];
-          img1.forEach(item => {
-            item = process.env.VUE_APP_UPLOAD + "file/" + item;
-
-            arr.push(item);
-          });
-          res.Data.outpatientElectronicmedicalrecord.image1 = arr;
-        } else {
-          res.Data.outpatientElectronicmedicalrecord.image1 = [];
-        }
+        res.Data.outpatientElectronicmedicalrecord.image1 = formatPicture(res.Data.outpatientElectronicmedicalrecord.image1);
 
         this.patiensMsg = res.Data;
       } else {

src/views/diagnosis/Emr.vue

@@ -25,7 +25,7 @@
         </div>
       </div>
       <div class="emr-form">
-        <PriviewEdit :editListF="temItem.templateContent" ref="edit"></PriviewEdit>
+        <PriviewEdit ref="edit" :editListF="temItem.templateContent" v-model="previewPicture"></PriviewEdit>
       </div>
     </div>
 
@@ -53,6 +53,9 @@ import { getTemplateList, getLastTemId, saveLastTemId } from "@/api/emr";
 import { mapGetters, mapMutations } from "vuex";
 import uploadFile from "@/components/UploadFile.vue";
 import PriviewEdit from "../business/components/PriviewEdit.vue";
+
+import { formatPicture } from "@/utils/picture";
+
 export default {
   components: {
     uploadFile,
@@ -88,6 +91,7 @@ export default {
       ],
       temItem: {},
       priviewItem: {},
+      previewPicture: [1,23,],
       dialogVisible: false
     };
   },
@@ -795,14 +799,7 @@ export default {
         } else {
           this.showMsgToTem(res.Data[0]);
         }
-        if (!res.Data[0].image1) return;
-        res.Data[0].image1 = res.Data[0].image1.split(",");
-
-        res.Data[0].image1.forEach(item => {
-          this.$refs.edit.imageUrl.push(
-            process.env.VUE_APP_UPLOAD + "file/" + item
-          );
-        });
+        this.previewPicture = res.Data[0].image1 = formatPicture(res.Data[0].image1);
 
         setTimeout(() => {
           this.isEdit = false;

src/views/diagnosis/Prescribing.vue

@@ -50,16 +50,17 @@
           <span>辅助检查：</span>
           {{patiensMsg.outpatientElectronicmedicalrecord.supplementaryexamination}}
         </p>
-        <p v-if="patiensMsg.outpatientElectronicmedicalrecord.image1.length>0">
+        <div v-if="patiensMsg.outpatientElectronicmedicalrecord.image1.length>0">
+          <div style="margin: 4px 0 8px;">报告上传：</div>
           <el-image
-            :preview-src-list="[item]"
+            :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"
           />
-        </p>
+        </div>
       </div>
       <!-- mr-t30 -->
       <div class="pre-title" v-if="false">
@@ -1146,6 +1147,8 @@ import { getExperinceDetail } from "@/api/business.js";
 import { setTimeout } from "timers";
 import prescribing from "../../utils/minix/prescribing";
 
+import {formatPicture} from "@/utils/picture";
+
 export default {
   mixins: [prescribing],
   components: {
@@ -3112,20 +3115,7 @@ export default {
           : [];
         this.patiensMsg = res.Data;
 
-        if (this.patiensMsg.outpatientElectronicmedicalrecord.image1) {
-          let img1 = res.Data.outpatientElectronicmedicalrecord.image1.split(
-            ","
-          );
-          let arr = [];
-          img1.forEach(item => {
-            item = process.env.VUE_APP_UPLOAD + "file/" + item;
-
-            arr.push(item);
-          });
-          res.Data.outpatientElectronicmedicalrecord.image1 = arr;
-        } else {
-          this.patiensMsg.outpatientElectronicmedicalrecord.image1 = [];
-        }
+        this.patiensMsg.outpatientElectronicmedicalrecord.image1 = formatPicture(this.patiensMsg.outpatientElectronicmedicalrecord.image1);
         // if (!this.patiensMsg.maindiagnosis.disid) {
         //   this.$message.warning("请先提交一条诊断信息");
         //   this.$router.replace({

src/views/diagnosis/components/submitRecipe.vue

@@ -150,13 +150,13 @@
                   <span>{{ msg.electronicmedicalrecord.supplementaryexamination }}</span>
                 </div>
               </div>
-              <div class="ms-row">
+              <div class="ms-row" v-if="msg.electronicmedicalrecord.image1.length">
                 <div class="row-item">
                   <span>报告照片：</span>
                   <div class="img-body">
                     <el-image
                       class="img-item"
-                      :preview-src-list="[item1]"
+                      :preview-src-list="msg.electronicmedicalrecord.image1"
                       :src="item1"
                       alt
                       v-for="(item1,index1) in msg.electronicmedicalrecord.image1"
@@ -325,6 +325,9 @@ import Popup from "@/components/Propup.vue";
 import chineseMedicinePad from "@/components/ui/chineseMedicinePad.vue";
 import chineseMadePad from "@/components/ui/chineseMadePad.vue";
 import suitMadePad from "@/components/ui/suitMadePad.vue";
+
+import { formatPicture } from "@/utils/picture";
+
 export default {
   components: {
     Popup,
@@ -496,13 +499,7 @@ export default {
       // });
       if (this.priviewData.prescriptionVo) {
         this.msg = this.priviewData.prescriptionVo;
-        if (this.msg.electronicmedicalrecord.image1) {
-          this.msg.electronicmedicalrecord.image1 = this.msg.electronicmedicalrecord.image1.split(
-            ","
-          );
-        } else {
-          this.msg.electronicmedicalrecord.image1 = [];
-        }
+        this.msg.electronicmedicalrecord.image1 = formatPicture(this.msg.electronicmedicalrecord.image1);
       }
     },
     // 删除处方

vue.config.js

@@ -14,7 +14,7 @@ module.exports = {
                 // target: `http://192.168.1.10:8080/`, //王志飞本地
                 // target: `http://cloudclinicapi.9czn.cn/`, // 测试地址
                 // target: `http://115.236.184.102:8081/`, // 萧山物理机
-                target: `http://121.43.162.141:8001/sunplus-xiaoshan-api/`, // [萧山] 测试环境的后端地址
+                target: `http://121.43.162.141:80/`, // [萧山] 测试环境的后端地址
                 // target: 'http://192.168.204.124:8081/', // 客户正式服务器"
 
                 // target: `http://www.hzxunmai.com/`, // 正式域名
@@ -24,6 +24,9 @@ module.exports = {
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: ''
                 }
+            },
+            '/file': {
+                target: `http://121.43.162.141:80/`, // [萧山] 测试环境的后端地址
             }
         },