DeliverModal.tsx
2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import {
ProColumns,
ProForm,
ProFormText,
ProTable,
} from '@ant-design/pro-components';
import { Button, Input, InputNumber, Modal } from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
const DeliverModal = ({ data: propsData, onClose }) => {
const [data, setData] = useState(propsData || {});
const form = useRef();
useEffect(() => {
setData(propsData);
}, [propsData]);
const handleChange = (key: string, index: number) => (e) => {
const newData = cloneDeep(data);
newData[index][key] = e.target.value;
setData(newData);
};
const columns: ProColumns<any>[] = [
{
title: '商品编号',
width: 80,
dataIndex: 'name',
},
{
title: '商品名称',
dataIndex: 'containers',
align: 'right',
},
{
title: '商品数量',
width: 80,
dataIndex: 'status',
},
{
title: '物流方式',
width: 180,
key: 'paymentChannel',
render: (_, record, index) => (
<Input
value={record.paymentChannel}
onChange={handleChange('paymentChannel', index)}
/>
),
},
{
title: '物流单号',
width: 180,
key: 'productCode',
render: (_, record, index) => (
<InputNumber
value={record.productCode}
onChange={handleChange('productCode', index)}
/>
),
},
];
return (
<Modal
open
width={800}
title="发货"
onOk={() => {
console.log(data);
onClose();
}}
onCancel={() => {
onClose();
}}
>
<strong>将物流方式和物流单号更新到下方所有订单</strong>
<ProForm
layout="inline"
submitter={false}
className="mb-8"
formRef={form}
>
<ProFormText name="paymentChannel" label="物流方式"></ProFormText>
<ProFormText name="productCode" label="物流单号"></ProFormText>
<Button
type="primary"
onClick={() => {
const values = form.current.getFieldsValue();
let newData = cloneDeep(data);
newData = newData.map((item) => ({
...item,
paymentChannel: values.paymentChannel,
productCode: values.productCode, // 物流单号？
}));
setData(newData);
}}
>
批量更新
</Button>
</ProForm>
<ProTable<any>
className="px-0"
dataSource={data}
rowKey="key"
pagination={false}
columns={columns}
search={false}
dateFormatter="string"
options={false}
/>
</Modal>
);
};
export default DeliverModal;