diff --git a/react-ui/config/proxy.ts b/react-ui/config/proxy.ts index 50acb581..3b7a8381 100644 --- a/react-ui/config/proxy.ts +++ b/react-ui/config/proxy.ts @@ -22,8 +22,8 @@ export default { // 要代理的地址 // target: 'http://172.20.32.197:31213', // 开发环境 // target: 'http://172.20.32.235:31213', // 测试环境 - target: 'http://172.20.32.44:8082', - // target: 'http://172.20.32.150:8082', + // target: 'http://172.20.32.44:8082', + target: 'http://172.20.32.164:8082', // 配置了这个可以从 http 代理到 https // 依赖 origin 的功能可能需要这个，比如 cookie changeOrigin: true, diff --git a/react-ui/src/components/ParameterSelect/config.tsx b/react-ui/src/components/ParameterSelect/config.tsx index 662a7981..722c174c 100644 --- a/react-ui/src/components/ParameterSelect/config.tsx +++ b/react-ui/src/components/ParameterSelect/config.tsx @@ -1,26 +1,18 @@ import { filterResourceStandard, resourceFieldNames } from '@/hooks/useComputingResource'; +import { DatasetData, ModelData } from '@/pages/Dataset/config'; import { ServiceData } from '@/pages/ModelDeployment/types'; import { getDatasetList, getModelList } from '@/services/dataset/index.js'; import { getServiceListReq } from '@/services/modelDeployment'; import { type SelectProps } from 'antd'; -import { pick } from 'lodash'; - -// id 从 number 转换为 string -const convertId = (item: any) => ({ - ...item, - id: JSON.stringify({ - id: `${item.id}`, - name: item.name, - identifier: item.identifier, - owner: item.owner, - }), -}); export type SelectPropsConfig = { - getOptions: () => Promise; // 获取下拉数据 + getOptions?: () => Promise; // 获取下拉数据 fieldNames?: SelectProps['fieldNames']; // 下拉数据字段 optionFilterProp?: SelectProps['optionFilterProp']; // 过滤字段名 filterOption?: SelectProps['filterOption']; // 过滤函数 + getValue: (value: any) => string | number; + getLabel: (value: any) => string; + isObjectValue: boolean; // value 是对象 }; export const paramSelectConfig: Record = { @@ -31,13 +23,16 @@ export const paramSelectConfig: Record = { size: 1000, is_public: false, }); - return res?.data?.content?.map(convertId) ?? []; + return res?.data?.content ?? []; + }, + optionFilterProp: 'label', + getValue: (value: DatasetData) => { + return value.id; }, - fieldNames: { - label: 'name', - value: 'id', + getLabel: (value: DatasetData) => { + return value.name; }, - optionFilterProp: 'name', + isObjectValue: true, }, model: { getOptions: async () => { @@ -46,13 +41,16 @@ export const paramSelectConfig: Record = { size: 1000, is_public: false, }); - return res?.data?.content?.map(convertId) ?? []; + return res?.data?.content ?? []; }, - fieldNames: { - label: 'name', - value: 'id', + optionFilterProp: 'label', + getValue: (value: ModelData) => { + return value.id; + }, + getLabel: (value: ModelData) => { + return value.name; }, - optionFilterProp: 'name', + isObjectValue: true, }, service: { getOptions: async () => { @@ -60,25 +58,28 @@ export const paramSelectConfig: Record = { page: 0, size: 1000, }); - return ( - res?.data?.content?.map((item: ServiceData) => ({ - label: item.service_name, - value: JSON.stringify(pick(item, ['id', 'service_name'])), - })) ?? [] - ); - }, - fieldNames: { - label: 'label', - value: 'value', + return res?.data?.content ?? []; }, optionFilterProp: 'label', + getValue: (value: ServiceData) => { + return value.id; + }, + getLabel: (value: ServiceData) => { + return value.service_name; + }, + isObjectValue: true, }, resource: { - getOptions: async () => { - // 不需要这个函数 - return []; - }, fieldNames: resourceFieldNames, filterOption: filterResourceStandard as SelectProps['filterOption'], + // 不会用到 + getValue: () => { + return ''; + }, + // 不会用的 + getLabel: () => { + return ''; + }, + isObjectValue: false, }, }; diff --git a/react-ui/src/components/ParameterSelect/index.tsx b/react-ui/src/components/ParameterSelect/index.tsx index c9a78069..db4d64e6 100644 --- a/react-ui/src/components/ParameterSelect/index.tsx +++ b/react-ui/src/components/ParameterSelect/index.tsx @@ -7,7 +7,7 @@ import { useComputingResource } from '@/hooks/useComputingResource'; import { to } from '@/utils/promise'; import { Select, type SelectProps } from 'antd'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import FormInfo from '../FormInfo'; import { paramSelectConfig } from './config'; @@ -36,69 +36,105 @@ function ParameterSelect({ dataType, display = false, value, - isPipeline = false, + // isPipeline = false, onChange, ...rest }: ParameterSelectProps) { const [options, setOptions] = useState([]); const propsConfig = paramSelectConfig[dataType]; - const valueText = typeof value === 'object' && value !== null ? value.value : value; + const { + getLabel, + getValue, + getOptions, + filterOption, + fieldNames, + optionFilterProp, + isObjectValue, + } = propsConfig; + const selectValue = typeof value === 'object' && value !== null ? value.value : value; + // 数据集、模型、服务，对象转换成 json 字符串 + const valueText = + typeof selectValue === 'object' && selectValue !== null ? getValue(selectValue) : selectValue; const [resourceStandardList] = useComputingResource(); - const computingResource = isPipeline - ? resourceStandardList.map((v) => ({ - ...v, - id: String(v.id), - })) - : resourceStandardList; + // const computingResource = isPipeline + // ? resourceStandardList.map((v) => ({ + // ...v, + // id: String(v.id), + // })) + // : resourceStandardList; + + const objectOptions = useMemo(() => { + return options?.map((v) => ({ + label: getLabel(v), + value: getValue(v), + })); + }, [getLabel, getValue, options]); + + const valueMap = useMemo(() => { + const map = new Map(); + options?.forEach((v) => { + map.set(getValue(v), v); + }); + + return map; + }, [options, getValue]); useEffect(() => { // 获取下拉数据 const getSelectOptions = async () => { - if (!propsConfig) { - return; - } - const getOptions = propsConfig.getOptions; - const [res] = await to(getOptions()); - if (res) { - setOptions(res); + if (getOptions) { + const [res] = await to(getOptions()); + if (res) { + setOptions(res); + } } }; getSelectOptions(); - }, [propsConfig]); + }, [getOptions]); - const selectOptions = dataType === 'resource' ? computingResource : options; + const selectOptions = dataType === 'resource' ? resourceStandardList : objectOptions; const handleChange = (text: string) => { - if (typeof value === 'object' && value !== null) { - onChange?.({ - ...value, - value: text, - }); + // 数据集、模型、服务，转换成对象 + if (isObjectValue) { + // 设置为 null 是因为 antv g6 的 bug + // 如果值为 undefined 时， graph.changeData(data) 会保留前面的值 + const selectValue = text ? valueMap.get(text) : null; + if (typeof value === 'object' && value !== null) { + onChange?.({ + ...value, + value: selectValue, + }); + } else { + onChange?.(selectValue); + } } else { - onChange?.(text); + if (typeof value === 'object' && value !== null) { + onChange?.({ + ...value, + value: text, + }); + } else { + onChange?.(text); + } } }; // 只用于展示，FormInfo 组件带有 Tooltip if (display) { return ( - + ); } return (