chore: 优化数据集、模型选择，再次打开记录上次的选择

react-ui/src/components/ParameterInput/index.tsx

@@ -66,9 +66,12 @@ function ParameterInput({
                   e.stopPropagation();
                   onChange?.({
                     ...valueObj,
-                    fromSelect: false,
                     value: undefined,
                     showValue: undefined,
+                    fromSelect: false,
+                    activeTab: undefined,
+                    expandedKeys: undefined,
+                    checkedKeys: undefined,
                   });
                 }}
               />

react-ui/src/components/ParameterSelect/index.tsx

@@ -16,6 +16,9 @@ const filterResourceStandard: SelectProps<string, ComputingResource>['filterOpti
   );
 };
 
+// id 从 number 转换为 string
+const convertId = (item: any) => ({ ...item, id: String(item.id) });
+
 type SelectPropsConfig = {
   getOptions: () => Promise<any>;
   fieldNames?: SelectProps['fieldNames'];
@@ -30,7 +33,7 @@ const config: Record<string, SelectPropsConfig> = {
         size: 1000,
         available_range: 0,
       });
-      return res?.data?.content ?? [];
+      return res?.data?.content?.map(convertId) ?? [];
     },
     fieldNames: {
       label: 'name',
@@ -44,7 +47,7 @@ const config: Record<string, SelectPropsConfig> = {
         size: 1000,
         available_range: 0,
       });
-      return res?.data?.content ?? [];
+      return res?.data?.content?.map(convertId) ?? [];
     },
     fieldNames: {
       label: 'name',

react-ui/src/pages/Pipeline/editPipeline/props.tsx

@@ -2,6 +2,7 @@ import KFIcon from '@/components/KFIcon';
 import ParameterInput from '@/components/ParameterInput';
 import ParameterSelect from '@/components/ParameterSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
+import { CommonTabKeys } from '@/enums';
 import { useComputingResource } from '@/hooks/resource';
 import {
   PipelineGlobalParam,
@@ -13,11 +14,9 @@ import { to } from '@/utils/promise';
 import { INode } from '@antv/g6';
 import { Button, Drawer, Form, Input, MenuProps, Select } from 'antd';
 import { NamePath } from 'antd/es/form/interface';
-import { pick } from 'lodash';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import PropsLabel from '../components/PropsLabel';
 import ResourceSelectorModal, {
-  ResourceSelectorResponse,
   ResourceSelectorType,
   selectorTypeConfig,
 } from '../components/ResourceSelectorModal';
@@ -35,12 +34,6 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
     {} as PipelineNodeModelSerialize,
   );
   const [open, setOpen] = useState(false);
-  const [selectedModel, setSelectedModel] = useState<ResourceSelectorResponse | undefined>(
-    undefined,
-  ); // 选择的模型，为了再次打开时恢复原来的选择
-  const [selectedDataset, setSelectedDataset] = useState<ResourceSelectorResponse | undefined>(
-    undefined,
-  ); // 选择的数据集，为了再次打开时恢复原来的选择
   const [resourceStandardList, filterResourceStandard] = useComputingResource(); // 资源规模
   const [menuItems, setMenuItems] = useState<MenuProps['items']>([]);
 
@@ -94,8 +87,6 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
         } catch (error) {
           console.log(error);
         }
-        setSelectedModel(undefined);
-        setSelectedDataset(undefined);
         setOpen(true);
 
         // 参数下拉菜单
@@ -109,57 +100,69 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
 
   // 选择数据集、模型、镜像
   const selectResource = (
-    name: NamePath,
-    item: PipelineNodeModelParameter | { item_type: string },
+    formItemName: NamePath,
+    item: PipelineNodeModelParameter | Pick<PipelineNodeModelParameter, 'item_type'>,
   ) => {
     let type: ResourceSelectorType;
-    let resource: any;
     switch (item.item_type) {
       case 'dataset':
         type = ResourceSelectorType.Dataset;
-        resource = selectedDataset;
         break;
       case 'model':
         type = ResourceSelectorType.Model;
-        resource = selectedModel;
         break;
       default:
         type = ResourceSelectorType.Mirror;
         break;
     }
+
+    const fieldValue = form.getFieldValue(formItemName);
+    const activeTab = fieldValue?.activeTab as CommonTabKeys | undefined;
+    const expandedKeys = Array.isArray(fieldValue?.expandedKeys) ? fieldValue?.expandedKeys : [];
+    const checkedKeys = Array.isArray(fieldValue?.checkedKeys) ? fieldValue?.checkedKeys : [];
     const { close } = openAntdModal(ResourceSelectorModal, {
       type,
-      defaultExpandedKeys: resource ? [resource.id] : [],
-      defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
-      defaultActiveTab: resource?.activeTab,
+      defaultExpandedKeys: expandedKeys,
+      defaultCheckedKeys: checkedKeys,
+      defaultActiveTab: activeTab,
       onOk: (res) => {
         if (res) {
           if (type === ResourceSelectorType.Mirror) {
-            const path = res.path;
-            if (name === 'image') {
-              form.setFieldValue(name, path);
+            const { activeTab, id, version, path } = res;
+            if (formItemName === 'image') {
+              form.setFieldValue(formItemName, path);
             } else {
-              form.setFieldValue(name, { ...item, value: path, showValue: path, fromSelect: true });
+              form.setFieldValue(formItemName, {
+                ...item,
+                value: path,
+                showValue: path,
+                fromSelect: true,
+                activeTab,
+                expandedKeys: [id],
+                checkedKeys: [`${id}-${version}`],
+              });
             }
           } else {
-            const jsonObj = pick(res, ['id', 'version', 'path']);
+            const { activeTab, id, name, version, path } = res;
+            const jsonObj = {
+              id,
+              version,
+              path,
+            };
             const value = JSON.stringify(jsonObj);
-            const showValue = `${res.name}:${res.version}`;
-            form.setFieldValue(name, { ...item, value, showValue, fromSelect: true });
-
-            if (type === ResourceSelectorType.Dataset) {
-              setSelectedDataset(res);
-            } else if (type === ResourceSelectorType.Model) {
-              setSelectedModel(res);
-            }
+            const showValue = `${name}:${version}`;
+            form.setFieldValue(formItemName, {
+              ...item,
+              value,
+              showValue,
+              fromSelect: true,
+              activeTab,
+              expandedKeys: [id],
+              checkedKeys: [`${id}-${version}`],
+            });
           }
         } else {
-          if (type === ResourceSelectorType.Dataset) {
-            setSelectedDataset(undefined);
-          } else if (type === ResourceSelectorType.Model) {
-            setSelectedModel(undefined);
-          }
-          form.setFieldValue(name, '');
+          form.setFieldValue(formItemName, '');
         }
         close();
       },
@@ -167,7 +170,7 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
   };
 
   // 获取选择数据集、模型后面按钮 icon
-  const getSelectBtnIcon = (item: PipelineNodeModelParameter | { item_type: string }) => {
+  const getSelectBtnIcon = (item: { item_type: string }) => {
     const type = item.item_type;
     let selectorType: ResourceSelectorType;
     if (type === 'dataset') {