feat: 完成上传文件、新建文件夹 搜索 目录路径自测

src/api/fileserver/CloudEController.ts

@@ -50,8 +50,8 @@ class CloudEController {
       // });
     }
   }
-  // 文件列表
-  static JobOutFileList(
+  // 文件树
+  static JobOutFileDirtree(
     url: any,
     filetoken: string,
     projectId: string,
@@ -60,20 +60,19 @@ class CloudEController {
   ) {
     if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
-      // headers['parentName'] = ''
       if (getLoaclStorageOfKey("userinfo")) {
         url += urlToken(filetoken, projectId);
       }
       return axios.get(
-        APIOPTION() + "/list" + url + "&showhidden=" + showHide,
+        APIOPTION() + "/dirtree" + url + "&showhidden=" + showHide,
         {
           headers: headers,
         }
       );
     }
   }
-  // 文件树
-  static JobOutFileDirtree(
+  // 文件列表
+  static JobOutFileList(
     url: any,
     filetoken: string,
     projectId: string,
@@ -82,11 +81,12 @@ class CloudEController {
   ) {
     if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
+      // headers['parentName'] = ''
       if (getLoaclStorageOfKey("userinfo")) {
         url += urlToken(filetoken, projectId);
       }
       return axios.get(
-        APIOPTION() + "/dirtree" + url + "&showhidden=" + showHide,
+        APIOPTION() + "/list" + url + "&showhidden=" + showHide,
         {
           headers: headers,
         }
@@ -106,16 +106,10 @@ class CloudEController {
       if (getLoaclStorageOfKey("userinfo")) {
         url = urlToken(filetoken, projectId) + "&q=" + url;
       }
-      axios
-        .get(APIOPTION() + "/search" + base + url + "&showhidden=" + showHide, {
-          headers: headers,
-        })
-        .then(function (response) {
-          console.log(response);
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
+      return axios
+      .get(APIOPTION() + "/search" + base + url + "&showhidden=" + showHide, {
+        headers: headers,
+      })
     }
   }
 

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

@@ -7,7 +7,7 @@ import { useMessage } from "@/components/MySnackbar";
 import CloudEController from "@/api/fileserver/CloudEController";
 
 const AddFolder = (props: any) => {
-  const { list, path, projectId, fileToken } = props;
+  const { list, path, projectId, fileToken, refresh } = props;
   const Message = useMessage();
   let addFolderDialogRef: any = React.createRef();
 
@@ -31,9 +31,9 @@ const AddFolder = (props: any) => {
         fileToken,
         projectId
       )?.then((res) => {
-        console.log(res);
         Message.success("新建成功");
         addFolderDialogRef.current.handleClose();
+        refresh()
       });
     } else {
       Message.info(fileNameCheck.help || "请输入文件夹名称");

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

 import React, {
   useState,
   useImperativeHandle,
-  useEffect,
   useCallback,
 } from "react";
 
 import style from "./index.module.css";
-import { TextField } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
-import { checkIsNumberLetterChinese } from "@/utils/util";
 import folderIcon from "@/assets/project/folderIcon.svg";
 import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
 import { useMessage } from "@/components/MySnackbar";
@@ -16,7 +13,7 @@ import MyTreeView from "@/components/mui/MyTreeView";
 import CloudEController from "@/api/fileserver/CloudEController";
 
 const MoveFile = (props: any) => {
-  const { path, projectId, fileToken, currentOperateFile, selectIds } = props;
+  const { path, projectId, fileToken, currentOperateFile, selectIds, refresh } = props;
   const Message = useMessage();
   const [newPath, setNewPath] = useState("");
 
@@ -30,27 +27,15 @@ const MoveFile = (props: any) => {
         projectId,
         false
       )?.then((res) => {
-        console.log("tree");
-        console.log(res);
         if (Array.isArray(res.data)) {
           setTreeData(res.data);
         } else {
           setTreeData([]);
         }
-        // setTableLoadding(false);
-        // if (Array.isArray(res.data)) {
-        //   setList(res.data);
-        // } else {
-        //   setList([]);
-        // }
       });
     }
   }, [fileToken, projectId]);
 
-  // useEffect(() => {
-  //   getTree();
-  // }, [getTree]);
-
   let moveFileDialogRef: any = React.createRef();
 
   const showDialog = () => {
@@ -78,16 +63,13 @@ const MoveFile = (props: any) => {
           fileToken,
           projectId
         )?.then((res) => {
-          console.log("批量移动");
-          console.log(res);
+          Message.success('移动成功！')
+          refresh()
         });
       } else {
         const oldPath = `${path}${path === "/" ? "" : "/"}${
           currentOperateFile.name
         }`;
-        console.log("submit");
-        console.log(newPath);
-        console.log(oldPath);
         if (oldPath === newPath) {
           Message.info("当前目录和目标目录一致，请重新选择目标目录");
           return;
@@ -126,6 +108,7 @@ const MoveFile = (props: any) => {
   const idFunc = (item: any) => {
     return `${item.dir.substr(1)}${item.name}`;
   };
+
   return (
     <MyDialog
       handleSubmit={handleMoveFileSubmit}

src/views/Project/ProjectData/index.module.css

@@ -88,3 +88,27 @@
   justify-content: flex-end;
   align-items: center;
 }
+
+.showPathSpan{
+  cursor: pointer;
+  line-height: 22px;
+  font-size: 14px;
+  color: #1E2633;
+  /* display: flex;
+  align-items: center; */
+}
+
+.showPathI{
+  margin: 0 10px;
+  line-height: 22px;
+  font-size: 20px;
+  color: #C2C6CC;
+  cursor: default ;
+}
+
+.showPathSpan:hover{
+  color: #1370FF;
+}
+.showPathSpanActive{
+  color: #1370FF;
+}
\ No newline at end of file

src/views/Project/ProjectData/index.tsx

@@ -30,12 +30,7 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
-// import TreeView from '@mui/lab/TreeView';
-// import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-// import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-// import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-// import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-// import TreeItem from '@mui/lab/TreeItem';
+import usePass from "@/hooks/usePass";
 
 const theme = createTheme({
   palette: {
@@ -50,13 +45,11 @@ declare module "@mui/material/styles" {
     neutral: Palette["primary"];
   }
 
-  // allow configuration using `createTheme`
   interface PaletteOptions {
     neutral?: PaletteOptions["primary"];
   }
 }
 
-// Update the Button's color prop options
 declare module "@mui/material/Button" {
   interface ButtonPropsColorOverrides {
     neutral: true;
@@ -64,18 +57,43 @@ declare module "@mui/material/Button" {
 }
 
 const ProjectData = observer(() => {
+  const isPass = usePass();
+  const Message = useMessage()
   const { currentProjectStore } = useStores();
   const [tableLoadding, setTableLoadding] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
   const [deleteloading, setDeleteloading] = useState(false);
-  // const [path, setPath] = useState("/ProjectData");
   const [path, setPath] = useState("/");
   const showPath = useMemo(() => {
     if (path === "/") {
-      return "ProjectData";
+      // return "ProjectData";
+      return <span className={style.showPathSpan}>ProjectData</span>
+    } else {
+      console.log(path)
+      console.log(path.split('/'))
+      const pathArr = path.split('/')
+      if (pathArr.length <= 4) {
+        return (pathArr.map((item, index) => {
+          return (<span onClick={()=>setPath(pathArr.slice(0, index + 1).join('/') === '' ? '' : pathArr.slice(0, index + 1).join('/'))} className={classnames({
+            [style.showPathSpan]: true,
+            [style.showPathSpanActive]: index === pathArr.length - 1
+          })}>{index === 0 ? 'ProjectData' :item} {index === pathArr.length - 1 ? null : <i className={style.showPathI}>{'>'}</i>}</span>)
+        }))
+      } else {
+        return (pathArr.map((item, index) => {
+          return (<span onClick={()=>setPath(pathArr.slice(0, index + 1).join('/') === '' ? '' : pathArr.slice(0, index + 1).join('/'))} className={classnames({
+            [style.showPathSpan]: true,
+            [style.showPathSpanActive]: index === pathArr.length - 1
+          })}>
+            {index === 0 ? 'ProjectData' : index > pathArr.length - 4 ? item : '' }
+            {/* && index > pathArr.length - 4 */}
+            {index === pathArr.length - 1 || (index <= pathArr.length - 4 && index > 0) ? null : <i className={style.showPathI}>{'>'}</i>}
+            {index === 1 && '...'}{index === 1 && <i className={style.showPathI}>{'>'}</i>}
+          </span>)
+        }))
+      }
     }
-    return `ProjectData${path}`;
   }, [path]);
   const [activeTab, setActiveTab] = useState(1);
   const [keyWord, setKeyWord] = useState("");
@@ -94,16 +112,6 @@ const ProjectData = observer(() => {
     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) {
       setTableLoadding(true);
@@ -113,7 +121,6 @@ const ProjectData = observer(() => {
         projectId,
         false
       )?.then((res) => {
-        console.log(res);
         setTableLoadding(false);
         if (Array.isArray(res.data)) {
           setList(res.data);
@@ -126,9 +133,35 @@ const ProjectData = observer(() => {
   useEffect(() => {
     getList();
   }, [getList]);
+  
+  // 全局搜索文件列表
+  const searchFileList =  useCallback(() => {
+    if (fileToken && projectId) {
+      setTableLoadding(true);
+        return CloudEController.JobSearchFileList(
+          keyWord,
+          path,
+          fileToken,
+          projectId,
+          false
+        )?.then((res) => {
+          setTableLoadding(false);
+          if (Array.isArray(res.data)) {
+            setList(res.data);
+          } else {
+            setList([]);
+          }
+        });
+    }
+  }, [fileToken, path, projectId, keyWord]);
 
   const handleRefresh = () => {
-    getList();
+    if (keyWord) {
+      searchFileList()
+    } else {
+      getList();
+    }
+    setSelectIds([])
   };
 
   useEffect(() => {
@@ -138,9 +171,19 @@ const ProjectData = observer(() => {
   }, [getDataFileTokenRun, currentProjectStore]);
 
   const handleKeyWordChange = (e: any) => {
+    if (e.target.value.length > 30) {
+      return
+    }
     setKeyWord(e.target.value);
   };
 
+  const handleKeyWordChangeKeyUp = (e: any) => {
+    if (e.keyCode === 13) {
+      searchFileList()
+      console.log('搜索')
+    }
+  }
+
   const [selectIds, setSelectIds] = useState([]);
 
   const versionsHeadCells = [
@@ -159,7 +202,11 @@ const ProjectData = observer(() => {
   const handleViewFolders = (item: any) => {
     console.log("handleViewFolders");
     console.log(item);
-    setPath(`${path}${item.name}`);
+    if (path === '/') {
+      setPath(`/${item.name}`)
+    } else {
+      setPath(`${path}/${item.name}`);
+    }
   };
 
   const hanleDeleteFile = (item: any) => {
@@ -254,17 +301,23 @@ const ProjectData = observer(() => {
   };
 
   const handleDelete = () => {
-    const deletePath =
-      path === "/"
-        ? `${path}${currentOperateFile.name}`
-        : `${path}/${currentOperateFile.name}`;
+    let deletePath = ''
+    if (currentOperateFile) {
+      deletePath =
+        path === "/"
+          ? `${path}${currentOperateFile.name}`
+          : `${path}/${currentOperateFile.name}`;
+    } else {
+      deletePath = selectIds.map((name: any) => {
+        return `${path}${path === "/" ? "" : "/"}${name}`;
+      }).join(' ');
+    }
     CloudEController.JobOutFileDel(
       deletePath,
       fileToken,
       projectId as string
     )?.then((res) => {
-      console.log("handleDelete");
-      console.log(res);
+      Message.success('删除成功')
       setDeleteloading(false);
       setDeleteDialogOpen(false);
       handleRefresh();
@@ -276,6 +329,11 @@ const ProjectData = observer(() => {
     moveFileRef.current.showDialog();
   };
 
+  const handleBatchDelete = () => {
+    setCurrentOperateFile(null);
+    setDeleteDialogOpen(true)
+  }
+
   return (
     <ThemeProvider theme={theme}>
       <div className={style.projectData}>
@@ -290,7 +348,9 @@ const ProjectData = observer(() => {
                   size="small"
                   style={{ marginRight: "12px" }}
                   onClick={hanleShowUpLoaderFileDialog}
+                  disabled={selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD")}
                 >
+                  {/* todo 项目权限 */}
                   上传文件
                 </Button>
                 <Button
@@ -298,7 +358,9 @@ const ProjectData = observer(() => {
                   variant="outlined"
                   size="small"
                   onClick={hanleShowAddFolderDialog}
-                >
+                  disabled={selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR")}
+                  >
+                  {/* todo 项目权限 */}
                   新建文件夹
                 </Button>
               </div>
@@ -310,6 +372,7 @@ const ProjectData = observer(() => {
                   value={keyWord}
                   onChange={handleKeyWordChange}
                   style={{ width: "280px", fontSize: "14px" }}
+                  onKeyUp={handleKeyWordChangeKeyUp}
                 />
                 <IconButton
                   type="submit"
@@ -387,6 +450,7 @@ const ProjectData = observer(() => {
               variant="outlined"
               size="small"
               style={{ marginRight: "12px" }}
+              onClick={handleBatchDelete}
             >
               批量删除（{selectIds.length}）
             </Button>
@@ -410,7 +474,7 @@ const ProjectData = observer(() => {
           <DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle>
           <DialogContent>
             <DialogContentText id="alert-dialog-description">
-              确认要删除“{currentOperateFile ? currentOperateFile.name : ""}
+              确认要删除“{currentOperateFile ? currentOperateFile.name : selectIds.join('”，“')}
               ”吗？
             </DialogContentText>
           </DialogContent>
@@ -429,15 +493,10 @@ const ProjectData = observer(() => {
               onClick={handleDelete}
               color="primary"
               variant="contained"
-              // style={submitStyle}
               size="small"
             >
               确认
             </LoadingButton>
-            {/* <Button onClick={handleDeleteDialogClose}>取消</Button>
-            <Button onClick={handleDelete} autoFocus>
-              确认
-            </Button> */}
           </DialogActions>
         </Dialog>
         <UpLoaderFile
@@ -449,6 +508,7 @@ const ProjectData = observer(() => {
           onRef={addFolderRef}
           list={list}
           path={path}
+          refresh={handleRefresh}
           fileToken={fileToken}
           projectId={projectId}
         ></AddFolder>
@@ -459,6 +519,7 @@ const ProjectData = observer(() => {
           projectId={projectId}
           currentOperateFile={currentOperateFile}
           selectIds={selectIds}
+          refresh={handleRefresh}
         ></MoveFile>
       </div>
     </ThemeProvider>