263 行
10 KiB
TypeScript
263 行
10 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { toast } from "sonner";
|
|
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 { TableSkeleton } from "../components/common/TableSkeleton";
|
|
import { StatusBadge } from "../components/common/StatusBadge";
|
|
import { Button } from "../components/ui/button";
|
|
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("");
|
|
toast.success("委派已创建");
|
|
},
|
|
onError: (err) => {
|
|
const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "创建委派失败";
|
|
setError(msg);
|
|
toast.error(msg);
|
|
},
|
|
});
|
|
|
|
const revokeMutation = useMutation({
|
|
mutationFn: (delegationId: string) => revokeDelegation(delegationId),
|
|
onSuccess: async () => {
|
|
await queryClient.invalidateQueries({ queryKey: ["delegations"] });
|
|
setError("");
|
|
toast.success("已撤销");
|
|
},
|
|
onError: (err) => {
|
|
const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "撤销委派失败";
|
|
setError(msg);
|
|
toast.error(msg);
|
|
},
|
|
});
|
|
|
|
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}
|
|
|
|
<div className="card-std space-y-4">
|
|
<h3 className="text-base font-semibold text-zinc-900">创建委派</h3>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1 text-sm">
|
|
<span className="font-medium text-zinc-700">委派给（审批人候选）</span>
|
|
<select
|
|
className="select-std"
|
|
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-zinc-500">
|
|
说明：当前 MVP 未接入员工搜索，这里先复用“转审候选”列表作为可选目标。
|
|
</p>
|
|
</label>
|
|
|
|
<label className="space-y-1 text-sm">
|
|
<span className="font-medium text-zinc-700">范围</span>
|
|
<select
|
|
className="select-std"
|
|
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-zinc-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>
|
|
</div>
|
|
|
|
<div className="card-std space-y-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<h3 className="text-base font-semibold text-zinc-900">我的委派</h3>
|
|
<select
|
|
className="select-std w-auto"
|
|
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 ? <TableSkeleton columns={5} rows={3} /> : 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-zinc-800">我发起的委派</p>
|
|
<div className="rounded-lg border border-zinc-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><StatusBadge status={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-zinc-500" colSpan={5}>
|
|
暂无数据
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="mb-2 text-sm font-medium text-zinc-800">我接收的委派</p>
|
|
<div className="rounded-lg border border-zinc-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><StatusBadge status={item.status} /></TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell className="py-3 text-zinc-500" colSpan={4}>
|
|
暂无数据
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|