1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <script lang="ts" setup>
| import type { MesWmMaterialStockApi } from '#/api/mes/wm/materialstock';
|
| import { ref } from 'vue';
|
| import { useVbenModal } from '@vben/common-ui';
| import { useVbenVxeGrid } from '#/adapter/vxe-table';
| import { getMaterialStockBagDetails } from '#/api/mes/wm/materialstock';
|
| const stockId = ref(0);
| const [Grid, gridApi] = useVbenVxeGrid({
| gridOptions: {
| columns: [
| { field: 'bagCode', title: '袋码', minWidth: 180 },
| { field: 'batchCode', title: '批次号', minWidth: 150 },
| {
| field: 'stockState',
| title: '库存状态',
| width: 110,
| cellRender: {
| name: 'CellTag',
| props: {
| options: [
| { label: '暂存库', value: 10, color: 'orange' },
| { label: '合格库', value: 20, color: 'green' },
| { label: '已出库', value: 30, color: 'default' },
| ],
| },
| },
| },
| { field: 'quantity', title: '数量', width: 80 },
| { field: 'inboundTime', title: '入库时间', width: 180 },
| ],
| proxyConfig: {
| ajax: {
| query: async ({ page }) => getMaterialStockBagDetails({
| materialStockId: stockId.value,
| pageNo: page.currentPage,
| pageSize: page.pageSize,
| }),
| },
| },
| rowConfig: { keyField: 'id' },
| },
| });
|
| const [Modal, modalApi] = useVbenModal({
| onOpenChange(isOpen) {
| if (!isOpen) return;
| const data = modalApi.getData<{ materialStockId?: number }>();
| stockId.value = data?.materialStockId ?? 0;
| gridApi.query();
| },
| });
|
| defineExpose({ open: (materialStockId: number) => modalApi.setData({ materialStockId }).open() });
| </script>
|
| <template>
| <Modal title="库存袋码明细" class="w-[900px]">
| <Grid />
| </Modal>
| </template>
|
|
