UsersTable.tsx
2.15 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
import { Table, Tag } 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' },
{ title: '员工名', dataIndex: 'employeeName', key: 'employeeName' },
{ title: '用户号', dataIndex: 'userCode', key: 'userCode' },
{ 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' },
{ title: '制单人', dataIndex: 'createdBy', key: 'createdBy' },
{ title: '制单日期', dataIndex: 'createdDate', key: 'createdDate' },
];
return (
<Table<UserListItem>
rowKey="userId"
columns={columns}
dataSource={records}
loading={loading}
onRow={(row) => ({
onClick: () => onRowClick(row),
style: { cursor: 'pointer' },
'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"
/>
);
}