|
1
2
3
4
5
6
|
import {
postOrderErpOrderStagesAdd,
postOrderErpOrderStagesPayWaySaveOrUpdate,
postOrderErpOrderStagesSearch,
postOrderErpOrderStagesUpload,
} from '@/services';
|
|
7
8
|
import { PlusOutlined } from '@ant-design/icons';
import {
|
|
9
10
11
12
13
14
15
|
ModalForm,
ProCard,
ProForm,
ProFormDatePicker,
ProFormText,
ProFormTextArea,
ProFormUploadButton,
|
|
16
|
} from '@ant-design/pro-components';
|
|
17
|
import { Button, Form, message } from 'antd';
|
|
18
|
import { RcFile } from 'antd/es/upload';
|
|
19
20
21
|
import { useEffect, useState } from 'react';
import PayWayDetail from '../payWayDetail/payWayDetail';
import ProductDetail from '../productDetail/productDetail';
|
|
22
23
|
const waitTime = (time: number = 100) => {
|
|
24
25
26
27
28
|
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
|
|
29
30
|
};
|
|
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
export default ({ toReload }) => {
const [form] = Form.useForm<{ name: string; company: string }>();
const [contextBody, setContextBody] = useState<OrderStagesWithListItem>({
id: undefined,
contract: undefined,
dateRange: undefined,
terminal: undefined,
orderStagesDeviceVoList: [],
totalPrice: undefined,
payWay: '30/30/30/10',
annex: undefined,
remark: undefined,
});
const [editProductBody, setEditProductBody] = useState([]);
const [total, setTotal] = useState(0);
const [payWayBody, setPayWayBody] = useState([]);
const [otherBody, setOtherBody] = useState([]);
const [isDis] = useState(true);
|
|
49
|
|
|
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
type OrderStagesWithListItem = {
//文件编号
id?: number;
//合同编号
contract?: string;
//供应商名称
vendor?: string;
//签合同日期
dateRange?: Date;
//终端名称
terminal?: string;
orderStagesDeviceVoList: orderStagesDevice[];
//合同总金额
totalPrice?: number;
//付款方式
payWay?: string;
//附件
annex?: string;
//备注
remark?: string;
};
|
|
71
|
|
|
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
type orderStagesDevice = {
//设备id
dId: number;
//设备名称
deviceName: string;
//设备型号
deviceModel: string;
//数量
count: number;
//单价
unitPrice: number;
//总价
price: number;
};
function setSave(value) {
setOtherBody(value);
}
|
|
90
|
|
|
91
92
93
94
|
useEffect(() => {
setContextBody({ ...contextBody, totalPrice: total });
form.setFieldValue('totalPrice', total);
}, [total]);
|
|
95
|
|
|
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
const handleInputChange = (value: string, no: number, priceNow?: number) => {
if (value === '') {
message.info('请输入比例!');
} else {
let totalPay = 0;
const payValue: string[] = value.split('/');
let body:
| ((prevState: never[]) => never[])
| { proportion: string; payPrice: number }[] = [];
if (no === 1) {
if (payValue.length !== 4) {
message.warning('比例个数总和不为4个!');
} else {
payValue.forEach((item) => {
totalPay += Number(item);
});
|
|
112
|
}
|
|
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
if (totalPay !== 100) {
message.warning('比例总和不为100!');
} else {
message.success('输入有效!');
payValue.forEach((item) => {
body.push({
proportion: item + '%',
payPrice: (Number(item) * total) / 100,
});
});
setPayWayBody(body);
}
} else {
payValue.forEach((item) => {
totalPay += Number(item);
});
payValue.forEach((item) => {
body.push({
proportion: item + '%',
payPrice: (Number(item) * priceNow) / 100,
});
});
setPayWayBody(body);
}
|
|
137
|
}
|
|
138
139
140
141
142
143
144
145
146
147
148
149
|
};
function getEditProductBody(value) {
setEditProductBody(value);
let price = 0;
value.map((obj) => (price += obj.count * obj.unitPrice));
setTotal(price);
setContextBody({ ...contextBody, orderStagesDeviceVoList: value });
if (contextBody.payWay === '') {
handleInputChange('30/30/30/10', 0, price);
} else {
handleInputChange(contextBody.payWay, 0, price);
|
|
150
|
}
|
|
151
|
}
|
|
152
|
|
|
153
|
function refresh() {
|
|
154
|
setEditProductBody([]);
|
|
155
156
157
158
159
160
161
162
163
164
165
166
167
|
setContextBody({
id: undefined,
contract: undefined,
dateRange: undefined,
terminal: undefined,
orderStagesDeviceVoList: [],
totalPrice: undefined,
payWay: '30/30/30/10',
annex: undefined,
remark: undefined,
});
handleInputChange('30/30/30/10', 0, 0);
}
|
|
168
|
|
|
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
return (
<ModalForm<OrderStagesWithListItem>
title="新建"
trigger={
<Button
key="button"
icon={<PlusOutlined />}
type="primary"
onClick={() => refresh()}
>
新增
</Button>
}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
}}
submitTimeout={2000}
onFinish={async (values) => {
|
|
189
|
console.log(values);
|
|
190
191
192
|
if (editProductBody.length === 0) {
message.error('请填写产品数据');
return false;
|
|
193
|
}
|
|
194
|
let remakeValue = [];
|
|
195
|
|
|
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
const formData = new FormData();
let toSendEdit = {
id: values.id || contextBody.id,
contract: values.contract || contextBody.contract,
vendor: values.vendor || contextBody.vendor,
dateRange: values.dateRange || contextBody.dateRange,
terminal: values.terminal || contextBody.terminal,
orderStagesDeviceDoList:
values.orderStagesDeviceVoList ||
contextBody.orderStagesDeviceVoList,
totalPrice: values.totalPrice || contextBody.totalPrice,
payWay: values.payWay || contextBody.payWay,
annex: contextBody.annex,
remark: values.remark || contextBody.remark,
|
|
210
|
createByName: null,
|
|
211
212
213
214
215
216
217
218
219
220
221
222
223
224
|
};
if (values.annex) {
formData.append('file', values.annex[0].originFileObj as RcFile);
const res = await postOrderErpOrderStagesUpload({
data: formData,
headers: {
'Content-Type':
'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
},
});
if (res.data) {
toSendEdit.annex = res.data;
}
}
|
|
225
226
227
|
toSendEdit.createByName = JSON.parse(
localStorage.getItem('userInfo'),
).username;
|
|
228
229
230
|
const isSaveOrUpdate = await postOrderErpOrderStagesAdd({
data: { ...toSendEdit },
});
|
|
231
|
|
|
232
233
|
if (isSaveOrUpdate) {
const promises = [];
|
|
234
|
|
|
235
236
|
otherBody.forEach((item) => {
let remakeItem = {
|
|
237
|
ossId: contextBody.id,
|
|
238
|
number: item.id,
|
|
239
|
dateRange: item.payDate,
|
|
240
|
fileName: item.fileName,
|
|
241
|
fileUrl: item.fileUrl,
|
|
242
|
};
|
|
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
|
// if (
// typeof item.fileUrl === 'object' &&
// item.fileUrl instanceof File
// ) {
// const formData = new FormData();
// formData.append('file', item.fileUrl as RcFile);
// const uploadPromise = async () => {
// const res = await postOrderErpOrderStagesUpload({
// data: formData,
// headers: {
// 'Content-Type':
// 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
// },
// });
// if (res.data) {
// remakeItem.fileUrl = res.data;
// }
// };
// promises.push(uploadPromise());
// }
|
|
263
264
|
remakeValue.push(remakeItem);
});
|
|
265
|
|
|
266
267
268
269
270
271
|
let makeEnd = [];
const getRetrunIDPromise = async () => {
let returnOssID = await postOrderErpOrderStagesSearch({
data: { contract: values.contract || contextBody.contract },
});
console.log(returnOssID.data);
|
|
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
|
if (returnOssID) {
makeEnd = remakeValue.map((item) => {
return { ...item, ossId: returnOssID.data[0].id };
});
}
};
promises.push(getRetrunIDPromise());
Promise.all(promises).then(async () => {
await postOrderErpOrderStagesPayWaySaveOrUpdate({
data: makeEnd,
});
});
toReload();
}
await waitTime(2000);
message.success('提交成功');
return true;
}}
>
<ProCard title="基本信息" headerBordered bordered>
<ProForm.Group>
<ProFormText
width="md"
name="vendor"
rules={[{ required: true, message: '此项为必填项' }]}
label="供应商名称"
placeholder="请输入"
initialValue={contextBody.vendor}
/>
|
|
303
|
|
|
304
305
306
307
308
309
310
311
|
<ProFormText
width="md"
name="terminal"
rules={[{ required: true, message: '此项为必填项' }]}
label="终端名称"
placeholder="请输入"
initialValue={contextBody.terminal}
/>
|
|
312
|
|
|
313
314
315
316
317
318
319
320
321
322
|
<ProFormDatePicker
name="dateRange"
width="md"
label="签合同日期"
placeholder="请选择日期"
fieldProps={{
format: (value) => value.format('YYYY-MM-DD'),
}}
initialValue={contextBody.dateRange}
/>
|
|
323
|
|
|
324
325
326
327
328
329
330
331
332
333
334
335
336
|
<ProFormText
width="md"
name="payWay"
rules={[{ required: true, message: '此项为必填项' }]}
label="付款比例"
placeholder="请输入"
initialValue={contextBody.payWay}
disabled={!isDis}
onBlur={(e) => {
setContextBody({ ...contextBody, payWay: e.target.value });
handleInputChange(e.target.value, 1);
}}
/>
|
|
337
|
|
|
338
339
340
341
342
343
344
345
|
<ProFormText
width="md"
name="contract"
rules={[{ required: true, message: '此项为必填项' }]}
label="合同编号"
placeholder="请输入"
initialValue={contextBody.contract}
/>
|
|
346
|
|
|
347
348
349
350
351
352
|
<ProFormUploadButton
width="md"
name="annex"
max={1}
label="合同附件"
/>
|
|
353
|
|
|
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
|
<ProFormText
width="md"
name="totalPrice"
label="合同金额"
placeholder="请输入"
disabled={isDis}
initialValue={'0'}
/>
</ProForm.Group>
</ProCard>
<ProCard
title={
<>
<span style={{ color: 'red' }}>*</span>产品明细
</>
}
style={{ marginTop: 10 }}
headerBordered
bordered
>
<ProductDetail
productBody={[]}
EditProductBody={getEditProductBody}
></ProductDetail>
</ProCard>
|
|
379
|
|
|
380
381
382
383
384
385
386
387
388
389
390
391
|
<ProCard
title="付款信息"
style={{ marginTop: 10 }}
headerBordered
bordered
>
<PayWayDetail
payBody={payWayBody}
thisId={null}
currtSave={setSave}
></PayWayDetail>
</ProCard>
|
|
392
|
|
|
393
394
395
396
397
398
399
400
401
402
|
<ProCard style={{ marginTop: 10 }} headerBordered bordered>
<ProFormTextArea
label="备注"
name="remark"
initialValue={contextBody.remark}
/>
</ProCard>
</ModalForm>
);
};
|