675 行
30 KiB
TypeScript
675 行
30 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { useSearchParams } from "react-router-dom";
|
|
import {
|
|
cancelPaymentBatch,
|
|
createPaymentBatch,
|
|
deletePaymentBatchReceiptAttachment,
|
|
downloadPaymentBatchReceiptAttachment,
|
|
executePaymentBatch,
|
|
fetchPaymentBatchReceiptAttachments,
|
|
fetchPaymentBatches,
|
|
reviewPaymentBatch,
|
|
updatePaymentBatchItem,
|
|
uploadPaymentBatchReceiptAttachments,
|
|
type PaymentBatch,
|
|
type PaymentBatchReceiptAttachment,
|
|
type PaymentBatchEntityType,
|
|
type PaymentChannel,
|
|
} from "../api/paymentBatches";
|
|
import { isApiError } from "../api/types";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { hasPermission } from "../auth/permissions";
|
|
import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
|
|
import { ActionConfirmDialog } from "../components/common/ActionConfirmDialog";
|
|
import { Button } from "../components/ui/button";
|
|
import { Input } from "../components/ui/input";
|
|
import { Label } from "../components/ui/label";
|
|
import { RiskFlagsCard } from "../components/common/RiskFlagsCard";
|
|
import { StatusBadge } from "../components/common/StatusBadge";
|
|
import { DateTextInput } from "../components/common/DateTextInput";
|
|
import { downloadBlob } from "../lib/download";
|
|
import { formatDisplayDate, formatDisplayDateTime } from "../lib/displayFormat";
|
|
import { toast } from "sonner";
|
|
|
|
const PAYMENT_CHANNEL_OPTIONS: PaymentChannel[] = ["bank", "alipay", "wechat", "cash", "other"];
|
|
const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
|
|
|
|
function batchStatusLabel(value: string) {
|
|
if (value === "draft") return "草稿";
|
|
if (value === "reviewed") return "已复核";
|
|
if (value === "executed") return "已执行";
|
|
if (value === "failed") return "执行失败";
|
|
if (value === "cancelled") return "已取消";
|
|
return value || "-";
|
|
}
|
|
|
|
function entityTypeLabel(value: string) {
|
|
if (value === "reimbursement") return "报销";
|
|
if (value === "travel_order") return "差旅订单";
|
|
return value || "-";
|
|
}
|
|
|
|
function paymentChannelLabel(value: PaymentChannel | string | null | undefined) {
|
|
if (value === "bank") return "银行转账";
|
|
if (value === "alipay") return "支付宝";
|
|
if (value === "wechat") return "微信";
|
|
if (value === "cash") return "现金";
|
|
if (value === "other") return "其他";
|
|
return value || "-";
|
|
}
|
|
|
|
function paymentItemStatusLabel(value: string) {
|
|
if (value === "pending") return "待付款";
|
|
if (value === "paid") return "已支付";
|
|
if (value === "executed") return "已执行";
|
|
if (value === "failed") return "付款失败";
|
|
if (value === "cancelled") return "已取消";
|
|
if (value === "skipped") return "已跳过";
|
|
return value || "-";
|
|
}
|
|
|
|
function reviewNextStepLabel(value: PaymentBatch["reviewRequirement"]["nextStep"]) {
|
|
if (value === "first_review") return "等待首轮复核";
|
|
if (value === "second_review") return "等待二次复核";
|
|
return "可执行付款标记";
|
|
}
|
|
|
|
function reviewerDisplayName(value: string | null | undefined) {
|
|
if (!value) return "";
|
|
return UUID_PATTERN.test(value) ? "已记录" : value;
|
|
}
|
|
|
|
function formatFileSize(value: number) {
|
|
if (!Number.isFinite(value) || value <= 0) return "-";
|
|
if (value < 1024) return `${value} B`;
|
|
if (value < 1024 * 1024) return `${Math.ceil(value / 1024)} KB`;
|
|
return `${(value / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
function resolveError(error: unknown) {
|
|
return isApiError(error)
|
|
? `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`
|
|
: error instanceof Error
|
|
? error.message
|
|
: "操作失败";
|
|
}
|
|
|
|
export function PaymentBatchesPage() {
|
|
const queryClient = useQueryClient();
|
|
const { permissions } = useAuth();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const canManageBatch = hasPermission(permissions, "payment.batch.manage");
|
|
const canReviewBatch = hasPermission(permissions, "risk.review.manage");
|
|
const [entityType, setEntityType] = useState<PaymentBatchEntityType>("reimbursement");
|
|
const [name, setName] = useState("");
|
|
const [entityIds, setEntityIds] = useState("");
|
|
const [defaultPaymentDate, setDefaultPaymentDate] = useState("");
|
|
const [defaultPaymentChannel, setDefaultPaymentChannel] = useState<PaymentChannel | "">("");
|
|
const [voucherPrefix, setVoucherPrefix] = useState("");
|
|
const receiptInputRef = useRef<HTMLInputElement | null>(null);
|
|
const [selectedReceiptFiles, setSelectedReceiptFiles] = useState<File[]>([]);
|
|
const [error, setError] = useState("");
|
|
const [confirmPaymentAction, setConfirmPaymentAction] = useState<{
|
|
kind: "financeReview" | "financePayment" | "cancel";
|
|
batchId: string;
|
|
batchNo: string;
|
|
} | null>(null);
|
|
|
|
const listQuery = useQuery({
|
|
queryKey: ["payment-batches"],
|
|
queryFn: () => fetchPaymentBatches(),
|
|
});
|
|
|
|
const selectedBatchId = searchParams.get("id") ?? "";
|
|
const selectedBatch = useMemo<PaymentBatch | null>(() => {
|
|
const items = listQuery.data?.items ?? [];
|
|
return items.find((item) => item.id === selectedBatchId) ?? items[0] ?? null;
|
|
}, [listQuery.data?.items, selectedBatchId]);
|
|
|
|
const receiptAttachmentsQuery = useQuery({
|
|
queryKey: ["payment-batch-receipts", selectedBatch?.id],
|
|
enabled: Boolean(selectedBatch?.id),
|
|
queryFn: () => fetchPaymentBatchReceiptAttachments(selectedBatch!.id),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!selectedBatch) {
|
|
return;
|
|
}
|
|
if (selectedBatch.id === selectedBatchId) {
|
|
return;
|
|
}
|
|
const next = new URLSearchParams(searchParams);
|
|
next.set("id", selectedBatch.id);
|
|
setSearchParams(next, { replace: true });
|
|
}, [searchParams, selectedBatch, selectedBatchId, setSearchParams]);
|
|
|
|
const canEditSelectedBatch =
|
|
canManageBatch &&
|
|
!!selectedBatch &&
|
|
["draft", "reviewed", "failed"].includes(selectedBatch.status);
|
|
const canEditReceiptAttachments =
|
|
canManageBatch &&
|
|
!!selectedBatch &&
|
|
!["executed", "cancelled"].includes(selectedBatch.status);
|
|
const canReviewSelectedBatch =
|
|
canReviewBatch &&
|
|
!!selectedBatch &&
|
|
(
|
|
(selectedBatch.status === "draft" && selectedBatch.reviewRequirement.nextStep === "first_review") ||
|
|
(selectedBatch.status === "reviewed" && selectedBatch.reviewRequirement.nextStep === "second_review")
|
|
);
|
|
const canExecuteSelectedBatch =
|
|
canManageBatch &&
|
|
!!selectedBatch &&
|
|
["reviewed", "failed"].includes(selectedBatch.status) &&
|
|
selectedBatch.reviewRequirement.nextStep === "ready_for_execute";
|
|
const canCancelSelectedBatch =
|
|
canManageBatch &&
|
|
!!selectedBatch &&
|
|
!["executed", "cancelled"].includes(selectedBatch.status);
|
|
|
|
const refresh = async () => {
|
|
await queryClient.invalidateQueries({ queryKey: ["payment-batches"] });
|
|
await queryClient.invalidateQueries({ queryKey: ["payment-batch-receipts"] });
|
|
await queryClient.invalidateQueries({ queryKey: ["ap-operations"] });
|
|
};
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: async () =>
|
|
createPaymentBatch({
|
|
entityType,
|
|
name: name.trim() || `${entityType}-batch`,
|
|
entityIds: entityIds.split(/[\s,]+/).map((item) => item.trim()).filter(Boolean),
|
|
defaultPaymentDate: defaultPaymentDate || undefined,
|
|
defaultPaymentChannel: defaultPaymentChannel || undefined,
|
|
voucherPrefix: voucherPrefix || undefined,
|
|
}),
|
|
onSuccess: async ({ item }) => {
|
|
setError("");
|
|
const next = new URLSearchParams(searchParams);
|
|
next.set("id", item.id);
|
|
setSearchParams(next, { replace: true });
|
|
await refresh();
|
|
toast.success("付款批次已创建");
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const reviewMutation = useMutation({
|
|
mutationFn: async (batchId: string) => {
|
|
const batch = listQuery.data?.items.find((item) => item.id === batchId);
|
|
const resolveRiskFlagIds = (batch?.items ?? []).flatMap((item) => item.openRiskFlags.map((flag) => flag.id));
|
|
return reviewPaymentBatch(batchId, { resolveRiskFlagIds });
|
|
},
|
|
onSuccess: async ({ item }) => {
|
|
setError("");
|
|
await refresh();
|
|
toast.success(item.reviewRequirement.nextStep === "ready_for_execute" ? "付款批次复核完成" : "付款批次已完成首轮复核");
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const executeMutation = useMutation({
|
|
mutationFn: executePaymentBatch,
|
|
onSuccess: async () => {
|
|
setError("");
|
|
await refresh();
|
|
toast.success("付款批次已执行");
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const cancelMutation = useMutation({
|
|
mutationFn: cancelPaymentBatch,
|
|
onSuccess: async () => {
|
|
setError("");
|
|
await refresh();
|
|
toast.success("付款批次已取消");
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const updateItemMutation = useMutation({
|
|
mutationFn: async (payload: { batchId: string; itemId: string; paymentVoucherNoOverride?: string | null; paymentDateOverride?: string | null; paymentChannelOverride?: PaymentChannel | null }) =>
|
|
updatePaymentBatchItem(payload.batchId, payload.itemId, {
|
|
paymentVoucherNoOverride: payload.paymentVoucherNoOverride,
|
|
paymentDateOverride: payload.paymentDateOverride,
|
|
paymentChannelOverride: payload.paymentChannelOverride,
|
|
}),
|
|
onSuccess: async () => {
|
|
setError("");
|
|
await refresh();
|
|
toast.success("批次项已更新");
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const uploadReceiptMutation = useMutation({
|
|
mutationFn: async () => {
|
|
if (!selectedBatch) {
|
|
throw new Error("请先选择付款批次");
|
|
}
|
|
if (!selectedReceiptFiles.length) {
|
|
throw new Error("请选择银行回单附件");
|
|
}
|
|
return uploadPaymentBatchReceiptAttachments(selectedBatch.id, selectedReceiptFiles);
|
|
},
|
|
onSuccess: async () => {
|
|
setError("");
|
|
setSelectedReceiptFiles([]);
|
|
if (receiptInputRef.current) {
|
|
receiptInputRef.current.value = "";
|
|
}
|
|
await refresh();
|
|
toast.success("银行回单附件已上传");
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const downloadReceiptMutation = useMutation({
|
|
mutationFn: async (attachment: PaymentBatchReceiptAttachment) => {
|
|
if (!selectedBatch) {
|
|
throw new Error("请先选择付款批次");
|
|
}
|
|
const response = await downloadPaymentBatchReceiptAttachment(selectedBatch.id, attachment.id);
|
|
return { response, attachment };
|
|
},
|
|
onSuccess: ({ response, attachment }) => {
|
|
downloadBlob(response.blob, response.filename ?? attachment.originalName);
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const deleteReceiptMutation = useMutation({
|
|
mutationFn: async (attachmentId: string) => {
|
|
if (!selectedBatch) {
|
|
throw new Error("请先选择付款批次");
|
|
}
|
|
return deletePaymentBatchReceiptAttachment(selectedBatch.id, attachmentId);
|
|
},
|
|
onSuccess: async () => {
|
|
setError("");
|
|
await refresh();
|
|
toast.success("银行回单附件已删除");
|
|
},
|
|
onError: (err) => {
|
|
const message = resolveError(err);
|
|
setError(message);
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
return (
|
|
<ListWorkspace>
|
|
<WorkspaceHeader title="付款批次" subtitle="线下银行付款后的 OA 复核、回单留存和已付款标记；高风险批次达到 5 万元后需完成二次复核。" />
|
|
|
|
{error ? <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</div> : null}
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[360px,1fr]">
|
|
<div className="card-std space-y-4 p-4 md:p-5">
|
|
<h3 className="text-base font-semibold text-zinc-900">新建批次</h3>
|
|
{!canManageBatch ? (
|
|
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">
|
|
当前账号仅可查看批次并执行复核，创建与编辑入口仅对付款批次管理员开放。
|
|
</div>
|
|
) : null}
|
|
<div className="space-y-2">
|
|
<Label>实体类型</Label>
|
|
<select
|
|
className="select-std"
|
|
value={entityType}
|
|
disabled={!canManageBatch}
|
|
onChange={(event) => setEntityType(event.target.value as PaymentBatchEntityType)}
|
|
>
|
|
<option value="reimbursement">报销付款</option>
|
|
<option value="travel_order">差旅订单付款</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>批次名称</Label>
|
|
<Input
|
|
value={name}
|
|
disabled={!canManageBatch}
|
|
onChange={(event) => setName(event.target.value)}
|
|
placeholder="例如：2026Q2-财务付款批次-01"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>待付款单据 ID</Label>
|
|
<textarea
|
|
className="min-h-28 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm disabled:bg-zinc-50"
|
|
value={entityIds}
|
|
disabled={!canManageBatch}
|
|
onChange={(event) => setEntityIds(event.target.value)}
|
|
placeholder="输入报销或差旅待付款单据 ID，多个用逗号或换行分隔"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>默认付款日期</Label>
|
|
<DateTextInput
|
|
value={defaultPaymentDate}
|
|
disabled={!canManageBatch}
|
|
onChange={(event) => setDefaultPaymentDate(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>默认渠道</Label>
|
|
<select
|
|
className="select-std"
|
|
value={defaultPaymentChannel}
|
|
disabled={!canManageBatch}
|
|
onChange={(event) => setDefaultPaymentChannel((event.target.value as PaymentChannel | "") || "") }
|
|
>
|
|
<option value="">不设置</option>
|
|
{PAYMENT_CHANNEL_OPTIONS.map((item) => <option key={item} value={item}>{paymentChannelLabel(item)}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>凭证前缀</Label>
|
|
<Input
|
|
value={voucherPrefix}
|
|
disabled={!canManageBatch}
|
|
onChange={(event) => setVoucherPrefix(event.target.value)}
|
|
placeholder="例如 PBX"
|
|
/>
|
|
</div>
|
|
<Button type="button" disabled={createMutation.isPending || !canManageBatch} onClick={() => createMutation.mutate()}>
|
|
{createMutation.isPending ? "创建中..." : "创建批次"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="card-std p-4 md:p-5">
|
|
<h3 className="mb-3 text-base font-semibold text-zinc-900">批次列表</h3>
|
|
<div className="space-y-2">
|
|
{(listQuery.data?.items ?? []).map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
className={selectedBatch?.id === item.id ? "w-full rounded-lg border border-primary bg-primary/5 px-3 py-3 text-left" : "w-full rounded-lg border border-zinc-200 px-3 py-3 text-left hover:bg-zinc-50"}
|
|
onClick={() => {
|
|
const next = new URLSearchParams(searchParams);
|
|
next.set("id", item.id);
|
|
setSearchParams(next, { replace: true });
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="font-medium text-zinc-900">{item.batchNo}</div>
|
|
<StatusBadge status={item.status} label={batchStatusLabel(item.status)} />
|
|
</div>
|
|
<div className="mt-1 text-sm text-zinc-600">{item.name}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">
|
|
金额 {item.totalAmount}
|
|
{item.highRisk ? " · 高风险" : ""}
|
|
{` · 复核 ${item.reviewRequirement.completedReviewCount}/${item.reviewRequirement.requiredReviewCount}`}
|
|
</div>
|
|
</button>
|
|
))}
|
|
{!listQuery.data?.items?.length ? <div className="text-sm text-zinc-500">暂无付款批次</div> : null}
|
|
</div>
|
|
</div>
|
|
|
|
{selectedBatch ? (
|
|
<div className="space-y-6">
|
|
<div className="card-std space-y-3 p-4 md:p-5">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<div className="text-xs text-zinc-500">{selectedBatch.batchNo}</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="text-lg font-semibold text-zinc-900">{selectedBatch.name}</div>
|
|
{selectedBatch.highRisk ? (
|
|
<span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">高风险</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{canReviewBatch ? (
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={reviewMutation.isPending || !canReviewSelectedBatch}
|
|
onClick={() => setConfirmPaymentAction({
|
|
kind: "financeReview",
|
|
batchId: selectedBatch.id,
|
|
batchNo: selectedBatch.batchNo,
|
|
})}
|
|
>
|
|
{selectedBatch.reviewRequirement.nextStep === "second_review" ? "二次复核" : "复核"}
|
|
</Button>
|
|
) : null}
|
|
{canManageBatch ? (
|
|
<Button
|
|
type="button"
|
|
disabled={executeMutation.isPending || !canExecuteSelectedBatch}
|
|
onClick={() => setConfirmPaymentAction({
|
|
kind: "financePayment",
|
|
batchId: selectedBatch.id,
|
|
batchNo: selectedBatch.batchNo,
|
|
})}
|
|
>
|
|
执行
|
|
</Button>
|
|
) : null}
|
|
{canManageBatch ? (
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={cancelMutation.isPending || !canCancelSelectedBatch}
|
|
onClick={() => setConfirmPaymentAction({
|
|
kind: "cancel",
|
|
batchId: selectedBatch.id,
|
|
batchNo: selectedBatch.batchNo,
|
|
})}
|
|
>
|
|
取消
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-3 text-sm md:grid-cols-3 xl:grid-cols-6">
|
|
<div>状态：{batchStatusLabel(selectedBatch.status)}</div>
|
|
<div>实体：{entityTypeLabel(selectedBatch.entityType)}</div>
|
|
<div>总金额：{selectedBatch.totalAmount}</div>
|
|
<div>默认日期：{formatDisplayDate(selectedBatch.defaultPaymentDate)}</div>
|
|
<div>默认渠道：{paymentChannelLabel(selectedBatch.defaultPaymentChannel)}</div>
|
|
<div>复核进度：{selectedBatch.reviewRequirement.completedReviewCount}/{selectedBatch.reviewRequirement.requiredReviewCount}</div>
|
|
</div>
|
|
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3 text-sm text-zinc-600">
|
|
当前要求：{selectedBatch.reviewRequirement.requiredReviewCount === 2 ? `批次金额达到 ${selectedBatch.reviewRequirement.thresholdAmount}，需两轮复核` : "单轮复核后可执行"}。
|
|
下一步：{reviewNextStepLabel(selectedBatch.reviewRequirement.nextStep)}。
|
|
{selectedBatch.reviewedBy ? ` 首轮复核人：${reviewerDisplayName(selectedBatch.reviewedBy)}` : ""}
|
|
{selectedBatch.secondaryReviewedBy ? ` 二次复核人：${reviewerDisplayName(selectedBatch.secondaryReviewedBy)}` : ""}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-std space-y-4 p-4 md:p-5">
|
|
<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">先在网银完成对公付款，再上传银行回单并执行 OA 已付款标记。</p>
|
|
</div>
|
|
{canManageBatch ? (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<input
|
|
ref={receiptInputRef}
|
|
type="file"
|
|
className="hidden"
|
|
accept=".pdf,image/jpeg,image/png,image/webp"
|
|
multiple
|
|
disabled={!canEditReceiptAttachments || uploadReceiptMutation.isPending}
|
|
onChange={(event) => setSelectedReceiptFiles(Array.from(event.target.files ?? []))}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={!canEditReceiptAttachments || uploadReceiptMutation.isPending}
|
|
onClick={() => receiptInputRef.current?.click()}
|
|
>
|
|
选择回单
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
disabled={!canEditReceiptAttachments || uploadReceiptMutation.isPending || selectedReceiptFiles.length === 0}
|
|
onClick={() => uploadReceiptMutation.mutate()}
|
|
>
|
|
{uploadReceiptMutation.isPending ? "上传中..." : "上传"}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{selectedReceiptFiles.length ? (
|
|
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">
|
|
待上传：{selectedReceiptFiles.map((file) => file.name).join("、")}
|
|
</div>
|
|
) : null}
|
|
{receiptAttachmentsQuery.isError ? (
|
|
<div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{resolveError(receiptAttachmentsQuery.error)}
|
|
</div>
|
|
) : null}
|
|
<div className="space-y-2">
|
|
{(receiptAttachmentsQuery.data?.items ?? []).map((attachment) => (
|
|
<div key={attachment.id} className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-zinc-200 px-3 py-3">
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-medium text-zinc-900">{attachment.originalName}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">
|
|
{attachment.mimeType} · {formatFileSize(attachment.fileSize)} · {formatDisplayDateTime(attachment.createdAt)}
|
|
{attachment.uploadedBy ? ` · ${attachment.uploadedBy.name}` : ""}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="secondary"
|
|
disabled={downloadReceiptMutation.isPending}
|
|
onClick={() => downloadReceiptMutation.mutate(attachment)}
|
|
>
|
|
下载
|
|
</Button>
|
|
{canManageBatch ? (
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="secondary"
|
|
disabled={!canEditReceiptAttachments || deleteReceiptMutation.isPending}
|
|
onClick={() => deleteReceiptMutation.mutate(attachment.id)}
|
|
>
|
|
删除
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!receiptAttachmentsQuery.isLoading && !(receiptAttachmentsQuery.data?.items ?? []).length ? (
|
|
<div className="rounded-lg border border-zinc-200 px-3 py-3 text-sm text-zinc-500">
|
|
暂无银行回单附件；默认银行渠道执行前需要上传至少一份回单。
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-std space-y-4 p-4 md:p-5">
|
|
<h3 className="text-base font-semibold text-zinc-900">批次项</h3>
|
|
<div className="space-y-4">
|
|
{selectedBatch.items.map((item) => (
|
|
<div key={item.id} className="rounded-lg border border-zinc-200 p-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<div className="font-medium text-zinc-900">{item.entityCode}</div>
|
|
<div className="text-sm text-zinc-600">{item.entityTitle}</div>
|
|
</div>
|
|
<div className="text-sm text-zinc-600">{item.amount} {item.currencyCode} · {paymentItemStatusLabel(item.status)}</div>
|
|
</div>
|
|
<div className="mt-3 grid gap-3 md:grid-cols-4">
|
|
<Input
|
|
defaultValue={item.paymentVoucherNoOverride ?? ""}
|
|
placeholder="凭证号"
|
|
disabled={!canEditSelectedBatch || !["pending", "failed"].includes(item.status)}
|
|
onBlur={(event) => updateItemMutation.mutate({ batchId: selectedBatch.id, itemId: item.id, paymentVoucherNoOverride: event.target.value || null })}
|
|
/>
|
|
<DateTextInput
|
|
defaultValue={item.paymentDateOverride ?? ""}
|
|
disabled={!canEditSelectedBatch || !["pending", "failed"].includes(item.status)}
|
|
onBlur={(event) => updateItemMutation.mutate({ batchId: selectedBatch.id, itemId: item.id, paymentDateOverride: event.target.value || null })}
|
|
/>
|
|
<select
|
|
className="select-std"
|
|
defaultValue={item.paymentChannelOverride ?? ""}
|
|
disabled={!canEditSelectedBatch || !["pending", "failed"].includes(item.status)}
|
|
onChange={(event) => updateItemMutation.mutate({ batchId: selectedBatch.id, itemId: item.id, paymentChannelOverride: (event.target.value as PaymentChannel | "") || null })}
|
|
>
|
|
<option value="">默认渠道</option>
|
|
{PAYMENT_CHANNEL_OPTIONS.map((option) => <option key={option} value={option}>{paymentChannelLabel(option)}</option>)}
|
|
</select>
|
|
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">
|
|
{item.failureMessage ? `失败原因：${item.failureMessage}` : "付款异常：无"}
|
|
</div>
|
|
</div>
|
|
<RiskFlagsCard items={item.openRiskFlags} title="关联开放风险" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<ActionConfirmDialog
|
|
open={Boolean(confirmPaymentAction)}
|
|
onOpenChange={(open) => {
|
|
if (!open) setConfirmPaymentAction(null);
|
|
}}
|
|
kind={confirmPaymentAction?.kind ?? "financePayment"}
|
|
targetName={confirmPaymentAction?.batchNo}
|
|
description={
|
|
confirmPaymentAction?.kind === "financeReview"
|
|
? "确认后将写入付款批次复核记录；高风险批次仍需满足双人复核要求。"
|
|
: confirmPaymentAction?.kind === "cancel"
|
|
? "取消后该付款批次不能继续执行，历史记录会保留。"
|
|
: "确认后将执行付款批次并影响付款状态，请确认批次、金额和复核要求均已核对。"
|
|
}
|
|
onConfirm={async () => {
|
|
if (!confirmPaymentAction) return;
|
|
if (confirmPaymentAction.kind === "financeReview") reviewMutation.mutate(confirmPaymentAction.batchId);
|
|
if (confirmPaymentAction.kind === "financePayment") executeMutation.mutate(confirmPaymentAction.batchId);
|
|
if (confirmPaymentAction.kind === "cancel") cancelMutation.mutate(confirmPaymentAction.batchId);
|
|
}}
|
|
/>
|
|
</ListWorkspace>
|
|
);
|
|
}
|