perf: perf

src/pages/mobileConfig/menuconfig/AddForm.jsx

@@ -5,7 +5,7 @@ import PicturesWall from '@/components/Upload/index';
 
 const { Item } = Form;
 const AddForm = props => {
-  const { submitCallback, nodeType, nodeObj, addType } = props;
+  const { submitCallback, nodeType, nodeObj, addType, submitLoading } = props;
   const [form] = Form.useForm();
   const [otherForm] = Form.useForm();
   console.log(nodeObj, 'nodeObj');
@@ -99,7 +99,7 @@ const AddForm = props => {
             <Input />
           </Item>
           <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
-            <Button type="primary" htmlType="submit">
+            <Button type="primary" htmlType="submit" loading={submitLoading}>
               提交
             </Button>
           </Item>
@@ -187,7 +187,7 @@ const AddForm = props => {
             <Input />
           </Item>
           <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
-            <Button type="primary" htmlType="submit">
+            <Button type="primary" htmlType="submit" loading={submitLoading}>
               提交
             </Button>
           </Item>

src/pages/mobileConfig/menuconfig/miniMenu.jsx

@@ -44,11 +44,14 @@ const MiniMenu = props => {
   const [info, setInfo] = useState({});
   const [addVisible, setAddVisible] = useState(false); // 新增弹窗
   const [addTwoVisible, setAddTwoVisible] = useState(false); // 编辑弹窗
+  const [delVisible, setDelVisible] = useState(false); // 删除弹窗
   const [addFlag, setAddFlag] = useState('root'); // 设置新增标志
   const [nodeObj, setNodeObj] = useState({});
   const [addType, setAddType] = useState(''); // 添加下级类型
   const [modalTitle, setModalTitle] = useState('');
   const [roleList, setRoleList] = useState([]); // 复选框选中的值
+  const [modalLoading, setModalLoading] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
   // 获取菜单树
   useEffect(() => {
     updateTrees();
@@ -106,17 +109,10 @@ const MiniMenu = props => {
                 <FileAddTwoTone onClick={() => addMenuTip(obj)} />
               </Tooltip>
             )}
-            <Popconfirm
-              cancelText="取消"
-              okText="确定"
-              title={`确定删除${obj.text}？`}
-              onConfirm={() => deleteMenuTip(obj)}
-              placement="right"
-            >
-              <Tooltip title="删除菜单" className={styles.fs}>
-                <DeleteTwoTone />
-              </Tooltip>
-            </Popconfirm>
+
+            <Tooltip title="删除菜单" className={styles.fs}>
+              <DeleteTwoTone onClick={() => deleteMenuTip(obj)} />
+            </Tooltip>
           </div>
         </div>
       ),
@@ -201,26 +197,41 @@ const MiniMenu = props => {
   // 删除的回调
   const deleteMenuTip = val => {
     console.log(val, 'val');
+    setModalTitle(val.text);
+    setNodeObj(val);
+    setDelVisible(true);
+  };
+  const delMenu = () => {
+    setModalLoading(true);
     deleteMenu({
-      menuID: val.menuID,
+      menuID: nodeObj.menuID,
       _dc: Date.now(),
       _version: 9999,
-    }).then(res => {
-      if (res.success) {
-        setFlag(flag + 1);
-        notification.success({
-          message: '提示',
-          duration: 3,
-          description: '删除成功',
-        });
-      } else {
-        notification.error({
-          message: '提示',
-          duration: 10,
-          description: res.message || '删除成功',
-        });
-      }
-    });
+    })
+      .then(res => {
+        setModalLoading(false);
+        if (res.success) {
+          setDelVisible(false);
+          setFlag(flag + 1);
+          setNodeType('');
+          setNodeObj('');
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: '删除成功',
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 10,
+            description: res.message || '删除失败',
+          });
+        }
+      })
+      .catch(err => {
+        setModalLoading(false);
+        console.log(err);
+      });
   };
   // 新增菜单组
   const addMenuGroupTip = val => {
@@ -232,7 +243,7 @@ const MiniMenu = props => {
   const rootAddGroup = () => {
     setNodeObj('');
     setNodeType(1);
-    setModalTitle('根目录');
+    setModalTitle('最上级列表');
     setAddType(1);
     setAddVisible(true);
   };
@@ -244,7 +255,7 @@ const MiniMenu = props => {
     setAddTwoVisible(true);
   };
   const rootAdd = () => {
-    setModalTitle('根目录');
+    setModalTitle('最上级列表');
     setNodeObj('');
     setNodeType(3);
     setAddType(3);
@@ -252,6 +263,7 @@ const MiniMenu = props => {
   };
   // 新增提交的回调
   const submitCallback = (prop, item) => {
+    setSubmitLoading(true);
     console.log(prop, item);
     let obj = { ...prop };
     const parentID = item.menuID ? item.menuID : -1;
@@ -263,6 +275,7 @@ const MiniMenu = props => {
       ...obj,
     })
       .then(res => {
+        setSubmitLoading(false);
         if (res.success) {
           setAddVisible(false);
           setAddTwoVisible(false);
@@ -282,6 +295,7 @@ const MiniMenu = props => {
         console.log(res, 'resadd');
       })
       .catch(err => {
+        setSubmitLoading(false);
         console.error(err);
       });
   };
@@ -388,7 +402,7 @@ const MiniMenu = props => {
           visible={addVisible}
           title={`在${modalTitle}下新增菜单组`}
           bodyStyle={{ width: '100%', minHeight: '100px' }}
-          style={{ top: 20 }}
+          style={{ top: 80 }}
           width="600px"
           destroyOnClose
           footer={null}
@@ -404,13 +418,14 @@ const MiniMenu = props => {
             nodeObj={nodeObj}
             addType={addType}
             submitCallback={submitCallback}
+            submitLoading={submitLoading}
           />
         </Modal>
         <Modal
           visible={addTwoVisible}
           title={`在${modalTitle}下新增功能菜单`}
           bodyStyle={{ width: '100%', minHeight: '100px' }}
-          style={{ top: 20 }}
+          style={{ top: 80 }}
           width="600px"
           destroyOnClose
           footer={null}
@@ -419,12 +434,28 @@ const MiniMenu = props => {
           onCancel={() => setAddTwoVisible(false)}
         >
           <AddForm
+            submitLoading={submitLoading}
             nodeType={nodeType}
             nodeObj={nodeObj}
             addType={addType}
             submitCallback={submitCallback}
           />
         </Modal>
+        <Modal
+          visible={delVisible}
+          title="请确认"
+          bodyStyle={{ width: '100%', minHeight: '100px' }}
+          style={{ top: 80 }}
+          width="400px"
+          destroyOnClose
+          cancelText="取消"
+          okText="确认"
+          onCancel={() => setDelVisible(false)}
+          onOk={() => delMenu()}
+          confirmLoading={modalLoading}
+        >
+          是否删除<span style={{ color: 'red' }}>{modalTitle}</span>?
+        </Modal>
         <div
           className={classnames({
             [styles.middle]: true,

src/pages/mobileConfig/menuconfig/miniMenu.less

@@ -70,8 +70,9 @@
   margin-left: 10px;
 }
 .rightBox{
-  min-width: 600px;
+  min-width: 200px;
   // width: 600px;
+  width: 100%;
   min-height: 100%;
   border: 1px solid #eee;
   padding: 10px;