优化

src/components/Business/MenuTree/index.jsx

@@ -19,13 +19,14 @@ const MenuTree = (props, ref) => {
   const [treeData, setTreeData] = useState([])
   const [expandedKeys, setExpandedKeys] = useState([]);
   const [checkedKeys, setCheckedKeys] = useState([]);
+  const [halfCheckedKeys, setHalfCheckedKeys] = useState([])
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
 
   const queryMenu = async () => {
     const res = await getMenu()
     const { data } = res
-    const treeDataArr = data.slice()
+    const treeDataArr = data ? data.slice() : []
     loopTree(treeDataArr)
     setTreeData(treeDataArr)
   }
@@ -38,9 +39,10 @@ const MenuTree = (props, ref) => {
     setAutoExpandParent(false);
   };
 
-  const onCheck = checkedkeys => {
+  const onCheck = (checkedkeys, e) => {
     // console.log('onCheck', checkedkeys);
     setCheckedKeys(checkedkeys);
+    setHalfCheckedKeys(e.halfCheckedKeys)
   };
 
   const onSelect = (selectedkeys, info) => {
@@ -52,6 +54,10 @@ const MenuTree = (props, ref) => {
     return checkedKeys
   }
 
+  const getHalfCheckedKeys = () => {
+    return halfCheckedKeys
+  }
+
   useEffect(() => {
     queryMenu()
   }, [])
@@ -59,13 +65,14 @@ const MenuTree = (props, ref) => {
   // 暴露给外部的方法
   useImperativeHandle(ref, () => ({
     setCheckedKeys,
-    getCheckedKeys
+    getCheckedKeys,
+    getHalfCheckedKeys
   }))
 
   return (
     <SageTree
       checkable
-      checkStrictly
+      // checkStrictly
       onExpand={onExpand}
       expandedKeys={expandedKeys}
       autoExpandParent={autoExpandParent}

src/components/GlobalHeader/AvatarDropdown.jsx

-import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Menu, Spin } from 'antd';
+import { LogoutOutlined, SettingOutlined, UserOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { Avatar, Menu, Spin, Modal } from 'antd';
 import React from 'react';
 import { history, connect } from 'umi';
 import HeaderDropdown from '../HeaderDropdown';
@@ -8,15 +8,25 @@ import styles from './index.less';
 class AvatarDropdown extends React.Component {
   onMenuClick = event => {
     const { key } = event;
+    const { confirm } = Modal;
+    const { dispatch } = this.props;
 
     if (key === 'logout') {
-      const { dispatch } = this.props;
-
-      if (dispatch) {
-        dispatch({
-          type: 'login/logout',
-        });
-      }
+      confirm({
+        title: '退出登录',
+        icon: <ExclamationCircleOutlined />,
+        content: '您确认要退出吗？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+          if (dispatch) {
+            dispatch({
+              type: 'login/logout',
+            });
+          }
+        },
+        onCancel() { },
+      })
 
       return;
     }
@@ -62,16 +72,16 @@ class AvatarDropdown extends React.Component {
         </span>
       </HeaderDropdown>
     ) : (
-      <span className={`${styles.action} ${styles.account}`}>
-        <Spin
-          size="small"
-          style={{
-            marginLeft: 8,
-            marginRight: 8,
-          }}
-        />
-      </span>
-    );
+        <span className={`${styles.action} ${styles.account}`}>
+          <Spin
+            size="small"
+            style={{
+              marginLeft: 8,
+              marginRight: 8,
+            }}
+          />
+        </span>
+      );
   }
 }
 

src/pages/role/index.jsx

@@ -250,10 +250,12 @@ const TableList = () => {
   // 保存授权菜单
   const onSaveMenuRole = async () => {
     const checkedKeys = menutreeRef.current.getCheckedKeys()
+    const halfCheckedKeys = menutreeRef.current.getHalfCheckedKeys()
 
     const pp = {
       ...role,
-      authList: checkedKeys.checked
+      // authList: checkedKeys.checked   // 非关联
+      authList: checkedKeys.concat(halfCheckedKeys) // 关联
     }
 
     const res = await updateRule(pp)