Blame view

src/pages/Order/components/CheckModal.tsx 19.7 KB
zhongnanhuang authored
1
import { RESPONSE_CODE } from '@/constants/enum';
zhongnanhuang authored
2
import {
zhongnanhuang authored
3
  postPrepaidAudit,
zhongnanhuang authored
4
  postServiceOrderAfterSalesCheck,
zhongnanhuang authored
5
  postServiceOrderAudit,
6
  postServiceOrderFileProcess,
zhongnanhuang authored
7
  postServiceOrderFinanceCheckOrder,
8
  postServiceOrderLeaderAudit,
zhongnanhuang authored
9
  postServiceOrderToProcureAudit,
zhongnanhuang authored
10
} from '@/services';
sanmu authored
11
import { ModalForm, ProFormTextArea } from '@ant-design/pro-components';
12
13
14
15
16
17
18
19
20
21
22
import {
  Button,
  Col,
  Divider,
  Form,
  Image,
  Modal,
  Row,
  UploadFile,
  message,
} from 'antd';
23
import Upload, { RcFile, UploadProps } from 'antd/es/upload';
zhongnanhuang authored
24
import { useEffect, useRef, useState } from 'react';
zhongnanhuang authored
25
26
27
28
29
import {
  AFTE_SALES_PLAN_OPTIONS,
  CHECK_TYPE,
  COMFIR_RECEIPT_IMAGES_NUMBER,
} from '../constant';
30
// import { cloneDeep } from 'lodash';
zhongnanhuang authored
31
import { enumValueToLabel, transImageFile } from '@/utils';
32
import { PlusOutlined } from '@ant-design/icons';
zhongnanhuang authored
33
import { cloneDeep } from 'lodash';
34
zhongnanhuang authored
35
36
37
38
39
export default ({
  setCheckVisible,
  data,
  subOrders,
  orderCheckType,
zhongnanhuang authored
40
  openOrderDrawer,
zhongnanhuang authored
41
42
  onClose,
}) => {
43
  const [previewOpen, setPreviewOpen] = useState(false);
44
  const [aPopoverTitle, setAPopoverTitle] = useState('审核');
45
46
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');
zhongnanhuang authored
47
  const [paymentReceiptsImages, setPymentReceiptsImages] = useState<any[]>([]);
48
49
50
51
52
53
54
55
56
57
  const fileListObj = useRef<UploadFile[]>([]); //使用引用类型,使得在useEffect里面设置监听事件后,不用更新监听事件也能保持obj与外界一致
  const getBase64 = (file: RcFile): Promise<string> =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result as string);
      reader.onerror = (error) => reject(error);
    });
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const handleCancel = () => setPreviewOpen(false);
58
  const [messageApi, contextHolder] = message.useMessage();
zhongnanhuang authored
59
  const [form] = Form.useForm<{ name: string; company: string }>();
zhongnanhuang authored
60
  let subOrderIds: any[] = subOrders?.map((subOrder) => subOrder.id);
zhongnanhuang authored
61
  const [mainOrderId] = useState(data.id);
zhongnanhuang authored
62
zhongnanhuang authored
63
  const [afterSalesInfo, setAfterSalesInfo] = useState<any>();
zhongnanhuang authored
64
  const [prepaidProofImages, setPrepaidProofImages] = useState<any[]>([]);
zhongnanhuang authored
65
zhongnanhuang authored
66
67
68
69
70
71
72
73
74
75
  /**
   * 审核类型
   */
  function checkType(check: string) {
    if (orderCheckType === check) {
      return true;
    }
    return false;
  }
zhongnanhuang authored
76
  const getOrderAfterSalesInfo = async () => {
77
78
79
    // let res = await postServiceOrderQueryAfterSalesInfoSnapshot({
    //   data: { subOrderIds: subOrderIds },
    // });
zhongnanhuang authored
80
zhongnanhuang authored
81
    //附件
zhongnanhuang authored
82
83
    let annex = subOrders[0].afterSalesAnnexList;
    let index = 1;
zhongnanhuang authored
84
85
    let annexLinks = annex?.map((f) => {
      return (
86
        <Button className="p-0 pr-1" type="link" key="key" href={f}>
zhongnanhuang authored
87
          {'附件' + index++}
zhongnanhuang authored
88
89
90
        </Button>
      );
    });
zhongnanhuang authored
91
92
93
    console.log(annexLinks);
zhongnanhuang authored
94
95
96
97
98
99
100
101
    setAfterSalesInfo(
      <div className="my-5">
        <Row gutter={[16, 24]}>
          <Col span={6}>
            <span className="text-[#333333]">售后方案</span>
          </Col>
          <Col span={18}>
            {enumValueToLabel(
102
              subOrders[0]?.afterSalesPlan,
zhongnanhuang authored
103
104
105
106
107
108
              AFTE_SALES_PLAN_OPTIONS,
            )}
          </Col>
          <Col span={6}>
            <span className="className='text-[#333333]'">售后原因</span>
          </Col>
109
          <Col span={18}>{subOrders[0]?.afterSalesNotes}</Col>
zhongnanhuang authored
110
111
112
113
114
115
116
117
          <Col span={6}>
            <span className="className='text-[#333333]'">附件</span>
          </Col>
          <Col span={18}>{annexLinks}</Col>
        </Row>
      </div>,
    );
  };
zhongnanhuang authored
118
zhongnanhuang authored
119
  useEffect(() => {
120
121
122
    if (checkType(CHECK_TYPE.CONFIRM_DELIVER)) {
      setAPopoverTitle('确认发货');
    }
zhongnanhuang authored
123
    getOrderAfterSalesInfo();
zhongnanhuang authored
124
125
126
127
128
129

    let paymentReceiptsImagesList: any[] = [];
    subOrders?.forEach((item: any) => {
      if (item.paymentReceiptAnnexList) {
        paymentReceiptsImagesList.push(...item.paymentReceiptAnnexList);
      }
130
    });
zhongnanhuang authored
131
132
133
    //去重
    paymentReceiptsImagesList = [...new Set(paymentReceiptsImagesList)];
    setPymentReceiptsImages(paymentReceiptsImagesList);
zhongnanhuang authored
134
135
136
137
138
139
140
141
142
143

    //预存审核的凭证
    let proofImages: any[] = [];
    subOrders?.forEach((item) => {
      let images = item.proofImages;
      if (images !== null && images !== undefined) {
        proofImages.push(...images);
      }
    });
    setPrepaidProofImages(proofImages);
zhongnanhuang authored
144
  }, []);
zhongnanhuang authored
145
146
147
148
149
150
151
152
  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
    //fileListObj得在change里变化,change的参数是已经处理过的file数组
    //beforeUpload中的参数file是未处理过,还需要Base64拿到文件数据处理
    fileListObj.current = newFileList;
    setFileList(newFileList);
  };
zhongnanhuang authored
153
154
155
156
157
158
159
160
  /** 粘贴快捷键的回调 */
  const onPaste = async (e: any) => {
    /** 获取剪切板的数据clipboardData */
    let clipboardData = e.clipboardData,
      i = 0,
      items,
      item,
      types;
161
zhongnanhuang authored
162
163
164
165
166
167
168
    /** 为空判断 */
    if (clipboardData) {
      items = clipboardData.items;
      if (!items) {
        message.info('您的剪贴板中没有照片');
        return;
      }
169
zhongnanhuang authored
170
171
172
173
174
175
176
177
178
      item = items[0];
      types = clipboardData.types || [];
      /** 遍历剪切板的数据 */
      for (; i < types.length; i++) {
        if (types[i] === 'Files') {
          item = items[i];
          break;
        }
      }
179
zhongnanhuang authored
180
181
182
183
184
185
186
187
188
189
190
191
192
      /** 判断文件是否为图片 */
      if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
        const imgItem = item.getAsFile();
        const newFileList = cloneDeep(fileListObj.current);
        let filteredArray = newFileList.filter(
          (obj) => obj.status !== 'removed',
        ); //过滤掉状态为已删除的照片
        const listItem = {
          ...imgItem,
          status: 'done',
          url: await getBase64(imgItem),
          originFileObj: imgItem,
        };
193
zhongnanhuang authored
194
195
196
197
198
199
200
201
202
203
        if (filteredArray.length >= COMFIR_RECEIPT_IMAGES_NUMBER) {
          message.info('发货照片数量不能超过3');
          return;
        }
        fileListObj.current = filteredArray;
        filteredArray.push(listItem);
        setFileList(filteredArray);
        return;
      }
    }
204
zhongnanhuang authored
205
206
207
    message.info('您的剪贴板中没有照片');
  };
  useEffect(() => {
zhongnanhuang authored
208
    //回显售后信息
zhongnanhuang authored
209
210
211
    // if (checkType(CHECK_TYPE.AFTER_SALES)) {
    //   getOrderAfterSalesInfo();
    // }
zhongnanhuang authored
212
zhongnanhuang authored
213
214
215
216
217
    document.addEventListener('paste', onPaste);
    return () => {
      document.removeEventListener('paste', onPaste);
    };
  }, []);
218
219
220
221
222
223
224
225
226
227
228
229
230
231
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传凭证</div>
    </div>
  );
  const handlePreview = async (file: UploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj as RcFile);
    }
    setPreviewImage(file.url || (file.preview as string));
    setPreviewOpen(true);
    setPreviewTitle(
      file.name ||
232
233
        file.originFileObj?.name ||
        file.url!.substring(file.url!.lastIndexOf('/') + 1),
234
235
236
237
238
    );
  };

  const handleBeforeUpload = (file: any) => {
    setFileList([...fileList, file]);
239
    return false;
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
  };

  const props: UploadProps = {
    onRemove: (file) => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: handleBeforeUpload,
    listType: 'picture-card',
    onPreview: handlePreview,
    fileList,
    onChange: handleChange,
    accept: 'image/png, image/jpeg, image/png',
255
    // action: '/api/service/order/fileProcess',
256
257
258
259
    name: 'files',
    headers: { Authorization: localStorage.getItem('token') },
  };
zhongnanhuang authored
260
  //仓库审核
261
  async function doCheck(body: object) {
zhongnanhuang authored
262
    const data = await postServiceOrderAudit({
263
264
      data: body,
    });
zhongnanhuang authored
265
266
    if (data.result === RESPONSE_CODE.SUCCESS) {
      message.success(data.message);
zhongnanhuang authored
267
      onClose();
268
269
    }
  }
zhongnanhuang authored
270
271
272
273
274

  /**
   *
   * @param body 财务审核
   */
275
  async function doFinancailCheck(values: any, isAgree: boolean) {
zhongnanhuang authored
276
277
278
279
    if (fileList.length <= 0) {
      message.error('凭证不能为空');
      return;
    }
280
281
282
283
284
285
286
287
288
    messageApi.open({
      type: 'loading',
      content: '正在上传图片...',
      duration: 0,
    });
    //附件处理
    let formData = new FormData();
    //附件处理
    for (let file of fileList) {
289
290
      if (file.originFileObj) {
        formData.append('files', file.originFileObj as RcFile);
291
      } else {
292
293
294
295
296
297
298
299
300
301
302
303
304
305
        //有url的话取url(源文件),没url取thumbUrl。有url的时候thumbUrl是略缩图
        if (file?.url === undefined || file?.url === null) {
          formData.append(
            'files',
            transImageFile(file?.thumbUrl),
            file?.originFileObj?.name,
          );
        } else {
          formData.append(
            'files',
            transImageFile(file?.url),
            file?.originFileObj?.name,
          );
        }
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
      }
    }
    let res = await postServiceOrderFileProcess({
      data: formData,
    });
    messageApi.destroy();
    if (res.result === RESPONSE_CODE.SUCCESS) {
      message.success('上传成功!');

      let fileUrls = res?.data?.map((item) => {
        return { url: item };
      });
      //财务审核
      const data = await postServiceOrderFinanceCheckOrder({
        data: {
          checkNotes: values.name,
          ids: subOrderIds,
          checkPassOrReject: isAgree,
          invoicingCheckAnnex: fileUrls,
        },
      });
      if (data.result === RESPONSE_CODE.SUCCESS) {
        message.success(data.message);
        onClose();
      }
    } else {
      message.success('上传失败');
    }
  }

  /**
   *
   * @param body 售后审核
   */
  async function doAfterSalesCheck(body: object) {
zhongnanhuang authored
341
    const data = await postServiceOrderAfterSalesCheck({
zhongnanhuang authored
342
343
344
345
346
347
348
349
      data: body,
    });
    if (data.result === RESPONSE_CODE.SUCCESS) {
      message.success(data.message);
      onClose();
    }
  }
350
351
352
353
354
355
356
357
358
359
360
361
362
363
  /**
   *
   * @param body 领导审核
   */
  async function doLeaderCheck(body: object) {
    const data = await postServiceOrderLeaderAudit({
      data: body,
    });
    if (data.result === RESPONSE_CODE.SUCCESS) {
      message.success(data.message);
      onClose();
    }
  }
zhongnanhuang authored
364
365
366
367
368
369
370
371
372
373
374
375
376
377
  /**
   * 预存审核
   * @param body
   */
  async function doPrepaidAudit(body: any) {
    const data = await postPrepaidAudit({
      data: body,
    });
    if (data.result === RESPONSE_CODE.SUCCESS) {
      message.success(data.message);
      onClose();
    }
  }
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
  function computeType() {
    let type: string = '';
    if (checkType(CHECK_TYPE.CONFIRM_DELIVER)) {
      type = 'confirm_deliver';
    }
    if (checkType(CHECK_TYPE.WEARHOUSE_KEEPER)) {
      type = 'warehouse_audit';
    }
    if (checkType(CHECK_TYPE.WAITING_FOR_POST_AUDIT)) {
      type = 'post_audit';
    }
    if (checkType(CHECK_TYPE.NODE_OPERATING_AUDIT)) {
      type = 'node_operating_audit';
    }
    if (checkType(CHECK_TYPE.MODIFY_LEADER_AUDIT)) {
      type = 'modify_leader_audit';
    }
    if (checkType(CHECK_TYPE.URGENT_INVOICE_AUDITING)) {
      type = 'urgent_invoice_audit';
    }
    if (checkType(CHECK_TYPE.PAYMENT_RECEIPTS_AUDIT)) {
      type = 'payment_receipt_audit';
    }
401
402
403
    if (checkType(CHECK_TYPE.CONFIRM_REISSUE)) {
      type = 'confirm_reissue';
    }
404
405
406
    if (checkType(CHECK_TYPE.CREDIT_AUDIT)) {
      type = 'credit_audit';
    }
407
408
409
    return type;
  }
sanmu authored
410
  return (
411
412
413
414
415
416
417
    <>
      <ModalForm<{
        name: string;
        company: string;
      }>
        width={500}
        open
418
        title={aPopoverTitle}
419
420
421
422
423
424
425
426
427
428
429
430
431
        form={form}
        autoFocusFirstInput
        modalProps={{
          okText: '通过',
          cancelText: '驳回',
          destroyOnClose: true,
          onCancel: () => {
            setCheckVisible(false);
          },
        }}
        submitter={{
          render: (props, defaultDoms) => {
            let myDoms = [];
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
            if (!checkType(CHECK_TYPE.CONFIRM_DELIVER)) {
              myDoms.push(
                <Button
                  key="驳回"
                  onClick={async () => {
                    if (checkType(CHECK_TYPE.AFTER_SALES)) {
                      doAfterSalesCheck({
                        applyType: 'after-sales',
                        isAfterSalesSuccess: false,
                        subOrderIds: subOrderIds,
                        mainId: mainOrderId,
                        afterSalesRejectionNotes: form.getFieldValue('name'),
                      });
                      return;
                    }
447
448
449
450
451
452
                    if (checkType(CHECK_TYPE.FINALCIAL)) {
                      let values = { name: form.getFieldValue('name') };
                      doFinancailCheck(values, false);
                      return;
                    }
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
                    if (checkType(CHECK_TYPE.LEADER_AUDIT)) {
                      doLeaderCheck({
                        pass: false,
                        subOrderIds: subOrderIds,
                        reason: form.getFieldValue('name'),
                      });
                      return;
                    }

                    if (checkType(CHECK_TYPE.MODIFY_APPLY_WAIT_FOR_AUDIT)) {
                      doAfterSalesCheck({
                        applyType: 'order-change-normal',
                        isAfterSalesSuccess: false,
                        subOrderIds: subOrderIds,
                        mainId: mainOrderId,
                        afterSalesRejectionNotes: form.getFieldValue('name'),
                      });
                      return;
                    }
473
zhongnanhuang authored
474
475
476
477
478
479
480
481
482
                    //预存审核,先暂时共用同一个审核弹窗
                    if (checkType(CHECK_TYPE.PREPAID_AUDIT)) {
                      return doPrepaidAudit({
                        pass: false,
                        ids: subOrderIds,
                        auditNotes: form.getFieldValue('name'),
                      });
                    }
483
484
485
486
487
                    let type = '';
                    type = computeType();
                    console.log('type:' + type);
                    doCheck({
                      pass: false,
488
                      subOrderIds: subOrderIds,
489
490
                      type: type,
                      notes: form.getFieldValue('name'),
491
                    });
492
493
494
495
496
497
                  }}
                >
                  驳回
                </Button>,
              );
            }
498
499
            //如果是仓库审核,那么显示这个外部采购
zhongnanhuang authored
500
            if (checkType(CHECK_TYPE.WEARHOUSE_KEEPER)) {
501
502
503
              myDoms.push(
                <Button
                  key="外部采购"
zhongnanhuang authored
504
505
506
507
508
                  onClick={async () => {
                    let res = await postServiceOrderToProcureAudit({
                      data: {
                        subOrderIds: subOrderIds,
                      },
509
                    });
zhongnanhuang authored
510
511
512
513
514

                    if (res && res.result === RESPONSE_CODE.SUCCESS) {
                      message.success(res.message);
                      onClose();
                    }
515
516
517
518
519
520
521
522
523
524
525
526
527
528
                  }}
                >
                  外部采购
                </Button>,
              );
            }

            //确认
            myDoms.push(defaultDoms[1]);
            return myDoms;
          },
        }}
        submitTimeout={2000}
        onFinish={async (values) => {
529
530
531
          if (checkType(CHECK_TYPE.AFTER_SALES)) {
            //审核通过
            return doAfterSalesCheck({
532
              applyType: 'after-sales',
zhongnanhuang authored
533
534
              isAfterSalesSuccess: true,
              subOrderIds: subOrderIds,
zhongnanhuang authored
535
              mainId: mainOrderId,
zhongnanhuang authored
536
              afterSalesRejectionNotes: values.name,
537
538
            });
          }
539
          console.log('h');
540
541
          if (checkType(CHECK_TYPE.FINALCIAL)) {
            doFinancailCheck(values, true);
542
            return;
543
          }
544
545
546
547
548
549
550

          if (checkType(CHECK_TYPE.LEADER_AUDIT)) {
            doLeaderCheck({
              pass: true,
              subOrderIds: subOrderIds,
              reason: values.name,
            });
551
            return;
552
          }
553
554
555
556
557
558
559
560
561
562
563

          if (checkType(CHECK_TYPE.MODIFY_APPLY_WAIT_FOR_AUDIT)) {
            //审核通过
            return doAfterSalesCheck({
              applyType: 'order-change-normal',
              isAfterSalesSuccess: true,
              subOrderIds: subOrderIds,
              mainId: mainOrderId,
              afterSalesRejectionNotes: values.name,
            });
          }
zhongnanhuang authored
564
zhongnanhuang authored
565
566
567
568
569
570
571
572
573
          //预存审核,先暂时共用同一个审核弹窗
          if (checkType(CHECK_TYPE.PREPAID_AUDIT)) {
            return doPrepaidAudit({
              pass: true,
              ids: subOrderIds,
              auditNotes: form.getFieldValue('name'),
            });
          }
574
          let type = '';
575
          type = computeType();
576
577
578
579
580
581
          doCheck({
            pass: true,
            subOrderIds: subOrderIds,
            type: type,
            notes: form.getFieldValue('name'),
          });
582
583
584
        }}
        onOpenChange={setCheckVisible}
      >
zhongnanhuang authored
585
        {checkType(CHECK_TYPE.AFTER_SALES) ? (
zhongnanhuang authored
586
587
588
589
590
591
592
593
594
595
596
597
598
          <>
            {afterSalesInfo}
            <Button
              className="px-0"
              type="link"
              onClick={() => {
                console.log(data);
                openOrderDrawer('after-sales-check', mainOrderId);
              }}
            >
              查看旧订单
            </Button>
          </>
zhongnanhuang authored
599
600
601
        ) : (
          ''
        )}
zhongnanhuang authored
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
        {checkType(CHECK_TYPE.PAYMENT_RECEIPTS_AUDIT) ? (
          <>
            <Divider orientation="center">
              <span className="text-sm">回款凭证</span>
            </Divider>
            <Image.PreviewGroup
              className="mr-10"
              preview={{
                onChange: (current, prev) =>
                  console.log(`current index: ${current}, prev index: ${prev}`),
              }}
            >
              {paymentReceiptsImages.map((url) => (
                <>
                  <Image width={120} src={url} /> <Divider type="vertical" />
                </>
              ))}
            </Image.PreviewGroup>
            <Divider></Divider>
          </>
        ) : (
          ''
        )}
zhongnanhuang authored
626
zhongnanhuang authored
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
        {checkType(CHECK_TYPE.PREPAID_AUDIT) && (
          <>
            <Divider orientation="center">
              <span className="text-sm">凭证</span>
            </Divider>
            <Image.PreviewGroup
              className="mr-10"
              preview={{
                onChange: (current, prev) =>
                  console.log(`current index: ${current}, prev index: ${prev}`),
              }}
            >
              {prepaidProofImages.map((url) => (
                <>
                  <Image width={120} src={url} /> <Divider type="vertical" />
                </>
              ))}
            </Image.PreviewGroup>
            <Divider></Divider>
          </>
        )}

        {checkType('prepaidAudit') ? (
          <div>请特别注意手机号码和充值金额。</div>
        ) : (
          <div>请特别注意订单总金额与订单金额。</div>
        )}
654
655
656
657
658
659
660
661
662
        {!checkType(CHECK_TYPE.CONFIRM_DELIVER) ? (
          <ProFormTextArea
            width="lg"
            name="name"
            placeholder="若驳回,请填写驳回理由"
          />
        ) : (
          <></>
        )}
663
664
        {checkType(CHECK_TYPE.FINALCIAL) ? (
          <>
zhongnanhuang authored
665
666
667
            <div className="pb-4 text-xs decoration-gray-50">
              可复制照片粘贴
            </div>
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
            <Upload {...props}>
              {fileList.length < COMFIR_RECEIPT_IMAGES_NUMBER
                ? uploadButton
                : ''}
            </Upload>
          </>
        ) : (
          ''
        )}
      </ModalForm>

      <Modal
        open={previewOpen}
        title={previewTitle}
        footer={null}
        onCancel={handleCancel}
      >
        <img alt="图片预览" style={{ width: '100%' }} src={previewImage} />
      </Modal>
687
      {contextHolder}
688
    </>
sanmu authored
689
690
  );
};