feat(usr): 前端 UserListPage + UserFormDrawer + usr.ts + PermButton REQ-USR-001

zichun
1 parent ff5af471
Showing 6 changed files with 270 additions and 0 deletions
frontend/src/App.tsx
frontend/src/api/usr.ts
frontend/src/components/PermButton.tsx
frontend/src/pages/usr/UserFormDrawer.tsx
frontend/src/pages/usr/UserListPage.tsx
frontend/src/test/UserListPage.test.tsx
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { useAppSelector } from './store/hooks'
 import LoginPage from './pages/usr/LoginPage'
+import UserListPage from './pages/usr/UserListPage'
 function PrivateRoute({ children }: { children: React.ReactNode }) {
   const accessToken = useAppSelector(s => s.auth.accessToken)
@@ -12,6 +13,7 @@ export default function App() {
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route path="/" element={<PrivateRoute><div>主页（待实现）</div></PrivateRoute>} />
+      <Route path="/usr/users" element={<PrivateRoute><UserListPage /></PrivateRoute>} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   )
+import request from './request'
+
+export interface StaffVO {
+  sId: string
+  sStaffName: string
+}
+
+export interface PermissionGroupVO {
+  sId: string
+  sGroupCode: string
+  sGroupName: string
+  sCategory: string | null
+}
+
+export interface UserCreateReq {
+  userCode: string
+  username: string
+  userType: '普通用户' | '超级管理员'
+  language: '中文' | '英文' | '繁体'
+  canEditDoc?: boolean
+  employeeId?: string | null
+  permGroupIds?: string[]
+}
+
+export interface UserCreateResp {
+  userId: string
+  userCode: string
+  username: string
+}
+
+export function getStaffs(): Promise<StaffVO[]> {
+  return request.get('/usr/users/staffs')
+}
+
+export function getPermissionGroups(): Promise<PermissionGroupVO[]> {
+  return request.get('/usr/users/permission-groups')
+}
+
+export function createUser(req: UserCreateReq): Promise<UserCreateResp> {
+  return request.post('/usr/users', req)
+}
+import { Button, ButtonProps } from 'antd'
+import { useAppSelector } from '../store/hooks'
+
+interface PermButtonProps extends ButtonProps {
+  permission: string
+}
+
+export function PermButton({ permission: _permission, children, ...props }: PermButtonProps) {
+  const userType = useAppSelector(s => s.auth.userInfo?.userType)
+  if (userType !== '超级管理员') return null
+  return <Button {...props}>{children}</Button>
+}
+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>
+  )
+}
+import { useState } from 'react'
+import { Table } from 'antd'
+import { PermButton } from '../../components/PermButton'
+import UserFormDrawer from './UserFormDrawer'
+
+export default function UserListPage() {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <PermButton
+          permission="usr:create"
+          type="primary"
+          onClick={() => setDrawerOpen(true)}
+        >
+          新增
+        </PermButton>
+      </div>
+      <Table dataSource={[]} columns={[]} rowKey="sId" />
+      <UserFormDrawer
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        onSuccess={() => setDrawerOpen(false)}
+      />
+    </div>
+  )
+}
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Provider } from 'react-redux'
+import { MemoryRouter } from 'react-router-dom'
+import { configureStore } from '@reduxjs/toolkit'
+import authReducer from '../store/slices/authSlice'
+import UserListPage from '../pages/usr/UserListPage'
+
+vi.mock('../api/usr', () => ({
+  getStaffs: vi.fn().mockResolvedValue([]),
+  getPermissionGroups: vi.fn().mockResolvedValue([]),
+  createUser: vi.fn()
+}))
+
+vi.mock('../api/request', () => ({
+  default: { get: vi.fn(), post: vi.fn() }
+}))
+
+function makeStore(userType: string) {
+  const store = configureStore({ reducer: { auth: authReducer } })
+  store.dispatch({
+    type: 'auth/setCredentials',
+    payload: {
+      accessToken: 'test-token',
+      refreshToken: 'test-refresh',
+      userInfo: { userId: 'u1', username: 'admin', userType, language: '中文', brandId: 'b1' }
+    }
+  })
+  return store
+}
+
+function renderPage(userType: string) {
+  const store = makeStore(userType)
+  return render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <UserListPage />
+      </MemoryRouter>
+    </Provider>
+  )
+}
+
+describe('UserListPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('superAdmin_seesNewButton', () => {
+    renderPage('超级管理员')
+    expect(screen.getByRole('button', { name: /新\s*增/ })).toBeInTheDocument()
+  })
+
+  it('normalUser_doesNotSeeNewButton', () => {
+    renderPage('普通用户')
+    expect(screen.queryByRole('button', { name: /新\s*增/ })).not.toBeInTheDocument()
+  })
+
+  it('clickNewButton_opensDrawer', async () => {
+    renderPage('超级管理员')
+    await userEvent.click(screen.getByRole('button', { name: /新\s*增/ }))
+    await waitFor(() => expect(screen.getByText('新增用户')).toBeInTheDocument())
+  })
+})