Parcourir la source

总后台优化手写初诊单,手写信息采集页面,支持多张图片展示

cgp il y a 4 jours
Parent
commit
869b49aad4

+ 27 - 1
src/views/company/handwriteCollection/index.vue

@@ -46,6 +46,26 @@
           </el-image>
         </template>
       </el-table-column>
+      <!-- 新增补充图片列 -->
+      <el-table-column label="补充图片" align="center" prop="extraImgUrl" width="120">
+        <template slot-scope="scope">
+          <div v-if="scope.row.extraImgUrl">
+            <el-image
+              style="width: 50px; height: 50px"
+              :src="getExtraImgList(scope.row.extraImgUrl)[0]"
+              :preview-src-list="getExtraImgList(scope.row.extraImgUrl)"
+              fit="cover">
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </el-image>
+            <span v-if="getExtraImgList(scope.row.extraImgUrl).length > 1" style="margin-left: 4px; font-size: 12px; color: #999;">
+              +{{ getExtraImgList(scope.row.extraImgUrl).length - 1 }}
+            </span>
+          </div>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <el-table-column label="订单号" align="center" prop="orderCode" />
       <el-table-column label="创建销售" align="center" prop="companyUserName" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
@@ -178,6 +198,11 @@ export default {
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+    // 将逗号分隔的字符串转为图片URL数组
+    getExtraImgList(str) {
+      if (!str) return [];
+      return str.split(',').filter(url => url.trim() !== '');
+    },
     reset() {
       this.form = {
         id: null,
@@ -185,7 +210,8 @@ export default {
         companyUserName: null,
         patientPhone: null,
         billImgUrl: null,
-        orderCode: null
+        orderCode: null,
+        extraImgUrl: ''
       };
       this.originalOrderCode = null;
       this.ocrMsg = '';

+ 21 - 9
src/views/company/handwritePatientForm/index.vue

@@ -27,17 +27,24 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="患者姓名" align="center" prop="patientName" />
       <el-table-column label="患者电话" align="center" prop="patientPhone" />
+      <!-- 初诊单列:支持多张预览 -->
       <el-table-column label="初诊单" align="center" prop="billImgUrl" width="120">
         <template slot-scope="scope">
-          <el-image
-            style="width: 50px; height: 50px"
-            :src="scope.row.billImgUrl"
-            :preview-src-list="[scope.row.billImgUrl]"
-            fit="cover">
-            <div slot="error" class="image-slot">
-              <i class="el-icon-picture-outline"></i>
-            </div>
-          </el-image>
+          <div v-if="scope.row.billImgUrl">
+            <el-image
+              style="width: 50px; height: 50px"
+              :src="getImgList(scope.row.billImgUrl)[0]"
+              :preview-src-list="getImgList(scope.row.billImgUrl)"
+              fit="cover">
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </el-image>
+            <span v-if="getImgList(scope.row.billImgUrl).length > 1" style="margin-left: 4px; font-size: 12px; color: #999;">
+              +{{ getImgList(scope.row.billImgUrl).length - 1 }}
+            </span>
+          </div>
+          <span v-else>-</span>
         </template>
       </el-table-column>
       <el-table-column label="创建销售" align="center" prop="companyUserName" />
@@ -134,6 +141,11 @@ export default {
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+    // 将逗号分隔的字符串转为图片URL数组
+    getImgList(str) {
+      if (!str) return [];
+      return str.split(',').filter(url => url.trim() !== '');
+    },
     reset() {
       this.form = {
         id: null,