Merge branch 'feat-20220608-projectdata' into 'release'

Feat 20220608 projectdata

See merge request sunyihao/bkunyun!34

package-lock.json

@@ -11838,7 +11838,7 @@
     },
     "webpack-dev-server": {
       "version": "4.9.0",
-      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
       "integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==",
       "requires": {
         "@types/bonjour": "^3.5.9",

src/components/mui/MyTreeView.tsx

@@ -10,7 +10,6 @@ interface TreeItemType {
 }
 
 type MyTreeViewProps = {
-  // treeData: RenderTree;
   treeData: Array<TreeItemType>;
   onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
   onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
@@ -55,20 +54,6 @@ const MyTreeView = (props: MyTreeViewProps) => {
     </TreeItem>
   );
 
-  // const renderTreeArray = (node: TreeItemType, index: number) => {
-  //   return (
-  //     <TreeItem
-  //       key={node.id || `${node.name}${index}`}
-  //       nodeId={String(node.id)}
-  //       label={renderLabel === undefined ? node.name : renderLabel(node.name)}
-  //     >
-  //       {Array.isArray(node.subdirs)
-  //         ? node.subdirs.map((nodeLi: any, i) => renderTreeArray(nodeLi, i))
-  //         : null}
-  //     </TreeItem>
-  //   );
-  // };
-
   return (
     <TreeView
       defaultCollapseIcon={<ArrowRightIcon />}
@@ -79,14 +64,9 @@ const MyTreeView = (props: MyTreeViewProps) => {
       defaultExpanded={defaultExpanded}
       sx={{ ...treeViewSx }}
     >
-      {treeData.length === 0 ? (
-        <div>暂无数据</div>
-      ) : (
-        treeData.map((treeItem, index) => {
-          // return renderTreeArray(treeItem, index);
-          return renderTreeObj(treeItem, index);
-        })
-      )}
+      {treeData.map((treeItem, index) => {
+        return renderTreeObj(treeItem, index);
+      })}
     </TreeView>
   );
 };

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

@@ -135,7 +135,7 @@ const MoveFile = (props: any) => {
             currentOperateFile.name
           }`;
           if (oldPath === newPath) {
-            Message.info("当前目录和目标目录一致，请重新选择目标目录");
+            Message.info("指定的目标路径为数据原路径，无需移动。");
             return;
           }
           CloudEController.JobFileMove(

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

@@ -3,6 +3,7 @@
 }
 .projectDataStickyTop {
   padding: 28px 24px;
+  position: relative;
 }
 .projectDataTitle {
   font-size: 18px;
@@ -73,6 +74,10 @@
   align-items: center;
 }
 
+.folderPointer{
+  cursor: pointer;
+}
+
 .folderIcon {
   margin-right: 12px;
 }
@@ -111,4 +116,21 @@
 }
 .showPathSpanActive{
   color: #1370FF;
+}
+
+.noDataBox{
+  background-color: #fff;
+  height: calc(100vh - 377px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: -53px;
+}
+.noDataText{
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #8A9099;
 }
\ No newline at end of file

src/views/Project/ProjectData/index.tsx

@@ -2,18 +2,16 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 
 import style from "./index.module.css";
 import classnames from "classnames";
-import { Button, InputBase, IconButton, TextField } from "@mui/material";
+import { Button, InputBase, IconButton } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import SearchIcon from "@mui/icons-material/Search";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import Table from "@/components/Material.Ui/Table";
-import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
 import noFile from "@/assets/project/noFile.svg";
-import MyDialog from "@/components/mui/MyDialog";
 import { useMessage } from "@/components/MySnackbar";
 import { getDataFileToken } from "@/api/project_api";
 import AddFolder from "./AddFolder";
@@ -69,6 +67,8 @@ const ProjectData = observer(() => {
     return toJS(currentProjectStore.currentProjectInfo.id);
   }, [currentProjectStore]);
   const [tableLoadding, setTableLoadding] = useState(false);
+  // 防止用户连续点击文件夹造成路径显示错误
+  const [debounce, setDebounce] = useState(false)
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
   const [deleteloading, setDeleteloading] = useState(false);
@@ -79,6 +79,13 @@ const ProjectData = observer(() => {
   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("");
 
@@ -114,16 +121,11 @@ const ProjectData = observer(() => {
       });
       setDataSetList(dataSetList);
       setSelectIds([]);
+      setDebounce(false)
       tableRef?.current?.initSelectedFunc([]);
     },
   });
 
-  // useEffect(() => {
-  //   if (activeTab === 2) {
-  //     getDataFileSearchRun()
-  //   }
-  // }, [activeTab, getDataFileSearchRun]);
-
   const { run: getDataFindRun } = useMyRequest(getDataFind, {
     onSuccess: (res: any) => {
       const dataSetList = res.data.map((item: any) => {
@@ -134,6 +136,7 @@ const ProjectData = observer(() => {
       });
       setDataSetList(dataSetList);
       setSelectIds([]);
+      setDebounce(false)
       tableRef?.current?.initSelectedFunc([]);
     },
   });
@@ -182,6 +185,7 @@ const ProjectData = observer(() => {
           setList([]);
         }
         setSelectIds([]);
+        setDebounce(false)
       });
     }
   }, [fileToken, path, projectId, keyWord]);
@@ -212,20 +216,23 @@ const ProjectData = observer(() => {
             setList([]);
           }
           setSelectIds([]);
+          setDebounce(false)
         });
       }
     }
   }, [fileToken, projectId, keyWord, getList]);
 
   const handleRefresh = () => {
-    tableRef?.current?.initSelectedFunc([]);
-    setSelectIds([]);
-    if (keyWord) {
-      searchFileList();
-      getDataSetListSearch();
-    } else {
-      getList();
-      getDataSetList();
+    if (isPass('PROJECT_DATA_REFRESH', 'USER')) {
+      tableRef?.current?.initSelectedFunc([]);
+      setSelectIds([]);
+      if (keyWord) {
+        searchFileList();
+        getDataSetListSearch();
+      } else {
+        getList();
+        getDataSetList();
+      }
     }
   };
 
@@ -249,26 +256,33 @@ const ProjectData = observer(() => {
     }
   };
 
+  // todo name sort
   const versionsHeadCells = [
     { id: "checkbox" },
     { id: "name", numeric: false, label: "名称", width: "25%" },
-    { id: "size", numeric: false, label: "大小", width: "25%" },
-    { id: "mtime", numeric: false, label: "创建时间", width: "25%" },
+    { id: "size", 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) => {
-    console.log(e);
-    setSelectIds(e);
+    const selectarr = e.map((item: any) => {
+      let andIndex = item.indexOf("&index=")
+      return item.slice(5, andIndex)
+    })
+    setSelectIds(selectarr);
   };
 
   const handleViewFolders = (item: any) => {
-    console.log("handleViewFolders");
-    console.log(item);
-    if (path === "/") {
-      setPath(`/${item.name}`);
+    if (debounce) {
+      return
     } else {
-      setPath(`${path}/${item.name}`);
+      setDebounce(true)
+      if (path === "/") {
+        setPath(`/${item.name}`);
+      } else {
+        setPath(`${path}/${item.name}`);
+      }
     }
   };
 
@@ -281,7 +295,10 @@ const ProjectData = observer(() => {
     if (item.type === "directory") {
       return (
         <span
-          className={style.folderIconBox}
+          className={classnames({
+            [style.folderIconBox]: true,
+            [style.folderPointer]: true,
+          })}
           onClick={() => handleViewFolders(item)}
         >
           <img className={style.folderIcon} src={folderIcon} alt="" />
@@ -307,33 +324,34 @@ const ProjectData = observer(() => {
 
   const renderSize = (item: any) => {
     if (item.type === "dataSet") {
-      return <span>{item.size}条</span>;
+      return `${item.size}条`;
     }
-    return <span>{item.size ? `${item.size}b` : "-"}</span>;
+    return `${item.size ? String((Number(item.size)/1048576).toFixed(2)) + 'MB' : '-'}`;
   };
 
   const renderMtime = (item: any) => {
-    return (
-      // <span>{moment(new Date(item.mtime)).format("YYYY-MM-DD hh:mm:ss")}</span>
-      <span>{moment(item.mtime).format("YYYY-MM-DD hh:mm:ss")}</span>
-    );
+    return String(moment(item.mtime).format("YYYY-MM-DD hh:mm:ss"))
   };
 
   const renderButtons = (item: any) => {
     return (
       <span>
-        <Button
-          sx={{ position: "relative", left: "-18px" }}
-          variant="text"
-          size="small"
-        >
-          下载
-        </Button>
+        {item.type !== 'dataSet' && item.type !== 'directory' && (
+          <Button
+            sx={{ position: "relative", left: "-18px", }}
+            variant="text"
+            size="small"
+            disabled={!isPass("PROJECT_DATA_DOWNLOAD")}
+          >
+            下载
+          </Button>
+        )}
         <Button
           sx={{ position: "relative", left: "-18px" }}
           variant="text"
           size="small"
           onClick={() => hanleShowMoveFileDialog(item)}
+          disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", 'USER')}
         >
           移动至
         </Button>
@@ -343,6 +361,7 @@ const ProjectData = observer(() => {
           size="small"
           color="error"
           onClick={() => hanleDeleteFile(item)}
+          disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", 'USER')}
         >
           删除
         </Button>
@@ -364,7 +383,6 @@ const ProjectData = observer(() => {
   let moveFileRef: any = React.createRef();
 
   const hanleShowMoveFileDialog = (item: any) => {
-    console.log(item);
     setCurrentOperateFile(item);
     moveFileRef.current.showDialog();
   };
@@ -557,10 +575,9 @@ const ProjectData = observer(() => {
                   style={{ marginRight: "12px" }}
                   onClick={hanleShowUpLoaderFileDialog}
                   disabled={
-                    selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD")
+                    selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD", 'USER')
                   }
                 >
-                  {/* todo 项目权限 */}
                   上传文件
                 </Button>
                 <Button
@@ -569,10 +586,9 @@ const ProjectData = observer(() => {
                   size="small"
                   onClick={hanleShowAddFolderDialog}
                   disabled={
-                    selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR")
+                    selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", 'USER')
                   }
                 >
-                  {/* todo 项目权限 */}
                   新建文件夹
                 </Button>
               </div>
@@ -610,7 +626,8 @@ const ProjectData = observer(() => {
                       [style.projectDataTab]: true,
                       [style.projectDataTabActive]: activeTab === 1,
                     })}
-                    onClick={() => setActiveTab(1)}
+                    // onClick={() => setActiveTab(1)}
+                    onClick={() => handleChangeListType(1)}
                   >
                     文件
                   </div>
@@ -619,7 +636,8 @@ const ProjectData = observer(() => {
                       [style.projectDataTab]: true,
                       [style.projectDataTabActive]: activeTab !== 1,
                     })}
-                    onClick={() => setActiveTab(2)}
+                    // onClick={() => setActiveTab(2)}
+                    onClick={() => handleChangeListType(2)}
                   >
                     数据集
                   </div>
@@ -628,6 +646,7 @@ const ProjectData = observer(() => {
                   aria-label="refreshIcon"
                   size="small"
                   onClick={handleRefresh}
+                  disabled={!isPass('PROJECT_DATA_REFRESH', 'USER')}
                 >
                   <RefreshIcon />
                 </IconButton>
@@ -635,28 +654,32 @@ const ProjectData = observer(() => {
             </div>
           </div>
           <Table
+            footer={false}
+            rowHover={true}
+            onRef={tableRef}
+            nopadding={true}
+            stickyheader={true}
+            load={tableLoadding}
+            initSelected={selectIds}
+            headCells={versionsHeadCells}
             checkboxData={(e: any) => {
               hanldeCheckbox(e);
             }}
-            // param="name"
-            rowHover={true}
-            stickyheader={true}
-            rows={showList.map((item: any) => ({
+            rows={showList.map((item: any, index: number) => ({
               ...item,
-              id: item.name,
+              id: `name=${item.name}&index=${index}`,
               name: renderName(item),
               size: renderSize(item),
               mtime: renderMtime(item),
               caozuo: renderButtons(item),
             }))}
-            load={tableLoadding}
-            // rowsPerPage={"99"}
-            headCells={versionsHeadCells}
-            nopadding={true}
-            footer={false}
-            initSelected={selectIds}
-            onRef={tableRef}
           ></Table>
+          {
+            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}>
@@ -666,6 +689,7 @@ const ProjectData = observer(() => {
               size="small"
               style={{ marginRight: "12px" }}
               onClick={handleBatchDelete}
+              disabled={!isPass("PROJECT_DATA_DELETE", 'USER')}
             >
               批量删除（{selectIds.length}）
             </Button>
@@ -675,6 +699,7 @@ const ProjectData = observer(() => {
               size="small"
               style={{ marginRight: "24px" }}
               onClick={handleBatchMove}
+              disabled={!isPass("PROJECT_DATA_MOVE", 'USER')}
             >
               批量移动（{selectIds.length}）
             </Button>

src/views/Project/project.ts

@@ -5,9 +5,9 @@ export const getProjectList = async () => {
   return res.data;
 };
 
+// 设置文件服务器指向
 export const setFileServerEndPointLocalStorage = async (zoneId: string) => {
   const res = await hpczone();
-  console.log(res);
   let fileServerEndPoint = "";
   if (Array.isArray(res)) {
     res.forEach((item: any) => {