Skip to content

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

feat : 完成项目列表 新建文件夹联调

parent 7af8ea32
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 128 deletions
src/api/fileserver/CloudEController.ts
View file @ a3f0b7c6
......@@ -16,91 +16,116 @@ let headers: any = {
};
class CloudEController {
// 新建文件夹
static JobFileNewFolder(url: any, filetoken: string, projectId: string) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
url = url += urlToken(filetoken, projectId);
headers["Content-Type"] = "multipart/form-data";
return axios.post(
APIOPTION() + "/createdir" + url,
{},
{
headers: headers,
}
);
}
}
//文件 删除
static JobOutFileDel(urls: any,filetoken: string) {
if (
ApiUtils.getAuthorizationHeaders(headers)
) {
static JobOutFileDel(urls: any, filetoken: string, projectId: string) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
headers["delfilepath"] = Base64.stringify(Utf8.parse(urls));
let url = "";
if (getLoaclStorageOfKey("userinfo")) {
url += urlToken(filetoken);
url += urlToken(filetoken, projectId);
}
axios
.get(APIOPTION() + "/delete/" + url, {
headers: headers,
})
.then(function (response) {
console.log(response)
console.log(response);
})
.catch(function (error) {
console.log(error)
console.log(error);
});
}
}
// 文件列表
static JobOutFileList(
url: any,
showHide = false,
filetoken: string,
projectId: string,
showHide = false,
items?: any
) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
// headers['parentName'] = ''
if (getLoaclStorageOfKey("userinfo")) {
url += urlToken(filetoken);
url += urlToken(filetoken, projectId);
}
axios
// 查看文件的接口为list(可查看隐藏文件)
.get(APIOPTION() + "/list" + url + "&showhidden=" + showHide, {
return axios.get(
APIOPTION() + "/list" + url + "&showhidden=" + showHide,
{
headers: headers,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
);
// axios
// // 查看文件的接口为list(可查看隐藏文件)
// .get(APIOPTION() + "/list" + url + "&showhidden=" + showHide, {
// headers: headers,
// })
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
}
}
// 文件移动
static JobOutFileListMove(url: any, filetoken: string) {
if (
ApiUtils.getAuthorizationHeaders(headers)
) {
static JobOutFileListMove(url: any, filetoken: string, projectId: string) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
if (getLoaclStorageOfKey("userinfo")) {
url += urlToken(filetoken);
url += urlToken(filetoken, projectId);
}
axios
.get(APIOPTION() + "/download" + url, {
headers: headers,
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error);
});
return axios.get(APIOPTION() + "/download" + url, {
headers: headers,
});
// axios
// .get(APIOPTION() + "/download" + url, {
// headers: headers,
// })
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
}
}
// // 全局搜索 文件名
static JobSearchFileList(url: any, base: any, showHide = false, filetoken: string) {
if (
ApiUtils.getAuthorizationHeaders(headers)
) {
static JobSearchFileList(
url: any,
base: any,
filetoken: string,
projectId: string,
showHide = false
) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
if (getLoaclStorageOfKey("userinfo")) {
url = urlToken(filetoken) + "&q=" + url;
url = urlToken(filetoken, projectId) + "&q=" + url;
}
axios
.get(APIOPTION() + "/search" + base + url + "&showhidden=" + showHide, {
headers: headers,
})
.then(function (response) {
console.log(response)
console.log(response);
})
.catch(function (error) {
console.log(error);
......@@ -109,23 +134,29 @@ class CloudEController {
}
// 文件移动
static JobFileMove(url: any, original_filepath: any, value: any, filetoken: string) {
static JobFileMove(
url: any,
original_filepath: any,
value: any,
filetoken: string,
projectId: string
) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
url = url += urlToken(filetoken)
headers['Content-Type'] = 'multipart/form-data';
headers['originalfilepath'] = encodeURIComponent(original_filepath)
let param = new FormData()
param.append('', value)
url = url += urlToken(filetoken, projectId);
headers["Content-Type"] = "multipart/form-data";
headers["originalfilepath"] = encodeURIComponent(original_filepath);
let param = new FormData();
param.append("", value);
axios
.post(APIOPTION() + '/rename' + url, param, {
headers: headers
})
.then(response => {
console.log(response)
.post(APIOPTION() + "/rename" + url, param, {
headers: headers,
})
.catch(error => {
console.log(error)
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
}
}
}
......
src/api/fileserver/raysyncApi.ts
View file @ a3f0b7c6
......@@ -103,33 +103,36 @@ const ZONEID = (params: string) => {
return currentRegion[params || "id"] || "";
};
const urlToken = (filetoken: string, root?: string) => {
const urlToken = (filetoken: string, projectId: string) => {
let token = getLoaclStorageOfKey("token_key").access_token;
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`;
}
return `?username=${projectId}&token=${token}&filetoken=${encodeURIComponent(
filetoken
)}&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 = () => {
......
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ a3f0b7c6
......@@ -4,8 +4,10 @@ import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import CloudEController from "@/api/fileserver/CloudEController";
const AddFolder = (props: any) => {
const { list } = props;
const { list, path, projectId, fileToken } = props;
const Message = useMessage();
let addFolderDialogRef: any = React.createRef();
......@@ -21,7 +23,18 @@ const AddFolder = (props: any) => {
const handleAddSubmit = () => {
if (fileName && !fileNameCheck.error) {
const newFolderPath =
path === "/" ? `${path}${fileName}` : `${path}/${fileName}`;
// 请求接口
CloudEController.JobFileNewFolder(
newFolderPath,
fileToken,
projectId
)?.then((res) => {
console.log(res);
Message.success("新建成功");
addFolderDialogRef.current.handleClose();
});
} else {
Message.info(fileNameCheck.help || "请输入文件夹名称");
}
......
src/views/Project/ProjectData/index.tsx
View file @ a3f0b7c6
import React, { useState, useCallback, useEffect } from "react";
import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css";
import classnames from "classnames";
......@@ -22,6 +22,7 @@ import useMyRequest from "@/hooks/useMyRequest";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store";
import CloudEController from "@/api/fileserver/CloudEController";
import { toJS } from "mobx";
// import TreeView from '@mui/lab/TreeView';
// import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
// import ChevronRightIcon from '@mui/icons-material/ChevronRight';
......@@ -59,10 +60,18 @@ const ProjectData = observer(() => {
const { currentProjectStore } = useStores();
// const [path, setPath] = useState("/ProjectData");
const [path, setPath] = useState("/");
const showPath = useMemo(() => {
if (path === "/") {
return "ProjectData";
}
return `ProjectData${path}`;
}, [path]);
const [activeTab, setActiveTab] = useState(1);
const [keyWord, setKeyWord] = useState("");
const [fileToken, setFileToken] = useState("");
const [list, setList] = useState<any>([]);
const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
onSuccess: (res: any) => {
console.log("res", res);
......@@ -70,17 +79,44 @@ const ProjectData = observer(() => {
},
});
useEffect(() => {
if (fileToken) {
CloudEController.JobOutFileList(path, false, fileToken);
// 老项目测试环境
// https://fileserver.cloudam.cn/list/?username=6c8928fa719940dc964cf17a029b36c5&token=d1b07aa2-0b29-48ca-ad28-bb41af3bcbb1&filetoken=%2FMm%2BLhFrOpEDp0neVeESSD%2F45aY%3D&share=false&showhidden=false
// 新项目本地
// https://fileserver.cloudam.cn/list/?username=8e12a4fdde5549b0aa8b3051ff8c8f04&token=751cd163-fe95-45d0-8f7a-3d0d8b8bb442&filetoken=isZw%2B%2BzeJO3R34BEXTjmmovFOmA%3D&share=false&showhidden=false
// 老项目本地
// https://fileserver.cloudam.cn/list/?username=6c8928fa719940dc964cf17a029b36c5&token=d1b07aa2-0b29-48ca-ad28-bb41af3bcbb1&filetoken=bUt%2Bn0YacgepFClLR4LNR0MxW0w%3D&share=false&showhidden=false
const projectId = useMemo(() => {
return toJS(currentProjectStore.currentProjectInfo.id);
}, [currentProjectStore]);
// useEffect(() => {
// if (fileToken && projectId) {
// CloudEController.JobOutFileList(path, fileToken, projectId, false)?.then(
// (res) => {
// console.log(res);
// setList(res.data);
// }
// );
// }
// }, [fileToken, path, projectId]);
const getList = useCallback(() => {
if (fileToken && projectId) {
return CloudEController.JobOutFileList(
path,
fileToken,
projectId,
false
)?.then((res) => {
console.log(res);
if (Array.isArray(res.data)) {
setList(res.data);
} else {
setList([]);
}
});
}
}, [fileToken, path]);
}, [fileToken, path, projectId]);
useEffect(() => {
getList();
}, [getList]);
const handleRefresh = () => {
getList();
};
useEffect(() => {
getDataFileTokenRun({
......@@ -94,22 +130,6 @@ const ProjectData = observer(() => {
const [selectIds, setSelectIds] = useState([]);
const [list, setList] = useState([
{
id: 123,
name: "name",
type: "directory",
mtime: new Date().getTime(),
},
{
id: 9999,
name: "name2",
type: "file",
size: 6,
mtime: new Date().getTime(),
},
]);
const versionsHeadCells = [
{ id: "checkbox" },
{ id: "name", numeric: false, label: "名称", width: "25%" },
......@@ -123,10 +143,21 @@ const ProjectData = observer(() => {
setSelectIds(e);
};
const handleViewFolders = (item: any) => {
console.log("handleViewFolders");
console.log(item);
setPath(`${path}${item.name}`);
};
const hanleDeleteFile = (item: any) => {};
const renderName = (item: any) => {
if (item.type === "directory") {
return (
<span className={style.folderIconBox}>
<span
className={style.folderIconBox}
onClick={() => handleViewFolders(item)}
>
<img className={style.folderIcon} src={folderIcon} alt="" />
{item.name}
</span>
......@@ -172,6 +203,7 @@ const ProjectData = observer(() => {
variant="text"
size="small"
color="error"
onClick={() => hanleDeleteFile(item)}
>
删除
</Button>
......@@ -246,7 +278,7 @@ const ProjectData = observer(() => {
</div>
</div>
<div className={style.projectDataPathAndTabs}>
<div className={style.projectDataPath}>{path}</div>
<div className={style.projectDataPath}>{showPath}</div>
<div className={style.projectDataTabsAndBtton}>
<div className={style.projectDataTabs}>
<div
......@@ -268,7 +300,11 @@ const ProjectData = observer(() => {
数据集
</div>
</div>
<IconButton aria-label="refreshIcon" size="small">
<IconButton
aria-label="refreshIcon"
size="small"
onClick={handleRefresh}
>
<RefreshIcon />
</IconButton>
</div>
......@@ -280,7 +316,7 @@ const ProjectData = observer(() => {
}}
rowHover={true}
stickyheader={true}
rows={list.map((item) => ({
rows={list.map((item: any) => ({
...item,
name: renderName(item),
size: renderSize(item),
......@@ -319,7 +355,13 @@ const ProjectData = observer(() => {
path={path}
list={list}
></UpLoaderFile>
<AddFolder onRef={addFolderRef} list={list}></AddFolder>
<AddFolder
onRef={addFolderRef}
list={list}
path={path}
fileToken={fileToken}
projectId={projectId}
></AddFolder>
<MoveFile onRef={moveFileRef} list={list}></MoveFile>
</div>
</ThemeProvider>
......
src/views/Project/components/CurrentProject/index.tsx
View file @ a3f0b7c6
......@@ -10,33 +10,35 @@ import AddProject from "../AddProject";
const CurrentProject = observer(() => {
const { currentProjectStore } = useStores();
let addProjectRef: any = React.createRef();
const [open, setOpen] = useState(false);
// let addProjectRef: any = React.createRef();
const [projectListOpen, setProjectListOpen] = useState(false);
const [addProjectOpen, setAddProjectOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
// 结合handleShowProjectList中的event.nativeEvent.stopImmediatePropagation();实现点击空白区域隐藏项目列表
useEffect(()=>{
document.addEventListener('click', (e) => {
setOpen(false)
})
}, [])
useEffect(() => {
document.addEventListener("click", (e) => {
setProjectListOpen(false);
});
}, []);
const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
event.nativeEvent.stopImmediatePropagation();
setAnchorEl(event.currentTarget);
setOpen((previousOpen) => !previousOpen);
setProjectListOpen((previousOpen) => !previousOpen);
};
const canBeOpen = open && Boolean(anchorEl);
const canBeOpen = projectListOpen && Boolean(anchorEl);
const id = canBeOpen ? "spring-popper" : undefined;
const handleChangeCurrentProject = (project: any) => {
currentProjectStore.changeProject(project);
setOpen(!open);
setProjectListOpen(!projectListOpen);
};
const openAddProject = () => {
addProjectRef.current.handleClickOpen()
setOpen(false)
}
// addProjectRef.current.handleClickOpen();
setAddProjectOpen(true);
setProjectListOpen(false);
};
return (
<div>
......@@ -59,10 +61,10 @@ const CurrentProject = observer(() => {
style={{ fontSize: 12 }}
/>
</div>
<AddProject onRef={addProjectRef} />
<AddProject open={addProjectOpen} />
<Popper
id={id}
open={open}
open={projectListOpen}
anchorEl={anchorEl}
placement="right-start"
transition
......
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