1

frontend/src/pages/Workflow/Definition/Designer/components/NodeConfig/index.tsx

@@ -1,35 +1,90 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect } from 'react';
-import { Form, Input, Select, InputNumber, Switch } from 'antd';
+import { Form, Input, Select, InputNumber, Switch, Divider } from 'antd';
-import { NodeType, JsonSchema, JsonSchemaProperty } from '../../service';
+import { NodeType } from '../../../../types';
 
 interface NodeConfigProps {
     nodeType: NodeType;
     form: any;
+    onValuesChange?: (changedValues: any, allValues: any) => void;
 }
 
-const NodeConfig: React.FC<NodeConfigProps> = ({ nodeType, form }) => {
+interface FormFields {
-    // 解析配置模式
+    [key: string]: any;
-    const schema = useMemo(() => {
+}
+
+const NodeConfig: React.FC<NodeConfigProps> = ({ 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<NodeConfigProps> = ({ 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<NodeConfigProps> = ({ 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<NodeConfigProps> = ({ nodeType, form }) => {
                         <Select
                             style={{ width: '100%' }}
                             placeholder={`请选择${title}`}
-                            options={enumValues.map((value, index) => ({
+                            options={enumValues.map((value: string, index: number) => ({
                                 label: enumNames?.[index] || value,
                                 value,
                             }))}
@@ -116,25 +171,50 @@ const NodeConfig: React.FC<NodeConfigProps> = ({ nodeType, form }) => {
                 name={key}
                 tooltip={description}
                 rules={rules}
-                initialValue={defaultConfig[key] ?? property.default}
             >
                 {formItem}
             </Form.Item>
         );
     };
 
-    // 渲染表单项
+    // 渲染节点基本配置
-    const renderFormItems = () => {
+    const renderNodeConfig = () => {
-        if (!schema?.properties) return null;
+        if (!nodeSchema?.properties) return null;
+        return Object.entries(nodeSchema.properties).map(([key, property]) =>
+            renderFormItem(key, property, nodeSchema.required?.includes(key))
+        );
+    };
 
-        return Object.entries(schema.properties).map(([key, property]) =>
+    // 渲染执行器配置
-            renderFormItem(key, property)
+    const renderExecutorConfig = () => {
+        if (!executorSchema?.properties) return null;
+        return Object.entries(executorSchema.properties).map(([key, property]) =>
+            renderFormItem(key, property, executorSchema.required?.includes(key))
         );
     };
 
     return (
         <div className="node-config">
-            {renderFormItems()}
+            <Form
+                form={form}
+                layout="vertical"
+                onValuesChange={onValuesChange}
+                initialValues={{
+                    ...nodeDefaultConfig,
+                    ...executorDefaultConfig
+                }}
+            >
+                {/* 节点基本配置 */}
+                {renderNodeConfig()}
+
+                {/* 执行器配置 */}
+                {selectedExecutor && executorSchema && (
+                    <>
+                        <Divider>执行器配置</Divider>
+                        {renderExecutorConfig()}
+                    </>
+                )}
+            </Form>
         </div>
     );
 };