feat: 数据管理相关代码增加注释

src/views/Project/ProjectData/UpLoaderFile/index.tsx

 import React, { useState, useImperativeHandle, useCallback } from "react";
 
 import style from "./index.module.css";
-import { TextField } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
 import { Button } from "@mui/material";
-import { checkIsNumberLetterChinese, uuid } from "@/utils/util";
+import { uuid } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
 import { useDropzone } from "react-dropzone";
 import Table from "@/components/Material.Ui/Table";

src/views/Project/ProjectData/index.tsx

@@ -66,34 +66,37 @@ const ProjectData = observer(() => {
   const projectId = useMemo(() => {
     return toJS(currentProjectStore.currentProjectInfo.id);
   }, [currentProjectStore]);
+  // 当前文件路径
+  const [path, setPath] = useState("/");
   const [tableLoadding, setTableLoadding] = useState(false);
   // 防止用户连续点击文件夹造成路径显示错误
-  const [debounce, setDebounce] = useState(false)
+  const [debounce, setDebounce] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  // 点击操作列中的按钮 会设置当前点击的文件
   const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
   const [deleteloading, setDeleteloading] = useState(false);
-  const [path, setPath] = useState("/");
+  // 1文件   2数据集
   const [activeTab, setActiveTab] = useState(1);
+  // 复选框选中的文件名称数组
   const [selectIds, setSelectIds] = useState<Array<string>>([]);
-  let tableRef: any = React.createRef();
-  useEffect(() => {
-    setSelectIds([]);
-  }, [activeTab]);
-  const handleChangeListType = (e: number) => {
-    if (isPass('PROJECT_DATA_TYPECHANAGE')) {
-      setActiveTab(e)
-      setSelectIds([]);
-      tableRef?.current?.initSelectedFunc([]);
-    }
-  }
   const [keyWord, setKeyWord] = useState("");
   const [fileToken, setFileToken] = useState("");
-
-  // 文件列表
+  // 文件夹、文件列表
   const [list, setList] = useState<any>([]);
   // 数据集列表  不带文件
   const [dataSetList, setDataSetList] = useState<any>([]);
+  let tableRef: any = React.createRef();
 
+  // 切换文件、数据集
+  const handleChangeListType = (e: number) => {
+    if (isPass("PROJECT_DATA_TYPECHANAGE")) {
+      setActiveTab(e);
+      setSelectIds([]);
+      tableRef?.current?.initSelectedFunc([]);
+    }
+  };
+
+  // 列表展示的数据
   const showList = useMemo(() => {
     if (activeTab === 1) {
       return list;
@@ -105,12 +108,14 @@ const ProjectData = observer(() => {
     }
   }, [list, dataSetList, activeTab]);
 
+  // 获取文件token
   const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
     onSuccess: (res: any) => {
       setFileToken(res.data);
     },
   });
 
+  // 全局搜索数据集
   const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
     onSuccess: (res: any) => {
       const dataSetList = res.data.map((item: any) => {
@@ -121,11 +126,12 @@ const ProjectData = observer(() => {
       });
       setDataSetList(dataSetList);
       setSelectIds([]);
-      setDebounce(false)
+      setDebounce(false);
       tableRef?.current?.initSelectedFunc([]);
     },
   });
 
+  // 获取某路径下的数据集
   const { run: getDataFindRun } = useMyRequest(getDataFind, {
     onSuccess: (res: any) => {
       const dataSetList = res.data.map((item: any) => {
@@ -136,11 +142,12 @@ const ProjectData = observer(() => {
       });
       setDataSetList(dataSetList);
       setSelectIds([]);
-      setDebounce(false)
+      setDebounce(false);
       tableRef?.current?.initSelectedFunc([]);
     },
   });
 
+  // 获取某路径下的数据集
   const getDataSetList = useCallback(() => {
     if (keyWord) {
       return;
@@ -152,6 +159,7 @@ const ProjectData = observer(() => {
     }
   }, [keyWord, path, projectId, getDataFindRun]);
 
+  //  全局搜索数据集
   const getDataSetListSearch = useCallback(() => {
     if (keyWord) {
       return getDataFileSearchRun({
@@ -185,7 +193,7 @@ const ProjectData = observer(() => {
           setList([]);
         }
         setSelectIds([]);
-        setDebounce(false)
+        setDebounce(false);
       });
     }
   }, [fileToken, path, projectId, keyWord]);
@@ -216,14 +224,15 @@ const ProjectData = observer(() => {
             setList([]);
           }
           setSelectIds([]);
-          setDebounce(false)
+          setDebounce(false);
         });
       }
     }
   }, [fileToken, projectId, keyWord, getList]);
 
+  // 刷新
   const handleRefresh = () => {
-    if (isPass('PROJECT_DATA_REFRESH', 'USER')) {
+    if (isPass("PROJECT_DATA_REFRESH", "USER")) {
       tableRef?.current?.initSelectedFunc([]);
       setSelectIds([]);
       if (keyWord) {
@@ -236,12 +245,14 @@ const ProjectData = observer(() => {
     }
   };
 
+  // 项目切换时重新获取文件token
   useEffect(() => {
     getDataFileTokenRun({
       id: currentProjectStore.currentProjectInfo.id as string,
     });
   }, [getDataFileTokenRun, currentProjectStore]);
 
+  // 搜索值改变
   const handleKeyWordChange = (e: any) => {
     if (e.target.value.length > 30) {
       return;
@@ -249,6 +260,7 @@ const ProjectData = observer(() => {
     setKeyWord(e.target.value);
   };
 
+  // 按回车搜索
   const handleKeyWordChangeKeyUp = (e: any) => {
     if (e.keyCode === 13) {
       searchFileList();
@@ -257,27 +269,36 @@ const ProjectData = observer(() => {
   };
 
   // todo name sort
+  // table配置
   const versionsHeadCells = [
     { id: "checkbox" },
     { id: "name", numeric: false, label: "名称", width: "25%" },
     { id: "size", numeric: false, label: "大小", width: "25%", sort: true },
-    { id: "mtime", numeric: false, label: "创建时间", width: "25%", sort: true },
+    {
+      id: "mtime",
+      numeric: false,
+      label: "创建时间",
+      width: "25%",
+      sort: true,
+    },
     { id: "caozuo", numeric: false, label: "操作", width: "25%" },
   ];
 
+  // 点击复选框
   const hanldeCheckbox = (e: any) => {
     const selectarr = e.map((item: any) => {
-      let andIndex = item.indexOf("&index=")
-      return item.slice(5, andIndex)
-    })
+      let andIndex = item.indexOf("&index=");
+      return item.slice(5, andIndex);
+    });
     setSelectIds(selectarr);
   };
 
+  // 文件夹下钻
   const handleViewFolders = (item: any) => {
     if (debounce) {
-      return
+      return;
     } else {
-      setDebounce(true)
+      setDebounce(true);
       if (path === "/") {
         setPath(`/${item.name}`);
       } else {
@@ -286,11 +307,13 @@ const ProjectData = observer(() => {
     }
   };
 
+  // 显示删除确认框
   const hanleDeleteFile = (item: any) => {
     setCurrentOperateFile(item);
     setDeleteDialogOpen(true);
   };
 
+  // table配置
   const renderName = (item: any) => {
     if (item.type === "directory") {
       return (
@@ -322,23 +345,28 @@ const ProjectData = observer(() => {
     }
   };
 
+  // table配置
   const renderSize = (item: any) => {
     if (item.type === "dataSet") {
       return `${item.size}条`;
     }
-    return `${item.size ? String((Number(item.size)/1048576).toFixed(2)) + 'MB' : '-'}`;
+    return `${
+      item.size ? String((Number(item.size) / 1048576).toFixed(2)) + "MB" : "-"
+    }`;
   };
 
+  // table配置
   const renderMtime = (item: any) => {
-    return String(moment(item.mtime).format("YYYY-MM-DD hh:mm:ss"))
+    return String(moment(item.mtime).format("YYYY-MM-DD hh:mm:ss"));
   };
 
+  // table配置
   const renderButtons = (item: any) => {
     return (
       <span>
-        {item.type !== 'dataSet' && item.type !== 'directory' && (
+        {item.type !== "dataSet" && item.type !== "directory" && (
           <Button
-            sx={{ position: "relative", left: "-18px", }}
+            sx={{ position: "relative", left: "-18px" }}
             variant="text"
             size="small"
             disabled={!isPass("PROJECT_DATA_DOWNLOAD")}
@@ -351,7 +379,9 @@ const ProjectData = observer(() => {
           variant="text"
           size="small"
           onClick={() => hanleShowMoveFileDialog(item)}
-          disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", 'USER')}
+          disabled={
+            selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", "USER")
+          }
         >
           移动至
         </Button>
@@ -361,7 +391,9 @@ const ProjectData = observer(() => {
           size="small"
           color="error"
           onClick={() => hanleDeleteFile(item)}
-          disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", 'USER')}
+          disabled={
+            selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", "USER")
+          }
         >
           删除
         </Button>
@@ -369,17 +401,20 @@ const ProjectData = observer(() => {
     );
   };
 
+  // 文件上传
   let UpLoaderFileRef: any = React.createRef();
   const hanleShowUpLoaderFileDialog = () => {
     UpLoaderFileRef.current.showDialog();
   };
 
+  // 新增文件
   let addFolderRef: any = React.createRef();
 
   const hanleShowAddFolderDialog = () => {
     addFolderRef.current.showDialog();
   };
 
+  // 文件移动
   let moveFileRef: any = React.createRef();
 
   const hanleShowMoveFileDialog = (item: any) => {
@@ -387,10 +422,12 @@ const ProjectData = observer(() => {
     moveFileRef.current.showDialog();
   };
 
+  // 删除文件
   const handleDeleteDialogClose = () => {
     setDeleteDialogOpen(false);
   };
 
+  // 删除数据集请求
   const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
     onSuccess: (res: any) => {
       Message.success("删除成功");
@@ -400,6 +437,7 @@ const ProjectData = observer(() => {
     },
   });
 
+  // 删除流程判断待优化
   const handleDelete = () => {
     let deletePath = "";
     if (currentOperateFile) {
@@ -485,16 +523,19 @@ const ProjectData = observer(() => {
     }
   };
 
+  // 批量移动
   const handleBatchMove = () => {
     setCurrentOperateFile(null);
     moveFileRef.current.showDialog();
   };
 
+  // 批量删除
   const handleBatchDelete = () => {
     setCurrentOperateFile(null);
     setDeleteDialogOpen(true);
   };
 
+  // 前端展示的文件路径
   const showPath = useMemo(() => {
     if (path === "/") {
       return <span className={style.showPathSpan}>ProjectData</span>;
@@ -575,7 +616,8 @@ const ProjectData = observer(() => {
                   style={{ marginRight: "12px" }}
                   onClick={hanleShowUpLoaderFileDialog}
                   disabled={
-                    selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD", 'USER')
+                    selectIds.length !== 0 ||
+                    !isPass("PROJECT_DATA_UPLOAD", "USER")
                   }
                 >
                   上传文件
@@ -586,7 +628,8 @@ const ProjectData = observer(() => {
                   size="small"
                   onClick={hanleShowAddFolderDialog}
                   disabled={
-                    selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", 'USER')
+                    selectIds.length !== 0 ||
+                    !isPass("PROJECT_DATA_ADDDIR", "USER")
                   }
                 >
                   新建文件夹
@@ -646,7 +689,7 @@ const ProjectData = observer(() => {
                   aria-label="refreshIcon"
                   size="small"
                   onClick={handleRefresh}
-                  disabled={!isPass('PROJECT_DATA_REFRESH', 'USER')}
+                  disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
                 >
                   <RefreshIcon />
                 </IconButton>
@@ -674,12 +717,12 @@ const ProjectData = observer(() => {
               caozuo: renderButtons(item),
             }))}
           ></Table>
-          {
-            showList.length === 0 && <div className={style.noDataBox}>
+          {showList.length === 0 && (
+            <div className={style.noDataBox}>
               <img className={style.noDataImg} src={noFile} alt="" />
               <span className={style.noDataText}>暂未开启模板</span>
             </div>
-          }
+          )}
         </div>
         {selectIds.length > 1 && (
           <div className={style.projectDataStickyBox}>
@@ -689,7 +732,7 @@ const ProjectData = observer(() => {
               size="small"
               style={{ marginRight: "12px" }}
               onClick={handleBatchDelete}
-              disabled={!isPass("PROJECT_DATA_DELETE", 'USER')}
+              disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
             >
               批量删除（{selectIds.length}）
             </Button>
@@ -699,7 +742,7 @@ const ProjectData = observer(() => {
               size="small"
               style={{ marginRight: "24px" }}
               onClick={handleBatchMove}
-              disabled={!isPass("PROJECT_DATA_MOVE", 'USER')}
+              disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
             >
               批量移动（{selectIds.length}）
             </Button>