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