module-menu 0.1.14 → 0.1.15

package/package.json

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

package/src/pages/ModuleMenu/index.jsx

@@ -1,11 +1,11 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { Popconfirm, message } from 'antd';
-import {menuList,menuIconSrc, childIconSrc, sysNameMap} from './constData'
+import { menuList, menuIconSrc, childIconSrc, sysNameMap } from './constData'
 import './index.less'
 
-const ModuleMenu = ({sysName})=>{
+const ModuleMenu = ({ sysName }) => {
     const [sessionMenu, setsessionMenu] = useState([]);
-
+    const [showMenuList, setshowMenuList] = useState(false);
 
     useEffect(() => {
         const menuObj = JSON.parse(sessionStorage.getItem('bigdata-menu'))
@@ -13,11 +13,12 @@ const ModuleMenu = ({sysName})=>{
             setsessionMenu(menuObj.content || [])
         }
     }, []);
+
     // 获取系统logo及title
-    const getLogoAndTitle = () =>{
-        let sysInfo = sysNameMap.find(item=>item.sysName === sysName);
-        let logoAndTitle = {logoSrc:"",title:""};
-        if(sysInfo){
+    const getLogoAndTitle = () => {
+        let sysInfo = sysNameMap.find(item => item.sysName === sysName);
+        let logoAndTitle = { logoSrc: "", title: "" };
+        if (sysInfo) {
             logoAndTitle.logoSrc = sysInfo.logoSrc;
             logoAndTitle.title = sysInfo.title;
         };
@@ -29,35 +30,35 @@ const ModuleMenu = ({sysName})=>{
      * @param {*} authMenus
      * @param {*} rootMenuPath
      */
-    const judgeThirdPartyServiceIsHaveMenus=(authMenus, rootMenuPath) => {
+    const judgeThirdPartyServiceIsHaveMenus = (authMenus, rootMenuPath) => {
         let dsMenus = [];
         if (
-          typeof authMenus !== "undefined" &&
-          authMenus !== null &&
-          authMenus.length > 0
+            typeof authMenus !== "undefined" &&
+            authMenus !== null &&
+            authMenus.length > 0
         ) {
-          const rootMenus = authMenus.filter((item) => {
-            const { parentId, type, path } = item;
-            if (parentId === -1 && type === "3" && path === rootMenuPath) {
-              return true;
+            const rootMenus = authMenus.filter((item) => {
+                const { parentId, type, path } = item;
+                if (parentId === -1 && type === "3" && path === rootMenuPath) {
+                    return true;
+                }
+                return false;
+            });
+            if (
+                rootMenus &&
+                Object.keys(rootMenus).length > 0 &&
+                rootMenus[0].children
+            ) {
+                dsMenus = rootMenus[0].children;
             }
-            return false;
-          });
-          if (
-            rootMenus &&
-            Object.keys(rootMenus).length > 0 &&
-            rootMenus[0].children
-          ) {
-            dsMenus = rootMenus[0].children;
-          }
         }
         if (!dsMenus || dsMenus.length === 0) {
-          return false;
+            return false;
         }
         return true;
     };
     // 跳转各个模块
-    const toModulePage= (nameStr)=> {
+    const toModulePage = (nameStr) => {
         if (!sessionMenu || sessionMenu.length === 0) {
             message.destroy()
             message.warning("没有获取到菜单列表，请联系管理员添加权限");
@@ -66,59 +67,59 @@ const ModuleMenu = ({sysName})=>{
         let thirdPartyServiceJumpPath = ""; // 第三方服务跳转路径
         let thirdPartyServiceRootMenuPath = ""; // 第三方服务根菜单路径
         switch (nameStr) {
-        case "数据集成":
-            thirdPartyServiceJumpPath = "/datacollect/";
-            thirdPartyServiceRootMenuPath = "/datacollection";
-            break;
-        case "数据治理":
-            thirdPartyServiceJumpPath = "/datamanage/";
-            thirdPartyServiceRootMenuPath = "/dataManager";
-            break;
-        case "元数据管理":
-            thirdPartyServiceJumpPath = "/metadata/";
-            thirdPartyServiceRootMenuPath = "/metadata";
-            break;
-        case "数据质量":
-            thirdPartyServiceJumpPath = "/quality/";
-            thirdPartyServiceRootMenuPath = "/quality/";
-            break;
-        case "离线开发":
-            thirdPartyServiceJumpPath = "/datadev/";
-            thirdPartyServiceRootMenuPath = "/datadev/";
-            break;
-        case "实时开发":
-            thirdPartyServiceJumpPath = "/dataanalytic/";
-            thirdPartyServiceRootMenuPath = "/dataanalytic";
-            break;
-        case "数据服务":
-            thirdPartyServiceJumpPath = "/dataservice/";
-            thirdPartyServiceRootMenuPath = "/dataservice";
-            break;
-        case "数据资产":
-            thirdPartyServiceJumpPath = "/dataasset/";
-            thirdPartyServiceRootMenuPath = "/dataasset";
-            break;
-        case "数据共享":
-            thirdPartyServiceJumpPath = "/datasharing/";
-            thirdPartyServiceRootMenuPath = "/datasharing";
-            break;
-        case "运维中心":
-            thirdPartyServiceJumpPath = "/operate/";
-            thirdPartyServiceRootMenuPath = "/operate";
-            break;
-        case "消息中心":
-            thirdPartyServiceJumpPath = "/alert/";
-            thirdPartyServiceRootMenuPath = "/alert/";
-            break;
-        default:
-            break;
+            case "数据集成":
+                thirdPartyServiceJumpPath = "/datacollect/";
+                thirdPartyServiceRootMenuPath = "/datacollection";
+                break;
+            case "数据治理":
+                thirdPartyServiceJumpPath = "/datamanage/";
+                thirdPartyServiceRootMenuPath = "/dataManager";
+                break;
+            case "元数据管理":
+                thirdPartyServiceJumpPath = "/metadata/";
+                thirdPartyServiceRootMenuPath = "/metadata";
+                break;
+            case "数据质量":
+                thirdPartyServiceJumpPath = "/quality/";
+                thirdPartyServiceRootMenuPath = "/quality/";
+                break;
+            case "离线开发":
+                thirdPartyServiceJumpPath = "/datadev/";
+                thirdPartyServiceRootMenuPath = "/datadev/";
+                break;
+            case "实时开发":
+                thirdPartyServiceJumpPath = "/dataanalytic/";
+                thirdPartyServiceRootMenuPath = "/dataanalytic";
+                break;
+            case "数据服务":
+                thirdPartyServiceJumpPath = "/dataservice/";
+                thirdPartyServiceRootMenuPath = "/dataservice";
+                break;
+            case "数据资产":
+                thirdPartyServiceJumpPath = "/dataasset/";
+                thirdPartyServiceRootMenuPath = "/dataasset";
+                break;
+            case "数据共享":
+                thirdPartyServiceJumpPath = "/datasharing/";
+                thirdPartyServiceRootMenuPath = "/datasharing";
+                break;
+            case "运维中心":
+                thirdPartyServiceJumpPath = "/operate/";
+                thirdPartyServiceRootMenuPath = "/operate";
+                break;
+            case "消息中心":
+                thirdPartyServiceJumpPath = "/alert/";
+                thirdPartyServiceRootMenuPath = "/alert/";
+                break;
+            default:
+                break;
         }
         // 判断第三方服务是否有对应服务的菜单权限
         if (
-        !judgeThirdPartyServiceIsHaveMenus(
-            sessionMenu,
-            thirdPartyServiceRootMenuPath
-        )
+            !judgeThirdPartyServiceIsHaveMenus(
+                sessionMenu,
+                thirdPartyServiceRootMenuPath
+            )
         ) {
             message.destroy()
             message.warning("您没有权限，请联系管理员添加权限。");
@@ -135,18 +136,18 @@ const ModuleMenu = ({sysName})=>{
 
     const menu = menuList.map((item, index) => {
         return (
-            <div key={item.name} className="cardLine" style={{height: index === 6 ? '90px' : ''}}>
+            <div key={item.name} className="cardLine" style={{ height: index === 6 ? '90px' : '' }}>
                 <div className='leftMenu'>
-                    <img src={item.url} className="middle"/>
-                    <span className="middle textPad" onClick={() => {toHomePage(index)}}>{item.name}</span>
+                    <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' : '', borderBottom: index === 6 ? '0px' : '1px solid #E9E9E9'}}>
+                <div className='rightMenu' style={{ height: index === 6 ? '90px' : '', borderBottom: index === 6 ? '0px' : '1px solid #E9E9E9' }}>
                     {
                         item.children.map((child, idx) => {
                             return (
                                 <span key={child.childName}>
-                                    <img src={childIconSrc} className="middle iconPad"/>
-                                    <span className='childMenu textPad middle' onClick={() => {toModulePage(child.childName)}}>{child.childName}</span>
+                                    <img src={childIconSrc} className="middle iconPad" />
+                                    <span className='childMenu textPad middle' onClick={() => { toModulePage(child.childName) }}>{child.childName}</span>
                                 </span>
                             )
                         })
@@ -157,23 +158,31 @@ const ModuleMenu = ({sysName})=>{
     });
 
     return (
-        <div className='menuPopupAndTitle'>
-            <Popconfirm
+        <div>
+            <div className='menuPopupAndTitle'>
+                {/* <Popconfirm
                 placement="bottomLeft"
                 title={menu}
                 okText=""
                 icon={false}
                 cancelText=""
                 // className='popupCss'
-                showCancel = {false}
+                showCancel={false}
             >
                 <div className='menuIcon'>
-                    <img className="menuIcon_img" src={menuIconSrc}/>
+                    <img className="menuIcon_img" src={menuIconSrc} />
+                </div>
+            </Popconfirm> */}
+                <div className='menuIcon' onClick={()=>setshowMenuList(!showMenuList)}>
+                    <img className="menuIcon_img" src={menuIconSrc} />
                 </div>
-            </Popconfirm>
-            <div className="menu_title_content">
-            <img className="menu_title_content_img" src={getLogoAndTitle().logoSrc} alt="logo"/>
-            <span className="menu_title">{getLogoAndTitle().title}</span>
+                <div className="menu_title_content">
+                    <img className="menu_title_content_img" src={getLogoAndTitle().logoSrc} alt="logo" />
+                    <span className="menu_title">{getLogoAndTitle().title}</span>
+                </div>
+            </div>
+            <div className='menu_list_content' style={{display:showMenuList?'block':'none'}}>
+                {menu}
             </div>
         </div>
     );

package/src/pages/ModuleMenu/index.less

@@ -1,14 +1,25 @@
-.ant-popconfirm .ant-popconfirm-buttons {
-    display: none !important;
-}
-.ant-popover-placement-rightTop .ant-popover-arrow {
-    display: none !important;
-}
-.ant-popconfirm .ant-popconfirm-message {
-    margin-bottom: 0px;
-}
-.ant-popconfirm .ant-popconfirm-message {
-    width: 650px;
+// .ant-popconfirm .ant-popconfirm-buttons {
+//     display: none !important;
+// }
+// .ant-popover-arrow {
+//     display: none !important;
+// }
+// .ant-popconfirm .ant-popconfirm-message {
+//     margin-bottom: 0px;
+// }
+// .ant-popconfirm .ant-popconfirm-message {
+//     width: 650px;
+// }
+.menu_list_content{
+border: 1px solid #E9E9E9;
+z-index: 2;
+float: left;
+// border: 1px solid #E9E9E9;
+position: fixed;
+top: 50px;
+left:0;
+background-color: #FFF;
+box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
 }
 .cardLine{
     height: 60px;
@@ -98,18 +109,18 @@
     vertical-align: middle;
     animation: pro-layout-title-hide .3s;
 }
-.ant-popover .ant-popover-inner {
-    border-radius: 0px;
-}
-.ant-popover {
-    top:44px;
-    left: 0px !important;
-    padding-left: 0px !important;
-}
-.ant-popover-buttons{
-    bottom: 0px !important;
-    display: none;
-}
-.ant-popover-message{
-    padding: 0px !important;
-}
+// .ant-popover .ant-popover-inner {
+//     border-radius: 0px;
+// }
+// .ant-popover {
+//     top:44px;
+//     left: 0px !important;
+//     padding-left: 0px !important;
+// }
+// .ant-popover-buttons{
+//     bottom: 0px !important;
+//     display: none;
+// }
+// .ant-popover-message{
+//     padding: 0px !important;
+// }

package/module-menu/.editorconfig

@@ -1,16 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[Makefile]
-indent_style = tab

package/module-menu/.prettierignore

@@ -1,8 +0,0 @@
-**/*.md
-**/*.svg
-**/*.ejs
-**/*.html
-package.json
-.umi
-.umi-production
-.umi-test

package/module-menu/.prettierrc

@@ -1,11 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 80,
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": { "parser": "json" }
-    }
-  ]
-}

package/module-menu/.umirc.js

@@ -1,11 +0,0 @@
-// import { defineConfig } from 'umi';
-const { defineConfig } = require('umi');
-module.exports = defineConfig({
-  nodeModulesTransform: {
-    type: 'none',
-  },
-  routes: [
-    { path: '/', component: '@/pages/index' },
-  ],
-  fastRefresh: {},
-});

package/module-menu/README.md

@@ -1,15 +0,0 @@
-# umi project
-
-## Getting Started
-
-Install dependencies,
-
-```bash
-$ yarn
-```
-
-Start the dev server,
-
-```bash
-$ yarn start
-```