Commit e792984dbd0363b8a121f8a32dccf4a7726d210b

Authored by zichun
1 parent 777215f3

chore(usr): delete UserFormDrawer replaced by UserDetailPage

frontend/src/pages/usr/UserFormDrawer.tsx deleted
1 -import { useEffect, useState } from 'react'  
2 -import {  
3 - Drawer, Form, Input, Select, Checkbox, Button, message, Table  
4 -} from 'antd'  
5 -import type { ColumnsType } from 'antd/es/table'  
6 -import { getStaffs, getPermissionGroups, createUser, updateUser, StaffVO, PermissionGroupVO, UserCreateReq, UserUpdateReq } from '../../api/usr'  
7 -  
8 -interface InitialData {  
9 - userType: string  
10 - language: string  
11 - canEditDoc: boolean  
12 - isDisabled: boolean  
13 - employeeId?: string | null  
14 - permGroupIds?: string[]  
15 -}  
16 -  
17 -interface Props {  
18 - open: boolean  
19 - onClose: () => void  
20 - onSuccess: () => void  
21 - userId?: string  
22 - initialData?: InitialData  
23 -}  
24 -  
25 -export default function UserFormDrawer({ open, onClose, onSuccess, userId, initialData }: Props) {  
26 - const [form] = Form.useForm()  
27 - const [staffs, setStaffs] = useState<StaffVO[]>([])  
28 - const [permGroups, setPermGroups] = useState<PermissionGroupVO[]>([])  
29 - const [selectedPermIds, setSelectedPermIds] = useState<string[]>([])  
30 - const [submitting, setSubmitting] = useState(false)  
31 -  
32 - const isEditMode = !!userId  
33 -  
34 - useEffect(() => {  
35 - if (open) {  
36 - getStaffs().then(setStaffs).catch(() => {})  
37 - getPermissionGroups().then(setPermGroups).catch(() => {})  
38 - if (isEditMode && initialData) {  
39 - form.setFieldsValue({  
40 - userType: initialData.userType,  
41 - language: initialData.language,  
42 - canEditDoc: initialData.canEditDoc,  
43 - isDisabled: initialData.isDisabled,  
44 - employeeId: initialData.employeeId ?? null,  
45 - })  
46 - setSelectedPermIds(initialData.permGroupIds ?? [])  
47 - } else {  
48 - form.resetFields()  
49 - setSelectedPermIds([])  
50 - }  
51 - }  
52 - }, [open])  
53 -  
54 - const permColumns: ColumnsType<PermissionGroupVO> = [  
55 - {  
56 - title: '',  
57 - key: 'select',  
58 - width: 40,  
59 - render: (_, record) => (  
60 - <Checkbox  
61 - checked={selectedPermIds.includes(record.sId)}  
62 - onChange={e => {  
63 - setSelectedPermIds(prev =>  
64 - e.target.checked ? [...prev, record.sId] : prev.filter(id => id !== record.sId)  
65 - )  
66 - }}  
67 - />  
68 - )  
69 - },  
70 - { title: '权限组', dataIndex: 'sGroupName' },  
71 - { title: '分类', dataIndex: 'sCategory' }  
72 - ]  
73 -  
74 - async function handleSubmit() {  
75 - try {  
76 - const values = await form.validateFields()  
77 - setSubmitting(true)  
78 - if (isEditMode) {  
79 - const req: UserUpdateReq = {  
80 - userType: values.userType,  
81 - language: values.language,  
82 - canEditDoc: values.canEditDoc ?? false,  
83 - isDisabled: values.isDisabled ?? false,  
84 - employeeId: values.employeeId ?? null,  
85 - permGroupIds: selectedPermIds  
86 - }  
87 - await updateUser(userId, req)  
88 - message.success('修改用户成功')  
89 - } else {  
90 - const req: UserCreateReq = {  
91 - userCode: values.userCode,  
92 - username: values.username,  
93 - userType: values.userType,  
94 - language: values.language,  
95 - canEditDoc: values.canEditDoc ?? false,  
96 - employeeId: values.employeeId ?? null,  
97 - permGroupIds: selectedPermIds  
98 - }  
99 - await createUser(req)  
100 - message.success('新增用户成功')  
101 - }  
102 - form.resetFields()  
103 - setSelectedPermIds([])  
104 - onSuccess()  
105 - } catch (e: unknown) {  
106 - if (e instanceof Error) {  
107 - message.error(e.message)  
108 - }  
109 - } finally {  
110 - setSubmitting(false)  
111 - }  
112 - }  
113 -  
114 - return (  
115 - <Drawer  
116 - title={isEditMode ? '修改用户' : '新增用户'}  
117 - open={open}  
118 - onClose={onClose}  
119 - width={520}  
120 - footer={  
121 - <div style={{ textAlign: 'right' }}>  
122 - <Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>  
123 - <Button type="primary" onClick={handleSubmit} loading={submitting}>确认</Button>  
124 - </div>  
125 - }  
126 - >  
127 - <Form form={form} layout="vertical">  
128 - {!isEditMode && (  
129 - <>  
130 - <Form.Item name="userCode" label="用户号" rules={[{ required: true, message: '请输入用户号' }]}>  
131 - <Input placeholder="请输入用户号" />  
132 - </Form.Item>  
133 - <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>  
134 - <Input placeholder="请输入用户名" />  
135 - </Form.Item>  
136 - </>  
137 - )}  
138 - <Form.Item name="userType" label="用户类型" rules={[{ required: true }]} initialValue="普通用户">  
139 - <Select options={[{ value: '普通用户', label: '普通用户' }, { value: '超级管理员', label: '超级管理员' }]} />  
140 - </Form.Item>  
141 - <Form.Item name="language" label="语言" rules={[{ required: true }]} initialValue="中文">  
142 - <Select options={[{ value: '中文', label: '中文' }, { value: '英文', label: 'English' }, { value: '繁体', label: '繁體' }]} />  
143 - </Form.Item>  
144 - <Form.Item name="canEditDoc" valuePropName="checked">  
145 - <Checkbox>可编辑文档</Checkbox>  
146 - </Form.Item>  
147 - {isEditMode && (  
148 - <Form.Item name="isDisabled" valuePropName="checked">  
149 - <Checkbox>作废</Checkbox>  
150 - </Form.Item>  
151 - )}  
152 - <Form.Item name="employeeId" label="关联员工">  
153 - <Select  
154 - allowClear  
155 - placeholder="选择员工(可选)"  
156 - options={staffs.map(s => ({ value: s.sId, label: s.sStaffName }))}  
157 - />  
158 - </Form.Item>  
159 - <Form.Item label="权限组">  
160 - <Table  
161 - size="small"  
162 - columns={permColumns}  
163 - dataSource={permGroups}  
164 - rowKey="sId"  
165 - pagination={false}  
166 - />  
167 - </Form.Item>  
168 - </Form>  
169 - </Drawer>  
170 - )  
171 -}