UserFormDrawer.tsx
4.09 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
import { useEffect, useState } from 'react'
import {
Drawer, Form, Input, Select, Checkbox, Button, message, Table
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { getStaffs, getPermissionGroups, createUser, StaffVO, PermissionGroupVO, UserCreateReq } from '../../api/usr'
interface Props {
open: boolean
onClose: () => void
onSuccess: () => void
}
export default function UserFormDrawer({ open, onClose, onSuccess }: Props) {
const [form] = Form.useForm()
const [staffs, setStaffs] = useState<StaffVO[]>([])
const [permGroups, setPermGroups] = useState<PermissionGroupVO[]>([])
const [selectedPermIds, setSelectedPermIds] = useState<string[]>([])
const [submitting, setSubmitting] = useState(false)
useEffect(() => {
if (open) {
getStaffs().then(setStaffs).catch(() => {})
getPermissionGroups().then(setPermGroups).catch(() => {})
}
}, [open])
const permColumns: ColumnsType<PermissionGroupVO> = [
{
title: '',
key: 'select',
width: 40,
render: (_, record) => (
<Checkbox
checked={selectedPermIds.includes(record.sId)}
onChange={e => {
setSelectedPermIds(prev =>
e.target.checked ? [...prev, record.sId] : prev.filter(id => id !== record.sId)
)
}}
/>
)
},
{ title: '权限组', dataIndex: 'sGroupName' },
{ title: '分类', dataIndex: 'sCategory' }
]
async function handleSubmit() {
try {
const values = await form.validateFields()
setSubmitting(true)
const req: UserCreateReq = {
userCode: values.userCode,
username: values.username,
userType: values.userType,
language: values.language,
canEditDoc: values.canEditDoc ?? false,
employeeId: values.employeeId ?? null,
permGroupIds: selectedPermIds
}
await createUser(req)
message.success('新增用户成功')
form.resetFields()
setSelectedPermIds([])
onSuccess()
} catch (e: unknown) {
if (e instanceof Error) {
message.error(e.message)
}
} finally {
setSubmitting(false)
}
}
return (
<Drawer
title="新增用户"
open={open}
onClose={onClose}
width={520}
footer={
<div style={{ textAlign: 'right' }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
<Button type="primary" onClick={handleSubmit} loading={submitting}>确认</Button>
</div>
}
>
<Form form={form} layout="vertical">
<Form.Item name="userCode" label="用户号" rules={[{ required: true, message: '请输入用户号' }]}>
<Input placeholder="请输入用户号" />
</Form.Item>
<Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item name="userType" label="用户类型" rules={[{ required: true }]} initialValue="普通用户">
<Select options={[{ value: '普通用户', label: '普通用户' }, { value: '超级管理员', label: '超级管理员' }]} />
</Form.Item>
<Form.Item name="language" label="语言" rules={[{ required: true }]} initialValue="中文">
<Select options={[{ value: '中文', label: '中文' }, { value: '英文', label: 'English' }, { value: '繁体', label: '繁體' }]} />
</Form.Item>
<Form.Item name="canEditDoc" valuePropName="checked">
<Checkbox>可编辑文档</Checkbox>
</Form.Item>
<Form.Item name="employeeId" label="关联员工">
<Select
allowClear
placeholder="选择员工（可选）"
options={staffs.map(s => ({ value: s.sId, label: s.sStaffName }))}
/>
</Form.Item>
<Form.Item label="权限组">
<Table
size="small"
columns={permColumns}
dataSource={permGroups}
rowKey="sId"
pagination={false}
/>
</Form.Item>
</Form>
</Drawer>
)
}