''

src/common/menuconfig.js

@@ -81,8 +81,21 @@ export default {
       },
       activeurl: `${__IMGCDN__}menu/minappactive.png`,
       notactiveurl: `${__IMGCDN__}menu/minapp.png`,
-      // path: '/sjd/officialweb',
-      // relativePath: ['/sjd/officialweb', '/sjd/officialwebeditor'],
+      isFather: true,
+      subMenues: [
+        {
+          id: '8',
+          fatherId: '2',
+          name: '微官网管理',
+          style: {
+            width: '20px',
+            height: '20px',
+          },
+          noIcon: true,
+          path: '/sjd/officialweb',
+          relativePath: ['/sjd/officialweb', '/sjd/officialwebeditor'],
+        },
+      ],
     },
   ],
 };

src/components/SjdMenu.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'dva';
 import { Menu, Icon, Layout } from 'antd';
 import SjdMenuStyle from './SjdMenu.less';
+const { SubMenu } = Menu;
 const { Sider } = Layout;
 class SjdMenu extends React.Component {
   constructor(props) {
@@ -21,11 +22,14 @@ class SjdMenu extends React.Component {
   }
   componentWillUnmount() {
   }
-  selectedMenu = (key) => {
+  selectedMenu = (id, fatherId) => {
     const { dispatch } = this.props;
     dispatch({
       type: 'webapp/menuselected',
-      payload: key,
+      payload: {
+        id,
+        fatherId,
+      },
     });
   }
   render() {
@@ -34,7 +38,6 @@ class SjdMenu extends React.Component {
     const menuItemStyle = {
       fontSize: '13px',
       height: '40px',
-      paddingLeft: '35px',
       display: 'flex',
       alignItems: 'center',
     };
@@ -51,7 +54,7 @@ class SjdMenu extends React.Component {
             left: 0,
             zIndex: 100,
           }}
-          className={SjdMenuStyle.menusider}
+          className={`${SjdMenuStyle.menusider} menusider`}
         >
           <div>
             <div className={collapsed ? SjdMenuStyle.collapsedlogo : SjdMenuStyle.uncollapsedlogo} />
@@ -60,15 +63,33 @@ class SjdMenu extends React.Component {
               mode="inline"
               defaultSelectedKeys={[defaultMenu]}
               className={SjdMenuStyle.menu}
-              onClick={this.selectedMenu}
             >
               {
                 menus.map(ele => (
-                  <Menu.Item key={ele.id} style={menuItemStyle}>
-                    <div className={SjdMenuStyle.menuicon} style={defaultMenu === ele.id ? { width: ele.style.width, height: ele.style.height, backgroundImage: `url(${ele.activeurl})` } : { width: ele.style.width, height: ele.style.height, backgroundImage: `url(${ele.notactiveurl})` }} />
-                    <Icon style={{ width: 0, minWidth: 'initial' }} />
-                    <span>{ele.name}</span>
-                  </Menu.Item>
+                  !ele.isFather ?
+                    <Menu.Item key={ele.id} style={menuItemStyle} onClick={() => this.selectedMenu(ele.id, null)}>
+                      <div className={SjdMenuStyle.menuicon} style={defaultMenu === ele.id ? { width: ele.style.width, height: ele.style.height, backgroundImage: `url(${ele.activeurl})` } : { width: ele.style.width, height: ele.style.height, backgroundImage: `url(${ele.notactiveurl})` }} />
+                      <Icon style={{ width: 0, minWidth: 'initial' }} />
+                      <span>{ele.name}</span>
+                    </Menu.Item> :
+                    <SubMenu
+                      key="sub1"
+                      title={
+                        <span>
+                          <div className={SjdMenuStyle.menuicon} style={defaultMenu === ele.id ? { width: ele.style.width, height: ele.style.height, backgroundImage: `url(${ele.activeurl})` } : { width: ele.style.width, height: ele.style.height, backgroundImage: `url(${ele.notactiveurl})` }} />
+                          <Icon style={{ width: 0, minWidth: 'initial' }} />
+                          <span>{ele.name}</span>
+                        </span>
+                      }
+                    >
+                      {ele.subMenues.map(submenu => (
+                        <Menu.Item key={submenu.id} style={menuItemStyle} onClick={() => this.selectedMenu(submenu.id, submenu.fatherId)}>
+                          <div className={SjdMenuStyle.menuicon} style={defaultMenu === submenu.id ? { width: submenu.style.width, height: submenu.style.height, backgroundImage: `url(${submenu.activeurl})` } : { width: submenu.style.width, height: submenu.style.height, backgroundImage: `url(${submenu.notactiveurl})` }} />
+                          <Icon style={{ width: 0, minWidth: 'initial' }} />
+                          <span>{submenu.name}</span>
+                        </Menu.Item>
+                      ))}
+                    </SubMenu>
                 ))
               }
             </Menu>

src/components/SjdMenu.less

 @import '../less/variables.less';
 @images: '@{imagesroot}';
+:global {
+    .menusider {
+        .ant-menu-inline-collapsed > .ant-menu-item, .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item, .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
+            padding: 0 26px !important;
+        }
+    }
+}
 .uncollapsedlogo {
     height: 45px;
     width: 58px;

src/models/webapp.js

@@ -329,18 +329,24 @@ export default {
   },
   effects: {
     * menuselected({ payload }, { put, select }) {
-      const defaultMenu = payload.key;
+      const {
+        id,
+        fatherId,
+      } = payload;
+      const defaultMenu = id;
       const webapp = yield select(state => state.webapp);
-      const currentMenu = webapp.menus.find(ele => ele.id === payload.key) || {};
-      yield put({
-        type: 'updateState',
-        payload: {
-          defaultMenu,
-        },
-      });
-      yield put(routerRedux.replace({
-        pathname: currentMenu.path,
-      }));
+      const currentMenu = webapp.menus.find(ele => ele.id === id) || {};
+      if (!currentMenu.isFather) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            defaultMenu,
+          },
+        });
+        yield put(routerRedux.replace({
+          pathname: currentMenu.path,
+        }));
+      }
     },
     * judgeexpire({ payload }, { put, call, select }) {
       const webapp = yield select(state => state.webapp);