gaoluyang
7 天以前 b176162c23294d8d1bfb9f09cf6bb759efb0124a
src/views/wls/materialstock/components/batch-config-display.vue
@@ -1,92 +1,41 @@
<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">