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