135 lines
4.4 KiB
Vue
135 lines
4.4 KiB
Vue
<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> |