index.tsx
2.18 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
// REQ-USR-003: 用户列表页面容器（组合工具栏/筛选栏/表格+分页，对接 GET /api/usr/users）
import { useState } from 'react';
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { UserVO } from '../../../api/types';
import UserToolbar from './UserToolbar';
import UserFilterBar from './UserFilterBar';
import UserTable from './UserTable';
import { useUserList } from './useUserList';
import { TEXT_ERROR } from './constants';
import styles from './UserList.module.css';
export default function UserListPage() {
const navigate = useNavigate();
const {
list,
total,
loading,
error,
query,
exporting,
search,
refresh,
clear,
setQueryField,
setMatchType,
setQueryValue,
changePage,
exportExcel,
} = useUserList();
// 单选标记仅服务「进单据」语义，不参与查询（spec D8）
const [selectedRowKey, setSelectedRowKey] = useState<number | null>(null);
const handleRowDoubleClick = (row: UserVO) => {
navigate('/usr/users/' + row.id); // BR12
};
return (
<div className={styles.page}>
<UserToolbar
onRefresh={refresh}
onAdd={() => navigate('/usr/users/new')} // BR13
onExport={() => void exportExcel()}
exporting={exporting}
loading={loading}
/>
<UserFilterBar
query={query}
onChangeQueryField={setQueryField}
onChangeMatchType={setMatchType}
onChangeQueryValue={setQueryValue}
onSearch={search}
onClear={clear}
/>
{error ? (
<div className={styles.errorBox} data-testid="userlist-error">
<span className={styles.errorText}>{TEXT_ERROR}</span>
<Button type="primary" onClick={() => refresh()}>
点击重试
</Button>
</div>
) : (
<UserTable
rows={list}
loading={loading}
total={total}
pageNum={query.pageNum}
pageSize={query.pageSize}
onChangePage={changePage}
onRowDoubleClick={handleRowDoubleClick}
selectedRowKey={selectedRowKey}
onSelectRow={setSelectedRowKey}
/>
)}
</div>
);
}