Skip to content

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

fix: 解决一个页面出现两个确认弹窗的问题

parent 426e9607
Hide whitespace changes
Inline Side-by-side
Showing with 315 additions and 197 deletions
src/components/mui/MyPopconfirm.tsx
View file @ ed3d6226
import * as React from "react";
import { ReactNode, useEffect } from "react";
import Box from "@mui/material/Box";
import ButtonComponent from "./Button";
import tipsIcon from "@/assets/project/information-outline.svg";
import Popper from "@mui/material/Popper";
type IMyPopconfirmProps = {
title: string | ReactNode;
cancelText?: string;
okText?: string;
showCancel?: boolean;
onCancel?: any;
onConfirm?: any;
children: ReactNode;
};
const MyPopconfirm = (props: IMyPopconfirmProps) => {
const {
title,
cancelText = "取消",
okText = "确认",
showCancel = true,
onCancel,
onConfirm,
} = props;
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
event.nativeEvent.stopImmediatePropagation();
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popper" : undefined;
const handleCancel = () => {
setAnchorEl(null);
onCancel && onCancel();
};
const handleOk = () => {
setAnchorEl(null);
onConfirm && onConfirm();
};
useEffect(() => {
document.addEventListener("click", (e) => {
setAnchorEl(null);
});
}, []);
return (
<div>
<div aria-describedby={id} onClick={handleClick}>
{props.children && props.children}
</div>
<Popper
id={id}
open={open}
anchorEl={anchorEl}
sx={{
zIndex: 2000,
bgcolor: "#fff",
minWidth: "200px",
borderRadius: "2px",
padding: "20px 16px",
boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
}}
>
{/* "0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d", */}
<Box sx={{ marginBottom: "16px" }}>
<img
style={{ marginRight: "12px", position: "relative", top: "3px" }}
src={tipsIcon}
alt=""
/>
{title}
</Box>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
{showCancel && (
<ButtonComponent
text={cancelText}
// variant="text"
size="small"
color="inherit"
click={handleCancel}
style={{ marginRight: "12px" }}
></ButtonComponent>
)}
<ButtonComponent
text={okText}
// variant="text"
size="small"
click={handleOk}
></ButtonComponent>
</Box>
</Popper>
</div>
);
};
export default MyPopconfirm;
// // 确认提示框， 支持同一页面多个提示框
// import * as React from "react";
// import { ReactNode, useMemo } from "react";
// import { ReactNode, useEffect } from "react";
// import Box from "@mui/material/Box";
// import ButtonComponent from "./Button";
// import tipsIcon from "@/assets/project/information-outline.svg";
......@@ -112,34 +7,17 @@ export default MyPopconfirm;
// type IMyPopconfirmProps = {
// title: string | ReactNode;
// placement?: 'auto-end'
// | 'auto-start'
// | 'auto'
// | 'bottom-end'
// | 'bottom-start'
// | 'bottom'
// | 'left-end'
// | 'left-start'
// | 'left'
// | 'right-end'
// | 'right-start'
// | 'right'
// | 'top-end'
// | 'top-start'
// | 'top';
// anchorEl?: null | HTMLElement;
// cancelText?: string;
// okText?: string;
// showCancel?: boolean;
// onCancel?: any;
// onConfirm?: any;
// children: ReactNode;
// };
// const MyPopconfirm = (props: IMyPopconfirmProps) => {
// const {
// title,
// anchorEl,
// placement='bottom',
// cancelText = "取消",
// okText = "确认",
// showCancel = true,
......@@ -147,26 +25,41 @@ export default MyPopconfirm;
// onConfirm,
// } = props;
// const open = useMemo(()=>{
// return Boolean(anchorEl)
// }, [anchorEl])
// const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
// const handleClick = (event: React.MouseEvent<HTMLElement>) => {
// event.nativeEvent.stopImmediatePropagation();
// setAnchorEl(anchorEl ? null : event.currentTarget);
// };
// const open = Boolean(anchorEl);
// const id = open ? "simple-popper" : undefined;
// const handleCancel = () => {
// setAnchorEl(null);
// onCancel && onCancel();
// };
// const handleOk = () => {
// setAnchorEl(null);
// onConfirm && onConfirm();
// };
// useEffect(() => {
// document.addEventListener("click", (e) => {
// setAnchorEl(null);
// });
// }, []);
// return (
// <div>
// <div aria-describedby={id} onClick={handleClick}>
// {props.children && props.children}
// </div>
// <Popper
// id={id}
// open={open}
// anchorEl={anchorEl}
// placement={placement}
// sx={{
// zIndex: 2000,
// bgcolor: "#fff",
......@@ -176,6 +69,7 @@ export default MyPopconfirm;
// boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
// }}
// >
// {/* "0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d", */}
// <Box sx={{ marginBottom: "16px" }}>
// <img
// style={{ marginRight: "12px", position: "relative", top: "3px" }}
......@@ -188,6 +82,7 @@ export default MyPopconfirm;
// {showCancel && (
// <ButtonComponent
// text={cancelText}
// // variant="text"
// size="small"
// color="inherit"
// click={handleCancel}
......@@ -196,13 +91,118 @@ export default MyPopconfirm;
// )}
// <ButtonComponent
// text={okText}
// // variant="text"
// size="small"
// click={handleOk}
// ></ButtonComponent>
// </Box>
// </Popper>
// </div>
// );
// };
// export default MyPopconfirm;
// 确认提示框， 支持同一页面多个提示框
import * as React from "react";
import { ReactNode, useMemo } from "react";
import Box from "@mui/material/Box";
import ButtonComponent from "./Button";
import tipsIcon from "@/assets/project/information-outline.svg";
import Popper from "@mui/material/Popper";
type IMyPopconfirmProps = {
title: string | ReactNode;
placement?:
| "auto-end"
| "auto-start"
| "auto"
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
anchorEl?: null | HTMLElement;
cancelText?: string;
okText?: string;
showCancel?: boolean;
onCancel?: any;
onConfirm?: any;
};
const MyPopconfirm = (props: IMyPopconfirmProps) => {
const {
title,
anchorEl,
placement = "bottom",
cancelText = "取消",
okText = "确认",
showCancel = true,
onCancel,
onConfirm,
} = props;
const open = useMemo(() => {
return Boolean(anchorEl);
}, [anchorEl]);
const id = open ? "simple-popper" : undefined;
const handleCancel = () => {
onCancel && onCancel();
};
const handleOk = () => {
onConfirm && onConfirm();
};
return (
<Popper
id={id}
open={open}
anchorEl={anchorEl}
placement={placement}
sx={{
zIndex: 2000,
bgcolor: "#fff",
minWidth: "200px",
borderRadius: "2px",
padding: "20px 16px",
boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
}}
>
<Box sx={{ marginBottom: "16px" }}>
<img
style={{ marginRight: "12px", position: "relative", top: "3px" }}
src={tipsIcon}
alt=""
/>
{title}
</Box>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
{showCancel && (
<ButtonComponent
text={cancelText}
size="small"
color="inherit"
click={handleCancel}
style={{ marginRight: "12px" }}
></ButtonComponent>
)}
<ButtonComponent
text={okText}
size="small"
click={handleOk}
></ButtonComponent>
</Box>
</Popper>
);
};
export default MyPopconfirm;
src/views/Project/ProjectJobDetail/index.tsx
View file @ ed3d6226
......@@ -293,6 +293,30 @@ const ProjectSubmitWork = observer(() => {
}
}, [isPass, state]);
const [goToProjectDataPath, setGoToProjectDataPath] = useState("");
const [popperTitle, setPopperTitle] = useState(
"正在运行的任务终止后将无法重新运行，确认继续吗？"
);
const [anchorEl, setAnchorEl] = useState<any>(null);
const handleCancel = () => {
setAnchorEl(null);
};
const handleShowPopper = (e: any, title: string) => {
setPopperTitle(title);
setAnchorEl(anchorEl ? null : e.currentTarget);
};
const handleConfirm = () => {
if (popperTitle === "正在运行的任务终止后将无法重新运行，确认继续吗？") {
onStopJob();
} else if (popperTitle === "任务被删除后将无法恢复，确认继续吗？") {
onDeleteJob();
} else {
goToProjectData(goToProjectDataPath);
}
};
return (
<div className={styles.swBox}>
{fullScreenShow ? null : (
......@@ -318,7 +342,7 @@ const ProjectSubmitWork = observer(() => {
</div>
{returnPermission && (
<div className={styles.swHeaderRight}>
<MyPopconfirm
{/* <MyPopconfirm
title={
state === "RUNNING"
? "正在运行的任务终止后将无法重新运行，确认继续吗？"
......@@ -327,14 +351,22 @@ const ProjectSubmitWork = observer(() => {
onConfirm={() => {
state === "RUNNING" ? onStopJob() : onDeleteJob();
}}
>
<ButtonComponent
text={state === "RUNNING" ? "终止" : "删除"}
variant="outlined"
color="secondary"
// click={onStopJob}
></ButtonComponent>
</MyPopconfirm>
> */}
<ButtonComponent
text={state === "RUNNING" ? "终止" : "删除"}
variant="outlined"
color="secondary"
click={(e: any) =>
handleShowPopper(
e,
state === "RUNNING"
? "正在运行的任务终止后将无法重新运行，确认继续吗？"
: "任务被删除后将无法恢复，确认继续吗？"
)
}
// click={onStopJob}
></ButtonComponent>
{/* </MyPopconfirm> */}
</div>
)}
</div>
......@@ -350,23 +382,32 @@ const ProjectSubmitWork = observer(() => {
{randerOutputs1.map((item, index) => {
return (
<div key={index} className={styles.outputLi}>
<MyPopconfirm
{/* <MyPopconfirm
title="即将跳转至项目数据内该任务的结果目录，确认继续吗？"
onConfirm={() =>
goToProjectData(getFolderPath(item.path))
}
> */}
<div
className={styles.outputLiLeft}
onClick={(e: any) => {
handleShowPopper(
e,
"即将跳转至项目数据内该任务的结果目录，确认继续吗？"
);
setGoToProjectDataPath(getFolderPath(item.path));
}}
>
<div className={styles.outputLiLeft}>
<img
className={styles.outputLiLeftImg}
src={
item.type === "file" ? fileIcon : dataSetIcon
}
alt=""
/>
{item.name}
</div>
</MyPopconfirm>
<img
className={styles.outputLiLeftImg}
src={
item.type === "file" ? fileIcon : dataSetIcon
}
alt=""
/>
{item.name}
</div>
{/* </MyPopconfirm> */}
<span className={styles.outputLiRight}>
{item.size}
</span>
......@@ -622,6 +663,12 @@ const ProjectSubmitWork = observer(() => {
onClick={() => setFullScreenShow(!fullScreenShow)}
alt="全屏"
/>
<MyPopconfirm
title={popperTitle}
anchorEl={anchorEl}
onCancel={handleCancel}
onConfirm={handleConfirm}
/>
</div>
);
});
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ ed3d6226
......@@ -202,31 +202,57 @@ const ProjectSubmitWork = observer(() => {
}
};
const [popperTitle, setPopperTitle] = useState(
"提交前请先确认参数填写无误，确认提交吗？"
);
const [anchorEl, setAnchorEl] = useState<any>(null);
const handleCancel = () => {
setAnchorEl(null);
};
const handleShowPopper = (e: any, title: string) => {
setPopperTitle(title);
setAnchorEl(anchorEl ? null : e.currentTarget);
};
const handleConfirm = () => {
if (popperTitle === "提交前请先确认参数填写无误，确认提交吗？") {
handleSubmitForm();
} else {
handleGoBack();
}
};
return (
<div className={styles.swBox}>
{fullScreenShow ? null : (
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<MyPopconfirm
{/* <MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？"
onConfirm={handleGoBack}
> */}
<IconButton
color="primary"
onClick={(e: any) =>
handleShowPopper(
e,
"返回后，当前页面已填写内容将不保存，确认返回吗？"
)
}
aria-label="upload picture"
component="span"
size="small"
>
<IconButton
color="primary"
// onClick={() => handleGoBack()}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
</MyPopconfirm>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
{/* </MyPopconfirm> */}
<div className={styles.swTemplateTitle}>
{templateConfigInfo?.title}
......@@ -250,15 +276,18 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.swHeaderGoback}></div>
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
{/* <MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={handleSubmitForm}
>
<ButtonComponent
text="提交任务"
// click={handleSubmitForm}
></ButtonComponent>
</MyPopconfirm>
> */}
<ButtonComponent
text="提交任务"
// click={handleSubmitForm}
click={(e: any) =>
handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
}
></ButtonComponent>
{/* </MyPopconfirm> */}
</div>
</div>
)}
......@@ -290,6 +319,12 @@ const ProjectSubmitWork = observer(() => {
onClick={() => setFullScreenShow(!fullScreenShow)}
alt="全屏"
/>
<MyPopconfirm
title={popperTitle}
anchorEl={anchorEl}
onCancel={handleCancel}
onConfirm={handleConfirm}
/>
</div>
);
});
......
src/views/WorkFlowEdit/index.tsx
View file @ ed3d6226
......@@ -41,40 +41,70 @@ const WorkFlowEdit = (props: IProps) => {
const [leftContentType, setLeftContentType] = useState("list");
const [popperTitle, setPopperTitle] = useState(
"返回后，当前页面已填写内容将不保存，确认返回吗？"
);
// 返回后，当前页面已填写内容将不保存，确认返回吗？
const [anchorEl, setAnchorEl] = useState<any>(null);
const handleCancel = () => {
setAnchorEl(null);
};
const handleShowPopper = (e: any, title: string) => {
setPopperTitle(title);
setAnchorEl(anchorEl ? null : e.currentTarget);
};
const handleConfirm = () => {
if (popperTitle === "返回后，当前页面已填写内容将不保存，确认返回吗？") {
onBack && onBack();
} else {
console.log("提交");
}
};
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<MyPopconfirm
{/* <MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？"
onConfirm={onBack}
> */}
<IconButton
color="primary"
aria-label="upload picture"
component="span"
size="small"
onClick={(e: any) =>
handleShowPopper(
e,
"返回后，当前页面已填写内容将不保存，确认返回吗？"
)
}
>
<IconButton
color="primary"
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
</MyPopconfirm>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
{/* </MyPopconfirm> */}
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
{/* <MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={() => console.log(2)}
>
<ButtonComponent
text="保存"
// click={handleSubmitForm}
></ButtonComponent>
</MyPopconfirm>
> */}
<ButtonComponent
text="保存"
click={(e: any) =>
handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
}
></ButtonComponent>
{/* </MyPopconfirm> */}
</div>
</div>
<div className={styles.swContent}>
......@@ -115,6 +145,12 @@ const WorkFlowEdit = (props: IProps) => {
/>
</div>
</div>
<MyPopconfirm
title={popperTitle}
anchorEl={anchorEl}
onCancel={handleCancel}
onConfirm={handleConfirm}
/>
</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