feat(client): 用户管理页 + E2E 门禁（E15/E16/E18）
- 新增系统用户管理页（创建/禁用启用/重置密码/角色） - 引入 Playwright E2E：覆盖登录-报销-待办-票据-OCR-支付-登出 - 新增 ci-e2e 工作流（PR + nightly）
这个提交包含在：
@@ -0,0 +1,503 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
import { isApiError } from "../api/types";
|
||||
import {
|
||||
createUser,
|
||||
disableUser,
|
||||
enableUser,
|
||||
fetchUsers,
|
||||
resetUserPassword,
|
||||
setUserRoles,
|
||||
type UserStatus,
|
||||
type UserSummary,
|
||||
} from "../api/users";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card } from "../components/ui/card";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../components/ui/dialog";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Label } from "../components/ui/label";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
const ROLE_OPTIONS: Array<{ code: string; label: string }> = [
|
||||
{ code: "employee", label: "employee" },
|
||||
{ code: "manager", label: "manager" },
|
||||
{ code: "ceo", label: "ceo" },
|
||||
{ code: "finance", label: "finance" },
|
||||
{ code: "finance_mgr", label: "finance_mgr" },
|
||||
{ code: "administration", label: "administration" },
|
||||
{ code: "hr", label: "hr" },
|
||||
{ code: "admin", label: "admin" },
|
||||
];
|
||||
|
||||
function formatRoleCodes(roleCodes: string[]) {
|
||||
return roleCodes.length ? roleCodes.join(", ") : "-";
|
||||
}
|
||||
|
||||
export function UserManagementPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [status, setStatus] = useState<UserStatus | "">("");
|
||||
const [q, setQ] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const [error, setError] = useState("");
|
||||
const [resetResult, setResetResult] = useState<{ userId: string; password: string } | null>(null);
|
||||
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [employeeNo, setEmployeeNo] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [createRoles, setCreateRoles] = useState<Set<string>>(() => new Set(["employee"]));
|
||||
|
||||
const [roleDialogUser, setRoleDialogUser] = useState<UserSummary | null>(null);
|
||||
const [roleDraft, setRoleDraft] = useState<Set<string>>(() => new Set());
|
||||
|
||||
const listQuery = useQuery({
|
||||
queryKey: ["users", "list", status, q, page],
|
||||
queryFn: () => fetchUsers({ page, pageSize: PAGE_SIZE, status: status || undefined, q: q || undefined }),
|
||||
});
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
|
||||
|
||||
const createPayload = useMemo(() => {
|
||||
return {
|
||||
employeeNo: employeeNo.trim(),
|
||||
name: name.trim(),
|
||||
phone: phone.trim(),
|
||||
email: email.trim(),
|
||||
password: password,
|
||||
roles: Array.from(createRoles),
|
||||
};
|
||||
}, [createRoles, email, employeeNo, name, password, phone]);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () => createUser(createPayload),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["users"] });
|
||||
setCreateOpen(false);
|
||||
setEmployeeNo("");
|
||||
setName("");
|
||||
setPhone("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setCreateRoles(new Set(["employee"]));
|
||||
setError("");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
setError(err instanceof Error ? err.message : "创建用户失败");
|
||||
},
|
||||
});
|
||||
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: async (item: UserSummary) => {
|
||||
if (item.status === "active") {
|
||||
return disableUser(item.id);
|
||||
}
|
||||
return enableUser(item.id);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["users"] });
|
||||
setError("");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
setError(err instanceof Error ? err.message : "更新用户状态失败");
|
||||
},
|
||||
});
|
||||
|
||||
const resetMutation = useMutation({
|
||||
mutationFn: async (item: UserSummary) => resetUserPassword(item.id),
|
||||
onSuccess: async (data) => {
|
||||
setResetResult({ userId: data.id, password: data.oneTimePassword });
|
||||
await queryClient.invalidateQueries({ queryKey: ["users"] });
|
||||
setError("");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
setError(err instanceof Error ? err.message : "重置密码失败");
|
||||
},
|
||||
});
|
||||
|
||||
const rolesMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!roleDialogUser) {
|
||||
throw new Error("missing user");
|
||||
}
|
||||
return setUserRoles(roleDialogUser.id, Array.from(roleDraft));
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["users"] });
|
||||
setRoleDialogUser(null);
|
||||
setRoleDraft(new Set());
|
||||
setError("");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
setError(err instanceof Error ? err.message : "更新角色失败");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="系统用户管理"
|
||||
subtitle="创建/启用/禁用账号，重置密码并分配角色（仅试运行最小运营）。"
|
||||
actions={
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button data-testid="users-create-open" type="button">
|
||||
新建用户
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建用户</DialogTitle>
|
||||
<DialogDescription>请填写基础信息与初始密码（满足密码策略）。</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="employeeNo">工号</Label>
|
||||
<Input
|
||||
id="employeeNo"
|
||||
data-testid="users-create-employeeNo"
|
||||
value={employeeNo}
|
||||
onChange={(e) => setEmployeeNo(e.target.value)}
|
||||
placeholder="E1001"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">姓名</Label>
|
||||
<Input
|
||||
id="name"
|
||||
data-testid="users-create-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="张三"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone">手机号</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
data-testid="users-create-phone"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
placeholder="13800000001"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">邮箱</Label>
|
||||
<Input
|
||||
id="email"
|
||||
data-testid="users-create-email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="[email protected]"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="password">初始密码</Label>
|
||||
<Input
|
||||
id="password"
|
||||
data-testid="users-create-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="至少12位，含大小写与数字"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label>角色</Label>
|
||||
<div className="flex flex-wrap gap-3 text-sm">
|
||||
{ROLE_OPTIONS.map((item) => (
|
||||
<label className="flex items-center gap-2" key={item.code}>
|
||||
<input
|
||||
data-testid={`users-create-role-${item.code}`}
|
||||
type="checkbox"
|
||||
checked={createRoles.has(item.code)}
|
||||
onChange={(event) => {
|
||||
setCreateRoles((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (event.target.checked) {
|
||||
next.add(item.code);
|
||||
} else {
|
||||
next.delete(item.code);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span>{item.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
data-testid="users-create-submit"
|
||||
disabled={
|
||||
createMutation.isPending ||
|
||||
!createPayload.employeeNo ||
|
||||
!createPayload.name ||
|
||||
!createPayload.phone ||
|
||||
!createPayload.email ||
|
||||
!createPayload.password ||
|
||||
createPayload.roles.length < 1
|
||||
}
|
||||
onClick={() => createMutation.mutate()}
|
||||
type="button"
|
||||
>
|
||||
{createMutation.isPending ? "创建中..." : "创建"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600" data-testid="users-error">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{resetResult ? (
|
||||
<p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800" data-testid="users-reset-result">
|
||||
已重置密码（user={resetResult.userId}），一次性口令：<span className="font-mono">{resetResult.password}</span>
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<Card className="space-y-4 p-6">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
data-testid="users-search"
|
||||
value={q}
|
||||
onChange={(e) => {
|
||||
setQ(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder="搜索工号/姓名/手机号/邮箱"
|
||||
/>
|
||||
<select
|
||||
className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
data-testid="users-status-filter"
|
||||
value={status}
|
||||
onChange={(e) => {
|
||||
setStatus(e.target.value as UserStatus | "");
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
<option value="">全部状态</option>
|
||||
<option value="active">active</option>
|
||||
<option value="archived">archived</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
|
||||
{listQuery.isError ? (
|
||||
<p className="text-sm text-red-600">
|
||||
{isApiError(listQuery.error)
|
||||
? `${listQuery.error.code}: ${mapApiErrorMessage(
|
||||
listQuery.error.code,
|
||||
listQuery.error.details,
|
||||
listQuery.error.message,
|
||||
)}`
|
||||
: "加载用户列表失败"}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="rounded-lg border border-slate-200">
|
||||
<Table data-testid="users-table">
|
||||
<TableHeader>
|
||||
<tr>
|
||||
<TableHead>工号/姓名</TableHead>
|
||||
<TableHead>联系方式</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>角色</TableHead>
|
||||
<TableHead className="w-56">操作</TableHead>
|
||||
</tr>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{(listQuery.data?.items ?? []).length ? (
|
||||
listQuery.data?.items.map((item) => (
|
||||
<TableRow data-testid="users-row" key={item.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-slate-900">
|
||||
{item.employeeNo} / {item.name}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 font-mono">{item.id}</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
<div>{item.email}</div>
|
||||
<div className="text-slate-500">{item.phone}</div>
|
||||
</TableCell>
|
||||
<TableCell>{item.status}</TableCell>
|
||||
<TableCell className="text-xs">{formatRoleCodes(item.roleCodes)}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="users-toggle"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={toggleMutation.isPending}
|
||||
onClick={() => toggleMutation.mutate(item)}
|
||||
type="button"
|
||||
>
|
||||
{item.status === "active" ? "禁用" : "启用"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
data-testid="users-reset-password"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={resetMutation.isPending}
|
||||
onClick={() => resetMutation.mutate(item)}
|
||||
type="button"
|
||||
>
|
||||
重置密码
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
data-testid="users-edit-roles"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={rolesMutation.isPending}
|
||||
onClick={() => {
|
||||
setRoleDialogUser(item);
|
||||
setRoleDraft(new Set(item.roleCodes));
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
角色
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="py-3 text-slate-500">
|
||||
暂无数据
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>
|
||||
第 {page} / {totalPages} 页
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
data-testid="users-prev-page"
|
||||
variant="secondary"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage((current) => Math.max(1, current - 1))}
|
||||
type="button"
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<Button
|
||||
data-testid="users-next-page"
|
||||
variant="secondary"
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
|
||||
type="button"
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Dialog
|
||||
open={Boolean(roleDialogUser)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setRoleDialogUser(null);
|
||||
setRoleDraft(new Set());
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>设置角色</DialogTitle>
|
||||
<DialogDescription>
|
||||
当前用户：{roleDialogUser?.employeeNo} / {roleDialogUser?.name}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-sm">
|
||||
{ROLE_OPTIONS.map((item) => (
|
||||
<label className="flex items-center gap-2" key={item.code}>
|
||||
<input
|
||||
data-testid={`users-role-${item.code}`}
|
||||
type="checkbox"
|
||||
checked={roleDraft.has(item.code)}
|
||||
onChange={(event) => {
|
||||
setRoleDraft((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (event.target.checked) {
|
||||
next.add(item.code);
|
||||
} else {
|
||||
next.delete(item.code);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span>{item.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
disabled={rolesMutation.isPending}
|
||||
onClick={() => {
|
||||
setRoleDialogUser(null);
|
||||
setRoleDraft(new Set());
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
data-testid="users-role-save"
|
||||
disabled={rolesMutation.isPending || roleDraft.size < 1}
|
||||
onClick={() => rolesMutation.mutate()}
|
||||
type="button"
|
||||
>
|
||||
{rolesMutation.isPending ? "保存中..." : "保存"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户