UsersTable.tsx
2.88 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
import { Table, Tag, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { UserListItem } from '../../api/users';
interface Props {
records: UserListItem[];
loading: boolean;
total: number;
page: number;
size: number;
onRowClick: (row: UserListItem) => void;
onPageChange: (page: number, size: number) => void;
}
export default function UsersTable({
records,
loading,
total,
page,
size,
onRowClick,
onPageChange,
}: Props) {
const columns: ColumnsType<UserListItem> = [
{
title: '序号',
key: 'index',
width: 60,
render: (_: unknown, __: unknown, idx: number) => (page - 1) * size + idx + 1,
},
{ title: '用户名', dataIndex: 'username', key: 'username', sorter: true },
{ title: '员工名', dataIndex: 'employeeName', key: 'employeeName' },
{ title: '用户号', dataIndex: 'userCode', key: 'userCode', sorter: true },
{ title: '部门', dataIndex: 'departmentName', key: 'departmentName' },
{
title: '用户类型',
dataIndex: 'userType',
key: 'userType',
render: (v: string) => (v === 'SUPER_ADMIN' ? '超级管理员' : '普通用户'),
},
{ title: '语言', dataIndex: 'language', key: 'language' },
{
title: '作废',
dataIndex: 'isDeleted',
key: 'isDeleted',
render: (v: boolean) =>
v ? <Tag color="error">作废</Tag> : <Tag color="success">启用</Tag>,
},
{ title: '登录日期', dataIndex: 'lastLoginDate', key: 'lastLoginDate', sorter: true },
{ title: '制单人', dataIndex: 'createdBy', key: 'createdBy' },
{ title: '制单日期', dataIndex: 'createdDate', key: 'createdDate', sorter: true },
{
title: '操作',
key: 'action',
width: 80,
render: (_: unknown, row: UserListItem) => (
<Button
type="link"
size="small"
data-testid={`edit-link-${row.userId}`}
onClick={(e) => {
e.stopPropagation();
onRowClick(row);
}}
>
编辑
</Button>
),
},
];
return (
<Table<UserListItem>
rowKey="userId"
columns={columns}
dataSource={records}
loading={loading}
onRow={(row) => ({
onClick: () => onRowClick(row),
onKeyDown: (e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onRowClick(row);
}
},
style: { cursor: 'pointer' },
tabIndex: 0,
role: 'button',
'aria-label': `查看用户 ${row.username}`,
'data-testid': `user-row-${row.userId}`,
})}
pagination={{
current: page,
pageSize: size,
total,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50', '100'],
onChange: onPageChange,
}}
data-testid="users-table"
/>
);
}