R53 A1-A6：ERP 集成运维可视化与业务同步状态接入
- ErpIntegrationPage Tab 化：主数据同步 / Outbox 队列管理 / ID 映射查看器 - Outbox 分页查询、详情、重试与统计端点 - IntegrationBinding 分页查询、routePath 推导与采购/资产深链 - 报销/采购/资产详情区接入 ERP 同步状态卡片 - 单测覆盖 Outbox 与 Binding 端点
这个提交包含在：
@@ -1,16 +1,37 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
fetchErpMasterDataStatus,
|
||||
fetchIntegrationBindings,
|
||||
fetchIntegrationOutbox,
|
||||
fetchIntegrationOutboxDetail,
|
||||
fetchIntegrationOutboxStats,
|
||||
retryIntegrationOutbox,
|
||||
syncErpMasterData,
|
||||
type ErpMasterDataResourceType,
|
||||
type ErpMasterDataSyncItem,
|
||||
type IntegrationBindingItem,
|
||||
type IntegrationOutboxItem,
|
||||
type IntegrationOutboxStatus,
|
||||
} from "../api/integrations";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
import { isApiError } from "../api/types";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { Pagination } from "../components/common/Pagination";
|
||||
import { TableSkeleton } from "../components/common/TableSkeleton";
|
||||
import { Button } from "../components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "../components/ui/dialog";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
|
||||
|
||||
const RESOURCE_LABELS: Record<ErpMasterDataResourceType, string> = {
|
||||
legal_entity: "法体",
|
||||
@@ -18,6 +39,29 @@ const RESOURCE_LABELS: Record<ErpMasterDataResourceType, string> = {
|
||||
supplier: "供应商",
|
||||
};
|
||||
|
||||
const OUTBOX_STATUS_OPTIONS: Array<{ value: IntegrationOutboxStatus | ""; label: string }> = [
|
||||
{ value: "", label: "全部状态" },
|
||||
{ value: "pending", label: "待处理" },
|
||||
{ value: "processing", label: "处理中" },
|
||||
{ value: "succeeded", label: "已成功" },
|
||||
{ value: "failed", label: "失败" },
|
||||
{ value: "dead_letter", label: "死信" },
|
||||
];
|
||||
|
||||
const BINDING_ENTITY_OPTIONS: Array<{ value: string; label: string }> = [
|
||||
{ value: "", label: "全部类型" },
|
||||
{ value: "reimbursement_journal", label: "报销凭证" },
|
||||
{ value: "purchase_request_commitment_journal", label: "采购 Commitment" },
|
||||
{ value: "purchase_order_accrual_journal", label: "采购 Accrual" },
|
||||
{ value: "purchase_order_po", label: "采购 PO 映射" },
|
||||
{ value: "purchase_order_contract", label: "采购合同映射" },
|
||||
{ value: "asset_erp_card", label: "资产台账摘要" },
|
||||
{ value: "travel_payable_summary", label: "差旅应付摘要" },
|
||||
{ value: "travel_settlement_batch", label: "差旅结算批次" },
|
||||
];
|
||||
|
||||
type ErpTab = "master-data" | "outbox" | "bindings";
|
||||
|
||||
function resolveError(error: unknown) {
|
||||
if (isApiError(error)) {
|
||||
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
||||
@@ -33,6 +77,27 @@ function formatDateTime(value: string | null) {
|
||||
return value.slice(0, 19).replace("T", " ");
|
||||
}
|
||||
|
||||
function formatRelativeTime(value: string | null) {
|
||||
if (!value) return "-";
|
||||
const target = new Date(value).getTime();
|
||||
if (!Number.isFinite(target)) return "-";
|
||||
const diffSeconds = Math.round((target - Date.now()) / 1000);
|
||||
const abs = Math.abs(diffSeconds);
|
||||
if (abs < 60) {
|
||||
return diffSeconds >= 0 ? `${abs} 秒后` : `${abs} 秒前`;
|
||||
}
|
||||
const diffMinutes = Math.round(diffSeconds / 60);
|
||||
if (Math.abs(diffMinutes) < 60) {
|
||||
return diffMinutes >= 0 ? `${diffMinutes} 分钟后` : `${Math.abs(diffMinutes)} 分钟前`;
|
||||
}
|
||||
const diffHours = Math.round(diffMinutes / 60);
|
||||
if (Math.abs(diffHours) < 24) {
|
||||
return diffHours >= 0 ? `${diffHours} 小时后` : `${Math.abs(diffHours)} 小时前`;
|
||||
}
|
||||
const diffDays = Math.round(diffHours / 24);
|
||||
return diffDays >= 0 ? `${diffDays} 天后` : `${Math.abs(diffDays)} 天前`;
|
||||
}
|
||||
|
||||
function formatGateReason(reason: string) {
|
||||
if (reason === "env_hard_off") return "Env 总闸关闭";
|
||||
if (reason === "flag_force_off") return "功能开关强制关闭";
|
||||
@@ -42,15 +107,112 @@ function formatGateReason(reason: string) {
|
||||
return reason;
|
||||
}
|
||||
|
||||
function outboxStatusLabel(status: string) {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "待处理";
|
||||
case "processing":
|
||||
return "处理中";
|
||||
case "succeeded":
|
||||
return "已成功";
|
||||
case "failed":
|
||||
return "失败";
|
||||
case "dead_letter":
|
||||
return "死信";
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
}
|
||||
|
||||
function outboxStatusClassName(status: string) {
|
||||
if (status === "failed" || status === "dead_letter") {
|
||||
return "border-red-200 bg-red-50 text-red-700";
|
||||
}
|
||||
if (status === "succeeded") {
|
||||
return "border-emerald-200 bg-emerald-50 text-emerald-700";
|
||||
}
|
||||
if (status === "processing") {
|
||||
return "border-amber-200 bg-amber-50 text-amber-700";
|
||||
}
|
||||
return "border-zinc-200 bg-zinc-50 text-zinc-700";
|
||||
}
|
||||
|
||||
function renderOutboxSummary(item: IntegrationOutboxItem) {
|
||||
const summary = item.payloadSummary;
|
||||
return summary.identityCode ?? summary.entityId ?? "-";
|
||||
}
|
||||
|
||||
function bindingEntityLabel(value: string) {
|
||||
return BINDING_ENTITY_OPTIONS.find((item) => item.value === value)?.label ?? value;
|
||||
}
|
||||
|
||||
function BindingLocalIdCell({ item }: { item: IntegrationBindingItem }) {
|
||||
if (!item.routePath) {
|
||||
return <span className="break-all text-zinc-600">{item.localId}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link className="break-all text-primary hover:underline" to={item.routePath}>
|
||||
{item.localId}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function ErpIntegrationPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [tab, setTab] = useState<ErpTab>("master-data");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [outboxPage, setOutboxPage] = useState(1);
|
||||
const [outboxStatus, setOutboxStatus] = useState<IntegrationOutboxStatus | "">("");
|
||||
const [outboxEventType, setOutboxEventType] = useState("");
|
||||
const [selectedOutboxId, setSelectedOutboxId] = useState("");
|
||||
|
||||
const [bindingsPage, setBindingsPage] = useState(1);
|
||||
const [bindingProvider, setBindingProvider] = useState("");
|
||||
const [bindingEntityType, setBindingEntityType] = useState("");
|
||||
|
||||
const statusQuery = useQuery({
|
||||
queryKey: ["erp-master-data-status"],
|
||||
queryFn: () => fetchErpMasterDataStatus(),
|
||||
});
|
||||
|
||||
const outboxStatsQuery = useQuery({
|
||||
enabled: tab === "outbox",
|
||||
queryKey: ["integration-outbox-stats"],
|
||||
queryFn: () => fetchIntegrationOutboxStats(),
|
||||
});
|
||||
|
||||
const outboxQuery = useQuery({
|
||||
enabled: tab === "outbox",
|
||||
queryKey: ["integration-outbox", outboxPage, outboxStatus, outboxEventType],
|
||||
queryFn: () =>
|
||||
fetchIntegrationOutbox({
|
||||
page: outboxPage,
|
||||
pageSize: 20,
|
||||
status: outboxStatus || undefined,
|
||||
eventType: outboxEventType.trim() || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
const outboxDetailQuery = useQuery({
|
||||
enabled: Boolean(selectedOutboxId),
|
||||
queryKey: ["integration-outbox-detail", selectedOutboxId],
|
||||
queryFn: () => fetchIntegrationOutboxDetail(selectedOutboxId),
|
||||
});
|
||||
|
||||
const bindingsQuery = useQuery({
|
||||
enabled: tab === "bindings",
|
||||
queryKey: ["integration-bindings", bindingsPage, bindingProvider, bindingEntityType],
|
||||
queryFn: () =>
|
||||
fetchIntegrationBindings({
|
||||
page: bindingsPage,
|
||||
pageSize: 20,
|
||||
provider: bindingProvider || undefined,
|
||||
entityType: bindingEntityType || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
const syncMutation = useMutation({
|
||||
mutationFn: async (resources?: ErpMasterDataResourceType[]) => syncErpMasterData({ resources }),
|
||||
onSuccess: async (result) => {
|
||||
@@ -68,6 +230,22 @@ export function ErpIntegrationPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const retryMutation = useMutation({
|
||||
mutationFn: retryIntegrationOutbox,
|
||||
onSuccess: async () => {
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["integration-outbox"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["integration-outbox-stats"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["integration-outbox-detail"] }),
|
||||
]);
|
||||
toast.success("Outbox 事件已重置为待处理");
|
||||
},
|
||||
onError: (mutationError) => {
|
||||
const message = resolveError(mutationError);
|
||||
toast.error(message);
|
||||
},
|
||||
});
|
||||
|
||||
const itemsByType = useMemo(() => {
|
||||
const map = new Map<ErpMasterDataResourceType, ErpMasterDataSyncItem>();
|
||||
for (const item of statusQuery.data?.items ?? []) {
|
||||
@@ -77,16 +255,20 @@ export function ErpIntegrationPage() {
|
||||
}, [statusQuery.data?.items]);
|
||||
|
||||
const gate = statusQuery.data?.gate ?? null;
|
||||
const outboxTotalPages = Math.max(1, Math.ceil((outboxQuery.data?.total ?? 0) / 20));
|
||||
const bindingsTotalPages = Math.max(1, Math.ceil((bindingsQuery.data?.total ?? 0) / 20));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="ERP 集成"
|
||||
subtitle="管理 ERP 主数据同步状态。报销付款凭证导出入口保留在报销详情页，不在本页直接手输单号导出。"
|
||||
subtitle="管理主数据同步、Outbox 队列和本地与 ERP 的 ID 映射。报销、采购和资产的具体同步动作仍保留在业务详情区。"
|
||||
actions={
|
||||
<Button onClick={() => syncMutation.mutate(undefined)} disabled={syncMutation.isPending}>
|
||||
{syncMutation.isPending ? "同步中..." : "同步全部"}
|
||||
</Button>
|
||||
tab === "master-data" ? (
|
||||
<Button onClick={() => syncMutation.mutate(undefined)} disabled={syncMutation.isPending}>
|
||||
{syncMutation.isPending ? "同步中..." : "同步全部"}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -94,98 +276,407 @@ export function ErpIntegrationPage() {
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-4">
|
||||
<div className="card-std p-5 space-y-2 lg:col-span-4">
|
||||
<h3 className="text-base font-semibold text-zinc-900">ERP 状态</h3>
|
||||
{statusQuery.isLoading ? <p className="text-sm text-zinc-500">加载中...</p> : null}
|
||||
{statusQuery.isError ? (
|
||||
<p className="text-sm text-red-600">{resolveError(statusQuery.error)}</p>
|
||||
) : null}
|
||||
{gate ? (
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4 text-sm text-zinc-700">
|
||||
<div>
|
||||
<div className="text-zinc-500">Env 总闸</div>
|
||||
<div className="font-medium">{gate.envEnabled ? "已开启" : "已关闭"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-zinc-500">功能开关</div>
|
||||
<div className="font-medium">{gate.effectiveEnabled ? "允许" : "阻断"}</div>
|
||||
<div className="text-xs text-zinc-500">{formatGateReason(gate.effectiveReason)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-zinc-500">Provider / 主数据端点</div>
|
||||
<div className="font-medium">{gate.provider}</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
{gate.masterDataEndpointConfigured ? "主数据端点已配置" : "主数据端点未配置"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-zinc-500">凭证端点 / Cron</div>
|
||||
<div className="font-medium">
|
||||
{gate.journalEndpointConfigured ? "凭证端点已配置" : "凭证端点未配置"}
|
||||
</div>
|
||||
<div className="text-xs text-zinc-500">{gate.masterDataSyncCron || "未启用自动同步"}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Tabs value={tab} onValueChange={(value) => setTab(value as ErpTab)}>
|
||||
<TabsList className="flex w-full justify-start gap-1">
|
||||
<TabsTrigger value="master-data">主数据同步</TabsTrigger>
|
||||
<TabsTrigger value="outbox">Outbox 队列</TabsTrigger>
|
||||
<TabsTrigger value="bindings">ID 映射</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{(["legal_entity", "cost_center", "supplier"] as const).map((resourceType) => {
|
||||
const item = itemsByType.get(resourceType) ?? null;
|
||||
return (
|
||||
<div key={resourceType} className="card-std p-5 space-y-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-900">{RESOURCE_LABELS[resourceType]}</h3>
|
||||
<p className="text-sm text-zinc-500">状态：{item?.status ?? "idle"}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => syncMutation.mutate([resourceType])}
|
||||
disabled={syncMutation.isPending}
|
||||
>
|
||||
仅同步{RESOURCE_LABELS[resourceType]}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-sm text-zinc-700">
|
||||
<div>最近开始：{formatDateTime(item?.lastStartedAt ?? null)}</div>
|
||||
<div>最近完成：{formatDateTime(item?.lastFinishedAt ?? null)}</div>
|
||||
<div>最近成功：{formatDateTime(item?.lastSuccessAt ?? null)}</div>
|
||||
<div className="break-all">最近错误：{item?.lastError ?? "-"}</div>
|
||||
</div>
|
||||
|
||||
{item?.lastResult ? (
|
||||
<div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3 text-sm text-zinc-700 space-y-1">
|
||||
<TabsContent value="master-data" className="space-y-6">
|
||||
<div className="grid gap-4 lg:grid-cols-4">
|
||||
<div className="card-std p-5 space-y-2 lg:col-span-4">
|
||||
<h3 className="text-base font-semibold text-zinc-900">ERP 状态</h3>
|
||||
{statusQuery.isLoading ? <p className="text-sm text-zinc-500">加载中...</p> : null}
|
||||
{statusQuery.isError ? (
|
||||
<p className="text-sm text-red-600">{resolveError(statusQuery.error)}</p>
|
||||
) : null}
|
||||
{gate ? (
|
||||
<div className="grid gap-3 text-sm text-zinc-700 md:grid-cols-2 xl:grid-cols-4">
|
||||
<div>
|
||||
请求 {item.lastResult.requested} / 新增 {item.lastResult.created} / 更新 {item.lastResult.updated}
|
||||
<div className="text-zinc-500">Env 总闸</div>
|
||||
<div className="font-medium">{gate.envEnabled ? "已开启" : "已关闭"}</div>
|
||||
</div>
|
||||
<div>
|
||||
归档 {item.lastResult.archived} / 跳过 {item.lastResult.skipped}
|
||||
<div className="text-zinc-500">功能开关</div>
|
||||
<div className="font-medium">{gate.effectiveEnabled ? "允许" : "阻断"}</div>
|
||||
<div className="text-xs text-zinc-500">{formatGateReason(gate.effectiveReason)}</div>
|
||||
</div>
|
||||
{item.lastResult.sampleSkipped.length ? (
|
||||
<div className="text-xs text-zinc-500 break-all">
|
||||
示例跳过：
|
||||
{item.lastResult.sampleSkipped
|
||||
.map((sample) => `${sample.key}:${sample.reason}`)
|
||||
.join("；")}
|
||||
<div>
|
||||
<div className="text-zinc-500">Provider / 主数据端点</div>
|
||||
<div className="font-medium">{gate.provider}</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
{gate.masterDataEndpointConfigured ? "主数据端点已配置" : "主数据端点未配置"}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-zinc-500">凭证端点 / Cron</div>
|
||||
<div className="font-medium">
|
||||
{gate.journalEndpointConfigured ? "凭证端点已配置" : "凭证端点未配置"}
|
||||
</div>
|
||||
<div className="text-xs text-zinc-500">{gate.masterDataSyncCron || "未启用自动同步"}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-zinc-500">暂无同步记录。</p>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="card-std p-5 space-y-2 text-sm text-zinc-600">
|
||||
<h3 className="text-base font-semibold text-zinc-900">说明</h3>
|
||||
<p>- 本页只负责 ERP 主数据同步，不承担报销凭证的手工单号输入导出。</p>
|
||||
<p>- 报销付款凭证导出请前往已付款报销详情页执行，系统会按标准凭证切片通过 Outbox 异步发送。</p>
|
||||
<p>- 当前阶段不包含采购、资产、盘点的真实 ERP 过账。</p>
|
||||
</div>
|
||||
{(["legal_entity", "cost_center", "supplier"] as const).map((resourceType) => {
|
||||
const item = itemsByType.get(resourceType) ?? null;
|
||||
return (
|
||||
<div key={resourceType} className="card-std space-y-3 p-5">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-900">{RESOURCE_LABELS[resourceType]}</h3>
|
||||
<p className="text-sm text-zinc-500">状态：{item?.status ?? "idle"}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => syncMutation.mutate([resourceType])}
|
||||
disabled={syncMutation.isPending}
|
||||
>
|
||||
仅同步{RESOURCE_LABELS[resourceType]}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-sm text-zinc-700">
|
||||
<div>最近开始：{formatDateTime(item?.lastStartedAt ?? null)}</div>
|
||||
<div>最近完成：{formatDateTime(item?.lastFinishedAt ?? null)}</div>
|
||||
<div>最近成功：{formatDateTime(item?.lastSuccessAt ?? null)}</div>
|
||||
<div className="break-all">最近错误：{item?.lastError ?? "-"}</div>
|
||||
</div>
|
||||
|
||||
{item?.lastResult ? (
|
||||
<div className="space-y-1 rounded-lg border border-zinc-200 bg-zinc-50 p-3 text-sm text-zinc-700">
|
||||
<div>
|
||||
请求 {item.lastResult.requested} / 新增 {item.lastResult.created} / 更新 {item.lastResult.updated}
|
||||
</div>
|
||||
<div>
|
||||
归档 {item.lastResult.archived} / 跳过 {item.lastResult.skipped}
|
||||
</div>
|
||||
{item.lastResult.sampleSkipped.length ? (
|
||||
<div className="break-all text-xs text-zinc-500">
|
||||
示例跳过：
|
||||
{item.lastResult.sampleSkipped
|
||||
.map((sample) => `${sample.key}:${sample.reason}`)
|
||||
.join("；")}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-zinc-500">暂无同步记录。</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-2 p-5 text-sm text-zinc-600">
|
||||
<h3 className="text-base font-semibold text-zinc-900">说明</h3>
|
||||
<p>- 本页只负责 ERP 主数据同步、Outbox 队列和 ID 映射，不承担业务单据本身的录入。</p>
|
||||
<p>- 报销、采购和资产的 ERP 同步动作请前往对应业务详情区执行。</p>
|
||||
<p>- 当前阶段不接入真实 ERP Provider，仍以 mock Provider 为准。</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="outbox" className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-5">
|
||||
{OUTBOX_STATUS_OPTIONS.filter((item) => item.value).map((item) => {
|
||||
const status = item.value as IntegrationOutboxStatus;
|
||||
const count =
|
||||
status === "pending"
|
||||
? outboxStatsQuery.data?.pending
|
||||
: status === "processing"
|
||||
? outboxStatsQuery.data?.processing
|
||||
: status === "succeeded"
|
||||
? outboxStatsQuery.data?.succeeded
|
||||
: status === "failed"
|
||||
? outboxStatsQuery.data?.failed
|
||||
: outboxStatsQuery.data?.deadLetter;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={status}
|
||||
className={`card-std space-y-2 p-4 ${status === "failed" || status === "dead_letter" ? "border-red-200 bg-red-50/60" : ""}`}
|
||||
>
|
||||
<div className="text-sm text-zinc-500">{outboxStatusLabel(status)}</div>
|
||||
<div className="text-2xl font-semibold text-zinc-900">
|
||||
{outboxStatsQuery.isLoading ? "-" : count ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-4 p-5">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-900">Outbox 事件列表</h3>
|
||||
<p className="text-sm text-zinc-500">支持按状态和事件类型筛选，失败和死信事件可在此重试。</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 md:flex-row">
|
||||
<label className="space-y-1 text-sm text-zinc-600">
|
||||
<span>状态</span>
|
||||
<select
|
||||
className="select-std min-w-40"
|
||||
value={outboxStatus}
|
||||
onChange={(event) => {
|
||||
setOutboxStatus(event.target.value as IntegrationOutboxStatus | "");
|
||||
setOutboxPage(1);
|
||||
}}
|
||||
>
|
||||
{OUTBOX_STATUS_OPTIONS.map((item) => (
|
||||
<option key={item.label} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="space-y-1 text-sm text-zinc-600">
|
||||
<span>事件类型</span>
|
||||
<Input
|
||||
className="min-w-56"
|
||||
placeholder="例如 erp.journal.export"
|
||||
value={outboxEventType}
|
||||
onChange={(event) => {
|
||||
setOutboxEventType(event.target.value);
|
||||
setOutboxPage(1);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{outboxQuery.isLoading ? <TableSkeleton columns={7} rows={6} /> : null}
|
||||
{outboxQuery.isError ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
{resolveError(outboxQuery.error)}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{outboxQuery.data ? (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>事件类型</TableHead>
|
||||
<TableHead>摘要标识</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>尝试</TableHead>
|
||||
<TableHead>下次重试</TableHead>
|
||||
<TableHead>创建时间</TableHead>
|
||||
<TableHead>处理时间</TableHead>
|
||||
<TableHead className="w-40">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{outboxQuery.data.items.length ? (
|
||||
outboxQuery.data.items.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="font-medium text-zinc-900">{item.eventType}</TableCell>
|
||||
<TableCell>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="font-medium text-zinc-900">{renderOutboxSummary(item)}</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
{item.payloadSummary.entityType ?? "-"}
|
||||
{item.payloadSummary.sourceEventName ? ` · ${item.payloadSummary.sourceEventName}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className={`inline-flex rounded-full border px-2 py-1 text-xs font-medium ${outboxStatusClassName(item.status)}`}>
|
||||
{outboxStatusLabel(item.status)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.attempts} / {item.maxAttempts}
|
||||
</TableCell>
|
||||
<TableCell>{formatDateTime(item.nextRetryAt)}</TableCell>
|
||||
<TableCell>{formatDateTime(item.createdAt)}</TableCell>
|
||||
<TableCell>{formatDateTime(item.processedAt)}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => setSelectedOutboxId(item.id)}
|
||||
>
|
||||
查看详情
|
||||
</Button>
|
||||
{item.status === "failed" || item.status === "dead_letter" ? (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={retryMutation.isPending}
|
||||
onClick={() => retryMutation.mutate(item.id)}
|
||||
>
|
||||
重试
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="py-6 text-center text-zinc-500">
|
||||
当前筛选下暂无 Outbox 事件
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<Pagination page={outboxPage} totalPages={outboxTotalPages} onPageChange={setOutboxPage} />
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="bindings" className="space-y-6">
|
||||
<div className="card-std space-y-4 p-5">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-900">IntegrationBinding 列表</h3>
|
||||
<p className="text-sm text-zinc-500">查看本地单据与 ERP 外部 ID/编号的映射关系，并支持深链回到业务页。</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 md:flex-row">
|
||||
<label className="space-y-1 text-sm text-zinc-600">
|
||||
<span>Provider</span>
|
||||
<select
|
||||
className="select-std min-w-40"
|
||||
value={bindingProvider}
|
||||
onChange={(event) => {
|
||||
setBindingProvider(event.target.value);
|
||||
setBindingsPage(1);
|
||||
}}
|
||||
>
|
||||
<option value="">全部 Provider</option>
|
||||
<option value="erp">erp</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="space-y-1 text-sm text-zinc-600">
|
||||
<span>实体类型</span>
|
||||
<select
|
||||
className="select-std min-w-56"
|
||||
value={bindingEntityType}
|
||||
onChange={(event) => {
|
||||
setBindingEntityType(event.target.value);
|
||||
setBindingsPage(1);
|
||||
}}
|
||||
>
|
||||
{BINDING_ENTITY_OPTIONS.map((item) => (
|
||||
<option key={item.label} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{bindingsQuery.isLoading ? <TableSkeleton columns={6} rows={6} /> : null}
|
||||
{bindingsQuery.isError ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
{resolveError(bindingsQuery.error)}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{bindingsQuery.data ? (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Provider</TableHead>
|
||||
<TableHead>实体类型</TableHead>
|
||||
<TableHead>本地 ID</TableHead>
|
||||
<TableHead>外部 ID</TableHead>
|
||||
<TableHead>外部编号</TableHead>
|
||||
<TableHead>最后同步</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{bindingsQuery.data.items.length ? (
|
||||
bindingsQuery.data.items.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.provider}</TableCell>
|
||||
<TableCell>{bindingEntityLabel(item.entityType)}</TableCell>
|
||||
<TableCell>
|
||||
<BindingLocalIdCell item={item} />
|
||||
</TableCell>
|
||||
<TableCell className="break-all">{item.externalId ?? "-"}</TableCell>
|
||||
<TableCell className="break-all">{item.externalCode ?? "-"}</TableCell>
|
||||
<TableCell title={formatDateTime(item.lastSyncedAt)}>{formatRelativeTime(item.lastSyncedAt)}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="py-6 text-center text-zinc-500">
|
||||
当前筛选下暂无 ID 映射记录
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<Pagination page={bindingsPage} totalPages={bindingsTotalPages} onPageChange={setBindingsPage} />
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<Dialog
|
||||
open={Boolean(selectedOutboxId)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setSelectedOutboxId("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-h-[85vh] max-w-4xl overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Outbox 事件详情</DialogTitle>
|
||||
<DialogDescription>查看完整 payload、错误摘要和当前队列状态。</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{outboxDetailQuery.isLoading ? <p className="text-sm text-zinc-500">详情加载中...</p> : null}
|
||||
{outboxDetailQuery.isError ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
{resolveError(outboxDetailQuery.error)}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{outboxDetailQuery.data ? (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700 md:grid-cols-2">
|
||||
<div>Outbox ID：{outboxDetailQuery.data.id}</div>
|
||||
<div>事件类型：{outboxDetailQuery.data.eventType}</div>
|
||||
<div>状态：{outboxStatusLabel(outboxDetailQuery.data.status)}</div>
|
||||
<div>尝试次数：{outboxDetailQuery.data.attempts} / {outboxDetailQuery.data.maxAttempts}</div>
|
||||
<div>创建时间：{formatDateTime(outboxDetailQuery.data.createdAt)}</div>
|
||||
<div>处理时间：{formatDateTime(outboxDetailQuery.data.processedAt)}</div>
|
||||
<div>下次重试：{formatDateTime(outboxDetailQuery.data.nextRetryAt)}</div>
|
||||
<div>死信时间：{formatDateTime(outboxDetailQuery.data.deadLetterAt)}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium text-zinc-900">最近错误</div>
|
||||
<div className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-600">
|
||||
{outboxDetailQuery.data.lastError ?? "-"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium text-zinc-900">Payload</div>
|
||||
<pre className="max-h-[45vh] overflow-auto rounded-lg border border-zinc-200 bg-zinc-950 p-4 text-xs text-zinc-100">
|
||||
{JSON.stringify(outboxDetailQuery.data.payload ?? null, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户