wangsli
5a7a13524e
区分正式付款回单、非最终回执与未知凭证，在核验构建、人工证据重建和最终核销时使用同一份有效依据。非最终说明、入账方向、状态矛盾及重复交易不能经人工覆盖。 正式回单无字面成功状态时，允许财务按原件实际记账支出、日期及说明提出核验，由本批次适用的确认人确认；不补造银行成功文字。旧核验可显式本地重检，新版本与审计原子保存，不重新外发 OCR，不沿用旧人工批准或改写已核销历史。 本地验证：82 个迁移、借款 HTTP 116 组、关联电脑/手机 18 组、共享回单数据库与真实认证 38 组、共享报销页面限定重验 24 项、最新回单/报销定向 292 项通过；9 个资金守卫变异均被捕获。服务端全量 4554 项通过、1 项既有可选跳过，后续合成数据及零页详情改动由最新定向验证覆盖。 本次无新增迁移，新增本地 PDF 文本解析依赖。后续对本提交运行完整 verify-candidate，实际候选与结果以本轮回执为准。 限制：独立代码复核及真实还款验收待完成；历史材料预验不证明真实还本或银行提交对应。未推送、未部署、未访问生产或写入真实业务数据。
216 行
16 KiB
TypeScript
216 行
16 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
import {
|
|
fetchReceiptVerification, saveReceiptVerification, reviewReceiptVerification, checkReceiptDocument,
|
|
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: "交易状态", paymentProof: "付款凭证依据",
|
|
};
|
|
|
|
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>状态：{page?.document?.proof?.basis === "booked_debit" ? "已记账支出（人工核对）" :
|
|
({ success: "成功", failed: "失败", pending: "受理或处理中" }[page?.transactionStatus ?? ""] ?? "未确认")}</div>
|
|
<div>凭证性质：{{ bank_receipt: "银行正式回单", non_final: "非最终回执", unknown: "需核对原件" }[page?.document?.kind ?? "unknown"]}</div>
|
|
{page?.document?.proof ? <div>付款依据：{page.document.proof.basis === "booked_debit" ?
|
|
`正式回单记载已记账支出，记账日期 ${page.document.proof.bookedOn}` : "正式回单原件明确显示付款成功"}</div> : null}
|
|
</div>;
|
|
}
|
|
|
|
type Props = {
|
|
actorId: string; batchId: string; attachmentId: string; makerId: string | null;
|
|
canManage: boolean; canReview: boolean; relatedParty?: 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 [proofs, setProofs] = useState<Record<number, { basis: "" | "explicit_success" | "booked_debit"; bookedOn: string; checked: boolean }>>({});
|
|
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 }));
|
|
const proof = proofs[pageNumber];
|
|
if (proof?.basis === "booked_debit") {
|
|
const status = fields.find((field) => field.Name === "单据状态");
|
|
if (status) status.Value = ""; else fields.push({ Name: "单据状态", Value: "" });
|
|
}
|
|
return { pageNumber, itemId: selections[pageNumber] ?? "", ...(fields.length ? { fields } : {}),
|
|
...(proof?.basis ? { paymentProof: { basis: proof.basis, originalChecked: true as const, note: reason.trim(),
|
|
...(proof.basis === "booked_debit" ? { bookedOn: proof.bookedOn } : {}) } } : {}) };
|
|
}),
|
|
}),
|
|
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 inspect = useMutation({
|
|
mutationFn: () => checkReceiptDocument(props.batchId, props.attachmentId, detail!.version),
|
|
onSuccess: changed,
|
|
});
|
|
const busy = save.isPending || review.isPending || inspect.isPending;
|
|
const pageCount = detail && Number.isInteger(detail.pagesExpected) && detail.pagesExpected > 0 &&
|
|
detail.pagesExpected <= 20 ? detail.pagesExpected : 0;
|
|
const editable = props.canManage && detail && !detail.documentInspectionRequired && ["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 blocked = (page?: ReceiptVerificationPage) => page?.document?.kind === "non_final" ||
|
|
page?.document?.direction === "credit" || Boolean(page?.document?.issues.length);
|
|
const needsProof = (page?: ReceiptVerificationPage) => page?.document?.kind !== "bank_receipt" || !page.document.explicitSuccess;
|
|
const complete = pageCount > 0 && Array.from({ length: pageCount }, (_unused, index) => {
|
|
const n = index + 1; const page = detail?.pages.find((entry) => entry.pageNumber === n); const proof = proofs[n];
|
|
return selections[n] && !blocked(page) && (!needsProof(page) || (proof?.basis && proof.checked &&
|
|
reason.trim().length >= 5 && (proof.basis !== "booked_debit" || /^\d{4}-\d{2}-\d{2}$/.test(proof.bookedOn))));
|
|
}).every(Boolean);
|
|
const hasCorrections = Object.values(changes).some((fields) => Object.values(fields).some((value) => value.trim()));
|
|
const error = query.error ?? save.error ?? review.error ?? inspect.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({}); setProofs({}); setReason(""); save.reset(); review.reset(); inspect.reset();
|
|
void query.refetch();
|
|
}}>刷新核验信息</Button>
|
|
</div> : null}
|
|
{detail?.documentInspectionRequired ? <div role="status" className="space-y-2 rounded-lg border p-3 text-sm">
|
|
<p>旧核验尚未记录凭证性质。更新后会保留原记录，并要求重新核对原件；不会重新发送文件识别。</p>
|
|
{props.canManage && !query.isError ? <Button variant="secondary" disabled={busy || query.isFetching}
|
|
onClick={() => inspect.mutate()}>{inspect.isPending ? "检查中…" : "更新凭证核验"}</Button> : null}
|
|
</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} />
|
|
{blocked(original) ? <p role="status" className="text-sm text-red-600">这份材料不能证明本笔付款完成。请提供对应的正式付款回单；不能通过更正字段覆盖非最终说明、收付方向或交易矛盾。</p> : null}
|
|
{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 && !blocked(original) ? <>
|
|
<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>
|
|
{needsProof(original) ? <div className="space-y-3 rounded-md border p-3 text-sm">
|
|
<label className="block space-y-1">
|
|
<span>第{pageNumber}页付款凭证依据</span>
|
|
<select className="min-h-11 w-full rounded-md border bg-white px-3" disabled={busy}
|
|
value={proofs[pageNumber]?.basis ?? ""} onChange={(event) => setProofs((current) => ({ ...current,
|
|
[pageNumber]: { bookedOn: current[pageNumber]?.bookedOn ?? "", checked: false,
|
|
basis: event.target.value as "" | "explicit_success" | "booked_debit" } }))}>
|
|
<option value="">请先查看原件，再选择依据</option>
|
|
<option value="explicit_success">正式回单原件明确显示付款成功</option>
|
|
<option value="booked_debit">正式回单记载公司已记账支出</option>
|
|
</select>
|
|
</label>
|
|
{proofs[pageNumber]?.basis === "booked_debit" ? <label className="block space-y-1">
|
|
<span>第{pageNumber}页原件记账日期</span>
|
|
<Input type="date" disabled={busy} value={proofs[pageNumber]?.bookedOn ?? ""}
|
|
onChange={(event) => setProofs((current) => ({ ...current,
|
|
[pageNumber]: { ...current[pageNumber], bookedOn: event.target.value } }))} />
|
|
</label> : null}
|
|
<label className="flex min-h-11 items-start gap-2">
|
|
<input type="checkbox" className="mt-1" disabled={busy || !proofs[pageNumber]?.basis}
|
|
checked={proofs[pageNumber]?.checked ?? false} onChange={(event) => setProofs((current) => ({ ...current,
|
|
[pageNumber]: { ...current[pageNumber], checked: event.target.checked } }))} />
|
|
<span>已查看第{pageNumber}页完整原件，确认为本公司付款的正式回单，无非最终依据说明或矛盾；核验说明中填写原件依据。</span>
|
|
</label>
|
|
<p className="text-xs text-zinc-500">记账支出不要求补填“交易成功”。凭证性质或资金方向不能确认时，请先补证。</p>
|
|
</div> : null}
|
|
<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">只填写要更正的字段，其他字段保留原识别值。更正后需要{props.relatedParty ? "公司代表确认" : "独立复核"}。</p>
|
|
{FIELD_NAMES.filter((name) => name !== "单据状态" || proofs[pageNumber]?.basis !== "booked_debit").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">{props.relatedParty ? "等待有当前授权的公司代表确认；上传人、录入人和制单人不能自审。" : "等待有资格的独立审批人复核；经办人和报销参与人不能自审。"}</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() || detail?.documentInspectionRequired || detail?.pages.some(blocked)} onClick={() => review.mutate("approve")}>{props.relatedParty ? "公司代表确认" : "确认复核"}</Button>
|
|
</> : null}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>;
|
|
}
|