实现 B-2b 统一报销工作台迁移（reimbursement-form-shared-component-migration）

client/src/pages/MobileApprovalsPage.tsx

@@ -1,19 +1,14 @@
 import { resolveErrorMessage as resolveUserErrorMessage } from "../lib/resolveErrorMessage";
 import { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Link, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { Link, Navigate, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 import { fetchLeaveRequests, type LeaveRequestItem } from "../api/leave";
 import { fetchPurchaseRequests, type PurchaseRequestSummary } from "../api/purchaseRequests";
 import {
-  downloadReimbursementAttachment,
-  fetchReimbursementAttachmentPreviewUrl,
-  fetchReimbursementDetail,
-  fetchReimbursementMaterialPreviewBundle,
   fetchReimbursements,
   type ReimbursementListItem,
 } from "../api/reimbursements";
-import { fetchInvoiceSignedUrl } from "../api/invoicePool";
 import { isApiError } from "../api/types";
 import {
   approveWorkflowTask,
@@ -29,8 +24,6 @@ import {
 import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
 import { ConfirmDialog } from "../components/common/ConfirmDialog";
-import { useAttachmentDownloadReasonDialog } from "../components/common/useAttachmentDownloadReasonDialog";
-import { ReimbursementItemEvidenceList } from "../components/reimbursements/ReimbursementItemEvidenceList";
 import { PageHeader } from "../components/common/PageHeader";
 import { StatusBadge } from "../components/common/StatusBadge";
 import { MobileDetailHeader } from "../components/mobile/MobileDetailHeader";
@@ -46,13 +39,6 @@ import { MOBILE_APPROVAL_PERMISSIONS } from "../features/mobile/navigation";
 import { resolvePurchaseDisplayCode, workflowActionLabel } from "../lib/approvalDisplay";
 import { businessPrimaryLabel, compactBusinessReference, joinBusinessMeta } from "../lib/businessDisplay";
 import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
-import { attachmentRequiresDownloadReason, type AttachmentGovernanceFields } from "../lib/attachmentGovernance";
-import {
-  buildReimbursementApprovalEvidence,
-  buildReimbursementReturnReference,
-} from "../lib/reimbursementApprovalProjection";
-import { isWecomWebView } from "../lib/runtimeContext";
-import { openFileInBrowser, previewFileInWecom } from "../lib/wecomFilePreview";
 import { cn } from "../lib/utils";
 import { getWorkflowConfirmCopy, type WorkflowConfirmAction } from "../lib/workflowActionConfirm";
 import {
@@ -362,14 +348,15 @@ function toEmployeeProgressCards(input: {
   return [...reimbursementCards, ...leaveCards, ...purchaseCards].slice(0, 8);
 }
 
-export function MobileApprovalsPage() {
+export function MobileApprovalsPage({ preloadedTaskDetail = null }: { preloadedTaskDetail?: WorkflowTaskDetail | null } = {}) {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const location = useLocation();
   const routeParams = useParams();
   const { me, permissions, accessToken, offlineAccessMode } = useAuth();
   const [searchParams, setSearchParams] = useSearchParams();
-  const deepLinkTaskId = routeParams.taskId?.trim() || searchParams.get("taskId")?.trim() || "";
+  const legacyQueryTaskId = routeParams.taskId ? "" : searchParams.get("taskId")?.trim() || "";
+  const deepLinkTaskId = routeParams.taskId?.trim() || legacyQueryTaskId;
   const isPushDetail = Boolean(deepLinkTaskId);
 
   const [selectedTaskId, setSelectedTaskId] = useState(deepLinkTaskId);
@@ -469,7 +456,7 @@ export function MobileApprovalsPage() {
   });
 
   const detailQuery = useQuery({
-    enabled: Boolean(selectedTaskId) && canUseRemote,
+    enabled: Boolean(selectedTaskId) && !legacyQueryTaskId && canUseRemote && !preloadedTaskDetail,
     queryKey: ["mobile", "workflow", "task-detail", selectedTaskId],
     queryFn: () => fetchWorkflowTaskDetail(selectedTaskId),
   });
@@ -560,56 +547,10 @@ export function MobileApprovalsPage() {
     [filteredTaskCards, selectedTaskId],
   );
 
-  const selectedTask = detailQuery.data ?? cachedDetailQuery.data?.detail ?? selectedCachedTaskDetail;
-  const mobileReimbursementId = selectedTask?.reimbursement?.id ?? "";
-  const reimbursementDetailQuery = useQuery({
-    enabled: Boolean(mobileReimbursementId) && canUseRemote,
-    queryKey: ["reimbursements", mobileReimbursementId],
-    queryFn: () => fetchReimbursementDetail(mobileReimbursementId),
-  });
-  const reimbursementEvidence = useMemo(() => {
-    const snapshot = selectedTask?.workflowInstance?.contextData;
-    if (!reimbursementDetailQuery.data || !snapshot) return null;
-    return buildReimbursementApprovalEvidence(reimbursementDetailQuery.data, snapshot);
-  }, [reimbursementDetailQuery.data, selectedTask?.workflowInstance?.contextData]);
-  const { requestDownloadReason, downloadReasonDialog } = useAttachmentDownloadReasonDialog();
-  const openInvoiceMutation = useMutation({
-    mutationFn: async (invoiceId: string) => {
-      const result = await fetchInvoiceSignedUrl(invoiceId);
-      const openedInWecom = await previewFileInWecom({ url: result.signedUrl, name: result.originalName, size: result.fileSize });
-      if (!openedInWecom) openFileInBrowser(result.signedUrl);
-    },
-    onError: (actionError) => toast.error(resolveUserErrorMessage(actionError, "打开发票失败，请重试")),
-  });
-  const openAttachmentMutation = useMutation({
-    mutationFn: async ({ attachment, reason }: {
-      attachment: { id: string; originalName: string; fileSize: number } & AttachmentGovernanceFields;
-      reason?: string;
-    }) => {
-      if (isWecomWebView()) {
-        const result = await fetchReimbursementAttachmentPreviewUrl(mobileReimbursementId, attachment.id, reason);
-        await previewFileInWecom({ url: result.signedUrl, name: result.originalName, size: result.fileSize });
-        return null;
-      }
-      return downloadReimbursementAttachment(mobileReimbursementId, attachment.id, reason);
-    },
-    onSuccess: (result) => {
-      if (!result) return;
-      const url = URL.createObjectURL(result.blob);
-      window.open(url, "_blank", "noopener,noreferrer");
-      window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
-    },
-    onError: (actionError) => toast.error(resolveUserErrorMessage(actionError, "打开附件失败，请重试")),
-  });
-  const materialPreviewMutation = useMutation({
-    mutationFn: (reason?: string) => fetchReimbursementMaterialPreviewBundle(mobileReimbursementId, reason),
-    onSuccess: (bundle) => openFileInBrowser(bundle.signedUrl),
-    onError: (actionError) => toast.error(resolveUserErrorMessage(actionError, "打开完整材料失败，可逐份查看原件")),
-  });
+  const selectedTask = preloadedTaskDetail ?? detailQuery.data ?? cachedDetailQuery.data?.detail ?? selectedCachedTaskDetail;
   const selectedReference = selectedTask ? resolveWorkflowTaskReferenceSnapshot(selectedTask) : null;
   const selectedDisplayReference = selectedTaskCard?.reference ?? publicReference(selectedReference?.reference);
   const selectedDetailReference = selectedDisplayReference ??
-    publicReference(selectedTask?.reimbursement?.formNumber) ??
     publicReference(selectedTask?.purchaseRequest?.requestNo) ??
     publicReference(selectedTask?.travelRequest?.requestNo);
   const selectedDetailTitle = selectedTask
@@ -620,24 +561,18 @@ export function MobileApprovalsPage() {
       })
     : "";
   const selectedApplicantName = selectedTaskCard?.applicantName ??
-    selectedTask?.reimbursement?.submitter?.name ??
     selectedTask?.leaveRequest?.owner?.name ??
     selectedTask?.attendanceCorrection?.owner?.name ??
     selectedTask?.purchaseRequest?.applicant?.name ??
     selectedTask?.travelRequest?.applicant?.name ??
     null;
   const selectedMetric = selectedTaskCard?.metric ??
-    selectedTask?.reimbursement?.totalAmount ??
     (selectedTask?.leaveRequest ? `${selectedTask.leaveRequest.requestedDays} 天` : null) ??
     (selectedTask?.attendanceCorrection ? selectedTask.attendanceCorrection.workDate : null) ??
     selectedTask?.purchaseRequest?.totalAmount ??
     selectedTask?.travelRequest?.estimatedAmount ??
     null;
   const selectedTaskAllowsActions = Boolean(taskTab === "pending" && selectedTask?.task.status === "pending");
-  const isSelectedReimbursement = selectedTask?.workflowInstance?.entityType === "reimbursement";
-  const reimbursementDecisionReady = !isSelectedReimbursement || Boolean(
-    canUseRemote && reimbursementEvidence && selectedTask?.workflowInstance?.contextData.parseStatus === "ready",
-  );
   const isOfflineUncachedDeepLink = Boolean(selectedTaskId) && !selectedTask && !canUseRemote;
   const employeeProgressCards = useMemo(
     () =>
@@ -666,10 +601,6 @@ export function MobileApprovalsPage() {
   });
 
   function requestMobileWorkflowAction(action: WorkflowConfirmAction) {
-    if (isSelectedReimbursement && !reimbursementDecisionReady) {
-      setError("报销审批需联网加载完整明细、票据和提交时检查后才能处理。");
-      return;
-    }
     if (!canUseRemote && action === "return") {
       setError("当前离线不支持退回，请联网后再处理。");
       return;
@@ -689,31 +620,6 @@ export function MobileApprovalsPage() {
     setConfirmAction(action);
   }
 
-  function appendReturnReference(reference: string) {
-    if (!reference) return;
-    setComment((current) => current.includes(reference) ? current : `${current.trim()}\n${reference}`.trim());
-    setShowSecondaryActions(true);
-    setError("");
-  }
-
-  async function handleOpenAttachment(attachmentId: string) {
-    const attachment = reimbursementDetailQuery.data?.attachments.find((item) => item.id === attachmentId);
-    if (!attachment) {
-      toast.error("附件信息已变化，请刷新后重试");
-      return;
-    }
-    const reason = await requestDownloadReason(attachment);
-    if (reason === null) return;
-    openAttachmentMutation.mutate({ attachment, reason });
-  }
-
-  async function handleOpenAllMaterials() {
-    const governedAttachment = reimbursementDetailQuery.data?.attachments.find(attachmentRequiresDownloadReason);
-    const reason = governedAttachment ? await requestDownloadReason(governedAttachment) : undefined;
-    if (reason === null) return;
-    materialPreviewMutation.mutate(reason);
-  }
-
   async function refreshDraftQueueCache() {
     if (!ownerEmployeeId) {
       return [];
@@ -737,9 +643,6 @@ export function MobileApprovalsPage() {
       if (!selectedTask) {
         throw new Error("当前审批任务尚未缓存，请联网加载后再操作");
       }
-      if (selectedTask.workflowInstance?.entityType === "reimbursement") {
-        throw new Error("报销审批不能保存离线草稿，请联网核对完整内容后处理");
-      }
       if (!selectedTask.allowedActions.includes(action)) {
         throw new Error("当前审批任务不允许该动作");
       }
@@ -782,9 +685,6 @@ export function MobileApprovalsPage() {
       if (!selectedTask) {
         throw new Error("当前审批任务尚未缓存，请联网加载后再操作");
       }
-      if (selectedTask.workflowInstance?.entityType === "reimbursement" && !reimbursementDecisionReady) {
-        throw new Error("完整报销内容或提交时检查尚未就绪，暂时不能处理");
-      }
       if (!selectedTask.allowedActions.includes(action)) {
         throw new Error("当前审批任务不允许该动作");
       }
@@ -944,14 +844,16 @@ export function MobileApprovalsPage() {
     : "最近 30 天已处理审批用于复核，不支持再次审批。";
   const selectedActionText = selectedTask
     ? selectedTaskAllowsActions
-      ? isSelectedReimbursement && !reimbursementDecisionReady
-        ? "报销审批需联网加载完整明细、票据和提交时检查；内容就绪前不能通过、退回、驳回或保存草稿。"
-        : canUseRemote
+      ? canUseRemote
         ? "核对摘要和历史后，可在底部通过、驳回或退回。"
-        : "当前离线，仅支持保存通过或驳回草稿，联网后再同步。"
+        : ""
       : "当前任务已处理，本页只展示业务摘要和处理历史。"
     : "";
 
+  if (legacyQueryTaskId) {
+    return <Navigate replace state={{ from: currentMobileSource }} to={`/mobile/approvals/${encodeURIComponent(legacyQueryTaskId)}`} />;
+  }
+
   return (
     <>
     <PageScaffold
@@ -982,9 +884,7 @@ export function MobileApprovalsPage() {
       {!isOnline && canAccessRemoteApprovals ? (
         <p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-700">
           当前离线{offlineAccessMode ? "，已使用本地会话快照进入移动审批壳。" : "。"}
-          {isSelectedReimbursement
-            ? "当前报销任务只显示摘要，不能保存审批草稿；请联网核对完整内容。"
-            : "仅支持查看已缓存审批任务，并保存通过 / 驳回草稿；联网同步成功后才会正式提交。"}
+          仅支持查看已缓存审批任务，并保存通过 / 驳回草稿；联网同步成功后才会正式提交。
         </p>
       ) : null}
 
@@ -1216,7 +1116,7 @@ export function MobileApprovalsPage() {
           <>
             <div className="mobile-subcard bg-white text-sm" data-testid="mobile-approvals-detail-focus">
               <div className="text-xs font-semibold text-zinc-500">下一步</div>
-              <div className="mt-1 leading-6 text-zinc-700">{selectedActionText}</div>
+              {selectedActionText ? <div className="mt-1 leading-6 text-zinc-700">{selectedActionText}</div> : null}
             </div>
 
             <div className="mobile-list-card text-sm">
@@ -1261,77 +1161,6 @@ export function MobileApprovalsPage() {
                   </div>
                 ) : null}
               </div>
-              {selectedTask.reimbursement ? (
-                <div className="mt-3 space-y-3">
-                  <div className="rounded-lg bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
-                    {joinBusinessMeta([`报销日期：${selectedTask.reimbursement.reimbursementDate ?? "-"}`, selectedTask.reimbursement.description])}
-                  </div>
-                  <Button asChild className="w-full" variant="secondary">
-                    <Link
-                      data-testid="mobile-approval-reimbursement-detail-link"
-                      state={{ from: currentMobileSource }}
-                      to={`/mobile/reimbursements/${encodeURIComponent(selectedTask.reimbursement.id)}`}
-                    >
-                      查看完整报销单
-                    </Link>
-                  </Button>
-                  {!canUseRemote ? (
-                    <p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-800">
-                      当前只显示允许离线保存的摘要。请联网加载完整明细和票据后再处理该报销审批。
-                    </p>
-                  ) : reimbursementDetailQuery.isLoading ? (
-                    <p className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">
-                      正在加载完整报销内容；加载完成前所有审批动作均不可用。
-                    </p>
-                  ) : reimbursementDetailQuery.isError ? (
-                    <div className="space-y-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700" role="alert">
-                      <p>{resolveUserErrorMessage(reimbursementDetailQuery.error, "完整报销内容加载失败，暂时不能审批。")}</p>
-                      <Button className="min-h-11" onClick={() => reimbursementDetailQuery.refetch()} type="button" variant="secondary">重试加载</Button>
-                    </div>
-                  ) : null}
-                  {selectedTask.workflowInstance?.contextData.parseStatus === "invalid" ? (
-                    <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700" role="alert">
-                      提交时检查记录无法解析，暂时不能审批；请联系系统管理员核对。
-                    </p>
-                  ) : null}
-                  {reimbursementEvidence ? (
-                    <>
-                      {selectedTask.task.status !== "pending" ? (
-                        <p className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-800">
-                          当前版本可能包含申请人在退回后所做的修改；历史审批意见和提交时检查仍对应当时版本。
-                        </p>
-                      ) : null}
-                      <ReimbursementItemEvidenceList
-                        evidence={reimbursementEvidence}
-                        capabilities={{
-                          onOpenInvoice: (invoice) => openInvoiceMutation.mutate(invoice.id),
-                          onOpenAttachment: (attachment) => void handleOpenAttachment(attachment.id),
-                          onOpenMaterialBundle: () => void handleOpenAllMaterials(),
-                          onReferenceItem: (item) => appendReturnReference(buildReimbursementReturnReference({ item })),
-                          onReferenceInvoice: (invoice) => appendReturnReference(buildReimbursementReturnReference({ invoice })),
-                        }}
-                      />
-                      <div className="grid gap-2" data-testid="mobile-reimbursement-approval-checks">
-                        <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-700">
-                          <p className="font-medium text-zinc-900">提交时检查</p>
-                          {selectedTask.workflowInstance?.contextData.budgetCheckStatus === "missing" ? (
-                            <p className="mt-1 text-amber-800">该次提交未记录预算快照。</p>
-                          ) : selectedTask.workflowInstance?.contextData.budgetCheckStatus === "not_applicable" ? (
-                            <p className="mt-1 text-zinc-600">提交时未匹配适用预算。</p>
-                          ) : selectedTask.workflowInstance?.contextData.budgetCheck ? (
-                            <p className="mt-1">预算 {selectedTask.workflowInstance.contextData.budgetCheck.budgetCode}，提交后使用率 {selectedTask.workflowInstance.contextData.budgetCheck.usagePercent}%</p>
-                          ) : null}
-                          <p className="mt-1">费用标准提示 {selectedTask.workflowInstance?.contextData.standardViolations.length ?? 0} 条</p>
-                        </div>
-                        <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-700">
-                          <p className="font-medium text-zinc-900">当前票据检查</p>
-                          <p className="mt-1">票据 {reimbursementEvidence.currentCheck.invoiceCount} 张，尚未对应明细 {reimbursementEvidence.currentCheck.unlinkedInvoiceCount} 张；需人工核对 {reimbursementEvidence.currentCheck.manualReviewItemCount} 条，申报额超出票面 {reimbursementEvidence.currentCheck.amountExceededItemCount} 条。</p>
-                        </div>
-                      </div>
-                    </>
-                  ) : null}
-                </div>
-              ) : null}
               {selectedTask.leaveRequest ? (
                 <div className="mt-3 rounded-lg bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
                   {joinBusinessMeta([`假期类型：${selectedTask.leaveRequest.leaveType?.name ?? "-"}`, `${selectedTask.leaveRequest.startDate ?? "-"} 至 ${selectedTask.leaveRequest.endDate ?? "-"}`])}
@@ -1393,7 +1222,6 @@ export function MobileApprovalsPage() {
                 <Textarea
                   id="mobile-approvals-comment"
                   data-testid="mobile-approvals-comment"
-                  disabled={isSelectedReimbursement && !reimbursementDecisionReady}
                   onChange={(event) => setComment(event.target.value)}
                   placeholder="意见（驳回/退回必填）"
                   rows={3}
@@ -1402,9 +1230,7 @@ export function MobileApprovalsPage() {
 
                 {!canUseRemote ? (
                   <p className="text-xs text-zinc-500">
-                    {isSelectedReimbursement
-                      ? "报销审批离线时不能保存审批草稿，请联网核对完整内容。"
-                      : "离线仅保存通过 / 驳回草稿，联网同步成功后才会正式提交。"}
+                    离线仅保存通过 / 驳回草稿，联网同步成功后才会正式提交。
                   </p>
                 ) : null}
 
@@ -1415,7 +1241,7 @@ export function MobileApprovalsPage() {
                       <Button
                         className="min-h-11 w-full"
                         data-testid="mobile-approvals-return"
-                        disabled={isActionSubmitting || !reimbursementDecisionReady || !canUseRemote || !selectedTask.allowedActions.includes("return")}
+                        disabled={isActionSubmitting || !canUseRemote || !selectedTask.allowedActions.includes("return")}
                         onClick={() => requestMobileWorkflowAction("return")}
                         type="button"
                         variant="secondary"
@@ -1425,7 +1251,7 @@ export function MobileApprovalsPage() {
                       <Button
                         className="min-h-11 w-full"
                         data-testid="mobile-approvals-reject"
-                        disabled={isActionSubmitting || !reimbursementDecisionReady || !selectedTask.allowedActions.includes("reject")}
+                        disabled={isActionSubmitting || !selectedTask.allowedActions.includes("reject")}
                         onClick={() => requestMobileWorkflowAction("reject")}
                         type="button"
                         variant="secondary"
@@ -1443,7 +1269,7 @@ export function MobileApprovalsPage() {
                     <Button
                       className="min-h-12 w-full"
                       data-testid="mobile-approvals-approve"
-                      disabled={isActionSubmitting || !reimbursementDecisionReady || !selectedTask.allowedActions.includes("approve")}
+                      disabled={isActionSubmitting || !selectedTask.allowedActions.includes("approve")}
                       onClick={() => requestMobileWorkflowAction("approve")}
                       type="button"
                     >
@@ -1648,7 +1474,6 @@ export function MobileApprovalsPage() {
         }
       }}
     />
-    {downloadReasonDialog}
     </>
   );
 }