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

补齐报销待组批财务入口 [09-04-reimbursement-state-gap-finance-view][R1]

浏览代码
这个提交包含在：
wangsli
2026-09-05 09:14:13 +08:00
父节点 8e0af8235e
当前提交 5fe9f78bc9
共修改 9 个文件，包含 243 行新增和 67 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/pages/PaymentBatchesPage.tsx
+140 -35
查看文件
@@ -147,12 +147,10 @@ export function PaymentBatchesPage() {
const canRevealPayeeBank =
hasPermission(permissions, "employee.bank.read") &&
Boolean(me?.roleCodes.some((roleCode) => ["finance", "finance_mgr"].includes(roleCode)));
const [candidateSearch, setCandidateSearch] = useState("");
const [selectedCandidateIds, setSelectedCandidateIds] = useState<string[]>([]);
const [selectedPaymentChannel, setSelectedPaymentChannel] = useState<PaymentChannel>("bank");
const receiptInputRef = useRef<HTMLInputElement | null>(null);
const [error, setError] = useState("");
const [showCreatePanel, setShowCreatePanel] = useState(false);
const [confirmPaymentAction, setConfirmPaymentAction] = useState<{
kind: "financeReview" | "financePayment";
batchId: string;
@@ -181,18 +179,50 @@ export function PaymentBatchesPage() {
};
}, [receiptPreview?.objectUrl]);
const selectedBatchId = searchParams.get("id") ?? "";
const requestedView = searchParams.get("view");
const activeView = selectedBatchId
? "detail"
: canManageBatch && requestedView !== "batches"
? "pending"
: "batches";
const candidateSearch = activeView === "pending" ? (searchParams.get("q") ?? "") : "";
const parsedCandidatePage = Number(searchParams.get("page") ?? "1");
const candidatePage = activeView === "pending" && Number.isInteger(parsedCandidatePage) && parsedCandidatePage > 0
? parsedCandidatePage
: 1;
const candidatePageSize = 20;
useEffect(() => {
if (selectedBatchId) return;
const normalizedView = canManageBatch && requestedView !== "batches" ? "pending" : "batches";
if (requestedView === normalizedView) return;
const next = new URLSearchParams(searchParams);
next.set("view", normalizedView);
if (normalizedView === "batches") {
next.delete("q");
next.delete("page");
}
setSearchParams(next, { replace: true });
}, [canManageBatch, requestedView, searchParams, selectedBatchId, setSearchParams]);
const listQuery = useQuery({
queryKey: ["payment-batches"],
queryFn: () => fetchPaymentBatches(),
});
const candidatesQuery = useQuery({
queryKey: ["payment-batch-candidates", candidateSearch],
enabled: showCreatePanel && canManageBatch,
queryFn: () => fetchPaymentBatchCandidates({ q: candidateSearch, page: 1, pageSize: 50 }),
queryKey: ["payment-batch-candidates", candidateSearch, candidatePage, candidatePageSize],
enabled: canManageBatch,
queryFn: () => fetchPaymentBatchCandidates({
q: candidateSearch,
page: candidatePage,
pageSize: candidatePageSize,
}),
});
const selectedBatchId = searchParams.get("id") ?? "";
const batches = useMemo(() => listQuery.data?.items ?? [], [listQuery.data?.items]);
const candidateTotal = candidatesQuery.data?.total ?? 0;
const candidateTotalPages = Math.max(1, Math.ceil(candidateTotal / candidatePageSize));
const selectedBatchQuery = useQuery({
queryKey: ["payment-batches", "detail", selectedBatchId],
enabled: Boolean(selectedBatchId),
@@ -279,9 +309,40 @@ export function PaymentBatchesPage() {
const returnToList = () => {
const next = new URLSearchParams(searchParams);
next.delete("id");
next.set("view", "batches");
setSearchParams(next, { replace: true });
};
const openView = (view: "pending" | "batches") => {
if (view === "batches") {
setSelectedCandidateIds([]);
setSelectedPaymentChannel("bank");
}
const next = new URLSearchParams(searchParams);
next.delete("id");
next.set("view", view);
next.delete("page");
if (view === "batches") next.delete("q");
setSearchParams(next);
};
const updateCandidateSearch = (value: string) => {
const next = new URLSearchParams(searchParams);
next.set("view", "pending");
if (value) next.set("q", value);
else next.delete("q");
next.delete("page");
setSearchParams(next, { replace: true });
};
const updateCandidatePage = (page: number) => {
const next = new URLSearchParams(searchParams);
next.set("view", "pending");
if (page > 1) next.set("page", String(page));
else next.delete("page");
setSearchParams(next);
};
const createMutation = useMutation({
mutationFn: async () =>
createPaymentBatch({
@@ -292,10 +353,12 @@ export function PaymentBatchesPage() {
onSuccess: async ({ item }) => {
setError("");
setSelectedCandidateIds([]);
setCandidateSearch("");
setSelectedPaymentChannel("bank");
const next = new URLSearchParams(searchParams);
next.set("id", item.id);
next.set("view", "batches");
next.delete("q");
next.delete("page");
setSearchParams(next, { replace: true });
await refresh();
toast.success("已提交付款复核，等待负责人处理");
@@ -571,39 +634,67 @@ export function PaymentBatchesPage() {
返回列表
</Button>
) : null}
{!selectedBatchId && canManageBatch ? (
<Button type="button" onClick={() => setShowCreatePanel(true)}>
新建批次
</Button>
) : null}
</HeaderActionGroup>
}
/>
{error ? <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</div> : null}
{!selectedBatchId && showCreatePanel ? (
<div className="finance-command-panel space-y-4" data-testid="payment-batch-create-panel">
<div>
<h3 className="text-base font-semibold text-zinc-900">新建批次</h3>
</div>
{!canManageBatch ? (
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">
当前账号仅可查看批次并执行复核，创建与编辑入口仅对付款批次管理员开放。
</div>
{!selectedBatchId ? (
<nav className="flex min-h-11 flex-wrap items-center gap-2 border-b border-zinc-200" aria-label="付款工作台视图">
{canManageBatch ? (
<button
type="button"
className={`min-h-11 border-b-2 px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 ${activeView === "pending" ? "border-primary text-primary" : "border-transparent text-zinc-600 hover:text-zinc-900"}`}
aria-current={activeView === "pending" ? "page" : undefined}
onClick={() => openView("pending")}
>
待组批 {candidateTotal}
</button>
) : null}
<button
type="button"
className={`min-h-11 border-b-2 px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 ${activeView === "batches" ? "border-primary text-primary" : "border-transparent text-zinc-600 hover:text-zinc-900"}`}
aria-current={activeView === "batches" ? "page" : undefined}
onClick={() => openView("batches")}
>
付款批次 {batches.length}
</button>
</nav>
) : null}
{!selectedBatchId && activeView === "pending" ? (
<div className="finance-command-panel space-y-4" data-testid="payment-batch-create-panel">
<div className="flex flex-wrap items-start justify-between gap-3">
<div>
<h3 className="text-base font-semibold text-zinc-900">待组批报销</h3>
<p className="mt-1 text-sm text-zinc-500">选择报销后创建付款批次并提交复核。</p>
</div>
{selectedCandidateIds.length ? (
<span className="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700">
已选择 {selectedCandidateIds.length} 项
</span>
) : null}
</div>
<div className="space-y-2">
<Label>选择待付款报销</Label>
<Label htmlFor="payment-batch-candidate-search">搜索待组批报销</Label>
<Input
id="payment-batch-candidate-search"
data-testid="payment-batch-candidate-search"
value={candidateSearch}
disabled={!canManageBatch}
onChange={(event) => setCandidateSearch(event.target.value)}
onChange={(event) => updateCandidateSearch(event.target.value)}
placeholder="按报销编号、人员或摘要搜索"
/>
<div className="max-h-72 space-y-2 overflow-y-auto rounded-lg border border-zinc-200 p-2" data-testid="payment-batch-candidates">
{candidatesQuery.isLoading ? <div className="px-2 py-3 text-sm text-zinc-500">正在加载待付款报销...</div> : null}
{candidatesQuery.isError ? <div className="px-2 py-3 text-sm text-red-600">{resolveError(candidatesQuery.error)}</div> : null}
<div className="space-y-2 rounded-lg border border-zinc-200 p-2" data-testid="payment-batch-candidates">
{candidatesQuery.isLoading ? <div className="px-2 py-6 text-center text-sm text-zinc-500">正在加载待组批报销...</div> : null}
{candidatesQuery.isError ? (
<div className="flex flex-wrap items-center justify-between gap-2 px-2 py-3 text-sm text-red-600" role="alert">
<span>{resolveError(candidatesQuery.error)}</span>
<Button type="button" size="sm" variant="secondary" disabled={candidatesQuery.isFetching} onClick={() => void candidatesQuery.refetch()}>
{candidatesQuery.isFetching ? "重新加载中..." : "重新加载"}
</Button>
</div>
) : null}
{(candidatesQuery.data?.items ?? []).map((candidate) => {
const selected = selectedCandidateIds.includes(candidate.entityId);
return (
@@ -614,7 +705,7 @@ export function PaymentBatchesPage() {
>
<input
type="checkbox"
className="mt-1 h-4 w-4"
className="mt-1 h-5 w-5"
checked={selected}
onChange={(event) => setSelectedCandidateIds((current) =>
event.target.checked
@@ -636,9 +727,20 @@ export function PaymentBatchesPage() {
);
})}
{!candidatesQuery.isLoading && !candidatesQuery.isError && !(candidatesQuery.data?.items ?? []).length ? (
<div className="px-2 py-3 text-sm text-zinc-500">没有可加入批次的已审批报销。</div>
<div className="px-2 py-6 text-center text-sm text-zinc-500">当前没有待组批报销</div>
) : null}
</div>
{!candidatesQuery.isError && candidateTotal > candidatePageSize ? (
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-zinc-600" data-testid="payment-batch-candidate-pagination">
<span>第 {candidatePage} / {candidateTotalPages} 页，共 {candidateTotal} 项</span>
<div className="flex gap-2">
<Button type="button" size="sm" variant="secondary" disabled={candidatePage <= 1 || candidatesQuery.isFetching} onClick={() => updateCandidatePage(candidatePage - 1)}>上一页</Button>
<Button type="button" size="sm" variant="secondary" disabled={candidatePage >= candidateTotalPages || candidatesQuery.isFetching} onClick={() => updateCandidatePage(candidatePage + 1)}>下一页</Button>
</div>
</div>
) : null}
{selectedCandidateIds.length ? (
<>
<div className="max-w-sm space-y-2">
<Label htmlFor="payment-batch-default-channel">付款渠道</Label>
<select
@@ -646,7 +748,6 @@ export function PaymentBatchesPage() {
data-testid="payment-batch-default-channel"
className="select-std w-full"
value={selectedPaymentChannel}
disabled={!canManageBatch}
onChange={(event) => setSelectedPaymentChannel(event.target.value as PaymentChannel)}
>
{PAYMENT_CHANNEL_OPTIONS.map((option) => (
@@ -657,10 +758,14 @@ export function PaymentBatchesPage() {
<div className="text-xs text-zinc-500">
已选择 {selectedCandidateIds.length} 项；系统自动生成编号和标题，按{paymentChannelLabel(selectedPaymentChannel)}提交负责人复核。
</div>
</>
) : null}
</div>
<Button type="button" disabled={createMutation.isPending || !canManageBatch || selectedCandidateIds.length === 0} onClick={() => createMutation.mutate()}>
{createMutation.isPending ? "提交中..." : "创建并提交复核"}
</Button>
{selectedCandidateIds.length ? (
<Button type="button" disabled={createMutation.isPending} onClick={() => createMutation.mutate()}>
{createMutation.isPending ? "提交中..." : "创建并提交复核"}
</Button>
) : null}
</div>
) : null}
@@ -995,7 +1100,7 @@ export function PaymentBatchesPage() {
) : (
<div className="finance-command-panel text-sm text-zinc-500">未找到付款批次</div>
)
) : (
) : activeView === "batches" ? (
<>
<BusinessListToolbar
actions={
@@ -1090,7 +1195,7 @@ export function PaymentBatchesPage() {
</tbody>
</BusinessTable>
</>
)}
) : null}
<ActionConfirmDialog
open={Boolean(confirmPaymentAction)}
onOpenChange={(open) => {
client/src/pages/ReimbursementDetailPage.tsx
+12 -1
查看文件
@@ -160,6 +160,7 @@ export function ReimbursementDetailPage() {
const canUploadInvoice = hasPermission(permissions, "invoice.upload");
const canViewOwnInvoice = hasPermission(permissions, "invoice.view_own");
const canDeleteExpense = hasPermission(permissions, "expense.delete_own");
const canManagePaymentBatch = hasPermission(permissions, "payment.batch.manage");
const reimbursementPrecheckQuery = useQuery({
enabled: Boolean(
@@ -956,7 +957,7 @@ export function ReimbursementDetailPage() {
return currentProcessingStage?.detail ?? "查看处理进度";
}
if (detail.status === "approved") {
return "等待财务处理";
return "等待财务组建付款批次";
}
if (detail.status === "paid") {
return "查看付款结果";
@@ -1001,6 +1002,16 @@ export function ReimbursementDetailPage() {
);
}
if (detail.status === "approved" && canManagePaymentBatch) {
return (
<Button asChild data-testid="reimbursement-open-pending-payment-batches">
<Link to={`/payment-batches?view=pending&q=${encodeURIComponent(resolveReimbursementDisplayCode(detail))}`}>
去组建付款批次
</Link>
</Button>
);
}
return null;
})();
client/tests/e2e/main-flow.spec.ts
-2
查看文件
@@ -110,8 +110,6 @@ test("E2E 主链路：登录→报销→待办审批→票据OCR→支付→登
const reimbursement = await apiGetData<{ formNumber: string | null }>(page.request, `/api/reimbursements/${reimbursementId}`);
const reimbursementDisplayCode = reimbursement.formNumber ?? reimbursementId;
await page.goto("/payment-batches");
await expect(page.getByTestId("payment-batch-create-panel")).toHaveCount(0);
await page.getByRole("button", { name: "新建批次" }).click();
const createCard = page.getByTestId("payment-batch-create-panel");
await expect(createCard).toBeVisible();
const createBatchResponsePromise = page.waitForResponse((response) => {
client/tests/e2e/payment-reviewer-permissions.spec.ts
+36 -9
查看文件
@@ -45,6 +45,8 @@ type MockScenario = {
businessDate: string | null;
summary: string | null;
}>;
paymentCandidateTotal?: number;
onCandidateQuery?: (query: URLSearchParams) => void;
contracts?: SyntheticContract[];
onCreatePaymentBatch?: (payload: unknown) => void;
};
@@ -156,7 +158,8 @@ function expectNoPageErrors(errors: string[]) {
async function mockSyntheticApis(page: Page, actor: SyntheticActor, scenario: MockScenario = {}) {
await page.route((url) => url.pathname.startsWith("/api/"), async (route) => {
const request = route.request();
const pathName = new URL(request.url()).pathname;
const requestUrl = new URL(request.url());
const pathName = requestUrl.pathname;
if (pathName === "/api/auth/capabilities") {
await fulfillJson(route, {
@@ -265,7 +268,13 @@ async function mockSyntheticApis(page: Page, actor: SyntheticActor, scenario: Mo
}
if (pathName === "/api/payment-batches/candidates") {
const items = scenario.paymentCandidates ?? [];
await fulfillJson(route, { items, page: 1, pageSize: 50, total: items.length });
scenario.onCandidateQuery?.(requestUrl.searchParams);
await fulfillJson(route, {
items,
page: Number(requestUrl.searchParams.get("page") ?? "1"),
pageSize: Number(requestUrl.searchParams.get("pageSize") ?? "20"),
total: scenario.paymentCandidateTotal ?? items.length,
});
return;
}
if (pathName === "/api/payment-batches" && request.method() === "POST") {
@@ -342,13 +351,18 @@ test("只有付款复核职责的经理可看应付账款但看不到导出", as
test("只有付款复核职责的经理看不到新建批次", async ({ page }) => {
test.skip(process.env.E2E_MODE === "live", "只使用本地合成角色，不访问公网");
const pageErrors = capturePageErrors(page);
await mockSyntheticApis(page, REVIEWER_ACTOR);
let candidateQueryCount = 0;
await mockSyntheticApis(page, REVIEWER_ACTOR, {
onCandidateQuery: () => { candidateQueryCount += 1; },
});
await login(page, REVIEWER_ACTOR);
await page.goto("/payment-batches");
await expect(page).toHaveURL(/\/payment-batches$/);
await page.goto("/payment-batches?view=pending");
await expect(page).toHaveURL(/\/payment-batches\?view=batches$/);
await expect(page.getByRole("heading", { level: 1, name: "付款", exact: true })).toBeVisible();
await expect(page.getByRole("button", { name: "新建批次", exact: true })).toHaveCount(0);
await expect(page.getByRole("button", { name: /待组批/ })).toHaveCount(0);
await expect(page.getByRole("button", { name: /付款批次/ })).toBeVisible();
expect(candidateQueryCount).toBe(0);
expectNoPageErrors(pageErrors);
});
@@ -394,8 +408,11 @@ test("财务从业务候选选择报销并使用所选实体创建付款批次",
test.skip(process.env.E2E_MODE === "live", "只使用本地合成角色，不访问公网");
const pageErrors = capturePageErrors(page);
let createPayload: unknown = null;
const candidateQueries: string[] = [];
await mockSyntheticApis(page, FINANCE_ACTOR, {
paymentCandidates: [PAYMENT_CANDIDATE],
paymentCandidateTotal: 21,
onCandidateQuery: (query) => candidateQueries.push(query.toString()),
onCreatePaymentBatch: (payload) => {
createPayload = payload;
},
@@ -403,9 +420,15 @@ test("财务从业务候选选择报销并使用所选实体创建付款批次",
await login(page, FINANCE_ACTOR);
await page.goto("/payment-batches");
await expect(page).toHaveURL(/\/payment-batches$/);
await expect(page).toHaveURL(/\/payment-batches\?view=pending$/);
await expect(page.getByRole("heading", { level: 1, name: "付款", exact: true })).toBeVisible();
await page.getByRole("button", { name: "新建批次", exact: true }).click();
await expect(page.getByRole("button", { name: "待组批 21", exact: true })).toHaveAttribute("aria-current", "page");
await expect(page.getByTestId("payment-batch-candidates")).toHaveCount(1);
await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)).toBeLessThanOrEqual(2);
await page.getByRole("button", { name: "下一页", exact: true }).click();
await expect(page).toHaveURL(/view=pending&page=2/);
await expect.poll(() => candidateQueries.some((query) => query.includes("page=2") && query.includes("pageSize=20"))).toBe(true);
await page.getByRole("button", { name: "上一页", exact: true }).click();
const candidateRow = page.getByTestId("payment-batch-candidate-row");
await expect(candidateRow).toContainText(PAYMENT_CANDIDATE.businessNo);
@@ -413,13 +436,17 @@ test("财务从业务候选选择报销并使用所选实体创建付款批次",
await expect(candidateRow).toContainText("¥1,280.50");
await expect(page.getByText(PAYMENT_CANDIDATE_ENTITY_ID, { exact: true })).toHaveCount(0);
await expect(page.locator('input[placeholder*="UUID"], input[placeholder*="uuid"], input[placeholder*="entityId"], input[placeholder*="内部 ID"], input[placeholder*="内部ID"]')).toHaveCount(0);
await page.getByTestId("payment-batch-candidate-search").fill(PAYMENT_CANDIDATE.businessNo);
await expect(page).toHaveURL(new RegExp(`view=pending&q=${PAYMENT_CANDIDATE.businessNo}`));
await page.setViewportSize({ width: 375, height: 812 });
await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)).toBeLessThanOrEqual(2);
await candidateRow.getByRole("checkbox").check();
await page.getByTestId("payment-batch-default-channel").selectOption("cash");
await expect(page.getByText("按现金提交负责人复核", { exact: false })).toBeVisible();
await page.getByRole("button", { name: "创建并提交复核", exact: true }).click();
await expect(page).toHaveURL(new RegExp(`/payment-batches\\?id=${CREATED_PAYMENT_BATCH_ID}$`));
await expect(page).toHaveURL(new RegExp(`/payment-batches\\?view=batches&id=${CREATED_PAYMENT_BATCH_ID}$`));
await expect(page.getByRole("heading", { level: 1, name: "付款", exact: true })).toBeVisible();
await expect(page.getByText("已提交付款复核，等待负责人处理", { exact: true })).toBeVisible();
expect(createPayload).toEqual({
client/tests/e2e/reimbursement-content-consistency.spec.ts
+14
查看文件
@@ -143,6 +143,20 @@ test("申请人进度与审批历史保持有意分工", () => {
expect(approvalAdapter).not.toContain("<ProcessingProgress");
});
test("待组批工作台保持单一候选源且报销详情使用可刷新深链", () => {
const paymentPage = source("src/pages/PaymentBatchesPage.tsx");
const reimbursementDetail = source("src/pages/ReimbursementDetailPage.tsx");
expect(paymentPage.match(/data-testid="payment-batch-candidates"/g)).toHaveLength(1);
expect(paymentPage.match(/fetchPaymentBatchCandidates\(/g)).toHaveLength(1);
expect(paymentPage).toContain('next.set("view", "pending")');
expect(paymentPage).toContain('next.set("page", String(page))');
expect(paymentPage).toContain("candidatesQuery.data?.total");
expect(reimbursementDetail).toContain('hasPermission(permissions, "payment.batch.manage")');
expect(reimbursementDetail).toContain("/payment-batches?view=pending&q=");
expect(reimbursementDetail).toContain("等待财务组建付款批次");
});
test("票据申报事实与系统金额证据状态分属正文和处理上下文", () => {
const baseDetail = {
items: [{
client/tests/e2e/reimbursement-payment-batch-flow.spec.ts
-2
查看文件
@@ -102,8 +102,6 @@ test("E2E 报销付款批次主链路：提交 -> 审批 -> 创建批次 -> 复
await page.goto("/payment-batches");
await expect(page).toHaveURL(/\/payment-batches/);
await expect(page.getByTestId("payment-batch-create-panel")).toHaveCount(0);
await page.getByRole("button", { name: "新建批次" }).click();
const createCard = page.getByTestId("payment-batch-create-panel");
await expect(createCard).toBeVisible();
const createBatchResponsePromise = page.waitForResponse((response) => {