Blame view

src/pages/Order/components/OrderDrawer.tsx 15.3 KB
zhongnanhuang authored
1
import { RESPONSE_CODE } from '@/constants/enum';
2
3
4
import {
  postServiceOrderAddOrder,
  postServiceOrderQueryProductInformation,
zhongnanhuang authored
5
  postServiceOrderUpdateOrder,
6
} from '@/services';
zhongnanhuang authored
7
import { enumToSelect, getUserInfo } from '@/utils';
sanmu authored
8
9
10
11
import {
  DrawerForm,
  FormListActionType,
  ProCard,
12
  ProFormDateTimePicker,
13
  ProFormDigit,
sanmu authored
14
  ProFormList,
15
  ProFormSelect,
sanmu authored
16
  ProFormText,
17
  ProFormTextArea,
sanmu authored
18
} from '@ant-design/pro-components';
sanmu authored
19
import { Form, message } from 'antd';
zhongnanhuang authored
20
import { useEffect, useRef, useState } from 'react';
21
22
23
24
25
26
import {
  INVOCING_STATUS_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
} from '../constant';
sanmu authored
27
zhongnanhuang authored
28
29
30
31
export default ({ onClose, data, isAdd }) => {
  const [invoicingStatus, setInvoicingStatus] = useState('');

  if (!isAdd) {
32
33
34
35
    //订单修改和新增的子订单列表命名是list
    data.list = data.subOrderInformationLists;
    //主订单事业部默认显示子订单第一条的事业部
    data.productBelongBusiness = data.list[0].productBelongBusiness;
zhongnanhuang authored
36
37
38
39
40
    data.paymentMethod = data.list[0].paymentMethod;
    data.paymentChannel = data.list[0].paymentChannel;
    data.invoicingStatus = data.list[0].invoicingStatus;
  }
zhongnanhuang authored
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  const [form] = Form.useForm<{
    salesCode: '';
    customerName: '';
    customerContactNumber: '';
    institution: '';
    institutionContactName: '';
    customerShippingAddress: '';
    totalPayment: '';
    paymentChannel: '';
    paymentMethod: '';
    productBelongBusiness: '';
    invoicingStatus: '';
    invoiceIdentificationNumber: '';
    invoicingTime: '';
    bank: '';
    bankAccountNumber: '';
57
    deleteSubOrderLists: [];
zhongnanhuang authored
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
    notes: '';
    list: [
      {
        productCode: '';
        productName: '';
        quantity: '';
        productPrice: '';
        parameters: '';
        subOrderPayment: '';
        unit: '';
        serialNumber: '';
        notes: '';
      },
    ];
  }>();
73
74
75
76
77
78
  const actionRef = useRef<
    FormListActionType<{
      name: string;
    }>
  >();
  //作为商品行号
sanmu authored
79
80
81
82
83
84
  const rowNumber = useRef(0);

  useEffect(() => {
    form.setFieldsValue({ ...data });
  }, [data]);
zhongnanhuang authored
85
86
87
88
89
90
91
92
  /**
   *
   * @param option 商品名称所对应的商品数据
   * @param currentRowData list中当前行的数据
   */
  function autoFillProductInfo(option: any, currentRowData: any) {
    let copyList = form.getFieldValue('list');
    let currentData = copyList[currentRowData.field.key];
93
94
95
    currentData.productCode = option?.productCode;
    currentData.parameters = option?.specifications;
    currentData.unit = option?.unit;
zhongnanhuang authored
96
    form.setFieldValue('list', copyList);
97
98
  }
sanmu authored
99
100
101
102
103
104
  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      open
105
      width="35%"
zhongnanhuang authored
106
107
108
109
110
      title={isAdd ? '新建订单' : '修改订单'}
      initialValues={() => {
        if (!isAdd) {
          return data;
        }
111
      }}
sanmu authored
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      // layout="horizontal"
      // labelCol={{ span: 8 }}
      form={form}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
128
        let res = {};
zhongnanhuang authored
129
        if (isAdd) {
130
          res = await postServiceOrderAddOrder({ data: values });
zhongnanhuang authored
131
        } else {
132
133
134
135
136
137
138
139
140
141
142
143
          //计算已删除的子订单id
          const originIds = data.subOrderInformationLists.map((item) => {
            return item.id;
          });
          console.log('originIds:' + originIds);
          const curIds = form.getFieldValue('list')?.map((item) => {
            return item.id;
          });
          console.log('curIds:' + curIds);
          const diff = originIds.filter((item) => !curIds.includes(item));
          values.deleteSubOrderLists = diff;
          res = await postServiceOrderUpdateOrder({ data: values });
zhongnanhuang authored
144
145
        }
146
147
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
zhongnanhuang authored
148
149
150
          // 不返回不会关闭弹框
          onClose();
          return true;
zhongnanhuang authored
151
        }
sanmu authored
152
153
      }}
      onOpenChange={(val) => {
sanmu authored
154
        return !val && onClose();
sanmu authored
155
156
157
158
      }}
    >
      <h2>订单基本信息</h2>
      <ProFormText
zhongnanhuang authored
159
160
161
162
163
164
165
166
        name="id"
        width="lg"
        disabled
        label="id"
        placeholder="id"
        hidden
      />
      <ProFormText
167
        name="salesCode"
168
169
170
171
        width="lg"
        disabled
        label="销售代表"
        placeholder="请输入销售代表"
zhongnanhuang authored
172
        initialValue={getUserInfo().nickName}
173
174
175
176
177
178
      />
      <ProFormText
        name="customerName"
        width="lg"
        label="收货人"
        placeholder="请输入收货人"
179
        rules={[{ required: true, message: '收货人必填' }]}
180
181
182
183
      />
      <ProFormText
        width="lg"
        name="customerContactNumber"
184
185
        label="联系方式"
        placeholder="请输入联系方式"
186
        rules={[{ required: true, message: '联系方式必填' }]}
187
188
189
      />
      <ProFormText
        width="lg"
190
191
192
        name="institution"
        label="单位"
        placeholder="请输入单位"
193
        rules={[{ required: true, message: '单位必填' }]}
sanmu authored
194
      />
195
196
197
198
199
      <ProFormText
        width="lg"
        name="institutionContactName"
        label="单位联系人"
        placeholder="请输入单位联系人"
200
        rules={[{ required: true, message: '单位联系人必填' }]}
201
      />
202
203
204
205
206
      <ProFormTextArea
        width="lg"
        name="customerShippingAddress"
        label="收货地址"
        placeholder="请输入收货地址"
207
208
209
210
211
212
213
        rules={[{ required: true, message: '收货地址必填' }]}
      />
      <ProFormText
        name="totalPayment"
        width="lg"
        label="支付总额(¥)"
        rules={[{ required: true, message: '支付总额必填' }]}
214
215
216
217
218
219
220
      />
      <ProFormSelect
        placeholder="请输入支付渠道"
        name="paymentChannel"
        width="lg"
        label="支付渠道"
        options={enumToSelect(PAYMENT_CHANNEL_OPTIONS)}
221
        rules={[{ required: true, message: '支付渠道必填' }]}
222
223
224
225
226
227
228
      />
      <ProFormSelect
        placeholder="请输入支付方式"
        name="paymentMethod"
        width="lg"
        label="支付方式"
        options={enumToSelect(PAYMENT_METHOD_OPTIONS)}
229
        rules={[{ required: true, message: '支付方式必填' }]}
230
231
232
233
234
235
236
      />
      <ProFormSelect
        placeholder="请输入所属事业部"
        name="productBelongBusiness"
        width="lg"
        label="所属事业部"
        options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
237
        rules={[{ required: true, message: '所属事业部必填' }]}
238
239
      />
      <ProFormSelect
zhongnanhuang authored
240
        placeholder="选择是否需要开票"
241
242
        name="invoicingStatus"
        width="lg"
zhongnanhuang authored
243
        label="是否需要开票"
244
        options={enumToSelect(INVOCING_STATUS_OPTIONS)}
zhongnanhuang authored
245
246
247
        onChange={(_, option) => {
          setInvoicingStatus(option.value);
        }}
248
        rules={[{ required: true, message: '是否需要开票必填' }]}
249
      />
250
251
      <ProFormText
        width="lg"
252
253
        name="invoiceIdentificationNumber"
        label="开票信息"
zhongnanhuang authored
254
        hidden={invoicingStatus !== 'INVOICED'}
255
        placeholder="请输入开票信息"
256
257
258
259
260
261
        rules={[
          {
            required: invoicingStatus === 'INVOICED' ? true : false,
            message: '开票信息必填',
          },
        ]}
262
      />
zhongnanhuang authored
263
264
265
266
      {getUserInfo().roleSmallVO?.code === 'admin' ? (
        <ProFormDateTimePicker
          width="lg"
          name="invoicingTime"
267
          hidden={invoicingStatus === 'INVOICED'}
zhongnanhuang authored
268
269
270
271
272
273
          label="开票时间"
          placeholder="请输入开票时间"
        />
      ) : (
        ''
      )}
274
275
276
277
      <ProFormText
        width="lg"
        name="bank"
        label="开户银行"
zhongnanhuang authored
278
        hidden={invoicingStatus !== 'INVOICED'}
279
280
281
282
283
        placeholder="请输入开户银行"
      />
      <ProFormText
        width="lg"
        name="bankAccountNumber"
zhongnanhuang authored
284
        hidden={invoicingStatus !== 'INVOICED'}
285
286
287
288
289
290
291
292
        label="银行账号"
        placeholder="请输入银行账号"
      />
      <ProFormText
        width="lg"
        name="notes"
        label="备注"
        placeholder="请输入备注"
293
294
      />
295
      {/* <h2>商品基本信息</h2>
296
      <ProFormText width="lg" name="totalPayment" label="支付总金额" />
297
298
299
300
      <ProFormSelect
        disabled
        placeholder="请输入物流方式"
        name="logisticsMethod"
301
302
        width="lg"
        label="物流方式"
303
304
305
306
307
        request={async () => {
          // 发送请求获取选项数据
          const { data } = await getServiceOrderProvideLogisticsStatus();
          return enumToSelect(data);
        }}
308
309
310
311
312
313
314
      />
      <ProFormText
        width="lg"
        name="paymentStatus"
        label="支付状态"
        placeholder="请输入支付状态"
      />
315
316
317

      <ProFormSelect
        placeholder="请输入支付方式"
318
        name="paymentMethod"
319
        width="lg"
320
        label="支付方式"
321
322
323
324
325
        request={async () => {
          // 发送请求获取选项数据
          const { data } = await getServiceOrderProvidePaymentMethod();
          return enumToSelect(data);
        }}
326
      />
327
328
      <ProFormSelect
        placeholder="请输入支付渠道"
329
        name="paymentChannel"
330
        width="lg"
331
        label="支付渠道"
332
333
334
335
336
        request={async () => {
          // 发送请求获取选项数据
          const { data } = await getServiceOrderProvidePaymentChannel();
          return enumToSelect(data);
        }}
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
      />
      <ProFormText
        width="lg"
        name="paymentTransactionId"
        label="支付流水号"
        placeholder="请输入支付流水号"
      />
      <ProFormText
        width="lg"
        name="invoiceInformation"
        label="发票信息"
        placeholder="请输入发票信息"
      />
      <ProFormText
        width="lg"
        name="invoicingStatus"
        label="开票状态"
        placeholder="请输入开票状态"
      />
      <ProFormText
        width="lg"
        name="productBelongDepartment"
        label="商品所属部门"
        placeholder="请输入商品所属部门"
      />
      <ProFormText
        width="lg"
        name="waybillNumber"
        label="运单号"
        placeholder="请输入运单号"
      />
      <ProFormText
        width="lg"
        name="notes"
        label="备注"
        placeholder="请输入备注"
      />
      <ProFormText
        width="lg"
        name="examineNotes"
        label="审核备注"
        placeholder="请输入审核备注"
      />
      <ProFormText
        width="lg"
        name="orderStatus"
        label="订单状态"
        placeholder="请输入订单状态"
385
      /> */}
386
387
388

      <h2>商品信息</h2>
      <ProFormList
389
        name="list"
390
        label=""
sanmu authored
391
392
393
394
395
396
397
398
399
400
        initialValue={[
          {
            productCode: '',
            productName: '',
            quantity: '',
            productPrice: '',
            parameters: '',
            subOrderPayment: '',
          },
        ]}
401
        actionGuard={{
zhongnanhuang authored
402
          beforeAddRow: async () => {
403
            return new Promise((resolve) => {
sanmu authored
404
              rowNumber.current = 1;
405
406
407
408
409
410
              setTimeout(() => resolve(true), 1000);
            });
          },
          beforeRemoveRow: async (index) => {
            return new Promise((resolve) => {
              if (index === 0) {
zhongnanhuang authored
411
                message.error('第一行数据不能删除');
412
413
414
                resolve(false);
                return;
              }
sanmu authored
415
              rowNumber.current = 1;
416
417
418
              setTimeout(() => {
                resolve(true);
              }, 1000);
419
420
421
            });
          },
        }}
zhongnanhuang authored
422
        itemRender={(doms, listMeta) => {
423
          // const list = actionRef.current?.getList();
sanmu authored
424
          return (
425
426
            <ProCard
              bordered
zhongnanhuang authored
427
              extra={doms.action}
sanmu authored
428
              title={'商品' + rowNumber.current++}
429
430
431
432
              style={{
                marginBlockEnd: 8,
              }}
            >
zhongnanhuang authored
433
434
435
436
437
438
439
440
              {[
                <ProFormSelect
                  key={listMeta.field.key}
                  label="商品名称"
                  width="lg"
                  showSearch
                  name="productName"
                  placeholder="请搜索商品"
441
                  rules={[{ required: true, message: '商品名称必填' }]}
zhongnanhuang authored
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
                  onChange={(_, option) => {
                    autoFillProductInfo(option, listMeta);
                  }}
                  request={async (value) => {
                    const { data } =
                      await postServiceOrderQueryProductInformation({
                        data: { productName: value.keyWords },
                      });
                    return data.map((p: any) => {
                      return { ...p, label: p.productName, value: p.id };
                    });
                  }}
                />,
                doms.listDom,
              ]}
457
            </ProCard>
sanmu authored
458
459
          );
        }}
460
461
        actionRef={actionRef}
      >
zhongnanhuang authored
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
        <ProFormText
          width="lg"
          name="productCode"
          disabled
          label="商品编码"
          placeholder="未输入商品名称"
        />
        <ProFormText
          width="lg"
          disabled
          name="parameters"
          label="商品参数"
          placeholder="请输入商品参数"
        />
        <ProFormText
          width="lg"
          name="quantity"
          label="商品数量"
          placeholder="请输入商品数量"
481
          rules={[{ required: true, message: '商品数量必填' }]}
zhongnanhuang authored
482
483
484
485
486
487
        />
        <ProFormDigit
          width="lg"
          name="productPrice"
          label="商品单价"
          placeholder="请输入商品单价"
488
          rules={[{ required: true, message: '商品单价必填' }]}
zhongnanhuang authored
489
490
491
492
493
        />
        <ProFormText
          width="lg"
          name="unit"
          disabled
494
495
496
          label="商品单位"
          placeholder="请输入商品单位"
          rules={[{ required: true, message: '商品单位必填' }]}
zhongnanhuang authored
497
        />
498
zhongnanhuang authored
499
500
501
502
503
        <ProFormDigit
          width="lg"
          name="subOrderPayment"
          label="子订单金额"
          placeholder="请输入子订单金额"
504
          rules={[{ required: true, message: '子订单金额必填' }]}
zhongnanhuang authored
505
506
507
508
509
510
511
512
513
514
515
516
517
        />
        <ProFormText
          width="lg"
          name="serialNumber"
          label="物流单号"
          placeholder="请输入物流单号"
        />
        <ProFormText
          width="lg"
          name="notes"
          label="备注"
          placeholder="请输入备注"
        />
sanmu authored
518
519
      </ProFormList>
sanmu authored
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
      {/* <ProFormDateRangePicker name="contractTime" label="合同生效时间" /> */}
      {/* <ProForm.Group>
        <ProFormSelect
          options={[
            {
              value: 'chapter',
              label: '盖章后生效',
            },
          ]}
          width="xs"
          name="useMode"
          label="合同约定生效方式"
        />
        <ProFormSelect
          width="xs"
          options={[
            {
              value: 'time',
              label: '履行完终止',
            },
          ]}
          formItemProps={{
            style: {
              margin: 0,
            },
          }}
          name="unusedMode"
          label="合同约定失效效方式"
        />
      </ProForm.Group>
   */}
    </DrawerForm>
  );
};