AP6 增加审批催办与效率摘要

client/src/pages/MobileReimbursementDetailPage.tsx

@@ -27,6 +27,7 @@ import {
   type ReimbursementItem,
   type ReimbursementStatus,
 } from "../api/reimbursements";
+import { remindWorkflowTask } from "../api/workflow";
 import type { PrecheckResponse } from "../api/feeControl";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
@@ -119,6 +120,20 @@ function formatDateTime(value: string | null | undefined) {
   return value.slice(0, 19).replace("T", " ");
 }
 
+function workflowActionLabel(action: string) {
+  const labels: Record<string, string> = {
+    start: "提交",
+    approve: "通过",
+    reject: "驳回",
+    return: "退回",
+    transfer: "转审",
+    withdraw: "撤回",
+    remind: "催办",
+    overdue_remind: "超时提醒",
+  };
+  return labels[action] ?? action;
+}
+
 function formatInvoiceTitle(invoice: {
   invoiceCode?: string | null;
   invoiceNumber?: string | null;
@@ -205,6 +220,13 @@ export function MobileReimbursementDetailPage() {
   const canSubmitExpense = hasPermission(permissions, "expense.submit");
   const isParticipant = Boolean(detail && me?.id && [detail.ownerId, detail.submitterId].includes(me.id));
   const canEdit = isEditableStatus(detail?.status);
+  const pendingTaskId = detail?.pendingWorkflow?.task?.id ?? null;
+  const canRemindPendingWorkflow = Boolean(
+    detail?.status === "reviewing" &&
+      pendingTaskId &&
+      isParticipant &&
+      detail?.pendingWorkflow?.task?.assignee_id !== me?.id,
+  );
   const canOpenInvoiceDialog = Boolean(canEdit && isParticipant && canUploadInvoice && canViewOwnInvoice);
   const canUnbindInvoices = Boolean(canEdit && (isParticipant || canViewAllExpense));
   const canDeleteDraft = Boolean(detail?.status === "draft" && canDeleteExpense && (isParticipant || canViewAllExpense));
@@ -393,6 +415,21 @@ export function MobileReimbursementDetailPage() {
     },
   });
 
+  const remindMutation = useMutation({
+    mutationFn: (taskId: string) => remindWorkflowTask(taskId),
+    onSuccess: async () => {
+      await Promise.all([
+        invalidateDetail(),
+        queryClient.invalidateQueries({ queryKey: ["mobile", "workflow"] }),
+        queryClient.invalidateQueries({ queryKey: ["notifications"] }),
+      ]);
+      toast.success("已催办当前审批人");
+    },
+    onError: (error) => {
+      toast.error(resolveErrorMessage(error));
+    },
+  });
+
   const bindInvoicesMutation = useMutation({
     mutationFn: async (invoiceSelections: Array<{ invoiceId: string; linkedItemId?: string }>) => {
       const results: Array<{ invoiceId: string; success: boolean; message?: string }> = [];
@@ -800,6 +837,49 @@ export function MobileReimbursementDetailPage() {
         {detail.description ? <p className="mt-3 text-sm leading-6 text-zinc-600">{detail.description}</p> : null}
       </section>
 
+      {detail.status === "reviewing" || detail.approvalHistory.length ? (
+        <section className="mobile-card" data-testid="mobile-reimbursement-approval-history">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h2 className="text-base font-semibold text-zinc-900">审批</h2>
+              <p className="mt-1 text-xs text-zinc-500">
+                当前节点：{detail.pendingWorkflow?.task?.step_name ?? "-"}
+              </p>
+            </div>
+            {canRemindPendingWorkflow && pendingTaskId ? (
+              <Button
+                size="sm"
+                type="button"
+                variant="secondary"
+                disabled={remindMutation.isPending}
+                onClick={() => remindMutation.mutate(pendingTaskId)}
+              >
+                {remindMutation.isPending ? "催办中..." : "催办"}
+              </Button>
+            ) : null}
+          </div>
+
+          {detail.approvalHistory.length ? (
+            <div className="mt-3 space-y-2">
+              {detail.approvalHistory.map((item) => (
+                <article key={item.id} className="mobile-list-card">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="text-sm font-semibold text-zinc-900">{workflowActionLabel(item.action)}</div>
+                    <div className="shrink-0 text-xs text-zinc-500">{formatDateTime(item.createdAt)}</div>
+                  </div>
+                  <div className="mt-1 text-xs text-zinc-500">
+                    {item.stepName ?? "-"} · {item.actorName || "系统"}
+                  </div>
+                  {item.comment ? <p className="mt-2 text-sm leading-5 text-zinc-600">{item.comment}</p> : null}
+                </article>
+              ))}
+            </div>
+          ) : (
+            <p className="mt-3 text-sm text-zinc-500">暂无审批记录。</p>
+          )}
+        </section>
+      ) : null}
+
       <section className="mobile-card" data-testid="mobile-reimbursement-items">
         <div className="flex items-center justify-between gap-3">
           <h2 className="text-base font-semibold text-zinc-900">报销明细</h2>