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

src/views/member/handwriteCollection/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <!-- 搜索表单（不变） -->
+    <!-- 搜索表单 -->
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="患者姓名" prop="patientName">
         <el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable size="small" @keyup.enter.native="handleQuery" />
@@ -52,6 +52,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">
@@ -80,7 +100,6 @@
               style="flex: 1;"
               @input="handleImageChange"
             />
-            <!-- 去掉OCR按钮，改为上传后自动识别 -->
           </div>
           <div v-if="ocrLoading" style="margin-top: 8px; font-size: 12px; color: #409EFF;">
             <i class="el-icon-loading"></i> 正在识别中，请稍候...
@@ -89,6 +108,10 @@
             {{ ocrMsg }}
           </div>
         </el-form-item>
+        <!-- 新增补充图片上传 -->
+        <el-form-item label="补充图片" prop="extraImgUrl">
+          <image-upload v-model="form.extraImgUrl" :limit="10" multiple />
+        </el-form-item>
         <el-form-item label="患者姓名" prop="patientName">
           <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
         </el-form-item>
@@ -99,7 +122,6 @@
           <el-input v-model="form.orderCode" placeholder="请输入订单号" style="width: 90%;">
             <i slot="suffix" class="el-input__icon el-icon-search" @click="fetchOrderInfo" style="cursor: pointer;"></i>
           </el-input>
-          <!-- 订单信息展示区域 -->
           <div v-if="orderInfoVisible" class="order-info-card" style="margin-top: 10px;">
             <el-card shadow="never">
               <div slot="header">
@@ -208,7 +230,6 @@ export default {
       this.title = "添加手写信息采集表";
       this.orderInfoVisible = false;
       this.ocrMsg = '';
-      // 新增模式，允许自动识别
       this.isNewRecord = true;
     },
     handleUpdate(row) {
@@ -221,24 +242,17 @@ export default {
         this.title = "修改手写信息采集表";
         this.orderInfoVisible = false;
         this.ocrMsg = '';
-        // 修改模式，不自动识别已有图片
         this.isNewRecord = false;
       });
     },
-    // 监听图片上传变化，自动触发识别（仅新增模式且非手动清空）
     handleImageChange(newUrl, oldUrl) {
-      // 仅在新增模式下，且新URL存在且不是清空操作时触发
       if (this.isNewRecord && newUrl && newUrl !== oldUrl) {
         this.autoOcr();
       }
     },
-    // 自动识别方法（无按钮，内部调用）
     async autoOcr() {
       if (!this.form.billImgUrl) return;
-      // 如果已经有患者姓名和电话，且不是覆盖模式，可以提示用户（可选，这里默认覆盖）
-      // 为防止短时间内重复触发，加标志
       if (this.ocrLoading) return;
-      // 全屏loading
       const loadingInstance = this.$loading({
         lock: true,
         text: '正在识别图片信息，请稍候（预计10秒）...',
@@ -273,47 +287,46 @@ export default {
         loadingInstance.close();
       }
     },
-    // 点击搜索图标：获取订单信息并展示
     async fetchOrderInfo() {
       const orderCode = this.form.orderCode;
       if (!orderCode || orderCode.trim() === '') {
         this.$message.warning('请输入订单号');
         return;
       }
-        const res = await getOrderCodeInfo(orderCode);
-        if (res.code !== 200 || !res.data) {
-          this.$message.error(res.msg || '订单号无效或不存在');
-          this.orderInfoVisible = false;
-          return;
-        }
-        const orderId = res.data.id;
-        const orderDetailRes = await getStoreOrder(orderId);
-        if (orderDetailRes.code !== 200) {
-          this.$message.error('获取订单详情失败');
-          this.orderInfoVisible = false;
-          return;
-        }
-        const order = orderDetailRes.order;
-        if (order) {
-          let statusText = '';
-          if (this.statusOptions && this.statusOptions.length) {
-            const statusObj = this.statusOptions.find(item => item.dictValue == order.status);
-            statusText = statusObj ? statusObj.dictLabel : '';
-          }
-          this.orderInfo = {
-            orderCode: order.orderCode,
-            realName: order.realName,
-            userPhone: order.userPhone,
-            userAddress: order.userAddress,
-            payMoney: order.payMoney,
-            statusText: statusText
-          };
-          this.orderInfoVisible = true;
-          this.$message.success('已加载订单信息，请对照核对');
-        } else {
-          this.$message.warning('订单信息不完整');
-          this.orderInfoVisible = false;
+      const res = await getOrderCodeInfo(orderCode);
+      if (res.code !== 200 || !res.data) {
+        this.$message.error(res.msg || '订单号无效或不存在');
+        this.orderInfoVisible = false;
+        return;
+      }
+      const orderId = res.data.id;
+      const orderDetailRes = await getStoreOrder(orderId);
+      if (orderDetailRes.code !== 200) {
+        this.$message.error('获取订单详情失败');
+        this.orderInfoVisible = false;
+        return;
+      }
+      const order = orderDetailRes.order;
+      if (order) {
+        let statusText = '';
+        if (this.statusOptions && this.statusOptions.length) {
+          const statusObj = this.statusOptions.find(item => item.dictValue == order.status);
+          statusText = statusObj ? statusObj.dictLabel : '';
         }
+        this.orderInfo = {
+          orderCode: order.orderCode,
+          realName: order.realName,
+          userPhone: order.userPhone,
+          userAddress: order.userAddress,
+          payMoney: order.payMoney,
+          statusText: statusText
+        };
+        this.orderInfoVisible = true;
+        this.$message.success('已加载订单信息，请对照核对');
+      } else {
+        this.$message.warning('订单信息不完整');
+        this.orderInfoVisible = false;
+      }
     },
     async submitForm() {
       this.$refs.form.validate(async (valid) => {
@@ -372,6 +385,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,
@@ -379,7 +397,8 @@ export default {
         companyUserName: null,
         patientPhone: null,
         billImgUrl: null,
-        orderCode: null
+        orderCode: null,
+        extraImgUrl: ''
       };
       this.originalOrderCode = null;
       this.ocrMsg = '';

src/views/member/handwritePatientForm/index.vue

@@ -33,17 +33,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" />
@@ -70,8 +77,9 @@
         <el-form-item label="患者电话" prop="patientPhone">
           <el-input v-model="form.patientPhone" placeholder="请输入患者电话" />
         </el-form-item>
+        <!-- 初诊单上传：支持多张，最多10张 -->
         <el-form-item label="初诊单" prop="billImgUrl">
-          <image-upload v-model="form.billImgUrl" :limit="1" />
+          <image-upload v-model="form.billImgUrl" :limit="10" multiple />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -88,7 +96,7 @@ import ImageUpload from "@/components/ImageUpload";
 
 export default {
   name: "HandwritePatientForm",
-  components: {ImageUpload},
+  components: { ImageUpload },
   data() {
     return {
       loading: true,
@@ -191,13 +199,18 @@ 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,
         patientName: null,
         companyUserName: null,
         patientPhone: null,
-        billImgUrl: null
+        billImgUrl: ''   // 初始化为空字符串
       };
       if (this.$refs.form) {
         this.$refs.form.resetFields();