diff --git a/src/pages/flowEditor/components/nodeEditors/EndNodeEditor.tsx b/src/pages/flowEditor/components/nodeEditors/EndNodeEditor.tsx index f09e6b7..dc0e374 100644 --- a/src/pages/flowEditor/components/nodeEditors/EndNodeEditor.tsx +++ b/src/pages/flowEditor/components/nodeEditors/EndNodeEditor.tsx @@ -1,174 +1,28 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { NodeEditorProps } from './index'; -import { Input, Select, Typography, Table, Button } from '@arco-design/web-react'; -import { IconUnorderedList, IconDelete } from '@arco-design/web-react/icon'; - +import { Typography } from '@arco-design/web-react'; +import { IconUnorderedList } from '@arco-design/web-react/icon'; +import ParamsTable from './ParamsTable'; const EndNodeEditor: React.FC = ({ node, nodeData, updateNodeData }) => { - const [data, setData] = useState([]); - - useEffect(() => { - // 为现有数据添加key属性(如果不存在) - const dataWithKeys = nodeData.parameters.dataIns?.map((item, index) => ({ - ...item, - key: item.key ?? index - })) || []; - setData(dataWithKeys); - }, [nodeData]); - - const dataTypeOptions = [ - { label: '字符串', value: 'string' }, - { label: '数字', value: 'number' }, - { label: '布尔值', value: 'boolean' }, - { label: '数组', value: 'array' }, - { label: '对象', value: 'object' } - ]; - - const arrayTypeOptions = [ - { label: '字符串数组', value: 'string' }, - { label: '数字数组', value: 'number' }, - { label: '布尔数组', value: 'boolean' } - ]; - - const columns = [ - { - title: '标识', - dataIndex: 'id', - render: (_, record) => ( - handleSave({ ...record, id: value })} - /> - ) - }, - { - title: '数据类型', - dataIndex: 'dataType', - render: (_, record) => ( - handleSave({ ...record, arrayType: value })} - placeholder="请选择数组类型" - /> - ) : ( - - ) - ) - }, - { - title: '描述', - dataIndex: 'desc', - render: (_, record) => ( - handleSave({ ...record, desc: value })} - /> - ) - }, - { - title: '默认值', - dataIndex: 'defaultValue', - render: (_, record) => ( - handleSave({ ...record, defaultValue: value })} - /> - ) - }, - { - title: '操作', - dataIndex: 'op', - render: (_, record) => ( - - ) - } - ]; - - - const handleSave = (row) => { - const newData = [...data]; - const index = newData.findIndex((item) => row.key === item.key); - if (index >= 0) { - newData.splice(index, 1, { ...newData[index], ...row }); - } - else { - newData.push(row); - } - setData(newData); - // 更新节点数据 - updateNodeData('parameters', { - ...nodeData.parameters, - dataIns: newData - }); - }; - - const removeRow = (key) => { - const newData = data.filter((item) => item.key !== key); - setData(newData); - - // 更新节点数据 - updateNodeData('parameters', { - ...nodeData.parameters, - dataIns: newData - }); - }; - - const addRow = () => { - const newKey = Date.now(); - const newRow = { - key: newKey, - id: '', - dataType: '', - arrayType: '', - desc: '', - defaultValue: '' - }; - const newData = [...data, newRow]; - setData(newData); - - // 更新节点数据 - updateNodeData('parameters', { - ...nodeData.parameters, - dataIns: newData - }); - }; - return ( <> 输入参数 - - + { + updateNodeData('parameters', { + ...nodeData.parameters, + dataIns: data + }); + }} + /> ); }; -export default EndNodeEditor; \ No newline at end of file +export default EndNodeEditor; diff --git a/src/pages/flowEditor/components/nodeEditors/ParamsTable.tsx b/src/pages/flowEditor/components/nodeEditors/ParamsTable.tsx new file mode 100644 index 0000000..9097c8f --- /dev/null +++ b/src/pages/flowEditor/components/nodeEditors/ParamsTable.tsx @@ -0,0 +1,171 @@ +import React, { useState, useEffect } from 'react'; +import { Input, Select, Table, Button } from '@arco-design/web-react'; +import { IconDelete } from '@arco-design/web-react/icon'; + +interface TableDataItem { + key: number | string; + id: string; + dataType: string; + arrayType: string; + desc: string; + defaultValue: string; + + [key: string]: any; // 允许其他自定义字段 +} + +interface EndNodeTableProps { + initialData: TableDataItem[]; + onUpdateData: (data: TableDataItem[]) => void; +} + +const EndNodeTable: React.FC = ({ + initialData, + onUpdateData + }) => { + const [data, setData] = useState([]); + + useEffect(() => { + // 为现有数据添加key属性(如果不存在) + const dataWithKeys = initialData?.map((item, index) => ({ + ...item, + key: item.key ?? index + })) || []; + setData(dataWithKeys); + }, [initialData]); + + const dataTypeOptions = [ + { label: '字符串', value: 'string' }, + { label: '数字', value: 'number' }, + { label: '布尔值', value: 'boolean' }, + { label: '数组', value: 'array' }, + { label: '对象', value: 'object' } + ]; + + const arrayTypeOptions = [ + { label: '字符串数组', value: 'string' }, + { label: '数字数组', value: 'number' }, + { label: '布尔数组', value: 'boolean' } + ]; + + const columns = [ + { + title: '标识', + dataIndex: 'id', + render: (_: any, record: TableDataItem) => ( + handleSave({ ...record, id: value })} + /> + ) + }, + { + title: '数据类型', + dataIndex: 'dataType', + render: (_: any, record: TableDataItem) => ( + handleSave({ ...record, arrayType: value })} + placeholder="请选择数组类型" + /> + ) : ( + + ) + ) + }, + { + title: '描述', + dataIndex: 'desc', + render: (_: any, record: TableDataItem) => ( + handleSave({ ...record, desc: value })} + /> + ) + }, + { + title: '默认值', + dataIndex: 'defaultValue', + render: (_: any, record: TableDataItem) => ( + handleSave({ ...record, defaultValue: value })} + /> + ) + }, + { + title: '操作', + dataIndex: 'op', + render: (_: any, record: TableDataItem) => ( + + ) + } + ]; + + const handleSave = (row: TableDataItem) => { + const newData = [...data]; + const index = newData.findIndex((item) => row.key === item.key); + if (index >= 0) { + newData.splice(index, 1, { ...newData[index], ...row }); + } + else { + newData.push(row); + } + setData(newData); + onUpdateData(newData); + }; + + const removeRow = (key: number | string) => { + const newData = data.filter((item) => item.key !== key); + setData(newData); + onUpdateData(newData); + }; + + const addRow = () => { + const newKey = Date.now(); + const newRow = { + key: newKey, + id: '', + dataType: '', + arrayType: '', + desc: '', + defaultValue: '' + }; + const newData = [...data, newRow]; + setData(newData); + onUpdateData(newData); + }; + + return ( + <> +
+ + + ); +}; + +export default EndNodeTable; \ No newline at end of file diff --git a/src/pages/flowEditor/components/nodeEditors/StartNodeEditor.tsx b/src/pages/flowEditor/components/nodeEditors/StartNodeEditor.tsx index 161cf7b..ffb8b9f 100644 --- a/src/pages/flowEditor/components/nodeEditors/StartNodeEditor.tsx +++ b/src/pages/flowEditor/components/nodeEditors/StartNodeEditor.tsx @@ -1,27 +1,28 @@ import React from 'react'; import { NodeEditorProps } from './index'; -import { Form, Input } from '@arco-design/web-react'; +import { Typography } from '@arco-design/web-react'; +import { IconUnorderedList } from '@arco-design/web-react/icon'; +import ParamsTable from './ParamsTable'; + const StartNodeEditor: React.FC = ({ - node, - nodeData, - updateNodeData -}) => { + node, + nodeData, + updateNodeData + }) => { return ( -
- - updateNodeData('title', value)} - /> - - - updateNodeData('description', value)} - /> - - + <> + 输出参数 + { + updateNodeData('parameters', { + ...nodeData.parameters, + dataOuts: data + }); + }} + /> + ); };