FL6 完善财务台账与导出审计

client/src/pages/ReimbursementDetailPage.tsx

@@ -263,6 +263,7 @@ export function ReimbursementDetailPage() {
         paymentVoucherNo: params.payload.paymentVoucherNo || undefined,
         paymentDate: params.payload.paymentDate || undefined,
         paymentChannel: params.payload.paymentChannel,
+        paymentNote: params.payload.paymentNote || undefined,
       });
     },
     onSuccess: async (_data, params) => {
@@ -751,6 +752,13 @@ export function ReimbursementDetailPage() {
   }
 
   const detail = detailQuery.data;
+  const payment = detail.payment ?? {
+    paymentVoucherNo: null,
+    paymentDate: null,
+    paymentChannel: null,
+    paidAt: null,
+    paidBy: null,
+  };
   const displayCode = resolveReimbursementDisplayCode(detail);
   const isPaidReimbursement = detail.status === "paid";
   const erpSyncStatus = resolveErpSyncStatus(erpPreviewQuery.data?.exportState ?? null);
@@ -984,6 +992,44 @@ export function ReimbursementDetailPage() {
                 <div>说明：{detail.description || "-"}</div>
               </div>
 
+              <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="reimbursement-payment-status">
+                <div className="flex items-center justify-between gap-3">
+                  <div>
+                    <h4 className="text-base font-semibold text-zinc-900">付款状态</h4>
+                    <p className="text-xs text-zinc-500">付款备注写入审计日志，凭证、日期和操作人用于财务台账核对。</p>
+                  </div>
+                  <span
+                    className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                      detail.status === "paid"
+                        ? "border-emerald-200 bg-emerald-50 text-emerald-700"
+                        : "border-amber-200 bg-amber-50 text-amber-700"
+                    }`}
+                  >
+                    {detail.status === "paid" ? "已付款" : "未付款"}
+                  </span>
+                </div>
+                <div className="mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                    <div className="text-xs text-zinc-500">付款日期</div>
+                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentDate ?? "-"}</div>
+                  </div>
+                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                    <div className="text-xs text-zinc-500">付款凭证号</div>
+                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentVoucherNo ?? "-"}</div>
+                  </div>
+                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                    <div className="text-xs text-zinc-500">付款渠道</div>
+                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentChannel ?? "-"}</div>
+                  </div>
+                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                    <div className="text-xs text-zinc-500">操作人 / 时间</div>
+                    <div className="mt-1 font-medium text-zinc-900">
+                      {payment.paidBy?.name ?? "-"} · {formatDateTime(payment.paidAt)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
               {detail.linkedTravelRequest ? (
                 <div className="rounded-lg border border-sky-200 bg-sky-50/70 p-4 text-sm">
                   <div className="flex items-start justify-between gap-3">