Skip to content

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

feat: 弹窗组件替换

parent ef0601fd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 439 additions and 456 deletions
src/components/BusinessComponents/FileSelect/index.tsx
View file @ 865e50bc
import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css";
import MyDialog from "../../mui/Dialog";
import MyDialog from "../../mui/MyDialog";
import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
......
src/components/BusinessComponents/NoProject/NoProject.tsx
View file @ 865e50bc
......@@ -3,33 +3,30 @@ import noData from "@/assets/project/noData.svg";
import { Button } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import AddProject from "@/views/Project/components/AddProject";
import React from "react";
import React, { useState } from "react";
const NoProject = () => {
let addProjectRef: any = React.createRef();
// 新建弹窗显示控制
const [addOpen, setAddOpen] = useState(false);
const handleClickOpen = () => {
addProjectRef.current.handleClickOpen();
};
return (
<div className={style.noProject}>
<img src={noData} alt="" className={style.noDataImg} />
<div className={style.text1}>当前产品暂无项目</div>
<div className={style.text2}>请先创建项目</div>
<Button
variant="contained"
size="large"
className={style.button}
startIcon={<AddIcon />}
onClick={handleClickOpen}
style={{ backgroundColor: "#1370ff", color: "#fff" }}
>
创建项目
</Button>
<AddProject onRef={addProjectRef} />
</div>
);
return (
<div className={style.noProject}>
<img src={noData} alt="" className={style.noDataImg} />
<div className={style.text1}>当前产品暂无项目</div>
<div className={style.text2}>请先创建项目</div>
<Button
variant="contained"
size="large"
className={style.button}
startIcon={<AddIcon />}
onClick={() => setAddOpen(true)}
style={{ backgroundColor: "#1370ff", color: "#fff" }}
>
创建项目
</Button>
<AddProject addOpen={addOpen} setAddOpen={setAddOpen} />
</div>
);
};
export default NoProject;
src/components/mui/DeleteMyDialog.tsx 0 → 100644
View file @ 865e50bc
import {
Button,
Dialog,
DialogActions,
DialogContent,
IconButton,
DialogTitle,
} from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import CloseIcon from "@mui/icons-material/Close";
import { useState } from "react";
import { useImperativeHandle } from "react";
const MyDialog = (props: any) => {
const [open, setOpen] = useState(false);
const {
title,
handleSubmit,
submitloading,
submitStyle = { backgroundColor: "#1370FF" },
showCloseButton = true,
submitText = "确定",
} = props;
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = (event: any = {}, reason: any = "other") => {
// 点击弹窗外不关闭弹窗
if (reason === "backdropClick") {
return;
}
setOpen(false);
};
useImperativeHandle(props.onRef, () => {
return {
handleClickOpen: handleClickOpen,
handleClose: handleClose,
};
});
return (
<Dialog
open={open}
onClose={handleClose}
className="aaa"
aria-labelledby="form-dialog-title"
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
// 设置最大宽度， 实际宽度让子元素撑大
maxWidth: "1920px",
},
},
}}
>
{title && (
<DialogTitle id="form-dialog-title" sx={{ fontWeight: "600" }}>
{title}
</DialogTitle>
)}
<DialogContent
sx={{
minWidth: "400px",
}}
>
{props.children}
<IconButton
aria-label="delete"
style={{ position: "absolute", top: "10px", right: "12px" }}
onClick={handleClose}
>
<CloseIcon style={{ color: "#C2C6CC" }} />
</IconButton>
</DialogContent>
<DialogActions style={{ padding: "16px 24px" }}>
{showCloseButton && (
<Button
onClick={handleClose}
color="inherit"
variant="contained"
style={{ color: "#1E2633", backgroundColor: "#fff" }}
size="small"
>
取消
</Button>
)}
<LoadingButton
loading={submitloading}
onClick={handleSubmit}
color="primary"
variant="contained"
style={submitStyle}
size="small"
>
{submitText}
</LoadingButton>
</DialogActions>
</Dialog>
);
};
export default MyDialog;
src/components/mui/Dialog.tsx deleted 100644 → 0
View file @ ef0601fd
import React from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
export interface IDialogProps {
/** 自定义类名 */
className?: string;
/** 自定义样式 */
style?: React.CSSProperties;
/** 弹窗的标题 */
title?: string;
/** 是否显示弹窗 */
open: boolean;
isHideHeader?: boolean;
/** 是否隐藏弹窗底部按钮部分 */
isHideFooter?: boolean;
/** 自定义底部按钮 */
footerRender?: () => React.ReactNode;
/** 是否显示取消按钮 */
showCancel?: boolean;
/** 是否显示确定按钮 */
showConfirm?: boolean;
/** 关闭弹窗时的回调函数 */
onClose?: () => void;
/** 点击确定按钮时的回调函数 */
onConfirm?: () => void;
/** 取消按钮文案 */
cancelText?: string;
/** 确认按钮文案 */
okText?: string;
/** 是否禁用确认按钮 */
disabledConfirm?: boolean;
children: React.ReactNode;
/** 点击遮罩是否关闭 默认为false*/
clickMaskClose?: boolean;
}
const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
const {
title,
open,
style,
onClose,
onConfirm,
isHideFooter,
isHideHeader,
children,
footerRender,
className,
showCancel = true,
/** 是否显示确定按钮 */
showConfirm = true,
cancelText,
okText,
disabledConfirm,
clickMaskClose = false,
} = props;
const handelClose = (
event: {},
reason: "backdropClick" | "escapeKeyDown"
) => {
if (reason === "backdropClick" && !clickMaskClose) {
return;
}
onClose && onClose();
};
const Footer = () => {
if (isHideFooter) return null;
return footerRender ? (
footerRender()
) : (
<DialogActions style={{ padding: "0 24px 24px 24px" }}>
{showCancel ? (
<Button onClick={onClose} variant="outlined" size="small">
{cancelText || "取消"}
</Button>
) : null}
{showConfirm ? (
<Button
onClick={onConfirm}
variant="contained"
size="small"
disabled={disabledConfirm}
>
{okText || "确定"}
</Button>
) : null}
</DialogActions>
);
};
return (
<Dialog
open={open}
onClose={handelClose}
style={style}
className={className}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
// 设置最大宽度， 实际宽度让子元素撑大
maxWidth: "1920px",
},
},
}}
>
{isHideHeader ? null : (
<DialogTitle id="alert-dialog-title">
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<span>{title}</span>
<CloseIcon
onClick={onClose}
style={{ color: "#C2C6CC", cursor: "pointer" }}
/>
</div>
</DialogTitle>
)}
<DialogContent style={{ minWidth: 400 }}>{children}</DialogContent>
{Footer()}
</Dialog>
);
};
export default MyDialog;
src/components/mui/MyDialog.tsx
View file @ 865e50bc
import React from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
IconButton,
DialogTitle,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
} from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import CloseIcon from "@mui/icons-material/Close";
import { useState } from "react";
import { useImperativeHandle } from "react";
const MyDialog = (props: any) => {
const [open, setOpen] = useState(false);
const {
title,
handleSubmit,
submitloading,
submitStyle = { backgroundColor: "#1370FF" },
showCloseButton = true,
submitText = "确定",
} = props;
const handleClickOpen = () => {
setOpen(true);
};
export interface IDialogProps {
/** 自定义类名 */
className?: string;
/** 自定义样式 */
style?: React.CSSProperties;
/** 弹窗的标题 */
title?: string;
/** 是否显示弹窗 */
open: boolean;
isHideHeader?: boolean;
/** 是否隐藏弹窗底部按钮部分 */
isHideFooter?: boolean;
/** 自定义底部按钮 */
footerRender?: () => React.ReactNode;
/** 是否显示取消按钮 */
showCancel?: boolean;
/** 是否显示确定按钮 */
showConfirm?: boolean;
/** 关闭弹窗时的回调函数 */
onClose?: () => void;
/** 点击确定按钮时的回调函数 */
onConfirm?: () => void;
/** 取消按钮文案 */
cancelText?: string;
/** 确认按钮文案 */
okText?: string;
/** 是否禁用确认按钮 */
disabledConfirm?: boolean;
children: React.ReactNode;
/** 点击遮罩是否关闭 默认为false*/
clickMaskClose?: boolean;
/** 确认按钮样式*/
okSx?: any;
}
const handleClose = (event: any = {}, reason: any = "other") => {
// 点击弹窗外不关闭弹窗
if (reason === "backdropClick") {
return;
}
setOpen(false);
};
const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
const {
title,
open,
style,
onClose,
onConfirm,
isHideFooter,
isHideHeader,
children,
footerRender,
className,
showCancel = true,
/** 是否显示确定按钮 */
showConfirm = true,
cancelText,
okText,
disabledConfirm,
clickMaskClose = false,
okSx = {},
} = props;
useImperativeHandle(props.onRef, () => {
return {
handleClickOpen: handleClickOpen,
handleClose: handleClose,
};
});
const handelClose = (
event: {},
reason: "backdropClick" | "escapeKeyDown"
) => {
if (reason === "backdropClick" && !clickMaskClose) {
return;
}
onClose && onClose();
};
return (
<Dialog
open={open}
onClose={handleClose}
className="aaa"
aria-labelledby="form-dialog-title"
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
// 设置最大宽度， 实际宽度让子元素撑大
maxWidth: "1920px",
},
},
}}
>
{title && (
<DialogTitle id="form-dialog-title" sx={{ fontWeight: "600" }}>
{title}
</DialogTitle>
)}
<DialogContent
sx={{
minWidth: "400px",
}}
>
{props.children}
<IconButton
aria-label="delete"
style={{ position: "absolute", top: "10px", right: "12px" }}
onClick={handleClose}
>
<CloseIcon style={{ color: "#C2C6CC" }} />
</IconButton>
</DialogContent>
<DialogActions style={{ padding: "16px 24px" }}>
{showCloseButton && (
<Button
onClick={handleClose}
color="inherit"
variant="contained"
style={{ color: "#1E2633", backgroundColor: "#fff" }}
size="small"
>
取消
</Button>
)}
<LoadingButton
loading={submitloading}
onClick={handleSubmit}
color="primary"
variant="contained"
style={submitStyle}
size="small"
>
{submitText}
</LoadingButton>
</DialogActions>
</Dialog>
);
const Footer = () => {
if (isHideFooter) return null;
return footerRender ? (
footerRender()
) : (
<DialogActions style={{ padding: "0 24px 24px 24px" }}>
{showCancel ? (
<Button onClick={onClose} variant="outlined" size="small">
{cancelText || "取消"}
</Button>
) : null}
{showConfirm ? (
<Button
onClick={onConfirm}
variant="contained"
size="small"
disabled={disabledConfirm}
sx={{ ...okSx }}
>
{okText || "确定"}
</Button>
) : null}
</DialogActions>
);
};
return (
<Dialog
open={open}
onClose={handelClose}
style={style}
className={className}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
// 设置最大宽度， 实际宽度让子元素撑大
maxWidth: "1920px",
},
},
}}
>
{isHideHeader ? null : (
<DialogTitle id="alert-dialog-title">
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<span>{title}</span>
<CloseIcon
onClick={onClose}
style={{ color: "#C2C6CC", cursor: "pointer" }}
/>
</div>
</DialogTitle>
)}
<DialogContent style={{ minWidth: 400 }}>{children}</DialogContent>
{Footer()}
</Dialog>
);
};
export default MyDialog;
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ 865e50bc
import React, { useState, useEffect } from "react";
import { TextField, Button } from "@mui/material";
import MyDialog from "@/components/mui/Dialog";
import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import CloudEController from "@/api/fileserver/CloudEController";
......
src/views/Project/ProjectData/DeleteDialog/index.tsx
View file @ 865e50bc
import React, { useMemo } from "react";
import MyDialog from "@/components/mui/Dialog";
import MyDialog from "@/components/mui/MyDialog";
import { useMessage } from "@/components/MySnackbar";
import { getDataFileDelPackage } from "@/api/project_api";
import useMyRequest from "@/hooks/useMyRequest";
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ 865e50bc
import React, { useState, useCallback, useMemo, useEffect } from "react";
import style from "./index.module.css";
import MyDialog from "@/components/mui/Dialog";
import MyDialog from "@/components/mui/MyDialog";
import folderIcon from "@/assets/project/folderIcon.svg";
import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ 865e50bc
import React, { useState, useCallback, useMemo, useEffect } from "react";
import style from "./index.module.css";
import MyDialog from "@/components/mui/Dialog";
import MyDialog from "@/components/mui/MyDialog";
import { Button } from "@mui/material";
import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 865e50bc
......@@ -50,6 +50,8 @@ const BaseInfo = observer(() => {
const currentUserName = JSON.parse(
localStorage.getItem("userInfo") || "{}"
).name;
// 弹窗显示控制
const [dialogOpen, setDialogOpen] = useState(false);
// 是否拥有编辑权限
const hasEditAuth = useMemo(() => {
if (!currentUserName) {
......@@ -193,41 +195,29 @@ const BaseInfo = observer(() => {
}
};
const { run: deleteProjectRun, loading: deleteLoading } = useMyRequest(
deleteProject,
{
onSuccess: async (result: any) => {
message.success("删除成功");
DialogRef.current.handleClose();
const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList);
// 项目删完了
if (projectList.length === 0) {
currentProjectStore.changeProject({});
localStorage.setItem("fileServerEndPoint", "");
setProjectInfo({});
} else {
projectList[0].filetoken = getFiletokenAccordingToId(
projectList[0].id
);
const { run: deleteProjectRun } = useMyRequest(deleteProject, {
onSuccess: async (result: any) => {
message.success("删除成功");
setDialogOpen(false);
const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList);
// 项目删完了
if (projectList.length === 0) {
currentProjectStore.changeProject({});
localStorage.setItem("fileServerEndPoint", "");
setProjectInfo({});
} else {
projectList[0].filetoken = getFiletokenAccordingToId(projectList[0].id);
currentProjectStore.changeProject(projectList[0]);
setFileServerEndPointLocalStorage(projectList[0].zoneId);
getFiletokenAccordingToId(projectList[0].id).then((res) => {
projectList[0].filetoken = res;
currentProjectStore.changeProject(projectList[0]);
setFileServerEndPointLocalStorage(projectList[0].zoneId);
getFiletokenAccordingToId(projectList[0].id).then((res) => {
projectList[0].filetoken = res;
currentProjectStore.changeProject(projectList[0]);
});
setProjectInfo(projectList[0]);
}
},
}
);
let DialogRef: any = React.createRef();
// 显示删除弹窗
const handleClickDelete = () => {
DialogRef.current.handleClickOpen();
setDeleteProjectName("");
};
});
setProjectInfo(projectList[0]);
}
},
});
const deleteProjectNameChange = (e: any) => {
setDeleteProjectName(e.target.value);
......@@ -356,7 +346,7 @@ const BaseInfo = observer(() => {
<Button
variant="contained"
className={style.updateButton}
onClick={handleClickDelete}
onClick={() => setDialogOpen(true)}
style={{
backgroundColor: "#fff",
color: "#FF4E4E",
......@@ -367,11 +357,11 @@ const BaseInfo = observer(() => {
</Button>
</div>
<MyDialog
handleSubmit={handleSubmitDelete}
onRef={DialogRef}
open={dialogOpen}
onConfirm={handleSubmitDelete}
onClose={() => setDialogOpen(false)}
title="删除项目"
submitloading={deleteLoading}
submitStyle={{ background: "#FF4E4E", color: "#fff" }}
okSx={{ background: "#FF4E4E", color: "#fff" }}
>
<div className={style.deleteBox}>
<div className={style.deleteText1}>
......
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ 865e50bc
......@@ -12,7 +12,7 @@ import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
import MySelect, { IOption } from "@/components/mui/MySelect";
import Dialog from "@/components/mui/Dialog";
import Dialog from "@/components/mui/MyDialog";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store/index";
import { IDialogInfo } from "../interface";
......
src/views/Project/ProjectSetting/ProjectMembers/components/RemoveItem.tsx
View file @ 865e50bc
......@@ -8,7 +8,7 @@
*/
// import Dialog from "@/components/Material.Ui/Dialog";
import { IResponse, useHttp } from "@/api/http";
import Dialog from "@/components/mui/Dialog";
import Dialog from "@/components/mui/MyDialog";
import { useMessage } from "@/components/MySnackbar";
import { useStores } from "@/store";
import { toJS } from "mobx";
......@@ -17,50 +17,50 @@ import { memo } from "react";
import { IDialogInfo } from "../interface";
interface IProps {
setRemoveDialog: (val: IDialogInfo) => void;
removeDialog: IDialogInfo;
getTableList: () => void;
setRemoveDialog: (val: IDialogInfo) => void;
removeDialog: IDialogInfo;
getTableList: () => void;
}
const RemoveItem = observer((props: IProps) => {
const { removeDialog, setRemoveDialog, getTableList } = props;
const { removeDialog, setRemoveDialog, getTableList } = props;
const http = useHttp();
const Message = useMessage();
const { currentProjectStore } = useStores();
const http = useHttp();
const Message = useMessage();
const { currentProjectStore } = useStores();
const onClose = () => {
setRemoveDialog({ isShow: false, username: "" });
};
const onConfirm = () => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http
.del<IResponse<any>>(
`/cpp/project/removemember?id=${projectInfo?.id || ""}&username=${
removeDialog.username || ""
}`
)
.then((res) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("移出成功！");
getTableList();
setRemoveDialog({ isShow: false, username: "" });
}
});
};
return (
<>
<Dialog
open={removeDialog?.isShow}
onClose={onClose}
onConfirm={onConfirm}
title="移出项目"
>
<div>确认移出该成员吗？</div>
</Dialog>
</>
);
const onClose = () => {
setRemoveDialog({ isShow: false, username: "" });
};
const onConfirm = () => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http
.del<IResponse<any>>(
`/cpp/project/removemember?id=${projectInfo?.id || ""}&username=${
removeDialog.username || ""
}`
)
.then((res) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("移出成功！");
getTableList();
setRemoveDialog({ isShow: false, username: "" });
}
});
};
return (
<>
<Dialog
open={removeDialog?.isShow}
onClose={onClose}
onConfirm={onConfirm}
title="移出项目"
>
<div>确认移出该成员吗？</div>
</Dialog>
</>
);
});
export default memo(RemoveItem);
src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx
View file @ 865e50bc
import { memo } from "react";
import { Box, Typography } from "@mui/material";
import Dialog from "@/components/mui/Dialog";
import Dialog from "@/components/mui/MyDialog";
const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props;
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx
View file @ 865e50bc
......@@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/Button";
import Dialog from "@/components/mui/Dialog";
import Dialog from "@/components/mui/MyDialog";
import OutlinedInput from "@mui/material/OutlinedInput";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SearchIcon from "@mui/icons-material/Search";
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx
View file @ 865e50bc
import { memo } from "react";
import { Box, Typography } from "@mui/material";
import Dialog from "@/components/mui/Dialog";
import Dialog from "@/components/mui/MyDialog";
const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props;
......
src/views/Project/components/AddProject/index.tsx
View file @ 865e50bc
import style from "./index.module.css";
import { TextField, MenuItem } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog";
import React, { useState, useEffect, useImperativeHandle } from "react";
import React, { useState, useEffect } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { hpczone, addProject } from "@/api/project_api";
import { useMessage } from "@/components/MySnackbar";
......@@ -18,10 +18,15 @@ type zoneIdOption = {
name: string;
};
const AddProject = (props: any) => {
type IAddProjectProps = {
addOpen: boolean;
setAddOpen: any;
};
const AddProject = (props: IAddProjectProps) => {
const { addOpen, setAddOpen } = props;
const { currentProjectStore } = useStores();
const message = useMessage();
let DialogRef: any = React.createRef();
const [name, setName] = useState("");
const [nameCheck, setNameCheck] = useState({
error: false,
......@@ -34,12 +39,6 @@ const AddProject = (props: any) => {
});
const [zoneId, setZoneId] = useState("");
const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
const [submitloading, setSubmitloading] = useState(false);
useImperativeHandle(props.onRef, () => {
return {
handleClickOpen: handleClickOpen,
};
});
// 设置计算区
const { run } = useMyRequest(hpczone, {
......@@ -49,13 +48,9 @@ const AddProject = (props: any) => {
},
});
const { run: addProjectRun } = useMyRequest(addProject, {
onBefore: () => {
setSubmitloading(true);
},
onSuccess: async (result: any) => {
if (result.data) {
setSubmitloading(false);
DialogRef.current.handleClose();
setAddOpen(false);
message.success("新建项目成功");
const projectList = await getProjectList();
currentProjectStore.setProjectList(projectList);
......@@ -74,7 +69,7 @@ const AddProject = (props: any) => {
}
},
onError: () => {
setSubmitloading(false);
setAddOpen(false);
},
});
......@@ -82,18 +77,15 @@ const AddProject = (props: any) => {
run();
}, [run]);
const handleClickOpen = () => {
DialogRef.current.handleClickOpen();
initData();
};
const initData = () => {
setName("");
setDesc("");
if (zoneIdOptions.length > 0) {
setZoneId(zoneIdOptions[0].id);
useEffect(() => {
if (addOpen) {
setName("");
setDesc("");
if (zoneIdOptions.length > 0) {
setZoneId(zoneIdOptions[0].id);
}
}
};
}, [addOpen, setZoneId, zoneIdOptions]);
const checkName = (name: string) => {
if (name) {
......@@ -167,10 +159,10 @@ const AddProject = (props: any) => {
return (
<MyDialog
handleSubmit={handleSubmit}
onRef={DialogRef}
open={addOpen}
onConfirm={handleSubmit}
onClose={() => setAddOpen(false)}
title="新建项目"
submitloading={submitloading}
>
<div className={style.formBox} onClick={handleFromBox}>
<TextField
......
src/views/Project/components/CurrentProject/index.tsx
View file @ 865e50bc
......@@ -8,92 +8,92 @@ import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import AddProject from "../AddProject";
import {
setFileServerEndPointLocalStorage,
getFiletokenAccordingToId,
setFileServerEndPointLocalStorage,
getFiletokenAccordingToId,
} from "@/views/Project/project";
const CurrentProject = observer(() => {
const { currentProjectStore } = useStores();
let addProjectRef: any = React.createRef();
const [projectListOpen, setProjectListOpen] = useState(false);
// const [addProjectOpen, setAddProjectOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const { currentProjectStore } = useStores();
const [projectListOpen, setProjectListOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
// 结合handleShowProjectList中的event.nativeEvent.stopImmediatePropagation();实现点击空白区域隐藏项目列表
useEffect(() => {
document.addEventListener("click", (e) => {
setProjectListOpen(false);
});
}, []);
useEffect(() => {
document.addEventListener("click", (e) => {
setProjectListOpen(false);
});
}, []);
const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
event.nativeEvent.stopImmediatePropagation();
setAnchorEl(event.currentTarget);
setProjectListOpen((previousOpen) => !previousOpen);
};
const canBeOpen = projectListOpen && Boolean(anchorEl);
const id = canBeOpen ? "spring-popper" : undefined;
const handleChangeCurrentProject = (project: any) => {
currentProjectStore.changeProject(project);
setFileServerEndPointLocalStorage(project.zoneId);
getFiletokenAccordingToId(project.id).then((res) => {
project.filetoken = res;
currentProjectStore.changeProject(project);
});
setProjectListOpen(!projectListOpen);
};
const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
event.nativeEvent.stopImmediatePropagation();
setAnchorEl(event.currentTarget);
setProjectListOpen((previousOpen) => !previousOpen);
};
const canBeOpen = projectListOpen && Boolean(anchorEl);
const id = canBeOpen ? "spring-popper" : undefined;
const handleChangeCurrentProject = (project: any) => {
currentProjectStore.changeProject(project);
setFileServerEndPointLocalStorage(project.zoneId);
getFiletokenAccordingToId(project.id).then((res) => {
project.filetoken = res;
currentProjectStore.changeProject(project);
});
setProjectListOpen(!projectListOpen);
};
const openAddProject = () => {
addProjectRef.current.handleClickOpen();
setProjectListOpen(false);
};
const openAddProject = () => {
setAddOpen(true);
setProjectListOpen(false);
};
return (
<div>
<div
className={style.currentProject}
aria-describedby={id}
onClick={handleShowProjectList}
>
<img src={logo} alt="" className={style.logo} />
<div className={style.info}>
<div className={style.productName}>
{currentProjectStore.currentProductInfo.name}
</div>
<div
className={style.projectName}
title={currentProjectStore.currentProjectInfo.name}
>
{currentProjectStore.currentProjectInfo.name || "暂无项目"}
</div>
</div>
<ArrowForwardIosIcon
className={style.showProjectList}
style={{ fontSize: 12 }}
/>
</div>
<AddProject onRef={addProjectRef} />
<Popper
id={id}
open={projectListOpen}
anchorEl={anchorEl}
placement="right-start"
transition
style={{ zIndex: 100 }}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<div>
<ProjectListPopper
handleClickOpen={openAddProject}
handleChangeCurrentProject={handleChangeCurrentProject}
/>
</div>
</Fade>
)}
</Popper>
</div>
);
// 新建弹窗显示控制
const [addOpen, setAddOpen] = useState(false);
return (
<div>
<div
className={style.currentProject}
aria-describedby={id}
onClick={handleShowProjectList}
>
<img src={logo} alt="" className={style.logo} />
<div className={style.info}>
<div className={style.productName}>
{currentProjectStore.currentProductInfo.name}
</div>
<div
className={style.projectName}
title={currentProjectStore.currentProjectInfo.name}
>
{currentProjectStore.currentProjectInfo.name || "暂无项目"}
</div>
</div>
<ArrowForwardIosIcon
className={style.showProjectList}
style={{ fontSize: 12 }}
/>
</div>
<AddProject addOpen={addOpen} setAddOpen={setAddOpen} />
<Popper
id={id}
open={projectListOpen}
anchorEl={anchorEl}
placement="right-start"
transition
style={{ zIndex: 100 }}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<div>
<ProjectListPopper
handleClickOpen={openAddProject}
handleChangeCurrentProject={handleChangeCurrentProject}
/>
</div>
</Fade>
)}
</Popper>
</div>
);
});
export default CurrentProject;
src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx
View file @ 865e50bc
......@@ -7,7 +7,7 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { saveUserSpec } from "@/api/workbench_api";
import MyDialog from "@/components/mui/Dialog";
import MyDialog from "@/components/mui/MyDialog";
import MyInput from "@/components/mui/MyInput";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useState } from "react";
......
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