Blame view

src/pages/Order/OrderWarning/components/DeliverModal.tsx 10.6 KB
zhongnanhuang authored
1
import { RESPONSE_CODE } from '@/constants/enum';
zhongnanhuang authored
2
import {
zhongnanhuang authored
3
  postServiceOrderProcureSend,
zhongnanhuang authored
4
5
6
  postServiceOrderSendProduct,
  postServiceOrderSupplierSendOrder,
} from '@/services';
7
import { enumToSelect } from '@/utils';
sanmu authored
8
9
10
import {
  ProColumns,
  ProForm,
11
  ProFormSelect,
sanmu authored
12
13
14
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
zhongnanhuang authored
15
16
17
import {
  Button,
  Col,
zhongnanhuang authored
18
  Flex,
zhongnanhuang authored
19
20
21
22
23
24
25
  Input,
  InputNumber,
  Modal,
  Row,
  Select,
  message,
} from 'antd';
sanmu authored
26
27
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
boyang authored
28
import { CHECK_TYPE, LOGISTICS_STATUS_OPTIONS } from '../../constant';
sanmu authored
29
zhongnanhuang authored
30
31
32
33
const DeliverModal = ({
  data: propsData,
  isSendProduct,
  setVisible,
zhongnanhuang authored
34
  sendType,
zhongnanhuang authored
35
36
  onClose,
}) => {
sanmu authored
37
38
39
  const [data, setData] = useState(propsData || {});
  const form = useRef();
zhongnanhuang authored
40
41
42
43
44
45
46
47
48
49
50
51
52
  /**
   * 是供应商发货还是普通发货
   * @param typeString
   * @returns
   */
  function optType(typeString: string) {
    if (sendType === typeString) {
      return true;
    }

    return false;
  }
sanmu authored
53
54
55
56
  useEffect(() => {
    setData(propsData);
  }, [propsData]);
zhongnanhuang authored
57
  const handleChange = (key: string, index: number, obj: any) => {
58
    const newData = cloneDeep(data);
zhongnanhuang authored
59
60
61
62
63
    if (typeof obj !== 'object') {
      newData[index][key] = obj;
    } else {
      newData[index][key] = obj.target?.value;
    }
64
65
    setData(newData);
  };
sanmu authored
66
67
  const columns: ProColumns<any>[] = [
    {
zhongnanhuang authored
68
69
      title: 'ID',
      dataIndex: 'id',
zhongnanhuang authored
70
      width: 120,
zhongnanhuang authored
71
72
73
      render: (_, record) => <Input value={record.id} disabled />,
    },
    {
sanmu authored
74
      title: '商品编号',
zhongnanhuang authored
75
      dataIndex: 'productCode',
zhongnanhuang authored
76
      width: 120,
zhongnanhuang authored
77
      render: (_, record) => <Input value={record.productCode} disabled />,
sanmu authored
78
79
80
    },
    {
      title: '商品名称',
zhongnanhuang authored
81
      dataIndex: 'productName',
zhongnanhuang authored
82
      width: 120,
zhongnanhuang authored
83
84
85
86
87
88
89
      render: (_, record) => <Input value={record.productName} disabled />,
    },
    {
      title: '商品参数',
      dataIndex: 'parameters',
      width: 80,
      render: (_, record) => <Input value={record.parameters} disabled />,
sanmu authored
90
91
92
93
    },
    {
      title: '商品数量',
      dataIndex: 'status',
zhongnanhuang authored
94
      render: (_, record) => <InputNumber value={record.quantity} disabled />,
sanmu authored
95
96
    },
    {
zhongnanhuang authored
97
98
      title: '包裹数量',
      dataIndex: 'packageNumber',
zhongnanhuang authored
99
      render: (_, record, index) => (
zhongnanhuang authored
100
        <InputNumber
zhongnanhuang authored
101
          min={1}
zhongnanhuang authored
102
          value={record.packageNumber}
zhongnanhuang authored
103
          defaultValue={1}
zhongnanhuang authored
104
          onChange={(value) => handleChange('packageNumber', index, value)}
zhongnanhuang authored
105
106
107
108
        />
      ),
    },
    {
sanmu authored
109
      title: '物流方式',
110
      key: 'logisticsMethod',
zhongnanhuang authored
111
      render: (_, record, index) => (
zhongnanhuang authored
112
        <Select
zhongnanhuang authored
113
          style={{ minWidth: 150 }}
114
          placeholder="请输入物流方式"
zhongnanhuang authored
115
          value={record.logisticsMethod}
116
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
zhongnanhuang authored
117
          onChange={(value) => {
zhongnanhuang authored
118
119
120
121
122
123
124
            handleChange('logisticsMethod', index, value); //修改时更改record数据
            if (value === 'OTHER_LOGISTICS') {
              message.info(
                '您选择的是[其他物流方式],请将该物流方式写在备注中',
              );
            }
          }}
sanmu authored
125
126
127
128
129
        />
      ),
    },
    {
      title: '物流单号',
130
      key: 'serialNumber',
131
      render: (_, record, index) => (
zhongnanhuang authored
132
133
134
        <Input
          placeholder="请输入物流单号"
          value={record.serialNumber}
zhongnanhuang authored
135
136
137
          onChange={(value) => {
            handleChange('serialNumber', index, value);
          }}
sanmu authored
138
139
140
        />
      ),
    },
zhongnanhuang authored
141
142
143
144
145
146
147
148
149
150
    {
      title: '物流备注',
      dataIndex: 'packageNumber',
      render: (_, record, index) => (
        <Input.TextArea
          value={record.logisticsNotes}
          onChange={(value) => handleChange('logisticsNotes', index, value)}
        />
      ),
    },
sanmu authored
151
152
153
154
155
  ];

  return (
    <Modal
      open
zhongnanhuang authored
156
      width={1000}
zhongnanhuang authored
157
      title={isSendProduct ? '发货' : '修改发货信息'}
zhongnanhuang authored
158
159
160
161
162
163
164
      onOk={async () => {
        //请求体封装
        let list = data.map((item) => {
          return {
            id: item.id,
            logisticsMethod: item.logisticsMethod,
            serialNumber: item.serialNumber,
zhongnanhuang authored
165
166
167
168
            packageNumber:
              item.packageNumber === null || item.packageNumber === undefined
                ? 1
                : item.packageNumber,
zhongnanhuang authored
169
            logisticsNotes: item.logisticsNotes,
zhongnanhuang authored
170
171
          };
        });
zhongnanhuang authored
172
173
174
175
176
177
178
179
180
181
182
183
184
185

        for (let item of list) {
          let method = item.logisticsMethod;
          let notes = item.logisticsNotes;
          if (
            method === 'OTHER_LOGISTICS' &&
            (notes === '' || notes === undefined)
          ) {
            message.error(
              '请检查:物流方式为[其他物流方式]的记录中,物流备注不能为空!请将实际的物流方式填写在备注中!',
            );
            return;
          }
        }
zhongnanhuang authored
186
187
188
189
        let body = { id: data[0].mainOrderId, list: list, flag: false };
        if (isSendProduct) {
          body.flag = true;
        }
zhongnanhuang authored
190
        //发货请求
zhongnanhuang authored
191
192
193
        let res;
        if (optType(CHECK_TYPE.SUPPLIER)) {
          res = await postServiceOrderSupplierSendOrder({ data: body });
zhongnanhuang authored
194
195
        } else if (optType(CHECK_TYPE.PROCURE)) {
          res = await postServiceOrderProcureSend({ data: body });
zhongnanhuang authored
196
197
198
199
        } else {
          res = await postServiceOrderSendProduct({ data: body });
        }
zhongnanhuang authored
200
201
202
203
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }
sanmu authored
204
205
      }}
      onCancel={() => {
zhongnanhuang authored
206
        setVisible(false);
sanmu authored
207
      }}
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
      footer={[
        <Button
          key="back"
          onClick={() => {
            setVisible(false);
          }}
        >
          取消
        </Button>,
        <Button
          key="selfDeliver"
          type="primary"
          onClick={async () => {
            //请求体封装
            let list = data.map((item) => {
              return {
                id: item.id,
                deliverType: 'SELF_DELIVER',
              };
            });

            let body = { id: data[0].mainOrderId, list: list, flag: false };
            if (isSendProduct) {
              body.flag = true;
            }
            //发货请求
            let res;
            if (optType(CHECK_TYPE.SUPPLIER)) {
              res = await postServiceOrderSupplierSendOrder({ data: body });
            } else if (optType(CHECK_TYPE.PROCURE)) {
              res = await postServiceOrderProcureSend({ data: body });
            } else {
              res = await postServiceOrderSendProduct({ data: body });
            }

            if (res.result === RESPONSE_CODE.SUCCESS) {
              message.success(res.message);
              onClose();
            }
          }}
        >
          自行派送
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={async () => {
            //请求体封装
            let list = data.map((item) => {
              return {
                id: item.id,
                logisticsMethod: item.logisticsMethod,
                serialNumber: item.serialNumber,
                packageNumber:
                  item.packageNumber === null ||
boyang authored
263
                    item.packageNumber === undefined
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
                    ? 1
                    : item.packageNumber,
                logisticsNotes: item.logisticsNotes,
              };
            });

            for (let item of list) {
              let method = item.logisticsMethod;
              let notes = item.logisticsNotes;
              if (
                method === 'OTHER_LOGISTICS' &&
                (notes === '' || notes === undefined)
              ) {
                message.error(
                  '请检查:物流方式为[其他物流方式]的记录中,物流备注不能为空!请将实际的物流方式填写在备注中!',
                );
                return;
              }
            }
            let body = { id: data[0].mainOrderId, list: list, flag: false };
            if (isSendProduct) {
              body.flag = true;
            }
            //发货请求
            let res;
            if (optType(CHECK_TYPE.SUPPLIER)) {
              res = await postServiceOrderSupplierSendOrder({ data: body });
            } else if (optType(CHECK_TYPE.PROCURE)) {
              res = await postServiceOrderProcureSend({ data: body });
            } else {
              res = await postServiceOrderSendProduct({ data: body });
            }

            if (res.result === RESPONSE_CODE.SUCCESS) {
              message.success(res.message);
              onClose();
            }
          }}
        >
          确认
        </Button>,
      ]}
sanmu authored
306
    >
zhongnanhuang authored
307
308
309
310
311
312
313
      <Flex vertical>
        <strong>将物流方式和物流单号更新到下方所有订单</strong>
        <span className="text-[red] py-1">
          选择【其他物流方式】时,需要将对应的物流方式填写在备注中。例如:如果发圆通快递,系统上没有这个选项,就需要选【其他物流方式】,然后把“圆通快递”填在备注上。
        </span>
      </Flex>
sanmu authored
314
315
316
317
318
319
      <ProForm
        layout="inline"
        submitter={false}
        className="mb-8"
        formRef={form}
      >
zhongnanhuang authored
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
        <Row gutter={[0, 6]}>
          <Col>
            <ProFormSelect
              placeholder="请输入物流方式"
              name="logisticsMethod"
              width="sm"
              label="物流方式"
              options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
            />
            <ProFormText name="logisticsNotes" label="物流备注"></ProFormText>
          </Col>
          <Col>
            <ProFormText name="serialNumber" label="物流单号"></ProFormText>
          </Col>
        </Row>
sanmu authored
336
337
338
339
        <Button
          type="primary"
          onClick={() => {
            const values = form.current.getFieldsValue();
zhongnanhuang authored
340
341
342
343
344
            if (values.logisticsMethod === 'OTHER_LOGISTICS') {
              message.info(
                '自动填充成功!您选择的是其他物流方式,请将物流方式写在物流备注中!',
              );
            }
sanmu authored
345
346
347
            let newData = cloneDeep(data);
            newData = newData.map((item) => ({
              ...item,
zhongnanhuang authored
348
              logisticsMethod: values.logisticsMethod,
zhongnanhuang authored
349
350
              serialNumber: values.serialNumber,
              logisticsNotes: values.logisticsNotes,
sanmu authored
351
352
353
354
355
356
357
358
359
360
            }));
            setData(newData);
          }}
        >
          批量更新
        </Button>
      </ProForm>
      <ProTable<any>
        className="px-0"
        dataSource={data}
zhongnanhuang authored
361
        rowKey="id"
sanmu authored
362
363
364
365
366
        pagination={false}
        columns={columns}
        search={false}
        dateFormatter="string"
        options={false}
zhongnanhuang authored
367
        scroll={{ x: 1400 }}
sanmu authored
368
369
370
371
372
373
      />
    </Modal>
  );
};

export default DeliverModal;