<script lang="ts" setup>
|
import type { MdmItemApi } from '#/api/mdm/item';
|
import type { MesWmBatchApi } from '#/api/mes/wm/batch';
|
import type { DescriptionItemSchema } from '#/components/description';
|
|
import { ref } from 'vue';
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
import { getItem } from '#/api/mdm/item';
|
import { getBatch } from '#/api/mes/wm/batch';
|
import { useDescription } from '#/components/description';
|
|
import { useDetailSchema } from '../data';
|
|
const detailData = ref<MesWmBatchApi.Batch>();
|
const itemData = ref<MdmItemApi.Item>();
|
|
/** 根据物料批次属性配置过滤详情字段 */
|
function filterSchemaByItemFlags(
|
schema: DescriptionItemSchema[],
|
item: MdmItemApi.Item | undefined,
|
): DescriptionItemSchema[] {
|
// 基础数据字段始终显示
|
const basicFields = new Set([
|
'code',
|
'itemCode',
|
'itemName',
|
'itemSpecification',
|
'unitName',
|
]);
|
|
// 批次属性字段与 flag 的映射
|
const flagFieldMap: Record<string, keyof MdmItemApi.Item> = {
|
produceDate: 'produceDateFlag',
|
expireDate: 'expireDateFlag',
|
receiptDate: 'receiptDateFlag',
|
vendorName: 'vendorFlag',
|
purchaseOrderCode: 'purchaseOrderCodeFlag',
|
lotNumber: 'lotNumberFlag',
|
qualityStatus: 'qualityStatusFlag',
|
};
|
|
return schema.filter((s) => {
|
if (basicFields.has(s.field!)) return true;
|
const flagField = flagFieldMap[s.field!];
|
if (flagField) {
|
return item?.[flagField] === true;
|
}
|
// 非基础、非批次属性字段不展示
|
return false;
|
});
|
}
|
|
const [Descriptions, descApi] = useDescription({
|
bordered: true,
|
column: 3,
|
schema: useDetailSchema(),
|
useCard: false,
|
});
|
|
const [Modal, modalApi] = useVbenModal({
|
showCancelButton: false,
|
showConfirmButton: false,
|
async onOpenChange(isOpen) {
|
if (!isOpen) {
|
detailData.value = undefined;
|
itemData.value = undefined;
|
return;
|
}
|
const data = modalApi.getData<{ id?: number }>();
|
if (!data?.id) {
|
return;
|
}
|
modalApi.lock();
|
try {
|
detailData.value = await getBatch(data.id);
|
// 获取物料详情以读取批次属性配置
|
if (detailData.value?.itemId) {
|
itemData.value = await getItem(detailData.value.itemId);
|
const filtered = filterSchemaByItemFlags(
|
useDetailSchema(),
|
itemData.value,
|
);
|
descApi.setDescProps({ schema: filtered });
|
}
|
} finally {
|
modalApi.unlock();
|
}
|
},
|
});
|
|
defineExpose({
|
open: (id: number) => modalApi.setData({ id }).open(),
|
});
|
</script>
|
|
<template>
|
<Modal title="批次详情" class="w-3/5">
|
<Descriptions class="mx-4" :data="detailData" />
|
</Modal>
|
</template>
|
