<script lang="ts" setup>
|
import type { MesWmSnApi } from '#/api/mes/wm/sn';
|
|
import { computed, ref } from 'vue';
|
|
import { Button, Empty, Input, message, Modal } from 'ant-design-vue';
|
|
import { getSnDetail } from '#/api/mes/wm/sn';
|
import { useDescription } from '#/components/description';
|
|
import { useSnDetailSchema } from '../data';
|
import { formatWmLocation, getWmLocationMaps } from '../location-maps';
|
|
defineOptions({ name: 'WlsSnDetailModal' });
|
|
const open = ref(false);
|
const code = ref('');
|
const detail = ref<MesWmSnApi.SnDetail>();
|
const loading = ref(false);
|
const locationMaps = ref<Awaited<ReturnType<typeof getWmLocationMaps>>>();
|
|
const locationText = computed(() =>
|
detail.value
|
? formatWmLocation(
|
locationMaps.value ?? {
|
warehouseNameMap: {},
|
locationNameMap: {},
|
areaNameMap: {},
|
},
|
detail.value.warehouseId,
|
detail.value.locationId,
|
detail.value.areaId,
|
)
|
: '-',
|
);
|
|
const lastTransactionText = computed(() => {
|
const d = detail.value;
|
if (!d) {
|
return '-';
|
}
|
const direction = d.lastTransactionTypeName || '';
|
const quantity = d.lastTransactionQuantity ?? '';
|
const bizCode = d.lastTransactionBizCode || '-';
|
return [direction, quantity, bizCode].filter(Boolean).join(' ');
|
});
|
|
async function loadDetail(snCode: string) {
|
loading.value = true;
|
try {
|
detail.value = await getSnDetail(snCode);
|
if (!locationMaps.value) {
|
locationMaps.value = await getWmLocationMaps();
|
}
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
async function handleQuery() {
|
if (!code.value?.trim()) {
|
message.warning('请输入或扫码获取 SN 码');
|
return;
|
}
|
await loadDetail(code.value.trim());
|
}
|
|
function openModal(snCode?: string) {
|
open.value = true;
|
code.value = snCode ?? '';
|
detail.value = undefined;
|
if (snCode) {
|
void loadDetail(snCode);
|
}
|
}
|
|
defineExpose({ open: openModal });
|
|
const [Descriptions] = useDescription({
|
bordered: true,
|
column: 1,
|
schema: useSnDetailSchema(),
|
useCard: false,
|
labelStyle: { width: '80px', whiteSpace: 'nowrap' },
|
});
|
</script>
|
|
<template>
|
<Modal v-model:open="open" title="SN 码单件详情" width="720px">
|
<div class="flex gap-2">
|
<Input
|
v-model:value="code"
|
placeholder="输入或扫码 SN 码后查询"
|
@press-enter="handleQuery"
|
/>
|
<Button type="primary" :loading="loading" @click="handleQuery">
|
查询
|
</Button>
|
</div>
|
<div class="mt-4">
|
<Descriptions v-if="detail" :data="detail">
|
<template #location>
|
{{ locationText }}
|
</template>
|
<template #lastTransaction>
|
{{ lastTransactionText }}
|
</template>
|
</Descriptions>
|
<Empty
|
v-else
|
:description="loading ? '查询中...' : '暂无数据，请输入 SN 码查询'"
|
/>
|
</div>
|
<template #footer>
|
<Button @click="open = false">关闭</Button>
|
</template>
|
</Modal>
|
</template>
|
