HistoryModal.tsx
3.7 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
import { postServiceOrderQueryHistoryOrderRecord } from '@/services';
import { enumValueToLabel, formatDateTime } from '@/utils';
import { Button, Col, Empty, Flex, Modal, Row, Spin } from 'antd';
import { useEffect, useState } from 'react';
import { HISTORY_OPT_TYPE, ORDER_STATUS_OPTIONS } from '../constant';
export default ({ subOrders, isCancelledOrder, onClose }) => {
let subOrderIds = subOrders?.map((subOrder: any) => {
return subOrder.id;
});
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
let i = 0;
const handleOk = () => {
onClose();
};
const getHistory = async () => {
let res = await postServiceOrderQueryHistoryOrderRecord({
data: { ids: subOrderIds, isDeleteQueryOrder: isCancelledOrder },
});
setData(res.data);
setLoading(false);
};
useEffect(() => {
getHistory();
}, []);
const handleCancel = () => {
onClose();
};
return (
<>
<Modal
title="订单历史记录"
open
width={650}
onOk={handleOk}
onCancel={handleCancel}
footer={() => (
<>
<Button onClick={handleCancel}>返回</Button>
</>
)}
>
<Spin tip="加载中" spinning={loading}>
<Row className="max-h-[500px] overflow-auto" gutter={[0, 14]}>
{data.map((item) => {
return (
<Col span={24} key={i}>
<Flex vertical>
<div>
<span className="py-2 text-[#5E5E5E]">
{'商品' + ++i}
</span>
<span className="text-[#8C8C8C]">
-【{subOrders[i - 1].productName}】
</span>
</div>
<Flex vertical>
{item.historySubOrderRecordDto?.map((history) => {
return (
<div className="py-1" key={history.id}>
<span className="pr-2 text-[#5E5E5E]">
{formatDateTime(history.createTime)}
</span>
<span className="text-[#3b83e5]">
{history.createByName}
</span>
进行了
<span className="text-[#3b83e5]">
{HISTORY_OPT_TYPE.get(history.record)}
</span>
，
{history.record === 'INVOICING' ? '开票状态为' : ''}
{history.record !== 'INVOICING' ? '订单状态为' : ''}
：
<span className="text-[#3b83e5]">
{history.status === 'INVOICING' ? '已开票' : ''}
{history.status === null ? '已作废' : ''}
{history.status !== null &&
history.status !== 'INVOICING'
? enumValueToLabel(
history.status,
ORDER_STATUS_OPTIONS,
)
: ''}
</span>
</div>
);
})}
</Flex>
</Flex>
</Col>
);
})}
</Row>
{data?.length <= 0 ? (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
) : (
''
)}
</Spin>
</Modal>
</>
);
};