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   -}