feat: 新增轻量级确认弹窗MyPopconfirm

src/components/mui/MyPopconfirm.tsx

+import * as React from "react";
+import { ReactNode } from "react";
+import Box from "@mui/material/Box";
+import ButtonComponent from "./Button";
+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>) => {
+    console.log(123);
+    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();
+  };
+
+  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",
+          width: "200px",
+          borderRadius: "2px",
+          padding: "16px 16px 8px",
+          boxShadow:
+            "0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d",
+        }}
+      >
+        <Box sx={{ marginBottom: "8px" }}>{title}</Box>
+        <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+          {showCancel && (
+            <ButtonComponent
+              text={cancelText}
+              variant="text"
+              size="small"
+              color="secondary"
+              click={handleCancel}
+            ></ButtonComponent>
+          )}
+          <ButtonComponent
+            text={okText}
+            variant="text"
+            size="small"
+            click={handleOk}
+          ></ButtonComponent>
+        </Box>
+      </Popper>
+    </div>
+  );
+};
+
+export default MyPopconfirm;

src/views/Project/ProjectSubmitWork/index.tsx

@@ -24,6 +24,7 @@ import { templateConfigJson } from "./mock";
 import { useMessage } from "@/components/MySnackbar";
 import { toJS } from "mobx";
 import { useStores } from "@/store";
+import MyPopconfirm from "@/components/mui/MyPopconfirm";
 
 const ProjectSubmitWork = () => {
   const Message = useMessage();
@@ -35,21 +36,32 @@ const ProjectSubmitWork = () => {
   const navigate = useNavigate();
   let configFormRef: any = React.createRef();
 
+  // 前往工作台
+  const goToWorkbench = () => {
+    navigate("/product/cadd/projectWorkbench");
+  };
+
+  // 返回
+  const handleGoBack = () => {
+    goToWorkbench();
+  };
+
+  if (!location?.state?.id) {
+    goToWorkbench();
+  }
+
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchTemplateConfigInfo, {
     onSuccess: (res: IResponse<ITemplateConfig>) => {
       setTemplateConfigInfo(res.data);
       configFormRef.current.setInitName(res.data.title);
-      // setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
     },
-    // onError: () => {
-    //   setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
-    // }
   });
 
   const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, {
     onSuccess: (res) => {
-      console.log(res);
+      Message.success("提交成功");
+      goToWorkbench();
     },
   });
 
@@ -156,21 +168,26 @@ const ProjectSubmitWork = () => {
     <div className={styles.swBox}>
       <div className={styles.swHeader}>
         <div className={styles.swHeaderLeft}>
-          <IconButton
-            color="primary"
-            onClick={() => navigate(-1)}
-            aria-label="upload picture"
-            component="span"
-            size="small"
+          <MyPopconfirm
+            title="返回后，当前页面已填写内容将不保存，确认返回吗？"
+            onConfirm={handleGoBack}
           >
-            <ArrowBackIosNewIcon
-              sx={{
-                color: "rgba(194, 198, 204, 1)",
-                width: "12px",
-                height: "12px",
-              }}
-            />
-          </IconButton>
+            <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>
 
           <div className={styles.swTemplateTitle}>
             {templateConfigInfo?.title}
@@ -190,10 +207,15 @@ const ProjectSubmitWork = () => {
           <div className={styles.swHeaderGoback}></div>
         </div>
         <div className={styles.swHeaderRight}>
-          <ButtonComponent
-            text="提交任务"
-            click={handleSubmitForm}
-          ></ButtonComponent>
+          <MyPopconfirm
+            title="提交前请先确认参数填写无误，确认提交吗？"
+            onConfirm={handleSubmitForm}
+          >
+            <ButtonComponent
+              text="提交任务"
+              // click={handleSubmitForm}
+            ></ButtonComponent>
+          </MyPopconfirm>
         </div>
       </div>
       <div className={styles.swContent}>