|
1
|
import type { ProColumns } from '@ant-design/pro-components';
|
|
2
|
import { EditableProTable, ProFormRadio } from '@ant-design/pro-components';
|
|
3
|
import { Form } from 'antd';
|
|
4
|
import React, { useEffect, useState } from 'react';
|
|
5
6
|
const waitTime = (time: number = 100) => {
|
|
7
8
9
10
11
|
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
|
|
12
13
|
};
|
|
14
15
16
17
18
19
20
21
|
// type DataSourceType = {
// count?: number;
// id: React.Key;
// deviceModel?: string;
// deviceName?: string;
// price?: number;
// unitPrice?: number;
// };
|
|
22
23
|
export default ({ productBody, EditProductBody }) => {
|
|
24
25
26
27
28
29
30
31
32
|
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
const [form] = Form.useForm<{ name: string; company: string }>();
const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
'hidden',
);
function getDataSourece() {
if (productBody.length !== 0) {
setDataSource(productBody);
|
|
33
|
}
|
|
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
}
function setEditProductBody(value) {
const modifiedArray = value.map((obj) => {
if (obj.dId && Number(obj.dId) <= 1000) {
return {
...obj,
count: obj.count,
dId: null,
deviceModel: obj.deviceModel,
deviceName: obj.deviceName,
price: obj.price,
unitPrice: obj.unitPrice,
};
} else {
return obj;
}
});
|
|
51
|
|
|
52
53
54
|
EditProductBody(modifiedArray);
setDataSource(value);
}
|
|
55
|
|
|
56
57
58
|
useEffect(() => {
getDataSourece();
}, [productBody]);
|
|
59
|
|
|
60
61
62
63
64
65
66
67
68
|
type DataSourceType = {
id: React.Key;
count: number;
dId?: number;
deviceModel: string;
deviceName: string;
price: number;
unitPrice: number;
};
|
|
69
|
|
|
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
const columns: ProColumns<DataSourceType>[] = [
{
title: '设备编号',
dataIndex: 'dId',
hideInTable: true,
},
{
title: '设备名称',
dataIndex: 'deviceName',
formItemProps: () => {
return {
rules: [{ required: true, message: '此项为必填项' }],
};
},
},
{
title: '设备型号',
dataIndex: 'deviceModel',
|
|
88
|
width: '20%',
|
|
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
117
118
119
120
121
122
123
124
125
126
127
128
|
formItemProps: () => {
return {
rules: [{ required: true, message: '此项为必填项' }],
};
},
},
{
title: '数量',
dataIndex: 'count',
onChange: (e) => {
const unitPrice = form.getFieldValue(`data[${rowIndex}].unitPrice`);
form.setFieldsValue({
[`data[${rowIndex}].price`]: e * unitPrice,
});
},
formItemProps: () => {
return {
rules: [{ required: true, message: '此项为必填项' }],
};
},
},
{
title: '单价',
dataIndex: 'unitPrice',
formItemProps: () => {
return {
rules: [{ required: true, message: '此项为必填项' }],
};
},
},
{
title: '总价',
dataIndex: 'price',
formItemProps: () => {
return {
rules: [{ required: true, message: '此项为必填项' }],
};
},
},
];
|
|
129
|
|
|
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
return (
<>
<EditableProTable<DataSourceType>
className="product-detail-index"
rowKey="dId"
toolbar={{ style: { display: 'none' } }}
ghost={true}
scroll={{
x: 960,
}}
recordCreatorProps={
position !== 'hidden'
? {
position: position as 'top',
record: () => ({ dId: (Math.random() * 1000).toFixed(0) }),
}
: false
|
|
147
|
}
|
|
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
loading={false}
toolBarRender={() => [
<ProFormRadio.Group
key="render"
fieldProps={{
value: position,
onChange: (e) => setPosition(e.target.value),
}}
/>,
]}
columns={columns}
request={dataSource}
value={dataSource}
onChange={setEditProductBody}
editable={{
type: 'multiple',
editableKeys,
onSave: async () => {
await waitTime(500);
},
onChange: setEditableRowKeys,
}}
/>
</>
);
};
|