UserListPage.tsx
3.27 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
import { useState, useEffect } from 'react'
import { Table, Select, Input, Button, Space } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { PermButton } from '../../components/PermButton'
import UserFormDrawer from './UserFormDrawer'
import { getUserList } from '../../api/usr'
import type { PageVO, UserListItemVO } from '../../api/usr'
const QUERY_FIELDS = [
{ value: 'username', label: '用户名' },
{ value: 'staffName', label: '员工名' },
{ value: 'userCode', label: '用户号' },
{ value: 'department', label: '部门' },
{ value: 'userType', label: '用户类型' },
{ value: 'disabled', label: '作废' },
{ value: 'lastLoginDate', label: '登录日期' },
{ value: 'creator', label: '制单人' },
]
const MATCH_TYPES = [
{ value: 'contains', label: '包含' },
{ value: 'notContains', label: '不包含' },
{ value: 'equals', label: '等于' },
]
const columns: ColumnsType<UserListItemVO> = [
{ title: '用户名', dataIndex: 'sUsername' },
{ title: '员工名', dataIndex: 'sStaffName' },
{ title: '用户号', dataIndex: 'sUserCode' },
{ title: '部门', dataIndex: 'sDepartment' },
{ title: '用户类型', dataIndex: 'sUserType' },
{ title: '语言', dataIndex: 'sLanguage' },
{ title: '作废', dataIndex: 'bIsDisabled', render: (v: number) => v ? '是' : '否' },
{ title: '登录日期', dataIndex: 'tLastLoginDate' },
{ title: '制单人', dataIndex: 'sCreatorUsername' },
{ title: '制单日期', dataIndex: 'tCreateDate' },
]
export default function UserListPage() {
const [drawerOpen, setDrawerOpen] = useState(false)
const [data, setData] = useState<PageVO<UserListItemVO> | null>(null)
const [queryField, setQueryField] = useState('username')
const [matchType, setMatchType] = useState('contains')
const [queryValue, setQueryValue] = useState('')
const [currentPage, setCurrentPage] = useState(1)
const load = (pg = 1) => {
setCurrentPage(pg)
getUserList({ queryField, matchType, queryValue, page: pg, pageSize: 20 }).then(setData)
}
useEffect(() => {
load()
}, [])
return (
<div>
<Space style={{ marginBottom: 16 }} wrap>
<Select
value={queryField}
onChange={setQueryField}
options={QUERY_FIELDS}
style={{ width: 120 }}
/>
<Select
value={matchType}
onChange={setMatchType}
options={MATCH_TYPES}
style={{ width: 100 }}
/>
<Input
value={queryValue}
onChange={e => setQueryValue(e.target.value)}
placeholder="查询值"
style={{ width: 160 }}
/>
<Button type="primary" onClick={() => load(1)}>搜索</Button>
<PermButton
permission="usr:create"
type="primary"
onClick={() => setDrawerOpen(true)}
>
新增
</PermButton>
</Space>
<Table
dataSource={data?.list ?? []}
columns={columns}
rowKey="sId"
pagination={{
total: data?.total ?? 0,
pageSize: 20,
current: currentPage,
onChange: load,
}}
/>
<UserFormDrawer
open={drawerOpen}
onClose={() => setDrawerOpen(false)}
onSuccess={() => { setDrawerOpen(false); load(1) }}
/>
</div>
)
}