Blame view

src/pages/Order/components/DeliverModal.tsx 4.97 KB
zhongnanhuang authored
1
2
import { RESPONSE_CODE } from '@/constants/enum';
import { postServiceOrderSendProduct } from '@/services';
3
import { enumToSelect } from '@/utils';
sanmu authored
4
5
6
import {
  ProColumns,
  ProForm,
7
  ProFormSelect,
sanmu authored
8
9
10
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
zhongnanhuang authored
11
import { Button, Input, InputNumber, Modal, Select, message } from 'antd';
sanmu authored
12
13
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
14
import { LOGISTICS_STATUS_OPTIONS } from '../constant';
sanmu authored
15
zhongnanhuang authored
16
const DeliverModal = ({ data: propsData, isSendProduct, onClose }) => {
sanmu authored
17
18
19
20
21
22
23
  const [data, setData] = useState(propsData || {});
  const form = useRef();

  useEffect(() => {
    setData(propsData);
  }, [propsData]);
zhongnanhuang authored
24
  const handleChange = (key: string, index: number, obj: any) => {
25
    const newData = cloneDeep(data);
zhongnanhuang authored
26
27
28
29
30
    if (typeof obj !== 'object') {
      newData[index][key] = obj;
    } else {
      newData[index][key] = obj.target?.value;
    }
31
32
    setData(newData);
  };
sanmu authored
33
34
  const columns: ProColumns<any>[] = [
    {
zhongnanhuang authored
35
36
37
38
39
40
      title: 'ID',
      width: 80,
      dataIndex: 'id',
      render: (_, record) => <Input value={record.id} disabled />,
    },
    {
sanmu authored
41
42
      title: '商品编号',
      width: 80,
zhongnanhuang authored
43
44
      dataIndex: 'productCode',
      render: (_, record) => <Input value={record.productCode} disabled />,
sanmu authored
45
46
47
    },
    {
      title: '商品名称',
zhongnanhuang authored
48
      dataIndex: 'productName',
sanmu authored
49
      align: 'right',
zhongnanhuang authored
50
51
52
53
54
55
56
57
58
      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
59
60
61
62
63
    },
    {
      title: '商品数量',
      width: 80,
      dataIndex: 'status',
zhongnanhuang authored
64
      render: (_, record) => <InputNumber value={record.quantity} disabled />,
sanmu authored
65
66
    },
    {
zhongnanhuang authored
67
68
69
      title: '包裹数量',
      width: 80,
      dataIndex: 'packageNumber',
zhongnanhuang authored
70
      render: (_, record, index) => (
zhongnanhuang authored
71
72
        <InputNumber
          value={record.packageNumber}
zhongnanhuang authored
73
          onChange={(value) => handleChange('packageNumber', index, value)}
zhongnanhuang authored
74
75
76
77
        />
      ),
    },
    {
sanmu authored
78
      title: '物流方式',
zhongnanhuang authored
79
      width: 150,
80
      key: 'logisticsMethod',
zhongnanhuang authored
81
      render: (_, record, index) => (
zhongnanhuang authored
82
        <Select
zhongnanhuang authored
83
          style={{ minWidth: 150 }}
84
          placeholder="请输入物流方式"
zhongnanhuang authored
85
          value={record.logisticsMethod}
86
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
zhongnanhuang authored
87
88
89
          onChange={(value) => {
            handleChange('logisticsMethod', index, value);
          }} //修改时更改record数据
sanmu authored
90
91
92
93
94
        />
      ),
    },
    {
      title: '物流单号',
zhongnanhuang authored
95
      width: 150,
96
      key: 'serialNumber',
97
      render: (_, record, index) => (
zhongnanhuang authored
98
99
100
        <Input
          placeholder="请输入物流单号"
          value={record.serialNumber}
zhongnanhuang authored
101
102
103
          onChange={(value) => {
            handleChange('serialNumber', index, value);
          }}
sanmu authored
104
105
106
107
108
109
110
111
        />
      ),
    },
  ];

  return (
    <Modal
      open
zhongnanhuang authored
112
113
      width={900}
      title={isSendProduct ? '发货' : '修改发货信息'}
zhongnanhuang authored
114
115
116
117
118
119
120
      onOk={async () => {
        //请求体封装
        let list = data.map((item) => {
          return {
            id: item.id,
            logisticsMethod: item.logisticsMethod,
            serialNumber: item.serialNumber,
zhongnanhuang authored
121
            packageNumber: item.packageNumber,
zhongnanhuang authored
122
123
          };
        });
zhongnanhuang authored
124
125
126
127
        let body = { id: data[0].mainOrderId, list: list, flag: false };
        if (isSendProduct) {
          body.flag = true;
        }
zhongnanhuang authored
128
129
130
131
132
133
        //发货请求
        const res = await postServiceOrderSendProduct({ data: body });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }
sanmu authored
134
135
136
137
138
139
140
141
142
143
144
145
      }}
      onCancel={() => {
        onClose();
      }}
    >
      <strong>将物流方式和物流单号更新到下方所有订单</strong>
      <ProForm
        layout="inline"
        submitter={false}
        className="mb-8"
        formRef={form}
      >
zhongnanhuang authored
146
147
148
149
150
151
152
153
        <ProFormSelect
          placeholder="请输入物流方式"
          name="logisticsMethod"
          width="sm"
          label="物流方式"
          options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
        />
        <ProFormText name="serialNumber" label="物流单号"></ProFormText>
sanmu authored
154
155
156
157
158
159
160
        <Button
          type="primary"
          onClick={() => {
            const values = form.current.getFieldsValue();
            let newData = cloneDeep(data);
            newData = newData.map((item) => ({
              ...item,
zhongnanhuang authored
161
162
              logisticsMethod: values.logisticsMethod,
              serialNumber: values.serialNumber, // 物流单号?
sanmu authored
163
164
165
166
167
168
169
170
171
172
            }));
            setData(newData);
          }}
        >
          批量更新
        </Button>
      </ProForm>
      <ProTable<any>
        className="px-0"
        dataSource={data}
zhongnanhuang authored
173
        rowKey="id"
sanmu authored
174
175
176
177
178
179
180
181
182
183
184
        pagination={false}
        columns={columns}
        search={false}
        dateFormatter="string"
        options={false}
      />
    </Modal>
  );
};

export default DeliverModal;