优化手写信息查看订单效果

src/api/member/handwriteCollection/handwriteCollection.js

@@ -58,3 +58,12 @@ export function getOrderCodeInfo(orderCode) {
     method: 'get'
   })
 }
+
+// OCR识别手写采集表图片
+export function ocrImage(data) {
+  return request({
+    url: '/handwrite/collection/orc',
+    method: 'post',
+    data: data
+  })
+}

src/views/member/handwriteCollection/index.vue

@@ -1,5 +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" />
@@ -16,6 +17,7 @@
       </el-form-item>
     </el-form>
 
+    <!-- 操作按钮 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
@@ -29,6 +31,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
     </el-row>
 
+    <!-- 表格 -->
     <el-table v-loading="loading" :data="collectionList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="患者姓名" align="center" prop="patientName" />
@@ -62,10 +65,25 @@
 
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
+    <!-- 新增/编辑弹窗 -->
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="手写信息采集表" prop="billImgUrl">
-          <image-upload v-model="form.billImgUrl" :limit="1" />
+          <div style="display: flex; align-items: center; gap: 10px;">
+            <image-upload
+              v-model="form.billImgUrl"
+              :limit="1"
+              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> 正在识别中，请稍候...
+          </div>
+          <div v-if="ocrMsg && !ocrLoading" style="margin-top: 8px; font-size: 12px;" :class="ocrMsg.includes('成功') ? 'success-msg' : 'error-msg'">
+            {{ ocrMsg }}
+          </div>
         </el-form-item>
         <el-form-item label="患者姓名" prop="patientName">
           <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
@@ -77,7 +95,7 @@
           <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">
@@ -108,7 +126,7 @@
 </template>
 
 <script>
-import { listCollection, getCollection, addCollection, updateCollection, delCollection, checkOrderCode, getOrderCodeInfo } from "@/api/member/handwriteCollection/handwriteCollection";
+import { listCollection, getCollection, addCollection, updateCollection, delCollection, checkOrderCode, getOrderCodeInfo, ocrImage } from "@/api/member/handwriteCollection/handwriteCollection";
 import { getStoreOrder } from "@/api/hisStore/storeOrder";
 import ImageUpload from "@/components/ImageUpload";
 
@@ -126,9 +144,12 @@ export default {
       ids: [],
       single: true,
       multiple: true,
-      // 记录原始订单号，用于修改时判断是否变化
       originalOrderCode: null,
       orderInfoVisible: false,
+      orderInfo: {},
+      ocrLoading: false,
+      ocrMsg: '',
+      statusOptions: [],
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -153,6 +174,11 @@ export default {
   },
   created() {
     this.getList();
+    this.getDicts("store_order_status").then(response => {
+      this.statusOptions = response.data;
+    }).catch(() => {
+      this.statusOptions = [];
+    });
   },
   methods: {
     getList() {
@@ -175,20 +201,73 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加手写信息采集表";
-      this.orderInfoVisible = false; // 新增时关闭订单信息展示
+      this.orderInfoVisible = false;
+      this.ocrMsg = '';
+      // 新增模式，允许自动识别
+      this.isNewRecord = true;
     },
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids[0];
       getCollection(id).then(response => {
         this.form = response.data;
-        // 保存原始订单号
         this.originalOrderCode = this.form.orderCode;
         this.open = true;
         this.title = "修改手写信息采集表";
-        this.orderInfoVisible = false; // 新增时关闭订单信息展示
+        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秒）...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.ocrLoading = true;
+      this.ocrMsg = '';
+      try {
+        const res = await ocrImage({ imgUrl: this.form.billImgUrl });
+        if (res.code === 200 && res.data) {
+          const { name, phone, isParse } = res.data;
+          if (isParse === 1) {
+            if (name) this.form.patientName = name;
+            if (phone) this.form.patientPhone = phone;
+            this.ocrMsg = '识别成功，已自动填入姓名和电话';
+            this.$message.success('识别成功');
+          } else {
+            this.ocrMsg = '识别失败，请确认图片清晰并包含姓名和电话信息';
+            this.$message.warning('识别失败，请确认图片清晰');
+          }
+        } else {
+          this.ocrMsg = res.msg || '识别失败，请稍后重试';
+          this.$message.error(this.ocrMsg);
+        }
+      } catch (error) {
+        console.error(error);
+        this.ocrMsg = '请求失败，请检查网络';
+        this.$message.error('OCR识别请求失败');
+      } finally {
+        this.ocrLoading = false;
+        loadingInstance.close();
+      }
+    },
     // 点击搜索图标：获取订单信息并展示
     async fetchOrderInfo() {
       const orderCode = this.form.orderCode;
@@ -196,9 +275,7 @@ export default {
         this.$message.warning('请输入订单号');
         return;
       }
-      // 校验格式？可略
       try {
-        // 1. 获取订单主键ID
         const res = await getOrderCodeInfo(orderCode);
         if (res.code !== 200 || !res.data) {
           this.$message.error(res.msg || '订单号无效或不存在');
@@ -206,7 +283,6 @@ export default {
           return;
         }
         const orderId = res.data.id;
-        // 2. 获取订单详情
         const orderDetailRes = await getStoreOrder(orderId);
         if (orderDetailRes.code !== 200) {
           this.$message.error('获取订单详情失败');
@@ -215,7 +291,6 @@ export default {
         }
         const order = orderDetailRes.order;
         if (order) {
-          // 映射状态文本（如果有状态字典）
           let statusText = '';
           if (this.statusOptions && this.statusOptions.length) {
             const statusObj = this.statusOptions.find(item => item.dictValue == order.status);
@@ -241,19 +316,16 @@ export default {
         this.orderInfoVisible = false;
       }
     },
-
     async submitForm() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
           const isUpdate = this.form.id != null;
           let needCheckOrder = true;
 
-          // 如果是修改，且订单号未改变，则不需要校验
           if (isUpdate && this.form.orderCode === this.originalOrderCode) {
             needCheckOrder = false;
           }
 
-          // 需要校验订单号（新增时 always true，修改时订单号改变则校验）
           if (needCheckOrder && this.form.orderCode) {
             try {
               const res = await checkOrderCode(this.form.orderCode);
@@ -267,7 +339,6 @@ export default {
             }
           }
 
-          // 校验通过，执行新增/修改
           if (isUpdate) {
             updateCollection(this.form).then(() => {
               this.$message.success("修改成功");
@@ -310,8 +381,9 @@ export default {
         billImgUrl: null,
         orderCode: null
       };
-      // 重置原始订单号
       this.originalOrderCode = null;
+      this.ocrMsg = '';
+      this.ocrLoading = false;
       if (this.$refs.form) {
         this.$refs.form.resetFields();
       }
@@ -340,4 +412,10 @@ export default {
   border-radius: 4px;
   overflow: hidden;
 }
+.success-msg {
+  color: #67C23A;
+}
+.error-msg {
+  color: #F56C6C;
+}
 </style>