feat: 文件传输联调

src/api/fileserver/raysyncApi.ts

@@ -110,7 +110,7 @@ const ZONEID = (params: string) => {
 };
 
 const urlToken = (filetoken: string, projectId: string) => {
-  let token = getLoaclStorageOfKey("token_key").access_token;
+  let token = getLoaclStorageOfKey("token").access_token;
   return `?username=${projectId}&token=${token}&filetoken=${encodeURIComponent(
     filetoken
   )}&share=false&project=true`;

src/hooks/useDeepEffect.ts

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-14 17:22:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-14 17:22:56
+ * @FilePath: /bkunyun/src/hooks/useDeepEffect.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { useEffect, useRef } from 'react';
+import _ from 'lodash';
+
+export default function useDeepEffect(effectFunc: Function, deps: any[]) {
+  const isFirstRef = useRef(true);
+  const preDeps = useRef(deps);
+  useEffect(() => {
+    const isSame = preDeps.current.every((obj, index) => {
+      return _.isEqual(obj, deps[index]);
+    });
+    if (isFirstRef.current || !isSame) {
+      effectFunc();
+    }
+    isFirstRef.current = false;
+    preDeps.current = deps;
+  }, [deps]);
+}

src/store/index.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-09 20:41:05
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 10:16:23
+ * @LastEditTime: 2022-06-14 20:55:22
  * @FilePath: /bkunyun/src/store/index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,11 +11,11 @@ import { configure } from "mobx";
 import permissionStore from "./modules/permission";
 import menuStore from "./modules/menu";
 import currentProjectStore from "./modules/currentProject";
-import fileList from "./modules/fileList";
+import fileListStore from "./modules/fileList";
 
 configure({ enforceActions: "always" });
 
-export const stores = { permissionStore, menuStore, currentProjectStore, fileList };
+export const stores = { permissionStore, menuStore, currentProjectStore, fileListStore };
 
 /** Store类型 */
 export type Stores = typeof stores;

src/store/modules/fileList.ts

@@ -2,12 +2,12 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 17:00:19
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 11:06:13
+ * @LastEditTime: 2022-06-14 21:47:28
  * @FilePath: /bkunyun/src/store/modules/upload.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
-import { makeAutoObservable } from "mobx";
+import {  makeAutoObservable, observable, action } from "mobx";
 
 interface IUploadInfo {
   id: string,
@@ -25,14 +25,29 @@ class FileList {
   /** 文件上传列表 */
   fileList: IUploadInfo[] = [];
 
-  setFileList (val: IUploadInfo[]) {
-    this.fileList = val
+
+  // setFileList (val: IUploadInfo[]) {
+  //   this.fileList = val
+  // }
+
+  /** 新需要上传的文件列表 */
+  newFileList: IUploadInfo[] = [];
+
+  /** 设置最新需要上传的文件列表 */
+  setNewFileList (val: IUploadInfo[]) {
+    this.fileList = this.fileList.concat(val)
+
+    this.newFileList = val
+
   }
 
+
   /** 设置文件上传信息 */
   setUploadInfo(id: string, val: IUploadInfo) {
+    console.log(val,id,'22222')
     const newFileList = this.fileList?.map((item)=>{
       if(item.id === id){
+        console.log('3333',item)
         return val
       } return item
     })
@@ -65,8 +80,9 @@ class FileList {
         } return item
       })
       this.fileList = newFileList
-    }
+  }
 }
 
+const fileListStore = new FileList()
 
-export default new FileList();
+export default fileListStore

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 10:32:54
+ * @LastEditTime: 2022-06-14 17:21:52
  * @FilePath: /bkunyun/src/utils/util.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -29,19 +29,30 @@ export const isProjectOwner = (name: string) => {
   return pwd;
 };
 
-// 获取用户token 信息
+// 获取用户信息
 export const getUserInfo = () => {
   let val: any;
   try {
     val = JSON.parse(localStorage.getItem("userInfo") || "{}")
   }
   catch {
-    console.error("获取用户信息token 出错");
+    console.error("获取用户信息 出错");
+  }
+  return val
+}
+
+// 获取token信息
+export const getTokenInfo = () => {
+  let val: any;
+  try {
+    val = JSON.parse(localStorage.getItem("token") || "{}")
+  }
+  catch {
+    console.error("获取token信息 出错");
   }
   return val
 }
 
-  
 
 
 const IsNumberLetterChineseReg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
@@ -52,4 +63,4 @@ export const checkIsNumberLetterChinese = (string: string) => {
 
 export const getMbfromB = (b: number) => {
   return Math.floor(b / 1048576);
-};
+};
\ No newline at end of file

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

-import { useEffect } from "react";
-
-import useGlobalStore from "@/hooks/useGlobalStore";
 import { observer } from "mobx-react-lite";
-import { toJS } from "mobx";
-import UseTusUpload from "@/utils/Upload/tusUpload";
+// import { any } from "@/store/modules/fileList";
 // toJS(currentProjectStore.currentProjectInfo.id);
 
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 15:46:42
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 11:07:55
+ * @LastEditTime: 2022-06-14 21:35:09
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/FileItem/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-const FileItem = observer(() => {
-  const fileList = toJS(useGlobalStore("fileList"));
 
-  const { uploadFile } = UseTusUpload(fileList?.fileList);
-  useEffect(() => {
-    fileList?.fileList?.forEach((item) => {
-      uploadFile(
-        item.id,
-        item.list,
-        "/",
-        "/",
-        (upload: any, filepath: string) => console.log(upload, filepath, 1111)
-      );
-    });
-    console.log(fileList?.fileList, 1111);
-  }, [fileList.fileList, uploadFile]);
+interface IProps {
+  fileItemInfo: any;
+}
+const FileItem = (props: IProps) => {
+  const { fileItemInfo } = props;
+  console.log(fileItemInfo, 2222);
   return <div>dd</div>;
-});
+};
 
 export default FileItem;

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-10 18:05:21
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-11 18:08:27
+ * @LastEditTime: 2022-06-14 21:00:46
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,8 +12,11 @@ import { memo } from "react";
 import MySelect from "@/components/mui/MySelect";
 import MyTitle from "@/components/mui/MyTitle";
 import FileItem from "../FileItem";
+import useGlobalStore from "@/hooks/useGlobalStore";
+import { observer } from "mobx-react-lite";
 
-const TranSferList = () => {
+const TranSferList = observer(() => {
+  const fileList = useGlobalStore("fileListStore");
   return (
     <Box style={{ width: 520, padding: 20 }}>
       <MyTitle title="传输列表" />
@@ -42,10 +45,12 @@ const TranSferList = () => {
         />
       </Box>
       <Box>
-        <FileItem />
+        {fileList?.fileList.map((item) => {
+          return <FileItem fileItemInfo={item} />;
+        })}
       </Box>
     </Box>
   );
-};
+});
 
 export default memo(TranSferList);

src/views/ConsoleLayout/index.tsx

@@ -16,6 +16,13 @@ import MyPopover from "@/components/mui/MyPopover";
 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 UseTusUpload from "@/utils/Upload/tusUpload";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getDataFileToken } from "@/api/project_api";
+import useDeepEffect from "@/hooks/useDeepEffect";
 
 const ConsoleLayout = observer(() => {
   const {
@@ -36,6 +43,42 @@ const ConsoleLayout = observer(() => {
     permissionStore.setSidebarRouters(location.pathname);
   }, [location, permissionStore]);
 
+  const fileList = toJS(useGlobalStore("fileListStore"));
+  const currentProjectStore = toJS(useGlobalStore("currentProjectStore"));
+  const { uploadFile } = UseTusUpload({
+    fileListStore: fileList,
+    currentProjectStore,
+  });
+
+  /** 获取文件token请求 */
+  const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
+    onSuccess: (res: any) => {
+      let url =
+        "https://fileserver.cloudam.cn/parallelupload/" +
+        urlToken(
+          res?.data || "",
+          currentProjectStore?.currentProjectInfo?.id as string
+        );
+      fileList?.newFileList?.forEach((item: any) => {
+        uploadFile(
+          item,
+          item?.list,
+          url,
+          "/",
+          (upload: any, filepath: string) => console.log(upload, filepath, 1111)
+        );
+      });
+    },
+  });
+
+  useDeepEffect(() => {
+    if (fileList?.newFileList?.length) {
+      getDataFileTokenRun({
+        id: currentProjectStore?.currentProjectInfo.id || "",
+      });
+    }
+  }, [fileList?.newFileList]);
+
   return (
     <Box>
       <Box className={style.topApp}>

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

@@ -13,11 +13,12 @@ import noFile from "@/assets/project/noFile.svg";
 import uploaderIcon from "@/assets/project/uploaderIcon.svg";
 import classnames from "classnames";
 import { getMbfromB } from "@/utils/util";
-import { observer } from "mobx-react-lite";
-import useGlobalStore from "@/hooks/useGlobalStore";
+import { observer } from "mobx-react";
+import { useStores } from "@/store";
+import { toJS } from "mobx";
 
 const UpLoaderFile = observer((props: any) => {
-  const uploadInfoStore = useGlobalStore("fileList");
+  const { fileListStore } = useStores();
   const message = useMessage();
   const [fileList, setFileList] = useState<any>([]);
   // list 是项目数据table的数据
@@ -59,17 +60,17 @@ const UpLoaderFile = observer((props: any) => {
   let dialogRef: any = React.createRef();
 
   const handleSubmit = () => {
-    const newFileList = fileList?.map((item: any) => {
-      return {
-        id: uuid(),
-        open: false,
-        list: item,
-        isPermanence: true,
-      };
-    });
-    uploadInfoStore.setFileList(newFileList);
-
-    console.log("handleSubmit");
+    const newFileList =
+      fileList?.map((item: any) => {
+        return {
+          id: uuid(),
+          open: false,
+          list: item,
+          isPermanence: true,
+        };
+      }) || [];
+    console.log(newFileList);
+    toJS(fileListStore?.setNewFileList)(newFileList);
   };
 
   const showDialog = () => {

src/views/Project/ProjectSetting/BaseInfo/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-01 09:15:10
+ * @LastEditTime: 2022-06-14 15:40:27
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */