Skip to content

B
bkunyun
Commit 379cf7b8 authored by chenshouchao's avatar chenshouchao
Browse files
Options

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

Feat 20220608 projectdata

See merge request !35
parents 983a53c1 b0de1bf1
Hide whitespace changes
Inline Side-by-side
Showing with 774 additions and 602 deletions
src/api/fileserver/raysyncApi.ts
View file @ 379cf7b8
......@@ -2,29 +2,6 @@
// const APIOPTION = "https://fileserver.cloudam.cn"
// const APIPORT = "39.105.230.38"
import { getLoaclStorageOfKey } from "./utils";
// const raysyncAddr = {
// bandwidth: null
// capacity: 10485760
// enableLargeFileTransfer: true
// fileServerEndPoint: "https://fileserver.cloudam.cn"
// fileSystemType: "standard"
// jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
// privateIp: "10.8.2.67"
// protocolType: "NFS"
// publicMountDir: "/public"
// publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
// ramUserId: "61261f8a2a2aa4d72f752c3c"
// smbMountUrl: null
// srcAddr: "fileserver.cloudam.cn"
// srcIp: "47.94.198.50"
// sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
// storageType: "Capacity"
// token: null
// userMountDir: "/public/data/"
// userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
// vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
// zoneId: "cn-beijing-h"
// }
const API = function () {
const raysyncAddr = getLoaclStorageOfKey("raysyncAddr");
......@@ -50,38 +27,6 @@ const APIPORT = function () {
return raysyncAddr.srcIp || "";
};
// const currentRegion = {
// cloudProvider: "ALIYUN"
// description: "本计算区有丰富的CPU资源，并提供部分GPU资源，可以满足大部分计算作业需求。"
// enabled: true
// id: "CE-Z1"
// initialized: true
// location: "CLOUD"
// name: "通用计算区"
// primary: true
// storageConfig: {srcAddr: "fileserver.cloudam.cn", srcIp: "47.94.198.50", privateIp: "10.8.2.67",…}
// bandwidth: null
// capacity: 10485760
// enableLargeFileTransfer: true
// fileServerEndPoint: "https://fileserver.cloudam.cn"
// fileSystemType: "standard"
// jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
// privateIp: "10.8.2.67"
// protocolType: "NFS"
// publicMountDir: "/public"
// publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
// ramUserId: "61261f8a2a2aa4d72f752c3c"
// smbMountUrl: null
// srcAddr: "fileserver.cloudam.cn"
// srcIp: "47.94.198.50"
// sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
// storageType: "Capacity"
// token: null
// userMountDir: "/public/data/"
// userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
// vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
// zoneId: "cn-beijing-h"
// }
// 当前计算区
let currentRegion = localStorage.getItem("current-region");
let currentRegionJson = currentRegion && JSON.parse(currentRegion);
......@@ -114,31 +59,6 @@ const urlToken = (filetoken: string, projectId: string) => {
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 = () => {
......@@ -195,3 +115,59 @@ export {
encryptTransfer,
getType,
};
// const raysyncAddr = {
// bandwidth: null
// capacity: 10485760
// enableLargeFileTransfer: true
// fileServerEndPoint: "https://fileserver.cloudam.cn"
// fileSystemType: "standard"
// jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
// privateIp: "10.8.2.67"
// protocolType: "NFS"
// publicMountDir: "/public"
// publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
// ramUserId: "61261f8a2a2aa4d72f752c3c"
// smbMountUrl: null
// srcAddr: "fileserver.cloudam.cn"
// srcIp: "47.94.198.50"
// sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
// storageType: "Capacity"
// token: null
// userMountDir: "/public/data/"
// userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
// vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
// zoneId: "cn-beijing-h"
// }
// const currentRegion = {
// cloudProvider: "ALIYUN"
// description: "本计算区有丰富的CPU资源，并提供部分GPU资源，可以满足大部分计算作业需求。"
// enabled: true
// id: "CE-Z1"
// initialized: true
// location: "CLOUD"
// name: "通用计算区"
// primary: true
// storageConfig: {srcAddr: "fileserver.cloudam.cn", srcIp: "47.94.198.50", privateIp: "10.8.2.67",…}
// bandwidth: null
// capacity: 10485760
// enableLargeFileTransfer: true
// fileServerEndPoint: "https://fileserver.cloudam.cn"
// fileSystemType: "standard"
// jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
// privateIp: "10.8.2.67"
// protocolType: "NFS"
// publicMountDir: "/public"
// publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
// ramUserId: "61261f8a2a2aa4d72f752c3c"
// smbMountUrl: null
// srcAddr: "fileserver.cloudam.cn"
// srcIp: "47.94.198.50"
// sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
// storageType: "Capacity"
// token: null
// userMountDir: "/public/data/"
// userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
// vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
// zoneId: "cn-beijing-h"
// }
src/components/InformationDisplay/InformationDisplay.tsx
View file @ 379cf7b8
......@@ -19,7 +19,7 @@ const InformationDisplay = (props: InformationDisplayProps) => {
return (
<div className={style.infoListLi} key={item.label}>
<div className={style.infoListLiLabel}>{item.label}</div>
<div className={style.infoListLiValue}>{item.value}</div>
<div className={style.infoListLiValue}>{item.value || "-"}</div>
</div>
);
})}
......
src/hooks/useDeepEffect.ts 0 → 100644
View file @ 379cf7b8
/*
* @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
View file @ 379cf7b8
......@@ -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
View file @ 379cf7b8
......@@ -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/Upload/tusUpload.js
View file @ 379cf7b8
import React from "react";
import React, { useEffect, useState } from "react";
import * as tus from "tus-js-client";
import {
verifyLettersNumbersCertainChars4,
verifyLettersNumbersCertainChars5,
} from "../helper";
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 { fileList: uploadInfoStore } = props;
console.log(uploadInfoStore, 222);
const uploadInfoList = uploadInfoStore?.uploadInfo?.list || [];
const uploadInfoIsPermanence =
uploadInfoStore?.uploadInfo?.isPermanence || [];
const uploadInfoOpen = uploadInfoStore?.uploadInfo?.open || [];
const { fileListStore: uploadInfoStore, currentProjectStore } = props;
const uploadFile = (id, file, url, filepath, callBack) => {
/** 文件token */
const [fileToken, setFileToken] = useState("");
/** token信息 */
let tokenInfo = getTokenInfo();
/** 获取文件token请求 */
const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
onSuccess: (res) => {
setFileToken(res.data);
},
});
useEffect(() => {
getDataFileTokenRun({
id: currentProjectStore?.currentProjectInfo.id,
});
}, []);
const uploadFile = (item, file, url, filepath, callBack) => {
for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i);
}
}
uploadInfoStore?.setUploadInfoIsPermanence(id, false);
uploadInfoStore?.setUploadInfoIsPermanence(item.id, false);
if (!verifyLettersNumbersCertainChars4(file.name)) {
let json1 = uploadInfoStore?.uploadInfo?.list.concat({
......@@ -38,7 +55,7 @@ const UseTusUpload = (props) => {
statusMsgDetail:
"上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
});
uploadInfoStore?.setUploadInfo(id, {
uploadInfoStore?.setUploadInfo(item.id, {
open: true,
list: json1,
isPermanence: false,
......@@ -48,9 +65,9 @@ const UseTusUpload = (props) => {
// Create a new tus upload
let timeId = new Date().getTime();
let headers = {
username: "",
token: "",
filetoken: "",
username: currentProjectStore?.currentProjectInfo.id,
token: tokenInfo?.access_token || "",
filetoken: fileToken,
share: false,
};
let upload = new tus.Upload(file, {
......@@ -67,10 +84,10 @@ const UseTusUpload = (props) => {
},
onProgress: function (bytesUploaded, bytesTotal, a) {
var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
let fliterJson = uploadInfoList?.filter((item) => item.id === timeId);
let fliterJson = item.list?.filter((item) => item.id === timeId);
let json = [];
if (fliterJson.length === 0) {
json = uploadInfoList.concat({
json = item.list.concat({
name: upload.file.name,
bytesUploaded: bytesUploaded,
bytesTotal: bytesTotal,
......@@ -83,13 +100,13 @@ const UseTusUpload = (props) => {
upload,
dir: "/home/cloudam/",
});
uploadInfoStore?.setUploadInfo(id, {
uploadInfoStore?.setUploadInfo(item.id, {
open: true,
list: json,
isPermanence: uploadInfoStore?.uploadInfo?.isPermanence,
});
} else {
let a = uploadInfoList;
let a = item.list;
let time = new Date().getTime();
a.map((element) => {
if (element.id === timeId) {
......@@ -108,18 +125,20 @@ const UseTusUpload = (props) => {
: element["endTime"];
}
});
uploadInfoStore?.setUploadInfo(id, {
uploadInfoStore?.setUploadInfo(item.id, {
open: true,
list: a.concat([]),
isPermanence: uploadInfoIsPermanence,
isPermanence: item.isPermanence,
});
}
},
onSuccess: function () {
let fliterJson = uploadInfoList.filter((item) => item.id === timeId);
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 = uploadInfoList.concat({
json = item.list.concat({
name: upload.file.name,
bytesUploaded: 0,
bytesTotal: 0,
......@@ -131,21 +150,22 @@ const UseTusUpload = (props) => {
statusMsg: "上传成功",
upload,
});
uploadInfoStore?.setUploadInfo(id, {
uploadInfoStore?.setUploadInfo(item.id, {
open: true,
list: json,
isPermanence: uploadInfoIsPermanence,
isPermanence: item.isPermanence,
});
} else {
uploadInfoList.map((item) => {
console.log(item.list, "000022222");
item.list.map((item) => {
if (item.id === timeId) {
item["statusMsg"] = "上传成功";
}
});
uploadInfoStore?.setUploadInfo(id, {
uploadInfoStore?.setUploadInfo(item.id, {
open: true,
list: uploadInfoList,
isPermanence: uploadInfoIsPermanence,
list: item.list,
isPermanence: item.isPermanence,
});
}
callBack && callBack(upload, filepath);
......@@ -155,391 +175,391 @@ const UseTusUpload = (props) => {
upload.start();
};
const uploadFileCallBack = (file, url, filepath, callBack) => {
if (!verifyLettersNumbersCertainChars4(file.name)) {
let json1 = uploadInfoList.concat({
name: file.name,
bytesUploaded: 0,
bytesTotal: 0,
percentage: 0,
startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000,
bytesUploaded2: 0,
fileIsCn: true,
id: new Date().getTime,
statusMsg: "上传失败",
upload: null,
statusMsgDetail:
"上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
});
uploadInfoStore?.setUploadInfo({
open: true,
list: json1,
isPermanence: false,
});
return;
}
for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i);
}
}
uploadInfoStore?.setUploadInfoIsPermanence(false);
// const uploadFileCallBack = (file, url, filepath, callBack) => {
// if (!verifyLettersNumbersCertainChars4(file.name)) {
// let json1 = uploadInfoList.concat({
// name: file.name,
// bytesUploaded: 0,
// bytesTotal: 0,
// percentage: 0,
// startTime: new Date().getTime(),
// endTime: new Date().getTime() + 1000,
// bytesUploaded2: 0,
// fileIsCn: true,
// id: new Date().getTime,
// statusMsg: "上传失败",
// upload: null,
// statusMsgDetail:
// "上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: json1,
// isPermanence: false,
// });
// return;
// }
// for (let i in localStorage) {
// if (i.indexOf("tus::tus-br") > -1) {
// localStorage.removeItem(i);
// }
// }
// uploadInfoStore?.setUploadInfoIsPermanence(false);
// Create a new tus upload
let timeId = new Date().getTime();
// // Create a new tus upload
// let timeId = new Date().getTime();
let headers = {
username: "",
token: "",
filetoken: "",
share: false,
};
let upload = new tus.Upload(file, {
endpoint: url,
parallelUploads: 1,
chunkSize: 5242880,
metadata: {
filepath: filepath,
},
retryDelays: [0, 3000, 5000, 10000, 20000],
headers: headers,
onError: function (error) {
console.log("Failed because: " + error);
},
onProgress: function (bytesUploaded, bytesTotal, a) {
var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
let fliterJson = uploadInfoList.filter((item) => item.id === timeId);
let json = [];
if (fliterJson.length === 0) {
json = uploadInfoList.concat({
name: upload.file.name,
bytesUploaded: bytesUploaded,
bytesTotal: bytesTotal,
percentage: percentage,
startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000,
bytesUploaded2: bytesUploaded,
id: timeId,
statusMsg: "正在上传",
upload,
dir: "/home/cloudam/",
});
uploadInfoStore?.setUploadInfo({
open: true,
list: json,
isPermanence: uploadInfoIsPermanence,
});
} else {
let a = uploadInfoList;
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({
open: true,
list: a.concat([]),
isPermanence: uploadInfoIsPermanence,
});
}
},
onSuccess: function () {
let fliterJson = uploadInfoList.filter((item) => item.id === timeId);
if (fliterJson.length === 0 && upload.file["size"] === 0) {
let json = [];
json = uploadInfoList.concat({
name: upload.file.name,
bytesUploaded: 0,
bytesTotal: 0,
id: timeId,
percentage: 100,
startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000,
bytesUploaded2: 0,
statusMsg: "上传成功",
upload,
});
uploadInfoStore?.setUploadInfo({
open: true,
list: json,
isPermanence: uploadInfoIsPermanence,
});
} else {
uploadInfoList.map((item) => {
if (item.id === timeId) {
item["statusMsg"] = "上传成功";
}
});
// let headers = {
// username: "",
// token: "",
// filetoken: "",
// share: false,
// };
// let upload = new tus.Upload(file, {
// endpoint: url,
// parallelUploads: 1,
// chunkSize: 5242880,
// metadata: {
// filepath: filepath,
// },
// retryDelays: [0, 3000, 5000, 10000, 20000],
// headers: headers,
// onError: function (error) {
// console.log("Failed because: " + error);
// },
// onProgress: function (bytesUploaded, bytesTotal, a) {
// var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
// let fliterJson = uploadInfoList.filter((item) => item.id === timeId);
// let json = [];
// if (fliterJson.length === 0) {
// json = uploadInfoList.concat({
// name: upload.file.name,
// bytesUploaded: bytesUploaded,
// bytesTotal: bytesTotal,
// percentage: percentage,
// startTime: new Date().getTime(),
// endTime: new Date().getTime() + 1000,
// bytesUploaded2: bytesUploaded,
// id: timeId,
// statusMsg: "正在上传",
// upload,
// dir: "/home/cloudam/",
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: json,
// isPermanence: uploadInfoIsPermanence,
// });
// } else {
// let a = uploadInfoList;
// 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({
// open: true,
// list: a.concat([]),
// isPermanence: uploadInfoIsPermanence,
// });
// }
// },
// onSuccess: function () {
// let fliterJson = uploadInfoList.filter((item) => item.id === timeId);
// if (fliterJson.length === 0 && upload.file["size"] === 0) {
// let json = [];
// json = uploadInfoList.concat({
// name: upload.file.name,
// bytesUploaded: 0,
// bytesTotal: 0,
// id: timeId,
// percentage: 100,
// startTime: new Date().getTime(),
// endTime: new Date().getTime() + 1000,
// bytesUploaded2: 0,
// statusMsg: "上传成功",
// upload,
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: json,
// isPermanence: uploadInfoIsPermanence,
// });
// } else {
// uploadInfoList.map((item) => {
// if (item.id === timeId) {
// item["statusMsg"] = "上传成功";
// }
// });
uploadInfoStore?.setUploadInfo({
open: true,
list: uploadInfoList,
isPermanence: uploadInfoIsPermanence,
});
}
callBack && callBack(upload);
},
});
// Start the upload
upload.start();
};
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: uploadInfoList,
// isPermanence: uploadInfoIsPermanence,
// });
// }
// callBack && callBack(upload);
// },
// });
// // Start the upload
// upload.start();
// };
const uploadFileFunc = (
file,
url,
filepath,
page,
length,
allFile,
path,
timeId,
callBack
) => {
// Create a new tus upload
for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i);
}
}
let timeIdFile = new Date().getTime();
// const uploadFileFunc = (
// file,
// url,
// filepath,
// page,
// length,
// allFile,
// path,
// timeId,
// callBack
// ) => {
// // Create a new tus upload
// for (let i in localStorage) {
// if (i.indexOf("tus::tus-br") > -1) {
// localStorage.removeItem(i);
// }
// }
// let timeIdFile = new Date().getTime();
let headers = {
username: "",
token: "",
filetoken: "",
share: false,
};
let uploads = new tus.Upload(file, {
endpoint: url,
parallelUploads: 1,
chunkSize: 5242880,
metadata: {
filepath: filepath,
},
retryDelays: [0, 3000, 5000, 10000, 20000],
headers: headers,
onError: function (error) {
console.log("Failed because: " + error);
},
onProgress: function (bytesUploaded, bytesTotal, percentage) {
// console.log("正在上传的文件名:" + uploads['file']['name'], 'onProgress')
if (
uploadInfoList.filter((item) => item.id === timeId) &&
uploadInfoList.filter((item) => item.id === timeId).length > 0
) {
let k = uploadInfoList;
k.map((item) => {
if (item.id === timeId) {
item["upload"] = uploads;
}
});
uploadInfoStore?.setUploadInfo({
open: true,
list: k,
isPermanence: uploadInfoIsPermanence,
});
// let headers = {
// username: "",
// token: "",
// filetoken: "",
// share: false,
// };
// let uploads = new tus.Upload(file, {
// endpoint: url,
// parallelUploads: 1,
// chunkSize: 5242880,
// metadata: {
// filepath: filepath,
// },
// retryDelays: [0, 3000, 5000, 10000, 20000],
// headers: headers,
// onError: function (error) {
// console.log("Failed because: " + error);
// },
// onProgress: function (bytesUploaded, bytesTotal, percentage) {
// // console.log("正在上传的文件名:" + uploads['file']['name'], 'onProgress')
// if (
// uploadInfoList.filter((item) => item.id === timeId) &&
// uploadInfoList.filter((item) => item.id === timeId).length > 0
// ) {
// let k = uploadInfoList;
// k.map((item) => {
// if (item.id === timeId) {
// item["upload"] = uploads;
// }
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: k,
// isPermanence: uploadInfoIsPermanence,
// });
return;
}
let json = uploadInfoList.concat({
name: allFile[page]["path"].split("/")[0],
bytesUploaded: page + 1,
statusMsg: "正在上传",
bytesTotal: length,
upload: uploads,
ids: timeIdFile,
percentage: ((page + 1) / length) * 100,
type: "folder",
id: timeId,
});
uploadInfoStore?.setUploadInfo({
open: true,
list: json,
isPermanence: uploadInfoIsPermanence,
});
},
onSuccess: function (bytesUploaded, bytesTotal, percentage) {
++page;
// 每次成功 page累加 当page 与 总上传文件长度 进行比较 判断是否上传文件夹是否成功。
if (page >= length) {
uploadInfoList.map((item) => {
if (item.id === timeId) {
item["statusMsg"] = "上传成功";
item["bytesUploaded"] = length;
item["bytesTotal"] = length;
item["percentage"] = 100;
}
});
uploadInfoStore?.setUploadInfo({
open: uploadInfoOpen,
list: uploadInfoList,
isPermanence: uploadInfoIsPermanence,
});
// return;
// }
// let json = uploadInfoList.concat({
// name: allFile[page]["path"].split("/")[0],
// bytesUploaded: page + 1,
// statusMsg: "正在上传",
// bytesTotal: length,
// upload: uploads,
// ids: timeIdFile,
// percentage: ((page + 1) / length) * 100,
// type: "folder",
// id: timeId,
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: json,
// isPermanence: uploadInfoIsPermanence,
// });
// },
// onSuccess: function (bytesUploaded, bytesTotal, percentage) {
// ++page;
// // 每次成功 page累加 当page 与 总上传文件长度 进行比较 判断是否上传文件夹是否成功。
// if (page >= length) {
// uploadInfoList.map((item) => {
// if (item.id === timeId) {
// item["statusMsg"] = "上传成功";
// item["bytesUploaded"] = length;
// item["bytesTotal"] = length;
// item["percentage"] = 100;
// }
// });
// uploadInfoStore?.setUploadInfo({
// open: uploadInfoOpen,
// list: uploadInfoList,
// isPermanence: uploadInfoIsPermanence,
// });
// 上传文件夹成功 回调 页面 刷新 列表 重新请求数据
callBack && callBack(true);
return;
} else {
// 判断 传输列表中是否有 有该 id 的任务
// 进度 判断: 成功一个文件 page 累加 redux
if (
uploadInfoList((item) => item.id === timeId) &&
uploadInfoList((item) => item.id === timeId).length > 0
) {
let newList = uploadInfoList;
newList.forEach((items) => {
if (items.id === timeId) {
items["name"] = allFile[page]["path"].split("/")[0];
items["bytesUploaded"] = page + 1;
items["bytesTotal"] = length;
items["statusMsg"] = "正在上传";
items["percentage"] = ((page + 1) / length) * 100;
}
});
uploadInfoStore?.setUploadInfo({
open: true,
list: newList.concat([]),
isPermanence: uploadInfoIsPermanence,
});
}
uploadFileFunc(
allFile[page],
url,
path === "/"
? path + allFile[page]["path"]
: path + "/" + allFile[page]["path"],
page,
allFile.length,
allFile,
path,
timeId,
callBack
);
}
},
});
// 每次调用 把 任务 重新赋值给 该上传任务 以便于 文件夹暂停下载功能实现
if (
uploadInfoList.filter((item) => item.id === timeId) &&
uploadInfoList.filter((item) => item.id === timeId).length > 0
) {
let k = uploadInfoList;
k.map((item) => {
if (item.id === timeId) {
item["upload"] = uploads;
}
});
uploadInfoStore?.setUploadInfo({
open: true,
list: k,
isPermanence: uploadInfoIsPermanence,
});
}
uploads.start();
};
// // 上传文件夹成功 回调 页面 刷新 列表 重新请求数据
// callBack && callBack(true);
// return;
// } else {
// // 判断 传输列表中是否有 有该 id 的任务
// // 进度 判断: 成功一个文件 page 累加 redux
// if (
// uploadInfoList((item) => item.id === timeId) &&
// uploadInfoList((item) => item.id === timeId).length > 0
// ) {
// let newList = uploadInfoList;
// newList.forEach((items) => {
// if (items.id === timeId) {
// items["name"] = allFile[page]["path"].split("/")[0];
// items["bytesUploaded"] = page + 1;
// items["bytesTotal"] = length;
// items["statusMsg"] = "正在上传";
// items["percentage"] = ((page + 1) / length) * 100;
// }
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: newList.concat([]),
// isPermanence: uploadInfoIsPermanence,
// });
// }
// uploadFileFunc(
// allFile[page],
// url,
// path === "/"
// ? path + allFile[page]["path"]
// : path + "/" + allFile[page]["path"],
// page,
// allFile.length,
// allFile,
// path,
// timeId,
// callBack
// );
// }
// },
// });
// // 每次调用 把 任务 重新赋值给 该上传任务 以便于 文件夹暂停下载功能实现
// if (
// uploadInfoList.filter((item) => item.id === timeId) &&
// uploadInfoList.filter((item) => item.id === timeId).length > 0
// ) {
// let k = uploadInfoList;
// k.map((item) => {
// if (item.id === timeId) {
// item["upload"] = uploads;
// }
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: k,
// isPermanence: uploadInfoIsPermanence,
// });
// }
// uploads.start();
// };
const uploadFolder = (file, url, filepath, callBack) => {
// tus 上传会设置 缓存 清除缓存设置
for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i);
}
}
// 打开传输列表
uploadInfoStore?.setUploadInfoIsPermanence(false);
// const uploadFolder = (file, url, filepath, callBack) => {
// // tus 上传会设置 缓存 清除缓存设置
// for (let i in localStorage) {
// if (i.indexOf("tus::tus-br") > -1) {
// localStorage.removeItem(i);
// }
// }
// // 打开传输列表
// uploadInfoStore?.setUploadInfoIsPermanence(false);
// 判断 文件夹中 是否中 是否 全部是中文 不是 过滤 文件路径中文或者特殊符号 含有任务的
let filterFileJson = [];
if (file && file.length > 0) {
filterFileJson = file.filter((item) =>
verifyLettersNumbersCertainChars5(item.path)
);
}
if (filterFileJson && filterFileJson.length === 0) {
let json1 = uploadInfoList.concat({
name: file[0]["path"].split("/")[0],
bytesUploaded: 0,
bytesTotal: 0,
percentage: 0,
startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000,
bytesUploaded2: 0,
fileIsCn: true,
statusMsg: "上传失败",
type: true,
statusMsgDetail:
"上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
// 已自动过滤掉命名包含中文、特殊符号、空格的文件及文件夹
upload: null,
id: new Date().getTime(),
dir: "/home/cloudam/",
});
uploadInfoStore?.setUploadInfo({
open: true,
list: json1,
isPermanence: false,
});
return;
}
let timeId = new Date().getTime();
if (filterFileJson && filterFileJson.length < file.length) {
let json1 = uploadInfoList.concat({
name: file[0]["path"].split("/")[0],
bytesUploaded: 0,
bytesTotal: filterFileJson.length,
percentage: 0,
startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000,
id: timeId,
type: true,
statusMsg: "正在上传",
statusMsgDetail: "已自动过滤掉命名包含特殊符号、空格的文件及文件夹",
});
uploadInfoStore?.setUploadInfo({
open: true,
list: json1,
isPermanence: false,
});
}
// // 判断 文件夹中 是否中 是否 全部是中文 不是 过滤 文件路径中文或者特殊符号 含有任务的
// let filterFileJson = [];
// if (file && file.length > 0) {
// filterFileJson = file.filter((item) =>
// verifyLettersNumbersCertainChars5(item.path)
// );
// }
// if (filterFileJson && filterFileJson.length === 0) {
// let json1 = uploadInfoList.concat({
// name: file[0]["path"].split("/")[0],
// bytesUploaded: 0,
// bytesTotal: 0,
// percentage: 0,
// startTime: new Date().getTime(),
// endTime: new Date().getTime() + 1000,
// bytesUploaded2: 0,
// fileIsCn: true,
// statusMsg: "上传失败",
// type: true,
// statusMsgDetail:
// "上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
// // 已自动过滤掉命名包含中文、特殊符号、空格的文件及文件夹
// upload: null,
// id: new Date().getTime(),
// dir: "/home/cloudam/",
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: json1,
// isPermanence: false,
// });
// return;
// }
// let timeId = new Date().getTime();
// if (filterFileJson && filterFileJson.length < file.length) {
// let json1 = uploadInfoList.concat({
// name: file[0]["path"].split("/")[0],
// bytesUploaded: 0,
// bytesTotal: filterFileJson.length,
// percentage: 0,
// startTime: new Date().getTime(),
// endTime: new Date().getTime() + 1000,
// id: timeId,
// type: true,
// statusMsg: "正在上传",
// statusMsgDetail: "已自动过滤掉命名包含特殊符号、空格的文件及文件夹",
// });
// uploadInfoStore?.setUploadInfo({
// open: true,
// list: json1,
// isPermanence: false,
// });
// }
let page = 0;
file = filterFileJson;
uploadFileFunc(
file[page],
url,
filepath === "/"
? filepath + file[page]["path"]
: filepath + "/" + file[page]["path"],
page,
file.length,
file,
filepath,
timeId,
callBack
);
return file;
// Start the upload
};
// let page = 0;
// file = filterFileJson;
// uploadFileFunc(
// file[page],
// url,
// filepath === "/"
// ? filepath + file[page]["path"]
// : filepath + "/" + file[page]["path"],
// page,
// file.length,
// file,
// filepath,
// timeId,
// callBack
// );
// return file;
// // Start the upload
// };
return {
uploadFile,
uploadFileCallBack,
uploadFolder,
uploadFileFunc,
// uploadFileCallBack,
// uploadFolder,
// uploadFileFunc,
};
};
......
src/utils/localStorageKey.ts
View file @ 379cf7b8
const localStorageKey = {
TOKEN: "token",
TOKEN: "token_key",
USER_INFO: "userInfo",
USER_LOGIN: "userlogin",
};
......
src/utils/util.ts
View file @ 379cf7b8
......@@ -2,12 +2,12 @@
* @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
*/
import { v4 as uuidv4 } from 'uuid';
import { v4 as uuidv4 } from "uuid";
export const isProjectOwner = (name: string) => {
let localName = "";
......@@ -23,26 +23,33 @@ export const isProjectOwner = (name: string) => {
* 生成32位的随机id
* @returns 返回32位的uuid
*/
export const uuid = () => {
export const uuid = () => {
const reg = /-/g;
const pwd = uuidv4().replace(reg, '');
const pwd = uuidv4().replace(reg, "");
return pwd;
};
// 获取用户token 信息
// 获取用户信息
export const getUserInfo = () => {
let val: any;
try {
val = JSON.parse(localStorage.getItem("userInfo") || "{}")
}
catch {
console.error("获取用户信息token 出错");
val = JSON.parse(localStorage.getItem("userInfo") || "{}");
} catch {
console.error("获取用户信息 出错");
}
return val
}
return val;
};
// 获取token信息
export const getTokenInfo = () => {
let val: any;
try {
val = JSON.parse(localStorage.getItem("token_key") || "{}");
} catch {
console.error("获取token信息 出错");
}
return val;
};
const IsNumberLetterChineseReg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
......
src/views/ConsoleLayout/components/FileItem/index.tsx
View file @ 379cf7b8
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
View file @ 379cf7b8
......@@ -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
View file @ 379cf7b8
......@@ -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
View file @ 379cf7b8
import React, { useState, useImperativeHandle, useCallback } from "react";
import style from "./index.module.css";
import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog";
import { Button } from "@mui/material";
import { checkIsNumberLetterChinese, uuid } from "@/utils/util";
import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import { useDropzone } from "react-dropzone";
import Table from "@/components/Material.Ui/Table";
......@@ -13,11 +12,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 +59,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/ProjectData/index.tsx
View file @ 379cf7b8
......@@ -66,34 +66,37 @@ const ProjectData = observer(() => {
const projectId = useMemo(() => {
return toJS(currentProjectStore.currentProjectInfo.id);
}, [currentProjectStore]);
// 当前文件路径
const [path, setPath] = useState("/");
const [tableLoadding, setTableLoadding] = useState(false);
// 防止用户连续点击文件夹造成路径显示错误
const [debounce, setDebounce] = useState(false)
const [debounce, setDebounce] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
// 点击操作列中的按钮 会设置当前点击的文件
const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
const [deleteloading, setDeleteloading] = useState(false);
const [path, setPath] = useState("/");
// 1文件 2数据集
const [activeTab, setActiveTab] = useState(1);
// 复选框选中的文件名称数组
const [selectIds, setSelectIds] = useState<Array<string>>([]);
let tableRef: any = React.createRef();
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("");
// 文件列表
// 文件夹、文件列表
const [list, setList] = useState<any>([]);
// 数据集列表 不带文件
const [dataSetList, setDataSetList] = useState<any>([]);
let tableRef: any = React.createRef();
// 切换文件、数据集
const handleChangeListType = (e: number) => {
if (isPass("PROJECT_DATA_TYPECHANAGE")) {
setActiveTab(e);
setSelectIds([]);
tableRef?.current?.initSelectedFunc([]);
}
};
// 列表展示的数据
const showList = useMemo(() => {
if (activeTab === 1) {
return list;
......@@ -105,12 +108,14 @@ const ProjectData = observer(() => {
}
}, [list, dataSetList, activeTab]);
// 获取文件token
const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
onSuccess: (res: any) => {
setFileToken(res.data);
},
});
// 全局搜索数据集
const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
......@@ -121,11 +126,12 @@ const ProjectData = observer(() => {
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false)
setDebounce(false);
tableRef?.current?.initSelectedFunc([]);
},
});
// 获取某路径下的数据集
const { run: getDataFindRun } = useMyRequest(getDataFind, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
......@@ -136,11 +142,12 @@ const ProjectData = observer(() => {
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false)
setDebounce(false);
tableRef?.current?.initSelectedFunc([]);
},
});
// 获取某路径下的数据集
const getDataSetList = useCallback(() => {
if (keyWord) {
return;
......@@ -152,6 +159,7 @@ const ProjectData = observer(() => {
}
}, [keyWord, path, projectId, getDataFindRun]);
// 全局搜索数据集
const getDataSetListSearch = useCallback(() => {
if (keyWord) {
return getDataFileSearchRun({
......@@ -185,7 +193,7 @@ const ProjectData = observer(() => {
setList([]);
}
setSelectIds([]);
setDebounce(false)
setDebounce(false);
});
}
}, [fileToken, path, projectId, keyWord]);
......@@ -216,14 +224,15 @@ const ProjectData = observer(() => {
setList([]);
}
setSelectIds([]);
setDebounce(false)
setDebounce(false);
});
}
}
}, [fileToken, projectId, keyWord, getList]);
// 刷新
const handleRefresh = () => {
if (isPass('PROJECT_DATA_REFRESH', 'USER')) {
if (isPass("PROJECT_DATA_REFRESH", "USER")) {
tableRef?.current?.initSelectedFunc([]);
setSelectIds([]);
if (keyWord) {
......@@ -236,12 +245,14 @@ const ProjectData = observer(() => {
}
};
// 项目切换时重新获取文件token
useEffect(() => {
getDataFileTokenRun({
id: currentProjectStore.currentProjectInfo.id as string,
});
}, [getDataFileTokenRun, currentProjectStore]);
// 搜索值改变
const handleKeyWordChange = (e: any) => {
if (e.target.value.length > 30) {
return;
......@@ -249,6 +260,7 @@ const ProjectData = observer(() => {
setKeyWord(e.target.value);
};
// 按回车搜索
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
searchFileList();
......@@ -257,27 +269,36 @@ const ProjectData = observer(() => {
};
// todo name sort
// table配置
const versionsHeadCells = [
{ id: "checkbox" },
{ id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
{ id: "mtime", 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) => {
const selectarr = e.map((item: any) => {
let andIndex = item.indexOf("&index=")
return item.slice(5, andIndex)
})
let andIndex = item.indexOf("&index=");
return item.slice(5, andIndex);
});
setSelectIds(selectarr);
};
// 文件夹下钻
const handleViewFolders = (item: any) => {
if (debounce) {
return
return;
} else {
setDebounce(true)
setDebounce(true);
if (path === "/") {
setPath(`/${item.name}`);
} else {
......@@ -286,11 +307,13 @@ const ProjectData = observer(() => {
}
};
// 显示删除确认框
const hanleDeleteFile = (item: any) => {
setCurrentOperateFile(item);
setDeleteDialogOpen(true);
};
// table配置
const renderName = (item: any) => {
if (item.type === "directory") {
return (
......@@ -322,23 +345,28 @@ const ProjectData = observer(() => {
}
};
// table配置
const renderSize = (item: any) => {
if (item.type === "dataSet") {
return `${item.size}条`;
}
return `${item.size ? String((Number(item.size)/1048576).toFixed(2)) + 'MB' : '-'}`;
return `${
item.size ? String((Number(item.size) / 1048576).toFixed(2)) + "MB" : "-"
}`;
};
// table配置
const renderMtime = (item: any) => {
return String(moment(item.mtime).format("YYYY-MM-DD hh:mm:ss"))
return String(moment(item.mtime).format("YYYY-MM-DD hh:mm:ss"));
};
// table配置
const renderButtons = (item: any) => {
return (
<span>
{item.type !== 'dataSet' && item.type !== 'directory' && (
{item.type !== "dataSet" && item.type !== "directory" && (
<Button
sx={{ position: "relative", left: "-18px", }}
sx={{ position: "relative", left: "-18px" }}
variant="text"
size="small"
disabled={!isPass("PROJECT_DATA_DOWNLOAD")}
......@@ -351,7 +379,9 @@ const ProjectData = observer(() => {
variant="text"
size="small"
onClick={() => hanleShowMoveFileDialog(item)}
disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", 'USER')}
disabled={
selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", "USER")
}
>
移动至
</Button>
......@@ -361,7 +391,9 @@ const ProjectData = observer(() => {
size="small"
color="error"
onClick={() => hanleDeleteFile(item)}
disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", 'USER')}
disabled={
selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", "USER")
}
>
删除
</Button>
......@@ -369,17 +401,20 @@ const ProjectData = observer(() => {
);
};
// 文件上传
let UpLoaderFileRef: any = React.createRef();
const hanleShowUpLoaderFileDialog = () => {
UpLoaderFileRef.current.showDialog();
};
// 新增文件
let addFolderRef: any = React.createRef();
const hanleShowAddFolderDialog = () => {
addFolderRef.current.showDialog();
};
// 文件移动
let moveFileRef: any = React.createRef();
const hanleShowMoveFileDialog = (item: any) => {
......@@ -387,10 +422,12 @@ const ProjectData = observer(() => {
moveFileRef.current.showDialog();
};
// 删除文件
const handleDeleteDialogClose = () => {
setDeleteDialogOpen(false);
};
// 删除数据集请求
const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
onSuccess: (res: any) => {
Message.success("删除成功");
......@@ -400,6 +437,7 @@ const ProjectData = observer(() => {
},
});
// 删除流程判断待优化
const handleDelete = () => {
let deletePath = "";
if (currentOperateFile) {
......@@ -485,16 +523,19 @@ const ProjectData = observer(() => {
}
};
// 批量移动
const handleBatchMove = () => {
setCurrentOperateFile(null);
moveFileRef.current.showDialog();
};
// 批量删除
const handleBatchDelete = () => {
setCurrentOperateFile(null);
setDeleteDialogOpen(true);
};
// 前端展示的文件路径
const showPath = useMemo(() => {
if (path === "/") {
return <span className={style.showPathSpan}>ProjectData</span>;
......@@ -575,7 +616,8 @@ const ProjectData = observer(() => {
style={{ marginRight: "12px" }}
onClick={hanleShowUpLoaderFileDialog}
disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD", 'USER')
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_UPLOAD", "USER")
}
>
上传文件
......@@ -586,7 +628,8 @@ const ProjectData = observer(() => {
size="small"
onClick={hanleShowAddFolderDialog}
disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", 'USER')
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_ADDDIR", "USER")
}
>
新建文件夹
......@@ -646,7 +689,7 @@ const ProjectData = observer(() => {
aria-label="refreshIcon"
size="small"
onClick={handleRefresh}
disabled={!isPass('PROJECT_DATA_REFRESH', 'USER')}
disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
>
<RefreshIcon />
</IconButton>
......@@ -674,12 +717,12 @@ const ProjectData = observer(() => {
caozuo: renderButtons(item),
}))}
></Table>
{
showList.length === 0 && <div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂未开启模板</span>
</div>
}
{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}>
......@@ -689,7 +732,7 @@ const ProjectData = observer(() => {
size="small"
style={{ marginRight: "12px" }}
onClick={handleBatchDelete}
disabled={!isPass("PROJECT_DATA_DELETE", 'USER')}
disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
>
批量删除（{selectIds.length}）
</Button>
......@@ -699,7 +742,7 @@ const ProjectData = observer(() => {
size="small"
style={{ marginRight: "24px" }}
onClick={handleBatchMove}
disabled={!isPass("PROJECT_DATA_MOVE", 'USER')}
disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
>
批量移动（{selectIds.length}）
</Button>
......
src/views/Project/ProjectSetting/BaseInfo/index.module.css
View file @ 379cf7b8
......@@ -34,7 +34,7 @@
outline: none;
}
.projectInfoListLiValue:focus {
border: 1px solid #136efa;
border: 2px solid #136efa;
}
.projectInfoTextarea {
line-height: 22px;
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 379cf7b8
......@@ -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
*/
......@@ -21,7 +21,7 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import InformationDisplay from "@/components/InformationDisplay";
import classnames from "classnames";
import { Button } from "@mui/material";
import { Button, TextField } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import { useMessage } from "@/components/MySnackbar";
import Loading from "@/views/Loading";
......@@ -40,6 +40,10 @@ const BaseInfo = observer(() => {
const { currentProjectStore } = useStores();
const [projectInfo, setProjectInfo] = useState<any>({});
const [deleteProjectName, setDeleteProjectName] = useState("");
const [nameCheck, setNameCheck] = useState({
error: false,
help: "",
});
const currentUserName = JSON.parse(
localStorage.getItem("userInfo") || "{}"
).name;
......@@ -98,11 +102,50 @@ const BaseInfo = observer(() => {
];
}, [projectInfo, zoneIdMap]);
const checkName = (name: string, showMessage = false) => {
let help = "";
if (name) {
if (name.length > 30) {
help = "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文";
setNameCheck({
error: true,
help,
});
showMessage && message.error(help);
return false;
} else if (checkIsNumberLetterChinese(name)) {
setNameCheck({
error: false,
help: "",
});
return true;
} else {
help = "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文";
setNameCheck({
error: true,
help,
});
showMessage && message.error(help);
return false;
}
} else {
help = "项目名称不能为空";
setNameCheck({
error: true,
help,
});
showMessage && message.error(help);
return false;
}
};
const nameChange = (e: any) => {
setProjectInfo({
...projectInfo,
name: e.target.value,
});
checkName(e.target.value);
// setNameCheck
};
const descChange = (e: any) => {
......@@ -126,16 +169,10 @@ const BaseInfo = observer(() => {
// 修改项目
const handleClickUpdate = () => {
if (projectInfo.name) {
if (checkIsNumberLetterChinese(projectInfo.name)) {
updateProjectRun({ ...projectInfo, product: "CADD" });
} else {
message.info(
"格式不正确，必须在30字符以内，仅限大小写字母、数字、中文"
);
}
if (checkName(projectInfo.name, true)) {
updateProjectRun({ ...projectInfo, product: "CADD" });
} else {
message.info("项目名称不能为空");
return;
}
};
......@@ -195,13 +232,26 @@ const BaseInfo = observer(() => {
>
项目名称
</div>
<input
<TextField
required
error={nameCheck.error}
id="name"
variant="outlined"
value={projectInfo.name}
onChange={nameChange}
helperText={nameCheck.help}
size="small"
sx={{
width: "560px",
}}
/>
{/* <input
value={projectInfo.name}
className={style.projectInfoListLiValue}
onChange={nameChange}
maxLength={30}
placeholder="请输入项目名称"
></input>
></input> */}
</div>
<div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>项目描述</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment