feat(client): 委派管理页最小运营闭环（E7）
- 新增委派 API 封装与委派管理页面（创建/列表/撤销） - 增加菜单入口与路由守卫（expense.proxy_manage）
这个提交包含在：
@@ -0,0 +1,262 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
import { isApiError } from "../api/types";
|
||||
import { createDelegation, fetchMyDelegations, revokeDelegation } from "../api/delegations";
|
||||
import { fetchWorkflowApprovers } from "../api/workflow";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card } from "../components/ui/card";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
||||
|
||||
export function DelegationsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [status, setStatus] = useState<"active" | "scheduled" | "expired" | "revoked" | "all">("active");
|
||||
const [delegateEmployeeId, setDelegateEmployeeId] = useState("");
|
||||
const [scope, setScope] = useState<"all" | "reimbursement_submit">("all");
|
||||
const [validTo, setValidTo] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const listQuery = useQuery({
|
||||
queryKey: ["delegations", "mine", status],
|
||||
queryFn: () => fetchMyDelegations(status),
|
||||
});
|
||||
|
||||
const approversQuery = useQuery({
|
||||
queryKey: ["workflow", "approvers", "delegations"],
|
||||
queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
|
||||
});
|
||||
|
||||
const delegateOptions = useMemo(() => {
|
||||
const items = approversQuery.data?.items ?? [];
|
||||
return items.map((item) => ({
|
||||
id: item.id,
|
||||
label: `${item.name} (${item.employeeNo})`,
|
||||
}));
|
||||
}, [approversQuery.data?.items]);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
createDelegation({
|
||||
delegateEmployeeId,
|
||||
scope,
|
||||
validTo: validTo ? new Date(validTo).toISOString() : undefined,
|
||||
}),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["delegations"] });
|
||||
setError("");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
setError(err instanceof Error ? err.message : "创建委派失败");
|
||||
},
|
||||
});
|
||||
|
||||
const revokeMutation = useMutation({
|
||||
mutationFn: (delegationId: string) => revokeDelegation(delegationId),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["delegations"] });
|
||||
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="创建委派、查看我发起/我接收的委派，并支持撤销。" />
|
||||
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
|
||||
) : null}
|
||||
|
||||
<Card className="space-y-4 p-6">
|
||||
<h3 className="text-base font-semibold text-slate-900">创建委派</h3>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<label className="space-y-1 text-sm">
|
||||
<span className="font-medium text-slate-700">委派给（审批人候选）</span>
|
||||
<select
|
||||
className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
data-testid="delegations-create-delegate"
|
||||
onChange={(event) => setDelegateEmployeeId(event.target.value)}
|
||||
value={delegateEmployeeId}
|
||||
>
|
||||
<option value="">请选择目标员工</option>
|
||||
{delegateOptions.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-xs text-slate-500">
|
||||
说明：当前 MVP 未接入员工搜索，这里先复用“转审候选”列表作为可选目标。
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm">
|
||||
<span className="font-medium text-slate-700">范围</span>
|
||||
<select
|
||||
className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
data-testid="delegations-create-scope"
|
||||
onChange={(event) => setScope(event.target.value as "all" | "reimbursement_submit")}
|
||||
value={scope}
|
||||
>
|
||||
<option value="all">all</option>
|
||||
<option value="reimbursement_submit">reimbursement_submit</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm md:col-span-2">
|
||||
<span className="font-medium text-slate-700">有效期结束（可选）</span>
|
||||
<Input
|
||||
data-testid="delegations-create-valid-to"
|
||||
onChange={(event) => setValidTo(event.target.value)}
|
||||
type="datetime-local"
|
||||
value={validTo}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
data-testid="delegations-create-submit"
|
||||
disabled={!delegateEmployeeId || createMutation.isPending}
|
||||
onClick={() => createMutation.mutate()}
|
||||
type="button"
|
||||
>
|
||||
{createMutation.isPending ? "创建中..." : "创建委派"}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="space-y-4 p-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h3 className="text-base font-semibold text-slate-900">我的委派</h3>
|
||||
<select
|
||||
className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
data-testid="delegations-status-filter"
|
||||
onChange={(event) =>
|
||||
setStatus(event.target.value as "active" | "scheduled" | "expired" | "revoked" | "all")
|
||||
}
|
||||
value={status}
|
||||
>
|
||||
<option value="active">active</option>
|
||||
<option value="scheduled">scheduled</option>
|
||||
<option value="expired">expired</option>
|
||||
<option value="revoked">revoked</option>
|
||||
<option value="all">all</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}
|
||||
|
||||
{listQuery.data ? (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-medium text-slate-800">我发起的委派</p>
|
||||
<div className="rounded-lg border border-slate-200">
|
||||
<Table data-testid="delegations-initiated-table">
|
||||
<TableHeader>
|
||||
<tr>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>delegate</TableHead>
|
||||
<TableHead>scope</TableHead>
|
||||
<TableHead>status</TableHead>
|
||||
<TableHead className="w-28">操作</TableHead>
|
||||
</tr>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{listQuery.data.initiated.length ? (
|
||||
listQuery.data.initiated.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="font-mono text-xs">{item.id}</TableCell>
|
||||
<TableCell className="font-mono text-xs">{item.delegateEmployeeId}</TableCell>
|
||||
<TableCell>{item.scope}</TableCell>
|
||||
<TableCell>{item.status}</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
data-testid="delegations-revoke"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={revokeMutation.isPending || item.status === "revoked"}
|
||||
onClick={() => revokeMutation.mutate(item.id)}
|
||||
type="button"
|
||||
>
|
||||
撤销
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell className="py-3 text-slate-500" colSpan={5}>
|
||||
暂无数据
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-medium text-slate-800">我接收的委派</p>
|
||||
<div className="rounded-lg border border-slate-200">
|
||||
<Table data-testid="delegations-received-table">
|
||||
<TableHeader>
|
||||
<tr>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>principal</TableHead>
|
||||
<TableHead>scope</TableHead>
|
||||
<TableHead>status</TableHead>
|
||||
</tr>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{listQuery.data.received.length ? (
|
||||
listQuery.data.received.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="font-mono text-xs">{item.id}</TableCell>
|
||||
<TableCell className="font-mono text-xs">{item.principalEmployeeId}</TableCell>
|
||||
<TableCell>{item.scope}</TableCell>
|
||||
<TableCell>{item.status}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell className="py-3 text-slate-500" colSpan={4}>
|
||||
暂无数据
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户