Skip to content

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

删除不必要的引用

parent 72f8ff82
Hide whitespace changes
Inline Side-by-side
Showing with 1010 additions and 1004 deletions
src/api/fileserver/CloudEController.ts
View file @ 24d0d635
...@@ -4,7 +4,7 @@ import axios from "axios"; ...@@ -4,7 +4,7 @@ import axios from "axios";
// import { Actions, Constants } from '../../../../commons/utils/constants' // import { Actions, Constants } from '../../../../commons/utils/constants'
// import MessageUtil from '../../../../commons/utils/MessageUtil' // import MessageUtil from '../../../../commons/utils/MessageUtil'
// import ApiUtils from '../../../../commons/utils/ApiUtils' // import ApiUtils from '../../../../commons/utils/ApiUtils'
import { APIOPTION, urlToken, ZONEID } from "./raysyncApi"; import { APIOPTION, urlToken } from "./raysyncApi";
// import UserStore from '../../../../console/common/stores/UserStore' // import UserStore from '../../../../console/common/stores/UserStore'
import { ApiUtils } from "./utils"; import { ApiUtils } from "./utils";
import Base64 from "crypto-js/enc-base64"; import Base64 from "crypto-js/enc-base64";
......
src/components/Material.Ui/Table.jsx
View file @ 24d0d635
...@@ -9,7 +9,6 @@ import Paper from "@mui/material/Paper"; ...@@ -9,7 +9,6 @@ import Paper from "@mui/material/Paper";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
// import Spin from "./Spin"; // import Spin from "./Spin";
import EnhancedTableToolbarComponent from "./Table/EnhancedTableToolbar"
import EnhancedTableHeadComponent from "./Table/EnhancedTableHead" import EnhancedTableHeadComponent from "./Table/EnhancedTableHead"
import { getComparator, stableSort, useStyles } from "./Table/function"; import { getComparator, stableSort, useStyles } from "./Table/function";
import ActionsComponent from "./Table/ActionsComponent" import ActionsComponent from "./Table/ActionsComponent"
...@@ -20,11 +19,10 @@ export default function EnhancedTable(props) { ...@@ -20,11 +19,10 @@ export default function EnhancedTable(props) {
const classes = useStyles; const classes = useStyles;
const [order, setOrder] = React.useState("asc"); const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState(""); const [orderBy, setOrderBy] = React.useState("");
const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick, const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBoySx } = props; load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBoySx } = props;
const [selected, setSelected] = React.useState(initSelected || []); const [selected, setSelected] = React.useState(initSelected || []);
const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]); const [rowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
// const [spin, setSpin] = React.useState(false)
const [onRow, setOnRow] = React.useState('') const [onRow, setOnRow] = React.useState('')
// 重置复选框选中选项 // 重置复选框选中选项
...@@ -63,10 +61,6 @@ export default function EnhancedTable(props) { ...@@ -63,10 +61,6 @@ export default function EnhancedTable(props) {
setSelected([]); setSelected([]);
checkboxData([]); checkboxData([]);
}; };
// React.useEffect(() => {
// setSpin(load)
// }, [load]);
const handleClick = (event, name) => { const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name); const selectedIndex = selected.indexOf(name);
let newSelected = []; let newSelected = [];
...@@ -97,7 +91,7 @@ export default function EnhancedTable(props) { ...@@ -97,7 +91,7 @@ export default function EnhancedTable(props) {
const isSelected = (name) => selected.indexOf(name) !== -1; const isSelected = (name) => selected.indexOf(name) !== -1;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); // const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
const renderTableCellValue = useCallback(((item, row, index)=>{ const renderTableCellValue = useCallback(((item, row, index)=>{
if( if(
...@@ -209,11 +203,6 @@ export default function EnhancedTable(props) { ...@@ -209,11 +203,6 @@ export default function EnhancedTable(props) {
</TableRow> </TableRow>
); );
})} })}
{/* {emptyRows > 0 && (
<TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)} */}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
......
src/components/mui/Button.tsx
View file @ 24d0d635
import React, { FC } from "react"; import React from "react";
import { Props } from "ahooks/lib/useControllableValue";
import { makeStyles } from "tss-react/mui"; import { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material"; import { Typography, Menu, MenuItem, Button } from "@mui/material";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
type ButtonTagProps = { type ButtonTagProps = {
text: string;//文本内容 text: string; //文本内容
variant?: "text" | 'contained' | 'outlined';//按钮样式 variant?: "text" | "contained" | "outlined"; //按钮样式
click?: any;//点击事件 click?: any; //点击事件
select?: any[];//选择按钮的下拉列表 select?: any[]; //选择按钮的下拉列表
fontSize?: string;//按钮文字大小 fontSize?: string; //按钮文字大小
dropValue?: boolean;//选择的值 dropValue?: boolean; //选择的值
drop?: boolean;//是否开启选择 drop?: boolean; //是否开启选择
color?: "inherit" | "primary" | "secondary" | undefined,//按钮颜色风格 color?: "inherit" | "primary" | "secondary" | undefined; //按钮颜色风格
btnStyle?: any,//按钮自定义样式类 btnStyle?: any; //按钮自定义样式类
size?: "large" | "medium" | "small",//按钮尺寸 size?: "large" | "medium" | "small"; //按钮尺寸
disabled?: boolean,//是否禁用 disabled?: boolean; //是否禁用
style?: any,//按钮自定义样式 style?: any; //按钮自定义样式
img?: JSX.Element;//图标按钮中的图标 img?: JSX.Element; //图标按钮中的图标
selectCallBack?: (item: any, key: number) => void//选择按钮的回调 selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
} };
const ButtonComponent = (props: ButtonTagProps) => { const ButtonComponent = (props: ButtonTagProps) => {
const { size, disabled, variant, color, img, btnStyle = {}, select, selectCallBack } = props; const {
const { classes, cx } = useStyles({}); size,
const [anchorEl, setAnchorEl] = React.useState(null); disabled,
variant,
color,
img,
btnStyle = {},
select,
selectCallBack,
} = props;
const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget); const handleClick = (event: { currentTarget: React.SetStateAction<null> }) =>
const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation() setAnchorEl(event.currentTarget);
const handleCloseOption = (item: any, key: number) => { const defultClick = (event: { stoppropagation: () => any }) =>
setAnchorEl(null); event && event.stoppropagation && event.stoppropagation();
selectCallBack && selectCallBack(item, key) const handleCloseOption = (item: any, key: number) => {
} setAnchorEl(null);
const handleClose = () => setAnchorEl(null); selectCallBack && selectCallBack(item, key);
};
const handleClose = () => setAnchorEl(null);
return (
<>
<Button
size={size || "medium"}
variant={variant || "contained"}
color={color || "primary"}
disableRipple={true}
disableFocusRipple={true}
disabled={disabled || false}
classes={{
root: btnStyle.root || classes.root,
// disabled: btnStyle.disabled || classes.disabled,
containedSecondary:
btnStyle.containedSecondary || classes.containedSecondary,
outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary:
btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
}}
style={{ ...props.style }}
onClick={props.select ? handleClick : props.click || defultClick}
>
{img || ""}
<Typography style={{ fontSize: props.fontSize || "14px" }}>
{props.text}
</Typography>
{((props.select && props.select.length > 0) || props.drop) && (
<ArrowDropDownIcon
classes={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: Boolean(
props.dropValue || anchorEl
),
}),
}}
/>
)}
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
{select &&
select.length > 0 &&
select.map((item, key) => {
return (
<MenuItem
key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}
>
{item.name || ""}
</MenuItem>
);
})}
</Menu>
</>
);
};
return ( const useStyles = makeStyles<{}>()((theme) => ({
<> root: {
<Button backgroundColor: "#136EFA",
size={size || "medium"} boxShadow: "none !important",
variant={variant || 'contained'} color: "#ffffff",
color={color || "primary"} "&:hover": { backgroundColor: "#0055D9" },
disableRipple={true} },
disableFocusRipple={true} containedSecondary: {
disabled={disabled || false} backgroundColor: "#D62C1F",
classes={{ boxShadow: "none !important",
root: btnStyle.root || classes.root, "&:hover": { backgroundColor: "#D82C1F" },
// disabled: btnStyle.disabled || classes.disabled, },
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary, outlined: {
outlined: btnStyle.outlined || classes.outlined, backgroundColor: "#FFFFFF",
outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary, border: "1px solid #136EFA",
text: btnStyle.text || classes.text, boxShadow: "none !important",
textPrimary: btnStyle.textPrimary || classes.textPrimary, color: "#136EFA",
textSecondary: btnStyle.textSecondary || classes.textSecondary, "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" },
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall, },
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge, outlinedSecondary: {
border: "1px solid #D62C1F",
color: "#D62C1F",
"&:hover": {
border: "1px solid #D62C1F",
backgroundColor: "rgba(214, 44, 31, 0.1)",
},
},
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: "transparent", boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: {
color: "#F44335",
"&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" },
},
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {},
ArrowDropDownIconRoot: {
color: "#8A9099",
transition: "all 0.2s !important",
transform: "rotate(0)",
},
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
}));
}} export default ButtonComponent;
style={{ ...props.style }}
onClick={props.select ? handleClick : (props.click || defultClick)}
>
{img || ''}
<Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
{
(props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: Boolean(props.dropValue || anchorEl)
})
}} />
}
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
{
select && select.length > 0 && select.map((item, key) => {
return (
<MenuItem
key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}>
{item.name || ""}
</MenuItem>
)
})
}
</Menu>
</>
)
}
const useStyles = makeStyles<{}>()(
(theme, { }) => ({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: 'transparent', boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {},
ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
})
);
export default ButtonComponent;
\ No newline at end of file
src/components/mui/MyTreeView.tsx
View file @ 24d0d635
...@@ -4,74 +4,72 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; ...@@ -4,74 +4,72 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import TreeItem from "@mui/lab/TreeItem"; import TreeItem from "@mui/lab/TreeItem";
interface TreeItemType { interface TreeItemType {
id: string; id: string;
name: string; name: string;
disabled?: boolean; disabled?: boolean;
subdirs?: readonly TreeItemType[]; subdirs?: readonly TreeItemType[];
} }
type MyTreeViewProps = { type MyTreeViewProps = {
treeData: Array<TreeItemType>; treeData: Array<TreeItemType>;
onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调 onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调 onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调 onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
renderLabel?: (node: any) => React.ReactNode; renderLabel?: (node: any) => React.ReactNode;
treeViewSx?: any; treeViewSx?: any;
defaultExpanded?: Array<string>; defaultExpanded?: Array<string>;
idKey?: string; idFunc?: (node: any) => string;
idFunc?: (node: any) => string;
}; };
interface RenderTree { interface RenderTree {
id: string | number; id: string | number;
name: string; name: string;
disabled?: boolean; disabled?: boolean;
subdirs?: readonly RenderTree[]; subdirs?: readonly RenderTree[];
} }
const MyTreeView = (props: MyTreeViewProps) => { const MyTreeView = (props: MyTreeViewProps) => {
const { const {
treeData = [], treeData = [],
renderLabel, renderLabel,
treeViewSx, treeViewSx,
onNodeFocus, onNodeFocus,
onNodeSelect, onNodeSelect,
onNodeToggle, onNodeToggle,
defaultExpanded, defaultExpanded,
idKey, idFunc,
idFunc, } = props;
} = props;
const renderTreeObj = (nodes: RenderTree, index: number) => ( const renderTreeObj = (nodes: RenderTree, index: number) => (
<TreeItem <TreeItem
key={nodes.id || `${nodes.name}${index}`} key={nodes.id || `${nodes.name}${index}`}
nodeId={String( nodeId={String(
idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}` idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
)} )}
label={renderLabel === undefined ? nodes.name : renderLabel(nodes)} label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
disabled={nodes?.disabled ? true : false} disabled={nodes?.disabled ? true : false}
> >
{Array.isArray(nodes.subdirs) {Array.isArray(nodes.subdirs)
? nodes.subdirs.map((node, i) => renderTreeObj(node, i)) ? nodes.subdirs.map((node, i) => renderTreeObj(node, i))
: null} : null}
</TreeItem> </TreeItem>
); );
return ( return (
<TreeView <TreeView
defaultCollapseIcon={<ArrowRightIcon />} defaultCollapseIcon={<ArrowRightIcon />}
defaultExpandIcon={<ArrowDropDownIcon />} defaultExpandIcon={<ArrowDropDownIcon />}
onNodeFocus={onNodeFocus} onNodeFocus={onNodeFocus}
onNodeSelect={onNodeSelect} onNodeSelect={onNodeSelect}
onNodeToggle={onNodeToggle} onNodeToggle={onNodeToggle}
defaultExpanded={defaultExpanded} defaultExpanded={defaultExpanded}
sx={{ ...treeViewSx }} sx={{ ...treeViewSx }}
> >
{treeData.map((treeItem, index) => { {treeData.map((treeItem, index) => {
return renderTreeObj(treeItem, index); return renderTreeObj(treeItem, index);
})} })}
</TreeView> </TreeView>
); );
}; };
export default MyTreeView; export default MyTreeView;
src/hooks/usePass.ts
View file @ 24d0d635
...@@ -75,7 +75,7 @@ const usePass = () => { ...@@ -75,7 +75,7 @@ const usePass = () => {
} }
return false; return false;
}, },
[permissionStore.allRoutes] [permissionStore.allRoutes, currentProjectStore]
); );
return isPass; return isPass;
......
src/index.tsx
View file @ 24d0d635
...@@ -7,35 +7,48 @@ import { Provider } from "mobx-react"; ...@@ -7,35 +7,48 @@ import { Provider } from "mobx-react";
import { stores } from "@/store/index"; import { stores } from "@/store/index";
import { MySnackbarProvider } from "@/components/MySnackbar"; import { MySnackbarProvider } from "@/components/MySnackbar";
import "@/mocks/index"; import "@/mocks/index";
import './assets/style/public.css' import "./assets/style/public.css";
import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; import { createTheme, ThemeProvider } from "@mui/material/styles";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement
); );
const theme = createTheme({ const theme = createTheme({
typography: { typography: {
fontFamily: ['Roboto', 'Helvetica', 'Tahoma', 'Arial', '"PingFang SC"', '"Hiragino Sans GB"', '"Heiti SC"', '"WenQuanYi Micro Hei"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','), fontFamily: [
}, "Roboto",
palette: { "Helvetica",
primary: { main: '#136EFA' }, "Tahoma",
secondary: { main: '#F44335' } "Arial",
} '"PingFang SC"',
'"Hiragino Sans GB"',
'"Heiti SC"',
'"WenQuanYi Micro Hei"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(","),
},
palette: {
primary: { main: "#136EFA" },
secondary: { main: "#F44335" },
},
}); });
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Provider {...stores}> <Provider {...stores}>
<MySnackbarProvider <MySnackbarProvider
alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }} alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
> >
<MyRouter></MyRouter> <MyRouter></MyRouter>
</MySnackbarProvider> </MySnackbarProvider>
</Provider> </Provider>
</ThemeProvider> </ThemeProvider>
</React.StrictMode> </React.StrictMode>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
......
src/utils/helper.ts
View file @ 24d0d635
...@@ -36,6 +36,6 @@ export const verifyLettersNumbersCertainChars5 = (str: string) => { ...@@ -36,6 +36,6 @@ export const verifyLettersNumbersCertainChars5 = (str: string) => {
if (getTrueLength(str) > 127) { if (getTrueLength(str) > 127) {
return false; return false;
} }
let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z\/-_.]+$/; let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z/-_.]+$/;
return validString.test(str); return validString.test(str);
}; };
\ No newline at end of file
src/views/Project/ProjectData/DeleteDialog/index.tsx
View file @ 24d0d635
import React, { useState, useImperativeHandle, useMemo } from "react"; import React, { useImperativeHandle, useMemo } from "react";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
...@@ -7,177 +7,177 @@ import { getDataFileDel, getDataFileDelPackage } from "@/api/project_api"; ...@@ -7,177 +7,177 @@ import { getDataFileDel, getDataFileDelPackage } from "@/api/project_api";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
const DeleteDialog = (props: any) => { const DeleteDialog = (props: any) => {
const { const {
path, path,
projectId, projectId,
fileToken, fileToken,
currentOperateFile, currentOperateFile,
selectIds, selectIds,
refresh, refresh,
showList, showList,
} = props; } = props;
const Message = useMessage(); const Message = useMessage();
let deleteFileDialogRef: any = React.createRef(); let deleteFileDialogRef: any = React.createRef();
const showDialog = () => { const showDialog = () => {
deleteFileDialogRef.current.handleClickOpen(); deleteFileDialogRef.current.handleClickOpen();
}; };
useImperativeHandle(props.onRef, () => { useImperativeHandle(props.onRef, () => {
return { return {
showDialog: showDialog, showDialog: showDialog,
}; };
}); });
const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, { const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
onSuccess: (res: any) => { onSuccess: (res: any) => {
successDelete(); successDelete();
}, },
}); });
const { run: getDataFileDelPackageRun } = useMyRequest( const { run: getDataFileDelPackageRun } = useMyRequest(
getDataFileDelPackage, getDataFileDelPackage,
{ {
onSuccess: (res: any) => { onSuccess: (res: any) => {
successDelete(); successDelete();
}, },
} }
); );
const successDelete = () => { const successDelete = () => {
Message.success("删除成功！"); Message.success("删除成功！");
deleteFileDialogRef?.current?.handleClose(); deleteFileDialogRef?.current?.handleClose();
refresh(); refresh();
}; };
const deletePathProvidedToDataSet = useMemo(() => { const deletePathProvidedToDataSet = useMemo(() => {
return path === "/" ? "/" : `${path}/`; return path === "/" ? "/" : `${path}/`;
}, [path]); }, [path]);
const deletePathProvidedFileServer = useMemo(() => { const deletePathProvidedFileServer = useMemo(() => {
return path === "/" ? `${path}` : `${path}/`; return path === "/" ? `${path}` : `${path}/`;
}, [path]); }, [path]);
// 删除 // 删除
const handleSubmit = () => { const handleSubmit = () => {
if (!currentOperateFile) { if (!currentOperateFile) {
// 批量删除 // 批量删除
// 要删除的数据集 // 要删除的数据集
const datSetDeleteList = showList.filter((item: any) => { const datSetDeleteList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet"; return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
}); });
// 要删除的文件夹 // 要删除的文件夹
const folderDeleteList = showList.filter((item: any) => { const folderDeleteList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory"; return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
}); });
// 要删除的文件 // 要删除的文件
const fileDeleteList = showList.filter((item: any) => { const fileDeleteList = showList.filter((item: any) => {
return ( return (
selectIds.indexOf(item.name) !== -1 && selectIds.indexOf(item.name) !== -1 &&
item.type !== "dataSet" && item.type !== "dataSet" &&
item.type !== "directory" item.type !== "directory"
); );
}); });
if (datSetDeleteList.length > 0) { if (datSetDeleteList.length > 0) {
dataSetsDelete(datSetDeleteList); dataSetsDelete(datSetDeleteList);
} }
if (folderDeleteList.length > 0) { if (folderDeleteList.length > 0) {
foldersDelete(folderDeleteList); foldersDelete(folderDeleteList);
} }
if (fileDeleteList.length > 0) { if (fileDeleteList.length > 0) {
filesDelete(fileDeleteList); filesDelete(fileDeleteList);
} }
} else { } else {
if (currentOperateFile.type === "dataSet") { if (currentOperateFile.type === "dataSet") {
dataSetDelete(); dataSetDelete();
} else if (currentOperateFile.type === "directory") { } else if (currentOperateFile.type === "directory") {
folerDelete(); folerDelete();
} else { } else {
fileDelete(); fileDelete();
} }
} }
}; };
// 删除单个数据集 // 删除单个数据集
const dataSetDelete = () => { const dataSetDelete = () => {
getDataFileDelRun({ getDataFileDelRun({
projectId: projectId as string, projectId: projectId as string,
names: currentOperateFile.name, names: currentOperateFile.name,
path: deletePathProvidedToDataSet, path: deletePathProvidedToDataSet,
}); });
}; };
// 删除单个文件夹 // 删除单个文件夹
const folerDelete = () => { const folerDelete = () => {
fileDelete(); fileDelete();
const names = currentOperateFile.name; const names = currentOperateFile.name;
dataSetInFolerDelete(names); dataSetInFolerDelete(names);
}; };
// 删除文件夹中的数据集 // 删除文件夹中的数据集
const dataSetInFolerDelete = (names: string) => { const dataSetInFolerDelete = (names: string) => {
getDataFileDelPackageRun({ getDataFileDelPackageRun({
projectId: projectId as string, projectId: projectId as string,
names, names,
path: deletePathProvidedToDataSet, path: deletePathProvidedToDataSet,
}); });
}; };
// 删除单个文件 // 删除单个文件
const fileDelete = () => { const fileDelete = () => {
CloudEController.JobOutFileDel( CloudEController.JobOutFileDel(
`${deletePathProvidedFileServer}${currentOperateFile.name}`, `${deletePathProvidedFileServer}${currentOperateFile.name}`,
fileToken as string, fileToken as string,
projectId as string projectId as string
)?.then((res) => { )?.then((res) => {
successDelete(); successDelete();
}); });
}; };
// 删除多个数据集 // 删除多个数据集
const dataSetsDelete = (datSetDeleteList: Array<any>) => { const dataSetsDelete = (datSetDeleteList: Array<any>) => {
getDataFileDelRun({ getDataFileDelRun({
projectId: projectId as string, projectId: projectId as string,
names: datSetDeleteList.map((item: any) => item.name).join(","), names: datSetDeleteList.map((item: any) => item.name).join(","),
path: deletePathProvidedToDataSet, path: deletePathProvidedToDataSet,
}); });
}; };
// 删除多个文件夹 // 删除多个文件夹
const foldersDelete = (folderDeleteList: Array<any>) => { const foldersDelete = (folderDeleteList: Array<any>) => {
filesDelete(folderDeleteList); filesDelete(folderDeleteList);
const names = folderDeleteList.map((item: any) => item.name).join(","); const names = folderDeleteList.map((item: any) => item.name).join(",");
dataSetInFolerDelete(names); dataSetInFolerDelete(names);
}; };
// 删除多个文件 // 删除多个文件
const filesDelete = (fileDeleteList: Array<any>) => { const filesDelete = (fileDeleteList: Array<any>) => {
const deletePath = fileDeleteList const deletePath = fileDeleteList
.map((item: any) => { .map((item: any) => {
return `${deletePathProvidedFileServer}${item.name}`; return `${deletePathProvidedFileServer}${item.name}`;
}) })
.join(" "); .join(" ");
CloudEController.JobOutFileDel( CloudEController.JobOutFileDel(
deletePath, deletePath,
fileToken as string, fileToken as string,
projectId as string projectId as string
)?.then((res) => { )?.then((res) => {
successDelete(); successDelete();
}); });
}; };
const submitloading = false; const submitloading = false;
return ( return (
<MyDialog <MyDialog
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
onRef={deleteFileDialogRef} onRef={deleteFileDialogRef}
title="提示" title="提示"
submitloading={submitloading} submitloading={submitloading}
> >
{currentOperateFile {currentOperateFile
? "确认删除该数据吗？" ? "确认删除该数据吗？"
: `确认删除这${selectIds.length}条数据吗？`} : `确认删除这${selectIds.length}条数据吗？`}
</MyDialog> </MyDialog>
); );
}; };
export default DeleteDialog; export default DeleteDialog;
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ 24d0d635
import React, { import React, {
useState, useState,
useImperativeHandle, useImperativeHandle,
useCallback, useCallback,
useMemo, useMemo,
useEffect, useEffect,
} from "react"; } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
...@@ -19,344 +19,341 @@ import classNames from "classnames"; ...@@ -19,344 +19,341 @@ import classNames from "classnames";
import _ from "lodash"; import _ from "lodash";
const MoveFile = (props: any) => { const MoveFile = (props: any) => {
const { const {
path, path,
projectId, projectId,
fileToken, fileToken,
currentOperateFile, currentOperateFile,
selectIds, selectIds,
refresh, refresh,
showList, showList,
} = props; } = props;
const Message = useMessage(); const Message = useMessage();
const [newPath, setNewPath] = useState("/"); const [newPath, setNewPath] = useState("/");
const [rootActive, setRootActive] = useState(true); const [rootActive, setRootActive] = useState(true);
const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false); const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
const [treeData, setTreeData] = useState<any>([]); const [treeData, setTreeData] = useState<any>([]);
const [renderTreeData, setRenderTreeData] = useState<any>([]); const [renderTreeData, setRenderTreeData] = useState<any>([]);
const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>( const [moveFileDialogRef] = useState<any>(React.createRef());
React.createRef() // 要移动的文件夹 之后用来隐藏文件夹树中同路径的文件夹
); const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
// 要移动的文件夹 之后用来隐藏文件夹树中同路径的文件夹
const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
const getTree = useCallback(() => { const getTree = useCallback(() => {
if (fileToken && projectId) { if (fileToken && projectId) {
return CloudEController.JobOutFileDirtree( return CloudEController.JobOutFileDirtree(
"/", "/",
fileToken, fileToken,
projectId, projectId,
false false
)?.then((res) => { )?.then((res) => {
if (Array.isArray(res.data)) { if (Array.isArray(res.data)) {
let arr = res.data; let arr = res.data;
setTreeData(arr); setTreeData(arr);
} else { } else {
setTreeData([]); setTreeData([]);
} }
}); });
} }
}, [fileToken, projectId]); }, [fileToken, projectId]);
const getDisabledRepeatFolder = useCallback( const getDisabledRepeatFolder = useCallback(
(folderTree: any, samePathFolederArr: Array<string>) => { (folderTree: any, samePathFolederArr: Array<string>) => {
const arr = _.cloneDeep(folderTree); const arr = _.cloneDeep(folderTree);
const disabledRepeatFolder = (tree: any, repeatPath: Array<string>) => { const disabledRepeatFolder = (tree: any, repeatPath: Array<string>) => {
tree.forEach((item: any, index: number) => { tree.forEach((item: any, index: number) => {
if (repeatPath.indexOf(`${item.dir.substr(1)}${item.name}`) !== -1) { if (repeatPath.indexOf(`${item.dir.substr(1)}${item.name}`) !== -1) {
item.disabled = true; item.disabled = true;
} else { } else {
item.disabled = false; item.disabled = false;
if (item.subdirs.length > 0) { if (item.subdirs.length > 0) {
disabledRepeatFolder(item.subdirs, repeatPath); disabledRepeatFolder(item.subdirs, repeatPath);
} }
} }
}); });
}; };
disabledRepeatFolder(arr, samePathFolederArr); disabledRepeatFolder(arr, samePathFolederArr);
return arr; return arr;
}, },
[] []
); );
useEffect(() => { useEffect(() => {
const tree = getDisabledRepeatFolder(treeData, moveFolderPathArr); const tree = getDisabledRepeatFolder(treeData, moveFolderPathArr);
setRenderTreeData(tree); setRenderTreeData(tree);
}, [moveFolderPathArr, getDisabledRepeatFolder, treeData]); }, [moveFolderPathArr, getDisabledRepeatFolder, treeData]);
useEffect(() => { useEffect(() => {
let moveFolderArr: any = []; let moveFolderArr: any = [];
let pathArr = []; let pathArr = [];
if (currentOperateFile) { if (currentOperateFile) {
if (currentOperateFile.type === "directory") { if (currentOperateFile.type === "directory") {
moveFolderArr = [currentOperateFile]; moveFolderArr = [currentOperateFile];
} else { } else {
moveFolderArr = []; moveFolderArr = [];
} }
} else { } else {
moveFolderArr = showList.filter((item: any) => { moveFolderArr = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory"; return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
}); });
} }
pathArr = moveFolderArr.map((item: any) => { pathArr = moveFolderArr.map((item: any) => {
return path === "/" ? `/${item.name}` : `${path}/${item.name}`; return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
}); });
setMoveFolderPathArr(pathArr); setMoveFolderPathArr(pathArr);
}, [selectIds, showList, currentOperateFile, path]); }, [selectIds, showList, currentOperateFile, path]);
const showDialog = () => { const showDialog = () => {
moveFileDialogRef.current.handleClickOpen(); moveFileDialogRef.current.handleClickOpen();
getTree(); getTree();
}; };
useImperativeHandle(props.onRef, () => { useImperativeHandle(props.onRef, () => {
return { return {
showDialog: showDialog, showDialog: showDialog,
}; };
}); });
const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, { const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, {
onSuccess: (res: any) => { onSuccess: (res: any) => {
successMove(); successMove();
}, },
}); });
const { run: getDataFileMovePackageRun } = useMyRequest( const { run: getDataFileMovePackageRun } = useMyRequest(
getDataFileMovePackage, getDataFileMovePackage,
{ {
onSuccess: (res: any) => { onSuccess: (res: any) => {
successMove(); successMove();
}, },
} }
); );
// 提供给fileserver相关接口的newpath 直接用newPath就可以了 // 提供给fileserver相关接口的newpath 直接用newPath就可以了
// const newPathProvidedToFileServer = useMemo(() => { // const newPathProvidedToFileServer = useMemo(() => {
// return newPath // return newPath
// }, [newPath]) // }, [newPath])
// 提供给数据集相关接口的newpath // 提供给数据集相关接口的newpath
const newPathProvidedToDataSet = useMemo(() => { const newPathProvidedToDataSet = useMemo(() => {
return newPath === "/" ? "/" : `${newPath}/`; return newPath === "/" ? "/" : `${newPath}/`;
}, [newPath]); }, [newPath]);
// 提供给fileserver相关接口的oldpath // 提供给fileserver相关接口的oldpath
const oldPathProvidedToFileServer = useMemo(() => { const oldPathProvidedToFileServer = useMemo(() => {
return `${path}${path === "/" ? "" : "/"}`; return `${path}${path === "/" ? "" : "/"}`;
}, [path]); }, [path]);
// 提供给数据集相关接口的oldpath // 提供给数据集相关接口的oldpath
const oldPathProvidedToDataSet = useMemo(() => { const oldPathProvidedToDataSet = useMemo(() => {
return path === "/" ? "/" : `${path}/`; return path === "/" ? "/" : `${path}/`;
}, [path]); }, [path]);
// 移动成功后的操作 // 移动成功后的操作
const successMove = () => { const successMove = () => {
Message.success("移动成功！"); Message.success("移动成功！");
setMoveFileSubmitloading(false); setMoveFileSubmitloading(false);
moveFileDialogRef?.current?.handleClose(); moveFileDialogRef?.current?.handleClose();
refresh(); refresh();
}; };
// 移动失败后的操作 // 移动失败后的操作
const erroeMove = (error: any) => { const erroeMove = (error: any) => {
if (error?.response?.status === 405) { if (error?.response?.status === 405) {
Message.error("因目标路径存在同名文件，数据移动失败。"); Message.error("因目标路径存在同名文件，数据移动失败。");
} else { } else {
Message.error("文件服务发生错误，数据移动失败。"); Message.error("文件服务发生错误，数据移动失败。");
} }
setMoveFileSubmitloading(false); setMoveFileSubmitloading(false);
}; };
// 移动 // 移动
const handleMoveFileSubmit = () => { const handleMoveFileSubmit = () => {
if (!newPath) { if (!newPath) {
Message.error("请选择移动到哪个目录"); Message.error("请选择移动到哪个目录");
} else if (newPath === path) { } else if (newPath === path) {
Message.error("指定的目标路径为数据原路径，无需移动。"); Message.error("指定的目标路径为数据原路径，无需移动。");
} else { } else {
setMoveFileSubmitloading(true); setMoveFileSubmitloading(true);
if (!currentOperateFile) { if (!currentOperateFile) {
// 批量移动 // 批量移动
// 要移动的数据集 // 要移动的数据集
const datSetMoveList = showList.filter((item: any) => { const datSetMoveList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet"; return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
}); });
// 要移动的文件夹 // 要移动的文件夹
const folderMoveList = showList.filter((item: any) => { const folderMoveList = showList.filter((item: any) => {
return ( return (
selectIds.indexOf(item.name) !== -1 && item.type === "directory" selectIds.indexOf(item.name) !== -1 && item.type === "directory"
); );
}); });
// 要移动的文件 // 要移动的文件
const fileMoveList = showList.filter((item: any) => { const fileMoveList = showList.filter((item: any) => {
return ( return (
selectIds.indexOf(item.name) !== -1 && selectIds.indexOf(item.name) !== -1 &&
item.type !== "dataSet" && item.type !== "dataSet" &&
item.type !== "directory" item.type !== "directory"
); );
}); });
if (datSetMoveList.length > 0) { if (datSetMoveList.length > 0) {
dataSetsMove(datSetMoveList); dataSetsMove(datSetMoveList);
} }
if (folderMoveList.length > 0) { if (folderMoveList.length > 0) {
foldersMove(folderMoveList); foldersMove(folderMoveList);
} }
if (fileMoveList.length > 0) { if (fileMoveList.length > 0) {
filesMove(fileMoveList)?.then((res) => { filesMove(fileMoveList)?.then((res) => {
successMove(); successMove();
}); });
} }
} else { } else {
if (currentOperateFile.type === "dataSet") { if (currentOperateFile.type === "dataSet") {
dataSetMove(); dataSetMove();
} else if (currentOperateFile.type === "directory") { } else if (currentOperateFile.type === "directory") {
folerMove(); folerMove();
} else { } else {
fileMove()?.then((res) => { fileMove()?.then((res) => {
successMove(); successMove();
}); });
} }
} }
} }
}; };
// 单文件移动 // 单文件移动
const fileMove = () => { const fileMove = () => {
const oldPathToFileServer = `${oldPathProvidedToFileServer}${currentOperateFile.name}`; const oldPathToFileServer = `${oldPathProvidedToFileServer}${currentOperateFile.name}`;
return CloudEController.JobFileMove( return CloudEController.JobFileMove(
newPath, newPath,
oldPathToFileServer, oldPathToFileServer,
"", "",
fileToken, fileToken,
projectId projectId
); );
}; };
// 多文件移动 // 多文件移动
const filesMove = (fileMoveList: Array<any>) => { const filesMove = (fileMoveList: Array<any>) => {
const oldPaths = fileMoveList.map((item: any) => { const oldPaths = fileMoveList.map((item: any) => {
return `${oldPathProvidedToFileServer}${item.name}`; return `${oldPathProvidedToFileServer}${item.name}`;
}); });
return CloudEController.JobFileBatchMove( return CloudEController.JobFileBatchMove(
newPath, newPath,
oldPaths, oldPaths,
"", "",
fileToken, fileToken,
projectId projectId
); );
}; };
// 单文件夹移动 // 单文件夹移动
const folerMove = () => { const folerMove = () => {
fileMove() fileMove()
?.then((res) => { ?.then((res) => {
const names = currentOperateFile.name; const names = currentOperateFile.name;
dataSetInFolerMove(names); dataSetInFolerMove(names);
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
erroeMove(error); erroeMove(error);
}); });
}; };
// 移动文件夹中的数据集 // 移动文件夹中的数据集
const dataSetInFolerMove = (names: string) => { const dataSetInFolerMove = (names: string) => {
getDataFileMovePackageRun({ getDataFileMovePackageRun({
projectId: projectId as string, projectId: projectId as string,
names, names,
spath: oldPathProvidedToDataSet, spath: oldPathProvidedToDataSet,
dpath: newPathProvidedToDataSet, dpath: newPathProvidedToDataSet,
}); });
}; };
// 多文件夹移动 // 多文件夹移动
const foldersMove = (folderMoveList: Array<any>) => { const foldersMove = (folderMoveList: Array<any>) => {
filesMove(folderMoveList) filesMove(folderMoveList)
?.then((res) => { ?.then((res) => {
const names = folderMoveList.map((item: any) => item.name).join(","); const names = folderMoveList.map((item: any) => item.name).join(",");
dataSetInFolerMove(names); dataSetInFolerMove(names);
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
erroeMove(error); erroeMove(error);
}); });
}; };
// 单数据集移动 // 单数据集移动
const dataSetMove = () => { const dataSetMove = () => {
getDataFileMoveRun({ getDataFileMoveRun({
projectId: projectId as string, projectId: projectId as string,
names: currentOperateFile.name, names: currentOperateFile.name,
spath: oldPathProvidedToDataSet, spath: oldPathProvidedToDataSet,
dpath: newPathProvidedToDataSet, dpath: newPathProvidedToDataSet,
}); });
}; };
// 多数据集移动 // 多数据集移动
const dataSetsMove = (datSetMoveList: Array<any>) => { const dataSetsMove = (datSetMoveList: Array<any>) => {
getDataFileMoveRun({ getDataFileMoveRun({
projectId: projectId as string, projectId: projectId as string,
names: datSetMoveList.map((item: any) => item.name).join(","), names: datSetMoveList.map((item: any) => item.name).join(","),
spath: oldPathProvidedToFileServer, spath: oldPathProvidedToFileServer,
dpath: newPath === "/" ? "/" : `${newPath}/`, dpath: newPath === "/" ? "/" : `${newPath}/`,
}); });
}; };
const renderLabel = (node: any) => { const renderLabel = (node: any) => {
return ( return (
<span className={style.treeLabel}> <span className={style.treeLabel}>
<img className={style.labelFolderIcon} src={folderIcon} alt="" /> <img className={style.labelFolderIcon} src={folderIcon} alt="" />
<span className={style.treeLabelText}>{node.name}</span> <span className={style.treeLabelText}>{node.name}</span>
</span> </span>
); );
}; };
const onNodeSelect = (a: any, b: any) => { const onNodeSelect = (a: any, b: any) => {
setNewPath(b); setNewPath(b);
setRootActive(false); setRootActive(false);
}; };
// 给路径去掉第一个'/'然后结尾加上文件名 方便后面直接使用 // 给路径去掉第一个'/'然后结尾加上文件名 方便后面直接使用
const idFunc = (item: any) => { const idFunc = (item: any) => {
return `${item.dir.substr(1)}${item.name}`; return `${item.dir.substr(1)}${item.name}`;
}; };
const handleRoot = () => { const handleRoot = () => {
setNewPath("/"); setNewPath("/");
setRootActive(true); setRootActive(true);
}; };
return ( return (
<MyDialog <MyDialog
handleSubmit={handleMoveFileSubmit} handleSubmit={handleMoveFileSubmit}
onRef={moveFileDialogRef} onRef={moveFileDialogRef}
title="移动至" title="移动至"
submitloading={moveFileSubmitloading} submitloading={moveFileSubmitloading}
> >
<div <div
className={classNames({ className={classNames({
[style.rootTitle]: true, [style.rootTitle]: true,
[style.rootTitleActive]: rootActive, [style.rootTitleActive]: rootActive,
})} })}
onClick={handleRoot} onClick={handleRoot}
> >
<img className={style.bigFolderIcon} src={bigFolderIcon} alt="" /> <img className={style.bigFolderIcon} src={bigFolderIcon} alt="" />
ProjectData ProjectData
</div> </div>
<MyTreeView <MyTreeView
// treeData={treeData} treeData={renderTreeData}
treeData={renderTreeData} renderLabel={renderLabel}
renderLabel={renderLabel} onNodeSelect={onNodeSelect}
onNodeSelect={onNodeSelect} idFunc={idFunc}
idFunc={idFunc} treeViewSx={{
treeViewSx={{ width: 400,
width: 400, overflow: "hidden",
overflow: "hidden", }}
}} ></MyTreeView>
></MyTreeView> </MyDialog>
</MyDialog> );
);
}; };
export default MoveFile; export default MoveFile;
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ 24d0d635
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
// import Dialog from "@/components/Material.Ui/Dialog"; // import Dialog from "@/components/Material.Ui/Dialog";
import { memo, useEffect, useMemo, useState } from "react"; import { memo, useEffect, useState } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { toJS } from "mobx"; import { toJS } from "mobx";
...@@ -19,91 +19,91 @@ import { IDialogInfo } from "../interface"; ...@@ -19,91 +19,91 @@ import { IDialogInfo } from "../interface";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
interface IProps { interface IProps {
setPermissionDialog: (val: IDialogInfo) => void; setPermissionDialog: (val: IDialogInfo) => void;
permissionDialog: IDialogInfo; permissionDialog: IDialogInfo;
getTableList: () => void; getTableList: () => void;
} }
const ChangePermission = observer((props: IProps) => { const ChangePermission = observer((props: IProps) => {
const { permissionDialog, setPermissionDialog, getTableList } = props; const { permissionDialog, setPermissionDialog, getTableList } = props;
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const Message = useMessage(); const Message = useMessage();
const http = useHttp(); const http = useHttp();
const [selectOptions, setSelectOptions] = useState<IOption[]>([]); const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
const [selectValue, setSelectValue] = useState<IOption | undefined>(); const [selectValue, setSelectValue] = useState<IOption | undefined>();
useEffect(() => { useEffect(() => {
if (permissionDialog?.isShow) { if (permissionDialog?.isShow) {
http.get<IResponse<any>>("/cpp/project/listroles").then((res) => { http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
const arr = []; const arr = [];
const { data } = res; const { data } = res;
for (const key in data) { for (const key in data) {
arr.push({ arr.push({
label: String(data[key]), label: String(data[key]),
value: key, value: key,
}); });
} }
setSelectOptions(arr); setSelectOptions(arr);
}); });
} }
}, [http, permissionDialog]); }, [http, permissionDialog]);
const changePermission = (val: any) => { const changePermission = (val: any) => {
setSelectValue(val); setSelectValue(val);
}; };
const onClose = () => { const onClose = () => {
setPermissionDialog({ isShow: false, username: "" }); setPermissionDialog({ isShow: false, username: "" });
}; };
const onConfirm = () => { const onConfirm = () => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo); const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http http
.put<IResponse<any>>( .put<IResponse<any>>(
`/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${ `/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
permissionDialog.username permissionDialog.username
}&role=${selectValue?.value}` }&role=${selectValue?.value}`
) )
.then((res) => { .then((res) => {
const { errorCode } = res; const { errorCode } = res;
if (errorCode === 0) { if (errorCode === 0) {
Message.success("更改成功！"); Message.success("更改成功！");
getTableList(); getTableList();
setPermissionDialog({ isShow: false, username: "" }); setPermissionDialog({ isShow: false, username: "" });
} }
}); });
}; };
useEffect(() => { useEffect(() => {
const defaultValue = selectOptions.filter( const defaultValue = selectOptions.filter(
(every) => every.value === permissionDialog?.projectRole (every) => every.value === permissionDialog?.projectRole
); );
if (defaultValue?.length) { if (defaultValue?.length) {
setSelectValue(defaultValue[0]); setSelectValue(defaultValue[0]);
} else { } else {
setSelectValue({ value: "VIEWER", label: "查看者" }); setSelectValue({ value: "VIEWER", label: "查看者" });
} }
}, [permissionDialog, selectOptions]); }, [permissionDialog, selectOptions]);
return ( return (
<> <>
<Dialog <Dialog
open={permissionDialog?.isShow} open={permissionDialog?.isShow}
onClose={onClose} onClose={onClose}
onConfirm={onConfirm} onConfirm={onConfirm}
title="更改权限" title="更改权限"
> >
<div style={{ marginTop: 12 }}> <div style={{ marginTop: 12 }}>
<MySelect <MySelect
title="项目权限" title="项目权限"
value={selectValue} value={selectValue}
onChange={changePermission} onChange={changePermission}
options={selectOptions} options={selectOptions}
size="small" size="small"
/> />
</div> </div>
</Dialog> </Dialog>
</> </>
); );
}); });
export default memo(ChangePermission); export default memo(ChangePermission);
src/views/Project/ProjectSetting/index.tsx
View file @ 24d0d635
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { memo, useState, useMemo } from "react"; import { memo, useMemo } from "react";
import { Box } from "@mui/system"; import { Box } from "@mui/system";
import { useStores } from "@/store/index"; import { useStores } from "@/store/index";
...@@ -18,39 +18,39 @@ import BaseInfo from "./BaseInfo"; ...@@ -18,39 +18,39 @@ import BaseInfo from "./BaseInfo";
import Tabs from "@/components/mui/Tabs"; import Tabs from "@/components/mui/Tabs";
const ProjectSetting = observer(() => { const ProjectSetting = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const tabList = useMemo(() => { const tabList = useMemo(() => {
return [ return [
{ {
label: "项目成员", label: "项目成员",
value: "projectMember", value: "projectMember",
component: <ProjectMembers />, component: <ProjectMembers />,
}, },
{ {
label: "基础信息", label: "基础信息",
value: "baseInfo", value: "baseInfo",
component: <BaseInfo />, component: <BaseInfo />,
}, },
]; ];
}, []); }, []);
if (currentProjectStore.currentProjectInfo.name) { if (currentProjectStore.currentProjectInfo.name) {
return ( return (
<div style={{ padding: 24 }}> <div style={{ padding: 24 }}>
<div style={{ display: "flex", alignItems: "center" }}> <div style={{ display: "flex", alignItems: "center" }}>
<img src={projectImg} alt="项目logo" /> <img src={projectImg} alt="项目logo" />
<span style={{ marginLeft: 12 }}> <span style={{ marginLeft: 12 }}>
{currentProjectStore.currentProjectInfo.name} {currentProjectStore.currentProjectInfo.name}
</span> </span>
</div> </div>
<Box sx={{ width: "100%", typography: "body1" }}> <Box sx={{ width: "100%", typography: "body1" }}>
<Tabs tabList={tabList} /> <Tabs tabList={tabList} />
</Box> </Box>
</div> </div>
); );
} else { } else {
return <NoProject />; return <NoProject />;
} }
}); });
export default memo(ProjectSetting); export default memo(ProjectSetting);
src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx
View file @ 24d0d635
import { memo } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@/components/mui/Dialog"; import Dialog from "@/components/mui/Dialog";
const SimpleDialog = (props: any) => { const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props; const { openDialog, closeDialog, onConfirm, text, title } = props;
return ( return (
< > <>
<Dialog <Dialog
open={openDialog} open={openDialog}
onClose={closeDialog} onClose={closeDialog}
onConfirm={onConfirm} onConfirm={onConfirm}
title={title} title={title}
> >
<Box> <Box>
<Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography> <Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
</Box> {text}
</Dialog> </Typography>
</> </Box>
); </Dialog>
</>
);
}; };
export default memo(SimpleDialog); export default memo(SimpleDialog);
src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx
View file @ 24d0d635
import { memo } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@/components/mui/Dialog"; import Dialog from "@/components/mui/Dialog";
const SimpleDialog = (props: any) => { const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props; const { openDialog, closeDialog, onConfirm, text, title } = props;
return ( return (
< > <>
<Dialog <Dialog
open={openDialog} open={openDialog}
onClose={closeDialog} onClose={closeDialog}
onConfirm={onConfirm} onConfirm={onConfirm}
title={title} title={title}
> >
<Box> <Box>
<Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography> <Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
</Box> {text}
</Dialog> </Typography>
</> </Box>
); </Dialog>
</>
);
}; };
export default memo(SimpleDialog); export default memo(SimpleDialog);
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
View file @ 24d0d635
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx * @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo, useCallback } from "react";
import styles from "../index.module.css"; import styles from "../index.module.css";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
...@@ -14,82 +14,82 @@ import usePass from "@/hooks/usePass"; ...@@ -14,82 +14,82 @@ import usePass from "@/hooks/usePass";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const TemplateBox = (props: any) => { const TemplateBox = (props: any) => {
const info = props.data; const info = props.data;
const isPass = usePass(); const isPass = usePass();
const navigate = useNavigate(); const navigate = useNavigate();
const addTemplateBlock = useCallback( const addTemplateBlock = useCallback(
(id: string) => { (id: string) => {
navigate(`/product/cadd/projectSubmitWork`, { navigate(`/product/cadd/projectSubmitWork`, {
state: { id }, state: { id },
}); });
}, },
[navigate] [navigate]
); );
return ( return (
<Box className={styles.templateBlock}> <Box className={styles.templateBlock}>
<Box> <Box>
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
fontWeight: "600", fontWeight: "600",
color: "#1E2633", color: "#1E2633",
marginBottom: "4px", marginBottom: "4px",
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", textOverflow: "ellipsis",
}} }}
> >
{info.title} {info.title}
</Typography> </Typography>
<Box sx={{ display: "flex", marginBottom: "8px" }}> <Box sx={{ display: "flex", marginBottom: "8px" }}>
<Typography <Typography
sx={{ sx={{
fontSize: "12px", fontSize: "12px",
fontWeight: "400", fontWeight: "400",
color: "#1370FF", color: "#1370FF",
marginRight: "24px", marginRight: "24px",
}} }}
> >
版本：{info.version} 版本：{info.version}
</Typography> </Typography>
<Typography <Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }} sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
> >
更新时间：{info.updateTime} 更新时间：{info.updateTime}
</Typography> </Typography>
</Box> </Box>
<Typography className={styles.templateDescText}> <Typography className={styles.templateDescText}>
{info.description} {info.description}
</Typography> </Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "end", justifyContent: "end",
}} }}
> >
{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && ( {isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
<Button <Button
size={"small"} size={"small"}
text={"删除模版"} text={"删除模版"}
click={() => { click={() => {
props.startDialog(info.id); props.startDialog(info.id);
}} }}
style={{ backgroundColor: "#F0F2F5", color: "#565C66" }} style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
/> />
)} )}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && ( {isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
<Button <Button
size={"small"} size={"small"}
text={"使用模版"} text={"使用模版"}
click={() => addTemplateBlock(info.id)} click={() => addTemplateBlock(info.id)}
style={{ marginLeft: "12px" }} style={{ marginLeft: "12px" }}
/> />
)} )}
</Box> </Box>
</Box> </Box>
); );
}; };
export default memo(TemplateBox); export default memo(TemplateBox);
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 24d0d635
import styles from "./index.module.css"; import styles from "./index.module.css";
import { import {
ITask, ITask,
IParameter, // IParameter,
} from "../../../Project/ProjectSubmitWork/interface"; } from "../../../Project/ProjectSubmitWork/interface";
import noTemplate from "@/assets/project/noTemplate.svg"; import noTemplate from "@/assets/project/noTemplate.svg";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import classNames from "classnames"; import classNames from "classnames";
type IParameterSettingProps = { type IParameterSettingProps = {
...@@ -15,16 +15,15 @@ type IParameterSettingProps = { ...@@ -15,16 +15,15 @@ type IParameterSettingProps = {
const ParameterSetting = (props: IParameterSettingProps) => { const ParameterSetting = (props: IParameterSettingProps) => {
const { templateConfigInfo, taskId } = props; const { templateConfigInfo, taskId } = props;
const [descRef, setDescRef] = useState<any>(useRef());
const [descHeight, setDescHeight] = useState(0); const [descHeight, setDescHeight] = useState(0);
const [isShowAllDese, setIsShowAllDese] = useState(false); const [isShowAllDese, setIsShowAllDese] = useState(false);
const div = document.getElementById("descHeight");
useEffect(() => { useEffect(() => {
const div = document.getElementById("descHeight");
if (div) { if (div) {
setDescHeight(div.offsetHeight); setDescHeight(div.offsetHeight);
} }
}, [descRef]); }, [div]);
const taskInfo: ITask | null = useMemo(() => { const taskInfo: ITask | null = useMemo(() => {
if (!taskId) { if (!taskId) {
...@@ -42,100 +41,69 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -42,100 +41,69 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}, [templateConfigInfo, taskId]); }, [templateConfigInfo, taskId]);
// 输入参数 // 输入参数
const inParameters: Array<IParameter> = useMemo(() => { // const inParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) { // if (!taskInfo) {
return []; // return [];
} else { // } else {
return taskInfo.parameters.filter( // return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "in" // (parameter) => parameter.parameterGroup === "in"
); // );
} // }
}, [taskInfo]); // }, [taskInfo]);
// 输出参数 // // 输出参数
const outParameters: Array<IParameter> = useMemo(() => { // const outParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) { // if (!taskInfo) {
return []; // return [];
} else { // } else {
return taskInfo.parameters.filter( // return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "out" // (parameter) => parameter.parameterGroup === "out"
); // );
} // }
}, [taskInfo]); // }, [taskInfo]);
// 基础参数 // // 基础参数
const basisParameters: Array<IParameter> = useMemo(() => { // const basisParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) { // if (!taskInfo) {
return []; // return [];
} else { // } else {
return taskInfo.parameters.filter( // return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "basis" // (parameter) => parameter.parameterGroup === "basis"
); // );
} // }
}, [taskInfo]); // }, [taskInfo]);
// 高级选项 // // 高级选项
const seniorParameters: Array<IParameter> = useMemo(() => { // const seniorParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) { // if (!taskInfo) {
return []; // return [];
} else { // } else {
return taskInfo.parameters.filter( // return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "senior" // (parameter) => parameter.parameterGroup === "senior"
); // );
} // }
}, [taskInfo]); // }, [taskInfo]);
// 硬件配置 // // 硬件配置
const hardwareParameters: Array<IParameter> = useMemo(() => { // const hardwareParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) { // if (!taskInfo) {
return []; // return [];
} else { // } else {
return taskInfo.parameters.filter( // return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "hardware" // (parameter) => parameter.parameterGroup === "hardware"
); // );
} // }
}, [taskInfo]); // }, [taskInfo]);
return ( return (
<div className={styles.parameterSetting}> <div className={styles.parameterSetting}>
{/* <div className={styles.taskInfo}>
<div className={styles.taskTitle}>taskTitle</div>
<div className={styles.taskVersion}>version</div>
<div
className={styles.taskDescriptionHeight}
id="descHeight"
ref={descRef}
>
埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
</div>
<div
className={classNames({
[styles.taskDescriptionAll]: isShowAllDese,
[styles.taskDescription]: !isShowAllDese,
})}
>
埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
{descHeight > 60 && (
<span
className={styles.descButton}
onClick={() => setIsShowAllDese(!isShowAllDese)}
>
{isShowAllDese ? "收起" : "展开"}
</span>
)}
</div>
</div> */}
{taskInfo && ( {taskInfo && (
<div className={styles.taskInfo}> <div className={styles.taskInfo}>
<div className={styles.taskTitle}>{taskInfo.title || "-"}</div> <div className={styles.taskTitle}>{taskInfo.title || "-"}</div>
<div className={styles.taskVersion}> <div className={styles.taskVersion}>
版本：{taskInfo.version || "-"} 版本：{taskInfo.version || "-"}
</div> </div>
<div <div className={styles.taskDescriptionHeight} id="descHeight">
className={styles.taskDescriptionHeight}
id="descHeight"
ref={descRef}
>
{taskInfo.description || "-"} {taskInfo.description || "-"}
</div> </div>
<div <div
...@@ -156,12 +124,12 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -156,12 +124,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
</div> </div>
</div> </div>
)} )}
{/* {!taskInfo && ( {!taskInfo && (
<div className={styles.noData}> <div className={styles.noData}>
<img src={noTemplate} alt="" className={styles.noDataImg} /> <img src={noTemplate} alt="" className={styles.noDataImg} />
<span className={styles.noDataText}>选中任意算子进行参数设置</span> <span className={styles.noDataText}>选中任意算子进行参数设置</span>
</div> </div>
)} */} )}
</div> </div>
); );
}; };
......
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