refactor(components):重构参数表格组件命名与逻辑

- 将 EndNodeTable 组件重命名为 ParamsTable
-为 maxTime 参数项禁用编辑功能
-限制 maxTime 默认值输入类型为数字
- 隐藏 maxTime项的删除按钮
- 更新组件接口名称以匹配新用途
production
钟良源 7 months ago
parent da34978f6c
commit e274937a19

@ -13,15 +13,15 @@ interface TableDataItem {
[key: string]: any; // 允许其他自定义字段 [key: string]: any; // 允许其他自定义字段
} }
interface EndNodeTableProps { interface ParamsTableProps {
initialData: TableDataItem[]; initialData: TableDataItem[];
onUpdateData: (data: TableDataItem[]) => void; onUpdateData: (data: TableDataItem[]) => void;
} }
const EndNodeTable: React.FC<EndNodeTableProps> = ({ const ParamsTable: React.FC<ParamsTableProps> = ({
initialData, initialData,
onUpdateData onUpdateData
}) => { }) => {
const [data, setData] = useState<TableDataItem[]>([]); const [data, setData] = useState<TableDataItem[]>([]);
useEffect(() => { useEffect(() => {
@ -52,23 +52,31 @@ const EndNodeTable: React.FC<EndNodeTableProps> = ({
title: '标识', title: '标识',
dataIndex: 'id', dataIndex: 'id',
render: (_: any, record: TableDataItem) => ( render: (_: any, record: TableDataItem) => (
<Input record.id === 'maxTime' ? (
value={record.id} <span>{record.id}</span>
onChange={(value) => handleSave({ ...record, id: value })} ) : (
/> <Input
value={record.id}
onChange={(value) => handleSave({ ...record, id: value })}
/>
)
) )
}, },
{ {
title: '数据类型', title: '数据类型',
dataIndex: 'dataType', dataIndex: 'dataType',
render: (_: any, record: TableDataItem) => ( render: (_: any, record: TableDataItem) => (
<Select record.id === 'maxTime' ? (
autoWidth={{ minWidth: 200, maxWidth: 500 }} <span>{record.dataType === 'INTEGER' ? '整数' : record.dataType}</span>
options={dataTypeOptions} ) : (
value={record.dataType} <Select
onChange={(value) => handleSave({ ...record, dataType: value })} autoWidth={{ minWidth: 200, maxWidth: 500 }}
placeholder="请选择数据类型" options={dataTypeOptions}
/> value={record.dataType}
onChange={(value) => handleSave({ ...record, dataType: value })}
placeholder="请选择数据类型"
/>
)
) )
}, },
{ {
@ -92,27 +100,41 @@ const EndNodeTable: React.FC<EndNodeTableProps> = ({
title: '描述', title: '描述',
dataIndex: 'desc', dataIndex: 'desc',
render: (_: any, record: TableDataItem) => ( render: (_: any, record: TableDataItem) => (
<Input record.id === 'maxTime' ? (
value={record.desc} <span>{record.desc}</span>
onChange={(value) => handleSave({ ...record, desc: value })} ) : (
/> <Input
value={record.desc}
onChange={(value) => handleSave({ ...record, desc: value })}
/>
)
) )
}, },
{ {
title: '默认值', title: '默认值',
dataIndex: 'defaultValue', dataIndex: 'defaultValue',
render: (_: any, record: TableDataItem) => ( render: (_: any, record: TableDataItem) => (
<Input record.id === 'maxTime' ? (
value={record.defaultValue} <Input
onChange={(value) => handleSave({ ...record, defaultValue: value })} type="number"
/> min="1"
step="1"
value={record.defaultValue}
onChange={(value) => handleSave({ ...record, defaultValue: value })}
/>
) : (
<Input
value={record.defaultValue}
onChange={(value) => handleSave({ ...record, defaultValue: value })}
/>
)
) )
}, },
{ {
title: '操作', title: '操作',
dataIndex: 'op', dataIndex: 'op',
render: (_: any, record: TableDataItem) => ( render: (_: any, record: TableDataItem) => (
<Button onClick={() => removeRow(record.key)} type="text" status="danger"> record.id !== 'maxTime' && <Button onClick={() => removeRow(record.key)} type="text" status="danger">
<IconDelete /> <IconDelete />
</Button> </Button>
) )
@ -168,4 +190,4 @@ const EndNodeTable: React.FC<EndNodeTableProps> = ({
); );
}; };
export default EndNodeTable; export default ParamsTable;
Loading…
Cancel
Save