diff --git a/react-ui/src/components/ParameterInput/index.tsx b/react-ui/src/components/ParameterInput/index.tsx index 369f504a..4b838b2d 100644 --- a/react-ui/src/components/ParameterInput/index.tsx +++ b/react-ui/src/components/ParameterInput/index.tsx @@ -29,7 +29,6 @@ function ParameterInput({ onClick, canInput = true, textArea = false, - placeholder, allowClear, className, style, @@ -44,6 +43,7 @@ function ParameterInput({ } const isSelect = valueObj?.fromSelect; const InputComponent = textArea ? Input.TextArea : Input; + const placeholder = valueObj?.placeholder; return ( <> diff --git a/react-ui/src/components/ParameterSelect/config.tsx b/react-ui/src/components/ParameterSelect/config.tsx new file mode 100644 index 00000000..84c99914 --- /dev/null +++ b/react-ui/src/components/ParameterSelect/config.tsx @@ -0,0 +1,72 @@ +import { getDatasetList, getModelList } from '@/services/dataset/index.js'; +import { getComputingResourceReq } from '@/services/pipeline'; +import { ComputingResource } from '@/types'; +import { type SelectProps } from 'antd'; + +// 过滤资源规格 +const filterResourceStandard: SelectProps['filterOption'] = ( + input: string, + option?: ComputingResource, +) => { + return ( + option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false + ); +}; + +// id 从 number 转换为 string +const convertId = (item: any) => ({ ...item, id: String(item.id) }); + +export type SelectPropsConfig = { + getOptions: () => Promise; + fieldNames?: SelectProps['fieldNames']; + optionFilterProp?: SelectProps['optionFilterProp']; + filterOption?: SelectProps['filterOption']; +}; + +export const paramSelectConfig: Record = { + dataset: { + getOptions: async () => { + const res = await getDatasetList({ + page: 0, + size: 1000, + available_range: 0, + }); + return res?.data?.content?.map(convertId) ?? []; + }, + fieldNames: { + label: 'name', + value: 'id', + }, + optionFilterProp: 'name', + }, + model: { + getOptions: async () => { + const res = await getModelList({ + page: 0, + size: 1000, + available_range: 0, + }); + return res?.data?.content?.map(convertId) ?? []; + }, + fieldNames: { + label: 'name', + value: 'id', + }, + optionFilterProp: 'name', + }, + resource: { + getOptions: async () => { + const res = await getComputingResourceReq({ + page: 0, + size: 1000, + resource_type: '', + }); + return res?.data?.content ?? []; + }, + fieldNames: { + label: 'description', + value: 'standard', + }, + filterOption: filterResourceStandard as SelectProps['filterOption'], + }, +}; diff --git a/react-ui/src/components/ParameterSelect/index.less b/react-ui/src/components/ParameterSelect/index.less deleted file mode 100644 index e69de29b..00000000 diff --git a/react-ui/src/components/ParameterSelect/index.tsx b/react-ui/src/components/ParameterSelect/index.tsx index b9fa030e..5b181a01 100644 --- a/react-ui/src/components/ParameterSelect/index.tsx +++ b/react-ui/src/components/ParameterSelect/index.tsx @@ -1,85 +1,20 @@ +import { PipelineNodeModelParameter } from '@/types'; import { to } from '@/utils/promise'; +import { Select } from 'antd'; import { useEffect, useState } from 'react'; -// import styles from './index.less'; -import { getDatasetList, getModelList } from '@/services/dataset/index.js'; -import { getComputingResourceReq } from '@/services/pipeline'; -import { ComputingResource, PipelineNodeModelParameter } from '@/types'; -import { Select, type SelectProps } from 'antd'; - -// 过滤资源规格 -const filterResourceStandard: SelectProps['filterOption'] = ( - input: string, - option?: ComputingResource, -) => { - return ( - option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false - ); -}; - -// id 从 number 转换为 string -const convertId = (item: any) => ({ ...item, id: String(item.id) }); - -type SelectPropsConfig = { - getOptions: () => Promise; - fieldNames?: SelectProps['fieldNames']; - filterOption?: SelectProps['filterOption']; -}; - -const config: Record = { - dataset: { - getOptions: async () => { - const res = await getDatasetList({ - page: 0, - size: 1000, - available_range: 0, - }); - return res?.data?.content?.map(convertId) ?? []; - }, - fieldNames: { - label: 'name', - value: 'id', - }, - }, - model: { - getOptions: async () => { - const res = await getModelList({ - page: 0, - size: 1000, - available_range: 0, - }); - return res?.data?.content?.map(convertId) ?? []; - }, - fieldNames: { - label: 'name', - value: 'id', - }, - }, - resource: { - getOptions: async () => { - const res = await getComputingResourceReq({ - page: 0, - size: 1000, - resource_type: '', - }); - return res?.data?.content ?? []; - }, - fieldNames: { - label: 'description', - value: 'standard', - }, - filterOption: filterResourceStandard as SelectProps['filterOption'], - }, -}; +import { paramSelectConfig } from './config'; type ParameterSelectProps = { value?: PipelineNodeModelParameter; onChange?: (value: PipelineNodeModelParameter) => void; + disabled?: boolean; }; -function ParameterSelect({ value, onChange }: ParameterSelectProps) { +function ParameterSelect({ value, onChange, disabled = false }: ParameterSelectProps) { const [options, setOptions] = useState([]); const valueNonNullable = value ?? ({} as PipelineNodeModelParameter); const { item_type } = valueNonNullable; + const propsConfig = paramSelectConfig[item_type]; useEffect(() => { getSelectOptions(); @@ -94,7 +29,6 @@ function ParameterSelect({ value, onChange }: ParameterSelectProps) { // 获取下拉数据 const getSelectOptions = async () => { - const propsConfig = config[item_type]; if (!propsConfig) { return; } @@ -108,11 +42,13 @@ function ParameterSelect({ value, onChange }: ParameterSelectProps) { return (