重构消息通知弹窗
This commit is contained in:
dengqichen
parent
828a0da526
commit
8b26c0d196
@ -145,10 +145,10 @@ export const NotificationConfigDialog: React.FC<
|
||||
};
|
||||
|
||||
// 加载通知模板列表
|
||||
const loadNotificationTemplates = async () => {
|
||||
const loadNotificationTemplates = async (channelType?: string) => {
|
||||
setLoadingTemplates(true);
|
||||
try {
|
||||
const templates = await getNotificationTemplates();
|
||||
const templates = await getNotificationTemplates(channelType);
|
||||
setNotificationTemplates(templates || []);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
@ -207,11 +207,22 @@ export const NotificationConfigDialog: React.FC<
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadNotificationChannels();
|
||||
loadNotificationTemplates();
|
||||
loadEnvironmentConfig();
|
||||
}
|
||||
}, [open, teamId, environmentId]);
|
||||
|
||||
// 监听通知渠道变化，重新加载模板列表
|
||||
const selectedChannelId = form.watch('notificationConfig.notificationChannelId');
|
||||
|
||||
useEffect(() => {
|
||||
if (open && notificationChannels.length > 0) {
|
||||
const selectedChannel = notificationChannels.find(
|
||||
(channel) => channel.id === selectedChannelId
|
||||
);
|
||||
loadNotificationTemplates(selectedChannel?.type);
|
||||
}
|
||||
}, [selectedChannelId, notificationChannels, open]);
|
||||
|
||||
const handleSubmit = async (data: FormData) => {
|
||||
console.log('表单提交数据:', data);
|
||||
console.log('当前配置:', currentConfig);
|
||||
@ -346,219 +357,249 @@ export const NotificationConfigDialog: React.FC<
|
||||
/>
|
||||
|
||||
{/* 部署通知 */}
|
||||
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.deployNotificationEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between space-y-0">
|
||||
<div className="space-y-0.5 flex-1">
|
||||
<FormLabel className="text-base">部署通知</FormLabel>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
部署状态变更时发送通知
|
||||
</div>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="rounded-lg border p-4 space-y-2">
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||
{/* 左侧：通知类型标题 */}
|
||||
<div>
|
||||
<FormLabel className="text-base">部署通知</FormLabel>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.deployNotificationTemplateId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col justify-center space-y-2">
|
||||
<ClearableSelect
|
||||
value={field.value?.toString()}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value ? Number(value) : null)
|
||||
}
|
||||
disabled={loadingTemplates}
|
||||
>
|
||||
{/* 中间：开关 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.deployNotificationEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-0">
|
||||
<FormControl>
|
||||
<SelectTrigger
|
||||
clearable
|
||||
hasValue={!!field.value}
|
||||
onClear={() => {
|
||||
field.onChange(null);
|
||||
}}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingTemplates
|
||||
? '加载中...'
|
||||
: '请选择通知模板（可选）'
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{notificationTemplates.map((template) => (
|
||||
<SelectItem
|
||||
key={template.id}
|
||||
value={template.id.toString()}
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 右侧：模板选择 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.deployNotificationTemplateId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-0">
|
||||
<FormControl>
|
||||
<ClearableSelect
|
||||
value={field.value?.toString()}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value ? Number(value) : null)
|
||||
}
|
||||
disabled={loadingTemplates}
|
||||
>
|
||||
<SelectTrigger
|
||||
clearable
|
||||
hasValue={!!field.value}
|
||||
onClear={() => {
|
||||
field.onChange(null);
|
||||
}}
|
||||
>
|
||||
{template.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</ClearableSelect>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
部署通知模板
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingTemplates
|
||||
? '加载中...'
|
||||
: '请选择通知模板（可选）'
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{notificationTemplates.map((template) => (
|
||||
<SelectItem
|
||||
key={template.id}
|
||||
value={template.id.toString()}
|
||||
>
|
||||
{template.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</ClearableSelect>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{/* 描述文字行 */}
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
部署状态变更时发送通知
|
||||
</div>
|
||||
<div></div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
部署通知模板
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 构建通知 */}
|
||||
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildNotificationEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between space-y-0">
|
||||
<div className="space-y-0.5 flex-1">
|
||||
<FormLabel className="text-base">构建通知</FormLabel>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建状态变更时发送通知
|
||||
</div>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="rounded-lg border p-4 space-y-2">
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||
{/* 左侧：通知类型标题 */}
|
||||
<div>
|
||||
<FormLabel className="text-base">构建通知</FormLabel>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildNotificationTemplateId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col justify-center space-y-2">
|
||||
<ClearableSelect
|
||||
value={field.value?.toString()}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value ? Number(value) : null)
|
||||
}
|
||||
disabled={loadingTemplates}
|
||||
>
|
||||
{/* 中间：开关 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildNotificationEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-0">
|
||||
<FormControl>
|
||||
<SelectTrigger
|
||||
clearable
|
||||
hasValue={!!field.value}
|
||||
onClear={() => {
|
||||
field.onChange(null);
|
||||
}}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingTemplates
|
||||
? '加载中...'
|
||||
: '请选择通知模板（可选）'
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{notificationTemplates.map((template) => (
|
||||
<SelectItem
|
||||
key={template.id}
|
||||
value={template.id.toString()}
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 右侧：模板选择 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildNotificationTemplateId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-0">
|
||||
<FormControl>
|
||||
<ClearableSelect
|
||||
value={field.value?.toString()}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value ? Number(value) : null)
|
||||
}
|
||||
disabled={loadingTemplates}
|
||||
>
|
||||
<SelectTrigger
|
||||
clearable
|
||||
hasValue={!!field.value}
|
||||
onClear={() => {
|
||||
field.onChange(null);
|
||||
}}
|
||||
>
|
||||
{template.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</ClearableSelect>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建通知模板
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingTemplates
|
||||
? '加载中...'
|
||||
: '请选择通知模板（可选）'
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{notificationTemplates.map((template) => (
|
||||
<SelectItem
|
||||
key={template.id}
|
||||
value={template.id.toString()}
|
||||
>
|
||||
{template.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</ClearableSelect>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{/* 描述文字行 */}
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建状态变更时发送通知
|
||||
</div>
|
||||
<div></div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建通知模板
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 失败日志 */}
|
||||
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildFailureFileEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between space-y-0">
|
||||
<div className="space-y-0.5 flex-1">
|
||||
<FormLabel className="text-base">失败日志</FormLabel>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建失败时是否发送日志
|
||||
</div>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="rounded-lg border p-4 space-y-2">
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||
{/* 左侧：通知类型标题 */}
|
||||
<div>
|
||||
<FormLabel className="text-base">失败日志</FormLabel>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildFailureNotificationTemplateId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col justify-center space-y-2">
|
||||
<ClearableSelect
|
||||
value={field.value?.toString()}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value ? Number(value) : null)
|
||||
}
|
||||
disabled={loadingTemplates}
|
||||
>
|
||||
{/* 中间：开关 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildFailureFileEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-0">
|
||||
<FormControl>
|
||||
<SelectTrigger
|
||||
clearable
|
||||
hasValue={!!field.value}
|
||||
onClear={() => {
|
||||
field.onChange(null);
|
||||
}}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingTemplates
|
||||
? '加载中...'
|
||||
: '请选择通知模板（可选）'
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{notificationTemplates.map((template) => (
|
||||
<SelectItem
|
||||
key={template.id}
|
||||
value={template.id.toString()}
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 右侧：模板选择 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildFailureNotificationTemplateId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-0">
|
||||
<FormControl>
|
||||
<ClearableSelect
|
||||
value={field.value?.toString()}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value ? Number(value) : null)
|
||||
}
|
||||
disabled={loadingTemplates}
|
||||
>
|
||||
<SelectTrigger
|
||||
clearable
|
||||
hasValue={!!field.value}
|
||||
onClear={() => {
|
||||
field.onChange(null);
|
||||
}}
|
||||
>
|
||||
{template.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</ClearableSelect>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
失败日志通知模板
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingTemplates
|
||||
? '加载中...'
|
||||
: '请选择通知模板（可选）'
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{notificationTemplates.map((template) => (
|
||||
<SelectItem
|
||||
key={template.id}
|
||||
value={template.id.toString()}
|
||||
>
|
||||
{template.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</ClearableSelect>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{/* 描述文字行 */}
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建失败时是否发送日志
|
||||
</div>
|
||||
<div></div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
失败日志通知模板
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogBody>
|
||||
|
||||
|
||||
@ -177,7 +177,9 @@ export const deleteTeamEnvironmentConfig = (id: number) =>
|
||||
/**
|
||||
* 获取通知模板列表
|
||||
*/
|
||||
export const getNotificationTemplates = () =>
|
||||
request.get<any[]>('/api/v1/notification-template/list');
|
||||
export const getNotificationTemplates = (channelType?: string) =>
|
||||
request.get<any[]>('/api/v1/notification-template/list', {
|
||||
params: channelType ? { channelType } : undefined
|
||||
});
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user