fix: 李红攀：V2.0.061采购入库、销售出库添加扫码功能

2026-05-26 10:39:41 +08:00
parent 2e48dcda74
commit e750894e01
3 changed files with 108 additions and 91 deletions
--- a/src/pages-erp/purchase-in/scan-in/index.vue
+++ b/src/pages-erp/purchase-in/scan-in/index.vue
@@ -268,17 +268,28 @@ onMounted(async () => {
  }, 500)
 })

+const ERROR_DISPLAY_MS = 2000
+
 /** 重置到初始状态 */
 function resetToIdle() {
  clearScanInputs()
  locationInfo.value = null
  productPreview.value = null
  step.value = 'idle'
-  // 延迟清空错误 + 聚焦光标，让用户先看到错误提示
  setTimeout(() => {
    clearFeedback()
    focusLocationInput()
-  }, 800)
+  }, ERROR_DISPLAY_MS)
+}
+
+/** 停留在产品扫码阶段 + 聚焦产品输入框（扫产品失败用） */
+function resetToProductScan() {
+  productBarCode.value = ''
+  productPreview.value = null
+  setTimeout(() => {
+    clearFeedback()
+    focusProductInput()
+  }, ERROR_DISPLAY_MS)
 }

 /** 聚焦库位码输入框 */
@@ -394,13 +405,13 @@ async function handleProductScan() {
      productPreview.value = await getProductByBarCode(code)
    } catch {
      setErrorFeedback(`条码 ${code} 未匹配到产品`)
-      resetToIdle()
+      resetToProductScan()
      return
    }

    if (!productPreview.value?.id) {
      setErrorFeedback(`条码 ${code} 未匹配到产品`)
-      resetToIdle()
+      resetToProductScan()
      return
    }

--- a/src/pages-erp/sale-out/scan-out/components/recent-scan-list.vue
+++ b/src/pages-erp/sale-out/scan-out/components/recent-scan-list.vue
@@ -3,134 +3,129 @@
    <view v-if="records.length === 0" class="recent-scan-list__empty">
      暂无扫码记录
    </view>
+
    <view
      v-for="(record, index) in records"
      :key="record.id || index"
-      class="recent-scan-item"
-      :class="{ 'recent-scan-item--new': index === latestIndex }"
+      class="scan-card"
+      :class="{ 'scan-card--latest': latestIndex === index }"
    >
-      <view class="recent-scan-item__main">
-        <view class="recent-scan-item__info">
-          <text class="recent-scan-item__name">{{ record.productName || '-' }}</text>
-          <text class="recent-scan-item__spec">{{ record.productSpec || '-' }}</text>
+      <view class="scan-card__header">
+        <text class="scan-card__name">{{ record.productName || '-' }}</text>
+        <text class="scan-card__delete" @tap="$emit('delete', index)">删除</text>
      </view>
-        <view class="recent-scan-item__meta">
-          <text class="recent-scan-item__location">{{ record.locationCode || '-' }}</text>
-          <text class="recent-scan-item__count">x{{ record.scanCount || 1 }}</text>
+
+      <view class="scan-card__meta">
+        <text>条码：{{ record.productBarCode || '-' }}</text>
+        <text>规格：{{ record.productSpec || '-' }}</text>
      </view>
+      <view class="scan-card__meta">
+        <text>仓库：{{ record.warehouseName || '-' }}</text>
+        <text>单位：{{ record.productUnit || '-' }}</text>
      </view>
-      <view class="recent-scan-item__time">
-        <text>{{ formatTime(record.scanTime) }}</text>
-        <text class="recent-scan-item__delete" @tap.stop="$emit('delete', index)">删除</text>
+      <view class="scan-card__meta">
+        <text>库位：{{ record.locationCode || '-' }}</text>
+        <text>批次：{{ record.batchNo || '-' }}</text>
+      </view>
+      <view class="scan-card__footer">
+        <text class="scan-card__time">{{ formatTime(record.scanTime) }}</text>
+        <text class="scan-card__count">{{ record.scanCount }}</text>
      </view>
    </view>
  </view>
 </template>

 <script setup lang="ts">
+import type { ScanRecord } from '../index.vue'
+
 defineProps<{
-  records: any[]
+  records: ScanRecord[]
  latestIndex?: number
 }>()

 defineEmits<{
  (event: 'delete', index: number): void
+  (event: 'clear'): void
 }>()

-function formatTime(timeStr?: string) {
-  if (!timeStr) return ''
-  try {
-    const d = new Date(timeStr)
-    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`
-  } catch {
-    return ''
-  }
+function formatTime(time?: string) {
+  if (!time) return '-'
+  const date = new Date(time)
+  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
 }
 </script>

 <style lang="scss" scoped>
 .recent-scan-list {
  &__empty {
-    text-align: center;
+    padding: 48rpx;
+    border-radius: 16rpx;
+    background: #fff;
    color: #86909c;
-    font-size: 24rpx;
-    padding: 24rpx 0;
+    text-align: center;
+    font-size: 26rpx;
  }
 }

-.recent-scan-item {
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
+.scan-card {
+  margin-bottom: 16rpx;
+  padding: 24rpx;
+  border: 2rpx solid transparent;
+  border-radius: 16rpx;
+  background: #fff;

-  &:last-child {
-    border-bottom: none;
+  &--latest {
+    border-color: #1677ff;
+    box-shadow: 0 8rpx 20rpx rgba(22, 119, 255, 0.12);
  }

-  &--new {
-    background: #f6ffed;
-    margin: 0 -24rpx;
-    padding: 16rpx 24rpx;
-    border-radius: 12rpx;
-    border-bottom: none;
-  }
-
-  &__main {
+  &__header,
+  &__meta,
+  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    gap: 12rpx;
-    margin-bottom: 8rpx;
+    gap: 16rpx;
  }

-  &__info {
-    display: flex;
-    flex-direction: column;
-    gap: 4rpx;
-    min-width: 0;
-    flex: 1;
+  &__header {
+    margin-bottom: 10rpx;
  }

  &__name {
-    font-size: 26rpx;
-    font-weight: 600;
    color: #1f2329;
-  }
-
-  &__spec {
-    font-size: 22rpx;
-    color: #86909c;
-  }
-
-  &__meta {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 4rpx;
-  }
-
-  &__location {
-    font-size: 24rpx;
-    color: #52c41a;
+    font-size: 28rpx;
    font-weight: 600;
  }

-  &__count {
-    font-size: 24rpx;
-    color: #f5222d;
-    font-weight: 600;
-  }
-
-  &__time {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 20rpx;
-    color: #86909c;
-  }
-
  &__delete {
-    color: #f5222d;
-    padding: 4rpx 8rpx;
+    flex-shrink: 0;
+    color: #f53f3f;
+    font-size: 24rpx;
+  }
+
+  &__meta {
+    margin-top: 6rpx;
+    color: #4e5969;
+    font-size: 22rpx;
+    flex-wrap: wrap;
+  }
+
+  &__footer {
+    margin-top: 10rpx;
+    padding-top: 10rpx;
+    border-top: 2rpx solid #f2f3f5;
+  }
+
+  &__time {
+    color: #86909c;
+    font-size: 22rpx;
+  }
+
+  &__count {
+    color: #1677ff;
+    font-size: 28rpx;
+    font-weight: 700;
  }
 }
 </style>
--- a/src/pages-erp/sale-out/scan-out/index.vue
+++ b/src/pages-erp/sale-out/scan-out/index.vue
@@ -268,17 +268,28 @@ onMounted(async () => {
  }, 500)
 })

+const ERROR_DISPLAY_MS = 2000
+
 /** 重置到初始状态 */
 function resetToIdle() {
  clearScanInputs()
  locationInfo.value = null
  productPreview.value = null
  step.value = 'idle'
-  // 延迟清空错误 + 聚焦光标，让用户先看到错误提示
  setTimeout(() => {
    clearFeedback()
    focusLocationInput()
-  }, 800)
+  }, ERROR_DISPLAY_MS)
+}
+
+/** 停留在产品扫码阶段 + 聚焦产品输入框（扫产品失败用） */
+function resetToProductScan() {
+  productBarCode.value = ''
+  productPreview.value = null
+  setTimeout(() => {
+    clearFeedback()
+    focusProductInput()
+  }, ERROR_DISPLAY_MS)
 }

 /** 聚焦库位码输入框 */
@@ -394,13 +405,13 @@ async function handleProductScan() {
      productPreview.value = await getProductByBarCode(code)
    } catch {
      setErrorFeedback(`条码 ${code} 未匹配到产品`)
-      resetToIdle()
+      resetToProductScan()
      return
    }

    if (!productPreview.value?.id) {
      setErrorFeedback(`条码 ${code} 未匹配到产品`)
-      resetToIdle()
+      resetToProductScan()
      return
    }