1
This commit is contained in:
dengqichen
parent
725175d069
commit
fe0004bbac
@ -1,8 +1,9 @@
|
||||
import React, {useEffect, ReactNode} from 'react';
|
||||
import {Drawer, Form, Input, Select, Button, Space, Tabs, Tooltip} from 'antd';
|
||||
import {InfoCircleOutlined} from '@ant-design/icons';
|
||||
import React, {useEffect} from 'react';
|
||||
import {Drawer, Space, Tabs, TabsProps} from 'antd';
|
||||
import {Cell} from '@antv/x6';
|
||||
import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
|
||||
import {BetaSchemaForm} from '@ant-design/pro-form';
|
||||
import {convertJsonSchemaToColumns} from '@/utils/jsonSchemaUtils';
|
||||
|
||||
interface NodeConfigDrawerProps {
|
||||
visible: boolean;
|
||||
@ -12,49 +13,30 @@ interface NodeConfigDrawerProps {
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
interface SchemaProperty {
|
||||
type: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
enum?: string[];
|
||||
enumNames?: string[];
|
||||
format?: string;
|
||||
interface Variables {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
||||
visible,
|
||||
node,
|
||||
nodeDefinition,
|
||||
onOk,
|
||||
onCancel,
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
// 在组件挂载或 nodeDefinition 更新时设置表单初始值
|
||||
useEffect(() => {
|
||||
if (!nodeDefinition) return;
|
||||
const initialValues = {
|
||||
...nodeDefinition.panelVariables,
|
||||
...nodeDefinition.localVariables
|
||||
};
|
||||
console.log('设置表单初始值:', initialValues);
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [nodeDefinition, form]);
|
||||
|
||||
const handleOk = async () => {
|
||||
visible,
|
||||
node,
|
||||
nodeDefinition,
|
||||
onOk,
|
||||
onCancel,
|
||||
}) => {
|
||||
const handleSubmit = async (values: any) => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
// 将表单数据分离为 panelVariables 和 localVariables
|
||||
const panelVariables = {};
|
||||
const localVariables = {};
|
||||
const panelVariables: Variables = {};
|
||||
const localVariables: Variables = {};
|
||||
|
||||
// 处理 panelVariablesSchema 中定义的字段
|
||||
if (nodeDefinition?.panelVariablesSchema?.properties) {
|
||||
Object.entries(nodeDefinition.panelVariablesSchema.properties).forEach(([key, property]) => {
|
||||
// 如果值存在就用表单值，否则用默认值
|
||||
if (values[key] !== undefined) {
|
||||
panelVariables[key] = values[key];
|
||||
} else if ((property as SchemaProperty).default !== undefined) {
|
||||
panelVariables[key] = (property as SchemaProperty).default;
|
||||
} else if (property.default !== undefined) {
|
||||
panelVariables[key] = property.default;
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -62,153 +44,74 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
||||
// 处理 localVariablesSchema 中定义的字段
|
||||
if (nodeDefinition?.localVariablesSchema?.properties) {
|
||||
Object.entries(nodeDefinition.localVariablesSchema.properties).forEach(([key, property]) => {
|
||||
// 如果值存在就用表单值，否则用默认值
|
||||
if (values[key] !== undefined) {
|
||||
localVariables[key] = values[key];
|
||||
} else if ((property as SchemaProperty).default !== undefined) {
|
||||
localVariables[key] = (property as SchemaProperty).default;
|
||||
} else if (property.default !== undefined) {
|
||||
localVariables[key] = property.default;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const updatedNodeDefinition = {
|
||||
...nodeDefinition,
|
||||
panelVariables: panelVariables,
|
||||
localVariables: localVariables
|
||||
panelVariables,
|
||||
localVariables
|
||||
};
|
||||
// 返回更新后的完整节点定义
|
||||
onOk(updatedNodeDefinition);
|
||||
// form.resetFields();
|
||||
} catch (error) {
|
||||
console.error('Validation failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
};
|
||||
|
||||
const renderFormItem = (key: string, property: SchemaProperty, required: boolean, isReadOnly: boolean) => {
|
||||
const baseProps = {
|
||||
name: key,
|
||||
label: (
|
||||
<Space>
|
||||
{property.title}
|
||||
{property.description && (
|
||||
<Tooltip title={property.description}>
|
||||
<InfoCircleOutlined/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
rules: [{required, message: `请输入${property.title}`}],
|
||||
initialValue: key === 'code' ? nodeDefinition?.nodeType : property.default // 如果是 code 字段，使用 nodeType 作为默认值
|
||||
};
|
||||
|
||||
if (key === 'code') {
|
||||
return (
|
||||
<Form.Item key={key} {...baseProps}>
|
||||
<Input disabled value={nodeDefinition?.nodeType}/>
|
||||
</Form.Item>
|
||||
);
|
||||
const items: TabsProps['items'] = [
|
||||
nodeDefinition?.panelVariablesSchema && {
|
||||
key: 'panel',
|
||||
label: '面板变量',
|
||||
children: (
|
||||
<BetaSchemaForm
|
||||
layoutType="Form"
|
||||
columns={convertJsonSchemaToColumns(nodeDefinition.panelVariablesSchema)}
|
||||
onFinish={handleSubmit}
|
||||
initialValues={nodeDefinition.panelVariables || {}}
|
||||
submitter={false}
|
||||
/>
|
||||
)
|
||||
},
|
||||
nodeDefinition?.localVariablesSchema && {
|
||||
key: 'local',
|
||||
label: '环境变量',
|
||||
children: (
|
||||
<BetaSchemaForm
|
||||
layoutType="Form"
|
||||
columns={convertJsonSchemaToColumns(nodeDefinition.localVariablesSchema)}
|
||||
onFinish={handleSubmit}
|
||||
initialValues={nodeDefinition.localVariables || {}}
|
||||
submitter={false}
|
||||
readonly={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (isReadOnly) {
|
||||
return (
|
||||
<Form.Item key={key} {...baseProps}>
|
||||
<Input disabled value={property.default}/>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
|
||||
switch (property.type) {
|
||||
case 'string':
|
||||
if (property.enum) {
|
||||
return (
|
||||
<Form.Item key={key} {...baseProps}>
|
||||
<Select>
|
||||
{property.enum.map((value, index) => (
|
||||
<Select.Option key={value} value={value}>
|
||||
{property.enumNames?.[index] || value}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form.Item key={key} {...baseProps}>
|
||||
{property.format === 'textarea' ? (
|
||||
<Input.TextArea rows={3}/>
|
||||
) : (
|
||||
<Input/>
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case 'integer': // 添加对 integer 类型的支持
|
||||
return (
|
||||
<Form.Item key={key} {...baseProps}>
|
||||
<Input type="number"/>
|
||||
</Form.Item>
|
||||
);
|
||||
case 'number':
|
||||
return (
|
||||
<Form.Item key={key} {...baseProps}>
|
||||
<Input type="number"/>
|
||||
</Form.Item>
|
||||
);
|
||||
case 'boolean':
|
||||
return (
|
||||
<Form.Item key={key} {...baseProps} valuePropName="checked">
|
||||
<Select>
|
||||
<Select.Option value={true}>是</Select.Option>
|
||||
<Select.Option value={false}>否</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
].filter(Boolean) as TabsProps['items'];
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={`编辑节点 - ${nodeDefinition?.nodeName || ''}`}
|
||||
placement="right"
|
||||
width={480}
|
||||
onClose={handleCancel}
|
||||
onClose={onCancel}
|
||||
open={visible}
|
||||
extra={
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleOk}>确定</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Tabs items={[
|
||||
nodeDefinition?.panelVariablesSchema && {
|
||||
key: 'panel',
|
||||
label: '面板变量',
|
||||
children: Object.entries(nodeDefinition.panelVariablesSchema.properties || {}).map(([key, property]) => {
|
||||
// 获取必填字段列表
|
||||
const requiredFields = nodeDefinition.panelVariablesSchema?.required || [];
|
||||
const required = requiredFields.includes(key);
|
||||
return renderFormItem(key, property as SchemaProperty, required, false);
|
||||
})
|
||||
},
|
||||
nodeDefinition?.localVariablesSchema && {
|
||||
key: 'local',
|
||||
label: '环境变量',
|
||||
children: Object.entries(nodeDefinition.localVariablesSchema.properties || {}).map(([key, property]) => {
|
||||
const requiredFields = nodeDefinition.localVariablesSchema?.required || [];
|
||||
const required = requiredFields.includes(key);
|
||||
return renderFormItem(key, property as SchemaProperty, required, true);
|
||||
})
|
||||
}
|
||||
].filter(Boolean)}/>
|
||||
</Form>
|
||||
<Tabs items={items}/>
|
||||
<div style={{ position: 'absolute', bottom: 0, width: '100%', borderTop: '1px solid #e8e8e8', padding: '10px 16px', textAlign: 'right', left: 0, background: '#fff' }}>
|
||||
<Space>
|
||||
<button onClick={onCancel} className="ant-btn">
|
||||
取消
|
||||
</button>
|
||||
<button onClick={() => document.querySelector('form')?.submit()} className="ant-btn ant-btn-primary">
|
||||
确定
|
||||
</button>
|
||||
</Space>
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -107,4 +107,6 @@ export interface NodeDefinitionResponse extends BaseResponse {
|
||||
uiVariables: UIVariables | null;
|
||||
localVariablesSchema: NodeVariablesSchema | null;
|
||||
formVariablesSchema: NodeVariablesSchema | null;
|
||||
panelVariables?: Record<string, any>;
|
||||
localVariables?: Record<string, any>;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user