重构消息通知弹窗
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);
|
setLoadingTemplates(true);
|
||||||
try {
|
try {
|
||||||
const templates = await getNotificationTemplates();
|
const templates = await getNotificationTemplates(channelType);
|
||||||
setNotificationTemplates(templates || []);
|
setNotificationTemplates(templates || []);
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
toast({
|
toast({
|
||||||
@ -207,11 +207,22 @@ export const NotificationConfigDialog: React.FC<
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (open) {
|
if (open) {
|
||||||
loadNotificationChannels();
|
loadNotificationChannels();
|
||||||
loadNotificationTemplates();
|
|
||||||
loadEnvironmentConfig();
|
loadEnvironmentConfig();
|
||||||
}
|
}
|
||||||
}, [open, teamId, environmentId]);
|
}, [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) => {
|
const handleSubmit = async (data: FormData) => {
|
||||||
console.log('表单提交数据:', data);
|
console.log('表单提交数据:', data);
|
||||||
console.log('当前配置:', currentConfig);
|
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">
|
<div className="rounded-lg border p-4 space-y-2">
|
||||||
<FormField
|
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||||
control={form.control}
|
{/* 左侧：通知类型标题 */}
|
||||||
name="notificationConfig.deployNotificationEnabled"
|
<div>
|
||||||
render={({ field }) => (
|
<FormLabel className="text-base">部署通知</FormLabel>
|
||||||
<FormItem className="flex flex-row items-center justify-between space-y-0">
|
</div>
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
{/* 中间：开关 */}
|
||||||
control={form.control}
|
<FormField
|
||||||
name="notificationConfig.deployNotificationTemplateId"
|
control={form.control}
|
||||||
render={({ field }) => (
|
name="notificationConfig.deployNotificationEnabled"
|
||||||
<FormItem className="flex flex-col justify-center space-y-2">
|
render={({ field }) => (
|
||||||
<ClearableSelect
|
<FormItem className="mb-0">
|
||||||
value={field.value?.toString()}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
field.onChange(value ? Number(value) : null)
|
|
||||||
}
|
|
||||||
disabled={loadingTemplates}
|
|
||||||
>
|
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger
|
<Switch
|
||||||
clearable
|
checked={field.value}
|
||||||
hasValue={!!field.value}
|
onCheckedChange={field.onChange}
|
||||||
onClear={() => {
|
/>
|
||||||
field.onChange(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectValue
|
|
||||||
placeholder={
|
|
||||||
loadingTemplates
|
|
||||||
? '加载中...'
|
|
||||||
: '请选择通知模板（可选）'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
</FormItem>
|
||||||
{notificationTemplates.map((template) => (
|
)}
|
||||||
<SelectItem
|
/>
|
||||||
key={template.id}
|
|
||||||
value={template.id.toString()}
|
{/* 右侧：模板选择 */}
|
||||||
|
<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}
|
<SelectValue
|
||||||
</SelectItem>
|
placeholder={
|
||||||
))}
|
loadingTemplates
|
||||||
</SelectContent>
|
? '加载中...'
|
||||||
</ClearableSelect>
|
: '请选择通知模板（可选）'
|
||||||
<div className="text-sm text-muted-foreground">
|
}
|
||||||
部署通知模板
|
/>
|
||||||
</div>
|
</SelectTrigger>
|
||||||
<FormMessage />
|
<SelectContent>
|
||||||
</FormItem>
|
{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>
|
||||||
|
|
||||||
{/* 构建通知 */}
|
{/* 构建通知 */}
|
||||||
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4">
|
<div className="rounded-lg border p-4 space-y-2">
|
||||||
<FormField
|
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||||
control={form.control}
|
{/* 左侧：通知类型标题 */}
|
||||||
name="notificationConfig.buildNotificationEnabled"
|
<div>
|
||||||
render={({ field }) => (
|
<FormLabel className="text-base">构建通知</FormLabel>
|
||||||
<FormItem className="flex flex-row items-center justify-between space-y-0">
|
</div>
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
{/* 中间：开关 */}
|
||||||
control={form.control}
|
<FormField
|
||||||
name="notificationConfig.buildNotificationTemplateId"
|
control={form.control}
|
||||||
render={({ field }) => (
|
name="notificationConfig.buildNotificationEnabled"
|
||||||
<FormItem className="flex flex-col justify-center space-y-2">
|
render={({ field }) => (
|
||||||
<ClearableSelect
|
<FormItem className="mb-0">
|
||||||
value={field.value?.toString()}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
field.onChange(value ? Number(value) : null)
|
|
||||||
}
|
|
||||||
disabled={loadingTemplates}
|
|
||||||
>
|
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger
|
<Switch
|
||||||
clearable
|
checked={field.value}
|
||||||
hasValue={!!field.value}
|
onCheckedChange={field.onChange}
|
||||||
onClear={() => {
|
/>
|
||||||
field.onChange(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectValue
|
|
||||||
placeholder={
|
|
||||||
loadingTemplates
|
|
||||||
? '加载中...'
|
|
||||||
: '请选择通知模板（可选）'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
</FormItem>
|
||||||
{notificationTemplates.map((template) => (
|
)}
|
||||||
<SelectItem
|
/>
|
||||||
key={template.id}
|
|
||||||
value={template.id.toString()}
|
{/* 右侧：模板选择 */}
|
||||||
|
<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}
|
<SelectValue
|
||||||
</SelectItem>
|
placeholder={
|
||||||
))}
|
loadingTemplates
|
||||||
</SelectContent>
|
? '加载中...'
|
||||||
</ClearableSelect>
|
: '请选择通知模板（可选）'
|
||||||
<div className="text-sm text-muted-foreground">
|
}
|
||||||
构建通知模板
|
/>
|
||||||
</div>
|
</SelectTrigger>
|
||||||
<FormMessage />
|
<SelectContent>
|
||||||
</FormItem>
|
{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>
|
||||||
|
|
||||||
{/* 失败日志 */}
|
{/* 失败日志 */}
|
||||||
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4">
|
<div className="rounded-lg border p-4 space-y-2">
|
||||||
<FormField
|
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
|
||||||
control={form.control}
|
{/* 左侧：通知类型标题 */}
|
||||||
name="notificationConfig.buildFailureFileEnabled"
|
<div>
|
||||||
render={({ field }) => (
|
<FormLabel className="text-base">失败日志</FormLabel>
|
||||||
<FormItem className="flex flex-row items-center justify-between space-y-0">
|
</div>
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
{/* 中间：开关 */}
|
||||||
control={form.control}
|
<FormField
|
||||||
name="notificationConfig.buildFailureNotificationTemplateId"
|
control={form.control}
|
||||||
render={({ field }) => (
|
name="notificationConfig.buildFailureFileEnabled"
|
||||||
<FormItem className="flex flex-col justify-center space-y-2">
|
render={({ field }) => (
|
||||||
<ClearableSelect
|
<FormItem className="mb-0">
|
||||||
value={field.value?.toString()}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
field.onChange(value ? Number(value) : null)
|
|
||||||
}
|
|
||||||
disabled={loadingTemplates}
|
|
||||||
>
|
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger
|
<Switch
|
||||||
clearable
|
checked={field.value}
|
||||||
hasValue={!!field.value}
|
onCheckedChange={field.onChange}
|
||||||
onClear={() => {
|
/>
|
||||||
field.onChange(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectValue
|
|
||||||
placeholder={
|
|
||||||
loadingTemplates
|
|
||||||
? '加载中...'
|
|
||||||
: '请选择通知模板（可选）'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
</FormItem>
|
||||||
{notificationTemplates.map((template) => (
|
)}
|
||||||
<SelectItem
|
/>
|
||||||
key={template.id}
|
|
||||||
value={template.id.toString()}
|
{/* 右侧：模板选择 */}
|
||||||
|
<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}
|
<SelectValue
|
||||||
</SelectItem>
|
placeholder={
|
||||||
))}
|
loadingTemplates
|
||||||
</SelectContent>
|
? '加载中...'
|
||||||
</ClearableSelect>
|
: '请选择通知模板（可选）'
|
||||||
<div className="text-sm text-muted-foreground">
|
}
|
||||||
失败日志通知模板
|
/>
|
||||||
</div>
|
</SelectTrigger>
|
||||||
<FormMessage />
|
<SelectContent>
|
||||||
</FormItem>
|
{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>
|
||||||
</DialogBody>
|
</DialogBody>
|
||||||
|
|
||||||
|
|||||||
@ -177,7 +177,9 @@ export const deleteTeamEnvironmentConfig = (id: number) =>
|
|||||||
/**
|
/**
|
||||||
* 获取通知模板列表
|
* 获取通知模板列表
|
||||||
*/
|
*/
|
||||||
export const getNotificationTemplates = () =>
|
export const getNotificationTemplates = (channelType?: string) =>
|
||||||
request.get<any[]>('/api/v1/notification-template/list');
|
request.get<any[]>('/api/v1/notification-template/list', {
|
||||||
|
params: channelType ? { channelType } : undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user