A2 收口统一审批中心入口与状态

2026-05-09 21:39:47 +08:00
@@ -3,7 +3,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
-import { approveWorkflowTask, fetchWorkflowTasks } from "../api/workflow";
+import { approveWorkflowTask, fetchWorkflowTasks, type WorkflowTaskSummary } from "../api/workflow";
 import { PageHeader } from "../components/common/PageHeader";
 import { Pagination } from "../components/common/Pagination";
 import { StatusBadge } from "../components/common/StatusBadge";
@@ -31,6 +31,53 @@ function entityLabel(entityType: string | undefined) {
  return entityType || "-";
 }

+function businessStatusLabel(status: string | null | undefined) {
+  const labels: Record<string, string> = {
+    draft: "草稿",
+    pending: "待处理",
+    reviewing: "审批中",
+    submitted: "审批中",
+    approved: "已通过",
+    rejected: "已驳回",
+    returned: "已退回",
+    cancelled: "已取消",
+    completed: "已完成",
+    paid: "已付款",
+  };
+  return status ? labels[status] ?? status : "-";
+}
+
+function isInternalId(value: string | null | undefined) {
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value ?? "");
+}
+
+function publicReference(value: string | null | undefined) {
+  if (!value || isInternalId(value)) {
+    return null;
+  }
+  return value;
+}
+
+function displayReference(task: WorkflowTaskSummary) {
+  return publicReference(task.businessSummary?.reference ?? task.workflowInstance?.entityId) ?? "未生成业务编号";
+}
+
+function displayTitle(task: WorkflowTaskSummary) {
+  return task.businessSummary?.title ?? task.stepName;
+}
+
+function displayApplicant(task: WorkflowTaskSummary) {
+  return task.businessSummary?.applicantName ?? "-";
+}
+
+function displayMetric(task: WorkflowTaskSummary) {
+  return task.businessSummary?.amount ?? task.businessSummary?.duration ?? "-";
+}
+
+function isAlreadyProcessedTaskError(error: unknown) {
+  return isApiError(error) && error.details?.task === "already_processed";
+}
+
 export function WorkflowTasksPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const queryClient = useQueryClient();
@@ -61,6 +108,9 @@ export function WorkflowTasksPage() {
      toast.success("审批已通过");
    },
    onError: (error) => {
+      if (isAlreadyProcessedTaskError(error)) {
+        void queryClient.invalidateQueries({ queryKey: ["workflow", "tasks"] });
+      }
      const message = isApiError(error)
        ? `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`
        : error instanceof Error
@@ -86,7 +136,7 @@ export function WorkflowTasksPage() {
          <TabsList className="flex w-full flex-wrap justify-start gap-1">
            {[
              { value: "pending", label: "待处理" },
-              { value: "completed", label: "已通过" },
+              { value: "completed", label: "已处理" },
              { value: "rejected", label: "已驳回" },
              { value: "cancelled", label: "已取消" },
              { value: "skipped", label: "已跳过" },
@@ -102,7 +152,7 @@ export function WorkflowTasksPage() {
          </TabsList>
        </Tabs>

-        {query.isLoading ? <TableSkeleton columns={5} rows={5} /> : null}
+        {query.isLoading ? <TableSkeleton columns={7} rows={5} /> : null}

        {query.isError ? (
          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
@@ -124,15 +174,17 @@ export function WorkflowTasksPage() {
                  <article className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm" key={task.id}>
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
-                        <div className="truncate text-sm font-semibold text-zinc-900">{task.stepName}</div>
+                        <div className="truncate text-sm font-semibold text-zinc-900">{displayTitle(task)}</div>
                        <div className="mt-1 text-xs text-zinc-500">
-                          {entityLabel(task.workflowInstance?.entityType)} · {new Date(task.createdAt).toLocaleString()}
+                          {entityLabel(task.workflowInstance?.entityType)} · {displayReference(task)}
                        </div>
                      </div>
                      <StatusBadge className="shrink-0" status={task.status} />
                    </div>
-                    <div className="mt-3 truncate rounded-lg bg-zinc-50 px-3 py-2 font-mono text-xs text-zinc-500">
-                      {task.workflowInstance?.entityId ?? task.id}
+                    <div className="mt-3 grid gap-1 rounded-lg bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
+                      <div>申请人：{displayApplicant(task)}</div>
+                      <div>金额/天数：{displayMetric(task)}</div>
+                      <div>业务状态：{businessStatusLabel(task.businessSummary?.businessStatus)}</div>
                    </div>
                    <div className="mt-3 grid grid-cols-2 gap-2">
                      {status === "pending" && (task.allowedActions ?? []).includes("approve") ? (
@@ -172,9 +224,11 @@ export function WorkflowTasksPage() {
              <Table data-testid="workflow-tasks-table">
                <TableHeader>
                  <tr>
-                    <TableHead>任务</TableHead>
-                    <TableHead>业务对象</TableHead>
-                    <TableHead>状态</TableHead>
+                    <TableHead>审批事项</TableHead>
+                    <TableHead>申请人</TableHead>
+                    <TableHead>金额/天数</TableHead>
+                    <TableHead>业务状态</TableHead>
+                    <TableHead>任务状态</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead className="w-24">操作</TableHead>
                  </tr>
@@ -184,17 +238,14 @@ export function WorkflowTasksPage() {
                    taskItems.map((task) => (
                      <TableRow data-testid="workflow-task-row" key={task.id}>
                        <TableCell>
-                          <div className="font-medium text-zinc-900">{task.stepName}</div>
-                          <div className="text-xs text-zinc-500">{task.id}</div>
-                        </TableCell>
-                        <TableCell>
-                          <div className="font-medium text-zinc-900">
-                            {entityLabel(task.workflowInstance?.entityType)}
-                          </div>
-                          <div className="font-mono text-xs text-zinc-500">
-                            {task.workflowInstance?.entityId ?? "-"}
+                          <div className="font-medium text-zinc-900">{displayTitle(task)}</div>
+                          <div className="text-xs text-zinc-500">
+                            {entityLabel(task.workflowInstance?.entityType)} · {displayReference(task)}
                          </div>
                        </TableCell>
+                        <TableCell>{displayApplicant(task)}</TableCell>
+                        <TableCell>{displayMetric(task)}</TableCell>
+                        <TableCell>{businessStatusLabel(task.businessSummary?.businessStatus)}</TableCell>
                        <TableCell><StatusBadge status={task.status} /></TableCell>
                        <TableCell>{new Date(task.createdAt).toLocaleString()}</TableCell>
                        <TableCell>
@@ -224,7 +275,7 @@ export function WorkflowTasksPage() {
                    ))
                  ) : (
                    <TableRow>
-                      <TableCell className="py-3 text-zinc-500" colSpan={5}>
+                      <TableCell className="py-3 text-zinc-500" colSpan={7}>
                        暂无数据
                      </TableCell>
                    </TableRow>