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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
| <script lang="ts" setup>
| import type { VxeTableGridOptions } from '#/adapter/vxe-table';
| import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
|
| import { computed, nextTick, ref, watch } from 'vue';
|
| import { DICT_TYPE } from '@vben/constants';
| import { IconifyIcon } from '@vben/icons';
|
| import { Input, message, Modal } from 'ant-design-vue';
|
| import { useVbenVxeGrid } from '#/adapter/vxe-table';
| import {
| getPurchaseOrder,
| getPurchaseOrderPage,
| } from '#/api/erp/purchase/order';
|
| defineOptions({ name: 'ErpPurchaseInvoiceOrderSelect' });
|
| const props = withDefaults(
| defineProps<{
| disabled?: boolean;
| modelValue?: number;
| placeholder?: string;
| }>(),
| {
| disabled: false,
| modelValue: undefined,
| placeholder: '请选择采购订单',
| },
| );
| const emit = defineEmits<{
| change: [order: ErpPurchaseOrderApi.PurchaseOrder | undefined];
| 'update:modelValue': [value: number | undefined];
| }>();
|
| const open = ref(false); // 选择弹窗是否打开
| const order = ref<ErpPurchaseOrderApi.PurchaseOrder>(); // 当前选中采购订单
|
| const displayNo = computed(() => order.value?.no ?? '');
|
| /** 根据订单编号回显选择器 */
| async function resolveOrderById(id: number | undefined) {
| if (!id) {
| order.value = undefined;
| return;
| }
| if (order.value?.id === id) {
| return;
| }
| order.value = await getPurchaseOrder(id);
| }
|
| watch(
| () => props.modelValue,
| (value) => {
| resolveOrderById(value);
| },
| { immediate: true },
| );
|
| /** 表格配置 */
| const [Grid, gridApi] = useVbenVxeGrid({
| formOptions: {
| schema: [
| {
| fieldName: 'no',
| label: '订单单号',
| component: 'Input',
| componentProps: {
| placeholder: '请输入订单单号',
| allowClear: true,
| },
| },
| ],
| },
| gridOptions: {
| columns: [
| { type: 'radio', width: 50, fixed: 'left' },
| { field: 'no', title: '订单单号', width: 200, fixed: 'left' },
| { field: 'supplierName', title: '供应商', minWidth: 120 },
| {
| field: 'orderTime',
| title: '订单时间',
| width: 160,
| formatter: 'formatDate',
| },
| {
| field: 'totalPrice',
| title: '含税金额',
| formatter: 'formatAmount2',
| minWidth: 120,
| },
| {
| field: 'status',
| title: '状态',
| minWidth: 100,
| cellRender: {
| name: 'CellDict',
| props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
| },
| },
| ],
| height: 520,
| keepSource: true,
| proxyConfig: {
| ajax: {
| query: async ({ page }, formValues) => {
| return await getPurchaseOrderPage({
| pageNo: page.currentPage,
| pageSize: page.pageSize,
| status: 20, // 仅展示已审核通过的采购订单
| ...formValues,
| });
| },
| },
| },
| rowConfig: {
| keyField: 'id',
| isHover: true,
| },
| radioConfig: {
| trigger: 'row',
| highlight: true,
| },
| toolbarConfig: {
| refresh: true,
| search: true,
| },
| } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
| gridEvents: {
| radioChange: ({ row }: { row: ErpPurchaseOrderApi.PurchaseOrder }) => {
| order.value = row;
| },
| },
| });
|
| /** 打开选择弹窗 */
| async function handleOpen() {
| if (props.disabled) {
| return;
| }
| open.value = true;
| await nextTick();
| gridApi.query();
| }
|
| /** 确认选择采购订单 */
| function handleOk() {
| if (!order.value?.id) {
| message.warning('请选择采购订单');
| return;
| }
| emit('update:modelValue', order.value.id);
| emit('change', order.value);
| open.value = false;
| }
| </script>
|
| <template>
| <div>
| <Input
| readonly
| :disabled="disabled"
| :placeholder="placeholder"
| :value="displayNo"
| @click="handleOpen"
| >
| <template #suffix>
| <IconifyIcon
| class="size-4 cursor-pointer"
| icon="lucide:search"
| :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
| />
| </template>
| </Input>
| <Modal
| v-model:open="open"
| title="选择采购订单（仅已审核通过）"
| width="80%"
| @cancel.stop="open = false"
| @ok.stop="handleOk"
| >
| <Grid table-title="采购订单列表" />
| </Modal>
| </div>
| </template>
|
|
