feat(usr): 用户列表搜索表单 + 分页表格 REQ-USR-003

zichun
1 parent 93a18967
Showing 3 changed files with 140 additions and 7 deletions
frontend/src/api/usr.ts
frontend/src/pages/usr/UserListPage.tsx
frontend/src/test/UserListPage.test.tsx
@@ -39,3 +39,36 @@ export function getPermissionGroups(): Promise&lt;PermissionGroupVO[]&gt; {
 export function createUser(req: UserCreateReq): Promise<UserCreateResp> {
   return request.post('/usr/users', req)
 }
+
+export interface UserListQueryReq {
+  queryField?: string
+  matchType?: string
+  queryValue?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface UserListItemVO {
+  sId: string
+  sUsername: string
+  sUserCode: string
+  sUserType: string
+  sLanguage: string
+  bIsDisabled: number
+  tLastLoginDate: string | null
+  sCreatorUsername: string | null
+  tCreateDate: string
+  sStaffName: string | null
+  sDepartment: string | null
+}
+
+export interface PageVO<T> {
+  total: number
+  page: number
+  pageSize: number
+  list: T[]
+}
+
+export function getUserList(params?: UserListQueryReq): Promise<PageVO<UserListItemVO>> {
+  return request.get('/usr/users', { params })
+}
-import { useState } from 'react'
-import { Table } from 'antd'
+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: '等于' },
+]
+
+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' },
+]
 export default function UserListPage() {
   const [drawerOpen, setDrawerOpen] = useState(false)
+  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()
+  }, [])
   return (
     <div>
-      <div style={{ marginBottom: 16 }}>
+      <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"
@@ -16,12 +82,22 @@ export default function UserListPage() {
         >
           新增
         </PermButton>
-      </div>
-      <Table dataSource={[]} columns={[]} rowKey="sId" />
+      </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)}
+        onSuccess={() => { setDrawerOpen(false); load(1) }}
       />
     </div>
   )
@@ -10,7 +10,8 @@ import UserListPage from &#39;../pages/usr/UserListPage&#39;
 vi.mock('../api/usr', () => ({
   getStaffs: vi.fn().mockResolvedValue([]),
   getPermissionGroups: vi.fn().mockResolvedValue([]),
-  createUser: vi.fn()
+  createUser: vi.fn(),
+  getUserList: vi.fn().mockResolvedValue({ total: 0, page: 1, pageSize: 20, list: [] })
 }))
 vi.mock('../api/request', () => ({
@@ -61,4 +62,27 @@ describe(&#39;UserListPage&#39;, () =&gt; {
     await userEvent.click(screen.getByRole('button', { name: /新\s*增/ }))
     await waitFor(() => expect(screen.getByText('新增用户')).toBeInTheDocument())
   })
+
+  it('initialLoad_rendersTableRows', async () => {
+    const { getUserList } = await import('../api/usr')
+    vi.mocked(getUserList).mockResolvedValueOnce({
+      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: '张三', sDepartment: '研发部'
+      }]
+    })
+    renderPage('超级管理员')
+    await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
+    expect(screen.getByText('张三')).toBeInTheDocument()
+  })
+
+  it('searchButton_callsGetUserList', async () => {
+    const { getUserList } = await import('../api/usr')
+    renderPage('超级管理员')
+    await userEvent.click(screen.getByRole('button', { name: /搜\s*索|搜索/ }))
+    await waitFor(() => expect(vi.mocked(getUserList)).toHaveBeenCalledTimes(2))
+  })
 })