| | |
| | | <script lang="ts" setup> |
| | | import type { MdmItemBatchConfigApi } from '#/api/mes/md/item-batch-config'; |
| | | import type { MdmItemApi } from '#/api/mdm/item'; |
| | | |
| | | import { computed, ref, watch } from 'vue'; |
| | | import { computed } from 'vue'; |
| | | |
| | | import { Divider, Tag } from 'ant-design-vue'; |
| | | |
| | | import { getItemBatchConfigByItemId } from '#/api/mes/md/item-batch-config'; |
| | | |
| | | const props = defineProps<{ |
| | | itemId?: number; |
| | | isBatchManaged?: boolean; |
| | | item?: MdmItemApi.Item | null; |
| | | }>(); |
| | | |
| | | // 批次配置数据 |
| | | const config = ref<MdmItemBatchConfigApi.ItemBatchConfig | null>(null); |
| | | |
| | | // 是否加载中 |
| | | const loading = ref(false); |
| | | |
| | | // 是否显示(启用批次管理时显示) |
| | | const visible = computed(() => props.isBatchManaged === true); |
| | | const visible = computed(() => props.item?.isBatchManaged === true); |
| | | |
| | | // 已启用的批次属性列表(仅保留7个字段) |
| | | // 已启用的批次属性列表 |
| | | const enabledProps = computed(() => { |
| | | if (!config.value) return []; |
| | | const props: { label: string; value: boolean }[] = []; |
| | | if (config.value.produceDateFlag) props.push({ label: '生产日期', value: true }); |
| | | if (config.value.expireDateFlag) props.push({ label: '有效期', value: true }); |
| | | if (config.value.receiptDateFlag) props.push({ label: '入库日期', value: true }); |
| | | if (config.value.vendorFlag) props.push({ label: '供应商', value: true }); |
| | | if (config.value.purchaseOrderCodeFlag) props.push({ label: '采购订单号', value: true }); |
| | | if (config.value.lotNumberFlag) props.push({ label: '生产批号', value: true }); |
| | | if (config.value.qualityStatusFlag) props.push({ label: '质量状态', value: true }); |
| | | return props; |
| | | }); |
| | | |
| | | /** 加载批次配置 */ |
| | | async function loadConfig() { |
| | | if (!props.itemId || !props.isBatchManaged) { |
| | | config.value = null; |
| | | return; |
| | | } |
| | | loading.value = true; |
| | | try { |
| | | const data = await getItemBatchConfigByItemId(props.itemId); |
| | | config.value = data; |
| | | } catch { |
| | | config.value = null; |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | | } |
| | | |
| | | /** 重置 */ |
| | | function reset() { |
| | | config.value = null; |
| | | loading.value = false; |
| | | } |
| | | |
| | | // 监听 itemId 变化,加载配置 |
| | | watch( |
| | | () => [props.itemId, props.isBatchManaged], |
| | | () => { |
| | | if (props.itemId && props.isBatchManaged) { |
| | | loadConfig(); |
| | | } else { |
| | | reset(); |
| | | } |
| | | }, |
| | | { immediate: true }, |
| | | ); |
| | | |
| | | defineExpose({ |
| | | loadConfig, |
| | | reset, |
| | | if (!props.item) return []; |
| | | const list: string[] = []; |
| | | if (props.item.produceDateFlag) list.push('生产日期'); |
| | | if (props.item.expireDateFlag) list.push('有效期'); |
| | | if (props.item.receiptDateFlag) list.push('入库日期'); |
| | | if (props.item.vendorFlag) list.push('供应商'); |
| | | if (props.item.purchaseOrderCodeFlag) list.push('采购订单号'); |
| | | if (props.item.lotNumberFlag) list.push('生产批号'); |
| | | if (props.item.qualityStatusFlag) list.push('质量状态'); |
| | | return list; |
| | | }); |
| | | </script> |
| | | |
| | | <template> |
| | | <div v-if="visible" class="mt-4 rounded border border-gray-200 bg-gray-50 p-4"> |
| | | <div v-if="visible" class="mx-4 mt-4 rounded border border-gray-200 bg-gray-50 p-4"> |
| | | <Divider orientation="left">批次属性</Divider> |
| | | <div v-if="loading" class="text-center text-gray-500">加载中...</div> |
| | | <div v-else-if="enabledProps.length === 0" class="text-center text-gray-500"> |
| | | <div v-if="enabledProps.length === 0" class="text-center text-gray-500"> |
| | | 该物料未配置批次属性 |
| | | </div> |
| | | <div v-else class="flex flex-wrap gap-2"> |
| | | <Tag v-for="prop in enabledProps" :key="prop.label" color="blue"> |
| | | {{ prop.label }} |
| | | <Tag v-for="prop in enabledProps" :key="prop" color="blue"> |
| | | {{ prop }} |
| | | </Tag> |
| | | </div> |
| | | <p class="mt-2 text-xs text-gray-500"> |