添加掌上工厂应用

apps/hand-factory/components/scan-result-card/scan-result-card.vue

@@ -0,0 +1,135 @@
+<template>
+  <view class="result-card" v-if="scanResult && codeStatus !== undefined">
+    <!-- 头部：标题+时间 -->
+    <view class="result-header">
+      <text class="result-title">扫码信息</text>
+      <text class="result-time">{{ currentTime }}</text>
+    </view>
+
+    <!-- 主体：根据配置循环渲染字段，无v-if -->
+    <view class="result-body">
+      <view 
+        class="info-item" 
+        v-for="(column, index) in displayColumns" 
+        :key="index"
+        v-if="column.showCondition(codeStatus, scanResult)"
+      >
+        <text class="info-label">{{ column.label }}：</text>
+        <text class="info-value">
+          {{ column.formatter ? column.formatter(scanResult[column.key], codeStatus) : scanResult[column.key] || '无' }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { formatIoType, formatItemType } from '@/utils/wms';
+import { CODE_STATUS } from '@/constants/wms';
+
+export default {
+  name: 'ScanResultCard',
+  props: {
+    scanResult: {
+      type: Object,
+      default: () => null,
+      required: true
+    },
+    currentTime: {
+      type: String,
+      default: '',
+      required: true
+    },
+    codeStatus: {
+      type: Number,
+      default: CODE_STATUS.UNUSED, // 默认未使用
+      required: true
+    }
+  },
+  computed: {
+    // 字段显示配置：集中定义“显示哪些字段、怎么显示”
+    displayColumns() {
+      return [
+        // 操作类型：仅状态0/1显示
+        {
+          label: '操作类型',
+          key: 'ioType', // scanResult中的键
+          formatter: formatIoType, // 调用工具函数格式化
+          showCondition: (status) => status !== CODE_STATUS.OUT_STOCK // 状态2（已出库）不显示
+        },
+        // 物品类型：所有状态显示
+        {
+          label: '物品类型',
+          key: 'itemType',
+          formatter: formatItemType,
+          showCondition: () => true // 始终显示
+        },
+        // 数量：所有状态显示（注意：原组件用count，父组件用quantity，这里统一为quantity）
+        {
+          label: '数量',
+          key: 'quantity',
+          formatter: (val) => val || 0,
+          showCondition: () => true
+        },
+        // 仓库ID：仅状态0/1显示
+        {
+          label: '仓库ID',
+          key: 'warehouseName',
+          showCondition: (status) => status !== CODE_STATUS.OUT_STOCK
+        },
+        // 来源仓库：仅状态0/1且有fromWarehouseId时显示
+        {
+          label: '来源仓库',
+          key: 'fromWarehouseName',
+          showCondition: (status, result) => status !== CODE_STATUS.OUT_STOCK && result.fromWarehouseId
+        },
+        // 物品名称：所有状态显示
+        {
+          label: '物品名称',
+          key: 'itemName',
+          showCondition: () => true
+        },
+        // 物品编码：所有状态显示
+        {
+          label: '物品编码',
+          key: 'itemCode',
+          showCondition: () => true
+        },
+        // 批次号：所有状态显示
+        {
+          label: '批次号',
+          key: 'batchNo',
+          showCondition: () => true
+        },
+        // 库存单ID：仅状态0/1显示
+        {
+          label: '库存单ID',
+          key: 'stockIoId', // 状态1时也用stockIoId，无需额外判断
+          showCondition: (status) => status !== CODE_STATUS.OUT_STOCK
+        }
+
+        // 新增字段：直接在这里加配置，模板无需修改
+        // 示例：
+        // {
+        //   label: '有效期',
+        //   key: 'expireDate',
+        //   showCondition: () => true
+        // }
+      ];
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 原有样式不变，仅保留隔离的scoped样式 */
+.result-card { width: 680rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.05); overflow: hidden; }
+.result-header { padding: 30rpx; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
+.result-title { font-size: 34rpx; color: #333; font-weight: bold; }
+.result-time { font-size: 24rpx; color: #999; }
+.result-body { padding: 30rpx; }
+.info-item { display: flex; padding: 15rpx 0; border-bottom: 1px dashed #f0f0f0; align-items: flex-start; }
+.info-item:last-child { border-bottom: none; }
+.info-label { font-size: 28rpx; color: #666; width: 200rpx; font-weight: 500; flex-shrink: 0; }
+.info-value { font-size: 28rpx; color: #333; flex: 1; word-break: break-all; }
+</style>