封装-询问框

src/components/MyPopconfirm.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from "react";
+import { Button, Popconfirm } from "antd";
+
+type Props = {
+  txtK: "删除" | "取消" | "重置密码"|'退出登录';
+  onConfirm: () => void;
+  Dom?: React.ReactNode;
+  loc?: 'bottom';
+};
+
+function MyPopconfirm({ txtK, onConfirm, Dom, loc }: Props) {
+  const txt = useMemo(() => {
+    const obj = {
+      删除: ["删除后无法恢复，是否删除?", "删除"],
+      取消: ["放弃编辑后，信息将不会保存!", "放弃"],
+      重置密码: ["密码重制后为123456，是否重置?", "重置"],
+      退出登录:['确定退出吗?','确定']
+    };
+    return Reflect.get(obj, txtK) || ["", ""];
+  }, [txtK]);
+
+  return (
+    <Popconfirm
+      placement={loc}
+      title={txt[0]}
+      okText={txt[1]}
+      cancelText="取消"
+      onConfirm={onConfirm}
+      okButtonProps={{ loading: false }}
+    >
+      {Dom ? (
+        Dom
+      ) : (
+        <Button size="small" type="text" danger>
+          {txtK}
+        </Button>
+      )}
+    </Popconfirm>
+  );
+}
+
+const MemoMyPopconfirm = React.memo(MyPopconfirm);
+
+export default MemoMyPopconfirm;

src/components/ZupOne/index.tsx

@@ -11,11 +11,12 @@ import {
 import store from "@/store";
 import { baseURL } from "@/utils/http";
 import classNames from "classnames";
-import { Button, Popconfirm } from "antd";
+import { Button } from "antd";
 import { MessageFu } from "@/utils/message";
 import { fileDomInitialFu } from "@/utils/domShow";
 import { API_upFile } from "@/store/action/layout";
 import { forwardRef, useImperativeHandle } from "react";
+import MyPopconfirm from "../MyPopconfirm";
 
 // 这个组件 只处理 上传 一张图片或者 视频 音频 模型 的情况
 
@@ -167,14 +168,11 @@ function ZupOne(
 
           {/* 删除 */}
           <div className="file_closeBox" hidden={isLook}>
-            <Popconfirm
-              title="删除后无法恢复，是否删除?"
-              okText="删除"
-              cancelText="取消"
+            <MyPopconfirm
+              txtK="删除"
               onConfirm={() => setFileUrl({ fileName: "", filePath: "" })}
-            >
-              <CloseOutlined rev={undefined} />
-            </Popconfirm>
+              Dom={<CloseOutlined rev={undefined} />}
+            />
           </div>
 
           {/* 预览 下载 */}
@@ -225,16 +223,12 @@ function ZupOne(
             <DownloadOutlined rev={undefined} />
           </a>
           {/* 视频删除 */}
-          <Popconfirm
-            title="删除后无法恢复，是否删除?"
-            okText="删除"
-            cancelText="取消"
+
+          <MyPopconfirm
+            txtK="删除"
             onConfirm={() => setFileUrl({ fileName: "", filePath: "" })}
-          >
-            <div className="clearCover" hidden={isLook}>
-              <CloseOutlined rev={undefined} />
-            </div>
-          </Popconfirm>
+            Dom={<CloseOutlined className="clearCover" rev={undefined} />}
+          />
         </div>
       ) : null}
 

src/components/ZupTypes/index.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react";
 import styles from "./index.module.scss";
-import { Button, Checkbox, Popconfirm } from "antd";
+import { Button, Checkbox } from "antd";
 import { forwardRef, useImperativeHandle } from "react";
 import { baseURL } from "@/utils/http";
 import {
@@ -23,6 +23,7 @@ import { fileDomInitialFu } from "@/utils/domShow";
 import store from "@/store";
 import ImageLazy from "../ImageLazy";
 import classNames from "classnames";
+import MyPopconfirm from "../MyPopconfirm";
 
 export type FileListType = {
   fileName: string;
@@ -259,18 +260,15 @@ function ZupTypes(
                 <DownloadOutlined rev={undefined} />
               </a>
 
-              <Popconfirm
-                title="删除后无法恢复，是否删除?"
-                okText="删除"
-                cancelText="取消"
+              <MyPopconfirm
+                txtK="删除"
                 onConfirm={() =>
                   setFileList({ ...fileList, [type]: {} as FileListType })
                 }
-              >
-                <div className="ZTbox2X">
-                  <CloseCircleOutlined rev={undefined} />
-                </div>
-              </Popconfirm>
+                Dom={
+                  <CloseCircleOutlined className="ZTbox2X" rev={undefined} />
+                }
+              />
             </div>
           ) : (
             <>
@@ -435,16 +433,13 @@ function ZupTypes(
                   </a>
                 </div>
 
-                <Popconfirm
-                  title="删除后无法恢复，是否删除?"
-                  okText="删除"
-                  cancelText="取消"
+                <MyPopconfirm
+                  txtK="删除"
                   onConfirm={() => delImgListFu(v.id!)}
-                >
-                  <div className="ZTbox1ImgRowX">
-                    <CloseOutlined rev={undefined} />
-                  </div>
-                </Popconfirm>
+                  Dom={
+                    <CloseOutlined className="ZTbox1ImgRowX" rev={undefined} />
+                  }
+                />
               </div>
             ))}
           </div>

src/pages/A1video/A1add/index.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Form, FormInstance, Input, Popconfirm, Select } from "antd";
+import { Button, Form, FormInstance, Input, Select } from "antd";
 import ZupOne from "@/components/ZupOne";
 import { A1_APIgetInfo, A1_APIsave } from "@/store/action/A1video";
 import { MessageFu } from "@/utils/message";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 type Props = {
   addId: number;
@@ -186,14 +187,11 @@ function A1add({ addId, closeFu, addTableFu, type }: Props) {
               提交
             </Button>
             &emsp;
-            <Popconfirm
-              title="放弃编辑后，信息将不会保存!"
-              okText="放弃"
-              cancelText="取消"
+            <MyPopconfirm
+              txtK="取消"
               onConfirm={closeFu}
-            >
-              <Button>取消</Button>
-            </Popconfirm>
+              Dom={<Button>取消</Button>}
+            />
           </Form.Item>
         </Form>
       </div>

src/pages/A1video/A1main/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Popconfirm } from "antd";
+import { Button } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { A1_APIdel, A1_APIgetList, A1_APIsort } from "@/store/action/A1video";
 import { RootState } from "@/store";
@@ -9,6 +9,7 @@ import { MessageFu } from "@/utils/message";
 import A1add from "../A1add";
 import MyTable from "@/components/MyTable";
 import { A1tableC } from "@/utils/tableData";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 type Props = {
   type: "video" | "poster";
@@ -77,17 +78,7 @@ function A1main({ type }: Props) {
             <Button size="small" type="text" onClick={() => setAddId(item.id)}>
               编辑
             </Button>
-
-            <Popconfirm
-              title="删除后无法恢复，是否删除?"
-              okText="删除"
-              cancelText="取消"
-              onConfirm={() => delTableFu(item.id)}
-            >
-              <Button size="small" type="text" danger>
-                删除
-              </Button>
-            </Popconfirm>
+            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
           </>
         ),
       },

src/pages/A3play/index.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { A3_APIgetConfig, A3_APIsaveConfig } from "@/store/action/A3play";
-import { Button, InputNumber, Popconfirm, Radio } from "antd";
+import { Button, InputNumber, Radio } from "antd";
 import { MessageFu } from "@/utils/message";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 const arr1 = [
   "无",
@@ -95,17 +96,14 @@ function A3play() {
         <div className="A3row3">
           {edit1 ? (
             <>
-              <Popconfirm
-                title="放弃编辑后，信息将不会保存!"
-                okText="放弃"
-                cancelText="取消"
+              <MyPopconfirm
+                txtK="取消"
                 onConfirm={() => {
                   setVal1(val1Ref.current);
                   setEdit1(false);
                 }}
-              >
-                <Button>取消</Button>
-              </Popconfirm>
+                Dom={<Button>取消</Button>}
+              />
               &emsp;
               <Button type="primary" onClick={() => btnOkFu(1)}>
                 提交
@@ -155,24 +153,25 @@ function A3play() {
         ) : (
           <div className="A3row2">
             {val2.val}
-            {val2.val === "海报" ? <>&emsp;&emsp;轮播间隔：{val2.time}秒</> : ""}
+            {val2.val === "海报" ? (
+              <>&emsp;&emsp;轮播间隔：{val2.time}秒</>
+            ) : (
+              ""
+            )}
           </div>
         )}
 
         <div className="A3row3">
           {edit2 ? (
             <>
-              <Popconfirm
-                title="放弃编辑后，信息将不会保存!"
-                okText="放弃"
-                cancelText="取消"
+              <MyPopconfirm
+                txtK="取消"
                 onConfirm={() => {
                   setVal2(val2Ref.current);
                   setEdit2(false);
                 }}
-              >
-                <Button>取消</Button>
-              </Popconfirm>
+                Dom={<Button>取消</Button>}
+              />
               &emsp;
               <Button type="primary" onClick={() => btnOkFu(2)}>
                 提交

src/pages/A4exhibit/A4add/index.tsx

@@ -1,18 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { A4_APIgetInfo, A4_APIsave } from "@/store/action/A4exhibit";
-import {
-  Button,
-  DatePicker,
-  Form,
-  FormInstance,
-  Input,
-  Popconfirm,
-} from "antd";
+import { Button, DatePicker, Form, FormInstance, Input } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import ZupOne from "@/components/ZupOne";
 import dayjs from "dayjs";
 import { MessageFu } from "@/utils/message";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 type Props = {
   addId: number;
@@ -198,14 +192,11 @@ function A4add({ addId, closeFu, addTableFu, editTableFu }: Props) {
               提交
             </Button>
             &emsp;
-            <Popconfirm
-              title="放弃编辑后，信息将不会保存!"
-              okText="放弃"
-              cancelText="取消"
+            <MyPopconfirm
+              txtK="取消"
               onConfirm={closeFu}
-            >
-              <Button>取消</Button>
-            </Popconfirm>
+              Dom={<Button>取消</Button>}
+            />
           </Form.Item>
         </Form>
       </div>

src/pages/A4exhibit/index.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react";
 import styles from "./index.module.scss";
-import { Button, Input, Popconfirm } from "antd";
+import { Button, Input } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { A4_APIdel, A4_APIgetList } from "@/store/action/A4exhibit";
 import { RootState } from "@/store";
@@ -15,6 +15,7 @@ import { MessageFu } from "@/utils/message";
 import A4add from "./A4add";
 import MyTable from "@/components/MyTable";
 import { A4tableC } from "@/utils/tableData";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 function A4exhibit() {
   const dispatch = useDispatch();
@@ -83,16 +84,7 @@ function A4exhibit() {
               编辑
             </Button>
 
-            <Popconfirm
-              title="删除后无法恢复，是否删除?"
-              okText="删除"
-              cancelText="取消"
-              onConfirm={() => delTableFu(item.id)}
-            >
-              <Button size="small" type="text" danger>
-                删除
-              </Button>
-            </Popconfirm>
+            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
           </>
         ),
       },

src/pages/A5goods/A5add/index.tsx

@@ -8,7 +8,6 @@ import {
   Form,
   FormInstance,
   Input,
-  Popconfirm,
   Radio,
   Select,
 } from "antd";
@@ -16,6 +15,7 @@ import ZupOne from "@/components/ZupOne";
 import TextArea from "antd/es/input/TextArea";
 import ZupTypes from "@/components/ZupTypes";
 import { MessageFu } from "@/utils/message";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 type Props = {
   addId: number;
@@ -271,14 +271,11 @@ function A5add({ addId, closeFu, addTableFu, editTableFu }: Props) {
             </Button>
             <br />
             <br />
-            <Popconfirm
-              title="放弃编辑后，信息将不会保存!"
-              okText="放弃"
-              cancelText="取消"
+            <MyPopconfirm
+              txtK="取消"
               onConfirm={closeFu}
-            >
-              <Button>取消</Button>
-            </Popconfirm>
+              Dom={<Button>取消</Button>}
+            />
           </Form.Item>
         </Form>
       </div>

src/pages/A5goods/index.tsx

@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import styles from "./index.module.scss";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Input, Popconfirm } from "antd";
+import { Button, Input } from "antd";
 import { A5_APIdel, A5_APIgetList } from "@/store/action/A5goods";
 import { RootState } from "@/store";
 import { A5tableType } from "@/types";
@@ -15,6 +15,7 @@ import { MessageFu } from "@/utils/message";
 import A5add from "./A5add";
 import MyTable from "@/components/MyTable";
 import { A5tableC } from "@/utils/tableData";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 // const optionsArr = [
 //   { value: "", label: "全部" },
@@ -91,16 +92,7 @@ function A5goods() {
               编辑
             </Button>
 
-            <Popconfirm
-              title="删除后无法恢复，是否删除?"
-              okText="删除"
-              cancelText="取消"
-              onConfirm={() => delTableFu(item.id)}
-            >
-              <Button size="small" type="text" danger>
-                删除
-              </Button>
-            </Popconfirm>
+            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
           </>
         ),
       },

src/pages/A7user/UserAdd/index.tsx

@@ -1,9 +1,10 @@
 import { getUserInfoByIdAPI, userSaveAPI } from "@/store/action/A7user";
 import { SaveUserType } from "@/types";
 import { MessageFu } from "@/utils/message";
-import { Button, Form, FormInstance, Input, Modal, Popconfirm } from "antd";
+import { Button, Form, FormInstance, Input, Modal } from "antd";
 import React, { useCallback, useEffect, useRef } from "react";
 import styles from "./index.module.scss";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 type Props = {
   id: any;
@@ -41,7 +42,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
         ...values,
         id: id ? id : null,
         // 角色id写死 2=》普通用户
-        roleId:2
+        roleId: 2,
       };
 
       const res: any = await userSaveAPI(obj);
@@ -110,14 +111,11 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
               提交
             </Button>
             &emsp;
-            <Popconfirm
-              title="放弃编辑后，信息将不会保存!"
-              okText="放弃"
-              cancelText="取消"
+            <MyPopconfirm
+              txtK="取消"
               onConfirm={closePage}
-            >
-              <Button>取消</Button>
-            </Popconfirm>
+              Dom={<Button>取消</Button>}
+            />
           </Form.Item>
         </Form>
       </div>

src/pages/A7user/index.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/store/action/A7user";
 import { UserTableAPIType, UserTableListType } from "@/types";
 import { MessageFu } from "@/utils/message";
-import { Input, Button, Popconfirm } from "antd";
+import { Input, Button } from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -19,6 +19,7 @@ import styles from "./index.module.scss";
 import UserAdd from "./UserAdd";
 import MyTable from "@/components/MyTable";
 import { A7tableC } from "@/utils/tableData";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 function A7user() {
   const dispatch = useDispatch();
@@ -113,16 +114,15 @@ function A7user() {
             "-"
           ) : (
             <>
-              <Popconfirm
-                title="密码重制后为123456，是否重置?"
-                okText="重置"
-                cancelText="取消"
-                onConfirm={() => resetPassFu(item.id!)}
-              >
-                <Button size="small" type="text">
-                  重置密码
-                </Button>
-              </Popconfirm>
+              <MyPopconfirm
+                txtK="重置密码"
+                onConfirm={() => resetPassFu(item.id)}
+                Dom={
+                  <Button size="small" type="text">
+                    重置密码
+                  </Button>
+                }
+              />
 
               <Button
                 size="small"
@@ -131,16 +131,7 @@ function A7user() {
               >
                 编辑
               </Button>
-              <Popconfirm
-                title="删除后无法恢复，是否删除?"
-                okText="删除"
-                cancelText="取消"
-                onConfirm={() => delTableFu(item.id!)}
-              >
-                <Button size="small" type="text" danger>
-                  删除
-                </Button>
-              </Popconfirm>
+              <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
             </>
           );
         },

src/pages/Layout/index.tsx

@@ -12,7 +12,7 @@ import { Route, Switch, useLocation } from "react-router-dom";
 import AuthRoute from "@/components/AuthRoute";
 import classNames from "classnames";
 import history from "@/utils/history";
-import { Button, Form, Input, Modal, Popconfirm } from "antd";
+import { Button, Form, Input, Modal } from "antd";
 import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
 import { passWordEditAPI } from "@/store/action/layout";
@@ -23,6 +23,7 @@ import NotFound from "@/components/NotFound";
 
 import { RouterType, RouterTypeRow } from "@/types";
 import tabLeftArr from "./data";
+import MyPopconfirm from "@/components/MyPopconfirm";
 
 function Layout() {
   // 左侧菜单 和 路由 信息
@@ -158,16 +159,12 @@ function Layout() {
             <div className="userSet">
               <div>
                 <span onClick={() => setOpen(true)}>修改密码</span>
-                <Popconfirm
-                  placement="bottom"
-                  title="确定退出吗?"
-                  okText="确定"
-                  cancelText="取消"
+                <MyPopconfirm
+                  txtK="退出登录"
                   onConfirm={loginExit}
-                  okButtonProps={{ loading: false }}
-                >
-                  退出登录
-                </Popconfirm>
+                  Dom="退出登录"
+                  loc="bottom"
+                />
               </div>
             </div>
           </div>