feat(usr): 前端编辑用户功能（API+抽屉+列表操作列）REQ-USR-002

- usr.ts 追加 UserUpdateReq/Resp + updateUser() - UserFormDrawer 支持 userId/initialData 编辑模式 - UserListPage 追加操作列 + editingUser 状态 - 测试覆盖编辑抽屉开启与 updateUser 调用

feat(usr): 前端编辑用户功能（API+抽屉+列表操作列）REQ-USR-002
- usr.ts 追加 UserUpdateReq/Resp + updateUser() - UserFormDrawer 支持 userId/initialData 编辑模式 - UserListPage 追加操作列 + editingUser 状态 - 测试覆盖编辑抽屉开启与 updateUser 调用
zichun
1 parent 8f600c60
Showing 4 changed files with 147 additions and 33 deletions
frontend/src/api/usr.ts
frontend/src/pages/usr/UserFormDrawer.tsx
frontend/src/pages/usr/UserListPage.tsx
frontend/src/test/UserListPage.test.tsx
@@ -72,3 +72,22 @@ export interface PageVO&lt;T&gt; {
 export function getUserList(params?: UserListQueryReq): Promise<PageVO<UserListItemVO>> {
   return request.get('/usr/users', { params })
 }
+
+export interface UserUpdateReq {
+  userType: string
+  language: string
+  canEditDoc: boolean
+  isDisabled: boolean
+  employeeId: string | null
+  permGroupIds: string[]
+}
+
+export interface UserUpdateResp {
+  userId: string
+  username: string
+  updatedAt: string
+}
+
+export function updateUser(userId: string, req: UserUpdateReq): Promise<UserUpdateResp> {
+  return request.put(`/usr/users/${userId}`, req)
+}
@@ -3,25 +3,50 @@ 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'
+import { getStaffs, getPermissionGroups, createUser, updateUser, StaffVO, PermissionGroupVO, UserCreateReq, UserUpdateReq } from '../../api/usr'
+
+interface InitialData {
+  userType: string
+  language: string
+  canEditDoc: boolean
+  isDisabled: boolean
+  employeeId?: string | null
+}
  
 interface Props {
   open: boolean
   onClose: () => void
   onSuccess: () => void
+  userId?: string
+  initialData?: InitialData
 }
  
-export default function UserFormDrawer({ open, onClose, onSuccess }: Props) {
+export default function UserFormDrawer({ open, onClose, onSuccess, userId, initialData }: 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)
  
+  const isEditMode = !!userId
+
   useEffect(() => {
     if (open) {
       getStaffs().then(setStaffs).catch(() => {})
       getPermissionGroups().then(setPermGroups).catch(() => {})
+      if (isEditMode && initialData) {
+        form.setFieldsValue({
+          userType: initialData.userType,
+          language: initialData.language,
+          canEditDoc: initialData.canEditDoc,
+          isDisabled: initialData.isDisabled,
+          employeeId: initialData.employeeId ?? null,
+        })
+        setSelectedPermIds([])
+      } else {
+        form.resetFields()
+        setSelectedPermIds([])
+      }
     }
   }, [open])
  
@@ -49,17 +74,30 @@ export default function UserFormDrawer({ open, onClose, onSuccess }: Props) {
     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
+      if (isEditMode) {
+        const req: UserUpdateReq = {
+          userType: values.userType,
+          language: values.language,
+          canEditDoc: values.canEditDoc ?? false,
+          isDisabled: values.isDisabled ?? false,
+          employeeId: values.employeeId ?? null,
+          permGroupIds: selectedPermIds
+        }
+        await updateUser(userId, req)
+        message.success('修改用户成功')
+      } else {
+        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('新增用户成功')
       }
-      await createUser(req)
-      message.success('新增用户成功')
       form.resetFields()
       setSelectedPermIds([])
       onSuccess()
@@ -74,7 +112,7 @@ export default function UserFormDrawer({ open, onClose, onSuccess }: Props) {
  
   return (
     <Drawer
-      title="新增用户"
+      title={isEditMode ? '修改用户' : '新增用户'}
       open={open}
       onClose={onClose}
       width={520}
@@ -86,12 +124,16 @@ export default function UserFormDrawer({ open, onClose, onSuccess }: Props) {
       }
     >
       <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>
+        {!isEditMode && (
+          <>
+            <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>
@@ -101,6 +143,11 @@ export default function UserFormDrawer({ open, onClose, onSuccess }: Props) {
         <Form.Item name="canEditDoc" valuePropName="checked">
           <Checkbox>可编辑文档</Checkbox>
         </Form.Item>
+        {isEditMode && (
+          <Form.Item name="isDisabled" valuePropName="checked">
+            <Checkbox>作废</Checkbox>
+          </Form.Item>
+        )}
         <Form.Item name="employeeId" label="关联员工">
           <Select
             allowClear
@@ -23,22 +23,11 @@ const MATCH_TYPES = [
   { 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' },
-]
-
 // 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')
@@ -54,6 +43,32 @@ export default function UserListPage() {
     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>
@@ -100,6 +115,19 @@ export default function UserListPage() {
         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>
   )
 }
@@ -11,7 +11,8 @@ vi.mock(&#39;../api/usr&#39;, () =&gt; ({
   getStaffs: vi.fn().mockResolvedValue([]),
   getPermissionGroups: vi.fn().mockResolvedValue([]),
   createUser: vi.fn(),
-  getUserList: vi.fn().mockResolvedValue({ total: 0, page: 1, pageSize: 20, list: [] })
+  getUserList: vi.fn().mockResolvedValue({ total: 0, page: 1, pageSize: 20, list: [] }),
+  updateUser: vi.fn().mockResolvedValue({ userId: 'u1', username: 'alice', updatedAt: '2026-05-08T10:00:00' })
 }))
  
 vi.mock('../api/request', () => ({
@@ -85,4 +86,23 @@ describe(&#39;UserListPage&#39;, () =&gt; {
     await userEvent.click(screen.getByRole('button', { name: /搜\s*索|搜索/ }))
     await waitFor(() => expect(vi.mocked(getUserList)).toHaveBeenCalledTimes(2))
   })
+
+  it('editMode_submit_callsUpdateUser', async () => {
+    const { getUserList, updateUser } = await import('../api/usr')
+    vi.mocked(getUserList).mockResolvedValue({
+      total: 1, page: 1, pageSize: 20,
+      list: [{
+        sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
+        sLanguage: '中文', bIsDisabled: 0, tLastLoginDate: null,
+        sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
+        sStaffName: null, sDepartment: null
+      }]
+    })
+    renderPage('超级管理员')
+    await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
+    await userEvent.click(screen.getByRole('button', { name: /修改/ }))
+    await waitFor(() => expect(screen.getByText('修改用户')).toBeInTheDocument())
+    await userEvent.click(screen.getByRole('button', { name: /确\s*认/ }))
+    await waitFor(() => expect(vi.mocked(updateUser)).toHaveBeenCalledTimes(1))
+  })
 })