Skip to content

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

feat: 数据管理新建文件夹重构

parent 3dc486a5
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 143 deletions
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ c9c0d6b8
import React, { useState, useImperativeHandle } from "react";
import React, { useState, useEffect } from "react";
import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog";
import { TextField, Button } from "@mui/material";
import MyDialog from "@/components/mui/Dialog";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import CloudEController from "@/api/fileserver/CloudEController";
import InputAdornment from '@mui/material/InputAdornment';
import usePass from "@/hooks/usePass";
import InputAdornment from "@mui/material/InputAdornment";
const AddFolder = (props: any) => {
const { list, path, projectId, fileToken, refresh } = props;
const Message = useMessage();
let addFolderDialogRef: any = React.createRef();
const [fileName, setFileName] = useState("");
const [fileNameCheck, setFileNameCheck] = useState({
error: false,
help: "",
});
const showDialog = () => {
addFolderDialogRef.current.handleClickOpen();
initData()
};
type IAddFolderProps = {
list: Array<any>;
path: string;
projectId: string;
fileToken: string;
refresh: any;
selectIds: Array<any>;
};
const initData = () => {
setFileName('')
setFileNameCheck({
error: false,
help: "",
})
}
const AddFolder = (props: IAddFolderProps) => {
const { list, path, projectId, fileToken, refresh, selectIds } = props;
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const isPass = usePass();
const Message = useMessage();
const [fileName, setFileName] = useState("");
const [fileNameCheck, setFileNameCheck] = useState({
error: false,
help: "",
});
useImperativeHandle(props.onRef, () => {
return {
showDialog: showDialog,
};
});
useEffect(() => {
if (deleteDialogOpen) {
setFileName("");
setFileNameCheck({
error: false,
help: "",
});
}
}, [deleteDialogOpen]);
const handleAddSubmit = () => {
if (fileName && !fileNameCheck.error) {
const newFolderPath =
path === "/" ? `${path}${fileName}` : `${path}/${fileName}`;
// 请求接口
CloudEController.JobFileNewFolder(
newFolderPath,
fileToken,
projectId
)?.then((res) => {
Message.success("新建成功");
addFolderDialogRef.current.handleClose();
refresh()
});
} else {
Message.info(fileNameCheck.help || "请输入文件夹名称");
}
};
const handleAddSubmit = () => {
if (fileName && !fileNameCheck.error) {
const newFolderPath =
path === "/" ? `${path}${fileName}` : `${path}/${fileName}`;
// 请求接口
CloudEController.JobFileNewFolder(
newFolderPath,
fileToken,
projectId
)?.then((res) => {
Message.success("新建成功");
setDeleteDialogOpen(false);
refresh();
});
} else {
Message.info(fileNameCheck.help || "请输入文件夹名称");
}
};
const addFolderSubmitloading = false;
const handleFileNameChange = (e: any) => {
const fileName = e.target.value;
setFileName(fileName);
if (!fileName) {
setFileNameCheck({
error: true,
help: "文件夹名称不能为空",
});
} else if (!checkIsNumberLetterChinese(fileName) || fileName.length > 30) {
setFileNameCheck({
error: true,
help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
});
} else if (isRepeat(fileName)) {
setFileNameCheck({
error: true,
help: "已存在同名文件夹",
});
} else {
setFileNameCheck({
error: false,
help: "",
});
}
};
const handleFileNameChange = (e: any) => {
const fileName = e.target.value;
setFileName(fileName);
if (!fileName) {
setFileNameCheck({
error: true,
help: "文件夹名称不能为空",
});
} else if (!checkIsNumberLetterChinese(fileName) || fileName.length > 30) {
setFileNameCheck({
error: true,
help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
});
} else if (isRepeat(fileName)) {
setFileNameCheck({
error: true,
help: "已存在同名文件夹",
});
} else {
setFileNameCheck({
error: false,
help: "",
});
}
};
const isRepeat = (fileName: string) => {
return list.some((item: any) => {
return item.name === fileName;
});
};
const isRepeat = (fileName: string) => {
return list.some((item: any) => {
return item.name === fileName;
});
};
return (
<MyDialog
handleSubmit={handleAddSubmit}
onRef={addFolderDialogRef}
title="新建文件夹"
submitloading={addFolderSubmitloading}
>
<TextField
sx={{
width: "388px",
border: "1px solide #E6E8EB",
marginTop: "12px",
}}
required
error={fileNameCheck.error}
id="fileName"
label="名称"
variant="outlined"
value={fileName}
onChange={handleFileNameChange}
helperText={fileNameCheck.help}
InputProps={{
endAdornment: <InputAdornment position="end">{fileName.length}/30</InputAdornment>,
}}
size="small"
/>
</MyDialog>
);
return (
<>
<Button
color="neutral"
variant="outlined"
size="small"
onClick={() => setDeleteDialogOpen(true)}
disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
}
>
新建文件夹
</Button>
<MyDialog
open={deleteDialogOpen}
onClose={() => setDeleteDialogOpen(false)}
onConfirm={handleAddSubmit}
title="新建文件夹"
>
<TextField
sx={{
width: "388px",
border: "1px solide #E6E8EB",
marginTop: "12px",
}}
required
error={fileNameCheck.error}
id="fileName"
label="名称"
variant="outlined"
value={fileName}
onChange={handleFileNameChange}
helperText={fileNameCheck.help}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{fileName.length}/30
</InputAdornment>
),
}}
size="small"
/>
</MyDialog>
</>
);
};
export default AddFolder;
src/views/Project/ProjectData/index.module.css
View file @ c9c0d6b8
......@@ -37,6 +37,12 @@
font-weight: 600;
}
.projectDataTabsAndBtton {
display: flex;
justify-content: flex-end;
align-items: center;
}
.folderIconBox {
display: flex;
justify-content: flex-start;
......
src/views/Project/ProjectData/index.tsx
View file @ c9c0d6b8
......@@ -60,14 +60,12 @@ const ProjectData = observer(() => {
/** 路由信息 */
const location = useLocation();
// 当前文件路径
const [path, setPath] = useState<String>("/");
const [tableLoadding, setTableLoadding] = useState(false);
const [path, setPath] = useState<string>("/");
// 防止用户连续点击文件夹造成路径显示错误
const [debounce, setDebounce] = useState(false);
// 点击操作列中的按钮 会设置当前点击的文件
const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
// 文件file 数据集dataset
// const [activeTab, setActiveTab] = useState(1);
const [activeTab, setActiveTab] = useState("file");
// 复选框选中的文件名称数组
const [selectIds, setSelectIds] = useState<Array<string>>([]);
......@@ -188,14 +186,12 @@ const ProjectData = observer(() => {
return;
} else if (fileToken && projectId) {
if (fileServerEndPoint) {
setTableLoadding(true);
return CloudEController.JobOutFileList(
path,
fileToken,
projectId,
false
)?.then((res) => {
setTableLoadding(false);
if (Array.isArray(res.data)) {
setList(res.data);
} else {
......@@ -219,7 +215,6 @@ const ProjectData = observer(() => {
getList();
} else {
if (fileToken && projectId) {
setTableLoadding(true);
setPath("/");
return CloudEController.JobSearchFileList(
keyWord,
......@@ -228,7 +223,6 @@ const ProjectData = observer(() => {
projectId,
false
)?.then((res) => {
setTableLoadding(false);
if (Array.isArray(res.data)) {
setList(res.data);
} else {
......@@ -273,7 +267,6 @@ const ProjectData = observer(() => {
}
};
// todo name sort
// table配置
const versionsHeadCells = useMemo(() => {
if (showCheckBox) {
......@@ -441,13 +434,6 @@ const ProjectData = observer(() => {
UpLoaderFileRef.current.showDialog();
};
// 新增文件
let addFolderRef: any = React.createRef();
const hanleShowAddFolderDialog = () => {
addFolderRef.current.showDialog();
};
// 下载文件
const hanleDownloadFile = (item: any) => {
const downloadPath =
......@@ -577,18 +563,14 @@ const ProjectData = observer(() => {
>
上传文件
</Button>
<Button
color="neutral"
variant="outlined"
size="small"
onClick={hanleShowAddFolderDialog}
disabled={
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_ADDDIR", "USER")
}
>
新建文件夹
</Button>
<AddFolder
selectIds={selectIds}
list={allList}
path={path}
refresh={handleRefresh}
fileToken={fileToken as string}
projectId={projectId as string}
></AddFolder>
</div>
<div className={style.projectDataSearch}>
<InputBase
......@@ -631,6 +613,7 @@ const ProjectData = observer(() => {
size="small"
onClick={handleRefresh}
disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
sx={{ marginLeft: "17px" }}
>
<RefreshIcon />
</IconButton>
......@@ -643,7 +626,6 @@ const ProjectData = observer(() => {
onRef={tableRef}
nopadding={true}
stickyheader={true}
load={tableLoadding}
initSelected={selectIds}
headCells={versionsHeadCells}
rowsPerPage={"99"}
......@@ -704,14 +686,6 @@ const ProjectData = observer(() => {
path={path}
list={allList}
></UpLoaderFile>
<AddFolder
onRef={addFolderRef}
list={allList}
path={path}
refresh={handleRefresh}
fileToken={fileToken}
projectId={projectId}
></AddFolder>
<MoveFile
onRef={moveFileRef}
path={path}
......
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