This commit is contained in:
dengqichen 2025-01-20 16:41:40 +08:00
parent b967af0f2a
commit 1b0cb4452e
2 changed files with 105 additions and 34 deletions

View File

@ -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<string, string>;
script?: string;
};
workflowDefinitionId?: number;
application?: {
id: number;
language: string;
};
};
}
const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCancel, onSuccess, environmentId, buildType}) => {
const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
open,
onCancel,
onSuccess,
environmentId,
buildType,
initialValues
}) => {
const [applications, setApplications] = useState<Application[]>([]);
const [externalSystems, setExternalSystems] = useState<ExternalSystem[]>([]);
const [jenkinsViews, setJenkinsViews] = useState<JenkinsView[]>([]);
@ -127,16 +149,63 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({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<DeploymentConfigModalProps> = ({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<DeploymentConfigModalProps> = ({open, onCa
}, {} as Record<string, string>);
const params = {
id: initialValues?.id,
environmentId,
applicationId: values.applicationId,
languageType: currentApp?.language,
@ -218,12 +282,19 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({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<DeploymentConfigModalProps> = ({open, onCa
<Select
onValueChange={(value) => {
const numValue = Number(value);
handleViewChange(numValue);
handleJenkinsViewChange(numValue);
}}
value={field.value?.toString()}
>

View File

@ -410,9 +410,9 @@ const DeploymentConfigList: React.FC = () => {
open={modalVisible}
onCancel={handleModalClose}
onSuccess={handleSuccess}
initialValues={currentConfig}
environmentId={selectedEnvId!}
buildType={environments.find(env => env.id === selectedEnvId)?.buildType || ''}
initialValues={currentConfig}
/>
)}