<script lang="ts" setup>
|
import type { MdmItemBatchConfigApi } from '#/api/mes/md/item-batch-config';
|
|
import { computed, ref, watch } from 'vue';
|
|
import { Checkbox, Divider } from 'ant-design-vue';
|
|
import {
|
getItemBatchConfigByItemId,
|
saveItemBatchConfig,
|
} from '#/api/mes/md/item-batch-config';
|
|
const props = defineProps<{
|
itemId?: number;
|
isBatchManaged?: boolean;
|
}>();
|
|
const emit = defineEmits<{
|
change: [config: Partial<MdmItemBatchConfigApi.ItemBatchConfig>];
|
}>();
|
|
// 批次配置数据
|
const config = ref<Partial<MdmItemBatchConfigApi.ItemBatchConfig>>({
|
produceDateFlag: false,
|
expireDateFlag: false,
|
receiptDateFlag: false,
|
vendorFlag: false,
|
purchaseOrderCodeFlag: false,
|
lotNumberFlag: false,
|
qualityStatusFlag: false,
|
});
|
|
// 是否加载中
|
const loading = ref(false);
|
|
// 是否显示配置（启用批次管理时显示）
|
const visible = computed(() => props.isBatchManaged === true);
|
|
// 批次配置选项（仅保留7个字段）
|
const configOptions = [
|
{ key: 'produceDateFlag', label: '生产日期' },
|
{ key: 'expireDateFlag', label: '有效期' },
|
{ key: 'receiptDateFlag', label: '入库日期' },
|
{ key: 'vendorFlag', label: '供应商' },
|
{ key: 'purchaseOrderCodeFlag', label: '采购订单号' },
|
{ key: 'lotNumberFlag', label: '生产批号' },
|
{ key: 'qualityStatusFlag', label: '质量状态' },
|
] as const;
|
|
/** 加载批次配置 */
|
async function loadConfig() {
|
if (!props.itemId || !props.isBatchManaged) {
|
return;
|
}
|
loading.value = true;
|
try {
|
const data = await getItemBatchConfigByItemId(props.itemId);
|
if (data) {
|
config.value = { ...config.value, ...data };
|
}
|
} catch {
|
// 无配置时不报错
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
/** 保存批次配置 */
|
async function saveConfig(): Promise<number | undefined> {
|
if (!props.itemId || !props.isBatchManaged) {
|
return undefined;
|
}
|
const data: MdmItemBatchConfigApi.ItemBatchConfig = {
|
...config.value as MdmItemBatchConfigApi.ItemBatchConfig,
|
itemId: props.itemId,
|
};
|
const id = await saveItemBatchConfig(data);
|
config.value.id = id;
|
return id;
|
}
|
|
/** 获取当前配置 */
|
function getConfig(): Partial<MdmItemBatchConfigApi.ItemBatchConfig> {
|
return { ...config.value };
|
}
|
|
/** 重置配置 */
|
function resetConfig() {
|
config.value = {
|
produceDateFlag: false,
|
expireDateFlag: false,
|
receiptDateFlag: false,
|
vendorFlag: false,
|
purchaseOrderCodeFlag: false,
|
lotNumberFlag: false,
|
qualityStatusFlag: false,
|
};
|
}
|
|
// 监听 itemId 变化，加载配置
|
watch(
|
() => [props.itemId, props.isBatchManaged],
|
() => {
|
if (props.itemId && props.isBatchManaged) {
|
loadConfig();
|
} else {
|
resetConfig();
|
}
|
},
|
{ immediate: true },
|
);
|
|
// 监听配置变化，触发 change 事件
|
watch(
|
config,
|
() => {
|
emit('change', getConfig());
|
},
|
{ deep: true },
|
);
|
|
defineExpose({
|
saveConfig,
|
getConfig,
|
loadConfig,
|
resetConfig,
|
});
|
</script>
|
|
<template>
|
<div v-if="visible" class="mt-4">
|
<Divider orientation="left">批次属性配置</Divider>
|
<div class="grid grid-cols-4 gap-4 px-4">
|
<Checkbox
|
v-for="option in configOptions"
|
:key="option.key"
|
v-model:checked="config[option.key]"
|
:disabled="loading"
|
>
|
{{ option.label }}
|
</Checkbox>
|
</div>
|
<p class="mt-2 px-4 text-xs text-gray-500">
|
勾选表示创建批次时该字段必填
|
</p>
|
</div>
|
</template>
|
