diff --git a/react-ui/src/components/ParameterInput/index.tsx b/react-ui/src/components/ParameterInput/index.tsx index 27ba2856..aa573091 100644 --- a/react-ui/src/components/ParameterInput/index.tsx +++ b/react-ui/src/components/ParameterInput/index.tsx @@ -37,8 +37,6 @@ function ParameterInput({ disabled = false, ...rest }: ParameterInputProps) { - // console.log('ParameterInput', value); - const valueObj = typeof value === 'string' ? { value: value, fromSelect: false, showValue: value } : value; if (valueObj && !valueObj.showValue) { diff --git a/react-ui/src/components/ParameterSelect/index.less b/react-ui/src/components/ParameterSelect/index.less new file mode 100644 index 00000000..e69de29b diff --git a/react-ui/src/components/ParameterSelect/index.tsx b/react-ui/src/components/ParameterSelect/index.tsx new file mode 100644 index 00000000..d96a886c --- /dev/null +++ b/react-ui/src/components/ParameterSelect/index.tsx @@ -0,0 +1,119 @@ +import { to } from '@/utils/promise'; +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 + ); +}; + +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 ?? []; + }, + fieldNames: { + label: 'name', + value: 'id', + }, + }, + model: { + getOptions: async () => { + const res = await getModelList({ + page: 0, + size: 1000, + available_range: 0, + }); + return res?.data?.content ?? []; + }, + 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'], + }, +}; + +type ParameterSelectProps = { + value?: PipelineNodeModelParameter; + onChange?: (value: PipelineNodeModelParameter) => void; +}; + +function ParameterSelect({ value, onChange }: ParameterSelectProps) { + const [options, setOptions] = useState([]); + const valueNonNullable = value ?? ({} as PipelineNodeModelParameter); + const { item_type } = valueNonNullable; + + useEffect(() => { + getSelectOptions(); + }, []); + + const hangleChange = (e: string) => { + onChange?.({ + ...valueNonNullable, + value: e, + }); + }; + + // 获取下拉数据 + const getSelectOptions = async () => { + const propsConfig = config[item_type]; + if (!propsConfig) { + return; + } + const getOptions = propsConfig.getOptions; + const [res] = await to(getOptions()); + if (res) { + setOptions(res); + } + }; + + return ( + { label: 'description', value: 'standard', }} + showSearch + allowClear /> { { - handleParameterClick(['control_strategy', item.key], { - ...item.value, - value, - fromSelect: true, - showValue: value, - }); - }} - /> - } - // getValueProps={(e) => { - // return { value: e.value }; - // }} - // getValueFromEvent={(e) => { - // return { - // ...item.value, - // value: e.target.value, - // }; - // }} + label={getLabel(item, 'control_strategy')} > @@ -365,20 +394,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { {inParametersList.map((item) => ( { - handleParameterClick(['in_parameters', item.key], { - ...item.value, - value, - fromSelect: true, - showValue: value, - }); - }} - /> - } + label={getLabel(item, 'in_parameters')} required={item.value.require ? true : false} >
@@ -387,11 +403,15 @@ const Props = forwardRef(({ onParentChange }, ref) => { noStyle rules={[{ required: item.value.require ? true : false }]} > - + {item.value.type === 'select' ? ( + + ) : ( + + )} {item.value.type === 'ref' && ( @@ -416,30 +436,8 @@ const Props = forwardRef(({ onParentChange }, ref) => { { - handleParameterClick(['out_parameters', item.key], { - ...item.value, - value, - fromSelect: true, - showValue: value, - }); - }} - /> - } + label={getLabel(item, 'out_parameters')} rules={[{ required: item.value.require ? true : false }]} - // getValueProps={(e) => { - // return { value: e.value }; - // }} - // getValueFromEvent={(e) => { - // return { - // ...item.value, - // value: e.target.value, - // }; - // }} > @@ -449,4 +447,4 @@ const Props = forwardRef(({ onParentChange }, ref) => { ); }); -export default Props; +export default PipelineNodeParameter; diff --git a/react-ui/src/types.ts b/react-ui/src/types.ts index 605131a4..9f558618 100644 --- a/react-ui/src/types.ts +++ b/react-ui/src/types.ts @@ -47,16 +47,19 @@ export type PipelineNodeModel = { // 流水线节点模型数据 export type PipelineNodeModelParameter = { - label: string; - value: any; - require: number; type: string; item_type: string; + label: string; + value: any; + require?: number; placeholder?: string; describe?: string; fromSelect?: boolean; showValue?: any; - editable: number; + editable?: number; + activeTab?: string; // ResourceSelectorModal tab + expandedKeys?: string[]; // ResourceSelectorModal expandedKeys + checkedKeys?: string[]; // ResourceSelectorModal checkedKeys }; // type ChangePropertyType = Omit & { [P in K]: NewType }