R55 A1-A6：报销统计仪表盘与批量审批

client/src/pages/ReimbursementsPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "../api/types";
@@ -6,6 +6,11 @@ import { mapApiErrorMessage } from "../api/errorMessages";
 import { fetchMyDelegations } from "../api/delegations";
 import { exportReimbursements } from "../api/exports";
 import { createReimbursement, fetchReimbursements, type ReimbursementStatus } from "../api/reimbursements";
+import {
+  batchApproveWorkflowTasks,
+  batchRejectWorkflowTasks,
+  type WorkflowBatchActionResponse,
+} from "../api/workflow";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { toast } from "sonner";
@@ -17,31 +22,82 @@ import { TableSkeleton } from "../components/common/TableSkeleton";
 import { FilterBar, ListWorkspace, PrimaryTable } from "../components/patterns/ListWorkspace";
 import { MetricCard } from "../components/patterns/MetricCard";
 import { Button } from "../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
+import { Textarea } from "../components/ui/textarea";
 
 const PAGE_SIZE = 20;
 
+type BatchAction = "approve" | "reject";
+
+type BatchResultState = {
+  action: BatchAction;
+  summary: WorkflowBatchActionResponse["summary"];
+  results: Array<
+    WorkflowBatchActionResponse["results"][number] & {
+      reimbursementId: string | null;
+      formNumber: string | null;
+    }
+  >;
+};
+
 function formatCurrency(value: number) {
   return new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(value);
 }
 
+function resolveErrorMessage(error: unknown, fallback: string) {
+  if (isApiError(error)) {
+    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
+  }
+  return error instanceof Error ? error.message : fallback;
+}
+
+function formatBatchOutcome(action: BatchAction, outcome: string) {
+  if (outcome === "approved") {
+    return "已通过";
+  }
+  if (outcome === "rejected") {
+    return "已驳回";
+  }
+  if (outcome === "skipped") {
+    return "已跳过";
+  }
+  if (outcome === "error") {
+    return "失败";
+  }
+  return action === "approve" ? "已通过" : "已驳回";
+}
+
 export function ReimbursementsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const { permissions, me } = useAuth();
   const queryClient = useQueryClient();
   const [exportError, setExportError] = useState("");
+  const [batchError, setBatchError] = useState("");
+  const [proxyOwnerEmployeeId, setProxyOwnerEmployeeId] = useState("");
+  const [batchMode, setBatchMode] = useState(false);
+  const [selectedReimbursementIds, setSelectedReimbursementIds] = useState<string[]>([]);
+  const [batchDialogAction, setBatchDialogAction] = useState<BatchAction | null>(null);
+  const [batchComment, setBatchComment] = useState("");
+  const [batchResult, setBatchResult] = useState<BatchResultState | null>(null);
 
   const status = (searchParams.get("status") as ReimbursementStatus | null) ?? "draft";
   const page = Number(searchParams.get("page") ?? "1") || 1;
   const scope = (searchParams.get("scope") as "own" | "all" | null) ?? "own";
   const canViewAll = hasPermission(permissions, "expense.view_all");
+  const canApproveExpense = hasPermission(permissions, "expense.approve");
   const canProxySubmit = hasPermission(permissions, "expense.proxy_submit");
   const isAdministration = (me?.roleCodes ?? []).includes("administration");
   const showProxyOwnerSelector = canProxySubmit && isAdministration;
 
-  const [proxyOwnerEmployeeId, setProxyOwnerEmployeeId] = useState("");
-
   const listQuery = useQuery({
     queryKey: ["reimbursements", "list", status, page, scope],
     queryFn: () => fetchReimbursements({ status, page, pageSize: PAGE_SIZE, scope }),
@@ -67,6 +123,33 @@ export function ReimbursementsPage() {
     );
   }, [items]);
 
+  const actionableItems = useMemo(
+    () =>
+      items.filter(
+        (item) =>
+          Boolean(item.pendingWorkflow?.task?.id) &&
+          Boolean(item.pendingWorkflow?.allowedActions.includes("approve")),
+      ),
+    [items],
+  );
+  const actionableIdSet = useMemo(
+    () => new Set(actionableItems.map((item) => item.id)),
+    [actionableItems],
+  );
+  const canShowBatchEntry =
+    status === "reviewing" && scope === "all" && canApproveExpense && actionableItems.length > 0;
+  const selectedItems = actionableItems.filter((item) => selectedReimbursementIds.includes(item.id));
+  const allActionableSelected =
+    actionableItems.length > 0 && actionableItems.every((item) => selectedReimbursementIds.includes(item.id));
+
+  useEffect(() => {
+    setSelectedReimbursementIds((current) => current.filter((id) => actionableIdSet.has(id)));
+    if (!canShowBatchEntry) {
+      setBatchMode(false);
+      setBatchDialogAction(null);
+    }
+  }, [actionableIdSet, canShowBatchEntry]);
+
   const createMutation = useMutation({
     mutationFn: () =>
       createReimbursement({
@@ -76,12 +159,8 @@ export function ReimbursementsPage() {
       await queryClient.invalidateQueries({ queryKey: ["reimbursements"] });
       toast.success("报销单已创建");
     },
-    onError: (err) => {
-      toast.error(
-        isApiError(err)
-          ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`
-          : "创建报销单失败",
-      );
+    onError: (error) => {
+      toast.error(resolveErrorMessage(error, "创建报销单失败"));
     },
   });
 
@@ -92,20 +171,128 @@ export function ReimbursementsPage() {
       setExportError("");
       toast.success("导出完成");
     },
-    onError: (err) => {
-      if (isApiError(err)) {
-        setExportError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        toast.error(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        return;
+    onError: (error) => {
+      const message = resolveErrorMessage(error, "导出失败");
+      setExportError(message);
+      toast.error(message);
+    },
+  });
+
+  const batchMutation = useMutation({
+    mutationFn: async (input: { action: BatchAction; comment: string; selectedItems: typeof actionableItems }) => {
+      const taskIds = input.selectedItems
+        .map((item) => item.pendingWorkflow?.task?.id ?? null)
+        .filter((taskId): taskId is string => Boolean(taskId));
+
+      if (!taskIds.length) {
+        throw new Error("请先选择至少一条可处理的报销待办。");
       }
-      const msg = err instanceof Error ? err.message : "导出失败";
-      setExportError(msg);
-      toast.error(msg);
+
+      const response =
+        input.action === "approve"
+          ? await batchApproveWorkflowTasks({
+              taskIds,
+              comment: input.comment.trim() || undefined,
+            })
+          : await batchRejectWorkflowTasks({
+              taskIds,
+              comment: input.comment.trim(),
+            });
+
+      return {
+        action: input.action,
+        response,
+        selectedItems: input.selectedItems.map((item) => ({
+          reimbursementId: item.id,
+          formNumber: item.formNumber,
+          taskId: item.pendingWorkflow?.task?.id ?? null,
+        })),
+      };
+    },
+    onSuccess: async (payload) => {
+      const formByTaskId = new Map(
+        payload.selectedItems
+          .filter((item) => item.taskId)
+          .map((item) => [item.taskId!, item]),
+      );
+
+      setBatchResult({
+        action: payload.action,
+        summary: payload.response.summary,
+        results: payload.response.results.map((item) => {
+          const related = formByTaskId.get(item.taskId);
+          return {
+            ...item,
+            reimbursementId: related?.reimbursementId ?? null,
+            formNumber: related?.formNumber ?? null,
+          };
+        }),
+      });
+      setBatchDialogAction(null);
+      setBatchComment("");
+      setBatchMode(false);
+      setSelectedReimbursementIds([]);
+      setBatchError("");
+      await queryClient.invalidateQueries({ queryKey: ["reimbursements"] });
+      toast.success(payload.action === "approve" ? "批量通过已执行" : "批量驳回已执行");
+    },
+    onError: (error) => {
+      const message = resolveErrorMessage(error, "批量处理失败");
+      setBatchError(message);
+      toast.error(message);
     },
   });
 
   const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
 
+  function toggleBatchSelection(reimbursementId: string) {
+    setSelectedReimbursementIds((current) =>
+      current.includes(reimbursementId)
+        ? current.filter((id) => id !== reimbursementId)
+        : [...current, reimbursementId],
+    );
+  }
+
+  function toggleSelectAllActionable() {
+    if (allActionableSelected) {
+      setSelectedReimbursementIds([]);
+      return;
+    }
+    setSelectedReimbursementIds(actionableItems.map((item) => item.id));
+  }
+
+  function openBatchDialog(action: BatchAction) {
+    if (!selectedItems.length) {
+      setBatchError("请先选择至少一条可批量处理的报销待办。");
+      return;
+    }
+    setBatchError("");
+    setBatchDialogAction(action);
+  }
+
+  function handleCloseBatchDialog(open: boolean) {
+    if (!open) {
+      setBatchDialogAction(null);
+      setBatchComment("");
+    }
+  }
+
+  function submitBatchAction() {
+    if (!batchDialogAction) {
+      return;
+    }
+    if (batchDialogAction === "reject" && !batchComment.trim()) {
+      setBatchError("批量驳回必须填写统一理由。");
+      return;
+    }
+
+    batchMutation.mutate({
+      action: batchDialogAction,
+      comment: batchComment,
+      selectedItems,
+    });
+  }
+
   return (
     <ListWorkspace>
       <PageHeader
@@ -131,6 +318,12 @@ export function ReimbursementsPage() {
               </select>
             ) : null}
 
+            {canViewAll ? (
+              <Button asChild variant="secondary" type="button">
+                <Link to="/reimbursements/dashboard">统计分析</Link>
+              </Button>
+            ) : null}
+
             <Button
               data-testid="reimbursements-create"
               disabled={createMutation.isPending}
@@ -187,6 +380,12 @@ export function ReimbursementsPage() {
         </p>
       ) : null}
 
+      {batchError ? (
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+          {batchError}
+        </p>
+      ) : null}
+
       <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <MetricCard title="当前列表" value={stats.currentPageCount} note={`共 ${listQuery.data?.total ?? 0} 条记录`} />
         <MetricCard title="当前金额" value={formatCurrency(stats.currentPageAmount)} note="按当前页与筛选统计" />
@@ -221,30 +420,54 @@ export function ReimbursementsPage() {
             </TabsList>
           </Tabs>
 
-          {canViewAll ? (
-            <div className="flex flex-wrap items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            {canViewAll ? (
+              <>
+                <Button
+                  data-testid="reimbursements-scope-own"
+                  variant={scope === "own" ? "default" : "secondary"}
+                  onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
+                  type="button"
+                >
+                  仅自己
+                </Button>
+                <Button
+                  data-testid="reimbursements-scope-all"
+                  variant={scope === "all" ? "default" : "secondary"}
+                  onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
+                  type="button"
+                >
+                  全范围
+                </Button>
+              </>
+            ) : null}
+
+            {canShowBatchEntry ? (
               <Button
-                data-testid="reimbursements-scope-own"
-                variant={scope === "own" ? "default" : "secondary"}
-                onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
+                variant={batchMode ? "default" : "secondary"}
+                onClick={() => {
+                  setBatchMode((current) => !current);
+                  setSelectedReimbursementIds([]);
+                  setBatchDialogAction(null);
+                  setBatchComment("");
+                  setBatchError("");
+                }}
                 type="button"
               >
-                仅自己
+                {batchMode ? "退出批量模式" : "批量操作"}
               </Button>
-              <Button
-                data-testid="reimbursements-scope-all"
-                variant={scope === "all" ? "default" : "secondary"}
-                onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
-                type="button"
-              >
-                全范围
-              </Button>
-            </div>
-          ) : null}
+            ) : null}
+          </div>
         </div>
+
+        {batchMode ? (
+          <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+            当前只可勾选你本人可处理的 reviewing 报销待办。批量通过可不填意见，批量驳回必须填写统一理由。
+          </div>
+        ) : null}
       </FilterBar>
 
-      {listQuery.isLoading ? <TableSkeleton columns={6} rows={5} /> : null}
+      {listQuery.isLoading ? <TableSkeleton columns={batchMode ? 7 : 6} rows={5} /> : null}
 
       {listQuery.isError ? (
         <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
@@ -261,9 +484,10 @@ export function ReimbursementsPage() {
       {!listQuery.isLoading && !listQuery.isError ? (
         <>
           <PrimaryTable>
-            <table className="w-full text-left border-collapse" data-testid="reimbursements-table">
+            <table className="w-full border-collapse text-left" data-testid="reimbursements-table">
               <thead className="table-header">
                 <tr>
+                  {batchMode ? <th className="table-th w-14">选择</th> : null}
                   <th className="table-th">单号</th>
                   <th className="table-th">状态</th>
                   <th className="table-th">金额</th>
@@ -274,40 +498,73 @@ export function ReimbursementsPage() {
               </thead>
               <tbody className="divide-y divide-zinc-50">
                 {items.length ? (
-                  items.map((item) => (
-                    <tr className="table-row" data-testid="reimbursement-row" key={item.id}>
-                      <td className="table-td">
-                        <div className="font-semibold text-zinc-900">{item.formNumber || item.id}</div>
-                        {item.formNumber && item.formNumber !== item.id && (
-                          <div className="text-xs text-zinc-500">{item.id}</div>
-                        )}
-                        {item.project ? <div className="text-xs text-zinc-500">项目：{item.project.projectNo} · {item.project.name}</div> : null}
-                      </td>
-                      <td className="table-td"><StatusBadge status={item.status} /></td>
-                      <td className="table-td-strong">
-                        {item.totalAmount != null
-                          ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(Number(item.totalAmount))
-                          : "-"}
-                      </td>
-                      <td className="table-td">
-                        <div className="flex items-center gap-2">
-                          <div className="size-6 rounded-full bg-zinc-100 flex items-center justify-center text-[10px] font-bold text-zinc-700 uppercase">
-                            {(item.owner?.name ?? "U").charAt(0)}
+                  items.map((item) => {
+                    const canSelectRow = Boolean(
+                      item.pendingWorkflow?.task?.id && item.pendingWorkflow.allowedActions.includes("approve"),
+                    );
+
+                    return (
+                      <tr className="table-row" data-testid="reimbursement-row" key={item.id}>
+                        {batchMode ? (
+                          <td className="table-td">
+                            {canSelectRow ? (
+                              <input
+                                type="checkbox"
+                                checked={selectedReimbursementIds.includes(item.id)}
+                                onChange={() => toggleBatchSelection(item.id)}
+                                aria-label={`选择报销单 ${item.formNumber ?? item.id}`}
+                              />
+                            ) : (
+                              <span className="text-xs text-zinc-400">-</span>
+                            )}
+                          </td>
+                        ) : null}
+                        <td className="table-td">
+                          <div className="font-semibold text-zinc-900">{item.formNumber || item.id}</div>
+                          {item.formNumber && item.formNumber !== item.id ? (
+                            <div className="text-xs text-zinc-500">{item.id}</div>
+                          ) : null}
+                          {item.project ? (
+                            <div className="text-xs text-zinc-500">
+                              项目：{item.project.projectNo} · {item.project.name}
+                            </div>
+                          ) : null}
+                          {item.pendingWorkflow?.task?.id ? (
+                            <div className="text-xs text-amber-700">
+                              当前待办：{item.pendingWorkflow.task.stepName} · task {item.pendingWorkflow.task.id}
+                            </div>
+                          ) : null}
+                        </td>
+                        <td className="table-td">
+                          <StatusBadge status={item.status} />
+                        </td>
+                        <td className="table-td-strong">
+                          {item.totalAmount != null
+                            ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(
+                                Number(item.totalAmount),
+                              )
+                            : "-"}
+                        </td>
+                        <td className="table-td">
+                          <div className="flex items-center gap-2">
+                            <div className="flex size-6 items-center justify-center rounded-full bg-zinc-100 text-[10px] font-bold uppercase text-zinc-700">
+                              {(item.owner?.name ?? "U").charAt(0)}
+                            </div>
+                            <span className="font-medium text-zinc-900">{item.owner?.name ?? "-"}</span>
                           </div>
-                          <span className="font-medium text-zinc-900">{item.owner?.name ?? "-"}</span>
-                        </div>
-                      </td>
-                      <td className="table-td">{item.reimbursementDate ?? "-"}</td>
-                      <td className="table-td">
-                        <Link to={`/reimbursements/${item.id}`} className="btn-ghost" data-testid="reimbursement-detail-link">
-                          <span className="material-symbols-outlined text-[18px]">more_horiz</span>
-                        </Link>
-                      </td>
-                    </tr>
-                  ))
+                        </td>
+                        <td className="table-td">{item.reimbursementDate ?? "-"}</td>
+                        <td className="table-td">
+                          <Link to={`/reimbursements/${item.id}`} className="btn-ghost" data-testid="reimbursement-detail-link">
+                            <span className="material-symbols-outlined text-[18px]">more_horiz</span>
+                          </Link>
+                        </td>
+                      </tr>
+                    );
+                  })
                 ) : (
                   <tr>
-                    <td className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
+                    <td className="py-8 text-center text-sm text-zinc-500" colSpan={batchMode ? 7 : 6}>
                       暂无数据
                     </td>
                   </tr>
@@ -326,6 +583,118 @@ export function ReimbursementsPage() {
           </div>
         </>
       ) : null}
+
+      {batchMode ? (
+        <div className="fixed bottom-6 left-1/2 z-40 w-[min(760px,calc(100vw-2rem))] -translate-x-1/2">
+          <div className="rounded-2xl border border-zinc-200 bg-white p-4 shadow-lg">
+            <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+              <div className="text-sm text-zinc-700">已选 {selectedItems.length} 项可处理报销待办</div>
+              <div className="flex flex-wrap items-center gap-2">
+                <Button type="button" variant="secondary" onClick={toggleSelectAllActionable}>
+                  {allActionableSelected ? "取消全选" : "全选可处理项"}
+                </Button>
+                <Button type="button" variant="secondary" onClick={() => openBatchDialog("approve")}>
+                  批量通过
+                </Button>
+                <Button type="button" variant="destructive" onClick={() => openBatchDialog("reject")}>
+                  批量驳回
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      <Dialog open={Boolean(batchDialogAction)} onOpenChange={handleCloseBatchDialog}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{batchDialogAction === "approve" ? "批量通过报销待办" : "批量驳回报销待办"}</DialogTitle>
+            <DialogDescription>
+              {batchDialogAction === "approve"
+                ? "统一意见可空。所有选中待办会按当前顺序逐条调用在线审批接口。"
+                : "驳回必须填写统一理由，所有选中待办将复用这条说明。"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700">
+              共 {selectedItems.length} 项：
+              <div className="mt-2 max-h-40 space-y-1 overflow-auto">
+                {selectedItems.map((item) => (
+                  <div key={item.id}>{item.formNumber ?? item.id}</div>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-900" htmlFor="reimbursements-batch-comment">
+                {batchDialogAction === "reject" ? "统一驳回理由" : "统一审批意见"}
+              </label>
+              <Textarea
+                id="reimbursements-batch-comment"
+                value={batchComment}
+                onChange={(event) => setBatchComment(event.target.value)}
+                placeholder={batchDialogAction === "reject" ? "请输入批量驳回理由" : "可选填写统一审批意见"}
+                rows={4}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="secondary" type="button" onClick={() => handleCloseBatchDialog(false)}>
+              取消
+            </Button>
+            <Button
+              type="button"
+              variant={batchDialogAction === "reject" ? "destructive" : "default"}
+              disabled={batchMutation.isPending || (batchDialogAction === "reject" && !batchComment.trim())}
+              onClick={submitBatchAction}
+            >
+              {batchMutation.isPending
+                ? "处理中..."
+                : batchDialogAction === "approve"
+                  ? "确认批量通过"
+                  : "确认批量驳回"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={Boolean(batchResult)} onOpenChange={(open) => !open && setBatchResult(null)}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{batchResult?.action === "approve" ? "批量通过结果" : "批量驳回结果"}</DialogTitle>
+            <DialogDescription>
+              {batchResult
+                ? `成功 ${batchResult.summary.approved ?? 0}，驳回 ${batchResult.summary.rejected ?? 0}，跳过 ${batchResult.summary.skipped}，失败 ${batchResult.summary.errored}`
+                : "查看批量操作逐条执行结果。"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="max-h-[60vh] space-y-2 overflow-auto rounded-2xl border border-zinc-200 bg-zinc-50 p-4">
+            {batchResult?.results.map((item) => (
+              <div key={`${item.taskId}-${item.outcome}`} className="rounded-xl border border-zinc-200 bg-white px-4 py-3">
+                <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+                  <div>
+                    <div className="font-medium text-zinc-900">{item.formNumber ?? item.reimbursementId ?? "-"}</div>
+                    <div className="text-xs text-zinc-500">taskId: {item.taskId}</div>
+                  </div>
+                  <div className="text-sm font-medium text-zinc-700">
+                    {formatBatchOutcome(batchResult.action, item.outcome)}
+                  </div>
+                </div>
+                {item.reason ? <div className="mt-2 text-sm text-red-600">{item.reason}</div> : null}
+              </div>
+            ))}
+          </div>
+
+          <DialogFooter>
+            <Button type="button" onClick={() => setBatchResult(null)}>
+              关闭
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </ListWorkspace>
   );
 }