wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 7 软件包 项目 发布 百科 活动

feat(client): 票据中心精修与 testid（E6）

浏览代码 
- 上传/筛选/列表/绑定/详情轮询统一 Card/Table/Button
- 强化 OCR 状态展示（pending_ocr/ocr_failed）与错误可读性
- 增加 data-testid 供 E2E 稳定定位
这个提交包含在：
wangsli
2026-02-08 23:32:54 +08:00
父节点 e9974d4f59
当前提交 63103be653
共修改 2 个文件，包含 94 行新增和 58 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/pages/InvoicePoolPage.tsx
+93 -57
查看文件
@@ -14,6 +14,9 @@ import { fetchReimbursements } from "../api/reimbursements";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Card } from "../components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
const PAGE_SIZE = 20;
@@ -141,26 +144,35 @@ export function InvoicePoolPage() {
/>
{error ? (
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
{error}
</p>
) : null}
<section className="card-std space-y-3">
<Card className="space-y-3 p-6">
<h3 className="text-base font-semibold text-slate-900">上传票据（VAT OCR）</h3>
<input
accept="application/pdf,image/jpeg,image/png,image/webp"
data-testid="invoice-upload-file"
onChange={(event) => setSelectedFile(event.target.files?.[0] ?? null)}
type="file"
/>
<button className="btn-primary" onClick={() => uploadMutation.mutate()} type="button">
<Button
data-testid="invoice-upload-submit"
disabled={uploadMutation.isPending || !selectedFile}
onClick={() => uploadMutation.mutate()}
type="button"
>
{uploadMutation.isPending ? "上传中..." : "上传并触发OCR"}
</button>
</section>
</Button>
</Card>
<section className="card-std space-y-3">
<Card className="space-y-3 p-6">
<h3 className="text-base font-semibold text-slate-900">筛选与列表</h3>
<div className="flex flex-wrap gap-2">
<select
className="rounded-lg border border-slate-300 px-3 py-2 text-sm"
className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
data-testid="invoice-filter-status"
onChange={(event) => {
setStatus(event.target.value as InvoicePoolStatus | "");
setPage(1);
@@ -176,7 +188,8 @@ export function InvoicePoolPage() {
</select>
<select
className="rounded-lg border border-slate-300 px-3 py-2 text-sm"
className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
data-testid="invoice-filter-owner-scope"
onChange={(event) => {
setOwnerScope(event.target.value as "own" | "all");
setPage(1);
@@ -188,59 +201,72 @@ export function InvoicePoolPage() {
</select>
</div>
<div className="overflow-x-auto rounded-lg border border-slate-200">
<table className="min-w-full text-left text-sm">
<thead className="bg-slate-50 text-slate-600">
<div className="rounded-lg border border-slate-200">
<Table data-testid="invoice-pool-table">
<TableHeader>
<tr>
<th className="px-3 py-2">ID</th>
<th className="px-3 py-2">状态</th>
<th className="px-3 py-2">发票号</th>
<th className="px-3 py-2">OCR</th>
<th className="px-3 py-2">操作</th>
<TableHead>ID</TableHead>
<TableHead>状态</TableHead>
<TableHead>发票号</TableHead>
<TableHead>OCR</TableHead>
<TableHead className="w-40">操作</TableHead>
</tr>
</thead>
<tbody>
</TableHeader>
<TableBody>
{(listQuery.data?.items ?? []).length ? (
listQuery.data?.items.map((item) => (
<tr className="border-t border-slate-100" key={item.id}>
<td className="px-3 py-2 font-mono text-xs">{item.id}</td>
<td className="px-3 py-2">{item.status}</td>
<td className="px-3 py-2">
<TableRow data-testid="invoice-row" key={item.id}>
<TableCell className="font-mono text-xs">{item.id}</TableCell>
<TableCell>{item.status}</TableCell>
<TableCell>
{item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
</td>
<td className="px-3 py-2">
attempts={item.ocrAttempts}
{item.ocrLastError ? ` / ${item.ocrLastError}` : ""}
</td>
<td className="px-3 py-2">
</TableCell>
<TableCell>
{item.status === "pending_ocr" ? (
<span className="text-amber-700">
OCR 处理中（attempts={item.ocrAttempts}）
</span>
) : item.status === "ocr_failed" ? (
<span className="text-red-600">
OCR 失败（{item.ocrLastError || "unknown"}）
</span>
) : (
<span className="text-slate-600">attempts={item.ocrAttempts}</span>
)}
</TableCell>
<TableCell>
<div className="flex flex-wrap gap-2">
<button
className="btn-secondary"
<Button
data-testid="invoice-detail-button"
size="sm"
variant="secondary"
onClick={() => setDetailInvoiceId(item.id)}
type="button"
>
详情
</button>
<button
className="btn-secondary"
</Button>
<Button
data-testid="invoice-preview-button"
size="sm"
variant="secondary"
onClick={() => signedUrlMutation.mutate(item.id)}
type="button"
>
预览
</button>
</Button>
</div>
</td>
</tr>
</TableCell>
</TableRow>
))
) : (
<tr>
<td className="px-3 py-3 text-slate-500" colSpan={5}>
<TableRow>
<TableCell className="py-3 text-slate-500" colSpan={5}>
暂无数据
</td>
</tr>
</TableCell>
</TableRow>
)}
</tbody>
</table>
</TableBody>
</Table>
</div>
<div className="flex items-center justify-between text-sm">
@@ -248,30 +274,33 @@ export function InvoicePoolPage() {
第 {page} / {totalPages} 页
</span>
<div className="flex gap-2">
<button
className="btn-secondary"
<Button
data-testid="invoice-prev-page"
variant="secondary"
disabled={page <= 1}
onClick={() => setPage((current) => Math.max(1, current - 1))}
type="button"
>
上一页
</button>
<button
className="btn-secondary"
</Button>
<Button
data-testid="invoice-next-page"
variant="secondary"
disabled={page >= totalPages}
onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
type="button"
>
下一页
</button>
</Button>
</div>
</div>
</section>
</Card>
<section className="card-std space-y-3">
<Card className="space-y-3 p-6">
<h3 className="text-base font-semibold text-slate-900">绑定报销</h3>
<select
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
data-testid="invoice-bind-invoice"
onChange={(event) => setSelectedInvoiceId(event.target.value)}
value={selectedInvoiceId}
>
@@ -284,7 +313,8 @@ export function InvoicePoolPage() {
</select>
<select
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
data-testid="invoice-bind-reimbursement"
onChange={(event) => setSelectedReimbursementId(event.target.value)}
value={selectedReimbursementId}
>
@@ -296,12 +326,18 @@ export function InvoicePoolPage() {
))}
</select>
<button className="btn-secondary" onClick={() => bindMutation.mutate()} type="button">
<Button
data-testid="invoice-bind-submit"
variant="secondary"
disabled={bindMutation.isPending || !selectedInvoiceId || !selectedReimbursementId}
onClick={() => bindMutation.mutate()}
type="button"
>
{bindMutation.isPending ? "绑定中..." : "绑定票据"}
</button>
</section>
</Button>
</Card>
<section className="card-std space-y-2 text-sm">
<Card className="space-y-2 p-6 text-sm" data-testid="invoice-detail-panel">
<h3 className="text-base font-semibold text-slate-900">详情轮询</h3>
{detailQuery.data ? (
<>
@@ -315,7 +351,7 @@ export function InvoicePoolPage() {
) : (
<p className="text-slate-500">请选择一条票据查看详情</p>
)}
</section>
</Card>
</div>
);
}