1
This commit is contained in:
parent
e76af9b8f5
commit
a6f0fb89a0
@ -1,5 +1,5 @@
|
|||||||
import React, {useEffect, ReactNode} from 'react';
|
import React, {useEffect, ReactNode} from 'react';
|
||||||
import {Drawer, Form, Input, Select, Button, Space, Divider, Tooltip} from 'antd';
|
import {Drawer, Form, Input, Select, Button, Space, Tabs, Tooltip} from 'antd';
|
||||||
import {InfoCircleOutlined} from '@ant-design/icons';
|
import {InfoCircleOutlined} from '@ant-design/icons';
|
||||||
import {Cell} from '@antv/x6';
|
import {Cell} from '@antv/x6';
|
||||||
import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
|
import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
|
||||||
@ -54,7 +54,7 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
|||||||
onCancel();
|
onCancel();
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderFormItem = (key: string, property: SchemaProperty, required: boolean) => {
|
const renderFormItem = (key: string, property: SchemaProperty, required: boolean, isReadOnly: boolean) => {
|
||||||
const baseProps = {
|
const baseProps = {
|
||||||
name: key,
|
name: key,
|
||||||
label: (
|
label: (
|
||||||
@ -70,6 +70,14 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
|||||||
rules: [{required, message: `请输入${property.title}`}],
|
rules: [{required, message: `请输入${property.title}`}],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (isReadOnly) {
|
||||||
|
return (
|
||||||
|
<Form.Item key={key} {...baseProps}>
|
||||||
|
<Input disabled value={property.default}/>
|
||||||
|
</Form.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
switch (property.type) {
|
switch (property.type) {
|
||||||
case 'string':
|
case 'string':
|
||||||
if (property.enum) {
|
if (property.enum) {
|
||||||
@ -140,41 +148,6 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
|||||||
return formItems;
|
return formItems;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 显示节点详细信息
|
|
||||||
const renderNodeDetails = () => {
|
|
||||||
if (!nodeDefinition?.graphConfig.details) return null;
|
|
||||||
|
|
||||||
const {details} = nodeDefinition.graphConfig;
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Divider orientation="left">节点说明</Divider>
|
|
||||||
{/*<div style={{ marginBottom: 16 }}>*/}
|
|
||||||
{/* <p>{details.description}</p>*/}
|
|
||||||
{/* {details.features && details.features.length > 0 && (*/}
|
|
||||||
{/* <div>*/}
|
|
||||||
{/* <strong>功能特点:</strong>*/}
|
|
||||||
{/* <ul>*/}
|
|
||||||
{/* {details.features.map((feature, index) => (*/}
|
|
||||||
{/* <li key={index}>{feature}</li>*/}
|
|
||||||
{/* ))}*/}
|
|
||||||
{/* </ul>*/}
|
|
||||||
{/* </div>*/}
|
|
||||||
{/* )}*/}
|
|
||||||
{/* {details.scenarios && details.scenarios.length > 0 && (*/}
|
|
||||||
{/* <div>*/}
|
|
||||||
{/* <strong>适用场景:</strong>*/}
|
|
||||||
{/* <ul>*/}
|
|
||||||
{/* {details.scenarios.map((scenario, index) => (*/}
|
|
||||||
{/* <li key={index}>{scenario}</li>*/}
|
|
||||||
{/* ))}*/}
|
|
||||||
{/* </ul>*/}
|
|
||||||
{/* </div>*/}
|
|
||||||
{/* )}*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Drawer
|
<Drawer
|
||||||
title={`编辑节点 - ${nodeDefinition?.nodeName || ''}`}
|
title={`编辑节点 - ${nodeDefinition?.nodeName || ''}`}
|
||||||
@ -191,25 +164,24 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
|||||||
</Space>
|
</Space>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{/*{renderNodeDetails()}*/}
|
<Tabs>
|
||||||
<Divider orientation="left">节点配置</Divider>
|
{nodeDefinition?.panelVariablesSchema && (
|
||||||
<Form
|
<Tabs.TabPane tab="面板变量" key="panel">
|
||||||
form={form}
|
{Object.entries(nodeDefinition.panelVariablesSchema.properties).map(([key, property]) => {
|
||||||
layout="vertical"
|
|
||||||
initialValues={{}}
|
|
||||||
>
|
|
||||||
<Form.Item name="code" hidden>
|
|
||||||
<Input/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name="delegate" hidden>
|
|
||||||
<Input/>
|
|
||||||
</Form.Item>
|
|
||||||
{nodeDefinition?.panelVariablesSchema &&
|
|
||||||
Object.entries(nodeDefinition.panelVariablesSchema.properties).map(([key, property]) => {
|
|
||||||
const required = nodeDefinition.panelVariablesSchema?.properties.required?.includes(key) || false;
|
const required = nodeDefinition.panelVariablesSchema?.properties.required?.includes(key) || false;
|
||||||
return renderFormItem(key, property as SchemaProperty, required);
|
return renderFormItem(key, property as SchemaProperty, required, false);
|
||||||
})}
|
})}
|
||||||
</Form>
|
</Tabs.TabPane>
|
||||||
|
)}
|
||||||
|
{nodeDefinition?.localVariablesSchema && (
|
||||||
|
<Tabs.TabPane tab="环境变量" key="local">
|
||||||
|
{Object.entries(nodeDefinition.localVariablesSchema.properties).map(([key, property]) => {
|
||||||
|
const required = nodeDefinition.localVariablesSchema?.properties.required?.includes(key) || false;
|
||||||
|
return renderFormItem(key, property as SchemaProperty, required, true);
|
||||||
|
})}
|
||||||
|
</Tabs.TabPane>
|
||||||
|
)}
|
||||||
|
</Tabs>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user