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

Feat 20220608 projectdata

See merge request sunyihao/bkunyun!37

src/api/fileserver/raysyncApi.ts

@@ -116,6 +116,7 @@ export {
   getType,
 };
 
+// mock 数据
 // const raysyncAddr = {
 //   bandwidth: null
 //   capacity: 10485760

src/assets/img/uploadIcon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/文件传输</title>
+    <defs>
+        <filter color-interpolation-filters="auto" id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.540000 0 0 0 0 0.564000 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+        <filter color-interpolation-filters="auto" id="filter-2">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.540000 0 0 0 0 0.564000 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="项目数据-长路径" transform="translate(-1324.000000, -136.000000)">
+            <g id="编组-10" transform="translate(1317.000000, 128.000000)">
+                <g id="文件传输" transform="translate(7.000000, 7.000000)" filter="url(#filter-1)">
+                    <g>
+                        <rect id="矩形备份-5" x="0" y="0" width="18" height="18"></rect>
+                        <g filter="url(#filter-2)">
+                            <g transform="translate(0.000000, 1.687500)">
+                                <path d="M5.95624614,0.9 L7.0470055,1.84033454 C7.43885553,2.2205386 7.96337743,2.43318258 8.50936421,2.43318258 L8.50936421,2.43318258 L16.8,2.43318258 L17.1,13.425 L1.2,13.725 L0.9,1.2 L5.95624614,0.9 Z" id="路径-4" stroke="#7C878E" stroke-width="1.8"></path>
+                                <polygon id="路径-5" fill="#7C878E" points="9.26587781 3.28436599 1.47245698 3.28436599 1.47245698 1.2526684 6.01231277 1.2526684"></polygon>
+                                <polygon id="路径-6" fill="#7C878E" fill-rule="nonzero" points="8.05145975 5.6167684 8.05145975 10.8168243 5.59717839 10.8168243 5.59717839 9.06182432 6.2508 9.0612484 6.25145975 5.6167684"></polygon>
+                                <polygon id="路径-6备份" fill="#7C878E" fill-rule="nonzero" transform="translate(11.062078, 8.216796) scale(-1, -1) translate(-11.062078, -8.216796) " points="12.2726957 5.6167684 12.2726957 10.81608 9.85203814 10.8168243 9.85145975 9.06182437 10.472057 9.0612484 10.4726957 5.6167684"></polygon>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/MyRouter/useMyRouter.ts

@@ -8,7 +8,10 @@ import NotFound from "@/views/404";
 import useMyRequest from "@/hooks/useMyRequest";
 import { useEffect } from "react";
 import { menu } from "@/api/routes_api";
-import { setFileServerEndPointLocalStorage } from "@/views/Project/project";
+import {
+  setFileServerEndPointLocalStorage,
+  getFiletokenAccordingToId,
+} from "@/views/Project/project";
 
 const useMyRouter = () => {
   const { permissionStore, menuStore, currentProjectStore } = useStores();
@@ -53,6 +56,10 @@ const useMyRouter = () => {
         currentProjectStore.setProjectList(list);
         currentProjectStore.changeProject(list[0]);
         setFileServerEndPointLocalStorage(list[0].zoneId);
+        getFiletokenAccordingToId(list[0].id).then((res) => {
+          list[0].filetoken = res;
+          currentProjectStore.changeProject(list[0]);
+        });
       }
     }
 

src/components/mui/MyDialog.tsx

@@ -26,7 +26,11 @@ const MyDialog = (props: any) => {
     setOpen(true);
   };
 
-  const handleClose = () => {
+  const handleClose = (event: any = {}, reason: any = "other") => {
+    // 点击弹窗外不关闭弹窗
+    if (reason === "backdropClick") {
+      return;
+    }
     setOpen(false);
   };
 

src/store/modules/currentProject.ts

@@ -4,6 +4,7 @@ type projectInfo = {
   name?: string;
   desc?: string;
   projectRole?: string;
+  filetoken?: string;
 };
 
 type productInfo = {

src/store/modules/fileList.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 17:00:19
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 21:47:28
+ * @LastEditTime: 2022-06-15 15:24:44
  * @FilePath: /bkunyun/src/store/modules/upload.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,6 +12,7 @@ import {  makeAutoObservable, observable, action } from "mobx";
 interface IUploadInfo {
   id: string,
   open: boolean,
+  file: File,
   list: any,
   isPermanence: boolean,
 }
@@ -34,27 +35,24 @@ class FileList {
   newFileList: IUploadInfo[] = [];
 
   /** 设置最新需要上传的文件列表 */
-  setNewFileList (val: IUploadInfo[]) {
+  setNewFileList = (val: IUploadInfo[]) => {
     this.fileList = this.fileList.concat(val)
-
     this.newFileList = val
-
   }
 
 
   /** 设置文件上传信息 */
-  setUploadInfo(id: string, val: IUploadInfo) {
-    console.log(val,id,'22222')
+  setUploadInfo = (id: string, val: IUploadInfo) => {
+    console.log(id, val,'2222')
     const newFileList = this.fileList?.map((item)=>{
       if(item.id === id){
-        console.log('3333',item)
         return val
       } return item
     })
     this.fileList = newFileList
   }
 
-  setUploadInfoOpen(id: string, val: boolean) {
+  setUploadInfoOpen = (id: string, val: boolean) => {
     const newFileList = this.fileList?.map((item)=>{
         if(item.id === id){
           return {...item,open: val};
@@ -64,7 +62,7 @@ class FileList {
       this.fileList = newFileList
   }
 
-  setUploadInfoList(id: string, val: any) {
+  setUploadInfoList = (id: string, val: any) => {
     const newFileList = this.fileList?.map((item)=>{
         if(item.id === id){
           return {...item, list: val}
@@ -73,7 +71,7 @@ class FileList {
       this.fileList = newFileList
   }
 
-  setUploadInfoIsPermanence(id: string, val: boolean) {
+  setUploadInfoIsPermanence = (id: string, val: boolean) => {
     const newFileList = this.fileList?.map((item)=>{
         if(item.id === id){
           return {...item, isPermanence: val}

src/utils/Upload/tusUpload.js

@@ -8,7 +8,6 @@ import {
 import { getDataFileToken } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
 import { getTokenInfo } from "@/utils/util";
-import ConsoleLayout from "@/views/ConsoleLayout";
 
 const UseTusUpload = (props) => {
   const { fileListStore: uploadInfoStore, currentProjectStore } = props;
@@ -31,16 +30,15 @@ const UseTusUpload = (props) => {
     });
   }, []);
 
+  const { fileList } = uploadInfoStore;
+
   const uploadFile = (item, file, url, filepath, callBack) => {
-    for (let i in localStorage) {
-      if (i.indexOf("tus::tus-br") > -1) {
-        localStorage.removeItem(i);
-      }
-    }
     uploadInfoStore?.setUploadInfoIsPermanence(item.id, false);
+    console.log(fileList);
 
     if (!verifyLettersNumbersCertainChars4(file.name)) {
-      let json1 = uploadInfoStore?.uploadInfo?.list.concat({
+      console.log(222);
+      let json1 = item?.list.concat({
         name: file.name,
         bytesUploaded: 0,
         bytesTotal: 0,
@@ -56,6 +54,7 @@ const UseTusUpload = (props) => {
           "上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
       });
       uploadInfoStore?.setUploadInfo(item.id, {
+        ...item,
         open: true,
         list: json1,
         isPermanence: false,
@@ -84,10 +83,7 @@ const UseTusUpload = (props) => {
       },
       onProgress: function (bytesUploaded, bytesTotal, a) {
         var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
-        let fliterJson = item.list?.filter((item) => item.id === timeId);
-        let json = [];
-        if (fliterJson.length === 0) {
-          json = item.list.concat({
+        const json = item.list.concat({
           name: upload.file.name,
           bytesUploaded: bytesUploaded,
           bytesTotal: bytesTotal,
@@ -100,44 +96,17 @@ const UseTusUpload = (props) => {
           upload,
           dir: "/home/cloudam/",
         });
+        console.log(item, "0111111");
         uploadInfoStore?.setUploadInfo(item.id, {
+          ...item,
           open: true,
-            list: json,
-            isPermanence: uploadInfoStore?.uploadInfo?.isPermanence,
-          });
-        } else {
-          let a = item.list;
-          let time = new Date().getTime();
-          a.map((element) => {
-            if (element.id === timeId) {
-              element["bytesUploaded"] = bytesUploaded;
-              element["bytesTotal"] = bytesTotal;
-              element["percentage"] = percentage;
-              element["bytesUploaded2"] =
-                parseInt((parseInt(time) - parseInt(element.endTime)) / 1000) >=
-                2
-                  ? bytesUploaded
-                  : element["bytesUploaded2"];
-              element["endTime"] =
-                parseInt((parseInt(time) - parseInt(element.endTime)) / 1000) >=
-                2
-                  ? time
-                  : element["endTime"];
-            }
-          });
-          uploadInfoStore?.setUploadInfo(item.id, {
-            open: true,
-            list: a.concat([]),
+          list: json || [],
           isPermanence: item.isPermanence,
         });
-        }
       },
       onSuccess: function () {
-        let fliterJson = item.list.filter((item) => item.id === timeId);
-        console.log(upload.file, "9999999");
-        if (fliterJson.length === 0 && upload.file["size"] === 0) {
-          console.log("000011111");
         let json = [];
+
         json = item.list.concat({
           name: upload.file.name,
           bytesUploaded: 0,
@@ -150,24 +119,14 @@ const UseTusUpload = (props) => {
           statusMsg: "上传成功",
           upload,
         });
+        console.log(json, item.list, "0222222");
         uploadInfoStore?.setUploadInfo(item.id, {
+          ...item,
           open: true,
           list: json,
           isPermanence: item.isPermanence,
         });
-        } else {
-          console.log(item.list, "000022222");
-          item.list.map((item) => {
-            if (item.id === timeId) {
-              item["statusMsg"] = "上传成功";
-            }
-          });
-          uploadInfoStore?.setUploadInfo(item.id, {
-            open: true,
-            list: item.list,
-            isPermanence: item.isPermanence,
-          });
-        }
+
         callBack && callBack(upload, filepath);
       },
     });

src/utils/util.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-07 18:37:53
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 17:21:52
+ * @LastEditTime: 2022-06-15 17:49:27
  * @FilePath: /bkunyun/src/utils/util.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -29,6 +29,22 @@ export const uuid = () => {
   return pwd;
 };
 
+/** 格式化时间 xx小时xx分钟xx秒
+ * params: item: 毫秒的时间戳
+ */
+export const formatTime = (time: number) => {
+  const newTime =  Math.floor( time / 1000) ;
+  const hours = Math.floor(newTime / 3600);
+  const minutes = Math.floor((newTime % 3600) / 60);
+  const seconds = newTime % 60;
+
+  const hoursString = hours ? `${hours}小时` : '';
+  const minutesString = minutes ? `${minutes}分钟` : '';
+  const secondsString = seconds ? `${seconds}秒` : '';
+
+  return `${hoursString}${minutesString}${secondsString}`;
+};
+
 // 获取用户信息
 export const getUserInfo = () => {
   let val: any;
@@ -60,3 +76,20 @@ export const checkIsNumberLetterChinese = (string: string) => {
 export const getMbfromB = (b: number) => {
   return Math.floor(b / 1048576);
 };
+
+// 内存单位转换
+export const storageUnitFromB = (b: number) => {
+  if (b <= 0) {
+    return "0B";
+  } else if (b < 1024) {
+    return `${b}B`;
+  } else if (b < 1024 * 1024) {
+    return `${(b / 1024).toFixed(2)}KB`;
+  } else if (b < 1024 * 1024 * 1024) {
+    return `${(b / (1024 * 1024)).toFixed(2)}MB`;
+  } else if (b < 1024 * 1024 * 1024 * 1024) {
+    return `${(b / (1024 * 1024 * 1024)).toFixed(2)}G`;
+  } else {
+    return `${(b / (1024 * 1024 * 1024 * 1024)).toFixed(2)}t`;
+  }
+};

src/views/ConsoleLayout/components/FileItem/index.module.css

+.itemBox {
+  height: 50px;
+  padding: 16px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f2f5;
+}
+.rightBox {
+  font-size: 12px;
+  color: #1370ff;
+}
+.leftBox {
+  display: flex;
+}
+
+.span {
+  color: #8a9099;
+  font-size: 12px;
+}

src/views/ConsoleLayout/components/FileItem/index.tsx

-import { observer } from "mobx-react-lite";
-// import { any } from "@/store/modules/fileList";
-// toJS(currentProjectStore.currentProjectInfo.id);
+import { toJS } from "mobx";
+
+import { LinearProgress } from "@mui/material";
+
+import styles from "./index.module.css";
+import { useMemo } from "react";
+import { formatTime, storageUnitFromB } from "@/utils/util";
 
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 15:46:42
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 21:35:09
+ * @LastEditTime: 2022-06-15 18:03:31
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/FileItem/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -16,8 +20,63 @@ interface IProps {
 }
 const FileItem = (props: IProps) => {
   const { fileItemInfo } = props;
-  console.log(fileItemInfo, 2222);
-  return <div>dd</div>;
+  const itemInfo = toJS(fileItemInfo);
+  const lastInfo = itemInfo?.list[itemInfo.list?.length - 1];
+  const firstInfo = itemInfo?.list[0];
+  const lastMsg = lastInfo?.statusMsg;
+
+  const TimeText = useMemo(() => {
+    const val = lastInfo.endTime - firstInfo.startTime;
+    return formatTime(val);
+  }, [firstInfo.startTime, lastInfo.endTime]);
+
+  const text = useMemo(() => {
+    let result = "";
+    if (lastMsg === "上传失败") {
+      result = "重新上传";
+    }
+    if (lastMsg === "正在上传") {
+      result = "暂停";
+    }
+    if (lastMsg === "上传成功") {
+      result = "查看文件";
+    }
+    return result;
+  }, [itemInfo?.list, lastMsg]);
+
+  return (
+    <div className={styles.itemBox}>
+      <div className={styles.leftBox}>
+        <img />
+        <div>
+          <div>
+            <b style={{ fontSize: 14 }}>{firstInfo?.name || ""}</b>
+            {lastMsg === "上传失败" ? (
+              <span
+                className={styles.span}
+                style={{ marginLeft: 16, color: "#FF4E4E" }}
+              >{`(${lastMsg})`}</span>
+            ) : (
+              <span className={styles.span} style={{ marginLeft: 16 }}>
+                {TimeText}
+              </span>
+            )}
+          </div>
+          <LinearProgress
+            sx={{ width: 300, borderRadius: 2, margin: "2px 0", color: "red" }}
+            variant="determinate"
+            value={50}
+          />
+          <div>
+            <span className={styles.span}>{`700MB/${storageUnitFromB(
+              500000
+            )}`}</span>
+          </div>
+        </div>
+      </div>
+      <div className={styles.rightBox}>{text}</div>
+    </div>
+  );
 };
 
 export default FileItem;

src/views/ConsoleLayout/index.tsx

@@ -7,6 +7,7 @@ import Add from "@mui/icons-material/Add";
 import Avatar from "@mui/material/Avatar";
 import { Box, Menu, MenuItem } from "@mui/material";
 
+import uploadIcon from "@/assets/img/uploadIcon.svg";
 import globalText from "@/utils/globalText_CN";
 import useIndex from "./useIndex";
 import { useStores } from "@/store/index";
@@ -18,7 +19,7 @@ import TranSferList from "./components/TransferList";
 import style from "./index.module.css";
 import useGlobalStore from "@/hooks/useGlobalStore";
 import { toJS } from "mobx";
-import { urlToken } from "@/api/fileserver/raysyncApi";
+import { APIOPTION, urlToken } from "@/api/fileserver/raysyncApi";
 import UseTusUpload from "@/utils/Upload/tusUpload";
 import useMyRequest from "@/hooks/useMyRequest";
 import { getDataFileToken } from "@/api/project_api";
@@ -54,7 +55,8 @@ const ConsoleLayout = observer(() => {
   const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
     onSuccess: (res: any) => {
       let url =
-        "https://fileserver.cloudam.cn/parallelupload/" +
+        APIOPTION() +
+        "/parallelupload/" +
         urlToken(
           res?.data || "",
           currentProjectStore?.currentProjectInfo?.id as string
@@ -62,7 +64,7 @@ const ConsoleLayout = observer(() => {
       fileList?.newFileList?.forEach((item: any) => {
         uploadFile(
           item,
-          item?.list,
+          item?.file,
           url,
           "/",
           (upload: any, filepath: string) => console.log(upload, filepath, 1111)
@@ -73,6 +75,7 @@ const ConsoleLayout = observer(() => {
 
   useDeepEffect(() => {
     if (fileList?.newFileList?.length) {
+      console.log(111, 222);
       getDataFileTokenRun({
         id: currentProjectStore?.currentProjectInfo.id || "",
       });
@@ -148,7 +151,11 @@ const ConsoleLayout = observer(() => {
             }}
           >
             <Box className={style.topRightItem}>
-              <Add />
+              <img
+                src={uploadIcon}
+                alt=""
+                style={{ verticalAlign: "middle" }}
+              />
             </Box>
           </MyPopover>
           <Box className={style.topRightItem}>

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

@@ -45,10 +45,10 @@
   box-sizing: border-box;
   position: relative;
 }
-.tableBox {
+/* .tableBox {
   height: 300px;
   overflow: scroll;
-}
+} */
 .fileIconBox {
   display: flex;
   justify-content: flex-start;

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

-import React, { useState, useImperativeHandle, useCallback } from "react";
+import React, {
+  useState,
+  useImperativeHandle,
+  useCallback,
+  useMemo,
+} from "react";
 
 import style from "./index.module.css";
 import MyDialog from "@/components/mui/MyDialog";
@@ -11,7 +16,7 @@ import fileIcon from "@/assets/project/fileIcon.svg";
 import noFile from "@/assets/project/noFile.svg";
 import uploaderIcon from "@/assets/project/uploaderIcon.svg";
 import classnames from "classnames";
-import { getMbfromB } from "@/utils/util";
+import { storageUnitFromB } from "@/utils/util";
 import { observer } from "mobx-react";
 import { useStores } from "@/store";
 import { toJS } from "mobx";
@@ -23,34 +28,68 @@ const UpLoaderFile = observer((props: any) => {
   // list 是项目数据table的数据
   const { path, list } = props;
 
+  // 集合当前路径下的文件、文件夹、数据集   和已选择要上传的文件列表
+  const nowNameList = useMemo(() => {
+    return [...list, ...fileList];
+  }, [list, fileList]);
+
   const onDrop = useCallback(
     (acceptedFiles: any) => {
-      // 判断是否有文件名重复
-      const fileListRepeatName = getRepeatName(fileList, acceptedFiles);
-      const listRepeatName = getRepeatName(list, acceptedFiles);
-      if (fileListRepeatName || listRepeatName) {
-        message.error(`${fileListRepeatName || listRepeatName}文件已存在`);
-        return;
+      // 获取重复的项目文件列表和要上传（名称不重复就上传）的文件
+      const getRepeatFileAndGetUploderFileList = (
+        acceptedFiles: Array<any>
+      ) => {
+        let repeatFileList: any = [];
+        let uploderFileList: any = [];
+        acceptedFiles.forEach((fItem: any, index: number) => {
+          if (
+            nowNameList.some((nItem: any) => {
+              return nItem.name === fItem.name;
+            })
+          ) {
+            repeatFileList.push(acceptedFiles[index]);
+          } else {
+            uploderFileList.push(acceptedFiles[index]);
+          }
+        });
+        return {
+          repeatFileList,
+          uploderFileList,
+        };
+      };
+      const repeatAndUploaderFileList =
+        getRepeatFileAndGetUploderFileList(acceptedFiles);
+      console.log(repeatAndUploaderFileList);
+      if (repeatAndUploaderFileList.repeatFileList.length > 0) {
+        message.error(
+          `“${repeatAndUploaderFileList.repeatFileList
+            .map((i: any) => i.name)
+            .join("、")}”文件已存在`
+        );
       }
+
       // 插入新的文件列表
       const popLength = 10 - fileList.length;
-      let newFileList = [...acceptedFiles.slice(0, popLength), ...fileList];
+      let newFileList = [
+        ...repeatAndUploaderFileList.uploderFileList.slice(0, popLength),
+        ...fileList,
+      ];
       setFileList(newFileList);
     },
-    [fileList, list, message]
+    [fileList, message, nowNameList]
   );
 
-  const getRepeatName = (fList: Array<any>, Alist: Array<any>) => {
-    let repeatName = "";
-    Alist.forEach((aItem) => {
-      fList.forEach((fItem: any) => {
-        if (fItem.name === aItem.name) {
-          repeatName = fItem.name;
-        }
-      });
-    });
-    return repeatName;
-  };
+  // const getRepeatName = (fList: Array<any>, Alist: Array<any>) => {
+  //   let repeatName = "";
+  //   Alist.forEach((aItem) => {
+  //     fList.forEach((fItem: any) => {
+  //       if (fItem.name === aItem.name) {
+  //         repeatName = fItem.name;
+  //       }
+  //     });
+  //   });
+  //   return repeatName;
+  // };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
@@ -64,11 +103,11 @@ const UpLoaderFile = observer((props: any) => {
         return {
           id: uuid(),
           open: false,
-          list: item,
+          list: [],
+          file: item,
           isPermanence: true,
         };
       }) || [];
-    console.log(newFileList);
     toJS(fileListStore?.setNewFileList)(newFileList);
   };
 
@@ -98,9 +137,7 @@ const UpLoaderFile = observer((props: any) => {
   };
   // 1,048,576
   const renderSize = (item: any) => {
-    return (
-      <span>{item.size ? `${getMbfromB(Number(item.size))}MB` : "-"}</span>
-    );
+    return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>;
   };
 
   const handleRowDelete = (index: number) => {
@@ -183,12 +220,14 @@ const UpLoaderFile = observer((props: any) => {
                 fontSize: "12px",
                 lineHeight: "20px",
                 color: "#8A9099",
-                // padding: "12px 24px",
               }}
               tableBoySx={{
                 backgroundColor:
                   fileList.length >= 10 ? "rgba(255, 0, 0, 0.6)" : "",
               }}
+              tableContainerStyle={{
+                maxHeight: "300px",
+              }}
             ></Table>
           </div>
           {fileList.length === 0 && (

src/views/Project/ProjectData/index.tsx

@@ -28,7 +28,9 @@ 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 NoProject from "@/components/NoProject";
 import usePass from "@/hooks/usePass";
+import { storageUnitFromB } from "@/utils/util";
 import {
   getDataFind,
   getDataFileSearch,
@@ -63,9 +65,16 @@ const ProjectData = observer(() => {
   const isPass = usePass();
   const Message = useMessage();
   const { currentProjectStore } = useStores();
-  const projectId = useMemo(() => {
-    return toJS(currentProjectStore.currentProjectInfo.id);
-  }, [currentProjectStore]);
+  // const [fileToken, setFileToken] = useState("");
+  const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
+  const projectId = toJS(currentProjectStore.currentProjectInfo.id);
+  // const projectId = useMemo(() => {
+  //   console.log(
+  //     toJS(currentProjectStore.currentProjectInfo.id),
+  //     "toJS(currentProjectStore.currentProjectInfo.id)"
+  //   );
+  //   return toJS(currentProjectStore.currentProjectInfo.id);
+  // }, [currentProjectStore]);
   // 当前文件路径
   const [path, setPath] = useState("/");
   const [tableLoadding, setTableLoadding] = useState(false);
@@ -80,7 +89,6 @@ const ProjectData = observer(() => {
   // 复选框选中的文件名称数组
   const [selectIds, setSelectIds] = useState<Array<string>>([]);
   const [keyWord, setKeyWord] = useState("");
-  const [fileToken, setFileToken] = useState("");
   // 文件夹、文件列表
   const [list, setList] = useState<any>([]);
   // 数据集列表  不带文件
@@ -108,12 +116,17 @@ const ProjectData = observer(() => {
     }
   }, [list, dataSetList, activeTab]);
 
+  // 全（文件、文件夹、数据集）列表
+  const allList = useMemo(() => {
+    return [...list, ...dataSetList];
+  }, [list, dataSetList]);
+
   // 获取文件token
-  const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
-    onSuccess: (res: any) => {
-      setFileToken(res.data);
-    },
-  });
+  // const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
+  //   onSuccess: (res: any) => {
+  //     setFileToken(res.data);
+  //   },
+  // });
 
   // 全局搜索数据集
   const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
@@ -149,7 +162,7 @@ const ProjectData = observer(() => {
 
   // 获取某路径下的数据集
   const getDataSetList = useCallback(() => {
-    if (keyWord) {
+    if (keyWord && projectId) {
       return;
     } else {
       return getDataFindRun({
@@ -161,7 +174,7 @@ const ProjectData = observer(() => {
 
   //  全局搜索数据集
   const getDataSetListSearch = useCallback(() => {
-    if (keyWord) {
+    if (keyWord && projectId) {
       return getDataFileSearchRun({
         projectId: projectId as string,
         name: keyWord,
@@ -246,11 +259,11 @@ const ProjectData = observer(() => {
   };
 
   // 项目切换时重新获取文件token
-  useEffect(() => {
-    getDataFileTokenRun({
-      id: currentProjectStore.currentProjectInfo.id as string,
-    });
-  }, [getDataFileTokenRun, currentProjectStore]);
+  // useEffect(() => {
+  //   getDataFileTokenRun({
+  //     id: currentProjectStore.currentProjectInfo.id as string,
+  //   });
+  // }, [getDataFileTokenRun, currentProjectStore]);
 
   // 搜索值改变
   const handleKeyWordChange = (e: any) => {
@@ -350,9 +363,7 @@ const ProjectData = observer(() => {
     if (item.type === "dataSet") {
       return `${item.size}条`;
     }
-    return `${
-      item.size ? String((Number(item.size) / 1048576).toFixed(2)) + "MB" : "-"
-    }`;
+    return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
   };
 
   // table配置
@@ -380,7 +391,7 @@ const ProjectData = observer(() => {
           size="small"
           onClick={() => hanleShowMoveFileDialog(item)}
           disabled={
-            selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", "USER")
+            selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
           }
         >
           移动至
@@ -392,7 +403,7 @@ const ProjectData = observer(() => {
           color="error"
           onClick={() => hanleDeleteFile(item)}
           disabled={
-            selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", "USER")
+            selectIds.length > 0 || !isPass("PROJECT_DATA_DELETE", "USER")
           }
         >
           删除
@@ -423,7 +434,11 @@ const ProjectData = observer(() => {
   };
 
   // 删除文件
-  const handleDeleteDialogClose = () => {
+  const handleDeleteDialogClose = (event: any = {}, reason: any = "other") => {
+    // 点击弹窗外不关闭弹窗
+    if (reason === "backdropClick") {
+      return;
+    }
     setDeleteDialogOpen(false);
   };
 
@@ -468,7 +483,7 @@ const ProjectData = observer(() => {
               : `${path}/${currentOperateFile.name}`;
           CloudEController.JobOutFileDel(
             deletePath,
-            fileToken,
+            fileToken as string,
             projectId as string
           )?.then((res) => {
             Message.success("删除成功");
@@ -499,7 +514,7 @@ const ProjectData = observer(() => {
             .join(" ");
           CloudEController.JobOutFileDel(
             deletePath,
-            fileToken,
+            fileToken as string,
             projectId as string
           )?.then((res) => {
             Message.success("删除成功");
@@ -512,7 +527,7 @@ const ProjectData = observer(() => {
     } else {
       CloudEController.JobOutFileDel(
         deletePath,
-        fileToken,
+        fileToken as string,
         projectId as string
       )?.then((res) => {
         Message.success("删除成功");
@@ -601,6 +616,7 @@ const ProjectData = observer(() => {
     }
   }, [path]);
 
+  if (currentProjectStore.currentProjectInfo.name) {
     return (
       <ThemeProvider theme={theme}>
         <div className={style.projectData}>
@@ -788,11 +804,11 @@ const ProjectData = observer(() => {
           <UpLoaderFile
             onRef={UpLoaderFileRef}
             path={path}
-          list={list}
+            list={allList}
           ></UpLoaderFile>
           <AddFolder
             onRef={addFolderRef}
-          list={list}
+            list={allList}
             path={path}
             refresh={handleRefresh}
             fileToken={fileToken}
@@ -812,6 +828,9 @@ const ProjectData = observer(() => {
         </div>
       </ThemeProvider>
     );
+  } else {
+    return <NoProject />;
+  }
 });
 
 export default ProjectData;

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -28,7 +28,10 @@ import Loading from "@/views/Loading";
 import MyDialog from "@/components/mui/MyDialog";
 import { getProjectList } from "../../project";
 import { checkIsNumberLetterChinese } from "@/utils/util";
-import { setFileServerEndPointLocalStorage } from "@/views/Project/project";
+import {
+  setFileServerEndPointLocalStorage,
+  getFiletokenAccordingToId,
+} from "@/views/Project/project";
 
 type zoneIdOption = {
   id: string;
@@ -190,8 +193,15 @@ const BaseInfo = observer(() => {
           localStorage.setItem("fileServerEndPoint", "");
           setProjectInfo({});
         } else {
+          projectList[0].filetoken = getFiletokenAccordingToId(
+            projectList[0].id
+          );
           currentProjectStore.changeProject(projectList[0]);
           setFileServerEndPointLocalStorage(projectList[0].zoneId);
+          getFiletokenAccordingToId(projectList[0].id).then((res) => {
+            projectList[0].filetoken = res;
+            currentProjectStore.changeProject(projectList[0]);
+          });
           setProjectInfo(projectList[0]);
         }
       },

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-11 15:24:15
+ * @LastEditTime: 2022-06-15 19:04:11
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -35,16 +35,9 @@ const AddMember = observer((props: IProps) => {
   const [projectMember, setProjectMember] = useState("");
   const [filterTableData, setFilterTableData] = useState([]);
   const [checkData, setCheckData] = useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
   const Message = useMessage();
 
-  const selectOptions = useMemo(() => {
-    return [
-      { value: "VIEWER", label: "查看者" },
-      { value: "DEVELOPER", label: "研发者" },
-      { value: "MANAGER", label: "管理者" },
-    ];
-  }, []);
-
   const changePermission = useCallback(
     (val: IOption, index: number) => {
       const tableDataIndex = tableData[index] as any;
@@ -56,7 +49,8 @@ const AddMember = observer((props: IProps) => {
     [tableData]
   );
 
-  const columns = [
+  const columns = useMemo(() => {
+    return [
       { id: "checkbox", width: 50 },
       { id: "username", label: "项目成员", width: 160 },
       {
@@ -67,6 +61,7 @@ const AddMember = observer((props: IProps) => {
           const defaultValue = selectOptions.filter(
             (every) => every.value === item
           );
+          console.log(selectOptions, defaultValue, "111");
           return (
             <MySelect
               input={<OutlinedInput />}
@@ -83,7 +78,25 @@ const AddMember = observer((props: IProps) => {
         },
       },
     ];
+  }, [changePermission, selectOptions]);
 
+  useEffect(() => {
+    if (addMemberDialog) {
+      http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
+        const arr = [];
+        const { data } = res;
+        for (const key in data) {
+          arr.push({
+            label: String(data[key]),
+            value: key,
+          });
+        }
+        setSelectOptions(arr);
+      });
+    }
+  }, [addMemberDialog, http]);
+
+  /** 过滤表格数据 */
   useEffect(() => {
     if (!!projectMember) {
       const newVal =
@@ -96,6 +109,7 @@ const AddMember = observer((props: IProps) => {
     }
   }, [projectMember, tableData]);
 
+  /** 获取表格数据 */
   useEffect(() => {
     if (!addMemberDialog) return;
     const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
@@ -104,9 +118,7 @@ const AddMember = observer((props: IProps) => {
         params: { id: projectInfo?.id || "" },
       })
       .then((res) => {
-        if (res.data.length) {
         setTableData(res?.data);
-        }
       });
   }, [currentProjectStore?.currentProjectInfo, http, addMemberDialog]);
 

src/views/Project/ProjectSetting/ProjectMembers/components/RemoveItem.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 15:55:26
+ * @LastEditTime: 2022-06-15 13:50:54
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -34,10 +34,6 @@ const RemoveItem = observer((props: IProps) => {
   };
   const onConfirm = () => {
     const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
-    console.log(111111, {
-      id: projectInfo?.id || "",
-      username: removeDialog.username,
-    });
     http
       .del<IResponse<any>>(
         `/cpp/project/removemember?id=${projectInfo?.id || ""}&username=${

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-10 18:08:00
+ * @LastEditTime: 2022-06-15 18:53:01
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -154,7 +154,7 @@ const ProjectMembers = () => {
           sx={{ width: 340, height: 32 }}
           endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
         />
-        {isProjectOwner(projectOwner) ? (
+        {currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
           <Button
             style={{ backgroundColor: "#1370FF " }}
             variant="contained"

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

@@ -8,6 +8,10 @@ import { useMessage } from "@/components/MySnackbar";
 import { getProjectList } from "../../project";
 import { useStores } from "@/store";
 import { checkIsNumberLetterChinese } from "@/utils/util";
+import {
+  setFileServerEndPointLocalStorage,
+  getFiletokenAccordingToId,
+} from "@/views/Project/project";
 
 type zoneIdOption = {
   id: string;
@@ -45,6 +49,18 @@ const AddProject = (props: any) => {
         message.success("新建项目成功");
         const projectList = await getProjectList();
         currentProjectStore.setProjectList(projectList);
+        let project: any = {};
+        projectList.forEach((item: any) => {
+          if (item.name === name) {
+            project = { ...item };
+          }
+        });
+        currentProjectStore.changeProject(project);
+        setFileServerEndPointLocalStorage(project.zoneId);
+        getFiletokenAccordingToId(project.id).then((res) => {
+          project.filetoken = res;
+          currentProjectStore.changeProject(project);
+        });
       }
     },
     onError: () => {

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

@@ -7,7 +7,10 @@ import ProjectListPopper from "../ProjectListPopper";
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import AddProject from "../AddProject";
-import { setFileServerEndPointLocalStorage } from "@/views/Project/project";
+import {
+  setFileServerEndPointLocalStorage,
+  getFiletokenAccordingToId,
+} from "@/views/Project/project";
 
 const CurrentProject = observer(() => {
   const { currentProjectStore } = useStores();
@@ -33,6 +36,10 @@ const CurrentProject = observer(() => {
   const handleChangeCurrentProject = (project: any) => {
     currentProjectStore.changeProject(project);
     setFileServerEndPointLocalStorage(project.zoneId);
+    getFiletokenAccordingToId(project.id).then((res) => {
+      project.filetoken = res;
+      currentProjectStore.changeProject(project);
+    });
     setProjectListOpen(!projectListOpen);
   };
 

src/views/Project/project.ts

-import { product, hpczone } from "@/api/project_api";
+import { product, hpczone, getDataFileToken } from "@/api/project_api";
 
 export const getProjectList = async () => {
   const res = await product({ product: "CADD" });
@@ -18,3 +18,9 @@ export const setFileServerEndPointLocalStorage = async (zoneId: string) => {
     localStorage.setItem("fileServerEndPoint", fileServerEndPoint);
   }
 };
+
+// 根据项目id获取文件token
+export const getFiletokenAccordingToId = async (projectId: string) => {
+  const res = await getDataFileToken({ id: projectId });
+  return res.data;
+};