抓取优化

src/views/weightManage/index.vue

@@ -92,11 +92,13 @@
                 <h4>比对结果</h4>
                 <div class="info-item">
                   <span class="label">比对结果:</span>
-                  <span class="value match-result" :class="{
+                  <span
+                    class="value match-result" :class="{
                       'match-success': formData.matchResult === 'success',
                       'match-failed': formData.matchResult === 'failed',
-                    'match-pending': !formData.matchResult
+                      'match-pending': !formData.matchResult,
-                  }">
+                    }"
+                  >
                     <icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;" />
                     <icon-close-circle-fill v-else-if="formData.matchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;" />
 
@@ -246,17 +248,17 @@
       <div class="action-buttons">
         <a-button
           v-if="activeStep > 1 && activeStep < 3"
-          @click="handlePrevious"
           class="previous-button"
+          @click="handlePrevious"
         >
           上一步
         </a-button>
         <a-button
           v-if="activeStep < 3"
           type="primary"
-          @click="handleNext"
           :disabled="activeStep === 1 && formData.matchResult !== 'success'"
           class="next-button"
+          @click="handleNext"
         >
           {{ activeStep === 2 ? '完成' : '下一步' }}
         </a-button>
@@ -266,16 +268,13 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, reactive, onUnmounted } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from 'vue'
-import { Modal, Message } from '@arco-design/web-vue'
+import { Message, Modal, Notification } from '@arco-design/web-vue'
-import { getMaterialDetail } from "@/apis/weightManage/weightManage";
+
-import {addWorkOrder, type WorkOrderResp} from "@/apis/workOrder/workOrder";
+import { getMaterialDetail } from '@/apis/weightManage/weightManage'
-import { Notification } from "@arco-design/web-vue"
+import { type WorkOrderResp, addWorkOrder } from '@/apis/workOrder/workOrder'
 import { catchPhoto } from '@/apis/material/materialInfo'
 
-
-
-
 defineOptions({ name: 'WeightManage' })
 
 // 动态导入flv.js
@@ -556,10 +555,9 @@ const workOrderResp = ref<WorkOrderResp>({
   updateUserString: '',
   totalCalculatedWeight: '',
   workOrderInfos: [],
-  matchResult: 'failed'
+  matchResult: 'failed',
 })
 
-
 // 称重登记页面数据
 const inputQuantity = ref('')
 const ahDeviceWeight = ref('10')
@@ -580,25 +578,25 @@ const columns = [
   {
     title: '称重次数',
     dataIndex: 'weightTime',
-    key: 'weightTime'
+    key: 'weightTime',
   },
   {
     title: '数量',
     dataIndex: 'quantity',
     key: 'quantity',
-    className: 'green-bg'
+    className: 'green-bg',
   },
   {
     title: '重量(g)',
     dataIndex: 'weight',
     key: 'weight',
-    className: 'green-bg'
+    className: 'green-bg',
   },
   {
     title: '计算重量(g)',
     dataIndex: 'calculatedWeight',
     key: 'calculatedWeight',
-    className: 'green-bg'
+    className: 'green-bg',
   },
   {
     title: '抓拍图片',
@@ -624,33 +622,33 @@ const columns = [
     title: '操作',
     dataIndex: 'action',
     key: 'action',
-    slotName: 'action'
+    slotName: 'action',
-  }
+  },
 ]
 
 // 防抖函数
 const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((...args: Parameters<T>) => void) => {
-  let timer: ReturnType<typeof setTimeout> | null = null;
+  let timer: ReturnType<typeof setTimeout> | null = null
   return function (...args: Parameters<T>) {
-    if (timer) clearTimeout(timer);
+    if (timer) clearTimeout(timer)
     timer = setTimeout(() => {
-      func(...args);
+      func(...args)
-    }, delay);
+    }, delay)
-  };
+  }
-};
+}
 
 // 原始的物料编码变化处理函数
 const originalHandleMaterialCodeChange = async () => {
   // 确保输入框内容是完整的物料编码
-  const materialCode = formData.inputMaterialCode?.trim();
+  const materialCode = formData.inputMaterialCode?.trim()
 
   // 无论是否有输入，先重置所有物料相关字段，确保新数据能完全覆盖旧数据
-  formData.encoding = "";
+  formData.encoding = ''
-  formData.materialName = "";
+  formData.materialName = ''
-  formData.materialSpec = "";
+  formData.materialSpec = ''
-  formData.unitWeight = 0;
+  formData.unitWeight = 0
-  formData.photoUrl = "";
+  formData.photoUrl = ''
-  formData.matchResult = "";
+  formData.matchResult = ''
 
   // 如果有物料编码输入，获取物料数据
   if (materialCode) {
@@ -661,17 +659,17 @@ const originalHandleMaterialCodeChange = async () => {
       // 即使获取失败，也保持字段为空，避免显示旧数据
     }
   }
-};
+}
 
 // 记录上次输入时间，用于判断是否是扫码枪输入
-let lastInputTime = 0;
+let lastInputTime = 0
 // 记录输入内容，用于判断是否是新的扫码
-let previousInput = '';
+const previousInput = ''
 
 // 处理键盘按下事件
 const handleKeyDown = (event: KeyboardEvent) => {
   // 获取当前时间
-  const currentTime = Date.now();
+  const currentTime = Date.now()
 
   // 如果输入速度非常快（小于100ms），认为是扫码枪输入
   if (currentTime - lastInputTime < 100 && formData.inputMaterialCode) {
@@ -679,33 +677,33 @@ const handleKeyDown = (event: KeyboardEvent) => {
   } else if (event.key.length === 1 && !event.ctrlKey && !event.altKey) {
     // 如果是新的输入（不是快速连续输入），清空输入框
     // 这样可以确保每次扫码都从空输入框开始
-    formData.inputMaterialCode = '';
+    formData.inputMaterialCode = ''
   }
 
   // 更新上次输入时间
-  lastInputTime = currentTime;
+  lastInputTime = currentTime
-};
+}
 
 // 带防抖的物料编码变化处理函数
-const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500); // 500ms防抖延迟
+const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500) // 500ms防抖延迟
 
 // 扫码核验获取物料信息
 const fetchMaterialData = async (code: string) => {
-  getMaterialDetail(code).then(res => {
+  getMaterialDetail(code).then((res) => {
-    if (res.code == '0') {
+    if (res.code === '0') {
       // 更新表单数据
-      formData.id = res.data?.id || "";
+      formData.id = res.data?.id || ''
-      formData.encoding = res.data?.encoding || "";
+      formData.encoding = res.data?.encoding || ''
-      formData.materialName = res.data?.materialName || "";
+      formData.materialName = res.data?.materialName || ''
-      formData.materialSpec = res.data?.materialSpec || "";
+      formData.materialSpec = res.data?.materialSpec || ''
-      formData.unitWeight = res.data?.unitWeight || 0;
+      formData.unitWeight = res.data?.unitWeight || 0
-      formData.photoUrl = res.data?.photoUrl || "";
+      formData.photoUrl = res.data?.photoUrl || ''
       // 假设后端返回比对结果
       // formData.matchResult = res.data.matchResult || 'failed' // 这里根据实际接口返回调整
       formData.matchResult = res.data?.matchResult || 'success' // 这里根据实际接口返回调整
       return true
     }
-  });
+  })
 }
 
 // 处理下一步
@@ -722,20 +720,20 @@ const handleNext = async () => {
             const workOrderData = {
               materialId: formData.id,
               materialName: formData.materialName,
-              workOrderInfos: weighingList.value
+              workOrderInfos: weighingList.value,
             }
             // 调用后端接口
-            addWorkOrder(workOrderData).then(res => {
+            addWorkOrder(workOrderData).then((res) => {
-              if (res.code == '0') {
+              if (res.code === '0') {
                 Notification.success({
                   title: '操作成功',
-                  content: `工单创建成功！`
+                  content: `工单创建成功！`,
                 })
-                workOrderResp.value.matchResult = 'success';
+                workOrderResp.value.matchResult = 'success'
-                workOrderResp.value.title = res.data?.title || "";
+                workOrderResp.value.title = res.data?.title || ''
-                workOrderResp.value.orderNo = res.data?.orderNo || "";
+                workOrderResp.value.orderNo = res.data?.orderNo || ''
-                workOrderResp.value.totalWeight = res.data?.totalWeight || "";
+                workOrderResp.value.totalWeight = res.data?.totalWeight || ''
-                workOrderResp.value.totalCount = res.data?.totalCount || "";
+                workOrderResp.value.totalCount = res.data?.totalCount || ''
 
                 // 关闭WebSocket连接
                 closeWebSocket()
@@ -743,12 +741,12 @@ const handleNext = async () => {
                 activeStep.value++
                 return true
               }
-            });
+            })
           } catch (error) {
             console.error('创建工作订单失败:', error)
             Message.error('创建工作订单失败')
           }
-        }
+        },
       })
     } else {
       activeStep.value++
@@ -804,8 +802,8 @@ const handleBackToFirst = () => {
 // 计算重量
 const calculateWeight = () => {
   if (inputQuantity.value && formData.unitWeight) {
-    const singleWeight = parseFloat(formData.unitWeight.toString())
+    const singleWeight = Number.parseFloat(formData.unitWeight.toString())
-    const quantity = parseFloat(inputQuantity.value)
+    const quantity = Number.parseFloat(inputQuantity.value)
     if (!isNaN(singleWeight) && !isNaN(quantity)) {
       calculatedWeight.value = (singleWeight * quantity).toFixed(2)
     }
@@ -814,10 +812,8 @@ const calculateWeight = () => {
   }
 }
 
-
-
 // 处理确定
-const handleConfirm =  () => {
+/* const handleConfirm = async () => {
   // 校验输入数量是否为空
   if (!inputQuantity.value || inputQuantity.value.trim() === '') {
     Message.error('请输入数量')
@@ -831,9 +827,9 @@ const handleConfirm =  () => {
   // 2. 抓拍当前画面
   let captureUrl = ''
   if (cameraVideo.value && cameraStatus.value === 'connected') {
-    captureUrl =  capturePhoto();
+    captureUrl = await capturePhoto()
   }
-
+  console.log(captureUrl)
   // 生成新的列表数据
   const newItem = {
     key: (weighingList.value.length + 1).toString(),
@@ -852,11 +848,69 @@ const handleConfirm =  () => {
   calculatedWeight.value = ''
   // 称重次数累加
   weighingCount.value = weighingList.value.length + 1
+  Message.success('添加成功')
+} */
+
+const handleConfirm = () => {
+  // 校验输入数量是否为空
+  if (!inputQuantity.value || inputQuantity.value.trim() === '') {
+    Message.error('请输入数量')
+    return
+  }
+  if (!ahDeviceWeight.value || ahDeviceWeight.value.trim() === '') {
+    Message.error('电子秤称重结果为空！')
+    return
+  }
+
+  // 立即创建一个新项的基本数据
+  const newItem = {
+    key: (weighingList.value.length + 1).toString(),
+    weightTime: weighingCount.value,
+    materialId: formData.id,
+    quantity: inputQuantity.value,
+    weight: ahDeviceWeight.value,
+    calculatedWeight: calculatedWeight.value,
+    image: '加载中...', // 先显示加载状态
+  }
+
+  // 先添加到列表，让用户能立即看到记录
+  weighingList.value.push(newItem)
+
+  // 重置输入（让用户能继续输入）
+  inputQuantity.value = ''
+  ahDeviceWeight.value = '10'
+  calculatedWeight.value = ''
+  weighingCount.value = weighingList.value.length + 1
+
+  // 异步执行抓拍，不阻塞主流程
+  if (cameraVideo.value && cameraStatus.value === 'connected') {
+    // 立即执行异步抓拍
+    capturePhoto().then((captureUrl) => {
+      // 找到刚刚添加的项，更新图片URL
+      const addedItem = weighingList.value.find((item) => item.key === newItem.key)
+      if (addedItem) {
+        addedItem.image = captureUrl || '抓拍失败'
+        // 触发视图更新
+        weighingList.value = [...weighingList.value]
+      }
+      Message.success('图片抓拍成功')
+    }).catch((error) => {
+    })
+  } else {
+    // 摄像头未连接，直接显示未抓拍
+    const addedItem = weighingList.value.find((item) => item.key === newItem.key)
+    if (addedItem) {
+      addedItem.image = '未抓拍'
+      weighingList.value = [...weighingList.value]
+    }
+  }
+
   Message.success('添加成功')
 }
 
 // 抓拍功能 - 内部方法，不暴露按钮
 const capturePhoto = (): Promise<string> => {
+  // eslint-disable-next-line no-async-promise-executor
   return new Promise(async (resolve, reject) => {
     try {
       const video = cameraVideo.value
@@ -883,8 +937,7 @@ const capturePhoto = (): Promise<string> => {
 
       // 调用后端接口
       const response = await catchPhoto(formData)
-      if (response.code !== '200') {
+      if (response.msg !== 'ok') {
-        reject(new Error('上传失败'))
         return
       }
 
@@ -923,7 +976,7 @@ const handleReset = () => {
 // 处理删除
 const handleDelete = (key) => {
   // 过滤掉要删除的项
-  weighingList.value = weighingList.value.filter(item => item.key !== key)
+  weighingList.value = weighingList.value.filter((item) => item.key !== key)
   // 重新排序称重次数
   weighingList.value.forEach((item, index) => {
     item.weightTime = index + 1