wangsli
1f8d5b658a
汇总已落盘的借款本金与还款、兼容历史编号的周期化编号、付款责任与回单核验、报销进度和排序、PWA/采购事务、错误原因与日期校验及ERP退役。 统一共享预算池锁序和锁后判断，恢复差旅原预算选择，补原因码固定夹具及反向完整性检查。 纳入配套迁移、测试、受管QA、分层验收合同、规约及任务记录；原始证据留在ignored artifacts。 关联任务：09-17-company-loan-principal-repayment、09-17-erp-exclusive-retirement、09-18-reimbursement-periodic-numbering、09-08-reimbursement-payment-closeout、09-18-local-concurrency-product-fixes、09-19-budget-pool-concurrency、09-05-error-explainability-payment-readiness。 预算补审由Claude定向验证2文件928项通过，原4446/28及r6结果仍仅对应各自历史输入；本轮未重跑测试。 完整新候选门禁、R1真实入口接入与12项公网义务仍开放。生产编号未启用、差旅仍冻结；不推送、不部署，不宣称发布资格。
188 行
20 KiB
TypeScript
188 行
20 KiB
TypeScript
import { cloneElement, isValidElement, useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
|
||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||
import { useAuth } from "../auth/AuthContext";
|
||
import { hasPermission } from "../auth/permissions";
|
||
import { fetchLegalEntities } from "../api/masterData";
|
||
import { fetchBankInstitutions } from "../api/paymentAccounts";
|
||
import { createLoanRepayment, downloadLoanEvidence, fetchCompanyLoans, fetchLoanIdentities, fetchLoanLenders,
|
||
fetchLoanRepayments, saveLoanAction, uploadLoanEvidence, type CompanyLoan, type LoanLender } from "../api/companyLoans";
|
||
import { ListWorkspace, WorkspaceHeader, HeaderActionGroup } from "../components/patterns/ListWorkspace";
|
||
import { Button } from "../components/ui/button";
|
||
import { Input } from "../components/ui/input";
|
||
import { Label } from "../components/ui/label";
|
||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../components/ui/dialog";
|
||
import { resolveErrorMessage } from "../lib/resolveErrorMessage";
|
||
import { formatDisplayDate } from "../lib/displayFormat";
|
||
import { downloadBlob } from "../lib/download";
|
||
|
||
const evidenceLabels: Record<string, string> = { agreement: "协议或借款确认书", incoming: "原借入凭据",
|
||
accounting_confirmation: "余额核对材料", adjustment: "系统外已还本金依据" };
|
||
const stateLabels: Record<string, string> = { draft: "待付款复核", reviewed: "待付款", executed: "已付款", cancelled: "已取消", failed: "登记未完成" };
|
||
type Mode = "lender" | "identity" | "account" | "loan" | "confirm" | "repay" | "download" | null;
|
||
const selectClass = "min-h-11 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm";
|
||
function Field({ label, children }: { label: string; children: ReactNode }) {
|
||
const id = useId();
|
||
return <div className="grid gap-1.5 text-sm"><Label htmlFor={id}>{label}</Label>
|
||
{isValidElement<{ id?: string }>(children) ? cloneElement(children, { id }) : children}</div>;
|
||
}
|
||
|
||
export function CompanyLoansPage() {
|
||
const { me, permissions } = useAuth(); const navigate = useNavigate(); const cache = useQueryClient();
|
||
const paymentPath = useLocation().pathname.startsWith("/mobile/") ? "/mobile/payment-batches" : "/payment-batches";
|
||
const mounted = useRef(true);
|
||
useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
|
||
const allowed = Boolean(me?.roleCodes.some((role) => ["finance", "finance_mgr"].includes(role))) && hasPermission(permissions, "loan.manage");
|
||
const [page, setPage] = useState(1); const [lenderPage, setLenderPage] = useState(1); const [repayPage, setRepayPage] = useState(1);
|
||
const [tab, setTab] = useState<"loans" | "lenders" | "repayments">("loans");
|
||
const [mode, setMode] = useState<Mode>(null); const [selectedLender, setSelectedLender] = useState<LoanLender | null>(null);
|
||
const [selectedLoan, setSelectedLoan] = useState<CompanyLoan | null>(null);
|
||
const [evidence, setEvidence] = useState<{ loanId: string; id: string; name: string } | null>(null);
|
||
const [lenderId, setLenderId] = useState(""); const [identitySearch, setIdentitySearch] = useState("");
|
||
const [amounts, setAmounts] = useState<Record<string, string>>({});
|
||
const [candidatePage, setCandidatePage] = useState(1);
|
||
const [requestKey, setRequestKey] = useState(() => crypto.randomUUID());
|
||
const identity = useRef(me?.id); identity.current = me?.id;
|
||
const loans = useQuery({ queryKey: ["company-loans", me?.id, page], queryFn: ({ signal }) => fetchCompanyLoans(page, undefined, signal), enabled: allowed });
|
||
const lenders = useQuery({ queryKey: ["loan-lenders", me?.id, lenderPage], queryFn: ({ signal }) => fetchLoanLenders(lenderPage, signal), enabled: allowed });
|
||
const repayments = useQuery({ queryKey: ["loan-repayments", me?.id, repayPage], queryFn: ({ signal }) => fetchLoanRepayments(repayPage, signal), enabled: allowed });
|
||
const candidates = useQuery({ queryKey: ["company-loans", me?.id, "candidates", lenderId, candidatePage],
|
||
queryFn: ({ signal }) => fetchCompanyLoans(candidatePage, lenderId, signal), enabled: allowed && mode === "repay" && Boolean(lenderId) });
|
||
const companies = useQuery({ queryKey: ["loan-companies", me?.id], queryFn: () => fetchLegalEntities({ enabled: true }), enabled: allowed && mode === "lender" });
|
||
const banks = useQuery({ queryKey: ["loan-banks", me?.id], queryFn: fetchBankInstitutions, enabled: allowed && ["lender", "account"].includes(mode ?? "") });
|
||
const people = useQuery({ queryKey: ["loan-identities", me?.id, identitySearch], queryFn: ({ signal }) => fetchLoanIdentities(identitySearch, signal), enabled: allowed && mode === "identity" });
|
||
const mutation = useMutation({ mutationFn: async (action: () => Promise<unknown>) => action(), onSuccess: async () => {
|
||
await Promise.all(["company-loans", "loan-lenders", "loan-repayments", "payment-batches"].map((key) => cache.invalidateQueries({ queryKey: [key] })));
|
||
} });
|
||
useEffect(() => { setMode(null); setSelectedLender(null); setSelectedLoan(null); setAmounts({}); }, [me?.id]);
|
||
function open(next: Mode, lender: LoanLender | null = null, loan: CompanyLoan | null = null) {
|
||
mutation.reset(); setRequestKey(crypto.randomUUID()); setMode(next); setSelectedLender(lender); setSelectedLoan(loan);
|
||
setLenderId(lender?.id ?? ""); setAmounts({}); setIdentitySearch(""); setCandidatePage(1);
|
||
}
|
||
async function submit(event: FormEvent<HTMLFormElement>) {
|
||
event.preventDefault(); const values = new FormData(event.currentTarget);
|
||
const text = (key: string) => String(values.get(key) ?? "").trim();
|
||
const actorId = me?.id;
|
||
mutation.mutate(async () => {
|
||
if (mode === "lender") await saveLoanAction("/loan-lenders", { requestKey, legalEntityId: text("company"), name: text("name"),
|
||
bankInstitutionId: text("bank"), bankName: text("bankName"), bankAccount: text("account"), accountName: text("accountName") });
|
||
if (mode === "account" && selectedLender) await saveLoanAction(`/loan-lenders/${selectedLender.id}/account`, {
|
||
expectedVersion: selectedLender.accountVersion, bankInstitutionId: text("bank"), bankName: text("bankName"),
|
||
bankAccount: text("account"), accountName: text("accountName"),
|
||
}, "PATCH");
|
||
if (mode === "identity" && selectedLender) await saveLoanAction(`/loan-lenders/${selectedLender.id}/identity-confirmation`, {
|
||
expectedVersion: selectedLender.identityVersion, employeeId: text("employee") === "external" ? null : text("employee"),
|
||
externalPersonConfirmed: text("employee") === "external", reason: text("reason"),
|
||
});
|
||
if (mode === "loan") await saveLoanAction("/company-loans", { requestKey, lenderId: text("lender"), originReference: text("origin"),
|
||
originalPrincipal: text("principal"), openingOutstandingPrincipal: text("opening"), receivedDate: text("received"), balanceAsOf: text("asOf"),
|
||
historicalEntry: text("entry") === "historical" });
|
||
if (mode === "confirm" && selectedLoan) await saveLoanAction(`/company-loans/${selectedLoan.id}/confirm`, {
|
||
expectedVersion: selectedLoan.version, accountingConfirmationRef: text("reference"),
|
||
});
|
||
if (mode === "download" && evidence) {
|
||
const response = await downloadLoanEvidence(evidence.loanId, evidence.id, text("reason"));
|
||
if (mounted.current && identity.current === actorId) downloadBlob(response.blob, response.filename ?? evidence.name);
|
||
}
|
||
if (mode === "repay") {
|
||
const response = await createLoanRepayment({ requestKey, lenderId, reason: text("reason"),
|
||
allocations: Object.entries(amounts).filter(([, amount]) => amount.trim()).map(([loanId, amount]) => ({ loanId, amount: amount.trim() })) });
|
||
if (mounted.current && identity.current === actorId) navigate(`${paymentPath}?id=${encodeURIComponent(response.item.id)}`);
|
||
}
|
||
if (mounted.current && identity.current === actorId) setMode(null);
|
||
});
|
||
}
|
||
if (!allowed) return <p role="alert">当前账号无借款台账权限。</p>;
|
||
const error = mutation.error ?? loans.error ?? lenders.error ?? repayments.error ?? companies.error ?? banks.error ?? people.error;
|
||
const current = tab === "loans" ? loans : tab === "lenders" ? lenders : repayments;
|
||
const modalQueryBlocked = mode === "lender" ? !companies.isSuccess || !banks.isSuccess : mode === "account" ? !banks.isSuccess : mode === "identity" ? !people.isSuccess : mode === "loan" ? !lenders.isSuccess : mode === "repay" ? !lenders.isSuccess || !candidates.isSuccess : false;
|
||
const currentPage = tab === "loans" ? page : tab === "lenders" ? lenderPage : repayPage;
|
||
const setCurrentPage = tab === "loans" ? setPage : tab === "lenders" ? setLenderPage : setRepayPage;
|
||
return <ListWorkspace>
|
||
<WorkspaceHeader title="公司借款" subtitle="记录公司向个人借入及归还的人民币本金。余额以核对截止日及 OA 登记为依据，未核实不代表已结清。"
|
||
actions={<HeaderActionGroup><Button variant="outline" onClick={() => open("lender")}>登记出借人</Button>
|
||
<Button onClick={() => open("loan")}>登记借入</Button><Button variant="outline" onClick={() => open("repay")}>申请还本</Button></HeaderActionGroup>} />
|
||
<div className="flex flex-wrap gap-2" role="tablist" aria-label="借款台账视图">
|
||
{([["loans", "借款台账"], ["lenders", "出借人"], ["repayments", "还款记录"]] as const).map(([key, label]) =>
|
||
<Button key={key} role="tab" aria-selected={tab === key} variant={tab === key ? "default" : "outline"} onClick={() => setTab(key)}>{label}</Button>)}
|
||
</div>
|
||
{error && !mode ? <p role="alert" className="text-sm text-red-700">{resolveErrorMessage(error)}</p> : null}
|
||
{current.isPending ? <p role="status">加载中…</p> : null}
|
||
{current.isSuccess && !current.data.items.length ? <p className="card-std p-4">暂无记录；不能据此判断银行实际借还款情况。</p> : null}
|
||
{tab === "loans" && loans.isSuccess ? loans.data.items.map((loan) => <section key={loan.id} className="card-std min-w-0 space-y-3 p-4">
|
||
<div className="flex flex-wrap justify-between gap-2"><h2 className="font-semibold break-all">{loan.lender.name} · {loan.loanNo}</h2>
|
||
<span>{loan.confirmationStatus === "confirmed" ? "余额已确认" : "余额待核实"}</span></div>
|
||
<p className="text-sm text-zinc-600">{loan.lender.legalEntityName} · 借入 {formatDisplayDate(loan.receivedDate)} · 核对截至 {formatDisplayDate(loan.balanceAsOf)} · {loan.historicalEntry ? "历史登记" : "当期借入"}</p>
|
||
<div className="detail-fact-grid text-sm">
|
||
{[["原本金", loan.originalPrincipal], ["未还本金", loan.outstanding], ["待付款占用", loan.reserved], ["可申请还本", loan.available]].map(([label, value]) =>
|
||
<div key={label} className="detail-fact-card"><div className="detail-fact-card__label">{label}</div><div className="detail-fact-card__value">¥{value}</div></div>)}
|
||
</div>
|
||
<p className="break-words text-sm">原借入凭据：{loan.originReference}</p>
|
||
<details><summary className="min-h-11 cursor-pointer py-3 text-sm font-medium">借款材料与余额确认</summary>
|
||
<div className="grid gap-3 md:grid-cols-2">{Object.entries(evidenceLabels).map(([kind, label]) => <div key={kind} className="rounded-md border p-3">
|
||
<Label htmlFor={`${loan.id}-${kind}`}>{label}</Label>
|
||
<Input id={`${loan.id}-${kind}`} type="file" className="mt-2" accept=".pdf,.png,.jpg,.jpeg,.webp" disabled={mutation.isPending}
|
||
onChange={(event) => { const file = event.currentTarget.files?.[0]; event.currentTarget.value = "";
|
||
if (file) mutation.mutate(() => uploadLoanEvidence(loan.id, kind, file)); }} />
|
||
{loan.evidences.filter((e) => e.kind === kind && !e.archivedAt).map((e) => <Button key={e.id} variant="link" className="max-w-full whitespace-normal break-all"
|
||
onClick={() => { setEvidence({ loanId: loan.id, id: e.id, name: e.originalName }); open("download"); }}>{e.originalName}</Button>)}
|
||
</div>)}</div>
|
||
{loan.confirmationStatus !== "confirmed" ? <Button className="mt-3" onClick={() => open("confirm", loan.lender, loan)}>确认期初余额</Button> : null}
|
||
</details>
|
||
</section>) : null}
|
||
{tab === "lenders" && lenders.isSuccess ? lenders.data.items.map((lender) => <section key={lender.id} className="card-std space-y-3 p-4">
|
||
<h2 className="font-semibold">{lender.name} · {lender.legalEntityName}</h2>
|
||
<p className="break-words text-sm">{lender.bankName} · {lender.bankAccountMasked ?? "账户不可用"} · {lender.identityStatus === "verified" ? "身份已核实" : "身份待核实"}</p>
|
||
<div className="flex flex-wrap gap-2"><Button variant="outline" onClick={() => open("identity", lender)}>核实身份关联</Button>
|
||
<Button variant="outline" onClick={() => open("account", lender)}>更新收款资料</Button></div>
|
||
</section>) : null}
|
||
{tab === "repayments" && repayments.isSuccess ? repayments.data.items.map((repayment) => <section key={repayment.id} className="card-std space-y-2 p-4">
|
||
<h2 className="font-semibold break-all">{repayment.lenderName} · {repayment.repaymentNo}</h2>
|
||
<p>¥{repayment.amount} · {stateLabels[repayment.status] ?? "待核对"}</p>
|
||
{repayment.bankResultState === "unknown" ? <p className="text-sm text-amber-800">银行结果待查证，额度保持占用，请勿重复付款。</p> : null}
|
||
<p className="text-sm">会计交接：{repayment.accountingHandoffRef ?? "待交接"}</p>
|
||
<Link className="inline-flex min-h-11 items-center text-primary underline" to={`${paymentPath}?id=${encodeURIComponent(repayment.paymentBatchId)}`}>查看还款分配、付款与回单</Link>
|
||
</section>) : null}
|
||
<div className="flex items-center gap-3"><Button variant="outline" disabled={currentPage <= 1} onClick={() => setCurrentPage(currentPage - 1)}>上一页</Button>
|
||
<span>第 {currentPage} 页</span><Button variant="outline" disabled={!current.data || currentPage * 30 >= current.data.total} onClick={() => setCurrentPage(currentPage + 1)}>下一页</Button></div>
|
||
<Dialog open={mode !== null} onOpenChange={(opened) => { if (!opened && !mutation.isPending) setMode(null); }}>
|
||
<DialogContent className="max-h-[90dvh] overflow-y-auto"><DialogHeader><DialogTitle>
|
||
{({ lender: "登记出借人", account: "更新收款资料", identity: "核实身份关联", loan: "登记借入", confirm: "确认期初余额", repay: "申请归还本金", download: "下载借款材料" } as Record<string, string>)[mode ?? ""]}
|
||
</DialogTitle><DialogDescription>{mode === "repay" ? "同一公司和出借人可合并多笔借款，提交后进入独立付款复核。" :
|
||
mode === "confirm" ? "请根据凭据与代账核对余额。确认后不能覆盖修改，系统外已还本金须有依据。" :
|
||
mode === "account" ? "更新后须重新确认身份，原未付申请失效，请安全取消后重新申请。" : "仅录入已核对的业务事实；敏感材料仅供有权人员查阅。"}</DialogDescription></DialogHeader>
|
||
<form onSubmit={submit} className="grid gap-4">
|
||
{error ? <p role="alert" className="text-sm text-red-700">{resolveErrorMessage(error)}</p> : null}
|
||
{mode === "lender" ? <><Field label="公司主体"><select required name="company" className={selectClass}><option value="">请选择</option>{companies.data?.items.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select></Field>
|
||
<Field label="出借人姓名"><Input name="name" required maxLength={120} /></Field></> : null}
|
||
{mode === "lender" || mode === "account" ? <><Field label="收款银行"><select name="bank" required className={selectClass} defaultValue={selectedLender?.bankInstitutionId ?? ""}><option value="">请选择</option>{banks.data?.items.filter((b) => b.code === "CCB").map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}</select></Field>
|
||
<Field label="开户行名称"><Input name="bankName" required maxLength={200} defaultValue={selectedLender?.bankName} /></Field>
|
||
<Field label="账户名"><Input name="accountName" required maxLength={120} autoComplete="off" /></Field>
|
||
<Field label="收款账号"><Input name="account" required inputMode="numeric" pattern="[0-9]{10,30}" autoComplete="off" /></Field></> : null}
|
||
{mode === "identity" ? <><Field label="检索 OA 人员"><Input value={identitySearch} onChange={(e) => setIdentitySearch(e.target.value)} placeholder="姓名或员工编号" /></Field>
|
||
<Field label="出借人对应身份"><select key={identitySearch} name="employee" required className={selectClass} defaultValue=""><option value="">请选择已核实身份</option><option value="external">已核实：非员工且没有关联 OA 账号</option>
|
||
{people.data?.items.map((p) => <option key={p.id} value={p.id}>{p.name} · {p.employeeNo}</option>)}</select></Field></> : null}
|
||
{mode === "loan" ? <><Field label="出借人"><select required name="lender" className={selectClass}><option value="">请选择本页已登记出借人</option>{lenders.data?.items.map((l) => <option key={l.id} value={l.id}>{l.name} · {l.legalEntityName}</option>)}</select></Field>
|
||
<Field label="原借入凭据唯一引用"><Input name="origin" required maxLength={200} /></Field>
|
||
<Field label="原始本金"><Input name="principal" required inputMode="decimal" pattern="[0-9]{1,12}(\.[0-9]{1,2})?" /></Field>
|
||
<Field label="核对日未还本金"><Input name="opening" required inputMode="decimal" pattern="[0-9]{1,12}(\.[0-9]{1,2})?" /></Field>
|
||
<Field label="实际到账日期"><Input name="received" required type="date" /></Field><Field label="余额核对截止日"><Input name="asOf" required type="date" /></Field>
|
||
<Field label="登记性质"><select name="entry" className={selectClass}><option value="historical">历史借入登记</option><option value="current">当期实际借入</option></select></Field></> : null}
|
||
{mode === "confirm" ? <><p>原本金 ¥{selectedLoan?.originalPrincipal}，核对日未还 ¥{selectedLoan?.openingOutstandingPrincipal}</p>
|
||
<Field label="代账余额确认引用"><Input required name="reference" minLength={2} maxLength={200} /></Field></> : null}
|
||
{mode === "repay" ? <><Field label="出借人"><select required className={selectClass} value={lenderId} onChange={(e) => { setLenderId(e.target.value); setAmounts({}); setCandidatePage(1); }}><option value="">请选择</option>
|
||
{lenders.data?.items.map((l) => <option key={l.id} value={l.id}>{l.name} · {l.legalEntityName}</option>)}</select></Field>
|
||
<p className="text-sm text-zinc-600">填写已确认借款的分配金额，留空表示本次不归还。翻页保留已填写金额。</p>
|
||
{candidates.error ? <p role="alert">{resolveErrorMessage(candidates.error)}</p> : null}
|
||
{candidates.isSuccess ? candidates.data.items.filter((l) => l.lender.id === lenderId && l.confirmationStatus === "confirmed").map((l) => <Field key={l.id} label={`${l.originReference}（可还 ¥${l.available}）`}>
|
||
<Input aria-label={`分配 ${l.originReference}`} inputMode="decimal" pattern="[0-9]{1,12}(\.[0-9]{1,2})?" value={amounts[l.id] ?? ""} onChange={(e) => setAmounts({ ...amounts, [l.id]: e.target.value })} /></Field>) : null}</> : null}
|
||
{mode === "repay" && lenderId ? <div className="flex flex-wrap items-center gap-2"><Button type="button" variant="outline" disabled={candidatePage === 1} onClick={() => setCandidatePage(candidatePage - 1)}>上一页借款</Button>
|
||
<span>第 {candidatePage} 页 · 已填 {Object.values(amounts).filter((v) => v.trim()).length} 笔</span><Button type="button" variant="outline" disabled={!candidates.data || candidatePage * 30 >= candidates.data.total} onClick={() => setCandidatePage(candidatePage + 1)}>下一页借款</Button></div> : null}
|
||
{["identity", "repay", "download"].includes(mode ?? "") ? <Field label={mode === "download" ? "下载用途" : "说明"}><Input name="reason" required minLength={2} maxLength={500} /></Field> : null}
|
||
<Button type="submit" disabled={mutation.isPending || modalQueryBlocked || mode === "repay" && !Object.values(amounts).some((v) => v.trim())}>{mutation.isPending ? "处理中…" : mode === "repay" ? "提交还款申请" : "确认"}</Button>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</ListWorkspace>;
|
||
}
|