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 @@ ...@@ -2,29 +2,6 @@
// const APIOPTION = "https://fileserver.cloudam.cn" // const APIOPTION = "https://fileserver.cloudam.cn"
// const APIPORT = "39.105.230.38" // const APIPORT = "39.105.230.38"
import { getLoaclStorageOfKey } from "./utils"; 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 API = function () {
const raysyncAddr = getLoaclStorageOfKey("raysyncAddr"); const raysyncAddr = getLoaclStorageOfKey("raysyncAddr");
...@@ -50,38 +27,6 @@ const APIPORT = function () { ...@@ -50,38 +27,6 @@ const APIPORT = function () {
return raysyncAddr.srcIp || ""; 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 currentRegion = localStorage.getItem("current-region");
let currentRegionJson = currentRegion && JSON.parse(currentRegion); let currentRegionJson = currentRegion && JSON.parse(currentRegion);
...@@ -114,31 +59,6 @@ const urlToken = (filetoken: string, projectId: string) => { ...@@ -114,31 +59,6 @@ const urlToken = (filetoken: string, projectId: string) => {
return `?username=${projectId}&token=${token}&filetoken=${encodeURIComponent( return `?username=${projectId}&token=${token}&filetoken=${encodeURIComponent(
filetoken filetoken
)}&share=false&project=true`; )}&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 = () => { const getUuid = () => {
...@@ -195,3 +115,59 @@ export { ...@@ -195,3 +115,59 @@ export {
encryptTransfer, encryptTransfer,
getType, 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) => { ...@@ -19,7 +19,7 @@ const InformationDisplay = (props: InformationDisplayProps) => {
return ( return (
<div className={style.infoListLi} key={item.label}> <div className={style.infoListLi} key={item.label}>
<div className={style.infoListLiLabel}>{item.label}</div> <div className={style.infoListLiLabel}>{item.label}</div>
<div className={style.infoListLiValue}>{item.value}</div> <div className={style.infoListLiValue}>{item.value || "-"}</div>
</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 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-09 20:41:05 * @Date: 2022-06-09 20:41:05
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/store/index.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -11,11 +11,11 @@ import { configure } from "mobx"; ...@@ -11,11 +11,11 @@ import { configure } from "mobx";
import permissionStore from "./modules/permission"; import permissionStore from "./modules/permission";
import menuStore from "./modules/menu"; import menuStore from "./modules/menu";
import currentProjectStore from "./modules/currentProject"; import currentProjectStore from "./modules/currentProject";
import fileList from "./modules/fileList"; import fileListStore from "./modules/fileList";
configure({ enforceActions: "always" }); configure({ enforceActions: "always" });
export const stores = { permissionStore, menuStore, currentProjectStore, fileList }; export const stores = { permissionStore, menuStore, currentProjectStore, fileListStore };
/** Store类型 */ /** Store类型 */
export type Stores = typeof stores; export type Stores = typeof stores;
......
src/store/modules/fileList.ts
View file @ 379cf7b8
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 17:00:19 * @Date: 2022-06-13 17:00:19
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/store/modules/upload.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 { interface IUploadInfo {
id: string, id: string,
...@@ -25,14 +25,29 @@ class FileList { ...@@ -25,14 +25,29 @@ class FileList {
/** 文件上传列表 */ /** 文件上传列表 */
fileList: IUploadInfo[] = []; 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) { setUploadInfo(id: string, val: IUploadInfo) {
console.log(val,id,'22222')
const newFileList = this.fileList?.map((item)=>{ const newFileList = this.fileList?.map((item)=>{
if(item.id === id){ if(item.id === id){
console.log('3333',item)
return val return val
} return item } return item
}) })
...@@ -65,8 +80,9 @@ class FileList { ...@@ -65,8 +80,9 @@ class FileList {
} return item } return item
}) })
this.fileList = newFileList 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 * as tus from "tus-js-client";
import { import {
verifyLettersNumbersCertainChars4, verifyLettersNumbersCertainChars4,
verifyLettersNumbersCertainChars5, verifyLettersNumbersCertainChars5,
} from "../helper"; } 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 UseTusUpload = (props) => {
const { fileList: uploadInfoStore } = props; const { fileListStore: uploadInfoStore, currentProjectStore } = props;
console.log(uploadInfoStore, 222);
const uploadInfoList = uploadInfoStore?.uploadInfo?.list || [];
const uploadInfoIsPermanence =
uploadInfoStore?.uploadInfo?.isPermanence || [];
const uploadInfoOpen = uploadInfoStore?.uploadInfo?.open || [];
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) { for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) { if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i); localStorage.removeItem(i);
} }
} }
uploadInfoStore?.setUploadInfoIsPermanence(id, false); uploadInfoStore?.setUploadInfoIsPermanence(item.id, false);
if (!verifyLettersNumbersCertainChars4(file.name)) { if (!verifyLettersNumbersCertainChars4(file.name)) {
let json1 = uploadInfoStore?.uploadInfo?.list.concat({ let json1 = uploadInfoStore?.uploadInfo?.list.concat({
...@@ -38,7 +55,7 @@ const UseTusUpload = (props) => { ...@@ -38,7 +55,7 @@ const UseTusUpload = (props) => {
statusMsgDetail: statusMsgDetail:
"上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。", "上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
}); });
uploadInfoStore?.setUploadInfo(id, { uploadInfoStore?.setUploadInfo(item.id, {
open: true, open: true,
list: json1, list: json1,
isPermanence: false, isPermanence: false,
...@@ -48,9 +65,9 @@ const UseTusUpload = (props) => { ...@@ -48,9 +65,9 @@ const UseTusUpload = (props) => {
// Create a new tus upload // Create a new tus upload
let timeId = new Date().getTime(); let timeId = new Date().getTime();
let headers = { let headers = {
username: "", username: currentProjectStore?.currentProjectInfo.id,
token: "", token: tokenInfo?.access_token || "",
filetoken: "", filetoken: fileToken,
share: false, share: false,
}; };
let upload = new tus.Upload(file, { let upload = new tus.Upload(file, {
...@@ -67,10 +84,10 @@ const UseTusUpload = (props) => { ...@@ -67,10 +84,10 @@ const UseTusUpload = (props) => {
}, },
onProgress: function (bytesUploaded, bytesTotal, a) { onProgress: function (bytesUploaded, bytesTotal, a) {
var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2); 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 = []; let json = [];
if (fliterJson.length === 0) { if (fliterJson.length === 0) {
json = uploadInfoList.concat({ json = item.list.concat({
name: upload.file.name, name: upload.file.name,
bytesUploaded: bytesUploaded, bytesUploaded: bytesUploaded,
bytesTotal: bytesTotal, bytesTotal: bytesTotal,
...@@ -83,13 +100,13 @@ const UseTusUpload = (props) => { ...@@ -83,13 +100,13 @@ const UseTusUpload = (props) => {
upload, upload,
dir: "/home/cloudam/", dir: "/home/cloudam/",
}); });
uploadInfoStore?.setUploadInfo(id, { uploadInfoStore?.setUploadInfo(item.id, {
open: true, open: true,
list: json, list: json,
isPermanence: uploadInfoStore?.uploadInfo?.isPermanence, isPermanence: uploadInfoStore?.uploadInfo?.isPermanence,
}); });
} else { } else {
let a = uploadInfoList; let a = item.list;
let time = new Date().getTime(); let time = new Date().getTime();
a.map((element) => { a.map((element) => {
if (element.id === timeId) { if (element.id === timeId) {
...@@ -108,18 +125,20 @@ const UseTusUpload = (props) => { ...@@ -108,18 +125,20 @@ const UseTusUpload = (props) => {
: element["endTime"]; : element["endTime"];
} }
}); });
uploadInfoStore?.setUploadInfo(id, { uploadInfoStore?.setUploadInfo(item.id, {
open: true, open: true,
list: a.concat([]), list: a.concat([]),
isPermanence: uploadInfoIsPermanence, isPermanence: item.isPermanence,
}); });
} }
}, },
onSuccess: function () { 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) { if (fliterJson.length === 0 && upload.file["size"] === 0) {
console.log("000011111");
let json = []; let json = [];
json = uploadInfoList.concat({ json = item.list.concat({
name: upload.file.name, name: upload.file.name,
bytesUploaded: 0, bytesUploaded: 0,
bytesTotal: 0, bytesTotal: 0,
...@@ -131,21 +150,22 @@ const UseTusUpload = (props) => { ...@@ -131,21 +150,22 @@ const UseTusUpload = (props) => {
statusMsg: "上传成功", statusMsg: "上传成功",
upload, upload,
}); });
uploadInfoStore?.setUploadInfo(id, { uploadInfoStore?.setUploadInfo(item.id, {
open: true, open: true,
list: json, list: json,
isPermanence: uploadInfoIsPermanence, isPermanence: item.isPermanence,
}); });
} else { } else {
uploadInfoList.map((item) => { console.log(item.list, "000022222");
item.list.map((item) => {
if (item.id === timeId) { if (item.id === timeId) {
item["statusMsg"] = "上传成功"; item["statusMsg"] = "上传成功";
} }
}); });
uploadInfoStore?.setUploadInfo(id, { uploadInfoStore?.setUploadInfo(item.id, {
open: true, open: true,
list: uploadInfoList, list: item.list,
isPermanence: uploadInfoIsPermanence, isPermanence: item.isPermanence,
}); });
} }
callBack && callBack(upload, filepath); callBack && callBack(upload, filepath);
...@@ -155,391 +175,391 @@ const UseTusUpload = (props) => { ...@@ -155,391 +175,391 @@ const UseTusUpload = (props) => {
upload.start(); upload.start();
}; };
const uploadFileCallBack = (file, url, filepath, callBack) => { // const uploadFileCallBack = (file, url, filepath, callBack) => {
if (!verifyLettersNumbersCertainChars4(file.name)) { // if (!verifyLettersNumbersCertainChars4(file.name)) {
let json1 = uploadInfoList.concat({ // let json1 = uploadInfoList.concat({
name: file.name, // name: file.name,
bytesUploaded: 0, // bytesUploaded: 0,
bytesTotal: 0, // bytesTotal: 0,
percentage: 0, // percentage: 0,
startTime: new Date().getTime(), // startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000, // endTime: new Date().getTime() + 1000,
bytesUploaded2: 0, // bytesUploaded2: 0,
fileIsCn: true, // fileIsCn: true,
id: new Date().getTime, // id: new Date().getTime,
statusMsg: "上传失败", // statusMsg: "上传失败",
upload: null, // upload: null,
statusMsgDetail: // statusMsgDetail:
"上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。", // "上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: json1, // list: json1,
isPermanence: false, // isPermanence: false,
}); // });
return; // return;
} // }
for (let i in localStorage) { // for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) { // if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i); // localStorage.removeItem(i);
} // }
} // }
uploadInfoStore?.setUploadInfoIsPermanence(false); // uploadInfoStore?.setUploadInfoIsPermanence(false);
// Create a new tus upload // // Create a new tus upload
let timeId = new Date().getTime(); // let timeId = new Date().getTime();
let headers = { // let headers = {
username: "", // username: "",
token: "", // token: "",
filetoken: "", // filetoken: "",
share: false, // share: false,
}; // };
let upload = new tus.Upload(file, { // let upload = new tus.Upload(file, {
endpoint: url, // endpoint: url,
parallelUploads: 1, // parallelUploads: 1,
chunkSize: 5242880, // chunkSize: 5242880,
metadata: { // metadata: {
filepath: filepath, // filepath: filepath,
}, // },
retryDelays: [0, 3000, 5000, 10000, 20000], // retryDelays: [0, 3000, 5000, 10000, 20000],
headers: headers, // headers: headers,
onError: function (error) { // onError: function (error) {
console.log("Failed because: " + error); // console.log("Failed because: " + error);
}, // },
onProgress: function (bytesUploaded, bytesTotal, a) { // onProgress: function (bytesUploaded, bytesTotal, a) {
var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2); // var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
let fliterJson = uploadInfoList.filter((item) => item.id === timeId); // let fliterJson = uploadInfoList.filter((item) => item.id === timeId);
let json = []; // let json = [];
if (fliterJson.length === 0) { // if (fliterJson.length === 0) {
json = uploadInfoList.concat({ // json = uploadInfoList.concat({
name: upload.file.name, // name: upload.file.name,
bytesUploaded: bytesUploaded, // bytesUploaded: bytesUploaded,
bytesTotal: bytesTotal, // bytesTotal: bytesTotal,
percentage: percentage, // percentage: percentage,
startTime: new Date().getTime(), // startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000, // endTime: new Date().getTime() + 1000,
bytesUploaded2: bytesUploaded, // bytesUploaded2: bytesUploaded,
id: timeId, // id: timeId,
statusMsg: "正在上传", // statusMsg: "正在上传",
upload, // upload,
dir: "/home/cloudam/", // dir: "/home/cloudam/",
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: json, // list: json,
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
} else { // } else {
let a = uploadInfoList; // let a = uploadInfoList;
let time = new Date().getTime(); // let time = new Date().getTime();
a.map((element) => { // a.map((element) => {
if (element.id === timeId) { // if (element.id === timeId) {
element["bytesUploaded"] = bytesUploaded; // element["bytesUploaded"] = bytesUploaded;
element["bytesTotal"] = bytesTotal; // element["bytesTotal"] = bytesTotal;
element["percentage"] = percentage; // element["percentage"] = percentage;
element["bytesUploaded2"] = // element["bytesUploaded2"] =
parseInt((parseInt(time) - parseInt(element.endTime)) / 1000) >= // parseInt((parseInt(time) - parseInt(element.endTime)) / 1000) >=
2 // 2
? bytesUploaded // ? bytesUploaded
: element["bytesUploaded2"]; // : element["bytesUploaded2"];
element["endTime"] = // element["endTime"] =
parseInt((parseInt(time) - parseInt(element.endTime)) / 1000) >= // parseInt((parseInt(time) - parseInt(element.endTime)) / 1000) >=
2 // 2
? time // ? time
: element["endTime"]; // : element["endTime"];
} // }
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: a.concat([]), // list: a.concat([]),
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
} // }
}, // },
onSuccess: function () { // onSuccess: function () {
let fliterJson = uploadInfoList.filter((item) => item.id === timeId); // let fliterJson = uploadInfoList.filter((item) => item.id === timeId);
if (fliterJson.length === 0 && upload.file["size"] === 0) { // if (fliterJson.length === 0 && upload.file["size"] === 0) {
let json = []; // let json = [];
json = uploadInfoList.concat({ // json = uploadInfoList.concat({
name: upload.file.name, // name: upload.file.name,
bytesUploaded: 0, // bytesUploaded: 0,
bytesTotal: 0, // bytesTotal: 0,
id: timeId, // id: timeId,
percentage: 100, // percentage: 100,
startTime: new Date().getTime(), // startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000, // endTime: new Date().getTime() + 1000,
bytesUploaded2: 0, // bytesUploaded2: 0,
statusMsg: "上传成功", // statusMsg: "上传成功",
upload, // upload,
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: json, // list: json,
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
} else { // } else {
uploadInfoList.map((item) => { // uploadInfoList.map((item) => {
if (item.id === timeId) { // if (item.id === timeId) {
item["statusMsg"] = "上传成功"; // item["statusMsg"] = "上传成功";
} // }
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: uploadInfoList, // list: uploadInfoList,
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
} // }
callBack && callBack(upload); // callBack && callBack(upload);
}, // },
}); // });
// Start the upload // // Start the upload
upload.start(); // upload.start();
}; // };
const uploadFileFunc = ( // const uploadFileFunc = (
file, // file,
url, // url,
filepath, // filepath,
page, // page,
length, // length,
allFile, // allFile,
path, // path,
timeId, // timeId,
callBack // callBack
) => { // ) => {
// Create a new tus upload // // Create a new tus upload
for (let i in localStorage) { // for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) { // if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i); // localStorage.removeItem(i);
} // }
} // }
let timeIdFile = new Date().getTime(); // let timeIdFile = new Date().getTime();
let headers = { // let headers = {
username: "", // username: "",
token: "", // token: "",
filetoken: "", // filetoken: "",
share: false, // share: false,
}; // };
let uploads = new tus.Upload(file, { // let uploads = new tus.Upload(file, {
endpoint: url, // endpoint: url,
parallelUploads: 1, // parallelUploads: 1,
chunkSize: 5242880, // chunkSize: 5242880,
metadata: { // metadata: {
filepath: filepath, // filepath: filepath,
}, // },
retryDelays: [0, 3000, 5000, 10000, 20000], // retryDelays: [0, 3000, 5000, 10000, 20000],
headers: headers, // headers: headers,
onError: function (error) { // onError: function (error) {
console.log("Failed because: " + error); // console.log("Failed because: " + error);
}, // },
onProgress: function (bytesUploaded, bytesTotal, percentage) { // onProgress: function (bytesUploaded, bytesTotal, percentage) {
// console.log("正在上传的文件名:" + uploads['file']['name'], 'onProgress') // // console.log("正在上传的文件名:" + uploads['file']['name'], 'onProgress')
if ( // if (
uploadInfoList.filter((item) => item.id === timeId) && // uploadInfoList.filter((item) => item.id === timeId) &&
uploadInfoList.filter((item) => item.id === timeId).length > 0 // uploadInfoList.filter((item) => item.id === timeId).length > 0
) { // ) {
let k = uploadInfoList; // let k = uploadInfoList;
k.map((item) => { // k.map((item) => {
if (item.id === timeId) { // if (item.id === timeId) {
item["upload"] = uploads; // item["upload"] = uploads;
} // }
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: k, // list: k,
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
return; // return;
} // }
let json = uploadInfoList.concat({ // let json = uploadInfoList.concat({
name: allFile[page]["path"].split("/")[0], // name: allFile[page]["path"].split("/")[0],
bytesUploaded: page + 1, // bytesUploaded: page + 1,
statusMsg: "正在上传", // statusMsg: "正在上传",
bytesTotal: length, // bytesTotal: length,
upload: uploads, // upload: uploads,
ids: timeIdFile, // ids: timeIdFile,
percentage: ((page + 1) / length) * 100, // percentage: ((page + 1) / length) * 100,
type: "folder", // type: "folder",
id: timeId, // id: timeId,
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: json, // list: json,
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
}, // },
onSuccess: function (bytesUploaded, bytesTotal, percentage) { // onSuccess: function (bytesUploaded, bytesTotal, percentage) {
++page; // ++page;
// 每次成功 page累加 当page 与 总上传文件长度 进行比较 判断是否上传文件夹是否成功。 // // 每次成功 page累加 当page 与 总上传文件长度 进行比较 判断是否上传文件夹是否成功。
if (page >= length) { // if (page >= length) {
uploadInfoList.map((item) => { // uploadInfoList.map((item) => {
if (item.id === timeId) { // if (item.id === timeId) {
item["statusMsg"] = "上传成功"; // item["statusMsg"] = "上传成功";
item["bytesUploaded"] = length; // item["bytesUploaded"] = length;
item["bytesTotal"] = length; // item["bytesTotal"] = length;
item["percentage"] = 100; // item["percentage"] = 100;
} // }
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: uploadInfoOpen, // open: uploadInfoOpen,
list: uploadInfoList, // list: uploadInfoList,
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
// 上传文件夹成功 回调 页面 刷新 列表 重新请求数据 // // 上传文件夹成功 回调 页面 刷新 列表 重新请求数据
callBack && callBack(true); // callBack && callBack(true);
return; // return;
} else { // } else {
// 判断 传输列表中是否有 有该 id 的任务 // // 判断 传输列表中是否有 有该 id 的任务
// 进度 判断: 成功一个文件 page 累加 redux // // 进度 判断: 成功一个文件 page 累加 redux
if ( // if (
uploadInfoList((item) => item.id === timeId) && // uploadInfoList((item) => item.id === timeId) &&
uploadInfoList((item) => item.id === timeId).length > 0 // uploadInfoList((item) => item.id === timeId).length > 0
) { // ) {
let newList = uploadInfoList; // let newList = uploadInfoList;
newList.forEach((items) => { // newList.forEach((items) => {
if (items.id === timeId) { // if (items.id === timeId) {
items["name"] = allFile[page]["path"].split("/")[0]; // items["name"] = allFile[page]["path"].split("/")[0];
items["bytesUploaded"] = page + 1; // items["bytesUploaded"] = page + 1;
items["bytesTotal"] = length; // items["bytesTotal"] = length;
items["statusMsg"] = "正在上传"; // items["statusMsg"] = "正在上传";
items["percentage"] = ((page + 1) / length) * 100; // items["percentage"] = ((page + 1) / length) * 100;
} // }
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: newList.concat([]), // list: newList.concat([]),
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
} // }
uploadFileFunc( // uploadFileFunc(
allFile[page], // allFile[page],
url, // url,
path === "/" // path === "/"
? path + allFile[page]["path"] // ? path + allFile[page]["path"]
: path + "/" + allFile[page]["path"], // : path + "/" + allFile[page]["path"],
page, // page,
allFile.length, // allFile.length,
allFile, // allFile,
path, // path,
timeId, // timeId,
callBack // callBack
); // );
} // }
}, // },
}); // });
// 每次调用 把 任务 重新赋值给 该上传任务 以便于 文件夹暂停下载功能实现 // // 每次调用 把 任务 重新赋值给 该上传任务 以便于 文件夹暂停下载功能实现
if ( // if (
uploadInfoList.filter((item) => item.id === timeId) && // uploadInfoList.filter((item) => item.id === timeId) &&
uploadInfoList.filter((item) => item.id === timeId).length > 0 // uploadInfoList.filter((item) => item.id === timeId).length > 0
) { // ) {
let k = uploadInfoList; // let k = uploadInfoList;
k.map((item) => { // k.map((item) => {
if (item.id === timeId) { // if (item.id === timeId) {
item["upload"] = uploads; // item["upload"] = uploads;
} // }
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: k, // list: k,
isPermanence: uploadInfoIsPermanence, // isPermanence: uploadInfoIsPermanence,
}); // });
} // }
uploads.start(); // uploads.start();
}; // };
const uploadFolder = (file, url, filepath, callBack) => { // const uploadFolder = (file, url, filepath, callBack) => {
// tus 上传会设置 缓存 清除缓存设置 // // tus 上传会设置 缓存 清除缓存设置
for (let i in localStorage) { // for (let i in localStorage) {
if (i.indexOf("tus::tus-br") > -1) { // if (i.indexOf("tus::tus-br") > -1) {
localStorage.removeItem(i); // localStorage.removeItem(i);
} // }
} // }
// 打开传输列表 // // 打开传输列表
uploadInfoStore?.setUploadInfoIsPermanence(false); // uploadInfoStore?.setUploadInfoIsPermanence(false);
// 判断 文件夹中 是否中 是否 全部是中文 不是 过滤 文件路径中文或者特殊符号 含有任务的 // // 判断 文件夹中 是否中 是否 全部是中文 不是 过滤 文件路径中文或者特殊符号 含有任务的
let filterFileJson = []; // let filterFileJson = [];
if (file && file.length > 0) { // if (file && file.length > 0) {
filterFileJson = file.filter((item) => // filterFileJson = file.filter((item) =>
verifyLettersNumbersCertainChars5(item.path) // verifyLettersNumbersCertainChars5(item.path)
); // );
} // }
if (filterFileJson && filterFileJson.length === 0) { // if (filterFileJson && filterFileJson.length === 0) {
let json1 = uploadInfoList.concat({ // let json1 = uploadInfoList.concat({
name: file[0]["path"].split("/")[0], // name: file[0]["path"].split("/")[0],
bytesUploaded: 0, // bytesUploaded: 0,
bytesTotal: 0, // bytesTotal: 0,
percentage: 0, // percentage: 0,
startTime: new Date().getTime(), // startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000, // endTime: new Date().getTime() + 1000,
bytesUploaded2: 0, // bytesUploaded2: 0,
fileIsCn: true, // fileIsCn: true,
statusMsg: "上传失败", // statusMsg: "上传失败",
type: true, // type: true,
statusMsgDetail: // statusMsgDetail:
"上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。", // "上传失败，文件或文件夹的命名长度不超过127字节，不支持特殊符号、空格。",
// 已自动过滤掉命名包含中文、特殊符号、空格的文件及文件夹 // // 已自动过滤掉命名包含中文、特殊符号、空格的文件及文件夹
upload: null, // upload: null,
id: new Date().getTime(), // id: new Date().getTime(),
dir: "/home/cloudam/", // dir: "/home/cloudam/",
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: json1, // list: json1,
isPermanence: false, // isPermanence: false,
}); // });
return; // return;
} // }
let timeId = new Date().getTime(); // let timeId = new Date().getTime();
if (filterFileJson && filterFileJson.length < file.length) { // if (filterFileJson && filterFileJson.length < file.length) {
let json1 = uploadInfoList.concat({ // let json1 = uploadInfoList.concat({
name: file[0]["path"].split("/")[0], // name: file[0]["path"].split("/")[0],
bytesUploaded: 0, // bytesUploaded: 0,
bytesTotal: filterFileJson.length, // bytesTotal: filterFileJson.length,
percentage: 0, // percentage: 0,
startTime: new Date().getTime(), // startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000, // endTime: new Date().getTime() + 1000,
id: timeId, // id: timeId,
type: true, // type: true,
statusMsg: "正在上传", // statusMsg: "正在上传",
statusMsgDetail: "已自动过滤掉命名包含特殊符号、空格的文件及文件夹", // statusMsgDetail: "已自动过滤掉命名包含特殊符号、空格的文件及文件夹",
}); // });
uploadInfoStore?.setUploadInfo({ // uploadInfoStore?.setUploadInfo({
open: true, // open: true,
list: json1, // list: json1,
isPermanence: false, // isPermanence: false,
}); // });
} // }
let page = 0; // let page = 0;
file = filterFileJson; // file = filterFileJson;
uploadFileFunc( // uploadFileFunc(
file[page], // file[page],
url, // url,
filepath === "/" // filepath === "/"
? filepath + file[page]["path"] // ? filepath + file[page]["path"]
: filepath + "/" + file[page]["path"], // : filepath + "/" + file[page]["path"],
page, // page,
file.length, // file.length,
file, // file,
filepath, // filepath,
timeId, // timeId,
callBack // callBack
); // );
return file; // return file;
// Start the upload // // Start the upload
}; // };
return { return {
uploadFile, uploadFile,
uploadFileCallBack, // uploadFileCallBack,
uploadFolder, // uploadFolder,
uploadFileFunc, // uploadFileFunc,
}; };
}; };
......
src/utils/localStorageKey.ts
View file @ 379cf7b8
const localStorageKey = { const localStorageKey = {
TOKEN: "token", TOKEN: "token_key",
USER_INFO: "userInfo", USER_INFO: "userInfo",
USER_LOGIN: "userlogin", USER_LOGIN: "userlogin",
}; };
......
src/utils/util.ts
View file @ 379cf7b8
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-07 18:37:53 * @Date: 2022-06-07 18:37:53
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/utils/util.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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) => { export const isProjectOwner = (name: string) => {
let localName = ""; let localName = "";
...@@ -23,26 +23,33 @@ export const isProjectOwner = (name: string) => { ...@@ -23,26 +23,33 @@ export const isProjectOwner = (name: string) => {
* 生成32位的随机id * 生成32位的随机id
* @returns 返回32位的uuid * @returns 返回32位的uuid
*/ */
export const uuid = () => { export const uuid = () => {
const reg = /-/g; const reg = /-/g;
const pwd = uuidv4().replace(reg, ''); const pwd = uuidv4().replace(reg, "");
return pwd; return pwd;
}; };
// 获取用户token 信息 // 获取用户信息
export const getUserInfo = () => { export const getUserInfo = () => {
let val: any; let val: any;
try { try {
val = JSON.parse(localStorage.getItem("userInfo") || "{}") val = JSON.parse(localStorage.getItem("userInfo") || "{}");
} } catch {
catch { console.error("获取用户信息 出错");
console.error("获取用户信息token 出错");
} }
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]+$"); 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 { observer } from "mobx-react-lite";
import { toJS } from "mobx"; // import { any } from "@/store/modules/fileList";
import UseTusUpload from "@/utils/Upload/tusUpload";
// toJS(currentProjectStore.currentProjectInfo.id); // toJS(currentProjectStore.currentProjectInfo.id);
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-11 15:46:42 * @Date: 2022-06-11 15:46:42
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/ConsoleLayout/components/FileItem/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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); interface IProps {
useEffect(() => { fileItemInfo: any;
fileList?.fileList?.forEach((item) => { }
uploadFile( const FileItem = (props: IProps) => {
item.id, const { fileItemInfo } = props;
item.list, console.log(fileItemInfo, 2222);
"/",
"/",
(upload: any, filepath: string) => console.log(upload, filepath, 1111)
);
});
console.log(fileList?.fileList, 1111);
}, [fileList.fileList, uploadFile]);
return <div>dd</div>; return <div>dd</div>;
}); };
export default FileItem; export default FileItem;
src/views/ConsoleLayout/components/TransferList/index.tsx
View file @ 379cf7b8
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-10 18:05:21 * @Date: 2022-06-10 18:05:21
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -12,8 +12,11 @@ import { memo } from "react"; ...@@ -12,8 +12,11 @@ import { memo } from "react";
import MySelect from "@/components/mui/MySelect"; import MySelect from "@/components/mui/MySelect";
import MyTitle from "@/components/mui/MyTitle"; import MyTitle from "@/components/mui/MyTitle";
import FileItem from "../FileItem"; 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 ( return (
<Box style={{ width: 520, padding: 20 }}> <Box style={{ width: 520, padding: 20 }}>
<MyTitle title="传输列表" /> <MyTitle title="传输列表" />
...@@ -42,10 +45,12 @@ const TranSferList = () => { ...@@ -42,10 +45,12 @@ const TranSferList = () => {
/> />
</Box> </Box>
<Box> <Box>
<FileItem /> {fileList?.fileList.map((item) => {
return <FileItem fileItemInfo={item} />;
})}
</Box> </Box>
</Box> </Box>
); );
}; });
export default memo(TranSferList); export default memo(TranSferList);
src/views/ConsoleLayout/index.tsx
View file @ 379cf7b8
...@@ -16,6 +16,13 @@ import MyPopover from "@/components/mui/MyPopover"; ...@@ -16,6 +16,13 @@ import MyPopover from "@/components/mui/MyPopover";
import TranSferList from "./components/TransferList"; import TranSferList from "./components/TransferList";
import style from "./index.module.css"; 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 ConsoleLayout = observer(() => {
const { const {
...@@ -36,6 +43,42 @@ const ConsoleLayout = observer(() => { ...@@ -36,6 +43,42 @@ const ConsoleLayout = observer(() => {
permissionStore.setSidebarRouters(location.pathname); permissionStore.setSidebarRouters(location.pathname);
}, [location, permissionStore]); }, [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 ( return (
<Box> <Box>
<Box className={style.topApp}> <Box className={style.topApp}>
......
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ 379cf7b8
import React, { useState, useImperativeHandle, useCallback } from "react"; import React, { useState, useImperativeHandle, useCallback } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { checkIsNumberLetterChinese, uuid } from "@/utils/util"; import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
import Table from "@/components/Material.Ui/Table"; import Table from "@/components/Material.Ui/Table";
...@@ -13,11 +12,12 @@ import noFile from "@/assets/project/noFile.svg"; ...@@ -13,11 +12,12 @@ import noFile from "@/assets/project/noFile.svg";
import uploaderIcon from "@/assets/project/uploaderIcon.svg"; import uploaderIcon from "@/assets/project/uploaderIcon.svg";
import classnames from "classnames"; import classnames from "classnames";
import { getMbfromB } from "@/utils/util"; import { getMbfromB } from "@/utils/util";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react";
import useGlobalStore from "@/hooks/useGlobalStore"; import { useStores } from "@/store";
import { toJS } from "mobx";
const UpLoaderFile = observer((props: any) => { const UpLoaderFile = observer((props: any) => {
const uploadInfoStore = useGlobalStore("fileList"); const { fileListStore } = useStores();
const message = useMessage(); const message = useMessage();
const [fileList, setFileList] = useState<any>([]); const [fileList, setFileList] = useState<any>([]);
// list 是项目数据table的数据 // list 是项目数据table的数据
...@@ -59,17 +59,17 @@ const UpLoaderFile = observer((props: any) => { ...@@ -59,17 +59,17 @@ const UpLoaderFile = observer((props: any) => {
let dialogRef: any = React.createRef(); let dialogRef: any = React.createRef();
const handleSubmit = () => { const handleSubmit = () => {
const newFileList = fileList?.map((item: any) => { const newFileList =
return { fileList?.map((item: any) => {
id: uuid(), return {
open: false, id: uuid(),
list: item, open: false,
isPermanence: true, list: item,
}; isPermanence: true,
}); };
uploadInfoStore.setFileList(newFileList); }) || [];
console.log(newFileList);
console.log("handleSubmit"); toJS(fileListStore?.setNewFileList)(newFileList);
}; };
const showDialog = () => { const showDialog = () => {
......
src/views/Project/ProjectData/index.tsx
View file @ 379cf7b8
...@@ -66,34 +66,37 @@ const ProjectData = observer(() => { ...@@ -66,34 +66,37 @@ const ProjectData = observer(() => {
const projectId = useMemo(() => { const projectId = useMemo(() => {
return toJS(currentProjectStore.currentProjectInfo.id); return toJS(currentProjectStore.currentProjectInfo.id);
}, [currentProjectStore]); }, [currentProjectStore]);
// 当前文件路径
const [path, setPath] = useState("/");
const [tableLoadding, setTableLoadding] = useState(false); const [tableLoadding, setTableLoadding] = useState(false);
// 防止用户连续点击文件夹造成路径显示错误 // 防止用户连续点击文件夹造成路径显示错误
const [debounce, setDebounce] = useState(false) const [debounce, setDebounce] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
// 点击操作列中的按钮 会设置当前点击的文件
const [currentOperateFile, setCurrentOperateFile] = useState<any>(null); const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
const [deleteloading, setDeleteloading] = useState(false); const [deleteloading, setDeleteloading] = useState(false);
const [path, setPath] = useState("/"); // 1文件 2数据集
const [activeTab, setActiveTab] = useState(1); const [activeTab, setActiveTab] = useState(1);
// 复选框选中的文件名称数组
const [selectIds, setSelectIds] = useState<Array<string>>([]); 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 [keyWord, setKeyWord] = useState("");
const [fileToken, setFileToken] = useState(""); const [fileToken, setFileToken] = useState("");
// 文件夹、文件列表
// 文件列表
const [list, setList] = useState<any>([]); const [list, setList] = useState<any>([]);
// 数据集列表 不带文件 // 数据集列表 不带文件
const [dataSetList, setDataSetList] = 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(() => { const showList = useMemo(() => {
if (activeTab === 1) { if (activeTab === 1) {
return list; return list;
...@@ -105,12 +108,14 @@ const ProjectData = observer(() => { ...@@ -105,12 +108,14 @@ const ProjectData = observer(() => {
} }
}, [list, dataSetList, activeTab]); }, [list, dataSetList, activeTab]);
// 获取文件token
const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, { const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
onSuccess: (res: any) => { onSuccess: (res: any) => {
setFileToken(res.data); setFileToken(res.data);
}, },
}); });
// 全局搜索数据集
const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, { const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
onSuccess: (res: any) => { onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => { const dataSetList = res.data.map((item: any) => {
...@@ -121,11 +126,12 @@ const ProjectData = observer(() => { ...@@ -121,11 +126,12 @@ const ProjectData = observer(() => {
}); });
setDataSetList(dataSetList); setDataSetList(dataSetList);
setSelectIds([]); setSelectIds([]);
setDebounce(false) setDebounce(false);
tableRef?.current?.initSelectedFunc([]); tableRef?.current?.initSelectedFunc([]);
}, },
}); });
// 获取某路径下的数据集
const { run: getDataFindRun } = useMyRequest(getDataFind, { const { run: getDataFindRun } = useMyRequest(getDataFind, {
onSuccess: (res: any) => { onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => { const dataSetList = res.data.map((item: any) => {
...@@ -136,11 +142,12 @@ const ProjectData = observer(() => { ...@@ -136,11 +142,12 @@ const ProjectData = observer(() => {
}); });
setDataSetList(dataSetList); setDataSetList(dataSetList);
setSelectIds([]); setSelectIds([]);
setDebounce(false) setDebounce(false);
tableRef?.current?.initSelectedFunc([]); tableRef?.current?.initSelectedFunc([]);
}, },
}); });
// 获取某路径下的数据集
const getDataSetList = useCallback(() => { const getDataSetList = useCallback(() => {
if (keyWord) { if (keyWord) {
return; return;
...@@ -152,6 +159,7 @@ const ProjectData = observer(() => { ...@@ -152,6 +159,7 @@ const ProjectData = observer(() => {
} }
}, [keyWord, path, projectId, getDataFindRun]); }, [keyWord, path, projectId, getDataFindRun]);
// 全局搜索数据集
const getDataSetListSearch = useCallback(() => { const getDataSetListSearch = useCallback(() => {
if (keyWord) { if (keyWord) {
return getDataFileSearchRun({ return getDataFileSearchRun({
...@@ -185,7 +193,7 @@ const ProjectData = observer(() => { ...@@ -185,7 +193,7 @@ const ProjectData = observer(() => {
setList([]); setList([]);
} }
setSelectIds([]); setSelectIds([]);
setDebounce(false) setDebounce(false);
}); });
} }
}, [fileToken, path, projectId, keyWord]); }, [fileToken, path, projectId, keyWord]);
...@@ -216,14 +224,15 @@ const ProjectData = observer(() => { ...@@ -216,14 +224,15 @@ const ProjectData = observer(() => {
setList([]); setList([]);
} }
setSelectIds([]); setSelectIds([]);
setDebounce(false) setDebounce(false);
}); });
} }
} }
}, [fileToken, projectId, keyWord, getList]); }, [fileToken, projectId, keyWord, getList]);
// 刷新
const handleRefresh = () => { const handleRefresh = () => {
if (isPass('PROJECT_DATA_REFRESH', 'USER')) { if (isPass("PROJECT_DATA_REFRESH", "USER")) {
tableRef?.current?.initSelectedFunc([]); tableRef?.current?.initSelectedFunc([]);
setSelectIds([]); setSelectIds([]);
if (keyWord) { if (keyWord) {
...@@ -236,12 +245,14 @@ const ProjectData = observer(() => { ...@@ -236,12 +245,14 @@ const ProjectData = observer(() => {
} }
}; };
// 项目切换时重新获取文件token
useEffect(() => { useEffect(() => {
getDataFileTokenRun({ getDataFileTokenRun({
id: currentProjectStore.currentProjectInfo.id as string, id: currentProjectStore.currentProjectInfo.id as string,
}); });
}, [getDataFileTokenRun, currentProjectStore]); }, [getDataFileTokenRun, currentProjectStore]);
// 搜索值改变
const handleKeyWordChange = (e: any) => { const handleKeyWordChange = (e: any) => {
if (e.target.value.length > 30) { if (e.target.value.length > 30) {
return; return;
...@@ -249,6 +260,7 @@ const ProjectData = observer(() => { ...@@ -249,6 +260,7 @@ const ProjectData = observer(() => {
setKeyWord(e.target.value); setKeyWord(e.target.value);
}; };
// 按回车搜索
const handleKeyWordChangeKeyUp = (e: any) => { const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
searchFileList(); searchFileList();
...@@ -257,27 +269,36 @@ const ProjectData = observer(() => { ...@@ -257,27 +269,36 @@ const ProjectData = observer(() => {
}; };
// todo name sort // todo name sort
// table配置
const versionsHeadCells = [ const versionsHeadCells = [
{ id: "checkbox" }, { id: "checkbox" },
{ id: "name", numeric: false, label: "名称", width: "25%" }, { id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true }, { 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%" }, { id: "caozuo", numeric: false, label: "操作", width: "25%" },
]; ];
// 点击复选框
const hanldeCheckbox = (e: any) => { const hanldeCheckbox = (e: any) => {
const selectarr = e.map((item: any) => { const selectarr = e.map((item: any) => {
let andIndex = item.indexOf("&index=") let andIndex = item.indexOf("&index=");
return item.slice(5, andIndex) return item.slice(5, andIndex);
}) });
setSelectIds(selectarr); setSelectIds(selectarr);
}; };
// 文件夹下钻
const handleViewFolders = (item: any) => { const handleViewFolders = (item: any) => {
if (debounce) { if (debounce) {
return return;
} else { } else {
setDebounce(true) setDebounce(true);
if (path === "/") { if (path === "/") {
setPath(`/${item.name}`); setPath(`/${item.name}`);
} else { } else {
...@@ -286,11 +307,13 @@ const ProjectData = observer(() => { ...@@ -286,11 +307,13 @@ const ProjectData = observer(() => {
} }
}; };
// 显示删除确认框
const hanleDeleteFile = (item: any) => { const hanleDeleteFile = (item: any) => {
setCurrentOperateFile(item); setCurrentOperateFile(item);
setDeleteDialogOpen(true); setDeleteDialogOpen(true);
}; };
// table配置
const renderName = (item: any) => { const renderName = (item: any) => {
if (item.type === "directory") { if (item.type === "directory") {
return ( return (
...@@ -322,23 +345,28 @@ const ProjectData = observer(() => { ...@@ -322,23 +345,28 @@ const ProjectData = observer(() => {
} }
}; };
// table配置
const renderSize = (item: any) => { const renderSize = (item: any) => {
if (item.type === "dataSet") { if (item.type === "dataSet") {
return `${item.size}条`; 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) => { 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) => { const renderButtons = (item: any) => {
return ( return (
<span> <span>
{item.type !== 'dataSet' && item.type !== 'directory' && ( {item.type !== "dataSet" && item.type !== "directory" && (
<Button <Button
sx={{ position: "relative", left: "-18px", }} sx={{ position: "relative", left: "-18px" }}
variant="text" variant="text"
size="small" size="small"
disabled={!isPass("PROJECT_DATA_DOWNLOAD")} disabled={!isPass("PROJECT_DATA_DOWNLOAD")}
...@@ -351,7 +379,9 @@ const ProjectData = observer(() => { ...@@ -351,7 +379,9 @@ const ProjectData = observer(() => {
variant="text" variant="text"
size="small" size="small"
onClick={() => hanleShowMoveFileDialog(item)} onClick={() => hanleShowMoveFileDialog(item)}
disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", 'USER')} disabled={
selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", "USER")
}
> >
移动至 移动至
</Button> </Button>
...@@ -361,7 +391,9 @@ const ProjectData = observer(() => { ...@@ -361,7 +391,9 @@ const ProjectData = observer(() => {
size="small" size="small"
color="error" color="error"
onClick={() => hanleDeleteFile(item)} onClick={() => hanleDeleteFile(item)}
disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", 'USER')} disabled={
selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", "USER")
}
> >
删除 删除
</Button> </Button>
...@@ -369,17 +401,20 @@ const ProjectData = observer(() => { ...@@ -369,17 +401,20 @@ const ProjectData = observer(() => {
); );
}; };
// 文件上传
let UpLoaderFileRef: any = React.createRef(); let UpLoaderFileRef: any = React.createRef();
const hanleShowUpLoaderFileDialog = () => { const hanleShowUpLoaderFileDialog = () => {
UpLoaderFileRef.current.showDialog(); UpLoaderFileRef.current.showDialog();
}; };
// 新增文件
let addFolderRef: any = React.createRef(); let addFolderRef: any = React.createRef();
const hanleShowAddFolderDialog = () => { const hanleShowAddFolderDialog = () => {
addFolderRef.current.showDialog(); addFolderRef.current.showDialog();
}; };
// 文件移动
let moveFileRef: any = React.createRef(); let moveFileRef: any = React.createRef();
const hanleShowMoveFileDialog = (item: any) => { const hanleShowMoveFileDialog = (item: any) => {
...@@ -387,10 +422,12 @@ const ProjectData = observer(() => { ...@@ -387,10 +422,12 @@ const ProjectData = observer(() => {
moveFileRef.current.showDialog(); moveFileRef.current.showDialog();
}; };
// 删除文件
const handleDeleteDialogClose = () => { const handleDeleteDialogClose = () => {
setDeleteDialogOpen(false); setDeleteDialogOpen(false);
}; };
// 删除数据集请求
const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, { const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
onSuccess: (res: any) => { onSuccess: (res: any) => {
Message.success("删除成功"); Message.success("删除成功");
...@@ -400,6 +437,7 @@ const ProjectData = observer(() => { ...@@ -400,6 +437,7 @@ const ProjectData = observer(() => {
}, },
}); });
// 删除流程判断待优化
const handleDelete = () => { const handleDelete = () => {
let deletePath = ""; let deletePath = "";
if (currentOperateFile) { if (currentOperateFile) {
...@@ -485,16 +523,19 @@ const ProjectData = observer(() => { ...@@ -485,16 +523,19 @@ const ProjectData = observer(() => {
} }
}; };
// 批量移动
const handleBatchMove = () => { const handleBatchMove = () => {
setCurrentOperateFile(null); setCurrentOperateFile(null);
moveFileRef.current.showDialog(); moveFileRef.current.showDialog();
}; };
// 批量删除
const handleBatchDelete = () => { const handleBatchDelete = () => {
setCurrentOperateFile(null); setCurrentOperateFile(null);
setDeleteDialogOpen(true); setDeleteDialogOpen(true);
}; };
// 前端展示的文件路径
const showPath = useMemo(() => { const showPath = useMemo(() => {
if (path === "/") { if (path === "/") {
return <span className={style.showPathSpan}>ProjectData</span>; return <span className={style.showPathSpan}>ProjectData</span>;
...@@ -575,7 +616,8 @@ const ProjectData = observer(() => { ...@@ -575,7 +616,8 @@ const ProjectData = observer(() => {
style={{ marginRight: "12px" }} style={{ marginRight: "12px" }}
onClick={hanleShowUpLoaderFileDialog} onClick={hanleShowUpLoaderFileDialog}
disabled={ disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD", 'USER') selectIds.length !== 0 ||
!isPass("PROJECT_DATA_UPLOAD", "USER")
} }
> >
上传文件 上传文件
...@@ -586,7 +628,8 @@ const ProjectData = observer(() => { ...@@ -586,7 +628,8 @@ const ProjectData = observer(() => {
size="small" size="small"
onClick={hanleShowAddFolderDialog} onClick={hanleShowAddFolderDialog}
disabled={ disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", 'USER') selectIds.length !== 0 ||
!isPass("PROJECT_DATA_ADDDIR", "USER")
} }
> >
新建文件夹 新建文件夹
...@@ -646,7 +689,7 @@ const ProjectData = observer(() => { ...@@ -646,7 +689,7 @@ const ProjectData = observer(() => {
aria-label="refreshIcon" aria-label="refreshIcon"
size="small" size="small"
onClick={handleRefresh} onClick={handleRefresh}
disabled={!isPass('PROJECT_DATA_REFRESH', 'USER')} disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
> >
<RefreshIcon /> <RefreshIcon />
</IconButton> </IconButton>
...@@ -674,12 +717,12 @@ const ProjectData = observer(() => { ...@@ -674,12 +717,12 @@ const ProjectData = observer(() => {
caozuo: renderButtons(item), caozuo: renderButtons(item),
}))} }))}
></Table> ></Table>
{ {showList.length === 0 && (
showList.length === 0 && <div className={style.noDataBox}> <div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" /> <img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂未开启模板</span> <span className={style.noDataText}>暂未开启模板</span>
</div> </div>
} )}
</div> </div>
{selectIds.length > 1 && ( {selectIds.length > 1 && (
<div className={style.projectDataStickyBox}> <div className={style.projectDataStickyBox}>
...@@ -689,7 +732,7 @@ const ProjectData = observer(() => { ...@@ -689,7 +732,7 @@ const ProjectData = observer(() => {
size="small" size="small"
style={{ marginRight: "12px" }} style={{ marginRight: "12px" }}
onClick={handleBatchDelete} onClick={handleBatchDelete}
disabled={!isPass("PROJECT_DATA_DELETE", 'USER')} disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
> >
批量删除（{selectIds.length}） 批量删除（{selectIds.length}）
</Button> </Button>
...@@ -699,7 +742,7 @@ const ProjectData = observer(() => { ...@@ -699,7 +742,7 @@ const ProjectData = observer(() => {
size="small" size="small"
style={{ marginRight: "24px" }} style={{ marginRight: "24px" }}
onClick={handleBatchMove} onClick={handleBatchMove}
disabled={!isPass("PROJECT_DATA_MOVE", 'USER')} disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
> >
批量移动（{selectIds.length}） 批量移动（{selectIds.length}）
</Button> </Button>
......
src/views/Project/ProjectSetting/BaseInfo/index.module.css
View file @ 379cf7b8
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
outline: none; outline: none;
} }
.projectInfoListLiValue:focus { .projectInfoListLiValue:focus {
border: 1px solid #136efa; border: 2px solid #136efa;
} }
.projectInfoTextarea { .projectInfoTextarea {
line-height: 22px; line-height: 22px;
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 379cf7b8
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -21,7 +21,7 @@ import { toJS } from "mobx"; ...@@ -21,7 +21,7 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import InformationDisplay from "@/components/InformationDisplay"; import InformationDisplay from "@/components/InformationDisplay";
import classnames from "classnames"; import classnames from "classnames";
import { Button } from "@mui/material"; import { Button, TextField } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton"; import LoadingButton from "@mui/lab/LoadingButton";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import Loading from "@/views/Loading"; import Loading from "@/views/Loading";
...@@ -40,6 +40,10 @@ const BaseInfo = observer(() => { ...@@ -40,6 +40,10 @@ const BaseInfo = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const [projectInfo, setProjectInfo] = useState<any>({}); const [projectInfo, setProjectInfo] = useState<any>({});
const [deleteProjectName, setDeleteProjectName] = useState(""); const [deleteProjectName, setDeleteProjectName] = useState("");
const [nameCheck, setNameCheck] = useState({
error: false,
help: "",
});
const currentUserName = JSON.parse( const currentUserName = JSON.parse(
localStorage.getItem("userInfo") || "{}" localStorage.getItem("userInfo") || "{}"
).name; ).name;
...@@ -98,11 +102,50 @@ const BaseInfo = observer(() => { ...@@ -98,11 +102,50 @@ const BaseInfo = observer(() => {
]; ];
}, [projectInfo, zoneIdMap]); }, [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) => { const nameChange = (e: any) => {
setProjectInfo({ setProjectInfo({
...projectInfo, ...projectInfo,
name: e.target.value, name: e.target.value,
}); });
checkName(e.target.value);
// setNameCheck
}; };
const descChange = (e: any) => { const descChange = (e: any) => {
...@@ -126,16 +169,10 @@ const BaseInfo = observer(() => { ...@@ -126,16 +169,10 @@ const BaseInfo = observer(() => {
// 修改项目 // 修改项目
const handleClickUpdate = () => { const handleClickUpdate = () => {
if (projectInfo.name) { if (checkName(projectInfo.name, true)) {
if (checkIsNumberLetterChinese(projectInfo.name)) { updateProjectRun({ ...projectInfo, product: "CADD" });
updateProjectRun({ ...projectInfo, product: "CADD" });
} else {
message.info(
"格式不正确，必须在30字符以内，仅限大小写字母、数字、中文"
);
}
} else { } else {
message.info("项目名称不能为空"); return;
} }
}; };
...@@ -195,13 +232,26 @@ const BaseInfo = observer(() => { ...@@ -195,13 +232,26 @@ const BaseInfo = observer(() => {
> >
项目名称 项目名称
</div> </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} value={projectInfo.name}
className={style.projectInfoListLiValue} className={style.projectInfoListLiValue}
onChange={nameChange} onChange={nameChange}
maxLength={30} maxLength={30}
placeholder="请输入项目名称" placeholder="请输入项目名称"
></input> ></input> */}
</div> </div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>项目描述</div> <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