MessageListDrawer.tsx
3.14 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
import { RESPONSE_CODE } from '@/constants/enum';
import { postOrderErpMessageQueryMyMessage } from '@/services';
import { formatDateTime, getUserInfo } from '@/utils';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Badge, Divider, Drawer, Flex, List, Skeleton } from 'antd';
import { useEffect, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
export default ({ setVisible }) => {
const userInfo = getUserInfo();
const current = useState<number>(1); //当前页码
const [total, setTotal] = useState(0);
const [messageListData, setMessageListData] = useState<any[]>([]); //列表数据
/**
* 获取消息列表
*/
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');
}
function renderTarget() {
document.getElementsByClassName('ant-drawer-body')[0].id = 'scrollableDiv';
return document.getElementsByClassName('ant-drawer-body')[0];
}
useEffect(() => {
getMessageListData();
}, []);
return (
<>
<Drawer
title="消息列表"
onClose={() => {
setVisible(false);
}}
open={true}
width={450}
styles={{ body: { paddingTop: 0 } }}
>
<InfiniteScroll
dataLength={messageListData.length}
next={getMessageListData}
hasMore={messageListData.length < total}
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
endMessage={<Divider plain>没有更多消息了 🤐</Divider>}
scrollableTarget={renderTarget}
>
<List
dataSource={messageListData}
renderItem={(item) => (
<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>
)}
/>
</InfiniteScroll>
</Drawer>
</>
);
};