636 行
22 KiB
TypeScript
636 行
22 KiB
TypeScript
import { useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { toast } from "sonner";
|
|
import {
|
|
createCutoverScope,
|
|
dryRunMigration,
|
|
fetchCutoverScopes,
|
|
fetchMigrationRuns,
|
|
updateCutoverScope,
|
|
type CutoverScope,
|
|
} from "../api/cutover";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { TableSkeleton } from "../components/common/TableSkeleton";
|
|
import { SectionPanel } from "../components/patterns/SectionPanel";
|
|
import { Button } from "../components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "../components/ui/dialog";
|
|
import { Input } from "../components/ui/input";
|
|
import { Label } from "../components/ui/label";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
|
|
|
|
const SCOPE_TYPE_OPTIONS: Array<{ value: CutoverScope["scopeType"]; label: string }> = [
|
|
{ value: "department", label: "department" },
|
|
{ value: "legal_entity", label: "legal_entity" },
|
|
{ value: "domain", label: "domain" },
|
|
];
|
|
|
|
type ScopeView = "list" | "timeline";
|
|
|
|
type ScopeFormState = {
|
|
scopeType: CutoverScope["scopeType"];
|
|
scopeKey: string;
|
|
enabled: boolean;
|
|
startsAt: string;
|
|
notes: string;
|
|
};
|
|
|
|
function resolveErrorMessage(error: unknown) {
|
|
if (error instanceof Error) {
|
|
return error.message;
|
|
}
|
|
return "请求失败，请稍后重试。";
|
|
}
|
|
|
|
function formatDateTime(value: string | null) {
|
|
if (!value) return "-";
|
|
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 toDateTimeLocalValue(value: string | null) {
|
|
if (!value) return "";
|
|
const date = new Date(value);
|
|
if (!Number.isFinite(date.getTime())) return "";
|
|
const pad = (input: number) => String(input).padStart(2, "0");
|
|
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
|
}
|
|
|
|
function toIsoDateTime(value: string) {
|
|
if (!value.trim()) return null;
|
|
const parsed = new Date(value);
|
|
if (!Number.isFinite(parsed.getTime())) return null;
|
|
return parsed.toISOString();
|
|
}
|
|
|
|
function buildDefaultScopeForm(): ScopeFormState {
|
|
return {
|
|
scopeType: "department",
|
|
scopeKey: "",
|
|
enabled: false,
|
|
startsAt: "",
|
|
notes: "",
|
|
};
|
|
}
|
|
|
|
function buildScopeForm(item: CutoverScope): ScopeFormState {
|
|
return {
|
|
scopeType: item.scopeType,
|
|
scopeKey: item.scopeKey,
|
|
enabled: item.enabled,
|
|
startsAt: toDateTimeLocalValue(item.startsAt),
|
|
notes: item.notes ?? "",
|
|
};
|
|
}
|
|
|
|
function getScopePhase(item: CutoverScope) {
|
|
const startsAt = item.startsAt ? new Date(item.startsAt).getTime() : null;
|
|
const now = Date.now();
|
|
if (!item.enabled) {
|
|
return "disabled";
|
|
}
|
|
if (startsAt && startsAt > now) {
|
|
return "pending";
|
|
}
|
|
return "active";
|
|
}
|
|
|
|
function getScopePhaseLabel(item: CutoverScope) {
|
|
const phase = getScopePhase(item);
|
|
if (phase === "active") return "已启用";
|
|
if (phase === "pending") return "待生效";
|
|
return "已禁用";
|
|
}
|
|
|
|
function getScopePhaseClassName(item: CutoverScope) {
|
|
const phase = getScopePhase(item);
|
|
if (phase === "active") {
|
|
return "border-emerald-200 bg-emerald-50 text-emerald-700";
|
|
}
|
|
if (phase === "pending") {
|
|
return "border-amber-200 bg-amber-50 text-amber-700";
|
|
}
|
|
return "border-zinc-200 bg-zinc-50 text-zinc-700";
|
|
}
|
|
|
|
function getScopeCountdown(item: CutoverScope) {
|
|
if (!item.startsAt) {
|
|
return item.enabled ? "立即生效" : "-";
|
|
}
|
|
if (!item.enabled) {
|
|
return "未启用";
|
|
}
|
|
const target = new Date(item.startsAt).getTime();
|
|
if (!Number.isFinite(target)) return "-";
|
|
if (target > Date.now()) {
|
|
return `${formatRelativeTime(item.startsAt)}生效`;
|
|
}
|
|
return `已于 ${formatRelativeTime(item.startsAt)} 生效`;
|
|
}
|
|
|
|
export function CutoverConsolePage() {
|
|
const queryClient = useQueryClient();
|
|
const [view, setView] = useState<ScopeView>("list");
|
|
const [dryRunType, setDryRunType] = useState<"employees" | "departments" | "budgets" | "masterdata_validation">("employees");
|
|
const [dryRunFile, setDryRunFile] = useState<File | null>(null);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [editingScope, setEditingScope] = useState<CutoverScope | null>(null);
|
|
const [scopeForm, setScopeForm] = useState<ScopeFormState>(buildDefaultScopeForm());
|
|
|
|
const scopesQuery = useQuery({
|
|
queryKey: ["cutover-scopes"],
|
|
queryFn: () => fetchCutoverScopes(),
|
|
});
|
|
const runsQuery = useQuery({
|
|
queryKey: ["migration-runs"],
|
|
queryFn: () => fetchMigrationRuns(),
|
|
});
|
|
|
|
const refresh = async () => {
|
|
await queryClient.invalidateQueries({ queryKey: ["cutover-scopes"] });
|
|
await queryClient.invalidateQueries({ queryKey: ["migration-runs"] });
|
|
};
|
|
|
|
const createScopeMutation = useMutation({
|
|
mutationFn: () =>
|
|
createCutoverScope({
|
|
scopeType: scopeForm.scopeType,
|
|
scopeKey: scopeForm.scopeKey.trim(),
|
|
enabled: scopeForm.enabled,
|
|
startsAt: toIsoDateTime(scopeForm.startsAt),
|
|
notes: scopeForm.notes.trim() || null,
|
|
}),
|
|
onSuccess: async () => {
|
|
setDialogOpen(false);
|
|
setEditingScope(null);
|
|
setScopeForm(buildDefaultScopeForm());
|
|
await refresh();
|
|
toast.success("切换范围已创建");
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const editScopeMutation = useMutation({
|
|
mutationFn: () => {
|
|
if (!editingScope) {
|
|
throw new Error("未找到要编辑的切换范围");
|
|
}
|
|
return updateCutoverScope(editingScope.id, {
|
|
enabled: scopeForm.enabled,
|
|
startsAt: toIsoDateTime(scopeForm.startsAt),
|
|
notes: scopeForm.notes.trim() || null,
|
|
});
|
|
},
|
|
onSuccess: async () => {
|
|
setDialogOpen(false);
|
|
setEditingScope(null);
|
|
setScopeForm(buildDefaultScopeForm());
|
|
await refresh();
|
|
toast.success("切换范围已更新");
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const toggleScopeMutation = useMutation({
|
|
mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) =>
|
|
updateCutoverScope(id, { enabled }),
|
|
onSuccess: async () => {
|
|
await refresh();
|
|
toast.success("切换范围已更新");
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const dryRunMutation = useMutation({
|
|
mutationFn: async () => {
|
|
if (!dryRunFile) throw new Error("请先选择 CSV 文件");
|
|
return dryRunMigration({ runType: dryRunType, file: dryRunFile });
|
|
},
|
|
onSuccess: async () => {
|
|
setDryRunFile(null);
|
|
await refresh();
|
|
toast.success("演练已完成");
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const scopes = scopesQuery.data?.items ?? [];
|
|
const summary = {
|
|
active: scopes.filter((item) => getScopePhase(item) === "active").length,
|
|
disabled: scopes.filter((item) => getScopePhase(item) === "disabled").length,
|
|
pending: scopes.filter((item) => getScopePhase(item) === "pending").length,
|
|
};
|
|
const timelineItems = scopes
|
|
.flatMap((item) => {
|
|
const nodes = [
|
|
{
|
|
id: `${item.id}-created`,
|
|
at: item.createdAt,
|
|
title: "创建范围",
|
|
description: `${item.scopeType} · ${item.scopeKey}`,
|
|
},
|
|
];
|
|
|
|
if (item.startsAt) {
|
|
nodes.push({
|
|
id: `${item.id}-startsAt`,
|
|
at: item.startsAt,
|
|
title: item.enabled ? "计划生效" : "预设开始时间",
|
|
description: `${item.scopeType} · ${item.scopeKey}`,
|
|
});
|
|
}
|
|
|
|
if (item.updatedAt && item.updatedAt !== item.createdAt) {
|
|
nodes.push({
|
|
id: `${item.id}-updated`,
|
|
at: item.updatedAt,
|
|
title: "最近更新",
|
|
description: `${item.scopeType} · ${item.scopeKey}`,
|
|
});
|
|
}
|
|
|
|
return nodes;
|
|
})
|
|
.filter((item) => item.at)
|
|
.sort((left, right) => new Date(right.at ?? 0).getTime() - new Date(left.at ?? 0).getTime());
|
|
|
|
const openCreateDialog = () => {
|
|
setEditingScope(null);
|
|
setScopeForm(buildDefaultScopeForm());
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const openEditDialog = (item: CutoverScope) => {
|
|
setEditingScope(item);
|
|
setScopeForm(buildScopeForm(item));
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const submitScopeForm = () => {
|
|
if (!editingScope && !scopeForm.scopeKey.trim()) {
|
|
toast.error("请填写范围 Key");
|
|
return;
|
|
}
|
|
|
|
if (editingScope) {
|
|
editScopeMutation.mutate();
|
|
return;
|
|
}
|
|
|
|
createScopeMutation.mutate();
|
|
};
|
|
|
|
const scopeDialogPending = createScopeMutation.isPending || editScopeMutation.isPending;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title="切换控制台" subtitle="范围开关和导入演练。" />
|
|
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="card-std p-5">
|
|
<div className="text-sm text-zinc-500">已启用</div>
|
|
<div className="mt-2 text-3xl font-semibold text-emerald-600">{summary.active}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">已到生效时间</div>
|
|
</div>
|
|
<div className="card-std p-5">
|
|
<div className="text-sm text-zinc-500">已禁用</div>
|
|
<div className="mt-2 text-3xl font-semibold text-zinc-800">{summary.disabled}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">手动关闭</div>
|
|
</div>
|
|
<div className="card-std p-5">
|
|
<div className="text-sm text-zinc-500">待生效</div>
|
|
<div className="mt-2 text-3xl font-semibold text-amber-600">{summary.pending}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">等待生效时间</div>
|
|
</div>
|
|
</div>
|
|
|
|
<SectionPanel
|
|
title="切换范围"
|
|
description="当前配置和时间线。"
|
|
actions={
|
|
<Button type="button" onClick={openCreateDialog}>
|
|
新增范围
|
|
</Button>
|
|
}
|
|
>
|
|
<Tabs value={view} onValueChange={(value) => setView(value as ScopeView)}>
|
|
<TabsList>
|
|
<TabsTrigger value="list">列表</TabsTrigger>
|
|
<TabsTrigger value="timeline">时间线</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="list">
|
|
{scopesQuery.isLoading ? <TableSkeleton columns={7} rows={4} /> : null}
|
|
{scopesQuery.isError ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{resolveErrorMessage(scopesQuery.error)}
|
|
</p>
|
|
) : null}
|
|
{!scopesQuery.isLoading && !scopesQuery.isError ? (
|
|
scopes.length ? (
|
|
<div className="rounded-lg border border-zinc-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<tr>
|
|
<TableHead>类型</TableHead>
|
|
<TableHead>范围标识</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead>生效时间</TableHead>
|
|
<TableHead>倒计时</TableHead>
|
|
<TableHead>备注</TableHead>
|
|
<TableHead className="w-40">操作</TableHead>
|
|
</tr>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{scopes.map((item) => (
|
|
<TableRow key={item.id}>
|
|
<TableCell>{item.scopeType}</TableCell>
|
|
<TableCell className="font-mono text-xs text-zinc-600">{item.scopeKey}</TableCell>
|
|
<TableCell>
|
|
<span
|
|
className={`inline-flex rounded-full border px-2 py-1 text-xs font-medium ${getScopePhaseClassName(item)}`}
|
|
>
|
|
{getScopePhaseLabel(item)}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>{formatDateTime(item.startsAt)}</TableCell>
|
|
<TableCell className="text-sm text-zinc-600">{getScopeCountdown(item)}</TableCell>
|
|
<TableCell className="text-sm text-zinc-600">{item.notes || "-"}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
size="sm"
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={toggleScopeMutation.isPending}
|
|
onClick={() => toggleScopeMutation.mutate({ id: item.id, enabled: !item.enabled })}
|
|
>
|
|
{item.enabled ? "关闭" : "启用"}
|
|
</Button>
|
|
<Button size="sm" type="button" variant="outline" onClick={() => openEditDialog(item)}>
|
|
编辑
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
|
|
暂无切换范围。
|
|
</div>
|
|
)
|
|
) : null}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="timeline">
|
|
{scopesQuery.isLoading ? <TableSkeleton columns={1} rows={4} /> : null}
|
|
{scopesQuery.isError ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{resolveErrorMessage(scopesQuery.error)}
|
|
</p>
|
|
) : null}
|
|
{!scopesQuery.isLoading && !scopesQuery.isError ? (
|
|
timelineItems.length ? (
|
|
<div className="space-y-3">
|
|
{timelineItems.map((item) => (
|
|
<div key={item.id} className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="font-medium text-zinc-900">{item.title}</div>
|
|
<div className="text-xs text-zinc-500">
|
|
{formatDateTime(item.at)} · {formatRelativeTime(item.at)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-1 text-sm text-zinc-600">{item.description}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
|
|
当前没有可展示的时间线节点。
|
|
</div>
|
|
)
|
|
) : null}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</SectionPanel>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[360px,1fr]">
|
|
<SectionPanel title="上传演练 CSV" description="导入前先演练。">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>演练类型</Label>
|
|
<select
|
|
className="select-std"
|
|
value={dryRunType}
|
|
onChange={(event) => setDryRunType(event.target.value as typeof dryRunType)}
|
|
>
|
|
<option value="employees">employees</option>
|
|
<option value="departments">departments</option>
|
|
<option value="budgets">budgets</option>
|
|
<option value="masterdata_validation">masterdata_validation</option>
|
|
</select>
|
|
</div>
|
|
<Input
|
|
type="file"
|
|
accept=".csv,text/csv"
|
|
onChange={(event) => setDryRunFile(event.target.files?.[0] ?? null)}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
disabled={dryRunMutation.isPending}
|
|
onClick={() => dryRunMutation.mutate()}
|
|
>
|
|
{dryRunMutation.isPending ? "执行中..." : "执行演练"}
|
|
</Button>
|
|
</div>
|
|
</SectionPanel>
|
|
|
|
<SectionPanel title="最近演练" description="核对上传文件和结果。">
|
|
{runsQuery.isLoading ? <TableSkeleton columns={1} rows={3} /> : null}
|
|
{runsQuery.isError ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{resolveErrorMessage(runsQuery.error)}
|
|
</p>
|
|
) : null}
|
|
{!runsQuery.isLoading && !runsQuery.isError ? (
|
|
<div className="space-y-3">
|
|
{(runsQuery.data?.items ?? []).map((item) => (
|
|
<div key={item.id} className="rounded-lg border border-zinc-200 p-4">
|
|
<div className="font-medium text-zinc-900">
|
|
{item.runType} · {item.status}
|
|
</div>
|
|
<div className="text-sm text-zinc-600">{item.sourceFilename}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">{formatDateTime(item.createdAt)}</div>
|
|
</div>
|
|
))}
|
|
{!runsQuery.data?.items?.length ? (
|
|
<div className="text-sm text-zinc-500">暂无演练记录</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</SectionPanel>
|
|
</div>
|
|
|
|
<Dialog
|
|
open={dialogOpen}
|
|
onOpenChange={(open) => {
|
|
if (!scopeDialogPending) {
|
|
setDialogOpen(open);
|
|
if (!open) {
|
|
setEditingScope(null);
|
|
setScopeForm(buildDefaultScopeForm());
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>{editingScope ? "编辑切换范围" : "新增切换范围"}</DialogTitle>
|
|
<DialogDescription>
|
|
创建时可设置 startsAt；编辑时仅允许调整 enabled、startsAt 和 notes。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>范围类型</Label>
|
|
<select
|
|
className="select-std"
|
|
disabled={Boolean(editingScope)}
|
|
value={scopeForm.scopeType}
|
|
onChange={(event) =>
|
|
setScopeForm((prev) => ({
|
|
...prev,
|
|
scopeType: event.target.value as CutoverScope["scopeType"],
|
|
}))
|
|
}
|
|
>
|
|
{SCOPE_TYPE_OPTIONS.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>范围标识</Label>
|
|
<Input
|
|
disabled={Boolean(editingScope)}
|
|
value={scopeForm.scopeKey}
|
|
onChange={(event) =>
|
|
setScopeForm((prev) => ({
|
|
...prev,
|
|
scopeKey: event.target.value,
|
|
}))
|
|
}
|
|
placeholder="部门 ID / 法体 ID / 业务域"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>生效时间</Label>
|
|
<Input
|
|
type="datetime-local"
|
|
value={scopeForm.startsAt}
|
|
onChange={(event) =>
|
|
setScopeForm((prev) => ({
|
|
...prev,
|
|
startsAt: event.target.value,
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>备注</Label>
|
|
<textarea
|
|
className="min-h-28 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
|
|
value={scopeForm.notes}
|
|
onChange={(event) =>
|
|
setScopeForm((prev) => ({
|
|
...prev,
|
|
notes: event.target.value,
|
|
}))
|
|
}
|
|
placeholder="说明本次切换范围用途"
|
|
/>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-3 rounded-lg border border-zinc-200 px-3 py-3 text-sm text-zinc-700">
|
|
<input
|
|
checked={scopeForm.enabled}
|
|
className="h-4 w-4 rounded border border-zinc-300"
|
|
onChange={(event) =>
|
|
setScopeForm((prev) => ({
|
|
...prev,
|
|
enabled: event.target.checked,
|
|
}))
|
|
}
|
|
type="checkbox"
|
|
/>
|
|
启用该范围
|
|
</label>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={scopeDialogPending}
|
|
onClick={() => {
|
|
setDialogOpen(false);
|
|
setEditingScope(null);
|
|
setScopeForm(buildDefaultScopeForm());
|
|
}}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button type="button" disabled={scopeDialogPending} onClick={submitScopeForm}>
|
|
{scopeDialogPending ? "提交中..." : editingScope ? "保存修改" : "创建范围"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|