|
1
|
import {
|
|
2
|
// postServiceOrderQueryServiceOrder,
|
柏杨
authored
|
3
|
postServiceOrderWarningOrderStatistics,
|
|
4
|
} from '@/services';
|
|
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import { downloadFile } from '@/services/order';
import { getSalesCodeOptions } from '@/utils/order';
import { getUserInfo } from '@/utils/user';
import {
ActionType,
ProFormInstance,
ProFormSelect,
} from '@ant-design/pro-components';
import { Badge, Button, Radio, message } from 'antd';
import { format } from 'date-fns';
import React, { useEffect, useRef, useState } from 'react';
import OrderList from '../OrderList/OrderList';
import './index.less';
// import { useParams } from '@umijs/max';
|
|
19
|
|
|
20
21
22
23
|
const OrderPage = () => {
const [salesCodeOptions, setSalesCodeOptions] = useState([]);
const [salesCodeSelect, setSalesCodeSelect] = useState();
const userInfo = getUserInfo();
|
|
24
|
|
|
25
26
27
28
29
30
31
|
const mainTableRef = useRef<ActionType>();
const mainTableFormRef = useRef<ProFormInstance>();
let [searchParams] = useState(Object); //表格的查询条件存储
console.log(searchParams);
const [messageApi] = message.useMessage();
console.log(messageApi);
const [activeTabKey, setActiveTabKey] = useState(1); // **新增状态**
|
|
32
|
|
柏杨
authored
|
33
34
35
|
//选择天数1
const options1 = [
{
|
|
36
37
|
label: '超过7天',
value: 7,
|
柏杨
authored
|
38
|
},
|
|
39
|
{
|
|
40
41
|
label: '超过10天',
value: 10,
|
|
42
|
},
|
柏杨
authored
|
43
44
45
|
];
const options2 = [
{
|
|
46
47
48
49
50
51
52
53
54
55
|
label: '超过21天',
value: 21,
},
{
label: '超过40天',
value: 40,
},
];
const options3 = [
{
|
|
56
57
|
label: '超过20天',
value: 20,
|
柏杨
authored
|
58
59
|
},
{
|
|
60
61
|
label: '超过45天',
value: 45,
|
|
62
63
|
},
];
|
|
64
|
const options4 = [
|
|
65
66
67
68
69
|
{
label: '超过5天',
value: 5,
},
{
|
|
70
71
|
label: '超过15天',
value: 15,
|
|
72
73
|
},
];
|
|
74
|
const options5 = [
|
|
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
{
label: '超过30天',
value: 30,
},
{
label: '超过75天',
value: 75,
},
{
label: '超过90天',
value: 90,
},
{
label: '超过120天',
value: 120,
|
柏杨
authored
|
90
91
|
},
];
|
|
92
93
94
95
|
//选择天数
const [calDate, setCalDate] = useState<string | null>(null);
const [value1, setValue1] = useState(0);
const radioOnChange1 = ({ target: { value } }) => {
|
柏杨
authored
|
96
97
98
|
const currentDate = new Date();
// 创建一个新的日期对象,并在当前日期的基础上加上 daysToAdd 天
const newDate = new Date(currentDate);
|
柏杨
authored
|
99
|
newDate.setDate(currentDate.getDate() - value);
|
柏杨
authored
|
100
|
const formattedDate = format(newDate, 'yyyy-MM-dd HH:mm:ss');
|
|
101
102
|
setCalDate(formattedDate);
setValue1(value);
|
柏杨
authored
|
103
|
};
|
|
104
105
106
107
108
109
110
111
|
function setOriginTime(value) {
const currentDate = new Date();
// 创建一个新的日期对象,并在当前日期的基础上加上 daysToAdd 天
const newDate = new Date(currentDate);
newDate.setDate(currentDate.getDate() - value);
const formattedDate = format(newDate, 'yyyy-MM-dd HH:mm:ss');
return formattedDate;
}
|
柏杨
authored
|
112
|
const [invoiceWarningNum, setInvoiceWarningNum] = useState(0);
|
|
113
|
const [invoiceCreateWarningNum, setInvoiceCreateWarningNum] = useState(0);
|
柏杨
authored
|
114
|
const [invoiceRefundWarningNum, setInvoiceRefundWarningNum] = useState(0);
|
|
115
116
|
const [waitConfirmPayment, setWaitConfirmPayment] = useState(0);
const [waitFeedback, setWaitFeedback] = useState(0);
|
|
117
|
const [staticSalesCode, setStaticSalesCode] = useState(userInfo.username);
|
|
118
|
const [salesCodePermission, setSalesCodePermission] = useState(false);
|
|
119
120
121
|
//修改预警数请求salesCode
const changeSalesCode = () => {
if (salesCodeSelect === undefined) {
|
|
122
|
setStaticSalesCode(userInfo.username);
|
|
123
124
125
126
|
} else {
setStaticSalesCode(salesCodeSelect);
}
};
|
|
127
128
129
130
131
132
133
134
135
|
//选择栏权限
const permission = () => {
const { roles } = userInfo;
const boolean =
roles?.includes('SALES_MANAGER') || roles?.includes('ADMIN');
if (boolean) {
setSalesCodePermission(true);
}
};
|
柏杨
authored
|
136
|
async function getInvoiceWarningNum() {
|
|
137
138
139
140
|
changeSalesCode();
const res = await postServiceOrderWarningOrderStatistics({
data: {
salesCode: staticSalesCode,
|
|
141
|
waitConfirmReiceptStatusDateTimeLe: setOriginTime(options1[0].value),
|
|
142
|
waitInvoicingStatusDateTimeLe: setOriginTime(options2[0].value),
|
|
143
|
waitFeedbackStatusDateTimeLe: setOriginTime(options3[0].value),
|
|
144
|
waitConfirmInvoiceStatusDateTimeLe: setOriginTime(options4[0].value),
|
|
145
|
waitConfirmPaymentStatusDateTimeLe: setOriginTime(options5[0].value),
|
|
146
147
|
},
});
|
柏杨
authored
|
148
|
setInvoiceWarningNum(res.data.waitConfirmInvoice);
|
|
149
|
setInvoiceCreateWarningNum(res.data.waitInvoicing);
|
柏杨
authored
|
150
|
setInvoiceRefundWarningNum(res.data.waitConfirmReceipt);
|
|
151
152
|
setWaitConfirmPayment(res.data.waitConfirmPayment);
setWaitFeedback(res.data.waitFeedback);
|
柏杨
authored
|
153
154
155
156
|
}
useEffect(() => {
//预警订单数
getInvoiceWarningNum();
|
|
157
|
permission();
|
|
158
|
}, [salesCodeSelect]);
|
柏杨
authored
|
159
160
161
|
//biaojiup
// 监听 calDate 变化,触发请求
useEffect(() => {
|
|
162
|
mainTableRef.current?.reload();
|
柏杨
authored
|
163
|
}, [calDate]);
|
柏杨
authored
|
164
|
useEffect(() => {
|
|
165
166
167
168
|
if (
activeTabKey === 1 ||
activeTabKey === 2 ||
activeTabKey === 3 ||
|
|
169
170
|
activeTabKey === 4 ||
activeTabKey === 5
|
|
171
172
|
) {
setValue1(0); // 清空 value1
|
柏杨
authored
|
173
|
}
|
|
174
|
mainTableRef.current?.reload(); // **修改位置:在选择第二个标签时请求request2**
|
柏杨
authored
|
175
|
}, [activeTabKey]);
|
|
176
|
// 修改位置:监听 value1 的变化
|
|
177
178
179
180
181
182
183
184
|
// useEffect(() => {
// // if (value1 === 0) {
// // // 这里执行你希望在 value1 为 0 时的逻辑
// // mainTableRef.current?.reload(); // 重新请求数据
// // }
// }, [value1]); // 添加了 value1 作为依赖
|
|
185
|
useEffect(() => {
|
|
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
// 根据 activeTabKey 设置 value1 为当前选项组的第一个 value
let options;
switch (activeTabKey) {
case 1:
options = options1;
break;
case 2:
options = options2;
break;
case 3:
options = options3;
break;
case 4:
options = options4;
break;
|
|
201
202
203
|
case 5:
options = options5;
break;
|
|
204
205
|
default:
options = []; // 如果没有匹配的选项组,默认为空
|
柏杨
authored
|
206
|
}
|
|
207
208
209
210
211
212
213
214
215
216
|
const firstOptionValue = options[0]?.value || 0; // 获取第一个值
setValue1(firstOptionValue);
const currentDate = new Date();
// 创建一个新的日期对象,并在当前日期的基础上加上 daysToAdd 天
const newDate = new Date(currentDate);
newDate.setDate(currentDate.getDate() - firstOptionValue);
const formattedDate = format(newDate, 'yyyy-MM-dd HH:mm:ss');
setCalDate(formattedDate);
}, [activeTabKey]);
|
柏杨
authored
|
217
218
219
|
//biaojidown2
//取消单选,将时间设为null
const handleSetNull = () => {
|
|
220
|
setCalDate(null); // 这应该会触发 useEffect
|
柏杨
authored
|
221
|
};
|
|
222
223
224
|
const selectSalesCode = (value) => {
setSalesCodeSelect(value); // 这应该会触发 useEffect
};
|
|
225
226
227
228
229
230
|
const warningOptions = [
{
value: 1,
label: (
<span>
确认收货预警
|
|
231
|
<Badge count={invoiceRefundWarningNum} style={{ marginLeft: 8 }} />
|
|
232
233
234
|
</span>
),
},
|
柏杨
authored
|
235
|
{
|
|
236
|
value: 2,
|
柏杨
authored
|
237
238
|
label: (
<span>
|
|
239
240
241
242
243
244
245
246
247
|
开票预警
<Badge count={invoiceCreateWarningNum} style={{ marginLeft: 8 }} />
</span>
),
},
{
value: 3,
label: (
<span>
|
|
248
249
250
251
252
253
|
回访登记预警
<Badge count={waitFeedback} style={{ marginLeft: 8 }} />
</span>
),
},
{
|
|
254
|
value: 4,
|
|
255
256
257
|
label: (
<span>
确认发票预警
|
柏杨
authored
|
258
259
260
|
<Badge count={invoiceWarningNum} style={{ marginLeft: 8 }} />
</span>
),
|
|
261
262
|
},
{
|
|
263
|
value: 5,
|
|
264
265
266
|
label: (
<span>
订单回款预警
|
|
267
|
<Badge count={waitConfirmPayment} style={{ marginLeft: 8 }} />
|
|
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
|
</span>
),
},
];
return (
<div className="order-page-container">
<div id="resizeDiv"></div>
<div key={'activeTabKey'}>
<Radio.Group
options={warningOptions}
onChange={(e) => {
setActiveTabKey(e.target.value);
mainTableRef.current?.reload(); // 重新请求数据
}}
value={activeTabKey}
optionType="button"
/>
</div>
<div style={{ height: '25px' }}></div>
|
|
287
288
289
290
291
292
293
|
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}}
|
|
294
|
>
|
|
295
296
297
298
299
300
301
302
303
304
305
|
{/* 左边的 Radio.Group */}
<span style={{ flex: '1' }}>
{' '}
{/* 修改:设置 flex 属性 */}
<Radio.Group value={value1} onChange={radioOnChange1}>
{(activeTabKey === 1
? options1
: activeTabKey === 2
? options2
: activeTabKey === 3
? options3
|
|
306
307
308
|
: activeTabKey === 4
? options4
: options5
|
|
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
|
).map((option) => (
<Radio
key={option.value}
value={option.value}
onClick={(e) => {
radioOnChange1(
e as unknown as React.ChangeEvent<HTMLInputElement>,
);
handleSetNull();
}}
>
{option.label}
</Radio>
))}
</Radio.Group>
</span>
{/* 右边的 ProFormSelect */}
<span style={{ width: '300px', marginLeft: 'auto', marginTop: '30px' }}>
{' '}
{/* 修改:设置 width 和 marginLeft */}
|
|
330
331
332
333
334
335
336
|
{salesCodePermission && (
<ProFormSelect
name="salesCode"
key="salesCode"
width="200px"
actionRef={mainTableRef}
formRef={mainTableFormRef}
|
|
337
|
initialValue={userInfo.username}
|
|
338
339
340
341
342
343
|
showSearch
label="销售代表"
placeholder="请输入销售代表"
options={salesCodeOptions}
onChange={(_, option) => {
if (option === undefined) {
|
|
344
|
selectSalesCode(userInfo.username);
|
|
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
|
}
// if (option.value !== undefined) {
// selectSalesCode(option.value);
// }
if (option && option.value !== undefined) {
selectSalesCode(option.value);
}
mainTableRef.current?.reload();
}}
request={async () => {
let options = await getSalesCodeOptions();
setSalesCodeOptions(options);
return options;
}}
/>
)}
|
|
361
|
</span>
|
|
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
|
{/* 右边的 ProFormSelect */}
<span style={{ width: '100px', marginLeft: '' }}>
{' '}
<Button
key="out"
onClick={() => {
let initialParams = {};
initialParams.isDeleteQueryOrder = false;
initialParams.flag = 50;
initialParams.current = 1;
initialParams.pageSize = 10;
initialParams.condition = 0;
initialParams.sorted = false;
// 根据activeTabKey动态扩展参数
if (activeTabKey === 1) {
initialParams = {
...initialParams,
orderStatus: 'SHIPPED',
statusDatetimeLe: calDate,
};
} else if (activeTabKey === 2) {
initialParams = {
...initialParams,
warningStatus: 'invoicingWarning',
confirmReceiptDatetimeLe: calDate,
};
} else if (activeTabKey === 3) {
initialParams = {
...initialParams,
warningStatus: 'waitFeedbackWarning',
confirmReceiptDatetimeLe: calDate,
};
} else if (activeTabKey === 4) {
initialParams = {
...initialParams,
warningStatus: 'invoiceConfirmWarning',
invoicingEndTime: calDate,
};
} else if (activeTabKey === 5) {
initialParams = {
...initialParams,
warningStatus: 'paymentReceiptStatusWarning',
paymentNotReceipt: true,
applyTimeLe: calDate,
};
}
messageApi.open({
type: 'loading',
content: '导出中...',
duration: 0,
});
downloadFile(
'/api/service/order/export',
'预警订单.xlsx',
'POST',
initialParams,
() => {
messageApi.destroy();
},
);
}}
>
导出
</Button>
</span>
|
|
427
428
429
|
</div>
<div style={{ height: '15px' }}></div>
|
|
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
|
{/* <OrderList
params={{
...(salesCodePermission && {
salesCode: salesCodeSelect !==
undefined && salesCodeSelect !== null ? salesCodeSelect : userInfo.username
}),
...(activeTabKey === 1 && {
orderStatus: 'SHIPPED',
warningStatus: 'waitConfirmReicept',
statusDatetimeLe: calDate,
}),
...(activeTabKey === 2 && {
warningStatus: 'waitFeedbackWarning',
confirmReceiptDatetimeLe: calDate,
}),
...(activeTabKey === 3 && {
warningStatus: 'invoiceConfirmWarning',
invoicingEndTime: calDate,
}),
...(activeTabKey === 4 && {
warningStatus: 'paymentReceiptStatusWarning',
paymentNotReceipt: true,
applyTimeLe: calDate,
}),
|
|
454
|
}}
|
|
455
456
457
458
459
460
461
|
searchShow={false}
toolbarShow={false} /> */}
<OrderList
paramsNew={(function () {
// 初始化参数
let initialParams = {};
initialParams.isDeleteQueryOrderNow = false;
|
|
462
|
initialParams.salesCode = userInfo.username;
|
|
463
464
465
466
467
|
if (salesCodePermission) {
if (salesCodeSelect !== undefined && salesCodeSelect !== null) {
initialParams.salesCode = salesCodeSelect;
} else {
initialParams.salesCode = userInfo.username;
|
|
468
469
|
}
}
|
|
470
|
// 根据activeTabKey动态扩展参数
|
|
471
|
if (activeTabKey === 1) {
|
|
472
473
474
475
|
initialParams = {
...initialParams,
orderStatus: 'SHIPPED',
warningStatus: 'waitConfirmReicept',
|
|
476
|
statusDatetimeLe: calDate,
|
|
477
478
|
};
} else if (activeTabKey === 2) {
|
|
479
480
481
|
initialParams = {
...initialParams,
warningStatus: 'invoicingWarning',
|
|
482
|
confirmReceiptDatetimeLe: calDate,
|
|
483
484
|
};
} else if (activeTabKey === 3) {
|
|
485
486
487
488
|
initialParams = {
...initialParams,
warningStatus: 'waitFeedbackWarning',
confirmReceiptDatetimeLe: calDate,
|
|
489
490
|
};
} else if (activeTabKey === 4) {
|
|
491
492
493
494
495
496
497
498
499
500
|
initialParams = {
...initialParams,
warningStatus: 'invoiceConfirmWarning',
invoicingEndTime: calDate,
};
} else if (activeTabKey === 5) {
initialParams = {
...initialParams,
warningStatus: 'paymentReceiptStatusWarning',
paymentNotReceipt: true,
|
|
501
|
applyTimeLe: calDate,
|
|
502
503
|
};
}
|
|
504
505
506
507
508
|
// 返回完整的参数对象
return initialParams;
})()}
searchShow={false}
toolbarShow={false}
|
柏杨
authored
|
509
|
/>
|
|
510
|
</div>
|
|
511
512
513
|
);
};
|
sanmu
authored
|
514
|
export default OrderPage;
|