diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx index 45d962de..0cddea02 100644 --- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx +++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx @@ -31,7 +31,7 @@ import { import {PlusCircle, X, Maximize2} from 'lucide-react'; import {useForm, useFieldArray} from "react-hook-form"; import {getApplicationList} from '../../../Application/List/service'; -import {getExternalSystemList, getJenkinsViewList, getJenkinsJobList, createDeploymentConfig} from '../service'; +import {getExternalSystemList, getJenkinsViewList, getJenkinsJobList, createDeploymentConfig, updateDeploymentConfig} from '../service'; import {getPublishedDefinitions} from '@/pages/Workflow/Definition/service'; import type {ExternalSystem} from '@/pages/Deploy/External/types'; import { Editor } from "@/components/Editor"; @@ -95,9 +95,31 @@ interface DeploymentConfigModalProps { onSuccess?: () => void; environmentId: number; buildType: string; + initialValues?: { + id?: number; + buildVariables?: { + externalSystemId?: number; + viewId?: number; + jobId?: number; + envs?: Record; + script?: string; + }; + workflowDefinitionId?: number; + application?: { + id: number; + language: string; + }; + }; } -const DeploymentConfigModal: React.FC = ({open, onCancel, onSuccess, environmentId, buildType}) => { +const DeploymentConfigModal: React.FC = ({ + open, + onCancel, + onSuccess, + environmentId, + buildType, + initialValues +}) => { const [applications, setApplications] = useState([]); const [externalSystems, setExternalSystems] = useState([]); const [jenkinsViews, setJenkinsViews] = useState([]); @@ -127,16 +149,63 @@ const DeploymentConfigModal: React.FC = ({open, onCa useEffect(() => { if (open) { - // 获取应用列表 + // 如果是编辑模式,设置初始值 + if (initialValues) { + // 设置当前应用 + if (initialValues.application) { + setCurrentApp({ + id: initialValues.application.id, + appName: '', // 这个会在应用列表加载后更新 + language: initialValues.application.language + }); + } + + // 将环境变量对象转换为数组形式 + const envArray = initialValues.buildVariables?.envs + ? Object.entries(initialValues.buildVariables.envs).map(([key, value]) => ({ + key, + value + })) + : [{ key: '', value: '' }]; + + // 重置表单值 + form.reset({ + applicationId: initialValues.application?.id, + workflowId: initialValues.workflowDefinitionId, + externalSystemId: initialValues.buildVariables?.externalSystemId, + jenkinsViewId: initialValues.buildVariables?.viewId, + jenkinsJobId: initialValues.buildVariables?.jobId, + script: initialValues.buildVariables?.script || '', + envs: envArray + }); + + // 加载Jenkins相关数据 + if (initialValues.buildVariables?.externalSystemId) { + handleExternalSystemChange(initialValues.buildVariables.externalSystemId); + } + } else { + // 新建模式,重置为默认值 + form.reset({ + applicationId: undefined, + externalSystemId: undefined, + jenkinsViewId: undefined, + jenkinsJobId: undefined, + workflowId: undefined, + script: '', + envs: [{ key: '', value: '' }] + }); + } + + // 加载基础数据 getApplicationList().then(data => { setApplications(data); }); - // 获取外部系统列表 getExternalSystemList('JENKINS').then(data => { setExternalSystems(data); }); + fetchWorkflows(); } - }, [open]); + }, [open, initialValues]); // 获取工作流列表 const fetchWorkflows = async () => { @@ -148,36 +217,30 @@ const DeploymentConfigModal: React.FC = ({open, onCa } }; - useEffect(() => { - fetchWorkflows(); - }, []); - // 当选择外部系统时获取 View 列表 const handleExternalSystemChange = async (externalSystemId: number) => { form.setValue('externalSystemId', externalSystemId); - form.setValue('jenkinsViewId', undefined); - form.setValue('jenkinsJobId', undefined); - setJenkinsJobs([]); - - if (externalSystemId) { - const views = await getJenkinsViewList(externalSystemId); - setJenkinsViews(views); - } else { - setJenkinsViews([]); + try { + const data = await getJenkinsViewList(externalSystemId); + setJenkinsViews(data); + // 如果是编辑模式且有视图ID,加载任务列表 + const currentViewId = form.getValues('jenkinsViewId'); + if (currentViewId) { + handleJenkinsViewChange(currentViewId); + } + } catch (error) { + console.error('Failed to get Jenkins views:', error); } }; - // 当选择 View 时获取 Job 列表 - const handleViewChange = async (viewId: number) => { + // 当选择视图时获取 Job 列表 + const handleJenkinsViewChange = async (viewId: number) => { form.setValue('jenkinsViewId', viewId); - form.setValue('jenkinsJobId', undefined); - - const externalSystemId = form.getValues('externalSystemId'); - if (externalSystemId && viewId) { - const jobs = await getJenkinsJobList(externalSystemId, viewId); - setJenkinsJobs(jobs); - } else { - setJenkinsJobs([]); + try { + const data = await getJenkinsJobList(form.getValues('externalSystemId'), viewId); + setJenkinsJobs(data); + } catch (error) { + console.error('Failed to get Jenkins jobs:', error); } }; @@ -204,6 +267,7 @@ const DeploymentConfigModal: React.FC = ({open, onCa }, {} as Record); const params = { + id: initialValues?.id, environmentId, applicationId: values.applicationId, languageType: currentApp?.language, @@ -218,12 +282,19 @@ const DeploymentConfigModal: React.FC = ({open, onCa } }; - await createDeploymentConfig(params); - message.success('保存成功'); + if (initialValues?.id) { + // 编辑模式 + await updateDeploymentConfig(params); + message.success('更新成功'); + } else { + // 新增模式 + await createDeploymentConfig(params); + message.success('创建成功'); + } onSuccess?.(); } catch (error) { - console.error('Failed to create deployment config:', error); - message.error('保存失败'); + console.error('Failed to save deployment config:', error); + message.error(initialValues?.id ? '更新失败' : '创建失败'); } }; @@ -337,7 +408,7 @@ const DeploymentConfigModal: React.FC = ({open, onCa