feat(orchestration): 更新全局变量类型支持并优化参数表默认值选择

master
钟良源 3 months ago
parent d88bafdded
commit f41ff69cc7

@ -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<ParamsTableProps> = ({
onUpdateData
}) => {
const [data, setData] = useState<TableDataItem[]>([]);
const { gloBalVarList } = useSelector((state: any) => state.ideContainer);
useEffect(() => {
// 为现有数据添加key属性如果不存在
@ -40,23 +42,30 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
{ 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,8 +132,39 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
{
title: '默认值',
dataIndex: 'defaultValue',
render: (_: any, record: TableDataItem) => (
record.id === 'maxTime' ? (
render: (_: any, record: TableDataItem) => {
// 获取当前数据类型对应的选项
const options = getOptionsByDataType(record.dataType);
// 如果有选项则显示下拉选择框,否则显示输入框
if (options.length > 0) {
return (
<>
<Select
value={record.refValue}
onChange={(value) => {
const refValue = options.find((option) => option.value === value)?.label || null;
handleSave({ ...record, refId: value, refValue });
}}
placeholder="请选择默认值"
// showSearch
allowClear
options={options}
style={{ width: '100%', minWidth: 100 }}
/>
<Input
style={{ width: '100%', minWidth: 100, marginTop: 10 }}
value={record.defaultValue}
onChange={(value) => handleSave({ ...record, defaultValue: value })}
placeholder="请输入默认值"
/>
</>
);
}
else {
// 特殊处理maxTime的情况
if (record.id === 'maxTime') {
return (
<Input
type="number"
min="1"
@ -132,13 +172,18 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
value={record.defaultValue}
onChange={(value) => handleSave({ ...record, defaultValue: value })}
/>
) : (
);
}
return (
<Input
value={record.defaultValue}
onChange={(value) => handleSave({ ...record, defaultValue: value })}
placeholder="请输入默认值"
/>
)
)
);
}
}
},
{
title: '操作',

@ -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'
];
// 默认值类型校验方法

Loading…
Cancel
Save