Skip to content

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

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

Feat 20220608 projectdata

See merge request !34
parents 0aaeb735 126e0a9c
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 85 deletions
package-lock.json
View file @ 983a53c1
......@@ -11838,7 +11838,7 @@
},
"webpack-dev-server": {
"version": "4.9.0",
"resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
"integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==",
"requires": {
"@types/bonjour": "^3.5.9",
......
src/components/mui/MyTreeView.tsx
View file @ 983a53c1
......@@ -10,7 +10,6 @@ interface TreeItemType {
}
type MyTreeViewProps = {
// treeData: RenderTree;
treeData: Array<TreeItemType>;
onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
......@@ -55,20 +54,6 @@ const MyTreeView = (props: MyTreeViewProps) => {
</TreeItem>
);
// const renderTreeArray = (node: TreeItemType, index: number) => {
// return (
// <TreeItem
// key={node.id || `${node.name}${index}`}
// nodeId={String(node.id)}
// label={renderLabel === undefined ? node.name : renderLabel(node.name)}
// >
// {Array.isArray(node.subdirs)
// ? node.subdirs.map((nodeLi: any, i) => renderTreeArray(nodeLi, i))
// : null}
// </TreeItem>
// );
// };
return (
<TreeView
defaultCollapseIcon={<ArrowRightIcon />}
......@@ -79,14 +64,9 @@ const MyTreeView = (props: MyTreeViewProps) => {
defaultExpanded={defaultExpanded}
sx={{ ...treeViewSx }}
>
{treeData.length === 0 ? (
<div>暂无数据</div>
) : (
treeData.map((treeItem, index) => {
// return renderTreeArray(treeItem, index);
return renderTreeObj(treeItem, index);
})
)}
{treeData.map((treeItem, index) => {
return renderTreeObj(treeItem, index);
})}
</TreeView>
);
};
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ 983a53c1
......@@ -135,7 +135,7 @@ const MoveFile = (props: any) => {
currentOperateFile.name
}`;
if (oldPath === newPath) {
Message.info("当前目录和目标目录一致，请重新选择目标目录");
Message.info("指定的目标路径为数据原路径，无需移动。");
return;
}
CloudEController.JobFileMove(
......
src/views/Project/ProjectData/index.module.css
View file @ 983a53c1
......@@ -3,6 +3,7 @@
}
.projectDataStickyTop {
padding: 28px 24px;
position: relative;
}
.projectDataTitle {
font-size: 18px;
......@@ -73,6 +74,10 @@
align-items: center;
}
.folderPointer{
cursor: pointer;
}
.folderIcon {
margin-right: 12px;
}
......@@ -111,4 +116,21 @@
}
.showPathSpanActive{
color: #1370FF;
}
.noDataBox{
background-color: #fff;
height: calc(100vh - 377px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
top: -53px;
}
.noDataText{
margin-top: 8px;
font-size: 14px;
line-height: 22px;
color: #8A9099;
}
\ No newline at end of file
src/views/Project/ProjectData/index.tsx
View file @ 983a53c1
......@@ -2,18 +2,16 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css";
import classnames from "classnames";
import { Button, InputBase, IconButton, TextField } from "@mui/material";
import { Button, InputBase, IconButton } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import SearchIcon from "@mui/icons-material/Search";
import RefreshIcon from "@mui/icons-material/Refresh";
import Table from "@/components/Material.Ui/Table";
import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import noFile from "@/assets/project/noFile.svg";
import MyDialog from "@/components/mui/MyDialog";
import { useMessage } from "@/components/MySnackbar";
import { getDataFileToken } from "@/api/project_api";
import AddFolder from "./AddFolder";
......@@ -69,6 +67,8 @@ const ProjectData = observer(() => {
return toJS(currentProjectStore.currentProjectInfo.id);
}, [currentProjectStore]);
const [tableLoadding, setTableLoadding] = useState(false);
// 防止用户连续点击文件夹造成路径显示错误
const [debounce, setDebounce] = useState(false)
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
const [deleteloading, setDeleteloading] = useState(false);
......@@ -79,6 +79,13 @@ const ProjectData = observer(() => {
useEffect(() => {
setSelectIds([]);
}, [activeTab]);
const handleChangeListType = (e: number) => {
if (isPass('PROJECT_DATA_TYPECHANAGE')) {
setActiveTab(e)
setSelectIds([]);
tableRef?.current?.initSelectedFunc([]);
}
}
const [keyWord, setKeyWord] = useState("");
const [fileToken, setFileToken] = useState("");
......@@ -114,16 +121,11 @@ const ProjectData = observer(() => {
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false)
tableRef?.current?.initSelectedFunc([]);
},
});
// useEffect(() => {
// if (activeTab === 2) {
// getDataFileSearchRun()
// }
// }, [activeTab, getDataFileSearchRun]);
const { run: getDataFindRun } = useMyRequest(getDataFind, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
......@@ -134,6 +136,7 @@ const ProjectData = observer(() => {
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false)
tableRef?.current?.initSelectedFunc([]);
},
});
......@@ -182,6 +185,7 @@ const ProjectData = observer(() => {
setList([]);
}
setSelectIds([]);
setDebounce(false)
});
}
}, [fileToken, path, projectId, keyWord]);
......@@ -212,20 +216,23 @@ const ProjectData = observer(() => {
setList([]);
}
setSelectIds([]);
setDebounce(false)
});
}
}
}, [fileToken, projectId, keyWord, getList]);
const handleRefresh = () => {
tableRef?.current?.initSelectedFunc([]);
setSelectIds([]);
if (keyWord) {
searchFileList();
getDataSetListSearch();
} else {
getList();
getDataSetList();
if (isPass('PROJECT_DATA_REFRESH', 'USER')) {
tableRef?.current?.initSelectedFunc([]);
setSelectIds([]);
if (keyWord) {
searchFileList();
getDataSetListSearch();
} else {
getList();
getDataSetList();
}
}
};
......@@ -249,26 +256,33 @@ const ProjectData = observer(() => {
}
};
// todo name sort
const versionsHeadCells = [
{ id: "checkbox" },
{ id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%" },
{ id: "mtime", numeric: false, label: "创建时间", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
{ id: "mtime", numeric: false, label: "创建时间", width: "25%", sort: true },
{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
];
const hanldeCheckbox = (e: any) => {
console.log(e);
setSelectIds(e);
const selectarr = e.map((item: any) => {
let andIndex = item.indexOf("&index=")
return item.slice(5, andIndex)
})
setSelectIds(selectarr);
};
const handleViewFolders = (item: any) => {
console.log("handleViewFolders");
console.log(item);
if (path === "/") {
setPath(`/${item.name}`);
if (debounce) {
return
} else {
setPath(`${path}/${item.name}`);
setDebounce(true)
if (path === "/") {
setPath(`/${item.name}`);
} else {
setPath(`${path}/${item.name}`);
}
}
};
......@@ -281,7 +295,10 @@ const ProjectData = observer(() => {
if (item.type === "directory") {
return (
<span
className={style.folderIconBox}
className={classnames({
[style.folderIconBox]: true,
[style.folderPointer]: true,
})}
onClick={() => handleViewFolders(item)}
>
<img className={style.folderIcon} src={folderIcon} alt="" />
......@@ -307,33 +324,34 @@ const ProjectData = observer(() => {
const renderSize = (item: any) => {
if (item.type === "dataSet") {
return <span>{item.size}条</span>;
return `${item.size}条`;
}
return <span>{item.size ? `${item.size}b` : "-"}</span>;
return `${item.size ? String((Number(item.size)/1048576).toFixed(2)) + 'MB' : '-'}`;
};
const renderMtime = (item: any) => {
return (
// <span>{moment(new Date(item.mtime)).format("YYYY-MM-DD hh:mm:ss")}</span>
<span>{moment(item.mtime).format("YYYY-MM-DD hh:mm:ss")}</span>
);
return String(moment(item.mtime).format("YYYY-MM-DD hh:mm:ss"))
};
const renderButtons = (item: any) => {
return (
<span>
<Button
sx={{ position: "relative", left: "-18px" }}
variant="text"
size="small"
>
下载
</Button>
{item.type !== 'dataSet' && item.type !== 'directory' && (
<Button
sx={{ position: "relative", left: "-18px", }}
variant="text"
size="small"
disabled={!isPass("PROJECT_DATA_DOWNLOAD")}
>
下载
</Button>
)}
<Button
sx={{ position: "relative", left: "-18px" }}
variant="text"
size="small"
onClick={() => hanleShowMoveFileDialog(item)}
disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_MOVE", 'USER')}
>
移动至
</Button>
......@@ -343,6 +361,7 @@ const ProjectData = observer(() => {
size="small"
color="error"
onClick={() => hanleDeleteFile(item)}
disabled={selectIds.length > 0 && !isPass("PROJECT_DATA_DELETE", 'USER')}
>
删除
</Button>
......@@ -364,7 +383,6 @@ const ProjectData = observer(() => {
let moveFileRef: any = React.createRef();
const hanleShowMoveFileDialog = (item: any) => {
console.log(item);
setCurrentOperateFile(item);
moveFileRef.current.showDialog();
};
......@@ -557,10 +575,9 @@ const ProjectData = observer(() => {
style={{ marginRight: "12px" }}
onClick={hanleShowUpLoaderFileDialog}
disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD")
selectIds.length !== 0 || !isPass("PROJECT_DATA_UPLOAD", 'USER')
}
>
{/* todo 项目权限 */}
上传文件
</Button>
<Button
......@@ -569,10 +586,9 @@ const ProjectData = observer(() => {
size="small"
onClick={hanleShowAddFolderDialog}
disabled={
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR")
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", 'USER')
}
>
{/* todo 项目权限 */}
新建文件夹
</Button>
</div>
......@@ -610,7 +626,8 @@ const ProjectData = observer(() => {
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab === 1,
})}
onClick={() => setActiveTab(1)}
// onClick={() => setActiveTab(1)}
onClick={() => handleChangeListType(1)}
>
文件
</div>
......@@ -619,7 +636,8 @@ const ProjectData = observer(() => {
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab !== 1,
})}
onClick={() => setActiveTab(2)}
// onClick={() => setActiveTab(2)}
onClick={() => handleChangeListType(2)}
>
数据集
</div>
......@@ -628,6 +646,7 @@ const ProjectData = observer(() => {
aria-label="refreshIcon"
size="small"
onClick={handleRefresh}
disabled={!isPass('PROJECT_DATA_REFRESH', 'USER')}
>
<RefreshIcon />
</IconButton>
......@@ -635,28 +654,32 @@ const ProjectData = observer(() => {
</div>
</div>
<Table
footer={false}
rowHover={true}
onRef={tableRef}
nopadding={true}
stickyheader={true}
load={tableLoadding}
initSelected={selectIds}
headCells={versionsHeadCells}
checkboxData={(e: any) => {
hanldeCheckbox(e);
}}
// param="name"
rowHover={true}
stickyheader={true}
rows={showList.map((item: any) => ({
rows={showList.map((item: any, index: number) => ({
...item,
id: item.name,
id: `name=${item.name}&index=${index}`,
name: renderName(item),
size: renderSize(item),
mtime: renderMtime(item),
caozuo: renderButtons(item),
}))}
load={tableLoadding}
// rowsPerPage={"99"}
headCells={versionsHeadCells}
nopadding={true}
footer={false}
initSelected={selectIds}
onRef={tableRef}
></Table>
{
showList.length === 0 && <div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂未开启模板</span>
</div>
}
</div>
{selectIds.length > 1 && (
<div className={style.projectDataStickyBox}>
......@@ -666,6 +689,7 @@ const ProjectData = observer(() => {
size="small"
style={{ marginRight: "12px" }}
onClick={handleBatchDelete}
disabled={!isPass("PROJECT_DATA_DELETE", 'USER')}
>
批量删除（{selectIds.length}）
</Button>
......@@ -675,6 +699,7 @@ const ProjectData = observer(() => {
size="small"
style={{ marginRight: "24px" }}
onClick={handleBatchMove}
disabled={!isPass("PROJECT_DATA_MOVE", 'USER')}
>
批量移动（{selectIds.length}）
</Button>
......
src/views/Project/project.ts
View file @ 983a53c1
......@@ -5,9 +5,9 @@ export const getProjectList = async () => {
return res.data;
};
// 设置文件服务器指向
export const setFileServerEndPointLocalStorage = async (zoneId: string) => {
const res = await hpczone();
console.log(res);
let fileServerEndPoint = "";
if (Array.isArray(res)) {
res.forEach((item: any) => {
......
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