MessageListDrawer.tsx
3.11 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
import { RESPONSE_CODE } from '@/constants/enum';
import { postOrderErpMessageQueryMyMessage } from '@/services';
import { formatDateTime, getUserInfo } from '@/utils';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Badge, Drawer, Flex, List } from 'antd';
import VirtualList from 'rc-virtual-list';
import { useEffect, useState } from 'react';
export default ({ setVisible }) => {
const userInfo = getUserInfo();
const current = useState<number>(1); //当前页码
// const [total, setTotal] = useState(0);
const [messageListData, setMessageListData] = useState<any[]>([]); //列表数据
const ContainerHeight = 400;
/**
* 获取消息列表
*/
async function getMessageListData() {
let res = await postOrderErpMessageQueryMyMessage({
data: { username: userInfo.username, current: current[0] },
});
if (res && res.result === RESPONSE_CODE.SUCCESS) {
setMessageListData([...messageListData, ...res?.data?.data]);
// setTotal(res?.data?.total);
}
}
/**
* 跳转到订单列表
*/
function toOrderList(mainOrderId: any) {
window.open('/order?id=' + mainOrderId, '_blank');
}
const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
// Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
if (
Math.abs(
e.currentTarget.scrollHeight -
e.currentTarget.scrollTop -
ContainerHeight,
) <= 1
) {
getMessageListData();
}
};
useEffect(() => {
getMessageListData();
}, []);
return (
<>
<Drawer
title="消息列表"
onClose={() => {
setVisible(false);
}}
open={true}
width={450}
styles={{ body: { paddingTop: 0 } }}
>
<List>
<VirtualList
data={messageListData}
height={400}
itemHeight={47}
itemKey="email"
onScroll={onScroll}
>
{(item: any) => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={
<Badge dot={item.unreadNum > 0}>
<Avatar shape="square" icon={<UserOutlined />} />
</Badge>
}
/>
<Flex
vertical
className="hover:cursor-pointer"
onClick={() => {
toOrderList(item.mainOrderId);
}}
>
<Flex>
<div>
{item.content}
<span className="text-[#8C8C8C]">
（点击跳转到对应主订单）
</span>
</div>
</Flex>
<Flex>
<span className="text-xs text-[#8C8C8C] pt-1">
{formatDateTime(item.createTime)}
</span>
</Flex>
</Flex>
</List.Item>
)}
</VirtualList>
</List>
</Drawer>
</>
);
};