From a8c1d56e055e84df706635787ce54913b3705af3 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 20 Jan 2025 13:45:58 +0800
Subject: [PATCH] 1

---
 .../List/components/DeploymentConfigModal.tsx | 321 ++++++++++++++----
 .../pages/Deploy/Deployment/List/service.ts   |  20 +-
 2 files changed, 275 insertions(+), 66 deletions(-)

diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
index 48fe3a34..b53f798b 100644
--- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
+++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
@@ -2,11 +2,15 @@ import React, {useEffect, useState} from 'react';
 import {
     Dialog,
     DialogContent,
+    DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogFooter,
 } from "@/components/ui/dialog";
-import {Button} from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
     Form,
     FormControl,
@@ -22,9 +26,10 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select";
-import {useForm} from "react-hook-form";
+import {PlusCircle, X} from 'lucide-react';
+import {useForm, useFieldArray} from "react-hook-form";
 import {getApplicationList} from '../../../Application/List/service';
-import {getExternalSystemList} from '../service';
+import {getExternalSystemList, getJenkinsViewList, getJenkinsJobList} from '../service';
 import type {ExternalSystem} from '@/pages/Deploy/External/types';
 
 interface Application {
@@ -32,6 +37,29 @@ interface Application {
     appName: string;
 }
 
+interface JenkinsView {
+    id: number;
+    viewName: string;
+}
+
+interface JenkinsJob {
+    id: number;
+    jobName: string;
+}
+
+interface EnvVariable {
+    key: string;
+    value: string;
+}
+
+interface FormValues {
+    applicationId?: number;
+    externalSystemId?: number;
+    viewId?: number;
+    jobId?: number;
+    envs: EnvVariable[];
+}
+
 interface DeploymentConfigModalProps {
     open: boolean;
     onCancel: () => void;
@@ -41,13 +69,24 @@ interface DeploymentConfigModalProps {
 const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCancel, onSuccess}) => {
     const [applications, setApplications] = useState<Application[]>([]);
     const [externalSystems, setExternalSystems] = useState<ExternalSystem[]>([]);
-    const form = useForm({
+    const [jenkinsViews, setJenkinsViews] = useState<JenkinsView[]>([]);
+    const [jenkinsJobs, setJenkinsJobs] = useState<JenkinsJob[]>([]);
+    
+    const form = useForm<FormValues>({
         defaultValues: {
             applicationId: undefined,
             externalSystemId: undefined,
+            viewId: undefined,
+            jobId: undefined,
+            envs: [{key: '', value: ''}],
         }
     });
 
+    const {fields, append, remove} = useFieldArray({
+        control: form.control,
+        name: "envs"
+    });
+
     useEffect(() => {
         if (open) {
             // 获取应用列表
@@ -61,78 +100,230 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
         }
     }, [open]);
 
+    // 当选择外部系统时获取 View 列表
+    const handleExternalSystemChange = async (externalSystemId: number) => {
+        form.setValue('externalSystemId', externalSystemId);
+        form.setValue('viewId', undefined);
+        form.setValue('jobId', undefined);
+        setJenkinsJobs([]);
+        
+        if (externalSystemId) {
+            const views = await getJenkinsViewList(externalSystemId);
+            setJenkinsViews(views);
+        } else {
+            setJenkinsViews([]);
+        }
+    };
+
+    // 当选择 View 时获取 Job 列表
+    const handleViewChange = async (viewId: number) => {
+        form.setValue('viewId', viewId);
+        form.setValue('jobId', undefined);
+        
+        const externalSystemId = form.getValues('externalSystemId');
+        if (externalSystemId && viewId) {
+            const jobs = await getJenkinsJobList(externalSystemId, viewId);
+            setJenkinsJobs(jobs);
+        } else {
+            setJenkinsJobs([]);
+        }
+    };
+
     const handleSubmit = form.handleSubmit((values) => {
+        // 过滤掉空的环境变量
+        values.envs = values.envs.filter(env => env.key || env.value);
         console.log('表单提交的值：', values);
         onSuccess?.();
     });
 
     return (
         <Dialog open={open} onOpenChange={(open) => !open && onCancel()}>
-            <DialogContent className="sm:max-w-[600px]">
+            <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-hidden flex flex-col">
                 <DialogHeader>
                     <DialogTitle>部署配置</DialogTitle>
                 </DialogHeader>
                 <Form {...form}>
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                        <div className="grid grid-cols-2 gap-4">
-                            <FormField
-                                control={form.control}
-                                name="applicationId"
-                                render={({field}) => (
-                                    <FormItem>
-                                        <FormLabel>应用选择</FormLabel>
-                                        <Select
-                                            onValueChange={(value) => field.onChange(Number(value))}
-                                            value={field.value?.toString()}
-                                        >
-                                            <FormControl>
-                                                <SelectTrigger>
-                                                    <SelectValue placeholder="请选择应用" />
-                                                </SelectTrigger>
-                                            </FormControl>
-                                            <SelectContent>
-                                                {applications.map((app) => (
-                                                    <SelectItem key={app.id} value={String(app.id)}>
-                                                        {app.appName}
-                                                    </SelectItem>
-                                                ))}
-                                            </SelectContent>
-                                        </Select>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
-                            <FormField
-                                control={form.control}
-                                name="externalSystemId"
-                                render={({field}) => (
-                                    <FormItem>
-                                        <FormLabel>三方系统</FormLabel>
-                                        <Select
-                                            onValueChange={(value) => field.onChange(Number(value))}
-                                            value={field.value?.toString()}
-                                        >
-                                            <FormControl>
-                                                <SelectTrigger>
-                                                    <SelectValue placeholder="请选择三方系统" />
-                                                </SelectTrigger>
-                                            </FormControl>
-                                            <SelectContent>
-                                                {externalSystems.map((system) => (
-                                                    <SelectItem key={system.id} value={String(system.id)}>
-                                                        {system.name}
-                                                    </SelectItem>
-                                                ))}
-                                            </SelectContent>
-                                        </Select>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
-                        </div>
-                    </form>
+                    <ScrollArea className="flex-1">
+                        <form onSubmit={handleSubmit} className="space-y-4 pr-6">
+                            <div className="grid grid-cols-2 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="applicationId"
+                                    render={({field}) => (
+                                        <FormItem>
+                                            <FormLabel>应用选择</FormLabel>
+                                            <Select
+                                                onValueChange={(value) => field.onChange(Number(value))}
+                                                value={field.value?.toString()}
+                                            >
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="请选择应用" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {applications.map((app) => (
+                                                        <SelectItem key={app.id} value={String(app.id)}>
+                                                            {app.appName}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="externalSystemId"
+                                    render={({field}) => (
+                                        <FormItem>
+                                            <FormLabel>三方系统</FormLabel>
+                                            <Select
+                                                onValueChange={(value) => handleExternalSystemChange(Number(value))}
+                                                value={field.value?.toString()}
+                                            >
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="请选择三方系统" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {externalSystems.map((system) => (
+                                                        <SelectItem key={system.id} value={String(system.id)}>
+                                                            {system.name}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+
+                            <Separator className="my-4" />
+
+                            <div className="grid grid-cols-2 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="viewId"
+                                    render={({field}) => (
+                                        <FormItem>
+                                            <FormLabel>Jenkins视图选择</FormLabel>
+                                            <Select
+                                                disabled={!form.getValues('externalSystemId')}
+                                                onValueChange={(value) => handleViewChange(Number(value))}
+                                                value={field.value?.toString()}
+                                            >
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="请选择 View" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {jenkinsViews.map((view) => (
+                                                        <SelectItem key={view.id} value={String(view.id)}>
+                                                            {view.viewName}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="jobId"
+                                    render={({field}) => (
+                                        <FormItem>
+                                            <FormLabel>Jenkins任务选择</FormLabel>
+                                            <Select
+                                                disabled={!form.getValues('viewId')}
+                                                onValueChange={(value) => field.onChange(Number(value))}
+                                                value={field.value?.toString()}
+                                            >
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="请选择 Job" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {jenkinsJobs.map((job) => (
+                                                        <SelectItem key={job.id} value={String(job.id)}>
+                                                            {job.jobName}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+
+                            <Separator className="my-4" />
+
+                            <div className="space-y-4">
+                                <div className="flex items-center justify-between bg-background z-10 py-2">
+                                    <FormLabel>环境变量</FormLabel>
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => append({key: '', value: ''})}
+                                    >
+                                        <PlusCircle className="h-4 w-4 mr-2" />
+                                        添加变量
+                                    </Button>
+                                </div>
+                                <ScrollArea className="h-[200px]">
+                                    <div className="space-y-4 pr-2">
+                                        {fields.map((field, index) => (
+                                            <div key={field.id} className="flex gap-4 items-start">
+                                                <FormField
+                                                    control={form.control}
+                                                    name={`envs.${index}.key`}
+                                                    render={({field}) => (
+                                                        <FormItem className="flex-1">
+                                                            <FormControl>
+                                                                <Input placeholder="变量名" {...field} />
+                                                            </FormControl>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                                <FormField
+                                                    control={form.control}
+                                                    name={`envs.${index}.value`}
+                                                    render={({field}) => (
+                                                        <FormItem className="flex-1">
+                                                            <FormControl>
+                                                                <Input placeholder="变量值" {...field} />
+                                                            </FormControl>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                                <Button
+                                                    type="button"
+                                                    variant="ghost"
+                                                    size="icon"
+                                                    onClick={() => remove(index)}
+                                                    className="mt-2"
+                                                >
+                                                    <X className="h-4 w-4" />
+                                                </Button>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </ScrollArea>
+                            </div>
+                        </form>
+                    </ScrollArea>
                 </Form>
-                <DialogFooter>
+                <DialogFooter className="flex-shrink-0">
                     <Button variant="outline" onClick={onCancel}>
                         取消
                     </Button>
diff --git a/frontend/src/pages/Deploy/Deployment/List/service.ts b/frontend/src/pages/Deploy/Deployment/List/service.ts
index b6139d20..6145401a 100644
--- a/frontend/src/pages/Deploy/Deployment/List/service.ts
+++ b/frontend/src/pages/Deploy/Deployment/List/service.ts
@@ -3,6 +3,16 @@ import type {DeploymentConfig, CreateDeploymentConfigRequest, UpdateDeploymentCo
 import type {Page} from '@/types/base';
 import type {ExternalSystem} from '@/pages/Deploy/External/types';
 
+interface JenkinsView {
+    id: number;
+    name: string;
+}
+
+interface JenkinsJob {
+    id: number;
+    name: string;
+}
+
 const BASE_URL = '/api/v1/deploy-app-config';
 
 // 获取部署配置分页列表
@@ -35,4 +45,12 @@ export const getDeployConfigTemplates = () =>
 
 // 获取外部系统列表
 export const getExternalSystemList = (type: string) =>
-    request.get<ExternalSystem[]>('/api/v1/external-system/list', {params: {type}});
\ No newline at end of file
+    request.get<ExternalSystem[]>('/api/v1/external-system/list', {params: {type}});
+
+// 获取 Jenkins View 列表
+export const getJenkinsViewList = (externalSystemId: number) =>
+    request.get<JenkinsView[]>('/api/v1/jenkins-view/list', {params: {externalSystemId}});
+
+// 获取 Jenkins Job 列表
+export const getJenkinsJobList = (externalSystemId: number, viewId: number) =>
+    request.get<JenkinsJob[]>('/api/v1/jenkins-job/list', {params: {externalSystemId, viewId}});
\ No newline at end of file