重构消息通知弹窗
This commit is contained in:
dengqichen
parent
f108781983
commit
0128d7b03b
@ -52,6 +52,9 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (selectedField) {
|
if (selectedField) {
|
||||||
|
// 🔄 先重置表单，清除旧字段的状态
|
||||||
|
form.resetFields();
|
||||||
|
|
||||||
// 确保嵌套对象被正确设置到表单
|
// 确保嵌套对象被正确设置到表单
|
||||||
const formValues: any = {
|
const formValues: any = {
|
||||||
...selectedField,
|
...selectedField,
|
||||||
@ -73,6 +76,9 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
form.setFieldsValue(formValues);
|
form.setFieldsValue(formValues);
|
||||||
|
} else {
|
||||||
|
// 如果没有选中字段，也清空表单
|
||||||
|
form.resetFields();
|
||||||
}
|
}
|
||||||
}, [selectedField, form]);
|
}, [selectedField, form]);
|
||||||
|
|
||||||
|
|||||||
@ -59,6 +59,19 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 局部更新单条记录（避免全量刷新导致滚动位置丢失）
|
||||||
|
const updateRecordInList = (id: number, updates: Partial<ScheduleJobResponse>) => {
|
||||||
|
setData(prevData => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
return {
|
||||||
|
...prevData,
|
||||||
|
content: prevData.content.map(item =>
|
||||||
|
item.id === id ? { ...item, ...updates } : item
|
||||||
|
)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 加载分类
|
// 加载分类
|
||||||
const loadCategories = async () => {
|
const loadCategories = async () => {
|
||||||
try {
|
try {
|
||||||
@ -125,7 +138,8 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
title: '暂停成功',
|
title: '暂停成功',
|
||||||
description: `任务 "${record.jobName}" 已暂停`,
|
description: `任务 "${record.jobName}" 已暂停`,
|
||||||
});
|
});
|
||||||
loadData();
|
// 局部更新，避免页面滚动
|
||||||
|
updateRecordInList(record.id, { status: 'PAUSED' });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('暂停失败:', error);
|
console.error('暂停失败:', error);
|
||||||
toast({
|
toast({
|
||||||
@ -144,7 +158,8 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
title: '恢复成功',
|
title: '恢复成功',
|
||||||
description: `任务 "${record.jobName}" 已恢复`,
|
description: `任务 "${record.jobName}" 已恢复`,
|
||||||
});
|
});
|
||||||
loadData();
|
// 局部更新，避免页面滚动
|
||||||
|
updateRecordInList(record.id, { status: 'ENABLED' });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('恢复失败:', error);
|
console.error('恢复失败:', error);
|
||||||
toast({
|
toast({
|
||||||
@ -163,7 +178,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
title: '触发成功',
|
title: '触发成功',
|
||||||
description: `任务 "${record.jobName}" 已立即触发执行`,
|
description: `任务 "${record.jobName}" 已立即触发执行`,
|
||||||
});
|
});
|
||||||
loadData();
|
// 立即执行不改变任务状态，无需更新列表
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('触发失败:', error);
|
console.error('触发失败:', error);
|
||||||
toast({
|
toast({
|
||||||
@ -182,7 +197,8 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
title: '禁用成功',
|
title: '禁用成功',
|
||||||
description: `任务 "${record.jobName}" 已禁用`,
|
description: `任务 "${record.jobName}" 已禁用`,
|
||||||
});
|
});
|
||||||
loadData();
|
// 局部更新，避免页面滚动
|
||||||
|
updateRecordInList(record.id, { status: 'DISABLED' });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('禁用失败:', error);
|
console.error('禁用失败:', error);
|
||||||
toast({
|
toast({
|
||||||
@ -201,7 +217,8 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
title: '启用成功',
|
title: '启用成功',
|
||||||
description: `任务 "${record.jobName}" 已启用`,
|
description: `任务 "${record.jobName}" 已启用`,
|
||||||
});
|
});
|
||||||
loadData();
|
// 局部更新，避免页面滚动
|
||||||
|
updateRecordInList(record.id, { status: 'ENABLED' });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('启用失败:', error);
|
console.error('启用失败:', error);
|
||||||
toast({
|
toast({
|
||||||
@ -309,11 +326,11 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
<CardHeader className="flex flex-row items-center justify-between">
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
<CardTitle>任务列表</CardTitle>
|
<CardTitle>任务列表</CardTitle>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button variant="outline" onClick={() => setCategoryDialogOpen(true)}>
|
<Button type="button" variant="outline" onClick={() => setCategoryDialogOpen(true)}>
|
||||||
<FolderKanban className="h-4 w-4 mr-2"/>
|
<FolderKanban className="h-4 w-4 mr-2"/>
|
||||||
分类管理
|
分类管理
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleCreate}>
|
<Button type="button" onClick={handleCreate}>
|
||||||
<Plus className="h-4 w-4 mr-2"/>
|
<Plus className="h-4 w-4 mr-2"/>
|
||||||
新建任务
|
新建任务
|
||||||
</Button>
|
</Button>
|
||||||
@ -360,11 +377,11 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
<SelectItem value="PAUSED">暂停</SelectItem>
|
<SelectItem value="PAUSED">暂停</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<Button onClick={handleSearch}>
|
<Button type="button" onClick={handleSearch}>
|
||||||
<Search className="h-4 w-4 mr-2"/>
|
<Search className="h-4 w-4 mr-2"/>
|
||||||
查询
|
查询
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" onClick={handleReset}>
|
<Button type="button" variant="outline" onClick={handleReset}>
|
||||||
重置
|
重置
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -440,6 +457,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
<>
|
<>
|
||||||
{/* 暂停 */}
|
{/* 暂停 */}
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7"
|
className="h-7 w-7"
|
||||||
@ -450,6 +468,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
{/* 禁用 */}
|
{/* 禁用 */}
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7 text-orange-600 hover:text-orange-700 hover:bg-orange-50 dark:text-orange-500 dark:hover:bg-orange-950/20"
|
className="h-7 w-7 text-orange-600 hover:text-orange-700 hover:bg-orange-50 dark:text-orange-500 dark:hover:bg-orange-950/20"
|
||||||
@ -460,6 +479,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
{/* 立即执行 */}
|
{/* 立即执行 */}
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7 text-green-600 hover:text-green-700 hover:bg-green-50 dark:text-green-500 dark:hover:bg-green-950/20"
|
className="h-7 w-7 text-green-600 hover:text-green-700 hover:bg-green-50 dark:text-green-500 dark:hover:bg-green-950/20"
|
||||||
@ -475,6 +495,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
<>
|
<>
|
||||||
{/* 恢复 */}
|
{/* 恢复 */}
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7"
|
className="h-7 w-7"
|
||||||
@ -485,6 +506,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
{/* 禁用 */}
|
{/* 禁用 */}
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7 text-orange-600 hover:text-orange-700 hover:bg-orange-50 dark:text-orange-500 dark:hover:bg-orange-950/20"
|
className="h-7 w-7 text-orange-600 hover:text-orange-700 hover:bg-orange-50 dark:text-orange-500 dark:hover:bg-orange-950/20"
|
||||||
@ -498,6 +520,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
{/* DISABLED 按钮控制 */}
|
{/* DISABLED 按钮控制 */}
|
||||||
{record.status === 'DISABLED' && (
|
{record.status === 'DISABLED' && (
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7 text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950/20"
|
className="h-7 w-7 text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950/20"
|
||||||
@ -509,6 +532,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
{/* 删除按钮 所有状态显示 */}
|
{/* 删除按钮 所有状态显示 */}
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7 text-destructive hover:text-destructive"
|
className="h-7 w-7 text-destructive hover:text-destructive"
|
||||||
@ -518,6 +542,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
<Trash2 className="h-4 w-4"/>
|
<Trash2 className="h-4 w-4"/>
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7"
|
className="h-7 w-7"
|
||||||
@ -527,6 +552,7 @@ const ScheduleJobList: React.FC = () => {
|
|||||||
<FileText className="h-4 w-4"/>
|
<FileText className="h-4 w-4"/>
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7"
|
className="h-7 w-7"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user