1
This commit is contained in:
dengqichen
parent
9c9ff6a21a
commit
0f5acb22dc
@ -1,15 +1,15 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { Button, Card, Form, Input, InputNumber, Select, Switch, Space, Menu, Tabs, Row, Col, message } from 'antd';
|
||||
import type { NodeDesignData } from './types';
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import {PageContainer} from '@ant-design/pro-layout';
|
||||
import {Button, Card, Form, Input, InputNumber, Select, Switch, Space, Menu, Tabs, Row, Col, message} from 'antd';
|
||||
import type {NodeDesignData} from './types';
|
||||
import * as service from './service';
|
||||
|
||||
// Tab 配置
|
||||
const TAB_CONFIG = [
|
||||
{ key: 'panel', label: '属性（预览）', schemaKey: 'panelVariablesSchema', readonly: true },
|
||||
{ key: 'local', label: '环境变量（预览）', schemaKey: 'localVariablesSchema', readonly: true },
|
||||
{ key: 'form', label: '表单（预览）', schemaKey: 'formVariablesSchema', readonly: true },
|
||||
{ key: 'ui', label: 'UI配置', schemaKey: 'uiVariables', readonly: false }
|
||||
{key: 'panel', label: '属性（预览）', schemaKey: 'panelVariablesSchema', readonly: true},
|
||||
{key: 'local', label: '环境变量（预览）', schemaKey: 'localVariablesSchema', readonly: true},
|
||||
{key: 'form', label: '表单（预览）', schemaKey: 'formVariablesSchema', readonly: true},
|
||||
{key: 'ui', label: 'UI配置', schemaKey: 'uiVariables', readonly: false}
|
||||
];
|
||||
|
||||
// 渲染具体的表单控件
|
||||
@ -35,9 +35,9 @@ const renderField = (schema: any) => {
|
||||
return <Input {...commonProps} />;
|
||||
case 'integer':
|
||||
case 'number':
|
||||
return <InputNumber {...commonProps} style={{ width: '100%' }} />;
|
||||
return <InputNumber {...commonProps} style={{width: '100%'}}/>;
|
||||
case 'boolean':
|
||||
return <Switch />;
|
||||
return <Switch/>;
|
||||
default:
|
||||
return <Input {...commonProps} />;
|
||||
}
|
||||
@ -48,29 +48,29 @@ const FormRenderer: React.FC<{
|
||||
schema: any;
|
||||
path?: string;
|
||||
readOnly?: boolean;
|
||||
}> = ({ schema, path = '', readOnly = false }) => {
|
||||
}> = ({schema, path = '', readOnly = false}) => {
|
||||
if (!schema || !schema.properties) return null;
|
||||
const renderPortConfig = (portSchema: any, portPath: string) => {
|
||||
if (!portSchema || !portSchema.properties) return null;
|
||||
|
||||
const { position, attrs } = portSchema.properties;
|
||||
const {position, attrs} = portSchema.properties;
|
||||
return (
|
||||
<>
|
||||
{/* 先渲染端口位置 */}
|
||||
<Form.Item
|
||||
name={`${portPath}.position`}
|
||||
label={
|
||||
<span style={{ fontSize: '14px' }}>
|
||||
<span style={{fontSize: '14px'}}>
|
||||
{position.title}
|
||||
</span>
|
||||
}
|
||||
tooltip={position.description}
|
||||
required={portSchema.required?.includes('position')}
|
||||
initialValue={'default' in position ? position.default : undefined}
|
||||
style={{ marginBottom: 16 }}
|
||||
style={{marginBottom: 16}}
|
||||
>
|
||||
{readOnly ? (
|
||||
<span style={{ color: '#666' }}>{position.default || '-'}</span>
|
||||
<span style={{color: '#666'}}>{position.default || '-'}</span>
|
||||
) : (
|
||||
renderField(position)
|
||||
)}
|
||||
@ -88,7 +88,7 @@ const FormRenderer: React.FC<{
|
||||
border: '1px solid #f0f0f0'
|
||||
}}
|
||||
styles={{
|
||||
body: { padding: '16px' }
|
||||
body: {padding: '16px'}
|
||||
}}
|
||||
>
|
||||
<FormRenderer
|
||||
@ -103,7 +103,7 @@ const FormRenderer: React.FC<{
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '8px 0' }}>
|
||||
<div style={{padding: '8px 0'}}>
|
||||
{Object.entries(schema.properties).map(([key, value]: [string, any]) => {
|
||||
const fieldPath = path ? `${path}.${key}` : key;
|
||||
if (value.type === 'object') {
|
||||
@ -125,7 +125,7 @@ const FormRenderer: React.FC<{
|
||||
border: '1px solid #f0f0f0'
|
||||
}}
|
||||
styles={{
|
||||
body: { padding: '16px' }
|
||||
body: {padding: '16px'}
|
||||
}}
|
||||
>
|
||||
{renderPortConfig(inPort, `${fieldPath}.in`)}
|
||||
@ -142,7 +142,7 @@ const FormRenderer: React.FC<{
|
||||
border: '1px solid #f0f0f0'
|
||||
}}
|
||||
styles={{
|
||||
body: { padding: '16px' }
|
||||
body: {padding: '16px'}
|
||||
}}
|
||||
>
|
||||
{renderPortConfig(outPort, `${fieldPath}.out`)}
|
||||
@ -156,7 +156,7 @@ const FormRenderer: React.FC<{
|
||||
<Card
|
||||
key={fieldPath}
|
||||
title={
|
||||
<span style={{ fontSize: '14px', fontWeight: 500 }}>
|
||||
<span style={{fontSize: '14px', fontWeight: 500}}>
|
||||
{value.title}
|
||||
</span>
|
||||
}
|
||||
@ -168,7 +168,7 @@ const FormRenderer: React.FC<{
|
||||
border: '1px solid #f0f0f0'
|
||||
}}
|
||||
styles={{
|
||||
body: { padding: '16px' }
|
||||
body: {padding: '16px'}
|
||||
}}
|
||||
>
|
||||
<FormRenderer
|
||||
@ -185,17 +185,17 @@ const FormRenderer: React.FC<{
|
||||
key={fieldPath}
|
||||
name={fieldPath}
|
||||
label={
|
||||
<span style={{ fontSize: '14px' }}>
|
||||
<span style={{fontSize: '14px'}}>
|
||||
{value.title}
|
||||
</span>
|
||||
}
|
||||
tooltip={value.description}
|
||||
required={schema.required?.includes(key)}
|
||||
initialValue={'default' in value ? value.default : undefined}
|
||||
style={{ marginBottom: 16 }}
|
||||
style={{marginBottom: 16}}
|
||||
>
|
||||
{readOnly ? (
|
||||
<span style={{ color: '#666' }}>{value.default || '-'}</span>
|
||||
<span style={{color: '#666'}}>{value.default || '-'}</span>
|
||||
) : (
|
||||
renderField(value)
|
||||
)}
|
||||
@ -246,7 +246,14 @@ const NodeDesignForm: React.FC = () => {
|
||||
// 处理节点选择
|
||||
const handleNodeSelect = (node: NodeDesignData) => {
|
||||
setSelectedNode(node);
|
||||
form.resetFields();
|
||||
// 更新表单数据
|
||||
form.setFieldsValue({
|
||||
'base.nodeType': node.nodeCode, // 使用 nodeCode 作为节点类型
|
||||
'base.nodeCode': node.nodeCode,
|
||||
'base.nodeName': node.nodeName,
|
||||
'base.category': node.category,
|
||||
'base.description': node.description
|
||||
});
|
||||
};
|
||||
|
||||
// 处理 Tab 切换
|
||||
@ -259,11 +266,23 @@ const NodeDesignForm: React.FC = () => {
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
console.log('Form values:', values);
|
||||
const { base, ...otherValues } = values;
|
||||
|
||||
const saveData = {
|
||||
...selectedNode,
|
||||
nodeType: base.nodeType,
|
||||
nodeCode: base.nodeCode,
|
||||
nodeName: base.nodeName,
|
||||
category: base.category,
|
||||
description: base.description,
|
||||
uiVariables: otherValues // 其他表单数据
|
||||
};
|
||||
|
||||
await service.saveNodeDefinition(saveData);
|
||||
message.success('保存成功');
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error);
|
||||
message.error('表单验证失败');
|
||||
console.error('保存失败:', error);
|
||||
message.error('保存失败');
|
||||
}
|
||||
};
|
||||
|
||||
@ -290,7 +309,7 @@ const NodeDesignForm: React.FC = () => {
|
||||
],
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
|
||||
<div style={{display: 'flex', gap: '24px', padding: '24px'}}>
|
||||
<Tabs
|
||||
tabPosition="left"
|
||||
type="card"
|
||||
@ -304,8 +323,8 @@ const NodeDesignForm: React.FC = () => {
|
||||
items={nodeDefinitionsDefined.map(node => ({
|
||||
key: node.nodeCode,
|
||||
label: (
|
||||
<div style={{ padding: '4px 0' }}>
|
||||
<div style={{ fontSize: '14px', fontWeight: 500 }}>
|
||||
<div style={{padding: '4px 0'}}>
|
||||
<div style={{fontSize: '14px', fontWeight: 500}}>
|
||||
{node.nodeName}
|
||||
</div>
|
||||
<div style={{
|
||||
@ -329,13 +348,58 @@ const NodeDesignForm: React.FC = () => {
|
||||
layout="vertical"
|
||||
key={`${selectedNode?.nodeCode}-${activeTab}`}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="base.nodeType"
|
||||
label="节点类型"
|
||||
rules={[{required: true}]}
|
||||
>
|
||||
<Input disabled/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="base.nodeCode"
|
||||
label="节点编码"
|
||||
rules={[{required: true}]}
|
||||
>
|
||||
<Input disabled/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="base.nodeName"
|
||||
label="节点名称"
|
||||
rules={[{required: true}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="base.category"
|
||||
label="节点类别"
|
||||
>
|
||||
<Input disabled/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item
|
||||
name="base.description"
|
||||
label="节点描述"
|
||||
>
|
||||
<Input.TextArea rows={4}/>
|
||||
</Form.Item>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={handleTabChange}
|
||||
items={getAvailableTabs(selectedNode).map(tab => ({
|
||||
key: tab.key,
|
||||
label: (
|
||||
<span style={{ fontSize: '14px' }}>
|
||||
<span style={{fontSize: '14px'}}>
|
||||
{tab.label}
|
||||
</span>
|
||||
),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user