Skip to content

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

feat: 上传文件弹窗重构

parent 829ec90b
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 256 deletions
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ ef0601fd
import React, { import React, { useState, useCallback, useMemo, useEffect } from "react";
useState,
useImperativeHandle,
useCallback,
useMemo,
} from "react";
import style from "./index.module.css"; import style from "./index.module.css";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/Dialog";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { uuid } from "@/utils/util"; import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
...@@ -24,259 +19,249 @@ import useGlobalStore from "@/hooks/useGlobalStore"; ...@@ -24,259 +19,249 @@ import useGlobalStore from "@/hooks/useGlobalStore";
import { APIOPTION, urlToken } from "@/api/fileserver/raysyncApi"; import { APIOPTION, urlToken } from "@/api/fileserver/raysyncApi";
import UseTusUpload from "@/utils/Upload/tusUpload"; import UseTusUpload from "@/utils/Upload/tusUpload";
const UpLoaderFile = observer((props: any) => { type IMoveFileProps = {
const { fileListStore } = useStores(); uploaderDialogOpen: any;
const message = useMessage(); setUploaderDialogOpen: any;
path: string;
list: Array<any>;
};
const [fileList, setFileList] = useState<any>([]); const UpLoaderFile = observer((props: IMoveFileProps) => {
// list 是项目数据table的数据 const { path, list, uploaderDialogOpen, setUploaderDialogOpen } = props;
const { path, list } = props; const { fileListStore } = useStores();
const message = useMessage();
// 集合当前路径下的文件、文件夹、数据集 和已选择要上传的文件列表 const [fileList, setFileList] = useState<any>([]);
const nowNameList = useMemo(() => { // list 是项目数据table的数据
return [...list, ...fileList];
}, [list, fileList]);
const currentProjectStore = toJS(useGlobalStore("currentProjectStore")); // 集合当前路径下的文件、文件夹、数据集 和已选择要上传的文件列表
const uploadInfoStore = toJS(useGlobalStore("fileListStore")); const nowNameList = useMemo(() => {
const { uploadFile } = UseTusUpload(uploadInfoStore); return [...list, ...fileList];
}, [list, fileList]);
const onDrop = useCallback( const currentProjectStore = toJS(useGlobalStore("currentProjectStore"));
(acceptedFiles: any) => { const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
// 获取重复的项目文件列表和要上传（名称不重复就上传）的文件 const { uploadFile } = UseTusUpload(uploadInfoStore);
const getRepeatFileAndGetUploderFileList = (
acceptedFiles: Array<any>
) => {
let repeatFileList: any = [];
let uploderFileList: any = [];
acceptedFiles.forEach((fItem: any, index: number) => {
if (
nowNameList.some((nItem: any) => {
return nItem.name === fItem.name;
})
) {
repeatFileList.push(acceptedFiles[index]);
} else {
uploderFileList.push(acceptedFiles[index]);
}
});
return {
repeatFileList,
uploderFileList,
};
};
const repeatAndUploaderFileList =
getRepeatFileAndGetUploderFileList(acceptedFiles);
if (repeatAndUploaderFileList.repeatFileList.length > 0) {
message.error(
`“${repeatAndUploaderFileList.repeatFileList
.map((i: any) => i.name)
.join("、")}”文件已存在`
);
}
// 插入新的文件列表 const onDrop = useCallback(
const popLength = 10 - fileList.length; (acceptedFiles: any) => {
if ( // 获取重复的项目文件列表和要上传（名称不重复就上传）的文件
fileList.length + repeatAndUploaderFileList.uploderFileList.length > const getRepeatFileAndGetUploderFileList = (
10 acceptedFiles: Array<any>
) { ) => {
message.error("最大支持同时上传10个文件"); let repeatFileList: any = [];
} let uploderFileList: any = [];
let newFileList = [ acceptedFiles.forEach((fItem: any, index: number) => {
...repeatAndUploaderFileList.uploderFileList.slice(0, popLength), if (
...fileList, nowNameList.some((nItem: any) => {
]; return nItem.name === fItem.name;
setFileList(newFileList); })
}, ) {
[fileList, message, nowNameList] repeatFileList.push(acceptedFiles[index]);
); } else {
uploderFileList.push(acceptedFiles[index]);
}
});
return {
repeatFileList,
uploderFileList,
};
};
const repeatAndUploaderFileList =
getRepeatFileAndGetUploderFileList(acceptedFiles);
if (repeatAndUploaderFileList.repeatFileList.length > 0) {
message.error(
`“${repeatAndUploaderFileList.repeatFileList
.map((i: any) => i.name)
.join("、")}”文件已存在`
);
}
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); // 插入新的文件列表
const popLength = 10 - fileList.length;
if (
fileList.length + repeatAndUploaderFileList.uploderFileList.length >
10
) {
message.error("最大支持同时上传10个文件");
}
let newFileList = [
...repeatAndUploaderFileList.uploderFileList.slice(0, popLength),
...fileList,
];
setFileList(newFileList);
},
[fileList, message, nowNameList]
);
const submitloading = false; const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
let dialogRef: any = React.createRef(); const getFileToken = useCallback(
(newFileList: any) => {
let url =
APIOPTION() +
"/parallelupload/" +
urlToken(
currentProjectStore?.currentProjectInfo?.filetoken || "",
currentProjectStore?.currentProjectInfo?.id as string
);
const getFileToken = useCallback( newFileList?.forEach((item: any) => {
(newFileList: any) => { uploadFile(
let url = item,
APIOPTION() + item?.file,
"/parallelupload/" + url,
urlToken( currentProjectStore?.currentProjectInfo?.filetoken || "",
currentProjectStore?.currentProjectInfo?.filetoken || "", `${path}/${item?.file?.name}`
currentProjectStore?.currentProjectInfo?.id as string );
); });
},
[
currentProjectStore?.currentProjectInfo?.filetoken,
currentProjectStore?.currentProjectInfo?.id,
path,
uploadFile,
]
);
newFileList?.forEach((item: any) => { const handleSubmit = () => {
uploadFile( const newFileList =
item, fileList?.map((item: any) => {
item?.file, return {
url, id: uuid(),
currentProjectStore?.currentProjectInfo?.filetoken || "", path,
`${path}/${item?.file?.name}` list: [],
); file: item,
}); };
}, }) || [];
[ toJS(fileListStore?.setNewFileList)(newFileList);
currentProjectStore?.currentProjectInfo?.filetoken, if (newFileList?.length) {
currentProjectStore?.currentProjectInfo?.id, getFileToken(newFileList);
path, }
uploadFile, setUploaderDialogOpen(false);
] };
);
const handleSubmit = () => { useEffect(() => {
const newFileList = if (uploaderDialogOpen) {
fileList?.map((item: any) => { setFileList([]);
return { }
id: uuid(), }, [uploaderDialogOpen]);
path,
list: [],
file: item,
};
}) || [];
toJS(fileListStore?.setNewFileList)(newFileList);
if (newFileList?.length) {
getFileToken(newFileList);
}
dialogRef.current.handleClose();
};
const showDialog = () => { const fileListHeadCells = [
dialogRef.current.handleClickOpen(); { id: "name", numeric: false, label: "名称", width: "60%" },
initData(); { id: "size", numeric: false, label: "大小", width: "25%" },
}; { id: "caozuo", numeric: false, label: "操作", width: "15%" },
];
const initData = () => { const renderName = (item: any) => {
setFileList([]); return (
}; <span className={style.fileIconBox}>
<img className={style.fileIcon} src={fileIcon} alt="" />
<span className={style.fileIconBoxText}>{item.name}</span>
</span>
);
};
const renderSize = (item: any) => {
return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>;
};
useImperativeHandle(props.onRef, () => { const handleRowDelete = (index: number) => {
return { fileList.splice(index, 1);
showDialog: showDialog, setFileList([...fileList]);
}; };
});
const fileListHeadCells = [ const renderButtons = (item: any, index: number) => {
{ id: "name", numeric: false, label: "名称", width: "60%" }, return (
{ id: "size", numeric: false, label: "大小", width: "25%" }, <span>
{ id: "caozuo", numeric: false, label: "操作", width: "15%" }, <Button
]; sx={{ position: "relative", left: "-18px" }}
variant="text"
size="small"
color="error"
onClick={() => handleRowDelete(index)}
>
删除
</Button>
</span>
);
};
const renderName = (item: any) => { return (
return ( <MyDialog
<span className={style.fileIconBox}> title="上传文件"
<img className={style.fileIcon} src={fileIcon} alt="" /> okText="开始上传"
<span className={style.fileIconBoxText}>{item.name}</span> showCancel={false}
</span> open={uploaderDialogOpen}
); onClose={() => setUploaderDialogOpen(false)}
}; onConfirm={handleSubmit}
// 1,048,576 >
const renderSize = (item: any) => { <div className={style.uploderBox}>
return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>; <div className={style.uploderBoxLeft}>
}; <div className={style.dropTitle}>添加文件</div>
<div
const handleRowDelete = (index: number) => { {...getRootProps()}
fileList.splice(index, 1); className={classnames({
setFileList([...fileList]); [style.dropBox]: true,
}; [style.dropBoxDragActive]: isDragActive,
})}
const renderButtons = (item: any, index: number) => { >
return ( <input {...getInputProps()} multiple />
<span> <img className={style.uploaderIcon} src={uploaderIcon} alt="" />
<Button <div className={style.uploderText1}>
sx={{ position: "relative", left: "-18px" }} 点击添加文件或将文件拖到此处添加
variant="text" </div>
size="small" <div className={style.uploderText2}>一次最多添加10个文件</div>
color="error" </div>
onClick={() => handleRowDelete(index)} </div>
> <div className={style.fileListBox}>
删除 <div className={style.dropTitle}>
</Button> 已添加文件
</span> <span
); className={classnames({
}; [style.red]: fileList.length >= 10,
})}
return ( >
<MyDialog （{fileList.length}/10）
handleSubmit={handleSubmit} </span>
onRef={dialogRef} </div>
title="上传文件" <div className={style.tableBox}>
submitloading={submitloading} <Table
submitText="开始上传" rowHover={true}
showCloseButton={false} stickyheader={true}
> rows={fileList.map((item: any, index: number) => ({
<div className={style.uploderBox}> ...item,
<div className={style.uploderBoxLeft}> name: renderName(item),
<div className={style.dropTitle}>添加文件</div> size: renderSize(item),
caozuo: renderButtons(item, index),
{/* <div {...getRootProps()} className={style.dropBox}> */} }))}
<div rowsPerPage={"99"}
{...getRootProps()} headCells={fileListHeadCells}
className={classnames({ nopadding={true}
[style.dropBox]: true, footer={false}
[style.dropBoxDragActive]: isDragActive, headTableCellStyle={{
})} fontSize: "12px",
> lineHeight: "20px",
{/* isDragActive */} color: "#8A9099",
<input {...getInputProps()} multiple /> }}
<img className={style.uploaderIcon} src={uploaderIcon} alt="" /> tableBoySx={{
<div className={style.uploderText1}> backgroundColor:
点击添加文件或将文件拖到此处添加 fileList.length >= 10 ? "rgba(255, 0, 0, 0.6)" : "",
</div> }}
<div className={style.uploderText2}>一次最多添加10个文件</div> tableContainerStyle={{
</div> maxHeight: "300px",
</div> }}
<div className={style.fileListBox}> ></Table>
<div className={style.dropTitle}> </div>
已添加文件 {fileList.length === 0 && (
<span <div className={style.noFile}>
className={classnames({ <img className={style.noFileIcon} src={noFile} alt="" />
[style.red]: fileList.length >= 10, <span className={style.noFileText}>暂无添加文件</span>
})} </div>
> )}
（{fileList.length}/10） </div>
</span> </div>
</div> </MyDialog>
<div className={style.tableBox}> );
<Table
rowHover={true}
stickyheader={true}
rows={fileList.map((item: any, index: number) => ({
...item,
name: renderName(item),
size: renderSize(item),
caozuo: renderButtons(item, index),
}))}
rowsPerPage={"99"}
headCells={fileListHeadCells}
nopadding={true}
footer={false}
headTableCellStyle={{
fontSize: "12px",
lineHeight: "20px",
color: "#8A9099",
}}
tableBoySx={{
backgroundColor:
fileList.length >= 10 ? "rgba(255, 0, 0, 0.6)" : "",
}}
tableContainerStyle={{
maxHeight: "300px",
}}
></Table>
</div>
{fileList.length === 0 && (
<div className={style.noFile}>
<img className={style.noFileIcon} src={noFile} alt="" />
<span className={style.noFileText}>暂无添加文件</span>
</div>
)}
</div>
</div>
</MyDialog>
);
}); });
export default UpLoaderFile; export default UpLoaderFile;
src/views/Project/ProjectData/index.tsx
View file @ ef0601fd
...@@ -83,6 +83,7 @@ const ProjectData = observer(() => { ...@@ -83,6 +83,7 @@ const ProjectData = observer(() => {
const [moveDialogOpen, setMoveDialogOpen] = useState(false); const [moveDialogOpen, setMoveDialogOpen] = useState(false);
// 文件删除弹窗控制 // 文件删除弹窗控制
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [uploaderDialogOpen, setUploaderDialogOpen] = useState(false);
useEffect(() => { useEffect(() => {
const locationInfo: any = location?.state; const locationInfo: any = location?.state;
...@@ -432,12 +433,6 @@ const ProjectData = observer(() => { ...@@ -432,12 +433,6 @@ const ProjectData = observer(() => {
); );
}; };
// 文件上传
let UpLoaderFileRef: any = React.createRef();
const hanleShowUpLoaderFileDialog = () => {
UpLoaderFileRef.current.showDialog();
};
// 下载文件 // 下载文件
const hanleDownloadFile = (item: any) => { const hanleDownloadFile = (item: any) => {
const downloadPath = const downloadPath =
...@@ -556,7 +551,7 @@ const ProjectData = observer(() => { ...@@ -556,7 +551,7 @@ const ProjectData = observer(() => {
variant="contained" variant="contained"
size="small" size="small"
style={{ marginRight: "12px" }} style={{ marginRight: "12px" }}
onClick={hanleShowUpLoaderFileDialog} onClick={() => setUploaderDialogOpen(true)}
disabled={ disabled={
selectIds.length !== 0 || selectIds.length !== 0 ||
!isPass("PROJECT_DATA_UPLOAD", "USER") !isPass("PROJECT_DATA_UPLOAD", "USER")
...@@ -685,11 +680,14 @@ const ProjectData = observer(() => { ...@@ -685,11 +680,14 @@ const ProjectData = observer(() => {
showList={showList} showList={showList}
></DeleteDialog> ></DeleteDialog>
)} )}
<UpLoaderFile {uploaderDialogOpen && (
onRef={UpLoaderFileRef} <UpLoaderFile
path={path} uploaderDialogOpen={uploaderDialogOpen}
list={allList} setUploaderDialogOpen={setUploaderDialogOpen}
></UpLoaderFile> path={path}
list={allList}
></UpLoaderFile>
)}
{moveDialogOpen && ( {moveDialogOpen && (
<MoveFile <MoveFile
moveDialogOpen={moveDialogOpen} moveDialogOpen={moveDialogOpen}
......
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