R73-A3 优化轻交互 OCR 前端处理

client/src/pages/InvoicePoolPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
@@ -26,6 +26,7 @@ import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { toast } from "sonner";
 import { downloadBlob } from "../lib/download";
+import { formatInvoiceOcrErrorMessage } from "../lib/invoiceOcr";
 import { PageHeader } from "../components/common/PageHeader";
 import { Button } from "../components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
@@ -64,9 +65,14 @@ export function InvoicePoolPage() {
   const [editInvoiceCode, setEditInvoiceCode] = useState("");
   const [editInvoiceNumber, setEditInvoiceNumber] = useState("");
   const [editInvoiceDate, setEditInvoiceDate] = useState("");
+  const [editSellerName, setEditSellerName] = useState("");
+  const [editBuyerName, setEditBuyerName] = useState("");
+  const [editAmount, setEditAmount] = useState("");
+  const [editTaxAmount, setEditTaxAmount] = useState("");
   const [editTotalAmount, setEditTotalAmount] = useState("");
   const [error, setError] = useState("");
   const [confirmAction, setConfirmAction] = useState<{ type: string; invoiceId: string } | null>(null);
+  const previousDetailStatusRef = useRef<InvoicePoolStatus | null>(null);
 
   // --- Queries ---
 
@@ -140,9 +146,29 @@ export function InvoicePoolPage() {
     setEditInvoiceCode(detailQuery.data.invoiceCode ?? "");
     setEditInvoiceNumber(detailQuery.data.invoiceNumber ?? "");
     setEditInvoiceDate(detailQuery.data.invoiceDate ?? "");
+    setEditSellerName(detailQuery.data.sellerName ?? "");
+    setEditBuyerName(detailQuery.data.buyerName ?? "");
+    setEditAmount(detailQuery.data.amount ?? "");
+    setEditTaxAmount(detailQuery.data.taxAmount ?? "");
     setEditTotalAmount(detailQuery.data.totalAmount ?? "");
   }, [detailQuery.data, editOpen]);
 
+  useEffect(() => {
+    const currentStatus = detailQuery.data?.status ?? null;
+    const previousStatus = previousDetailStatusRef.current;
+
+    if (previousStatus === "pending_ocr" && currentStatus && currentStatus !== "pending_ocr") {
+      void queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
+      if (currentStatus === "available") {
+        toast.success("票据 OCR 已完成，可继续绑定或验真");
+      } else if (currentStatus === "ocr_failed") {
+        toast.error(`票据 OCR 未完成：${formatInvoiceOcrErrorMessage(detailQuery.data?.ocrLastError)}`);
+      }
+    }
+
+    previousDetailStatusRef.current = currentStatus;
+  }, [detailQuery.data?.ocrLastError, detailQuery.data?.status, queryClient]);
+
   useEffect(() => {
     if (!canManageInvoice && ownerScope === "all") {
       setOwnerScope("own");
@@ -188,7 +214,7 @@ export function InvoicePoolPage() {
       setDetailInvoiceId(data.invoicePoolId);
       setSelectedFile(null);
       setError("");
-      toast.success("上传成功");
+      toast.success(data.status === "pending_ocr" ? "上传成功，OCR 识别中" : "上传成功，可直接处理");
     },
     onError: (err) => handleError(err, "上传失败，请稍后重试"),
   });
@@ -246,6 +272,10 @@ export function InvoicePoolPage() {
         invoiceCode: editInvoiceCode.trim() ? editInvoiceCode.trim() : null,
         invoiceNumber: editInvoiceNumber.trim() ? editInvoiceNumber.trim() : null,
         invoiceDate: editInvoiceDate ? editInvoiceDate : null,
+        sellerName: editSellerName.trim() ? editSellerName.trim() : null,
+        buyerName: editBuyerName.trim() ? editBuyerName.trim() : null,
+        amount: editAmount.trim() ? editAmount.trim() : null,
+        taxAmount: editTaxAmount.trim() ? editTaxAmount.trim() : null,
         totalAmount: editTotalAmount.trim() ? editTotalAmount.trim() : null,
       });
     },
@@ -461,6 +491,14 @@ export function InvoicePoolPage() {
         setEditInvoiceNumber={setEditInvoiceNumber}
         editInvoiceDate={editInvoiceDate}
         setEditInvoiceDate={setEditInvoiceDate}
+        editSellerName={editSellerName}
+        setEditSellerName={setEditSellerName}
+        editBuyerName={editBuyerName}
+        setEditBuyerName={setEditBuyerName}
+        editAmount={editAmount}
+        setEditAmount={setEditAmount}
+        editTaxAmount={editTaxAmount}
+        setEditTaxAmount={setEditTaxAmount}
         editTotalAmount={editTotalAmount}
         setEditTotalAmount={setEditTotalAmount}
         confirmAction={confirmAction}