fix: 新建数据集、模型删除文件时，调用接口删除

react-ui/src/pages/Dataset/components/AddDatasetModal/index.tsx

@@ -4,7 +4,12 @@ import KFModal from '@/components/KFModal';
 import { CategoryData, DataSource, ResourceType, resourceConfig } from '@/pages/Dataset/config';
 import { addDataset } from '@/services/dataset/index.js';
 import { to } from '@/utils/promise';
-import { getFileListFromEvent, limitUploadFileType, validateUploadFiles } from '@/utils/ui';
+import {
+  getFileListFromEvent,
+  limitUploadFileType,
+  removeUploadedFile,
+  validateUploadFiles,
+} from '@/utils/ui';
 import {
   Button,
   Form,
@@ -29,11 +34,6 @@ interface AddDatasetModalProps extends Omit<ModalProps, 'onOk'> {
 
 function AddDatasetModal({ typeList, tagList, onOk, ...rest }: AddDatasetModalProps) {
   const [uuid] = useState(Date.now());
-  // const [clusterOptions, setClusterOptions] = useState<DictValueEnumObj[]>([]);
-
-  // useEffect(() => {
-  //   getClusterOptions();
-  // }, []);
 
   // 上传组件参数
   const uploadProps: UploadProps = {
@@ -44,16 +44,9 @@ function AddDatasetModal({ typeList, tagList, onOk, ...rest }: AddDatasetModalPr
     defaultFileList: [],
     accept: '.zip,.tgz',
     beforeUpload: limitUploadFileType('zip,tgz'),
+    onRemove: removeUploadedFile,
   };
 
-  // 获取集群版本数据
-  // const getClusterOptions = async () => {
-  //   const [res] = await to(getDictSelectOption('available_cluster'));
-  //   if (res) {
-  //     setClusterOptions(res);
-  //   }
-  // };
-
   // 上传请求
   const createDataset = async (params: any) => {
     const [res] = await to(addDataset(params));
@@ -113,7 +106,7 @@ function AddDatasetModal({ typeList, tagList, onOk, ...rest }: AddDatasetModalPr
             },
           ]}
         >
-          <Input placeholder="请输入数据名称" showCount allowClear maxLength={50} />
+          <Input placeholder="请输入数据名称" showCount allowClear maxLength={40} />
         </Form.Item>
         <Form.Item
           label="数据集版本"

react-ui/src/pages/Dataset/components/AddModelModal/index.tsx

@@ -4,7 +4,7 @@ import KFModal from '@/components/KFModal';
 import { CategoryData, DataSource, ResourceType, resourceConfig } from '@/pages/Dataset/config';
 import { addModel } from '@/services/dataset/index.js';
 import { to } from '@/utils/promise';
-import { getFileListFromEvent, validateUploadFiles } from '@/utils/ui';
+import { getFileListFromEvent, removeUploadedFile, validateUploadFiles } from '@/utils/ui';
 import {
   Button,
   Form,
@@ -37,6 +37,7 @@ function AddModelModal({ typeList, tagList, onOk, ...rest }: AddModelModalProps)
       Authorization: getAccessToken() || '',
     },
     defaultFileList: [],
+    onRemove: removeUploadedFile,
   };
 
   // 上传请求
@@ -96,7 +97,7 @@ function AddModelModal({ typeList, tagList, onOk, ...rest }: AddModelModalProps)
             },
           ]}
         >
-          <Input placeholder="请输入模型名称" showCount allowClear maxLength={50} />
+          <Input placeholder="请输入模型名称" showCount allowClear maxLength={40} />
         </Form.Item>
         <Form.Item
           label="模型版本"

react-ui/src/pages/Dataset/components/AddVersionModal/index.tsx

@@ -3,7 +3,7 @@ import KFIcon from '@/components/KFIcon';
 import KFModal from '@/components/KFModal';
 import { DataSource, ResourceType, resourceConfig } from '@/pages/Dataset/config';
 import { to } from '@/utils/promise';
-import { getFileListFromEvent, validateUploadFiles } from '@/utils/ui';
+import { getFileListFromEvent, removeUploadedFile, validateUploadFiles } from '@/utils/ui';
 import {
   Button,
   Form,
@@ -50,6 +50,7 @@ function AddVersionModal({
     defaultFileList: [],
     beforeUpload: config.beforeUpload,
     accept: config.uploadAccept,
+    onRemove: removeUploadedFile,
   };
 
   // 上传请求

react-ui/src/services/dataset/index.js

@@ -181,4 +181,13 @@ export function compareModelVersion(data) {
     method: 'POST',
     data,
   });
-}
+}
+
+
+// 删除上传的文件
+export function deleteUploadFileReq(params) {
+  return request(`/api/mmp/newdataset/deleteFile`, {
+    method: 'DELETE',
+    params,
+  });
+}

react-ui/src/types.ts

@@ -136,3 +136,17 @@ export type NodeStatus = {
   startedAt: string;
   finishedAt: string;
 };
+
+// 应用响应
+export type AppResponse<T> = {
+  code: number;
+  msg: string;
+  data: T;
+};
+
+// 上传文件的响应
+export type UploadFileRes = {
+  fileName: string;
+  fileSize: number;
+  url: string;
+};

react-ui/src/utils/ui.tsx

@@ -5,8 +5,10 @@
  */
 import { PageEnum } from '@/enums/pagesEnums';
 import { removeAllPageCacheState } from '@/hooks/useCacheState';
+import { deleteUploadFileReq } from '@/services/dataset/index.js';
 import themes from '@/styles/theme.less';
-import { type ClientInfo } from '@/types';
+import { type AppResponse, type ClientInfo, type UploadFileRes } from '@/types';
+import { to } from '@/utils/promise';
 import { history } from '@umijs/max';
 import {
   Modal,
@@ -162,6 +164,32 @@ export const limitUploadFileType = (type: string) => {
   };
 };
 
+/**
+ * 删除已上传的文件
+ * @param file - 已上传的文件
+ */
+export const removeUploadedFile = async (file: UploadFile<AppResponse<UploadFileRes[]>>) => {
+  const { status, response } = file;
+  const { code, data } = response ?? {};
+  if (status === 'done' && code === 200 && Array.isArray(data) && data.length > 0) {
+    const uploadRes = data[0];
+    const { fileName, url } = uploadRes;
+    const [res] = await to(
+      deleteUploadFileReq({
+        fileName,
+        url,
+      }),
+    );
+    if (res) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  return true;
+};
+
 /**
  * 删除 FormList 表单项，如果表单项没有值，则直接删除，否则弹出确认框
  * @param form - From实例