UserListPage.tsx
4.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
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: '等于' },
]
// REQ-USR-003: 查询用户
// REQ-USR-002: 修改用户
export default function UserListPage() {
const [drawerOpen, setDrawerOpen] = useState(false)
const [editingUser, setEditingUser] = useState<UserListItemVO | null>(null)
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()
}, [])
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' },
{
title: '操作',
key: 'action',
render: (_, record) => (
<PermButton
permission="usr:edit"
type="link"
onClick={() => setEditingUser(record)}
>
修改
</PermButton>
)
},
]
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) }}
/>
<UserFormDrawer
open={editingUser !== null}
userId={editingUser?.sId}
initialData={editingUser ? {
userType: editingUser.sUserType,
language: editingUser.sLanguage,
canEditDoc: false,
isDisabled: editingUser.bIsDisabled === 1,
employeeId: null,
} : undefined}
onClose={() => setEditingUser(null)}
onSuccess={() => { setEditingUser(null); load(1) }}
/>
</div>
)
}