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

fix: 统一报销付款状态与进度（09-04-reimbursement-state-gap-finance-view）

浏览代码
这个提交包含在：
wangsli
2026-09-11 09:43:36 +08:00
父节点 fe025e65cf
当前提交 f9aee4c932
共修改 19 个文件，包含 549 行新增和 32 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/components/patterns/ProcessingProgress.tsx
+4 -2
查看文件
@@ -10,6 +10,7 @@ type Props = {
testId: string;
mobile?: boolean;
targetLinkLabel?: string;
suppressedTargetHref?: string | null;
};
const STATE_TEXT = {
@@ -26,6 +27,7 @@ export function ProcessingProgress({
testId,
mobile = false,
targetLinkLabel = "查看详情",
suppressedTargetHref,
}: Props) {
return (
<ol className="space-y-0" data-testid={testId} aria-label={ariaLabel}>
@@ -61,7 +63,7 @@ export function ProcessingProgress({
>
<Icon className="size-4" />
</span>
<div className={cn("min-w-0 flex-1 pb-5", mobile ? "pt-1" : "pt-1.5")}>
<div className={cn("min-w-0 flex-1 break-words pb-5", mobile ? "pt-1" : "pt-1.5")}>
<div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-sm">
<span className="font-semibold text-zinc-900">{stage.label}</span>
{facts.length ? <span className="text-zinc-500">· {facts.join(" · ")}</span> : null}
@@ -73,7 +75,7 @@ export function ProcessingProgress({
{stage.comment}
</blockquote>
) : null}
{stage.targetHref ? (
{stage.targetHref && stage.targetHref !== suppressedTargetHref ? (
<Link
className="mt-2 inline-flex min-h-11 items-center gap-1 text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
to={stage.targetHref}
client/src/lib/reimbursementPaymentHandoff.ts
+34
查看文件
@@ -0,0 +1,34 @@
import type { ProcessingProgress } from "../types/processingProgress";
export function resolveReimbursementPaymentHandoff({
status,
deletedAt,
progress,
}: {
status: string;
deletedAt?: string | null;
progress?: ProcessingProgress | null;
}) {
const unavailable = { nextStep: "付款进度暂不可用，请刷新后重试", canCreateBatch: false, targetHref: null as string | null };
if (deletedAt || !["approved", "paid"].includes(status)) return null;
const stages = progress?.stages ?? [];
const created = stages.find((stage) => stage.key === "payment_batch_created");
const review = stages.find((stage) => stage.key === "payment_batch_review");
const payment = stages.find((stage) => stage.key === "payment_and_receipt");
if (!created || !review || !payment) return unavailable;
if (status === "paid") {
return {
...unavailable,
nextStep: payment.state === "completed" ? payment.detail ?? "查看付款结果" : unavailable.nextStep,
targetHref: payment.state === "completed" ? payment.targetHref : null,
};
}
if (created.state === "current" && review.state === "pending" && payment.state === "pending"
&& !created.targetHref && !review.targetHref && !payment.targetHref) {
return { ...unavailable, nextStep: created.detail ?? "待财务组建付款批次", canCreateBatch: true };
}
if (created.state !== "completed") return unavailable;
const current = [payment, review].find((stage) => stage.state === "current" || stage.state === "exception");
if (!current || !current.detail) return unavailable;
return { ...unavailable, nextStep: current.detail, targetHref: current.targetHref };
}
client/src/pages/MobileReimbursementDetailPage.tsx
+7 -1
查看文件
@@ -46,6 +46,7 @@ import { ReimbursementHeaderEditor } from "../components/reimbursements/Reimburs
import { isTravelReimbursement } from "../lib/reimbursementTravel";
import { ReimbursementMobileWorkspaceShell } from "../components/reimbursements/ReimbursementMobileWorkspaceShell";
import { ProcessingProgress } from "../components/patterns/ProcessingProgress";
import { resolveReimbursementPaymentHandoff } from "../lib/reimbursementPaymentHandoff";
import { PageScaffold } from "../components/patterns/PageScaffold";
import { MobileStickyActionBar } from "../components/patterns/MobileStickyActionBar";
import { Button } from "../components/ui/button";
@@ -191,6 +192,9 @@ export function MobileReimbursementDetailPage() {
enabled: Boolean(reimbursementId),
queryKey: ["reimbursements", reimbursementId],
queryFn: () => fetchReimbursementDetail(reimbursementId),
staleTime: 0,
refetchOnMount: true,
refetchOnWindowFocus: (query) => Boolean(query.state.data && !["draft", "rejected"].includes(query.state.data.status)),
});
const expenseTypesQuery = useQuery({
@@ -907,6 +911,7 @@ export function MobileReimbursementDetailPage() {
}
const showSubmitAction = Boolean(canMaintainReimbursement && canSubmitExpense);
const paymentHandoff = resolveReimbursementPaymentHandoff({ ...detail, progress: detail.processingProgress });
const workspaceEvidence = buildReimbursementApprovalEvidence(detail, {
standardViolations: (reimbursementPrecheckQuery.data?.standardChecks ?? []).filter((item) => item.exceeded),
@@ -978,7 +983,8 @@ export function MobileReimbursementDetailPage() {
const workspaceAfterEvidence = (
<>
{(detail.budgetHint?.exceedsThreshold || detail.riskFlags.length) ? <section className="mobile-card space-y-3"><h2 className="text-base font-semibold text-zinc-900">需要关注</h2>{detail.budgetHint?.exceedsThreshold ? <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">预算 {detail.budgetHint.budgetCode}：提交后预计使用 {detail.budgetHint.nextUsagePercent.toFixed(2)}%，已达到预警阈值。</p> : null}{detail.riskFlags.length ? <RiskFlagsCard items={detail.riskFlags} title="待处理风险项" /> : null}</section> : null}
<section className="mobile-card"><h2 className="mb-3 text-base font-semibold text-zinc-900">处理进度</h2><ProcessingProgress progress={detail.processingProgress ?? { stages: [] }} ariaLabel="报销处理进度" testId="mobile-reimbursement-processing-progress" targetLinkLabel="查看所在付款批次" mobile /></section>
{paymentHandoff ? <section className="mobile-card space-y-3" data-testid="mobile-reimbursement-payment-actions"><p className="text-sm">下一步：{paymentHandoff.nextStep}</p>{paymentHandoff.targetHref ? <Button asChild className="w-full"><Link to={paymentHandoff.targetHref}>查看所在付款批次</Link></Button> : null}</section> : null}
<section className="mobile-card"><h2 className="mb-3 text-base font-semibold text-zinc-900">处理进度</h2><ProcessingProgress progress={detail.processingProgress ?? { stages: [] }} ariaLabel="报销处理进度" testId="mobile-reimbursement-processing-progress" suppressedTargetHref={paymentHandoff?.targetHref} targetLinkLabel="查看所在付款批次" mobile /></section>
{canDeleteDraft ? <section className="mobile-card"><details><summary className="cursor-pointer py-3 text-sm" data-testid="mobile-reimbursement-more">更多</summary><Button className="w-full" disabled={deleteReimbursementMutation.isPending} onClick={() => setConfirmDeleteReimbursement(true)} type="button" variant="destructive">删除报销单</Button></details></section> : null}
</>
);
client/src/pages/ReimbursementDetailPage.tsx
+13 -10
查看文件
@@ -48,6 +48,7 @@ import { ReimbursementTravelSummary } from "../components/reimbursements/Reimbur
import { ReimbursementHeaderEditor } from "../components/reimbursements/ReimbursementHeaderEditor";
import { ReimbursementDesktopWorkspaceShell } from "../components/reimbursements/ReimbursementDesktopWorkspaceShell";
import { ProcessingProgress } from "../components/patterns/ProcessingProgress";
import { resolveReimbursementPaymentHandoff } from "../lib/reimbursementPaymentHandoff";
import { StatusBadge } from "../components/common/StatusBadge";
import { Button } from "../components/ui/button";
import {
@@ -150,6 +151,9 @@ export function ReimbursementDetailPage() {
enabled: Boolean(reimbursementId),
queryKey: ["reimbursements", reimbursementId],
queryFn: () => fetchReimbursementDetail(reimbursementId),
staleTime: 0,
refetchOnMount: true,
refetchOnWindowFocus: (query) => Boolean(query.state.data && !["draft", "rejected"].includes(query.state.data.status)),
});
const expenseTypesQuery = useQuery({
@@ -936,6 +940,7 @@ export function ReimbursementDetailPage() {
const invoiceCount = detail.invoices.length;
const hasBlockingPrecheck = blockStandardChecks.length > 0;
const processingProgress = detail.processingProgress ?? { stages: [] };
const paymentHandoff = resolveReimbursementPaymentHandoff({ ...detail, progress: detail.processingProgress });
const currentProcessingStage = processingProgress.stages.find((stage) =>
stage.state === "current" || stage.state === "exception",
);
@@ -959,12 +964,7 @@ export function ReimbursementDetailPage() {
if (detail.status === "reviewing") {
return currentProcessingStage?.detail ?? "查看处理进度";
}
if (detail.status === "approved") {
return "等待财务组建付款批次";
}
if (detail.status === "paid") {
return "查看付款结果";
}
if (paymentHandoff) return paymentHandoff.nextStep;
return "查看记录";
})();
const primaryAction = (() => {
@@ -1005,7 +1005,11 @@ export function ReimbursementDetailPage() {
);
}
if (detail.status === "approved" && canManagePaymentBatch) {
if (paymentHandoff?.targetHref) {
return <Button asChild><Link to={paymentHandoff.targetHref}>查看所在付款批次</Link></Button>;
}
if (paymentHandoff?.canCreateBatch && canManagePaymentBatch) {
return (
<Button asChild data-testid="reimbursement-open-pending-payment-batches">
<Link to={`/payment-batches?view=pending&q=${encodeURIComponent(resolveReimbursementDisplayCode(detail))}`}>
@@ -1105,11 +1109,10 @@ export function ReimbursementDetailPage() {
const workspaceAfterEvidence = (
<>
{(budgetHint?.exceedsThreshold || detail.riskFlags.length) ? <SectionPanel title="需要关注">{budgetHint?.exceedsThreshold ? <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">预算 {budgetHint.budgetCode}：提交后预计使用 {budgetHint.nextUsagePercent.toFixed(2)}%，已达到预警阈值。</p> : null}{detail.riskFlags.length ? <RiskFlagsCard items={detail.riskFlags} title="待处理风险项" /> : null}</SectionPanel> : null}
<SectionPanel title="处理进度"><ProcessingProgress progress={processingProgress} ariaLabel="报销处理进度" testId="reimbursement-workflow-progress" targetLinkLabel="查看所在付款批次" /></SectionPanel>
</>
);
const workspaceActionPanel = (
<BusinessDetailActionPanel status={<StatusBadge status={detail.deletedAt ? "deleted" : detail.status} />} primaryAction={primaryAction} secondaryActions={secondaryActions} moreActions={showSecondaryDetail ? <div className="grid gap-2" data-testid="reimbursement-secondary-detail">{detail.status !== "paid" ? <Button asChild variant="secondary"><Link to={"/reimbursements/" + detail.id + "/print"}>打印 / PDF</Link></Button> : null}{canDeleteReimbursement ? <Button data-testid="reimbursement-delete-draft" disabled={deleteReimbursementMutation.isPending} onClick={() => setConfirmDeleteReimbursement(true)} type="button" variant="destructive">删除报销单</Button> : null}</div> : null} summary={<><div>下一步：{nextStepText}</div>{workspaceModel.issueAnchors.map((issue) => <a className="block hover:underline" href={"#" + issue.id} key={issue.label}>{issue.label}</a>)}</>} testId="reimbursement-action-panel">
<BusinessDetailActionPanel className="lg:static" status={<StatusBadge status={detail.deletedAt ? "deleted" : detail.status} />} primaryAction={primaryAction} secondaryActions={secondaryActions} moreActions={showSecondaryDetail ? <div className="grid gap-2" data-testid="reimbursement-secondary-detail">{detail.status !== "paid" ? <Button asChild variant="secondary"><Link to={"/reimbursements/" + detail.id + "/print"}>打印 / PDF</Link></Button> : null}{canDeleteReimbursement ? <Button data-testid="reimbursement-delete-draft" disabled={deleteReimbursementMutation.isPending} onClick={() => setConfirmDeleteReimbursement(true)} type="button" variant="destructive">删除报销单</Button> : null}</div> : null} summary={<><div>下一步：{nextStepText}</div>{workspaceModel.issueAnchors.map((issue) => <a className="block hover:underline" href={"#" + issue.id} key={issue.label}>{issue.label}</a>)}</>} testId="reimbursement-action-panel">
<ReimbursementActions status={detail.status} showSubmitAction={false} showWithdrawAction={isReimbursementParticipant} actionError={["reviewing", "approved"].includes(detail.status) ? actionError : ""} submitDisabled={blockStandardChecks.length > 0} submitHint="" submitNotice="" isPending={mutation.isPending} onSubmit={() => void handleSubmitAction()} onWithdraw={(comment) => mutation.mutate({ action: "withdraw", comment })} />
</BusinessDetailActionPanel>
);
@@ -1117,7 +1120,7 @@ export function ReimbursementDetailPage() {
return (
<>
{downloadReasonDialog}
<ReimbursementDesktopWorkspaceShell model={workspaceModel} capabilities={workspaceCapabilities} slots={{ status: <StatusBadge status={detail.deletedAt ? "deleted" : detail.status} />, backAction: <Button asChild className="min-h-11 px-2" data-testid="reimbursement-back" variant="ghost"><Link replace to={backSource}><ArrowLeft aria-hidden="true" className="size-4" />{backLabel}</Link></Button>, headerDetails: workspaceHeaderDetails, beforeEvidence: workspaceBeforeEvidence, afterEvidence: workspaceAfterEvidence, actionPanel: workspaceActionPanel }} />
<ReimbursementDesktopWorkspaceShell model={workspaceModel} capabilities={workspaceCapabilities} slots={{ status: <StatusBadge status={detail.deletedAt ? "deleted" : detail.status} />, backAction: <Button asChild className="min-h-11 px-2" data-testid="reimbursement-back" variant="ghost"><Link replace to={backSource}><ArrowLeft aria-hidden="true" className="size-4" />{backLabel}</Link></Button>, headerDetails: workspaceHeaderDetails, beforeEvidence: workspaceBeforeEvidence, afterEvidence: workspaceAfterEvidence, actionPanel: workspaceActionPanel, asideContext: <SectionPanel title="处理进度"><ProcessingProgress progress={processingProgress} ariaLabel="报销处理进度" testId="reimbursement-workflow-progress" targetLinkLabel="查看所在付款批次" suppressedTargetHref={paymentHandoff?.targetHref} /></SectionPanel> }} />
<Dialog open={isInvoiceDialogOpen} onOpenChange={handleInvoiceDialogOpenChange}>
<DialogContent
className="max-h-[85vh] max-w-3xl overflow-y-auto"
client/src/pages/reimbursement-workspace/ReimbursementApprovalAdapter.tsx
+15 -5
查看文件
@@ -28,6 +28,7 @@ import { ReimbursementReturnReferencePicker } from "../../components/reimburseme
import { BusinessDetailActionPanel } from "../../components/patterns/BusinessDetailTemplate";
import { MobileStickyActionBar } from "../../components/patterns/MobileStickyActionBar";
import { SectionPanel } from "../../components/patterns/SectionPanel";
import { ProcessingProgress } from "../../components/patterns/ProcessingProgress";
import { Button } from "../../components/ui/button";
import { Label } from "../../components/ui/label";
import { Textarea } from "../../components/ui/textarea";
@@ -96,6 +97,9 @@ export function ReimbursementApprovalAdapter({ detail, layout, refetchTask, task
enabled: Boolean(reimbursementId) && online,
queryKey: ["reimbursements", reimbursementId],
queryFn: () => fetchReimbursementDetail(reimbursementId),
staleTime: 0,
refetchOnMount: true,
refetchOnWindowFocus: detail.task.status !== "pending",
});
const snapshot = detail.workflowInstance?.contextData ?? null;
const evidence = useMemo(() => {
@@ -314,6 +318,11 @@ export function ReimbursementApprovalAdapter({ detail, layout, refetchTask, task
</div>
</SectionPanel>
);
const processingProgress = (
<SectionPanel title="处理进度">
<ProcessingProgress progress={reimbursementDetailQuery.data?.processingProgress ?? { stages: [] }} ariaLabel="报销处理进度" testId="reimbursement-approval-processing-progress" targetLinkLabel="查看所在付款批次" mobile={layout === "mobile"} />
</SectionPanel>
);
const hasMaterials = model.evidence.items.some((item) => item.invoices.length > 0)
|| model.evidence.unlinkedInvoices.length > 0
|| model.evidence.attachments.length > 0;
@@ -351,19 +360,19 @@ export function ReimbursementApprovalAdapter({ detail, layout, refetchTask, task
);
if (layout === "mobile") {
const mobileActions = detail.task.status === "pending" ? (
<>
const mobileDecisionContext = detail.task.status === "pending" ? (
<section className="mobile-card space-y-3">
{offlineNotice}
{issueAnchors}
{commentEditor}
{canTransfer || !online ? <Button className="min-h-11 w-full" data-testid="mobile-approvals-transfer" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "transfer" ? null : "transfer")} type="button" variant="ghost">转审</Button> : null}
</section>
) : null;
const mobileActions = detail.task.status === "pending" ? (
<MobileStickyActionBar contentClassName="grid-cols-2" testId="mobile-approvals-sticky-actions">
{allowedActions.has("return") || !online ? <Button className="min-h-12 w-full" data-testid="mobile-approvals-return" disabled={actionDisabled} onClick={() => setActiveSecondaryAction(activeSecondaryAction === "return" ? null : "return")} type="button" variant="secondary">退回修改</Button> : null}
<Button className="min-h-12 w-full" data-testid="mobile-approvals-approve" disabled={actionDisabled || !allowedActions.has("approve")} onClick={() => requestAction("approve")} type="button">通过</Button>
</MobileStickyActionBar>
</>
) : null;
return (
<>
@@ -375,7 +384,7 @@ export function ReimbursementApprovalAdapter({ detail, layout, refetchTask, task
status: <StatusBadge label={workflowTaskStatusLabel(detail.task.status)} status={detail.task.status} />,
beforeEvidence: detail.task.status !== "pending" ? <p className="mobile-card text-sm text-blue-800">当前显示报销单最新版本；审批意见与提交检查保留历史语义。</p> : null,
afterEvidence: snapshot?.budgetCheckStatus === "missing" ? <p className="mobile-card text-sm text-zinc-500" id="reimbursement-workspace-snapshot">该次提交未留存预算快照。</p> : null,
timeline,
timeline: <>{mobileDecisionContext}{processingProgress}{timeline}</>,
mobileActions,
}}
/>
@@ -386,6 +395,7 @@ export function ReimbursementApprovalAdapter({ detail, layout, refetchTask, task
const actionPanel = (
<BusinessDetailActionPanel
className="lg:static"
title="审批决定"
beforeActions={actionPanelBeforeActions}
primaryAction={allowedActions.has("approve") || allowedActions.has("return") ? (
@@ -413,7 +423,7 @@ export function ReimbursementApprovalAdapter({ detail, layout, refetchTask, task
beforeEvidence: detail.task.status !== "pending" ? <p className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-800">当前显示报销单最新版本；审批意见与提交检查保留历史语义。</p> : null,
afterEvidence: snapshot?.budgetCheckStatus === "missing" ? <p className="text-sm text-zinc-500" id="reimbursement-workspace-snapshot">该次提交未留存预算快照。</p> : null,
actionPanel,
asideContext: timeline,
asideContext: <>{processingProgress}{timeline}</>,
}}
/>
{dialogs}