Blame view

src/pages/Order/components/DeliverModal.tsx 5.73 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
import { Button, Input, InputNumber, Modal, Select, message } from 'antd';
sanmu authored
16
17
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
zhongnanhuang authored
18
import { CHECK_TYPE, LOGISTICS_STATUS_OPTIONS } from '../constant';
sanmu authored
19
zhongnanhuang authored
20
21
22
23
const DeliverModal = ({
  data: propsData,
  isSendProduct,
  setVisible,
zhongnanhuang authored
24
  sendType,
zhongnanhuang authored
25
26
  onClose,
}) => {
sanmu authored
27
28
29
  const [data, setData] = useState(propsData || {});
  const form = useRef();
zhongnanhuang authored
30
31
32
33
34
35
36
37
38
39
40
41
42
  /**
   * 是供应商发货还是普通发货
   * @param typeString
   * @returns
   */
  function optType(typeString: string) {
    if (sendType === typeString) {
      return true;
    }

    return false;
  }
sanmu authored
43
44
45
46
  useEffect(() => {
    setData(propsData);
  }, [propsData]);
zhongnanhuang authored
47
  const handleChange = (key: string, index: number, obj: any) => {
48
    const newData = cloneDeep(data);
zhongnanhuang authored
49
50
51
52
53
    if (typeof obj !== 'object') {
      newData[index][key] = obj;
    } else {
      newData[index][key] = obj.target?.value;
    }
54
55
    setData(newData);
  };
sanmu authored
56
57
  const columns: ProColumns<any>[] = [
    {
zhongnanhuang authored
58
59
60
61
62
63
      title: 'ID',
      width: 80,
      dataIndex: 'id',
      render: (_, record) => <Input value={record.id} disabled />,
    },
    {
sanmu authored
64
65
      title: '商品编号',
      width: 80,
zhongnanhuang authored
66
67
      dataIndex: 'productCode',
      render: (_, record) => <Input value={record.productCode} disabled />,
sanmu authored
68
69
70
    },
    {
      title: '商品名称',
zhongnanhuang authored
71
      dataIndex: 'productName',
sanmu authored
72
      align: 'right',
zhongnanhuang authored
73
74
75
76
77
78
79
80
81
      width: 80,
      render: (_, record) => <Input value={record.productName} disabled />,
    },
    {
      title: '商品参数',
      dataIndex: 'parameters',
      align: 'right',
      width: 80,
      render: (_, record) => <Input value={record.parameters} disabled />,
sanmu authored
82
83
84
85
86
    },
    {
      title: '商品数量',
      width: 80,
      dataIndex: 'status',
zhongnanhuang authored
87
      render: (_, record) => <InputNumber value={record.quantity} disabled />,
sanmu authored
88
89
    },
    {
zhongnanhuang authored
90
91
92
      title: '包裹数量',
      width: 80,
      dataIndex: 'packageNumber',
zhongnanhuang authored
93
      render: (_, record, index) => (
zhongnanhuang authored
94
        <InputNumber
zhongnanhuang authored
95
          min={1}
zhongnanhuang authored
96
          value={record.packageNumber}
zhongnanhuang authored
97
          defaultValue={1}
zhongnanhuang authored
98
          onChange={(value) => handleChange('packageNumber', index, value)}
zhongnanhuang authored
99
100
101
102
        />
      ),
    },
    {
sanmu authored
103
      title: '物流方式',
zhongnanhuang authored
104
      width: 150,
105
      key: 'logisticsMethod',
zhongnanhuang authored
106
      render: (_, record, index) => (
zhongnanhuang authored
107
        <Select
zhongnanhuang authored
108
          style={{ minWidth: 150 }}
109
          placeholder="请输入物流方式"
zhongnanhuang authored
110
          value={record.logisticsMethod}
111
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
zhongnanhuang authored
112
113
114
          onChange={(value) => {
            handleChange('logisticsMethod', index, value);
          }} //修改时更改record数据
sanmu authored
115
116
117
118
119
        />
      ),
    },
    {
      title: '物流单号',
zhongnanhuang authored
120
      width: 150,
121
      key: 'serialNumber',
122
      render: (_, record, index) => (
zhongnanhuang authored
123
124
125
        <Input
          placeholder="请输入物流单号"
          value={record.serialNumber}
zhongnanhuang authored
126
127
128
          onChange={(value) => {
            handleChange('serialNumber', index, value);
          }}
sanmu authored
129
130
131
132
133
134
135
136
        />
      ),
    },
  ];

  return (
    <Modal
      open
zhongnanhuang authored
137
138
      width={900}
      title={isSendProduct ? '发货' : '修改发货信息'}
zhongnanhuang authored
139
140
141
142
143
144
145
      onOk={async () => {
        //请求体封装
        let list = data.map((item) => {
          return {
            id: item.id,
            logisticsMethod: item.logisticsMethod,
            serialNumber: item.serialNumber,
zhongnanhuang authored
146
147
148
149
            packageNumber:
              item.packageNumber === null || item.packageNumber === undefined
                ? 1
                : item.packageNumber,
zhongnanhuang authored
150
151
          };
        });
zhongnanhuang authored
152
153
154
155
        let body = { id: data[0].mainOrderId, list: list, flag: false };
        if (isSendProduct) {
          body.flag = true;
        }
zhongnanhuang authored
156
        //发货请求
zhongnanhuang authored
157
158
159
        let res;
        if (optType(CHECK_TYPE.SUPPLIER)) {
          res = await postServiceOrderSupplierSendOrder({ data: body });
zhongnanhuang authored
160
161
        } else if (optType(CHECK_TYPE.PROCURE)) {
          res = await postServiceOrderProcureSend({ data: body });
zhongnanhuang authored
162
163
164
165
        } else {
          res = await postServiceOrderSendProduct({ data: body });
        }
zhongnanhuang authored
166
167
168
169
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }
sanmu authored
170
171
      }}
      onCancel={() => {
zhongnanhuang authored
172
        setVisible(false);
sanmu authored
173
174
175
176
177
178
179
180
181
      }}
    >
      <strong>将物流方式和物流单号更新到下方所有订单</strong>
      <ProForm
        layout="inline"
        submitter={false}
        className="mb-8"
        formRef={form}
      >
zhongnanhuang authored
182
183
184
185
186
187
188
189
        <ProFormSelect
          placeholder="请输入物流方式"
          name="logisticsMethod"
          width="sm"
          label="物流方式"
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
        />
        <ProFormText name="serialNumber" label="物流单号"></ProFormText>
sanmu authored
190
191
192
193
194
195
196
        <Button
          type="primary"
          onClick={() => {
            const values = form.current.getFieldsValue();
            let newData = cloneDeep(data);
            newData = newData.map((item) => ({
              ...item,
zhongnanhuang authored
197
198
              logisticsMethod: values.logisticsMethod,
              serialNumber: values.serialNumber, // 物流单号?
sanmu authored
199
200
201
202
203
204
205
206
207
208
            }));
            setData(newData);
          }}
        >
          批量更新
        </Button>
      </ProForm>
      <ProTable<any>
        className="px-0"
        dataSource={data}
zhongnanhuang authored
209
        rowKey="id"
sanmu authored
210
211
212
213
214
215
216
217
218
219
220
        pagination={false}
        columns={columns}
        search={false}
        dateFormatter="string"
        options={false}
      />
    </Modal>
  );
};

export default DeliverModal;