gaoluyang
2 天以前 b64a0deae5b5d33f9e20671a68936b27f0b9b00b
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<script lang="ts" setup>
import type { MesWmArrivalNoticeApi } from '#/api/mes/wm/arrivalnotice';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
import { Page, useVbenModal } from '@vben/common-ui';
import { MesWmArrivalNoticeStatusEnum } from '@vben/constants';
 
import { message } from 'ant-design-vue';
 
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getArrivalNoticePage } from '#/api/mes/wm/arrivalnotice';
 
const emit = defineEmits<{
  selected: [arrivalNoticeId: number];
}>();
 
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: [
      {
        fieldName: 'code',
        label: '通知单号',
        component: 'Input',
        componentProps: {
          allowClear: true,
          placeholder: '请输入通知单号',
        },
      },
      {
        fieldName: 'vendorName',
        label: '供应商',
        component: 'Input',
        componentProps: {
          allowClear: true,
          placeholder: '请输入供应商名称',
        },
      },
    ],
  },
  gridOptions: {
    columns: [
      {
        type: 'radio',
        width: 60,
      },
      {
        field: 'code',
        title: '通知单号',
        minWidth: 160,
      },
      {
        field: 'name',
        title: '通知单名称',
        minWidth: 150,
      },
      {
        field: 'vendorName',
        title: '供应商名称',
        minWidth: 120,
      },
      {
        field: 'purchaseOrderNo',
        title: '采购订单号',
        minWidth: 140,
      },
      {
        field: 'arrivalDate',
        title: '到货日期',
        width: 180,
        formatter: 'formatDate',
      },
      {
        field: 'status',
        title: '状态',
        width: 100,
        cellRender: {
          name: 'CellDict',
          props: { type: 'mes_wm_arrival_notice_status' },
        },
      },
    ],
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getArrivalNoticePage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            status: MesWmArrivalNoticeStatusEnum.PENDING_RECEIPT,
            ...formValues,
          });
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>,
});
 
const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const selectedRows = gridApi.grid.getRadioRecord();
    if (!selectedRows) {
      message.warning('请选择到货通知单');
      return;
    }
    emit('selected', selectedRows.id);
    await modalApi.close();
  },
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      await gridApi.query();
    }
  },
});
</script>
 
<template>
  <Modal title="选择到货通知单" class="w-2/3">
    <Grid table-title="到货通知单列表" />
  </Modal>
</template>