1
This commit is contained in:
dengqichen
parent
ee70c571e8
commit
10d1e1f6c2
@ -56,10 +56,13 @@ interface EnvVariable {
|
||||
interface FormValues {
|
||||
applicationId?: number;
|
||||
externalSystemId?: number;
|
||||
viewId?: number;
|
||||
jobId?: number;
|
||||
envs: EnvVariable[];
|
||||
jenkinsViewId?: number;
|
||||
jenkinsJobId?: number;
|
||||
script: string;
|
||||
envs: {
|
||||
key: string;
|
||||
value: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface DeploymentConfigModalProps {
|
||||
@ -80,10 +83,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
defaultValues: {
|
||||
applicationId: undefined,
|
||||
externalSystemId: undefined,
|
||||
viewId: undefined,
|
||||
jobId: undefined,
|
||||
envs: [{key: '', value: ''}],
|
||||
jenkinsViewId: undefined,
|
||||
jenkinsJobId: undefined,
|
||||
script: '',
|
||||
envs: [],
|
||||
}
|
||||
});
|
||||
|
||||
@ -108,8 +111,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
// 当选择外部系统时获取 View 列表
|
||||
const handleExternalSystemChange = async (externalSystemId: number) => {
|
||||
form.setValue('externalSystemId', externalSystemId);
|
||||
form.setValue('viewId', undefined);
|
||||
form.setValue('jobId', undefined);
|
||||
form.setValue('jenkinsViewId', undefined);
|
||||
form.setValue('jenkinsJobId', undefined);
|
||||
setJenkinsJobs([]);
|
||||
|
||||
if (externalSystemId) {
|
||||
@ -122,8 +125,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
|
||||
// 当选择 View 时获取 Job 列表
|
||||
const handleViewChange = async (viewId: number) => {
|
||||
form.setValue('viewId', viewId);
|
||||
form.setValue('jobId', undefined);
|
||||
form.setValue('jenkinsViewId', viewId);
|
||||
form.setValue('jenkinsJobId', undefined);
|
||||
|
||||
const externalSystemId = form.getValues('externalSystemId');
|
||||
if (externalSystemId && viewId) {
|
||||
@ -144,39 +147,42 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={(open) => !open && onCancel()}>
|
||||
<DialogContent className="max-w-[800px] h-[90vh] flex flex-col">
|
||||
<DialogHeader className="flex-shrink-0">
|
||||
<DialogContent className="max-w-[800px] h-[90vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>部署配置</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden">
|
||||
<ScrollArea className="flex-1 -mr-6 pr-6">
|
||||
<div className="space-y-6">
|
||||
<form onSubmit={form.handleSubmit(handleSubmit)}>
|
||||
<ScrollArea className="h-[calc(90vh-8rem)]">
|
||||
<div className="space-y-6 pr-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="applicationId"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>应用选择</FormLabel>
|
||||
<FormLabel>应用名称</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) => field.onChange(Number(value))}
|
||||
onValueChange={(value) => {
|
||||
field.onChange(Number(value));
|
||||
// handleApplicationChange(Number(value));
|
||||
}}
|
||||
value={field.value?.toString()}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择应用" />
|
||||
<SelectValue placeholder="选择应用"/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{applications.map((app) => (
|
||||
<SelectItem key={app.id} value={String(app.id)}>
|
||||
<SelectItem key={app.id} value={app.id.toString()}>
|
||||
{app.appName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
@ -187,93 +193,94 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
<FormItem>
|
||||
<FormLabel>三方系统</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) => handleExternalSystemChange(Number(value))}
|
||||
onValueChange={(value) => {
|
||||
field.onChange(Number(value));
|
||||
handleExternalSystemChange(Number(value));
|
||||
}}
|
||||
value={field.value?.toString()}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择三方系统" />
|
||||
<SelectValue placeholder="选择三方系统"/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{externalSystems.map((system) => (
|
||||
<SelectItem key={system.id} value={String(system.id)}>
|
||||
<SelectItem key={system.id} value={system.id.toString()}>
|
||||
{system.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="viewId"
|
||||
name="jenkinsViewId"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Jenkins视图选择</FormLabel>
|
||||
<FormLabel>Jenkins视图配置</FormLabel>
|
||||
<Select
|
||||
disabled={!form.getValues('externalSystemId')}
|
||||
onValueChange={(value) => handleViewChange(Number(value))}
|
||||
onValueChange={(value) => {
|
||||
field.onChange(Number(value));
|
||||
handleViewChange(Number(value));
|
||||
}}
|
||||
value={field.value?.toString()}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择 View" />
|
||||
<SelectValue placeholder="选择视图"/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{jenkinsViews.map((view) => (
|
||||
<SelectItem key={view.id} value={String(view.id)}>
|
||||
<SelectItem key={view.id} value={view.id.toString()}>
|
||||
{view.viewName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="jobId"
|
||||
name="jenkinsJobId"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Jenkins任务选择</FormLabel>
|
||||
<FormLabel>Jenkins任务配置</FormLabel>
|
||||
<Select
|
||||
disabled={!form.getValues('viewId')}
|
||||
onValueChange={(value) => field.onChange(Number(value))}
|
||||
value={field.value?.toString()}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择 Job" />
|
||||
<SelectValue placeholder="选择任务"/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{jenkinsJobs.map((job) => (
|
||||
<SelectItem key={job.id} value={String(job.id)}>
|
||||
<SelectItem key={job.id} value={job.id.toString()}>
|
||||
{job.jobName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
<Separator className="my-4"/>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between bg-background z-10 py-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<FormLabel>环境变量</FormLabel>
|
||||
<Button
|
||||
type="button"
|
||||
@ -281,7 +288,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
size="sm"
|
||||
onClick={() => append({key: '', value: ''})}
|
||||
>
|
||||
<PlusCircle className="h-4 w-4 mr-2" />
|
||||
<PlusCircle className="h-4 w-4 mr-2"/>
|
||||
添加变量
|
||||
</Button>
|
||||
</div>
|
||||
@ -297,7 +304,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
<FormControl>
|
||||
<Input placeholder="变量名" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
@ -309,7 +316,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
<FormControl>
|
||||
<Input placeholder="变量值" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
@ -320,7 +327,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
onClick={() => remove(index)}
|
||||
className="mt-2"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className="h-4 w-4"/>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
@ -328,9 +335,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
<Separator className="my-4"/>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="script"
|
||||
@ -380,15 +387,13 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div className="flex-shrink-0 border-t bg-background mt-6">
|
||||
<DialogFooter className="pt-4">
|
||||
<div className="flex justify-end gap-2 mt-6">
|
||||
<Button variant="outline" onClick={onCancel}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={form.handleSubmit(handleSubmit)}>
|
||||
<Button type="submit">
|
||||
确定
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user