diff --git a/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx b/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx index 41fa18a..683748e 100644 --- a/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx +++ b/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { Input, Select, Table, Button } from '@arco-design/web-react'; import { IconDelete } from '@arco-design/web-react/icon'; +import { useSelector } from 'react-redux'; interface TableDataItem { key: number | string; @@ -23,6 +24,7 @@ const ParamsTable: React.FC = ({ onUpdateData }) => { const [data, setData] = useState([]); + const { gloBalVarList } = useSelector((state: any) => state.ideContainer); useEffect(() => { // 为现有数据添加key属性(如果不存在) @@ -40,23 +42,30 @@ const ParamsTable: React.FC = ({ { label: 'ARRAY', value: 'ARRAY' }, { label: 'OBJECT', value: 'OBJECT' }, { label: 'JSON', value: 'JSON' }, - { label: 'DOUBLE', value: 'DOUBLE' }, - { label: 'DATE', value: 'DATE' }, - { label: 'DATETIME', value: 'DATETIME' }, - { label: 'TIMESTAMP', value: 'TIMESTAMP' }, - { label: 'DATABASE', value: 'DATABASE' } + { label: 'DOUBLE', value: 'DOUBLE' } ]; const arrayTypeOptions = [ { label: 'STRING', value: 'STRING' }, { label: 'INTEGER', value: 'INTEGER' }, - // { label: 'DOUBLE', value: 'DOUBLE' }, - { label: 'BOOLEAN', value: 'BOOLEAN' } - // { label: 'DATE', value: 'DATE' }, - // { label: 'DATETIME', value: 'DATETIME' }, - // { label: 'TIMESTAMP', value: 'TIMESTAMP' } + { label: 'DOUBLE', value: 'DOUBLE' }, + { label: 'BOOLEAN', value: 'BOOLEAN' }, + { label: 'JSON', value: 'JSON' }, + { label: 'OBJECT', value: 'OBJECT' } ]; + // 根据数据类型获取对应的选项列表 + const getOptionsByDataType = (dataType: string) => { + // 这里可以根据数据类型从gloBalVarList中筛选出对应的选项 + if (gloBalVarList[dataType]) { + return gloBalVarList[dataType].map((item: any) => ({ + label: item.name, + value: item.id + })); + } + return []; + }; + const columns = [ { title: '标识', @@ -123,22 +132,58 @@ const ParamsTable: React.FC = ({ { title: '默认值', dataIndex: 'defaultValue', - render: (_: any, record: TableDataItem) => ( - record.id === 'maxTime' ? ( - handleSave({ ...record, defaultValue: value })} - /> - ) : ( - handleSave({ ...record, defaultValue: value })} - /> - ) - ) + render: (_: any, record: TableDataItem) => { + // 获取当前数据类型对应的选项 + const options = getOptionsByDataType(record.dataType); + + // 如果有选项则显示下拉选择框,否则显示输入框 + if (options.length > 0) { + return ( + <> + handleSave({ ...record, defaultValue: value })} + placeholder="请输入默认值" + /> + + ); + } + else { + // 特殊处理maxTime的情况 + if (record.id === 'maxTime') { + return ( + handleSave({ ...record, defaultValue: value })} + /> + ); + } + + return ( + handleSave({ ...record, defaultValue: value })} + placeholder="请输入默认值" + /> + ); + } + } }, { title: '操作', diff --git a/src/pages/orchestration/globalVar/addModal.tsx b/src/pages/orchestration/globalVar/addModal.tsx index 7665862..f4c8735 100644 --- a/src/pages/orchestration/globalVar/addModal.tsx +++ b/src/pages/orchestration/globalVar/addModal.tsx @@ -12,11 +12,7 @@ const dataTypeEnum = [ 'BOOLEAN', 'INTEGER', 'DOUBLE', - 'STRING', - 'DATE', - 'DATETIME', - 'TIMESTAMP', - 'DATABASE' + 'STRING' ]; // 定义数组元素类型枚举 @@ -25,9 +21,9 @@ const arrayElementTypeEnum = [ 'INTEGER', 'DOUBLE', 'BOOLEAN', - 'DATE', - 'DATETIME', - 'TIMESTAMP' + 'ARRAY', + 'JSON', + 'OBJECT' ]; // 默认值类型校验方法