feat : 完成项目列表 新建文件夹联调

src/api/fileserver/CloudEController.ts

@@ -16,91 +16,116 @@ let headers: any = {
 };
 
 class CloudEController {
+  // 新建文件夹
+  static JobFileNewFolder(url: any, filetoken: string, projectId: string) {
+    if (ApiUtils.getAuthorizationHeaders(headers)) {
+      url = url += urlToken(filetoken, projectId);
+      headers["Content-Type"] = "multipart/form-data";
+      return axios.post(
+        APIOPTION() + "/createdir" + url,
+        {},
+        {
+          headers: headers,
+        }
+      );
+    }
+  }
   //文件 删除
-  static JobOutFileDel(urls: any,filetoken: string) {
-    if (
-      ApiUtils.getAuthorizationHeaders(headers)
-    ) {
+  static JobOutFileDel(urls: any, filetoken: string, projectId: string) {
+    if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
       headers["delfilepath"] = Base64.stringify(Utf8.parse(urls));
       let url = "";
       if (getLoaclStorageOfKey("userinfo")) {
-        url += urlToken(filetoken);
+        url += urlToken(filetoken, projectId);
       }
       axios
         .get(APIOPTION() + "/delete/" + url, {
           headers: headers,
         })
         .then(function (response) {
-          console.log(response)
+          console.log(response);
         })
         .catch(function (error) {
-          console.log(error)
+          console.log(error);
         });
     }
   }
   // 文件列表
   static JobOutFileList(
     url: any,
-    showHide = false,
     filetoken: string,
+    projectId: string,
+    showHide = false,
     items?: any
   ) {
     if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
       // headers['parentName'] = ''
       if (getLoaclStorageOfKey("userinfo")) {
-        url += urlToken(filetoken);
+        url += urlToken(filetoken, projectId);
       }
-      axios
-        // 查看文件的接口为list(可查看隐藏文件)
-        .get(APIOPTION() + "/list" + url + "&showhidden=" + showHide, {
+      return axios.get(
+        APIOPTION() + "/list" + url + "&showhidden=" + showHide,
+        {
           headers: headers,
-        })
-        .then(function (response) {
-          console.log(response);
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
+        }
+      );
+      // axios
+      //   // 查看文件的接口为list(可查看隐藏文件)
+      //   .get(APIOPTION() + "/list" + url + "&showhidden=" + showHide, {
+      //     headers: headers,
+      //   })
+      //   .then(function (response) {
+      //     console.log(response);
+      //   })
+      //   .catch(function (error) {
+      //     console.log(error);
+      //   });
     }
   }
   // 文件移动
-  static JobOutFileListMove(url: any, filetoken: string) {
-    if (
-      ApiUtils.getAuthorizationHeaders(headers)
-    ) {
+  static JobOutFileListMove(url: any, filetoken: string, projectId: string) {
+    if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
       if (getLoaclStorageOfKey("userinfo")) {
-        url += urlToken(filetoken);
+        url += urlToken(filetoken, projectId);
       }
-      axios
-        .get(APIOPTION() + "/download" + url, {
-          headers: headers,
-        })
-        .then(function (response) {
-          console.log(response)
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
+      return axios.get(APIOPTION() + "/download" + url, {
+        headers: headers,
+      });
+
+      // axios
+      //   .get(APIOPTION() + "/download" + url, {
+      //     headers: headers,
+      //   })
+      //   .then(function (response) {
+      //     console.log(response);
+      //   })
+      //   .catch(function (error) {
+      //     console.log(error);
+      //   });
     }
   }
   // // 全局搜索 文件名
-  static JobSearchFileList(url: any, base: any, showHide = false, filetoken: string) {
-    if (
-      ApiUtils.getAuthorizationHeaders(headers)
-    ) {
+  static JobSearchFileList(
+    url: any,
+    base: any,
+    filetoken: string,
+    projectId: string,
+    showHide = false
+  ) {
+    if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
       if (getLoaclStorageOfKey("userinfo")) {
-        url = urlToken(filetoken) + "&q=" + url;
+        url = urlToken(filetoken, projectId) + "&q=" + url;
       }
       axios
         .get(APIOPTION() + "/search" + base + url + "&showhidden=" + showHide, {
           headers: headers,
         })
         .then(function (response) {
-          console.log(response)
+          console.log(response);
         })
         .catch(function (error) {
           console.log(error);
@@ -109,23 +134,29 @@ class CloudEController {
   }
 
   // 文件移动
-  static JobFileMove(url: any, original_filepath: any, value: any, filetoken: string) {
+  static JobFileMove(
+    url: any,
+    original_filepath: any,
+    value: any,
+    filetoken: string,
+    projectId: string
+  ) {
     if (ApiUtils.getAuthorizationHeaders(headers)) {
-      url = url += urlToken(filetoken)
-      headers['Content-Type'] = 'multipart/form-data';
-      headers['originalfilepath'] = encodeURIComponent(original_filepath)
-      let param = new FormData()
-      param.append('', value)
+      url = url += urlToken(filetoken, projectId);
+      headers["Content-Type"] = "multipart/form-data";
+      headers["originalfilepath"] = encodeURIComponent(original_filepath);
+      let param = new FormData();
+      param.append("", value);
       axios
-        .post(APIOPTION() + '/rename' + url, param, {
-          headers: headers
-        })
-        .then(response => {
-          console.log(response)
+        .post(APIOPTION() + "/rename" + url, param, {
+          headers: headers,
         })
-        .catch(error => {
-          console.log(error)
+        .then((response) => {
+          console.log(response);
         })
+        .catch((error) => {
+          console.log(error);
+        });
     }
   }
 }

src/api/fileserver/raysyncApi.ts

@@ -103,33 +103,36 @@ const ZONEID = (params: string) => {
   return currentRegion[params || "id"] || "";
 };
 
-const urlToken = (filetoken: string, root?: string) => {
+const urlToken = (filetoken: string, projectId: string) => {
   let token = getLoaclStorageOfKey("token_key").access_token;
-  let json = getLoaclStorageOfKey("current-region");
-  const userInfo = getLoaclStorageOfKey("userinfo");
-  if (json["location"] && json["location"] === "ON_PREMISE") {
-    return `?username=${
-      userInfo["name"]
-    }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`; // 之前的filetoken是： userInfo["shareFileAccessToken"]
-  }
-  if (root && root === "home") {
-    return `?username=${
-      userInfo["homeDirectoryMountPoint"]
-    }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`;
-  }
-  // 是否共有文件系统
-  if (
-    localStorage.getItem("isShareFileSystem") &&
-    localStorage.getItem("isShareFileSystem") === "true"
-  ) {
-    return `?username=${
-      userInfo["shareDirectoryMountPoint"]
-    }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=true`;
-  } else {
-    return `?username=${
-      userInfo["homeDirectoryMountPoint"]
-    }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`;
-  }
+  return `?username=${projectId}&token=${token}&filetoken=${encodeURIComponent(
+    filetoken
+  )}&share=false&project=true`;
+  // let json = getLoaclStorageOfKey("current-region");
+  // const userInfo = getLoaclStorageOfKey("userinfo");
+  // if (json["location"] && json["location"] === "ON_PREMISE") {
+  //   return `?username=${
+  //     userInfo["name"]
+  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`; // 之前的filetoken是： userInfo["shareFileAccessToken"]
+  // }
+  // if (root && root === "home") {
+  //   return `?username=${
+  //     userInfo["homeDirectoryMountPoint"]
+  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`;
+  // }
+  // // 是否共有文件系统
+  // if (
+  //   localStorage.getItem("isShareFileSystem") &&
+  //   localStorage.getItem("isShareFileSystem") === "true"
+  // ) {
+  //   return `?username=${
+  //     userInfo["shareDirectoryMountPoint"]
+  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=true`;
+  // } else {
+  //   return `?username=${
+  //     userInfo["homeDirectoryMountPoint"]
+  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`;
+  // }
 };
 
 const getUuid = () => {

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

@@ -4,8 +4,10 @@ import { TextField } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
 import { checkIsNumberLetterChinese } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
+import CloudEController from "@/api/fileserver/CloudEController";
+
 const AddFolder = (props: any) => {
-  const { list } = props;
+  const { list, path, projectId, fileToken } = props;
   const Message = useMessage();
   let addFolderDialogRef: any = React.createRef();
 
@@ -21,7 +23,18 @@ const AddFolder = (props: any) => {
 
   const handleAddSubmit = () => {
     if (fileName && !fileNameCheck.error) {
+      const newFolderPath =
+        path === "/" ? `${path}${fileName}` : `${path}/${fileName}`;
       // 请求接口
+      CloudEController.JobFileNewFolder(
+        newFolderPath,
+        fileToken,
+        projectId
+      )?.then((res) => {
+        console.log(res);
+        Message.success("新建成功");
+        addFolderDialogRef.current.handleClose();
+      });
     } else {
       Message.info(fileNameCheck.help || "请输入文件夹名称");
     }

src/views/Project/ProjectData/index.tsx

-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 
 import style from "./index.module.css";
 import classnames from "classnames";
@@ -22,6 +22,7 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store";
 import CloudEController from "@/api/fileserver/CloudEController";
+import { toJS } from "mobx";
 // import TreeView from '@mui/lab/TreeView';
 // import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 // import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -59,10 +60,18 @@ const ProjectData = observer(() => {
   const { currentProjectStore } = useStores();
   // const [path, setPath] = useState("/ProjectData");
   const [path, setPath] = useState("/");
+  const showPath = useMemo(() => {
+    if (path === "/") {
+      return "ProjectData";
+    }
+    return `ProjectData${path}`;
+  }, [path]);
   const [activeTab, setActiveTab] = useState(1);
   const [keyWord, setKeyWord] = useState("");
   const [fileToken, setFileToken] = useState("");
 
+  const [list, setList] = useState<any>([]);
+
   const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
     onSuccess: (res: any) => {
       console.log("res", res);
@@ -70,17 +79,44 @@ const ProjectData = observer(() => {
     },
   });
 
-  useEffect(() => {
-    if (fileToken) {
-      CloudEController.JobOutFileList(path, false, fileToken);
-      // 老项目测试环境
-      // https://fileserver.cloudam.cn/list/?username=6c8928fa719940dc964cf17a029b36c5&token=d1b07aa2-0b29-48ca-ad28-bb41af3bcbb1&filetoken=%2FMm%2BLhFrOpEDp0neVeESSD%2F45aY%3D&share=false&showhidden=false
-      // 新项目本地
-      // https://fileserver.cloudam.cn/list/?username=8e12a4fdde5549b0aa8b3051ff8c8f04&token=751cd163-fe95-45d0-8f7a-3d0d8b8bb442&filetoken=isZw%2B%2BzeJO3R34BEXTjmmovFOmA%3D&share=false&showhidden=false
-      // 老项目本地
-      // https://fileserver.cloudam.cn/list/?username=6c8928fa719940dc964cf17a029b36c5&token=d1b07aa2-0b29-48ca-ad28-bb41af3bcbb1&filetoken=bUt%2Bn0YacgepFClLR4LNR0MxW0w%3D&share=false&showhidden=false
+  const projectId = useMemo(() => {
+    return toJS(currentProjectStore.currentProjectInfo.id);
+  }, [currentProjectStore]);
+
+  // useEffect(() => {
+  //   if (fileToken && projectId) {
+  //     CloudEController.JobOutFileList(path, fileToken, projectId, false)?.then(
+  //       (res) => {
+  //         console.log(res);
+  //         setList(res.data);
+  //       }
+  //     );
+  //   }
+  // }, [fileToken, path, projectId]);
+  const getList = useCallback(() => {
+    if (fileToken && projectId) {
+      return CloudEController.JobOutFileList(
+        path,
+        fileToken,
+        projectId,
+        false
+      )?.then((res) => {
+        console.log(res);
+        if (Array.isArray(res.data)) {
+          setList(res.data);
+        } else {
+          setList([]);
+        }
+      });
     }
-  }, [fileToken, path]);
+  }, [fileToken, path, projectId]);
+  useEffect(() => {
+    getList();
+  }, [getList]);
+
+  const handleRefresh = () => {
+    getList();
+  };
 
   useEffect(() => {
     getDataFileTokenRun({
@@ -94,22 +130,6 @@ const ProjectData = observer(() => {
 
   const [selectIds, setSelectIds] = useState([]);
 
-  const [list, setList] = useState([
-    {
-      id: 123,
-      name: "name",
-      type: "directory",
-      mtime: new Date().getTime(),
-    },
-    {
-      id: 9999,
-      name: "name2",
-      type: "file",
-      size: 6,
-      mtime: new Date().getTime(),
-    },
-  ]);
-
   const versionsHeadCells = [
     { id: "checkbox" },
     { id: "name", numeric: false, label: "名称", width: "25%" },
@@ -123,10 +143,21 @@ const ProjectData = observer(() => {
     setSelectIds(e);
   };
 
+  const handleViewFolders = (item: any) => {
+    console.log("handleViewFolders");
+    console.log(item);
+    setPath(`${path}${item.name}`);
+  };
+
+  const hanleDeleteFile = (item: any) => {};
+
   const renderName = (item: any) => {
     if (item.type === "directory") {
       return (
-        <span className={style.folderIconBox}>
+        <span
+          className={style.folderIconBox}
+          onClick={() => handleViewFolders(item)}
+        >
           <img className={style.folderIcon} src={folderIcon} alt="" />
           {item.name}
         </span>
@@ -172,6 +203,7 @@ const ProjectData = observer(() => {
           variant="text"
           size="small"
           color="error"
+          onClick={() => hanleDeleteFile(item)}
         >
           删除
         </Button>
@@ -246,7 +278,7 @@ const ProjectData = observer(() => {
               </div>
             </div>
             <div className={style.projectDataPathAndTabs}>
-              <div className={style.projectDataPath}>{path}</div>
+              <div className={style.projectDataPath}>{showPath}</div>
               <div className={style.projectDataTabsAndBtton}>
                 <div className={style.projectDataTabs}>
                   <div
@@ -268,7 +300,11 @@ const ProjectData = observer(() => {
                     数据集
                   </div>
                 </div>
-                <IconButton aria-label="refreshIcon" size="small">
+                <IconButton
+                  aria-label="refreshIcon"
+                  size="small"
+                  onClick={handleRefresh}
+                >
                   <RefreshIcon />
                 </IconButton>
               </div>
@@ -280,7 +316,7 @@ const ProjectData = observer(() => {
             }}
             rowHover={true}
             stickyheader={true}
-            rows={list.map((item) => ({
+            rows={list.map((item: any) => ({
               ...item,
               name: renderName(item),
               size: renderSize(item),
@@ -319,7 +355,13 @@ const ProjectData = observer(() => {
           path={path}
           list={list}
         ></UpLoaderFile>
-        <AddFolder onRef={addFolderRef} list={list}></AddFolder>
+        <AddFolder
+          onRef={addFolderRef}
+          list={list}
+          path={path}
+          fileToken={fileToken}
+          projectId={projectId}
+        ></AddFolder>
         <MoveFile onRef={moveFileRef} list={list}></MoveFile>
       </div>
     </ThemeProvider>

src/views/Project/components/CurrentProject/index.tsx

@@ -10,33 +10,35 @@ import AddProject from "../AddProject";
 
 const CurrentProject = observer(() => {
   const { currentProjectStore } = useStores();
-  let addProjectRef: any = React.createRef();
-  const [open, setOpen] = useState(false);
+  // let addProjectRef: any = React.createRef();
+  const [projectListOpen, setProjectListOpen] = useState(false);
+  const [addProjectOpen, setAddProjectOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  
+
   // 结合handleShowProjectList中的event.nativeEvent.stopImmediatePropagation();实现点击空白区域隐藏项目列表
-  useEffect(()=>{
-    document.addEventListener('click', (e) => {
-      setOpen(false)
-    })
-  }, [])
+  useEffect(() => {
+    document.addEventListener("click", (e) => {
+      setProjectListOpen(false);
+    });
+  }, []);
 
   const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
     event.nativeEvent.stopImmediatePropagation();
     setAnchorEl(event.currentTarget);
-    setOpen((previousOpen) => !previousOpen);
+    setProjectListOpen((previousOpen) => !previousOpen);
   };
-  const canBeOpen = open && Boolean(anchorEl);
+  const canBeOpen = projectListOpen && Boolean(anchorEl);
   const id = canBeOpen ? "spring-popper" : undefined;
   const handleChangeCurrentProject = (project: any) => {
     currentProjectStore.changeProject(project);
-    setOpen(!open);
+    setProjectListOpen(!projectListOpen);
   };
 
   const openAddProject = () => {
-    addProjectRef.current.handleClickOpen()
-    setOpen(false)
-  }
+    // addProjectRef.current.handleClickOpen();
+    setAddProjectOpen(true);
+    setProjectListOpen(false);
+  };
 
   return (
     <div>
@@ -59,10 +61,10 @@ const CurrentProject = observer(() => {
           style={{ fontSize: 12 }}
         />
       </div>
-      <AddProject onRef={addProjectRef} />
+      <AddProject open={addProjectOpen} />
       <Popper
         id={id}
-        open={open}
+        open={projectListOpen}
         anchorEl={anchorEl}
         placement="right-start"
         transition