module-menu 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "module-menu",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "城市大数据平台公共头部及尾部",
   "main":"src/pages/index.jsx",
   "scripts": {

package/src/pages/ModuleMenu/constData.jsx

@@ -1,72 +1,85 @@
 export const menuList = [{
     name: '首页',
     url: require('../../assets/home.svg'),
-    children: []
+    children: [],
 },
 {
     name: '数据汇聚',
     url: require('../../assets/ic_shujuhuiju_m.svg'),
     children: [{
-        childName: '数据集成'
+        childName: '数据集成',
+        path: '/datacollection'
     }]
 },
 {
     name: '数据治理',
     url: require('../../assets/ic_shujuzhili_m.svg'),
     children: [{
-        childName: '数据治理'
+        childName: '数据治理',
+        path: '/dataManager'
     },
     {
-        childName: '元数据管理'
+        childName: '元数据管理',
+        path: '/metadata'
     },
     {
-        childName: '数据质量'
+        childName: '数据质量',
+        path: '/quality/'
     }]
 },
 {
     name: '数据开发',
     url: require('../../assets/ic_shujukaifa_m.svg'),
     children: [{
-        childName: '离线开发'
+        childName: '离线开发',
+        path: '/datadev/'
     },
     {
-        childName: '实时开发'
+        childName: '实时开发',
+        path: '/dataanalytic'
     }]
 },
 {
     name: '数据开放',
     url: require('../../assets/ic_shujukaifang_m.svg'),
     children: [{
-        childName: '数据服务'
+        childName: '数据服务',
+        path: '/dataservice'
     },
     {
-        childName: '数据资产'
+        childName: '数据资产',
+        path: '/dataasset'
     },
     {
-        childName: '数据共享'
+        childName: '数据共享',
+        path: '/datasharing'
     }]
 },
 {
     name: '数据应用',
     url: require('../../assets/ic_shujuyingyong_m.svg'),
     children: [{
-        childName: '数据标签'
+        childName: '数据标签',
+        path: ''
     }]
 },
 {
     name: '公共模块',
     url: require('../../assets/ic_gonggongmokuai_m.svg'),
     children: [{
-        childName: '运维中心'
+        childName: '运维中心',
+        path: '/operate'
     },
     {
-        childName: '系统管理'
+        childName: '系统管理',
+        path: '/admin'
     },
     {
         childName: '工单管理'
     },
     {
-        childName: '消息中心'
+        childName: '消息中心',
+        path: '/alert'
     }]
 }];
 export const menuIconSrc = require('../../assets/menuIcon.svg');

package/src/pages/ModuleMenu/index.jsx

@@ -1,18 +1,28 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { Popconfirm, message } from 'antd';
-import { menuList, menuIconSrc, childIconSrc, sysNameMap } from './constData'
+import { menuList as menuListInit, menuIconSrc, childIconSrc, sysNameMap } from './constData'
 import './index.less'
 
 const ModuleMenu = ({ sysName }) => {
     const [sessionMenu, setsessionMenu] = useState([]);
     const [showMenuList, setshowMenuList] = useState(false);
+    const [menuList, setMenuList] = useState([]);
 
     useEffect(() => {
-        const menuObj = JSON.parse(sessionStorage.getItem('bigdata-menu'))
+        let newSessionMenu = getSessionMenu();
+        setsessionMenu(newSessionMenu);
+        // let newMenuList = getNewMenuList();
+        let newMenuList = menuListInit;
+        setMenuList(newMenuList);
+    }, []);
+
+    const getSessionMenu = () =>{
+        const menuObj = JSON.parse(sessionStorage.getItem('bigdata-menu'));
         if (menuObj) {
-            setsessionMenu(menuObj.content || [])
+            return menuObj.content || []
         }
-    }, []);
+        return []
+    }
 
     // 获取系统logo及title
     const getLogoAndTitle = () => {
@@ -130,27 +140,51 @@ const ModuleMenu = ({ sysName }) => {
     // 跳转首页
     const toHomePage = (index) => {
         if (index === 0) {
-            window.location.href = '/index'
+            window.location.href = '/#/index'
         }
     };
+    const getNewMenuList = () =>{
+        const sessionMenu = getSessionMenu()
+        let newMenuList = [...menuListInit];
+        if(sessionMenu){
+            const pathList = sessionMenu.map(item => item.path)
+              // 过滤掉没有权限的子菜单(PS：如果模块下面子菜单都没有，则不显示该模块)
+              for (let index = newMenuList.length - 1; index >= 0; index--) {
+                const menuItem = newMenuList[index]
+                for (let index_ch = menuItem.children.length - 1; index_ch >= 0 ; index_ch--) {
+                  const child = menuItem.children[index_ch]
+                  if (!pathList.includes(child.path)) {
+                    newMenuList[index].children.splice(index_ch , 1)
+                  }
+                }
+                if (menuItem.children.length === 0) {
+                    newMenuList.splice(index, 1)
+                }
+              }
+        }
+        return newMenuList;
 
+    }
     const menu = menuList.map((item, index) => {
         return (
-            <div key={item.name} className="cardLine" style={{ height: index === 6 ? '90px' : '' }}>
-                <div className='leftMenu'>
+            <div key={item.name} className="cardLine" style={{ height: item.children.length > 3 ? '90px' : '' }}>
+                <div className='leftMenu' style={{
+                    height: item.children.length > 3? '96px' :'70px',
+                    lineHeight: item.children.length > 3? '45px' :'70px', 
+                }}>
                     <img src={item.url} className="middle" />
                     <span className="middle textPad" onClick={() => { toHomePage(index) }}>{item.name}</span>
                 </div>
                 <div className='rightMenu' 
                 style={{ 
-                    height: index === 6 ? '90px' : '', 
-                    // lineHeight: index === 6 ? '' : '60px', 
-                    borderBottom: index === 6 ? '0px' : '1px solid #E9E9E9',
+                    height: item.children.length > 3? '96px' :'70px',
+                    lineHeight: item.children.length > 3? '45px' :'70px', 
+                    borderBottom: index === menuList.length - 1 ? '0px' : '1px solid #E9E9E9',
                      }}>
                     {
                         item.children.map((child, idx) => {
                             return (
-                                <span key={child.childName} style={{lineHeight: idx > 2 ? '30px' : '60px', }}>
+                                <span key={child.childName}>
                                     <img src={childIconSrc} className="middle iconPad" />
                                     <span className='childMenu textPad middle' onClick={() => { toModulePage(child.childName) }}>{child.childName}</span>
                                 </span>
@@ -165,19 +199,6 @@ const ModuleMenu = ({ sysName }) => {
     return (
         <div>
             <div className='menuPopupAndTitle'>
-                {/* <Popconfirm
-                placement="bottomLeft"
-                title={menu}
-                okText=""
-                icon={false}
-                cancelText=""
-                // className='popupCss'
-                showCancel={false}
-            >
-                <div className='menuIcon'>
-                    <img className="menuIcon_img" src={menuIconSrc} />
-                </div>
-            </Popconfirm> */}
                 <div className='menuIcon' onClick={()=>setshowMenuList(!showMenuList)}>
                     <img className="menuIcon_img" src={menuIconSrc} />
                 </div>

package/src/pages/ModuleMenu/index.less

@@ -11,19 +11,13 @@ padding-left: 35px;
 padding-bottom: 35px;
 }
 .cardLine{
-    height: 60px;
     padding: 5px 0px;
 }
 .textPad{
     padding-left: 10px;
 }
-.iconPad{
-    // padding-top: 15px;
-}
 .leftMenu{
     width: 100px;
-    height: 60px;
-    line-height: 55px;
     float: left;
     color: rgba(0, 0, 0, 0.85);
     font-size: 16px;
@@ -33,10 +27,8 @@ padding-bottom: 35px;
 }
 .rightMenu{
     width: 460px;
-    height: 60px;
     float: left;
     vertical-align: middle;
-    // padding: 5px 10px 0px 10px;
     font-size: 14px;
     color: rgba(0,0,0,0.65);
     font-weight: 400;

package/src/pages/ModuleUser/index.jsx

@@ -11,6 +11,7 @@ const ModuleUser = () => {
     }
     const {PersonalCenterSrc,MessageCenterSrc,SystemManageSrc,LogoutSrc} = userMenuIcon;
     const isHaveSystemManagementPermission = sessionStorage.getItem('bigdata-isHaveSystemManagementPermission');
+    const DEFAULT_LOGOUT_URL = "/#/login"
 
     const getUserName = () => {
       const userInfo = JSON.parse(sessionStorage.getItem('bigdata-userInfo')||"{}");
@@ -19,22 +20,36 @@ const ModuleUser = () => {
       }
       return '';
   };
+  // 退出登录
+ const logout = () => {
+  Axios('delete','/auth/token/logout', '', {} )
+    .then(() => {
+      // console.log('退出登录接口调用成功')
+      localStorage.clear();
+      sessionStorage.clear();
+      window.location.href = DEFAULT_LOGOUT_URL;
+    })
+    .catch((error) => {
+      console.error('Error while logging out, error:', error);
+      message.error('服务器错误，请稍后重试');
+    });
+}
     const menu = (
         <Menu className="menu" selectedKeys={[]} >
           <Menu.Item key="personalCenter" onClick={()=>handleClickmenu('/#/info/index')}>
             <img src={PersonalCenterSrc} alt="" style={{ marginRight: '10px', marginTop: '-3px' }} />
             <span>个人中心</span>
           </Menu.Item>
-          <Menu.Item key="messageCenter" onClick={()=>handleClickmenu('/#/info/index')}>
+          <Menu.Item key="messageCenter" onClick={()=>handleClickmenu('/alert/')}>
             <img src={MessageCenterSrc} alt="" style={{ marginRight: '10px', marginTop: '-3px' }} />
             <span>消息中心</span>
           </Menu.Item>
           {isHaveSystemManagementPermission &&
-            <Menu.Item key="systemManage" onClick={()=>handleClickmenu('/#/info/index')}>
+            <Menu.Item key="systemManage" onClick={()=>handleClickmenu('/')}>
               <img src={SystemManageSrc} alt="" style={{ marginRight: '10px', marginTop: '-3px' }} />
               <span>系统管理</span>
             </Menu.Item>}
-          <Menu.Item key="logout" onClick={()=>handleClickmenu('/#/info/index')}>
+          <Menu.Item key="logout" onClick={()=>logout()}>
             <img src={LogoutSrc} alt="" style={{ width: '15px', height: '15px', marginRight: '6px' }} />
             <span>退出登录</span>
           </Menu.Item>