Commit 2cdb2734 authored by wuyongsheng's avatar wuyongsheng

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

Feat 20220608 projectdata

See merge request !38
parents 1694936d cf51034b
...@@ -2,19 +2,17 @@ ...@@ -2,19 +2,17 @@
* @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-15 15:24:44 * @LastEditTime: 2022-06-16 02:15:55
* @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, observable, action } from "mobx"; import { makeAutoObservable } from "mobx";
interface IUploadInfo { export interface IUploadInfo {
id: string, id: string,
open: boolean,
file: File, file: File,
list: any, info: any,
isPermanence: boolean,
} }
/** 存储地图派单websocket推送数据状态的store */ /** 存储地图派单websocket推送数据状态的store */
...@@ -43,7 +41,6 @@ class FileList { ...@@ -43,7 +41,6 @@ class FileList {
/** 设置文件上传信息 */ /** 设置文件上传信息 */
setUploadInfo = (id: string, val: IUploadInfo) => { setUploadInfo = (id: string, val: IUploadInfo) => {
console.log(id, val,'2222')
const newFileList = this.fileList?.map((item)=>{ const newFileList = this.fileList?.map((item)=>{
if(item.id === id){ if(item.id === id){
return val return val
...@@ -52,29 +49,10 @@ class FileList { ...@@ -52,29 +49,10 @@ class FileList {
this.fileList = newFileList this.fileList = newFileList
} }
setUploadInfoOpen = (id: string, val: boolean) => {
const newFileList = this.fileList?.map((item)=>{
if(item.id === id){
return {...item,open: val};
}
return item;
})
this.fileList = newFileList
}
setUploadInfoList = (id: string, val: any) => { setUploadInfoList = (id: string, val: any) => {
const newFileList = this.fileList?.map((item)=>{ const newFileList = this.fileList?.map((item)=>{
if(item.id === id){ if(item.id === id){
return {...item, list: val} return {...item, info: {...item.info, ...val}}
} return item
})
this.fileList = newFileList
}
setUploadInfoIsPermanence = (id: string, val: boolean) => {
const newFileList = this.fileList?.map((item)=>{
if(item.id === id){
return {...item, isPermanence: val}
} return item } return item
}) })
this.fileList = newFileList this.fileList = newFileList
......
import React, { useEffect, useState } from "react"; import useGlobalStore from "@/hooks/useGlobalStore";
import { toJS } from "mobx";
import * as tus from "tus-js-client"; import * as tus from "tus-js-client";
import { import {
verifyLettersNumbersCertainChars4, verifyLettersNumbersCertainChars4,
verifyLettersNumbersCertainChars5,
} from "../helper"; } from "../helper";
import { getDataFileToken } from "@/api/project_api"; import { getTokenInfo } from "../util";
import useMyRequest from "@/hooks/useMyRequest";
import { getTokenInfo } from "@/utils/util";
const UseTusUpload = (props) => { const UseTusUpload = (uploadInfoStore: any) => {
const { fileListStore: uploadInfoStore, currentProjectStore } = props;
/** 文件token */
const [fileToken, setFileToken] = useState("");
/** token信息 */ /** token信息 */
let tokenInfo = getTokenInfo(); let tokenInfo = getTokenInfo();
const currentProjectStore = toJS(useGlobalStore("currentProjectStore"));
/** 获取文件token请求 */
const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
onSuccess: (res) => {
setFileToken(res.data);
},
});
useEffect(() => {
getDataFileTokenRun({
id: currentProjectStore?.currentProjectInfo.id,
});
}, []);
const { fileList } = uploadInfoStore;
const uploadFile = (item, file, url, filepath, callBack) => {
uploadInfoStore?.setUploadInfoIsPermanence(item.id, false);
console.log(fileList);
const uploadFile = (
item: any,
file: any,
url: string,
fileToken: string,
filepath: any,
callBack: any
) => {
if (!verifyLettersNumbersCertainChars4(file.name)) { if (!verifyLettersNumbersCertainChars4(file.name)) {
console.log(222); let json = {
let json1 = item?.list.concat({
name: file.name, name: file.name,
bytesUploaded: 0, bytesUploaded: 0,
bytesTotal: 0, bytesTotal: 0,
...@@ -46,18 +30,16 @@ const UseTusUpload = (props) => { ...@@ -46,18 +30,16 @@ const UseTusUpload = (props) => {
startTime: new Date().getTime(), startTime: new Date().getTime(),
endTime: new Date().getTime() + 1000, endTime: new Date().getTime() + 1000,
bytesUploaded2: 0, bytesUploaded2: 0,
fileIsCn: true, isSuspend: false,
statusMsg: "上传失败", statusMsg: "上传失败",
upload: null, upload: null,
id: new Date().getTime(), id: new Date().getTime(),
statusMsgDetail: statusMsgDetail:
"上传失败,文件或文件夹的命名长度不超过127字节,不支持特殊符号、空格。", "上传失败,文件或文件夹的命名长度不超过127字节,不支持特殊符号、空格。",
}); };
uploadInfoStore?.setUploadInfo(item.id, { uploadInfoStore?.setUploadInfo(item.id, {
...item, ...item,
open: true, info: json,
list: json1,
isPermanence: false,
}); });
return; return;
} }
...@@ -72,60 +54,46 @@ const UseTusUpload = (props) => { ...@@ -72,60 +54,46 @@ const UseTusUpload = (props) => {
let upload = new tus.Upload(file, { let upload = new tus.Upload(file, {
endpoint: url, endpoint: url,
parallelUploads: 1, parallelUploads: 1,
chunkSize: 5242880, chunkSize: 5 * 1024 * 1024,
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: string) {
console.log("Failed because: " + error); console.log("Failed because: " + error);
}, },
onProgress: function (bytesUploaded, bytesTotal, a) { onProgress: function (bytesUploaded: number, bytesTotal: number) {
var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2); var percentage = (bytesUploaded / bytesTotal) * 100;
const json = item.list.concat({ const json = {
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: timeId,
endTime: new Date().getTime() + 1000, isSuspend: false,
endTime: new Date().getTime(),
bytesUploaded2: bytesUploaded, bytesUploaded2: bytesUploaded,
id: timeId, id: timeId,
statusMsg: "正在上传", statusMsg: "正在上传",
upload, upload,
dir: "/home/cloudam/", dir: "/home/cloudam/",
}); };
console.log(item, "0111111");
uploadInfoStore?.setUploadInfo(item.id, { uploadInfoStore?.setUploadInfo(item.id, {
...item, ...item,
open: true, info: json,
list: json || [],
isPermanence: item.isPermanence,
}); });
}, },
onSuccess: function () { onSuccess: function () {
let json = []; const json = {
json = item.list.concat({
name: upload.file.name,
bytesUploaded: 0,
bytesTotal: 0,
id: timeId, id: timeId,
percentage: 100, percentage: 100,
startTime: new Date().getTime(), startTime: timeId,
endTime: new Date().getTime() + 1000, endTime: new Date().getTime() + 1000,
bytesUploaded2: 0,
statusMsg: "上传成功", statusMsg: "上传成功",
upload, upload,
}); };
console.log(json, item.list, "0222222"); uploadInfoStore?.setUploadInfoList(item.id, json);
uploadInfoStore?.setUploadInfo(item.id, {
...item,
open: true,
list: json,
isPermanence: item.isPermanence,
});
callBack && callBack(upload, filepath); callBack && callBack(upload, filepath);
}, },
......
...@@ -6,7 +6,20 @@ ...@@ -6,7 +6,20 @@
align-items: center; align-items: center;
border-bottom: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5;
} }
.fileNameBox {
white-space: nowrap;
display: inline-block;
vertical-align: middle;
color: #1e2633;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.rightBox { .rightBox {
cursor: pointer;
font-size: 12px; font-size: 12px;
color: #1370ff; color: #1370ff;
} }
......
...@@ -5,44 +5,75 @@ import { LinearProgress } from "@mui/material"; ...@@ -5,44 +5,75 @@ import { LinearProgress } from "@mui/material";
import styles from "./index.module.css"; import styles from "./index.module.css";
import { useMemo } from "react"; import { useMemo } from "react";
import { formatTime, storageUnitFromB } from "@/utils/util"; import { formatTime, storageUnitFromB } from "@/utils/util";
import useGlobalStore from "@/hooks/useGlobalStore";
import { observer } from "mobx-react-lite";
import { IUploadInfo } from "@/store/modules/fileList";
import { useMessage } from "@/components/MySnackbar";
/* /*
* @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-15 18:03:31 * @LastEditTime: 2022-06-16 02:07:56
* @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
*/ */
interface IProps { interface IProps {
fileItemInfo: any; fileItemInfo: IUploadInfo;
} }
const FileItem = (props: IProps) => { const FileItem = observer((props: IProps) => {
const { fileItemInfo } = props; const { fileItemInfo } = props;
const itemInfo = toJS(fileItemInfo); const itemInfo = toJS(fileItemInfo)?.info;
const lastInfo = itemInfo?.list[itemInfo.list?.length - 1]; const { statusMsg = "" } = itemInfo || {};
const firstInfo = itemInfo?.list[0]; const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
const lastMsg = lastInfo?.statusMsg; const Message = useMessage();
console.log(toJS(fileItemInfo), "11111");
/** 时间 */
const TimeText = useMemo(() => { const TimeText = useMemo(() => {
const val = lastInfo.endTime - firstInfo.startTime; const val = itemInfo?.endTime - itemInfo?.startTime;
return formatTime(val); return formatTime(val) || "";
}, [firstInfo.startTime, lastInfo.endTime]); }, [itemInfo?.endTime, itemInfo?.startTime]);
const text = useMemo(() => { const text = useMemo(() => {
let result = ""; let result = "";
if (lastMsg === "上传失败") { if (statusMsg === "上传失败") {
result = "重新上传"; result = "重新上传";
} }
if (lastMsg === "正在上传") { if (statusMsg === "正在上传") {
if (itemInfo?.isSuspend) {
result = "重新上传";
} else {
result = "暂停"; result = "暂停";
} }
if (lastMsg === "上传成功") { }
if (statusMsg === "上传成功") {
result = "查看文件"; result = "查看文件";
} }
return result; return result;
}, [itemInfo?.list, lastMsg]); }, [itemInfo?.isSuspend, statusMsg]);
/** 操作合集 */
const onOperation = () => {
if (text === "暂停") {
itemInfo?.upload?.abort(true).then(() => {
Message.info("暂停成功!");
uploadInfoStore.setUploadInfoList(fileItemInfo?.id, {
isSuspend: true,
});
});
}
if (text === "重新上传") {
itemInfo?.upload?.start();
uploadInfoStore.setUploadInfoList(fileItemInfo?.id, {
isSuspend: false,
});
}
if (text === "查看文件") {
console.log("跳转");
}
};
return ( return (
<div className={styles.itemBox}> <div className={styles.itemBox}>
...@@ -50,12 +81,14 @@ const FileItem = (props: IProps) => { ...@@ -50,12 +81,14 @@ const FileItem = (props: IProps) => {
<img /> <img />
<div> <div>
<div> <div>
<b style={{ fontSize: 14 }}>{firstInfo?.name || ""}</b> <b className={styles.fileNameBox} title={itemInfo?.name || ""}>
{lastMsg === "上传失败" ? ( {itemInfo?.name || ""}
</b>
{statusMsg === "上传失败" ? (
<span <span
className={styles.span} className={styles.span}
style={{ marginLeft: 16, color: "#FF4E4E" }} style={{ marginLeft: 16, color: "#FF4E4E" }}
>{`(${lastMsg})`}</span> >{`(${statusMsg})`}</span>
) : ( ) : (
<span className={styles.span} style={{ marginLeft: 16 }}> <span className={styles.span} style={{ marginLeft: 16 }}>
{TimeText} {TimeText}
...@@ -63,20 +96,31 @@ const FileItem = (props: IProps) => { ...@@ -63,20 +96,31 @@ const FileItem = (props: IProps) => {
)} )}
</div> </div>
<LinearProgress <LinearProgress
sx={{ width: 300, borderRadius: 2, margin: "2px 0", color: "red" }} sx={{ width: 300, borderRadius: 2, margin: "6px 0", color: "red" }}
variant="determinate" variant="determinate"
value={50} value={itemInfo?.percentage}
/> />
<div> <div style={{ fontSize: 12 }}>
<span className={styles.span}>{`700MB/${storageUnitFromB( {statusMsg === "上传成功" ? (
500000 <>
)}`}</span> <span style={{ color: "#8A9099" }}>已上传至</span>
<span style={{ color: "#565C66", marginLeft: 12 }}>
{itemInfo?.dir}
</span>
</>
) : (
<span className={styles.span}>{`${storageUnitFromB(
itemInfo?.bytesUploaded || 0
)}/${storageUnitFromB(itemInfo?.bytesTotal || 0)}`}</span>
)}
</div>
</div> </div>
</div> </div>
<div className={styles.rightBox} onClick={onOperation}>
{text}
</div> </div>
<div className={styles.rightBox}>{text}</div>
</div> </div>
); );
}; });
export default FileItem; export default FileItem;
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
* @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-14 21:00:46 * @LastEditTime: 2022-06-16 03:05:08
* @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
*/ */
import { Box, InputLabel, MenuItem, Select } from "@mui/material"; import { Box } from "@mui/material";
import { memo } from "react"; import { memo } from "react";
import MySelect from "@/components/mui/MySelect"; import MySelect from "@/components/mui/MySelect";
...@@ -14,9 +14,11 @@ import MyTitle from "@/components/mui/MyTitle"; ...@@ -14,9 +14,11 @@ import MyTitle from "@/components/mui/MyTitle";
import FileItem from "../FileItem"; import FileItem from "../FileItem";
import useGlobalStore from "@/hooks/useGlobalStore"; import useGlobalStore from "@/hooks/useGlobalStore";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
const TranSferList = observer(() => { const TranSferList = observer(() => {
const fileList = useGlobalStore("fileListStore"); const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
return ( return (
<Box style={{ width: 520, padding: 20 }}> <Box style={{ width: 520, padding: 20 }}>
<MyTitle title="传输列表" /> <MyTitle title="传输列表" />
...@@ -45,8 +47,8 @@ const TranSferList = observer(() => { ...@@ -45,8 +47,8 @@ const TranSferList = observer(() => {
/> />
</Box> </Box>
<Box> <Box>
{fileList?.fileList.map((item) => { {uploadInfoStore?.fileList.map((item) => {
return <FileItem fileItemInfo={item} />; return <FileItem fileItemInfo={item} key={item.id} />;
})} })}
</Box> </Box>
</Box> </Box>
......
...@@ -3,7 +3,6 @@ import { Outlet, useLocation, useNavigate } from "react-router-dom"; ...@@ -3,7 +3,6 @@ import { Outlet, useLocation, useNavigate } from "react-router-dom";
import cx from "classnames"; import cx from "classnames";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import Add from "@mui/icons-material/Add";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import { Box, Menu, MenuItem } from "@mui/material"; import { Box, Menu, MenuItem } from "@mui/material";
...@@ -17,13 +16,6 @@ import MyPopover from "@/components/mui/MyPopover"; ...@@ -17,13 +16,6 @@ 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 { APIOPTION, 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 {
...@@ -44,44 +36,6 @@ const ConsoleLayout = observer(() => { ...@@ -44,44 +36,6 @@ 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 =
APIOPTION() +
"/parallelupload/" +
urlToken(
res?.data || "",
currentProjectStore?.currentProjectInfo?.id as string
);
fileList?.newFileList?.forEach((item: any) => {
uploadFile(
item,
item?.file,
url,
"/",
(upload: any, filepath: string) => console.log(upload, filepath, 1111)
);
});
},
});
useDeepEffect(() => {
if (fileList?.newFileList?.length) {
console.log(111, 222);
getDataFileTokenRun({
id: currentProjectStore?.currentProjectInfo.id || "",
});
}
}, [fileList?.newFileList]);
return ( return (
<Box> <Box>
<Box className={style.topApp}> <Box className={style.topApp}>
......
...@@ -5,16 +5,31 @@ import MyDialog from "@/components/mui/MyDialog"; ...@@ -5,16 +5,31 @@ import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util"; import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import CloudEController from "@/api/fileserver/CloudEController"; import CloudEController from "@/api/fileserver/CloudEController";
import InputAdornment from '@mui/material/InputAdornment';
const AddFolder = (props: any) => { const AddFolder = (props: any) => {
const { list, path, projectId, fileToken, refresh } = props; const { list, path, projectId, fileToken, refresh } = props;
const Message = useMessage(); const Message = useMessage();
let addFolderDialogRef: any = React.createRef(); let addFolderDialogRef: any = React.createRef();
const [fileName, setFileName] = useState("");
const [fileNameCheck, setFileNameCheck] = useState({
error: false,
help: "",
});
const showDialog = () => { const showDialog = () => {
addFolderDialogRef.current.handleClickOpen(); addFolderDialogRef.current.handleClickOpen();
initData()
}; };
const initData = () => {
setFileName('')
setFileNameCheck({
error: false,
help: "",
})
}
useImperativeHandle(props.onRef, () => { useImperativeHandle(props.onRef, () => {
return { return {
showDialog: showDialog, showDialog: showDialog,
...@@ -41,11 +56,6 @@ const AddFolder = (props: any) => { ...@@ -41,11 +56,6 @@ const AddFolder = (props: any) => {
}; };
const addFolderSubmitloading = false; const addFolderSubmitloading = false;
const [fileName, setFileName] = useState("");
const [fileNameCheck, setFileNameCheck] = useState({
error: false,
help: "",
});
const handleFileNameChange = (e: any) => { const handleFileNameChange = (e: any) => {
const fileName = e.target.value; const fileName = e.target.value;
setFileName(fileName); setFileName(fileName);
...@@ -99,6 +109,9 @@ const AddFolder = (props: any) => { ...@@ -99,6 +109,9 @@ const AddFolder = (props: any) => {
value={fileName} value={fileName}
onChange={handleFileNameChange} onChange={handleFileNameChange}
helperText={fileNameCheck.help} helperText={fileNameCheck.help}
InputProps={{
endAdornment: <InputAdornment position="end">{fileName.length}/30</InputAdornment>,
}}
size="small" size="small"
/> />
</MyDialog> </MyDialog>
......
...@@ -20,7 +20,14 @@ ...@@ -20,7 +20,14 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
}
.treeLabelText{
line-height: 44px; line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
white-space: nowrap;
width: 320px;
} }
.labelFolderIcon { .labelFolderIcon {
margin-right: 9px; margin-right: 9px;
......
...@@ -147,6 +147,7 @@ const MoveFile = (props: any) => { ...@@ -147,6 +147,7 @@ const MoveFile = (props: any) => {
)?.then((res) => { )?.then((res) => {
Message.success("移动成功!"); Message.success("移动成功!");
moveFileDialogRef.current.handleClose(); moveFileDialogRef.current.handleClose();
refresh();
}); });
} }
} }
...@@ -159,7 +160,7 @@ const MoveFile = (props: any) => { ...@@ -159,7 +160,7 @@ const MoveFile = (props: any) => {
return ( return (
<span className={style.treeLabel}> <span className={style.treeLabel}>
<img className={style.labelFolderIcon} src={folderIcon} alt="" /> <img className={style.labelFolderIcon} src={folderIcon} alt="" />
{labelNmae} <span className={style.treeLabelText}>{labelNmae}</span>
</span> </span>
); );
}; };
......
...@@ -54,7 +54,14 @@ ...@@ -54,7 +54,14 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.fileIconBoxText{
display: block;
width: 260px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
white-space: nowrap;
}
.noFile { .noFile {
position: absolute; position: absolute;
top: 92px; top: 92px;
......
...@@ -8,7 +8,7 @@ import React, { ...@@ -8,7 +8,7 @@ import React, {
import style from "./index.module.css"; import style from "./index.module.css";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { uuid } from "@/utils/util"; import { getTokenInfo, 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";
...@@ -20,10 +20,16 @@ import { storageUnitFromB } from "@/utils/util"; ...@@ -20,10 +20,16 @@ import { storageUnitFromB } from "@/utils/util";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { IResponse, useHttp } from "@/api/http";
import useGlobalStore from "@/hooks/useGlobalStore";
import { APIOPTION, urlToken } from "@/api/fileserver/raysyncApi";
import UseTusUpload from "@/utils/Upload/tusUpload";
const UpLoaderFile = observer((props: any) => { const UpLoaderFile = observer((props: any) => {
const { fileListStore } = useStores(); const { fileListStore } = useStores();
const message = useMessage(); const message = useMessage();
const http = useHttp();
const [fileList, setFileList] = useState<any>([]); const [fileList, setFileList] = useState<any>([]);
// list 是项目数据table的数据 // list 是项目数据table的数据
const { path, list } = props; const { path, list } = props;
...@@ -33,6 +39,10 @@ const UpLoaderFile = observer((props: any) => { ...@@ -33,6 +39,10 @@ const UpLoaderFile = observer((props: any) => {
return [...list, ...fileList]; return [...list, ...fileList];
}, [list, fileList]); }, [list, fileList]);
const currentProjectStore = toJS(useGlobalStore("currentProjectStore"));
const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
const { uploadFile } = UseTusUpload(uploadInfoStore);
const onDrop = useCallback( const onDrop = useCallback(
(acceptedFiles: any) => { (acceptedFiles: any) => {
// 获取重复的项目文件列表和要上传(名称不重复就上传)的文件 // 获取重复的项目文件列表和要上传(名称不重复就上传)的文件
...@@ -97,6 +107,38 @@ const UpLoaderFile = observer((props: any) => { ...@@ -97,6 +107,38 @@ const UpLoaderFile = observer((props: any) => {
let dialogRef: any = React.createRef(); let dialogRef: any = React.createRef();
const getFileToken = useCallback(
(newFileList: any) => {
http
.get<IResponse<any>>(
`/cpp/data/filetoken?id=${
currentProjectStore?.currentProjectInfo.id || ""
}`
)
.then((res: any) => {
let url =
APIOPTION() +
"/parallelupload/" +
urlToken(
res?.data || "",
currentProjectStore?.currentProjectInfo?.id as string
);
newFileList?.forEach((item: any) => {
uploadFile(
item,
item?.file,
url,
res.data,
"/",
(upload: any, filepath: string) =>
console.log(upload, filepath, 1111)
);
});
});
},
[currentProjectStore?.currentProjectInfo.id, http, uploadFile]
);
const handleSubmit = () => { const handleSubmit = () => {
const newFileList = const newFileList =
fileList?.map((item: any) => { fileList?.map((item: any) => {
...@@ -109,12 +151,21 @@ const UpLoaderFile = observer((props: any) => { ...@@ -109,12 +151,21 @@ const UpLoaderFile = observer((props: any) => {
}; };
}) || []; }) || [];
toJS(fileListStore?.setNewFileList)(newFileList); toJS(fileListStore?.setNewFileList)(newFileList);
if (newFileList?.length) {
getFileToken(newFileList);
}
dialogRef.current.handleClose();
}; };
const showDialog = () => { const showDialog = () => {
dialogRef.current.handleClickOpen(); dialogRef.current.handleClickOpen();
initData()
}; };
const initData = ()=>{
setFileList([])
}
useImperativeHandle(props.onRef, () => { useImperativeHandle(props.onRef, () => {
return { return {
showDialog: showDialog, showDialog: showDialog,
...@@ -131,7 +182,7 @@ const UpLoaderFile = observer((props: any) => { ...@@ -131,7 +182,7 @@ const UpLoaderFile = observer((props: any) => {
return ( return (
<span className={style.fileIconBox}> <span className={style.fileIconBox}>
<img className={style.fileIcon} src={fileIcon} alt="" /> <img className={style.fileIcon} src={fileIcon} alt="" />
{item.name} <span className={style.fileIconBoxText}>{item.name}</span>
</span> </span>
); );
}; };
......
...@@ -368,7 +368,7 @@ const ProjectData = observer(() => { ...@@ -368,7 +368,7 @@ const ProjectData = observer(() => {
// table配置 // 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配置 // table配置
...@@ -377,16 +377,16 @@ const ProjectData = observer(() => { ...@@ -377,16 +377,16 @@ const ProjectData = observer(() => {
<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", minWidth: '10px', marginRight: '10px' }}
variant="text" variant="text"
size="small" size="small"
disabled={!isPass("PROJECT_DATA_DOWNLOAD")} disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
> >
下载 下载
</Button> </Button>
)} )}
<Button <Button
sx={{ position: "relative", left: "-18px" }} sx={{ position: "relative", left: "-18px", minWidth: '10px', marginRight: '10px' }}
variant="text" variant="text"
size="small" size="small"
onClick={() => hanleShowMoveFileDialog(item)} onClick={() => hanleShowMoveFileDialog(item)}
...@@ -397,7 +397,7 @@ const ProjectData = observer(() => { ...@@ -397,7 +397,7 @@ const ProjectData = observer(() => {
移动至 移动至
</Button> </Button>
<Button <Button
sx={{ position: "relative", left: "-18px" }} sx={{ position: "relative", left: "-18px", minWidth: '10px', marginRight: '10px' }}
variant="text" variant="text"
size="small" size="small"
color="error" color="error"
...@@ -585,13 +585,16 @@ const ProjectData = observer(() => { ...@@ -585,13 +585,16 @@ const ProjectData = observer(() => {
return ( return (
<span <span
key={index} key={index}
onClick={() => onClick={() =>{
if (index === 1) {
return
}
setPath( setPath(
pathArr.slice(0, index + 1).join("/") === "" pathArr.slice(0, index + 1).join("/") === ""
? "/" ? "/"
: pathArr.slice(0, index + 1).join("/") : pathArr.slice(0, index + 1).join("/")
) )
} }}
className={classnames({ className={classnames({
[style.showPathSpan]: true, [style.showPathSpan]: true,
[style.showPathSpanActive]: index === pathArr.length - 1, [style.showPathSpanActive]: index === pathArr.length - 1,
...@@ -740,7 +743,7 @@ const ProjectData = observer(() => { ...@@ -740,7 +743,7 @@ const ProjectData = observer(() => {
</div> </div>
)} )}
</div> </div>
{selectIds.length > 1 && ( {selectIds.length > 0 && (
<div className={style.projectDataStickyBox}> <div className={style.projectDataStickyBox}>
<Button <Button
color="error" color="error"
...@@ -773,11 +776,9 @@ const ProjectData = observer(() => { ...@@ -773,11 +776,9 @@ const ProjectData = observer(() => {
<DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle> <DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="alert-dialog-description"> <DialogContentText id="alert-dialog-description">
确认要删除“
{currentOperateFile {currentOperateFile
? currentOperateFile.name ? '确认删除该数据吗?'
: selectIds.join("”,“")} : `确认删除这${selectIds.length}条数据吗?`}
”吗?
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
......
...@@ -22,14 +22,25 @@ const AddProject = (props: any) => { ...@@ -22,14 +22,25 @@ const AddProject = (props: any) => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const message = useMessage(); const message = useMessage();
let DialogRef: any = React.createRef(); let DialogRef: any = React.createRef();
const [name, setName] = useState("");
const [nameCheck, setNameCheck] = useState({
error: false,
help: "",
});
const [desc, setDesc] = useState("");
const [descCheck, setDescCheck] = useState({
error: false,
help: "",
});
const [zoneId, setZoneId] = useState("");
const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
const [submitloading, setSubmitloading] = useState(false);
useImperativeHandle(props.onRef, () => { useImperativeHandle(props.onRef, () => {
return { return {
handleClickOpen: handleClickOpen, handleClickOpen: handleClickOpen,
}; };
}); });
const [zoneId, setZoneId] = useState("");
const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
// 设置计算区 // 设置计算区
const { run } = useMyRequest(hpczone, { const { run } = useMyRequest(hpczone, {
onSuccess: (result: any) => { onSuccess: (result: any) => {
...@@ -37,7 +48,6 @@ const AddProject = (props: any) => { ...@@ -37,7 +48,6 @@ const AddProject = (props: any) => {
setZoneId(result[0].id || ""); setZoneId(result[0].id || "");
}, },
}); });
const [submitloading, setSubmitloading] = useState(false);
const { run: addProjectRun } = useMyRequest(addProject, { const { run: addProjectRun } = useMyRequest(addProject, {
onBefore: () => { onBefore: () => {
setSubmitloading(true); setSubmitloading(true);
...@@ -74,18 +84,17 @@ const AddProject = (props: any) => { ...@@ -74,18 +84,17 @@ const AddProject = (props: any) => {
const handleClickOpen = () => { const handleClickOpen = () => {
DialogRef.current.handleClickOpen(); DialogRef.current.handleClickOpen();
initData()
}; };
const [name, setName] = useState(""); const initData = () => {
const [nameCheck, setNameCheck] = useState({ setName('')
error: false, setDesc('')
help: "", if (zoneIdOptions.length > 0) {
}); setZoneId(zoneIdOptions[0].id)
const [desc, setDesc] = useState(""); }
const [descCheck, setDescCheck] = useState({ }
error: false,
help: "",
});
const checkName = (name: string) => { const checkName = (name: string) => {
if (name) { if (name) {
......
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