diff --git a/frontend/src/pages/Workflow/Definition/Designer/components/NodeConfig/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/components/NodeConfig/index.tsx index 976aaa58..5394a4c0 100644 --- a/frontend/src/pages/Workflow/Definition/Designer/components/NodeConfig/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Designer/components/NodeConfig/index.tsx @@ -1,35 +1,90 @@ -import React, { useMemo } from 'react'; -import { Form, Input, Select, InputNumber, Switch } from 'antd'; -import { NodeType, JsonSchema, JsonSchemaProperty } from '../../service'; +import React, { useMemo, useEffect } from 'react'; +import { Form, Input, Select, InputNumber, Switch, Divider } from 'antd'; +import { NodeType } from '../../../../types'; interface NodeConfigProps { nodeType: NodeType; form: any; + onValuesChange?: (changedValues: any, allValues: any) => void; } -const NodeConfig: React.FC = ({ nodeType, form }) => { - // 解析配置模式 - const schema = useMemo(() => { +interface FormFields { + [key: string]: any; +} + +const NodeConfig: React.FC = ({ nodeType, form, onValuesChange }) => { + // 解析节点配置模式 + const nodeSchema = useMemo(() => { try { - return JSON.parse(nodeType.configSchema) as JsonSchema; + return JSON.parse(nodeType.configSchema); } catch (error) { - console.error('解析配置模式失败:', error); + console.error('解析节点配置模式失败:', error); return null; } }, [nodeType.configSchema]); - // 解析默认配置 - const defaultConfig = useMemo(() => { + // 解析节点默认配置 + const nodeDefaultConfig = useMemo(() => { try { return nodeType.defaultConfig ? JSON.parse(nodeType.defaultConfig) : {}; } catch (error) { - console.error('解析默认配置失败:', error); + console.error('解析节点默认配置失败:', error); return {}; } }, [nodeType.defaultConfig]); + // 当前选中的执行器 + const selectedExecutor = Form.useWatch('executor', form); + + // 获取当前执行器的配置模式 + const executorSchema = useMemo(() => { + if (!selectedExecutor || !nodeType.executors) return null; + const executor = nodeType.executors.find(e => e.code === selectedExecutor); + if (!executor) return null; + try { + return JSON.parse(executor.configSchema); + } catch (error) { + console.error('解析执行器配置模式失败:', error); + return null; + } + }, [selectedExecutor, nodeType.executors]); + + // 获取当前执行器的默认配置 + const executorDefaultConfig = useMemo(() => { + if (!selectedExecutor || !nodeType.executors) return {}; + const executor = nodeType.executors.find(e => e.code === selectedExecutor); + if (!executor || !executor.defaultConfig) return {}; + try { + return JSON.parse(executor.defaultConfig); + } catch (error) { + console.error('解析执行器默认配置失败:', error); + return {}; + } + }, [selectedExecutor, nodeType.executors]); + + // 当执行器变更时,重置执行器相关的配置 + useEffect(() => { + if (selectedExecutor) { + const fields = form.getFieldsValue() as FormFields; + const executorFields: FormFields = {}; + + // 清除旧的执行器配置 + Object.keys(fields).forEach(key => { + if (key !== 'executor' && key !== 'name' && key !== 'description') { + executorFields[key] = undefined; + } + }); + + // 设置新的执行器默认配置 + form.setFieldsValue({ + ...executorFields, + ...executorDefaultConfig + }); + } + }, [selectedExecutor, form, executorDefaultConfig]); + // 根据属性类型渲染表单控件 - const renderFormItem = (key: string, property: JsonSchemaProperty) => { + const renderFormItem = (key: string, property: any, required: boolean = false) => { const { type, title, @@ -44,11 +99,10 @@ const NodeConfig: React.FC = ({ nodeType, form }) => { format, } = property; - let formItem; const rules = []; // 添加必填规则 - if (schema?.required?.includes(key)) { + if (required) { rules.push({ required: true, message: `请输入${title}` }); } @@ -73,6 +127,7 @@ const NodeConfig: React.FC = ({ nodeType, form }) => { rules.push({ pattern: new RegExp(pattern), message: `格式不正确` }); } + let formItem; switch (type) { case 'string': if (enumValues) { @@ -80,7 +135,7 @@ const NodeConfig: React.FC = ({ nodeType, form }) => {