删除GloablMenu组件、菜单优化：只展开当前父级菜单

src/components/layout/GloablLayout.vue

@@ -7,7 +7,6 @@
           <h1>Vue Ant Pro</h1>
         </a>
       </div>
-      <!--<gloabl-menu :collapsed="collapsed"/>-->
       <i-menu :menuData="menuData" />
     </a-layout-sider>
     <a-layout>
@@ -24,7 +23,6 @@
 import ALayout from 'vue-antd-ui/es/layout'
 import GloablHeader from './GloablHeader'
 import AIcon from 'vue-antd-ui/es/icon/icon'
-import GloablMenu from './GloablMenu'
 import IMenu from '../menu/menu'
 
 const ALayoutSider = ALayout.Sider
@@ -38,7 +36,6 @@ let menuData = []
 export default {
   name: 'GloablLayout',
   components: {
-    GloablMenu,
     AIcon,
     GloablHeader,
     ALayout,

src/components/layout/GloablMenu.vue

@@ -1,57 +0,0 @@
-<template>
-  <a-menu theme="dark" mode="inline" :inlineCollapsed="collapsed">
-    <slot></slot>
-    <a-menu-item>
-      <a-icon type="dashboard" />
-      <span>统计分析</span>
-    </a-menu-item>
-    <a-menu-item>
-      <a href="/">
-        <a-icon type="user" />
-        <span>个人中心</span>
-      </a>
-    </a-menu-item>
-    <a-menu-item>
-      <a-icon type="form" />
-      <span>个人中心</span>
-    </a-menu-item>
-    <a-sub-menu>
-          <span slot="title">
-            <a-icon type="appstore" />
-            <span>系统日志</span>
-          </span>
-      <a-menu-item>
-        <span>应用日志</span>
-      </a-menu-item>
-      <a-menu-item>
-        <span>数据库日志</span>
-      </a-menu-item>
-      <a-menu-item>
-        <span>操作日志</span>
-      </a-menu-item>
-    </a-sub-menu>
-  </a-menu>
-</template>
-
-<script>
-import AIcon from 'vue-antd-ui/es/icon/icon'
-import AMenu from 'vue-antd-ui/es/menu/index'
-const ASubMenu = AMenu.SubMenu
-const AMenuItem = AMenu.Item
-
-export default {
-  name: 'GloablMenu',
-  props: {
-    collapsed: Boolean
-  },
-  components: {AIcon, AMenu, ASubMenu, AMenuItem},
-  data () {
-    return {
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/menu/menu.js

@@ -44,6 +44,12 @@ export default {
       default: 'inline'
     }
   },
+  data () {
+    return {
+      rootSubmenuKeys: ['/form', '/list', '/detail', '/exception', '/result'],
+      openKeys: ['/form']
+    }
+  },
   methods: {
     renderIcon: function (h, icon) {
       return icon === 'none' ? null
@@ -103,6 +109,14 @@ export default {
         menuArr.push(this2_.renderItem(h, menu, '0', i))
       })
       return menuArr
+    },
+    onOpenChange (openKeys) {
+      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
+      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+      }
     }
   },
   render (h) {
@@ -112,7 +126,11 @@ export default {
         props: {
           theme: this.$props.theme,
           mode: this.$props.mode,
-          inlineCollapsed: false
+          inlineCollapsed: false,
+          openKeys: this.openKeys
+        },
+        on: {
+          openChange: this.onOpenChange
         }
       }, this.renderMenu(h, this.menuData)
     )