fix: 增加回单核对与付款登记门禁（09-08-reimbursement-payment-closeout）
这个提交包含在：
@@ -0,0 +1,160 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
fetchReceiptVerification, saveReceiptVerification, reviewReceiptVerification,
|
||||
type ReceiptVerificationPage,
|
||||
} from "../../api/paymentBatches";
|
||||
import { resolveErrorMessage } from "../../lib/resolveErrorMessage";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
|
||||
import { Button } from "../ui/button";
|
||||
import { Input } from "../ui/input";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
|
||||
const FIELD_NAMES = ["小写金额", "币别", "付款人账号", "收款人账号", "凭证号", "单据状态"] as const;
|
||||
const CHANGE_LABELS: Record<string, string> = {
|
||||
amount: "金额", currency: "币种", payerAccount: "付款账号", payeeAccount: "收款账号",
|
||||
reference: "交易参考", transactionStatus: "交易状态",
|
||||
};
|
||||
|
||||
function PageFacts({ page }: { page?: ReceiptVerificationPage }) {
|
||||
return <div className="space-y-1 break-all text-sm text-zinc-600">
|
||||
<div>金额：{page?.amount ?? "未识别"} · 币种：{page?.currency ?? "未识别"}</div>
|
||||
<div>付款账号：{page?.payerAccountMasked ?? "未识别"}</div>
|
||||
<div>收款账号：{page?.payeeAccountMasked ?? "未识别"}</div>
|
||||
<div>交易参考：{page?.reference ?? "未识别"}</div>
|
||||
<div>状态：{{ success: "成功", failed: "失败", pending: "受理或处理中" }[page?.transactionStatus ?? ""] ?? "未确认"}</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
actorId: string; batchId: string; attachmentId: string; makerId: string | null;
|
||||
canManage: boolean; canReview: boolean;
|
||||
items: { id: string; label: string }[];
|
||||
onClose: () => void; onChanged: () => void;
|
||||
};
|
||||
|
||||
export function PaymentReceiptVerificationDialog(props: Props) {
|
||||
const mounted = useRef(true);
|
||||
useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
|
||||
const [selections, setSelections] = useState<Record<number, string>>({});
|
||||
const [editing, setEditing] = useState<Record<number, boolean>>({});
|
||||
const [changes, setChanges] = useState<Record<number, Record<string, string>>>({});
|
||||
const [reason, setReason] = useState("");
|
||||
const query = useQuery({
|
||||
queryKey: ["receipt-verification", props.actorId, props.batchId, props.attachmentId],
|
||||
queryFn: ({ signal }) => fetchReceiptVerification(props.batchId, props.attachmentId, signal),
|
||||
enabled: Boolean(props.actorId), staleTime: 0, gcTime: 0,
|
||||
refetchOnWindowFocus: false, refetchOnReconnect: false, retry: false,
|
||||
});
|
||||
const detail = query.data?.item;
|
||||
const changed = () => {
|
||||
if (!mounted.current) return;
|
||||
props.onChanged();
|
||||
props.onClose();
|
||||
};
|
||||
const save = useMutation({
|
||||
mutationFn: () => saveReceiptVerification(props.batchId, props.attachmentId, {
|
||||
expectedVersion: detail!.version, ...(reason.trim() ? { reason: reason.trim() } : {}),
|
||||
pages: Array.from({ length: detail!.pagesExpected }, (_unused, index) => {
|
||||
const pageNumber = index + 1;
|
||||
const fields = Object.entries(changes[pageNumber] ?? {}).filter(([, value]) => value.trim())
|
||||
.map(([Name, Value]) => ({ Name, Value }));
|
||||
return { pageNumber, itemId: selections[pageNumber] ?? "", ...(fields.length ? { fields } : {}) };
|
||||
}),
|
||||
}),
|
||||
onSuccess: changed,
|
||||
});
|
||||
const review = useMutation({
|
||||
mutationFn: (decision: "approve" | "reject") => reviewReceiptVerification(
|
||||
props.batchId, props.attachmentId, detail!.proposal!.id,
|
||||
{ expectedVersion: detail!.version, decision, reason: reason.trim() },
|
||||
),
|
||||
onSuccess: changed,
|
||||
});
|
||||
const busy = save.isPending || review.isPending;
|
||||
const pageCount = detail && Number.isInteger(detail.pagesExpected) && detail.pagesExpected > 0 &&
|
||||
detail.pagesExpected <= 20 ? detail.pagesExpected : 0;
|
||||
const editable = props.canManage && detail && ["needs_review", "ocr_failed"].includes(detail.state) && !query.isError;
|
||||
const reviewable = props.canReview && detail?.canReview === true && detail?.proposal?.status === "pending_review" &&
|
||||
props.actorId !== detail.proposal.proposedBy && props.actorId !== props.makerId && !query.isError;
|
||||
const complete = pageCount > 0 && Array.from({ length: pageCount }, (_unused, index) => selections[index + 1]).every(Boolean);
|
||||
const hasCorrections = Object.values(changes).some((fields) => Object.values(fields).some((value) => value.trim()));
|
||||
const error = query.error ?? save.error ?? review.error;
|
||||
return <Dialog open onOpenChange={(open) => { if (!open && !busy) props.onClose(); }}>
|
||||
<DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>回单核验</DialogTitle>
|
||||
<DialogDescription>核对原回单与付款明细。账号仅显示掩码；需要核对完整内容时请使用回单“在线查看”。核验不代表银行验真，也不会自动登记付款。</DialogDescription>
|
||||
</DialogHeader>
|
||||
{query.isPending ? <p role="status">正在加载核验信息…</p> : null}
|
||||
{error ? <div role="alert" className="space-y-2 text-sm text-red-600">
|
||||
<p>{resolveErrorMessage(error)}</p>
|
||||
<Button variant="secondary" disabled={busy} onClick={() => {
|
||||
setSelections({}); setChanges({}); setEditing({}); setReason(""); save.reset(); review.reset();
|
||||
void query.refetch();
|
||||
}}>刷新核验信息</Button>
|
||||
</div> : null}
|
||||
{detail && !pageCount ? <p role="status">尚无完整页数，请先重新识别或上传可读取的原回单。</p> : null}
|
||||
{Array.from({ length: pageCount }, (_unused, index) => index + 1).map((pageNumber) => {
|
||||
const original = detail?.pages.find((page) => page.pageNumber === pageNumber);
|
||||
const proposed = detail?.proposal?.pages.find((page) => page.pageNumber === pageNumber);
|
||||
return <section key={pageNumber} className="space-y-3 rounded-lg border p-3">
|
||||
<h3 className="font-medium">第{pageNumber}页 · 原识别结果</h3>
|
||||
<PageFacts page={original} />
|
||||
{proposed ? <div className="space-y-2 border-t pt-3">
|
||||
<h4 className="font-medium">人工核验结果</h4>
|
||||
<PageFacts page={proposed} />
|
||||
<p className="text-sm">对应明细：{props.items.find((item) => item.id === proposed.itemId)?.label ?? "当前明细不可用"}</p>
|
||||
<p className="text-sm">更正字段：{detail?.proposal?.changedFields.find((entry) => entry.pageNumber === pageNumber)?.fields.map((field) => CHANGE_LABELS[field] ?? "字段").join("、") || "未更正，仅关联"}</p>
|
||||
</div> : null}
|
||||
{editable ? <>
|
||||
<label className="block space-y-1 text-sm">
|
||||
<span>第{pageNumber}页对应付款明细</span>
|
||||
<select className="min-h-11 w-full rounded-md border bg-white px-3" disabled={busy}
|
||||
value={selections[pageNumber] ?? ""} onChange={(event) =>
|
||||
setSelections((current) => ({ ...current, [pageNumber]: event.target.value }))}>
|
||||
<option value="">请选择对应明细</option>
|
||||
{props.items.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<Button type="button" variant="secondary" disabled={busy} onClick={() => {
|
||||
setEditing((current) => ({ ...current, [pageNumber]: !current[pageNumber] }));
|
||||
if (editing[pageNumber]) setChanges((current) => ({ ...current, [pageNumber]: {} }));
|
||||
}}>{editing[pageNumber] ? "取消本页更正" : "更正识别"}</Button>
|
||||
{editing[pageNumber] ? <div className="space-y-3">
|
||||
<p className="text-xs text-zinc-500">只填写要更正的字段，其他字段保留原识别值。更正后需要独立复核。</p>
|
||||
{FIELD_NAMES.map((name) => <label key={name} className="block space-y-1 text-sm">
|
||||
<span>第{pageNumber}页更正{name}</span>
|
||||
{name === "单据状态" ? <select className="min-h-11 w-full rounded-md border bg-white px-3"
|
||||
disabled={busy} value={changes[pageNumber]?.[name] ?? ""} onChange={(event) =>
|
||||
setChanges((current) => ({ ...current, [pageNumber]: { ...current[pageNumber], [name]: event.target.value } }))}>
|
||||
<option value="">不更正</option><option value="交易成功">原件明确显示交易成功</option>
|
||||
</select> : <Input autoComplete="off" disabled={busy} maxLength={256}
|
||||
placeholder="不更正则留空" value={changes[pageNumber]?.[name] ?? ""}
|
||||
onChange={(event) => setChanges((current) => ({
|
||||
...current, [pageNumber]: { ...current[pageNumber], [name]: event.target.value },
|
||||
}))} />}
|
||||
</label>)}
|
||||
</div> : null}
|
||||
</> : null}
|
||||
</section>;
|
||||
})}
|
||||
{detail?.proposal ? <p className="whitespace-pre-wrap break-words text-sm">核验说明：{detail.proposal.reason}</p> : null}
|
||||
{detail?.proposal?.status === "pending_review" && !reviewable ?
|
||||
<p role="status" className="text-sm text-zinc-600">等待有资格的独立审批人复核；经办人和报销参与人不能自审。</p> : null}
|
||||
{editable || reviewable ? <label className="block space-y-1 text-sm">
|
||||
<span>{reviewable ? "复核说明" : "更正说明（仅关联可留空）"}</span>
|
||||
<Textarea value={reason} maxLength={500} disabled={busy} onChange={(event) => setReason(event.target.value)} />
|
||||
</label> : null}
|
||||
<DialogFooter className="flex-wrap gap-2">
|
||||
<Button variant="secondary" disabled={busy} onClick={props.onClose}>关闭</Button>
|
||||
{editable ? <Button disabled={busy || query.isFetching || !complete || (hasCorrections && !reason.trim())}
|
||||
onClick={() => save.mutate()}>{save.isPending ? "保存中…" : "保存核验"}</Button> : null}
|
||||
{reviewable ? <>
|
||||
<Button variant="secondary" disabled={busy || query.isFetching || !reason.trim()} onClick={() => review.mutate("reject")}>不通过</Button>
|
||||
<Button disabled={busy || query.isFetching || !reason.trim()} onClick={() => review.mutate("approve")}>确认复核</Button>
|
||||
</> : null}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>;
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户