R7E-16D 审批动作二次确认

Refs: R7E-16D BIZ8-12B QAOPS8-17

client/src/pages/MobileApprovalsPage.tsx

@@ -20,6 +20,7 @@ import {
 } from "../api/workflow";
 import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
+import { ConfirmDialog } from "../components/common/ConfirmDialog";
 import { PageHeader } from "../components/common/PageHeader";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { MobileDetailHeader } from "../components/mobile/MobileDetailHeader";
@@ -33,6 +34,8 @@ import { MOBILE_APPROVAL_PERMISSIONS } from "../features/mobile/navigation";
 import { resolvePurchaseDisplayCode } from "../lib/approvalDisplay";
 import { businessPrimaryLabel, compactBusinessReference, joinBusinessMeta } from "../lib/businessDisplay";
 import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
+import { cn } from "../lib/utils";
+import { getWorkflowConfirmCopy, type WorkflowConfirmAction } from "../lib/workflowActionConfirm";
 import {
   cacheWorkflowTaskDetail,
   enqueueWorkflowActionDraft,
@@ -390,12 +393,16 @@ export function MobileApprovalsPage() {
   const [transferToApproverId, setTransferToApproverId] = useState("");
   const [transferReason, setTransferReason] = useState("");
   const [offlineDraftSubmitting, setOfflineDraftSubmitting] = useState(false);
+  const [confirmAction, setConfirmAction] = useState<WorkflowConfirmAction | null>(null);
   const [isOnline, setIsOnline] = useState(true);
   const autoSyncRequestedRef = useRef(false);
 
   const ownerEmployeeId = me?.id ?? null;
   const canAccessRemoteApprovals = hasAnyPermission(permissions, [...MOBILE_APPROVAL_PERMISSIONS]);
   const canUseRemote = isOnline && Boolean(accessToken) && canAccessRemoteApprovals;
+  const confirmCopy = confirmAction
+    ? getWorkflowConfirmCopy(confirmAction, { offlineDraft: !canUseRemote && confirmAction !== "return" })
+    : null;
   const remoteTaskStatus = taskTab === "completed" ? "completed" : "pending";
   const currentMobileSource = `${location.pathname}${location.search}`;
   const employeeProgressStatus = progressStatusQuery(progressTab);
@@ -631,6 +638,26 @@ export function MobileApprovalsPage() {
     queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
   });
 
+  function requestMobileWorkflowAction(action: WorkflowConfirmAction) {
+    if (!canUseRemote && action === "return") {
+      setError("当前离线不支持退回，请联网后再处理。");
+      return;
+    }
+
+    if (action === "reject" && !comment.trim()) {
+      setError("驳回必须填写意见");
+      return;
+    }
+
+    if (action === "return" && !comment.trim()) {
+      setError("退回必须填写意见");
+      return;
+    }
+
+    setError("");
+    setConfirmAction(action);
+  }
+
   async function refreshDraftQueueCache() {
     if (!ownerEmployeeId) {
       return [];
@@ -962,9 +989,18 @@ export function MobileApprovalsPage() {
   const allVisibleSelected =
     filteredTaskCards.length > 0 && filteredTaskCards.every((task) => selectedBatchTaskIds.includes(task.id));
   const shouldShowDraftQueue = !isOnline || currentQueueItems.length > 0;
+  const showMobileApprovalActions = Boolean(isPushDetail && selectedTask && selectedTaskAllowsActions);
 
   return (
-    <PageScaffold className="space-y-4">
+    <>
+    <PageScaffold
+      className={cn(
+        "space-y-4",
+        showMobileApprovalActions
+          ? "mobile-fixed-action-page pb-[calc(var(--mobile-sticky-action-height,78px)+env(safe-area-inset-bottom,0px)+1.25rem)]"
+          : "",
+      )}
+    >
       {isPushDetail ? (
         <MobileDetailHeader
           title="审批详情"
@@ -1401,48 +1437,41 @@ export function MobileApprovalsPage() {
                   <p className="text-xs text-zinc-500">离线仅保存通过 / 驳回草稿，联网同步成功后才会正式提交。</p>
                 ) : null}
 
-                <div className={canUseRemote ? "mobile-sticky-action-grid mobile-approval-action-grid" : "mobile-sticky-action-grid"}>
-                  <Button
-                    className="min-h-12 w-full"
-                    data-testid="mobile-approvals-approve"
-                    disabled={isActionSubmitting || !selectedTask.allowedActions.includes("approve")}
-                    onClick={() => {
-                      if (canUseRemote) {
-                        actionMutation.mutate("approve");
-                        return;
-                      }
-                      void queueOfflineDraft("approve");
-                    }}
-                    type="button"
-                  >
-                    {canUseRemote ? "通过" : "保存通过草稿"}
-                  </Button>
-                  <Button
-                    className="min-h-12 w-full"
-                    data-testid="mobile-approvals-reject"
-                    disabled={isActionSubmitting || !selectedTask.allowedActions.includes("reject")}
-                    onClick={() => {
-                      if (canUseRemote) {
-                        actionMutation.mutate("reject");
-                        return;
-                      }
-                      void queueOfflineDraft("reject");
-                    }}
-                    type="button"
-                    variant="secondary"
-                  >
-                    {canUseRemote ? "驳回" : "保存驳回草稿"}
-                  </Button>
-                  <Button
-                    className="min-h-12 w-full"
-                    data-testid="mobile-approvals-return"
-                    disabled={isActionSubmitting || !canUseRemote || !selectedTask.allowedActions.includes("return")}
-                    onClick={() => actionMutation.mutate("return")}
-                    type="button"
-                    variant="secondary"
-                  >
-                    退回
-                  </Button>
+                <div
+                  className="mobile-sticky-action-surface fixed inset-x-0 bottom-0 z-50 border-t border-zinc-200 bg-white/95 shadow-[0_-10px_24px_rgba(15,23,42,0.10)] backdrop-blur"
+                  data-testid="mobile-approvals-sticky-actions"
+                >
+                  <div className="mobile-sticky-action-grid mobile-approval-action-grid">
+                    <Button
+                      className="min-h-12 w-full"
+                      data-testid="mobile-approvals-approve"
+                      disabled={isActionSubmitting || !selectedTask.allowedActions.includes("approve")}
+                      onClick={() => requestMobileWorkflowAction("approve")}
+                      type="button"
+                    >
+                      通过
+                    </Button>
+                    <Button
+                      className="min-h-12 w-full"
+                      data-testid="mobile-approvals-reject"
+                      disabled={isActionSubmitting || !selectedTask.allowedActions.includes("reject")}
+                      onClick={() => requestMobileWorkflowAction("reject")}
+                      type="button"
+                      variant="secondary"
+                    >
+                      驳回
+                    </Button>
+                    <Button
+                      className="min-h-12 w-full"
+                      data-testid="mobile-approvals-return"
+                      disabled={isActionSubmitting || !canUseRemote || !selectedTask.allowedActions.includes("return")}
+                      onClick={() => requestMobileWorkflowAction("return")}
+                      type="button"
+                      variant="secondary"
+                    >
+                      退回
+                    </Button>
+                  </div>
                 </div>
 
                 {canTransfer ? (
@@ -1587,5 +1616,33 @@ export function MobileApprovalsPage() {
       </section>
       ) : null}
     </PageScaffold>
+    <ConfirmDialog
+      open={Boolean(confirmCopy)}
+      onOpenChange={(open) => {
+        if (!open) {
+          setConfirmAction(null);
+        }
+      }}
+      title={confirmCopy?.title ?? ""}
+      description={confirmCopy?.description}
+      confirmLabel={confirmCopy?.confirmLabel}
+      variant={confirmCopy?.variant}
+      testId="workflow-action-confirm-dialog"
+      confirmTestId="workflow-action-confirm-submit"
+      cancelTestId="workflow-action-confirm-cancel"
+      onConfirm={async () => {
+        if (!confirmAction) {
+          return;
+        }
+        if (canUseRemote) {
+          await actionMutation.mutateAsync(confirmAction);
+          return;
+        }
+        if (confirmAction !== "return") {
+          await queueOfflineDraft(confirmAction);
+        }
+      }}
+    />
+    </>
   );
 }

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -17,6 +17,7 @@ import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { buildMobileApprovalsPath, shouldPreferMobileApprovalExperience } from "../pwa";
 import { CardSkeleton } from "../components/common/CardSkeleton";
+import { ConfirmDialog } from "../components/common/ConfirmDialog";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
 import { EntityOverviewHero } from "../components/patterns/EntityOverviewHero";
@@ -27,6 +28,7 @@ import { SectionPanel } from "../components/patterns/SectionPanel";
 import { Button } from "../components/ui/button";
 import { Textarea } from "../components/ui/textarea";
 import { resolvePurchaseDisplayCode } from "../lib/approvalDisplay";
+import { getWorkflowConfirmCopy, type WorkflowConfirmAction } from "../lib/workflowActionConfirm";
 
 function entityTitle(entityType: string | undefined) {
   if (entityType === "leave") {
@@ -114,6 +116,7 @@ export function WorkflowTaskDetailPage() {
   const [transferReason, setTransferReason] = useState("当前事项需转交对应审批人处理，请尽快处理。");
   const [selectedApprover, setSelectedApprover] = useState("");
   const [actionError, setActionError] = useState("");
+  const [confirmAction, setConfirmAction] = useState<WorkflowConfirmAction | null>(null);
 
   const detailQuery = useQuery({
     enabled: Boolean(taskId),
@@ -184,6 +187,23 @@ export function WorkflowTaskDetailPage() {
     },
   });
 
+  const confirmCopy = confirmAction ? getWorkflowConfirmCopy(confirmAction) : null;
+
+  function requestWorkflowAction(action: WorkflowConfirmAction) {
+    if (action === "reject" && rejectComment.trim().length < 1) {
+      setActionError("驳回必须填写意见");
+      return;
+    }
+
+    if (action === "return" && returnComment.trim().length < 1) {
+      setActionError("退回必须填写意见");
+      return;
+    }
+
+    setActionError("");
+    setConfirmAction(action);
+  }
+
   if (!taskId) {
     return (
       <div className="card-std p-6">
@@ -229,6 +249,7 @@ export function WorkflowTaskDetailPage() {
   const businessStatusLabel = workflowInstanceStatusLabel(detail.workflowInstance?.currentStatus);
 
   return (
+    <>
     <PageScaffold>
       <EntityOverviewHero
         title={`任务详情 ${detail.task.stepName}`}
@@ -365,7 +386,7 @@ export function WorkflowTaskDetailPage() {
                 <Button
                   data-testid="workflow-task-approve"
                   disabled={!allowedActions.has("approve") || mutation.isPending}
-                  onClick={() => mutation.mutate("approve")}
+                  onClick={() => requestWorkflowAction("approve")}
                   type="button"
                 >
                   通过
@@ -384,7 +405,7 @@ export function WorkflowTaskDetailPage() {
                   data-testid="workflow-task-reject"
                   variant="secondary"
                   disabled={!allowedActions.has("reject") || mutation.isPending || rejectComment.trim().length < 1}
-                  onClick={() => mutation.mutate("reject")}
+                  onClick={() => requestWorkflowAction("reject")}
                   type="button"
                 >
                   提交驳回
@@ -403,7 +424,7 @@ export function WorkflowTaskDetailPage() {
                   data-testid="workflow-task-return"
                   variant="secondary"
                   disabled={!allowedActions.has("return") || mutation.isPending || returnComment.trim().length < 1}
-                  onClick={() => mutation.mutate("return")}
+                  onClick={() => requestWorkflowAction("return")}
                   type="button"
                 >
                   提交退回
@@ -482,5 +503,27 @@ export function WorkflowTaskDetailPage() {
         </div>
       </div>
     </PageScaffold>
+    <ConfirmDialog
+      open={Boolean(confirmCopy)}
+      onOpenChange={(open) => {
+        if (!open) {
+          setConfirmAction(null);
+        }
+      }}
+      title={confirmCopy?.title ?? ""}
+      description={confirmCopy?.description}
+      confirmLabel={confirmCopy?.confirmLabel}
+      variant={confirmCopy?.variant}
+      testId="workflow-action-confirm-dialog"
+      confirmTestId="workflow-action-confirm-submit"
+      cancelTestId="workflow-action-confirm-cancel"
+      onConfirm={async () => {
+        if (!confirmAction) {
+          return;
+        }
+        await mutation.mutateAsync(confirmAction);
+      }}
+    />
+    </>
   );
 }

client/src/pages/WorkflowTasksPage.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
@@ -10,6 +11,7 @@ import {
   type WorkflowTaskSummary,
 } from "../api/workflow";
 import { Pagination } from "../components/common/Pagination";
+import { ConfirmDialog } from "../components/common/ConfirmDialog";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { TableSkeleton } from "../components/common/TableSkeleton";
 import {
@@ -26,6 +28,7 @@ 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";
+import { getWorkflowConfirmCopy } from "../lib/workflowActionConfirm";
 
 const PAGE_SIZE = 20;
 const WORKFLOW_STATUS_OPTIONS = [
@@ -130,6 +133,7 @@ function isAlreadyProcessedTaskError(error: unknown) {
 
 export function WorkflowTasksPage() {
   const [searchParams, setSearchParams] = useSearchParams();
+  const [confirmApproveTaskId, setConfirmApproveTaskId] = useState<string | null>(null);
   const queryClient = useQueryClient();
 
   const status = normalizeStatusFilter(searchParams.get("status"));
@@ -194,8 +198,10 @@ export function WorkflowTasksPage() {
 
   const totalPages = Math.max(1, Math.ceil((query.data?.total ?? 0) / PAGE_SIZE));
   const taskItems = query.data?.items ?? [];
+  const confirmCopy = confirmApproveTaskId ? getWorkflowConfirmCopy("approve") : null;
 
   return (
+    <>
     <ListWorkspace>
       <WorkspaceHeader
         eyebrow="审批"
@@ -318,7 +324,7 @@ export function WorkflowTasksPage() {
                           type="button"
                           data-testid={TEST_IDS.workflow.quickApprove}
                           disabled={approveMutation.isPending && approveMutation.variables === task.id}
-                          onClick={() => approveMutation.mutate(task.id)}
+                          onClick={() => setConfirmApproveTaskId(task.id)}
                         >
                           {approveMutation.isPending && approveMutation.variables === task.id ? "通过中..." : "通过"}
                         </Button>
@@ -381,7 +387,7 @@ export function WorkflowTasksPage() {
                                 type="button"
                                 data-testid={TEST_IDS.workflow.quickApprove}
                                 disabled={approveMutation.isPending && approveMutation.variables === task.id}
-                                onClick={() => approveMutation.mutate(task.id)}
+                                onClick={() => setConfirmApproveTaskId(task.id)}
                               >
                                 {approveMutation.isPending && approveMutation.variables === task.id ? "通过中..." : "通过"}
                               </Button>
@@ -418,5 +424,27 @@ export function WorkflowTasksPage() {
           testIdPrefix="workflow-tasks"
         />
     </ListWorkspace>
+    <ConfirmDialog
+      open={Boolean(confirmCopy)}
+      onOpenChange={(open) => {
+        if (!open) {
+          setConfirmApproveTaskId(null);
+        }
+      }}
+      title={confirmCopy?.title ?? ""}
+      description={confirmCopy?.description}
+      confirmLabel={confirmCopy?.confirmLabel}
+      variant={confirmCopy?.variant}
+      testId="workflow-action-confirm-dialog"
+      confirmTestId="workflow-action-confirm-submit"
+      cancelTestId="workflow-action-confirm-cancel"
+      onConfirm={async () => {
+        if (!confirmApproveTaskId) {
+          return;
+        }
+        await approveMutation.mutateAsync(confirmApproveTaskId);
+      }}
+    />
+    </>
   );
 }