<script lang="ts" setup>
|
import type { MdmItemBatchConfigApi } from '#/api/mes/md/item-batch-config';
|
|
import { computed, ref, watch } 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;
|
}>();
|
|
// 批次配置数据
|
const config = ref<MdmItemBatchConfigApi.ItemBatchConfig | null>(null);
|
|
// 是否加载中
|
const loading = ref(false);
|
|
// 是否显示（启用批次管理时显示）
|
const visible = computed(() => props.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,
|
});
|
</script>
|
|
<template>
|
<div v-if="visible" class="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>
|
<div v-else class="flex flex-wrap gap-2">
|
<Tag v-for="prop in enabledProps" :key="prop.label" color="blue">
|
{{ prop.label }}
|
</Tag>
|
</div>
|
<p class="mt-2 text-xs text-gray-500">
|
以上字段创建批次时必填
|
</p>
|
</div>
|
</template>
|
