feat: 模型详情中新增模型版本的增删改，选中树的样式调整

src/global.css

@@ -138,6 +138,12 @@ a.ant-dropdown-trigger {
 .ant-steps .ant-steps-item-active > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
   color: #155BD4;
 }
+.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
+  background-color: #e8effb;
+  width: 100%;
+  border-radius: 4px;
+  padding-top: 4px ;
+}
 /* 表单 */
 .ant-form-item {
   margin-bottom: 16px;

src/global.less

@@ -169,6 +169,13 @@ a.ant-dropdown-trigger{
   }
 }
 
+.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
+  background-color: #e8effb;
+  width: 100%;
+  border-radius: 4px;
+  padding-top: 4px ;
+}
+
 /* 表单 */
 .ant-form-item {
   margin-bottom: 16px;

src/pages/Resource/AlgorithmModelList/detail.tsx

@@ -1,9 +1,22 @@
 import { postAlgorithmModelGetAlgorithmModelById } from '@/services/resource/AlgorithmModel';
-import { postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion';
+import { deleteModelVersionDeleteModelVersion, postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion';
-import { ArrowLeftOutlined } from '@ant-design/icons';
+import { ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons';
-import { PageContainer, ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
+import {
-import { FormattedMessage, useParams } from '@umijs/max';
+  ActionType,
-import React from 'react';
+  PageContainer,
+  ProCard,
+  ProColumns,
+  ProDescriptions,
+  ProTable,
+} from '@ant-design/pro-components';
+import { Access, FormattedMessage, history, useAccess, useParams, useIntl } from '@umijs/max';
+
+import { Button, message } from 'antd';
+import React, { useRef, useState } from 'react';
+import MyCreateForm from '../ModelVersionList/components/MyCreateForm';
+import TableActionCard from '@/components/TableActionCard';
+import IsDelete from '@/components/TableActionCard/isDelete';
+import UpdateForm from '../ModelVersionList/components/UpdateForm';
 
 /**styles */
 
@@ -17,7 +30,37 @@ const headerStylesProps = {
   color: '#333333',
 };
 
-const columns: ProColumns<API.ModelVersion>[] = [
+
+
+const AlgorithmModelDetail: React.FC = () => {
+  const access = useAccess();
+  const intl = useIntl();
+
+  const actionRef = useRef<ActionType>();
+
+  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
+  const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
+
+  const [currentRow, setCurrentRow] = useState<API.ModelVersion>();
+  const [selectedRowsState, setSelectedRows] = useState<API.ModelVersion[]>([]);
+  const [model_fk_id_open, set_model_fk_id_open] = useState(false);
+  const [model_fk_id, set_model_fk_id] = useState<API.AlgorithmModel>();
+  const [model_fk_id_column_open, set_model_fk_id_column_open] = useState(false);
+  const [modelFkIdIds, setModelFkIdIds] = useState([]);
+  const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({});
+
+  const handleDestroy = async (selectedRow: API.ModelVersion) => {
+    deleteModelVersionDeleteModelVersion({ id: selectedRow.id })
+      .then(() => {
+        message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+        actionRef.current?.reload();
+      })
+      .catch(() => {
+        message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+      });
+  };
+
+  const columns: ProColumns<API.ModelVersion>[] = [
     {
       title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
       dataIndex: 'id',
@@ -100,9 +143,46 @@ const columns: ProColumns<API.ModelVersion>[] = [
       hideInSearch: true,
       valueType: 'dateTime',
     },
-];
+    {
-
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
-const AlgorithmModelDetail: React.FC = () => {
+      dataIndex: 'option',
+      valueType: 'option',
+      fixed: 'right',
+      render: (_, record) => [
+        <TableActionCard
+          key="TableActionCardRef"
+          renderActions={[
+            {
+              key: 'update',
+              renderDom: (
+                <Button
+                  key="update"
+                  type="link"
+                  size="small"
+                  onClick={() => {
+                    setUpdateModalOpen(true);
+                    setCurrentRow(record);
+                  }}
+                >
+                  <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
+                </Button>
+              ),
+            },
+            {
+              key: 'destroy',
+              renderDom: (
+                <IsDelete
+                  deleteApi={() => {
+                    handleDestroy(record).then(() => {});
+                  }}
+                ></IsDelete>
+              ),
+            },
+          ]}
+        ></TableActionCard>,
+      ],
+    },
+  ];
   //  TODO 需要将业务层代码转移到此处
   // TODO 按UI原稿重新布局此模块
   // 关闭页面
@@ -110,6 +190,26 @@ const AlgorithmModelDetail: React.FC = () => {
     history.back();
   };
 
+  const handleCreateModal = () => {
+    if (createModalOpen) {
+      setCreateModalOpen(false);
+      setCurrentRow(undefined);
+    } else {
+      setCreateModalOpen(true);
+    }
+  };
+
+  const handleUpdateModal = () => {
+    if (updateModalOpen) {
+      setUpdateModalOpen(false);
+      setCurrentRow(undefined);
+    } else {
+      setUpdateModalOpen(true);
+    }
+  };
+
+
+
   const routeParams = useParams();
   return (
     <PageContainer>
@@ -161,14 +261,33 @@ const AlgorithmModelDetail: React.FC = () => {
         </ProCard>
         <ProCard
           title="模型版本"
+          extra={<><Access
+            accessible={access.canUpdate(history.location.pathname)}
+            key={`${history.location.pathname}-add`}
+          >
+            <Button
+              type="primary"
+              key="primary"
+              onClick={() => {
+                setCreateModalOpen(true);
+              }}
+            >
+              <PlusOutlined />{' '}
+              <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
+            </Button>
+          </Access></>}
           style={{ margin: 0, padding: 0 }}
           headStyle={{ paddingTop: 20, paddingBottom: 20, ...headerStylesProps }}
           bodyStyle={{ margin: 0, padding: 0 }}
         >
           <ProTable
+            actionRef={actionRef}
             tableStyle={{ paddingTop: 15, paddingBottom: 15 }}
             columns={columns}
             cardBordered
+            toolBarRender={() => [
+              
+            ]}
             request={async (params = {}, sort) => {
               const { current, ...rest } = params;
               const reqParams = {
@@ -232,6 +351,20 @@ const AlgorithmModelDetail: React.FC = () => {
           />
         </ProCard>
       </ProCard>
+      <MyCreateForm
+        createModalOpen={createModalOpen}
+        values={{modelFkId: Number(routeParams?.id)}}
+        handleModal={handleCreateModal}
+        reload={actionRef.current?.reload}
+        currentDefaultFieldsData={{modelFkId: Number(routeParams?.id)}}
+      />
+       <UpdateForm
+        updateModalOpen={updateModalOpen}
+        values={currentRow || {}}
+        handleModal={handleUpdateModal}
+        reload={actionRef.current?.reload}
+        currentDefaultFieldsData={{modelFkId: Number(routeParams?.id)}}
+      />
     </PageContainer>
   );
 };

src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx

@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-11-01 13:56:33
  * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-11-22 13:50:12
+ * @LastEditTime: 2023-12-05 17:13:10
  * @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\MyCreateForm.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -22,7 +22,7 @@ import { FormListActionType } from '@ant-design/pro-form/lib';
 import { FormattedMessage, useIntl } from '@umijs/max';
 import { Form, Modal, UploadFile, message } from 'antd';
 import yaml from 'js-yaml';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   proFormMaxItemStyleProps,
   proFormMaxModelWidth,
@@ -42,6 +42,7 @@ export type MyCreateFormProps = {
   handleModal: () => void;
   values: Partial<API.ModelVersion>;
   reload: any;
+  currentDefaultFieldsData?: Record<string,any>
 };
 const waitTime = (time: number = 100) => {
   return new Promise((resolve) => {
@@ -54,6 +55,7 @@ interface ProjectConfig {
   params: Array<object>;
 }
 const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
+
   const actionFormListRef = useRef<
     FormListActionType<{
       name: string;
@@ -77,6 +79,8 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
     setFileList([...curFile]);
   };
   const intl = useIntl();
+  const [isHasModelFkId, setIsHasModelFkId] = useState<boolean>(false)
+
   const [dataFormList, setDataFormList] = useState<any>([]);
   const dataFormListRef = useRef(dataFormList);
   const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
@@ -85,6 +89,18 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
   const [current, setCurrent] = useState(0);
   const formRef = useRef<ProFormInstance>();
   const [configData, setConfigData] = useState<ProjectConfig>({ params: [] });
+
+
+
+  useEffect(()=>{
+    if(props.currentDefaultFieldsData){
+      // 如果是在模型详情新增版本，ModelFkId不可编辑
+      console.log(props.values,'currentDefaultFieldsData')
+      setIsHasModelFkId(true)
+    } else {
+      setIsHasModelFkId(false)
+    }
+  }, [])
   return (
     <StepsForm<{
       name: string;
@@ -152,8 +168,10 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
               defaultMessage: '$$$',
             })}`}
             required={true}
+            initialValue={props.values.modelFkId}
             showSearch
             debounceTime={1000}
+            disabled={isHasModelFkId}
             request={async (keyWord) => {
               const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({
                 keyword: keyWord?.keyWords || '',

src/pages/Resource/ModelVersionList/components/UpdateForm.tsx

@@ -11,7 +11,7 @@ import {
 import { FormattedMessage, useIntl } from '@umijs/max';
 import { Form, message } from 'antd';
 import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
-import React from 'react';
+import React, { useEffect , useState} from 'react';
 export type FormValueType = {
   target?: string;
   template?: string;
@@ -25,11 +25,22 @@ export type UpdateFormProps = {
   handleModal: () => void;
   values: Partial<API.ModelVersion>;
   reload: any;
+  currentDefaultFieldsData?: Record<string,any>
 };
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
   const intl = useIntl();
-  const [form] = Form.useForm<API.ModelVersion>();
+  const [isHasModelFkId, setIsHasModelFkId] = useState<boolean>(false)
 
+  const [form] = Form.useForm<API.ModelVersion>();
+  useEffect(()=>{
+    if(props.currentDefaultFieldsData){
+      // 如果是在模型详情新增版本，ModelFkId不可编辑
+      console.log(props.values,'currentDefaultFieldsData')
+      setIsHasModelFkId(true)
+    } else {
+      setIsHasModelFkId(false)
+    }
+  }, [])
   return (
     <ModalForm<API.ModelVersion>
       width={proFormModelWidth}
@@ -87,6 +98,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
           initialValue={props.values.modelFkId}
           showSearch
           debounceTime={1000}
+          disabled={isHasModelFkId}
           request={async (keyWord) => {
             const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({
               keyword: keyWord?.keyWords || '',

src/pages/Setting/AlgorithmSetting.tsx

@@ -339,6 +339,7 @@ const AlgorithmSetting: React.FC = () => {
               selectedKeys={selectNodes}
               treeData={nodeTreeData}
               onSelect={(selectKeys, info) => {
+                // TODO_1 此处接口需要重新联调
                 console.log(info.node, 'onSelect_info');
                 setSelectNodes(selectKeys);
                 fetchProjectInfoByGroupId(info?.node);