收口报销详情返回与金额展示（07-27-yang-jun-reimbursement-readiness）

2026-08-01 15:03:48 +08:00
@@ -68,7 +68,7 @@ import {
 import { resolveErrorMessage } from "../lib/resolveErrorMessage";
 import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
 import { hasCompleteTravelSummary } from "../lib/reimbursementTravel";
-import { formatDisplayDateTime } from "../lib/displayFormat";
+import { formatDisplayDateTime, formatMoney } from "../lib/displayFormat";
 import { attachmentRequiresDownloadReason, type AttachmentGovernanceFields } from "../lib/attachmentGovernance";
 import { TEST_IDS } from "../lib/testIds";
 import { withUploadTimeout } from "../lib/uploadTimeout";
@@ -119,17 +119,6 @@ function todayDate() {
  return new Date().toISOString().slice(0, 10);
 }

-function formatCurrency(value: string | null | undefined) {
-  const numberValue = Number(value ?? 0);
-  if (!Number.isFinite(numberValue)) {
-    return "¥0.00";
-  }
-  return new Intl.NumberFormat("zh-CN", {
-    style: "currency",
-    currency: "CNY",
-  }).format(numberValue);
-}
-
 function formatDate(value: string | null | undefined) {
  return value || "未填写";
 }
@@ -875,7 +864,7 @@ export function MobileReimbursementDetailPage() {

  const displayCode = resolveReimbursementDisplayCode(detail);
  const showSubmitAction = Boolean(canEdit && canSubmitExpense);
-  const showStickyActions = Boolean(showSubmitAction || canOpenInvoiceDialog);
+  const showStickyActions = showSubmitAction;
  const showSecondaryActions = Boolean(actionError || canDeleteDraft);

  return (
@@ -910,7 +899,7 @@ export function MobileReimbursementDetailPage() {
        </div>
        <div data-testid="mobile-reimbursement-summary">
          <div className="text-xs text-zinc-500">合计金额</div>
-          <div className="mt-1 text-3xl font-semibold text-zinc-900">{formatCurrency(detail.totalAmount)}</div>
+          <div className="mt-1 text-3xl font-semibold text-zinc-900">{formatMoney(detail.totalAmount)}</div>
        </div>
        <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
          <div className="rounded-lg bg-zinc-50 px-3 py-2">
@@ -1041,7 +1030,7 @@ export function MobileReimbursementDetailPage() {
                    <div className="truncate text-sm font-semibold text-zinc-900">{item.expenseType?.name ?? "费用"}</div>
                    <div className="mt-1 text-xs text-zinc-500">{formatDate(item.expenseDate)}</div>
                  </div>
-                  <div className="shrink-0 text-base font-semibold text-zinc-900">{formatCurrency(item.amount)}</div>
+                  <div className="shrink-0 text-base font-semibold text-zinc-900">{formatMoney(item.amount)}</div>
                </div>
                {item.description ? <p className="mt-2 text-sm leading-5 text-zinc-600">{item.description}</p> : null}
                {canEdit ? (
@@ -1192,7 +1181,7 @@ export function MobileReimbursementDetailPage() {
                      <span className="inline-flex rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700">发票</span>
                      <span className="mt-2 block truncate text-sm font-semibold text-zinc-900">{formatInvoiceDisplayTitle(invoice)}</span>
                      <span className="mt-1 block text-xs text-zinc-500">
-                        {[resolveInvoicePartyText(invoice), invoice.invoiceDate ? formatDate(invoice.invoiceDate) : "", formatCurrency(invoice.totalAmount)].filter(Boolean).join(" · ")}
+                        {[resolveInvoicePartyText(invoice), invoice.invoiceDate ? formatDate(invoice.invoiceDate) : "", formatMoney(invoice.totalAmount)].filter(Boolean).join(" · ")}
                      </span>
                      <span className="mt-1 block text-xs text-zinc-500">明细：{resolveLinkedItemLabel(invoice.linkedItemId)}</span>
                      {invoiceHint ? <span className="mt-1 block text-xs text-zinc-500">{invoiceHint}</span> : null}
@@ -1316,17 +1305,6 @@ export function MobileReimbursementDetailPage() {
          data-testid="mobile-reimbursement-sticky-actions"
        >
          <div className="mobile-sticky-action-grid">
-            {canOpenInvoiceDialog ? (
-              <Button
-                className="min-h-11 min-w-0 px-2 text-sm whitespace-nowrap"
-                data-testid="mobile-reimbursement-sticky-invoice-add"
-                variant={showSubmitAction ? "secondary" : "default"}
-                type="button"
-                onClick={() => closeInvoiceDialog(true)}
-              >
-                添加发票
-              </Button>
-            ) : null}
            {showSubmitAction ? (
              <Button
                className="min-h-11 min-w-0 px-2 text-sm whitespace-nowrap"
@@ -1513,7 +1491,7 @@ export function MobileReimbursementDetailPage() {
                            ) : null}
                          </div>
                          <div className="mt-1 text-xs text-zinc-500">
-                            {[resolveInvoicePartyText(invoice), invoice.invoiceDate ? formatDate(invoice.invoiceDate) : "", formatCurrency(invoice.totalAmount)].filter(Boolean).join(" · ")}
+                            {[resolveInvoicePartyText(invoice), invoice.invoiceDate ? formatDate(invoice.invoiceDate) : "", formatMoney(invoice.totalAmount)].filter(Boolean).join(" · ")}
                          </div>
                        </div>
                      </div>
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ChevronRight } from "lucide-react";
+import { ArrowLeft, ChevronRight } from "lucide-react";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { fetchExpenseTypes } from "../api/expenseTypes";
@@ -72,7 +72,12 @@ import {
 import { useInvoiceOcrTracker } from "../hooks/useInvoiceOcrTracker";
 import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
 import { attachmentRequiresDownloadReason, type AttachmentGovernanceFields } from "../lib/attachmentGovernance";
-import { formatDisplayDate, formatDisplayDateTime } from "../lib/displayFormat";
+import { formatDisplayDate, formatDisplayDateTime, formatMoney } from "../lib/displayFormat";
+import {
+  buildPcDetailSource,
+  resolvePcDetailSource,
+  type PcDetailNavigationState,
+} from "../lib/pcDetailNavigation";
 import { TEST_IDS } from "../lib/testIds";
 import { PDF_FILE_ACCEPT, rejectedPdfMessage, splitPdfFiles } from "../lib/pdfFiles";
 import { ReimbursementActions } from "./reimbursement-detail/ReimbursementActions";
@@ -100,6 +105,7 @@ function buildActionErrorMessage(error: unknown, fallbackMessage: string) {

 export function ReimbursementDetailPage() {
  const { reimbursementId = "" } = useParams();
+  const location = useLocation();
  const navigate = useNavigate();
  const { permissions, me, accessToken } = useAuth();
  const queryClient = useQueryClient();
@@ -129,6 +135,10 @@ export function ReimbursementDetailPage() {
    amount: "",
    description: "",
  });
+  const currentDetailSource = buildPcDetailSource(location.pathname, location.search);
+  const navigationState = location.state as PcDetailNavigationState | null;
+  const backSource = resolvePcDetailSource(navigationState?.from, currentDetailSource) ?? "/reimbursements";
+  const backLabel = backSource.startsWith("/workflow/tasks/") ? "返回审批详情" : "返回报销列表";
  const runGuarded = useUnsavedChangesGuard(
    Boolean(itemEditor) ||
      selectedInvoiceFiles.length > 0 ||
@@ -749,7 +759,7 @@ export function ReimbursementDetailPage() {
      <div className="card-std space-y-3 p-5">
        <p className="text-sm text-red-600">{message}</p>
        <Button asChild variant="secondary">
-          <Link to="/reimbursements">返回报销列表</Link>
+          <Link replace to={backSource}>{backLabel}</Link>
        </Button>
      </div>
    );
@@ -1042,13 +1052,10 @@ export function ReimbursementDetailPage() {
      );
    }

-    return (
-      <Button asChild data-testid="reimbursement-primary-action">
-        <Link to="/reimbursements">返回列表</Link>
-      </Button>
-    );
+    return null;
  })();

+  const hasMoreActions = detail.status !== "paid" || canDeleteReimbursement;
  const secondaryActions = [
    detail.status === "reviewing" && canRemindPendingWorkflow && pendingTaskId ? (
      <Button
@@ -1061,29 +1068,36 @@ export function ReimbursementDetailPage() {
      >
        {remindMutation.isPending ? "催办中..." : "催办审批"}
      </Button>
-    ) : detail.status === "paid" ? (
+    ) : null,
+    detail.status === "paid" ? (
      <Button key="print" asChild variant="secondary">
        <Link to={`/reimbursements/${detail.id}/print`}>打印 / PDF</Link>
      </Button>
-    ) : (
-      <Button key="back" asChild variant="secondary" data-testid="reimbursement-back">
-        <Link to="/reimbursements">报销列表</Link>
+    ) : null,
+    hasMoreActions ? (
+      <Button
+        key="more"
+        type="button"
+        variant="secondary"
+        data-testid="reimbursement-more-toggle"
+        onClick={() => setShowSecondaryDetail((value) => !value)}
+      >
+        {showSecondaryDetail ? "收起更多" : "更多"}
      </Button>
-    ),
-    <Button
-      key="more"
-      type="button"
-      variant="secondary"
-      data-testid="reimbursement-more-toggle"
-      onClick={() => setShowSecondaryDetail((value) => !value)}
-    >
-      {showSecondaryDetail ? "收起更多" : "更多"}
-    </Button>,
+    ) : null,
  ];

  return (
    <PageScaffold>
      {downloadReasonDialog}
+      <div>
+        <Button asChild className="min-h-11 px-2" data-testid="reimbursement-back" variant="ghost">
+          <Link replace to={backSource}>
+            <ArrowLeft aria-hidden="true" className="size-4" />
+            {backLabel}
+          </Link>
+        </Button>
+      </div>
      <EntityOverviewHero
        title={`报销详情 ${displayCode}`}
        meta={(
@@ -1112,7 +1126,7 @@ export function ReimbursementDetailPage() {
                <div className="detail-fact-grid xl:grid-cols-3" data-testid="reimbursement-summary">
                  <div className="detail-fact-card">
                    <div className="detail-fact-card__label">金额</div>
-                    <div className="detail-fact-card__value">¥{detail.totalAmount ?? "-"}</div>
+                    <div className="detail-fact-card__value">{formatMoney(detail.totalAmount)}</div>
                  </div>
                  <div className="detail-fact-card">
                    <div className="detail-fact-card__label">当前处理</div>
@@ -1224,9 +1238,6 @@ export function ReimbursementDetailPage() {
                            <Link to={`/reimbursements/${detail.id}/print`}>打印 / PDF</Link>
                          </Button>
                        ) : null}
-                        <Button asChild variant="secondary" data-testid="reimbursement-secondary-back">
-                          <Link to="/reimbursements">报销列表</Link>
-                        </Button>
                        {canDeleteReimbursement ? (
                          <Button
                            data-testid="reimbursement-delete-draft"
@@ -1307,7 +1318,7 @@ export function ReimbursementDetailPage() {
                    </TableCell>
                    <TableCell>{item.expenseDate ?? "-"}</TableCell>
                    <TableCell>
-                      <div>{item.amount}</div>
+                      <div>{formatMoney(item.amount)}</div>
                      {precheckStandardChecks
                        .filter((check) => check.itemId === item.id)
                        .map((check) => (
@@ -1315,8 +1326,8 @@ export function ReimbursementDetailPage() {
                            key={check.standardId}
                            className={`mt-1 text-xs ${check.exceeded ? (check.controlMode === "block" ? "text-red-600" : "text-amber-600") : "text-zinc-500"}`}
                          >
-                            标准 ¥{check.maxAmount}/{check.perUnit}
-                            {check.exceeded ? `，超出 ¥${check.exceededAmount}` : ""}
+                            标准 {formatMoney(check.maxAmount)}/{check.perUnit}
+                            {check.exceeded ? `，超出 ${formatMoney(check.exceededAmount)}` : ""}
                          </div>
                        ))}
                    </TableCell>
@@ -1453,7 +1464,7 @@ export function ReimbursementDetailPage() {
                          <span className="min-w-0 flex-1">
                            <span className="block truncate font-medium text-zinc-900">{formatInvoiceDisplayTitle(invoice)}</span>
                            <span className="mt-1 block text-xs text-zinc-500">
-                              {[resolveInvoicePartyText(invoice), invoice.invoiceDate ? formatDisplayDate(invoice.invoiceDate) : "", `¥${invoice.totalAmount ?? "-"}`].filter(Boolean).join(" · ")}
+                              {[resolveInvoicePartyText(invoice), invoice.invoiceDate ? formatDisplayDate(invoice.invoiceDate) : "", formatMoney(invoice.totalAmount)].filter(Boolean).join(" · ")}
                            </span>
                            <span className="mt-1 block text-xs text-zinc-500">明细：{resolveLinkedItemLabel(invoice.linkedItemId)}</span>
                            {invoiceHint ? <span className="mt-1 block text-xs text-zinc-500">{invoiceHint}</span> : null}
@@ -1645,7 +1656,7 @@ export function ReimbursementDetailPage() {
                          <div className="space-y-1">
                            <div className="font-medium text-zinc-900">{formatInvoiceDisplayTitle(item)}</div>
                            <div className="text-zinc-600">
-                              {[resolveInvoicePartyText(item), item.invoiceDate ? formatDisplayDate(item.invoiceDate) : "", `金额 ¥${item.totalAmount ?? "-"}`].filter(Boolean).join(" · ")}
+                              {[resolveInvoicePartyText(item), item.invoiceDate ? formatDisplayDate(item.invoiceDate) : "", `金额 ${formatMoney(item.totalAmount)}`].filter(Boolean).join(" · ")}
                            </div>
                            <div className="text-xs text-zinc-500">
                              原始文件：{item.originalName || "未记录原始文件"} · 上传时间 {formatDisplayDateTime(item.createdAt)}
@@ -1769,7 +1780,7 @@ export function ReimbursementDetailPage() {
                      <div key={`${item.itemId}-${item.standardId}`} className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-amber-700">
                        <div className="font-medium">{item.expenseTypeName}</div>
                        <div>
-                          当前 ¥{item.amount} / 标准 ¥{item.maxAmount}/{item.perUnit} / 超出 ¥{item.exceededAmount}
+                          当前 {formatMoney(item.amount)} / 标准 {formatMoney(item.maxAmount)}/{item.perUnit} / 超出 {formatMoney(item.exceededAmount)}
                        </div>
                        <div>{item.standardName}</div>
                      </div>
@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
@@ -20,6 +20,7 @@ import { hasPermission } from "../auth/permissions";
 import { toast } from "sonner";
 import { downloadBlob } from "../lib/download";
 import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
+import { buildPcDetailSource } from "../lib/pcDetailNavigation";
 import { Pagination } from "../components/common/Pagination";
 import { ActionConfirmDialog } from "../components/common/ActionConfirmDialog";
 import { StatusBadge } from "../components/common/StatusBadge";
@@ -146,6 +147,7 @@ function resolveListAction(item: ReimbursementListItem) {

 export function ReimbursementsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
  const navigate = useNavigate();
  const { permissions, me } = useAuth();
  const queryClient = useQueryClient();
@@ -171,6 +173,7 @@ export function ReimbursementsPage() {
  const canShowListActions = canViewAll || showProxyOwnerSelector || canUseFinanceTools;
  const showAdvancedTools = scope === "all" || showProxyOwnerSelector;
  const shouldLoadCreateOptions = canCreateExpense;
+  const currentListSource = buildPcDetailSource(location.pathname, location.search);

  const listQuery = useQuery({
    queryKey: ["reimbursements", "list", status, page, scope],
@@ -230,7 +233,7 @@ export function ReimbursementsPage() {
      } else {
        toast.success("报销单已创建");
      }
-      navigate(`/reimbursements/${response.id}`);
+      navigate(`/reimbursements/${response.id}`, { state: { from: currentListSource } });
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "创建报销单失败"));
@@ -571,6 +574,7 @@ export function ReimbursementsPage() {
                      >
                        <Link
                          to={listAction.to}
+                          state={{ from: currentListSource }}
                          data-testid="reimbursement-mobile-detail-link"
                        >
                          {listAction.mobileLabel}
@@ -672,6 +676,7 @@ export function ReimbursementsPage() {
                            >
                              <Link
                                to={listAction.to}
+                                state={{ from: currentListSource }}
                                data-testid="reimbursement-detail-link"
                              >
                                {listAction.label}
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
-import { Link, Navigate, useNavigate, useParams } from "react-router-dom";
+import { Link, Navigate, useLocation, useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
@@ -34,6 +34,11 @@ import { Button } from "../components/ui/button";
 import { Textarea } from "../components/ui/textarea";
 import { resolvePurchaseDisplayCode } from "../lib/approvalDisplay";
 import { formatDisplayDateTime } from "../lib/displayFormat";
+import {
+  buildPcDetailSource,
+  resolvePcDetailSource,
+  type PcDetailNavigationState,
+} from "../lib/pcDetailNavigation";
 import { getWorkflowConfirmCopy, type WorkflowConfirmAction } from "../lib/workflowActionConfirm";

 function entityTitle(entityType: string | undefined) {
@@ -118,6 +123,7 @@ type SecondaryWorkflowAction = "reject" | "return" | "transfer";

 export function WorkflowTaskDetailPage() {
  const { taskId = "" } = useParams();
+  const location = useLocation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { permissions } = useAuth();
@@ -130,6 +136,9 @@ export function WorkflowTaskDetailPage() {
  const [activeSecondaryAction, setActiveSecondaryAction] = useState<SecondaryWorkflowAction | null>(null);
  const [confirmAction, setConfirmAction] = useState<WorkflowConfirmAction | null>(null);
  const [transferConfirmOpen, setTransferConfirmOpen] = useState(false);
+  const currentTaskSource = buildPcDetailSource(location.pathname, location.search);
+  const navigationState = location.state as PcDetailNavigationState | null;
+  const backSource = resolvePcDetailSource(navigationState?.from, currentTaskSource) ?? "/workflow/tasks";

  const detailQuery = useQuery({
    enabled: Boolean(taskId),
@@ -263,10 +272,10 @@ export function WorkflowTaskDetailPage() {
        <p className="text-sm text-red-600">{message}</p>
        <Button
          variant="secondary"
-          onClick={() => navigate("/workflow/tasks")}
+          onClick={() => navigate(backSource, { replace: true })}
          type="button"
        >
-          返回待办列表
+          {backSource.startsWith("/reimbursements") ? "返回报销列表" : "返回待办列表"}
        </Button>
      </div>
    );
@@ -292,7 +301,9 @@ export function WorkflowTaskDetailPage() {
        )}
        actions={(
          <Button asChild variant="secondary" data-testid="workflow-task-back">
-            <Link to="/workflow/tasks">返回待办列表</Link>
+            <Link replace to={backSource}>
+              {backSource.startsWith("/reimbursements") ? "返回报销列表" : "返回待办列表"}
+            </Link>
          </Button>
        )}
      />
@@ -397,6 +408,7 @@ export function WorkflowTaskDetailPage() {
                <Button asChild variant="secondary">
                  <Link
                    data-testid="workflow-task-reimbursement-detail-link"
+                    state={{ from: currentTaskSource }}
                    to={`/reimbursements/${encodeURIComponent(detail.reimbursement.id)}`}
                  >
                    查看报销单