R32-1 R32-4 R33-2: 收口工作台交互与报销链路

client/src/pages/WorkflowTasksPage.tsx

@@ -1,8 +1,9 @@
 import { Link, useSearchParams } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
-import { fetchWorkflowTasks } from "../api/workflow";
+import { approveWorkflowTask, fetchWorkflowTasks } from "../api/workflow";
 import { PageHeader } from "../components/common/PageHeader";
 import { Pagination } from "../components/common/Pagination";
 import { StatusBadge } from "../components/common/StatusBadge";
@@ -10,6 +11,7 @@ import { TableSkeleton } from "../components/common/TableSkeleton";
 import { Button } from "../components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
+import { TEST_IDS } from "../lib/testIds";
 
 const PAGE_SIZE = 20;
 
@@ -31,6 +33,7 @@ function entityLabel(entityType: string | undefined) {
 
 export function WorkflowTasksPage() {
   const [searchParams, setSearchParams] = useSearchParams();
+  const queryClient = useQueryClient();
 
   const status =
     (searchParams.get("status") as
@@ -47,6 +50,26 @@ export function WorkflowTasksPage() {
     queryFn: () => fetchWorkflowTasks({ status, page, pageSize: PAGE_SIZE }),
   });
 
+  const approveMutation = useMutation({
+    mutationFn: (taskId: string) => approveWorkflowTask(taskId),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["workflow", "tasks"] }),
+        queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
+        queryClient.invalidateQueries({ queryKey: ["notifications"] }),
+      ]);
+      toast.success("审批已通过");
+    },
+    onError: (error) => {
+      const message = isApiError(error)
+        ? `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`
+        : error instanceof Error
+          ? error.message
+          : "审批失败，请稍后重试";
+      toast.error(message);
+    },
+  });
+
   const totalPages = Math.max(1, Math.ceil((query.data?.total ?? 0) / PAGE_SIZE));
 
   return (
@@ -123,14 +146,27 @@ export function WorkflowTasksPage() {
                       <TableCell><StatusBadge status={task.status} /></TableCell>
                       <TableCell>{new Date(task.createdAt).toLocaleString()}</TableCell>
                       <TableCell>
-                        <Button
-                          asChild
-                          size="sm"
-                          variant="secondary"
-                          data-testid="workflow-task-detail-link"
-                        >
-                          <Link to={`/workflow/tasks/${task.id}`}>详情</Link>
-                        </Button>
+                        <div className="flex flex-wrap gap-2">
+                          {status === "pending" && task.allowedActions.includes("approve") ? (
+                            <Button
+                              size="sm"
+                              type="button"
+                              data-testid={TEST_IDS.workflow.quickApprove}
+                              disabled={approveMutation.isPending && approveMutation.variables === task.id}
+                              onClick={() => approveMutation.mutate(task.id)}
+                            >
+                              {approveMutation.isPending && approveMutation.variables === task.id ? "通过中..." : "通过"}
+                            </Button>
+                          ) : null}
+                          <Button
+                            asChild
+                            size="sm"
+                            variant="secondary"
+                            data-testid={TEST_IDS.workflow.detailLink}
+                          >
+                            <Link to={`/workflow/tasks/${task.id}`}>详情</Link>
+                          </Button>
+                        </div>
                       </TableCell>
                     </TableRow>
                   ))