diff --git a/src/api/componentDeployEnv.ts b/src/api/componentDeployEnv.ts index ae0273e..8a7e239 100644 --- a/src/api/componentDeployEnv.ts +++ b/src/api/componentDeployEnv.ts @@ -21,4 +21,9 @@ export function deleteEnvConfig(id: string) { // 下载环境配置文件 export function downloadEnvConfigFile(id: string) { return axios.post(`${urlPrefix}/componentDeployEnv/download`, { id }); +} + +// 环境测试 +export function testEnv(id: string) { + return axios.get(`${urlPrefix}/componentDeployEnv/check?id=${id}`); } \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentEnv/addModal.tsx b/src/pages/componentDevelopment/componentEnv/addModal.tsx index 6bd4bb8..c060e2c 100644 --- a/src/pages/componentDevelopment/componentEnv/addModal.tsx +++ b/src/pages/componentDevelopment/componentEnv/addModal.tsx @@ -18,20 +18,28 @@ interface AddModalProps { visible: boolean; envType: EnvTypeOption[]; setVisible: (visible: boolean) => void; - onOk?: () => void; + onOk?: (value) => void; + record?: any; // 添加record属性用于接收外部传入的数据 } -const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => { - const [currentStep, setCurrentStep] = useState(2); +const AddModal = ({ visible, envType, setVisible, onOk, record }: AddModalProps) => { + const [currentStep, setCurrentStep] = useState(1); const [envTypeOptions, setEnvTypeOptions] = useState([]); const [confirmLoading, setConfirmLoading] = useState(false); - const [currentEnvData,setCurrentEnvData] = useState({}); + const [currentEnvData, setCurrentEnvData] = useState({}); const formRef = useRef(null); useEffect(() => { if (envType.length > 0) setEnvTypeOptions(envType); }, [envType]); + // 当组件接收到record参数时,初始化数据并跳转到第二步 + useEffect(() => { + if (record && Object.keys(record).length > 0) setCurrentStep(2); + else setCurrentStep(1); + setCurrentEnvData(record); + }, [record]); + const handleOk = () => { // 当前步骤为1时,触发表单提交 if (currentStep === 1) { @@ -39,8 +47,7 @@ const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => { return; } - // 其他步骤的确认逻辑可以在这里添加 - console.log('ok'); + setVisible(false); }; const handleCancel = () => { @@ -50,8 +57,8 @@ const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => { const handleStepOneSuccess = (value) => { setCurrentStep(2); - setCurrentEnvData(value) - onOk && onOk(); + setCurrentEnvData(value); + onOk && onOk(value); }; // 返回第一步的处理函数 @@ -93,6 +100,7 @@ const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => { {currentStep === 1 && ( { + const [testLoading, setTestLoading] = useState(false); + // 模拟下载配置证书文件 const handleDownloadConfig = () => { // 这里可以添加实际的下载逻辑 - console.log('下载配置证书文件'); downloadEnvConfigFile(currentEnvData.id); }; @@ -17,9 +18,11 @@ const EnvExtra = ({ currentEnvData }) => { }; // 模拟点击测试环境可用性 - const handleTestAvailability = () => { - console.log('点击测试环境可用性'); - // 这里可以添加实际的环境可用性测试逻辑 + const handleTestAvailability = async () => { + setTestLoading(true); + const res = await testEnv(currentEnvData.id); + console.log('res:', res); + setTestLoading(false); }; return ( @@ -54,6 +57,7 @@ const EnvExtra = ({ currentEnvData }) => { type="outline" onClick={handleTestAvailability} style={{ marginLeft: 16 }} + loading={testLoading} > 点击测试 diff --git a/src/pages/componentDevelopment/componentEnv/formEditor.tsx b/src/pages/componentDevelopment/componentEnv/formEditor.tsx index 4d7c5aa..cb9162a 100644 --- a/src/pages/componentDevelopment/componentEnv/formEditor.tsx +++ b/src/pages/componentDevelopment/componentEnv/formEditor.tsx @@ -1,4 +1,4 @@ -import React, { useState, forwardRef, useImperativeHandle } from 'react'; +import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react'; import { Form, Grid, Input, Message, Select } from '@arco-design/web-react'; import { submitEnvConfig } from '@/api/componentDeployEnv'; @@ -8,6 +8,7 @@ const TextArea = Input.TextArea; // 定义组件 Props 类型 interface FormEditorProps { + record: any; envTypeOptions: { id: string | number; classifyType: string; classifyName: string, dictKey: string }[]; setVisible: (visible: boolean) => void; onOk?: () => void; @@ -21,6 +22,7 @@ export interface FormEditorInstance { } const FormEditor = forwardRef(({ + record, envTypeOptions, setConfirmLoading, onSuccess @@ -68,6 +70,11 @@ const FormEditor = forwardRef(({ } }; + useEffect(() => { + if (record) form.setFieldsValue(record); + else form.resetFields(); + }, [record]); + return (
diff --git a/src/pages/componentDevelopment/componentEnv/index.tsx b/src/pages/componentDevelopment/componentEnv/index.tsx index 67a3d9d..53b1c60 100644 --- a/src/pages/componentDevelopment/componentEnv/index.tsx +++ b/src/pages/componentDevelopment/componentEnv/index.tsx @@ -4,7 +4,7 @@ import { Button, Input, Space, Select, Divider, Table, TableColumnProps, Message import { getComponentClassify } from '@/api/componentClassify'; import { IconSearch } from '@arco-design/web-react/icon'; import AddModal from './addModal'; -import { getEnvConfigList, deleteEnvConfig } from '@/api/componentDeployEnv'; +import { getEnvConfigList, deleteEnvConfig, testEnv } from '@/api/componentDeployEnv'; const Option = Select.Option; @@ -13,6 +13,7 @@ const ComponentEnv = () => { const [architectureType, setArchitectureType] = useState(['x86_64', 'aarch64']); // 结构类型 const [visible, setVisible] = useState(false); const [data, setData] = useState([]); + const [editingRecord, setEditingRecord] = useState(null); const columns: TableColumnProps[] = [ { @@ -58,17 +59,24 @@ const ComponentEnv = () => { ]; // 环境测试处理函数 - const handleTestEnv = (record: any) => { + const handleTestEnv = async (record: any) => { Message.info(`正在测试环境 ${record.name}...`); - // 这里可以添加实际的环境测试逻辑 - console.log('测试环境:', record); + const res: any = await testEnv(record.id); + if (res.code === 200) { + Message.success(`环境 ${record.name} 测试成功`); + } + else { + Message.error(`环境 ${record.name} 测试失败: ${res.message}`); + } }; // 环境配置处理函数 const handleConfigEnv = (record: any) => { - Message.info(`配置环境 ${record.name}`); - // 这里可以添加环境配置逻辑,比如打开配置模态框 - console.log('配置环境:', record); + // 设置编辑记录 + setEditingRecord(record); + + // 打开模态框 + setVisible(true); }; // 删除环境处理函数 @@ -78,7 +86,7 @@ const ComponentEnv = () => { content: (

删除环境后,组件实例将无法继续部署到该环境下。

-

确认删除环境 {record.name} IP: {record.ip}?

+

确认删除环境 {record.name}?

请输入环境名称 {record.name} 以确认删除:

@@ -89,7 +97,6 @@ const ComponentEnv = () => { const confirmInput = document.getElementById('confirm-env-name') as HTMLInputElement; if (!confirmInput || confirmInput.value !== record.name) { Message.error('环境名称输入不匹配,请重新输入'); - // 阻止关闭确认框 return Promise.reject(); } @@ -169,7 +176,10 @@ const ComponentEnv = () => { @@ -183,14 +193,14 @@ const ComponentEnv = () => { visible={visible} envType={envType} setVisible={setVisible} - onOk={() => { - console.log('Add component env'); + onOk={(value) => { + setEditingRecord(value); getEnvList(); // 新增完成后刷新列表 }} + record={editingRecord} /> ); }; export default ComponentEnv; -