From 08e40f1a3141c2437f16cf2c3a2bfd3c647f4196 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Fri, 31 Jul 2020 16:39:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20prop=20openKeys=20and=20event=20o?=
 =?UTF-8?q?penChange=20for=20menu.js;=20:star2:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=EF=BC=9Amenu.js=20=E5=A2=9E=E5=8A=A0=20openKeys=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E5=92=8C=20openChange=20=E4=BA=8B=E4=BB=B6=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/menu.js | 66 +++++++++++++++++--------------------
 src/utils/colors.js         |  2 +-
 2 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js
index 182c668..309c897 100644
--- a/src/components/menu/menu.js
+++ b/src/components/menu/menu.js
@@ -22,15 +22,18 @@
  *  }
  * ]
  *
- * i18n: 国际化配置。组件默认会根据 options route配置的 path 和 name 生成英文以及中文的国际化配置，如需自定义或增加其他语言，配置
+ * i18n: 国际化配置。系统默认会根据 options route配置的 path 和 name 生成英文以及中文的国际化配置，如需自定义或增加其他语言，配置
  * 此项即可。如：
  * i18n: {
- *   CN: {dashboard: {name: '监控中心'}}
- *   HK: {dashboard: {name: '監控中心'}}
+ *   messages: {
+ *     CN: {dashboard: {name: '监控中心'}}
+ *     HK: {dashboard: {name: '監控中心'}}
+ *   }
  * }
  **/
 import Menu from 'ant-design-vue/es/menu'
 import Icon from 'ant-design-vue/es/icon'
+import fastEqual from 'fast-deep-equal'
 
 const {Item, SubMenu} = Menu
 
@@ -56,29 +59,26 @@ export default {
       required: false,
       default: false
     },
-    i18n: Object
+    i18n: Object,
+    openKeys: Array
   },
   data () {
     return {
-      openKeys: [],
       selectedKeys: [],
+      sOpenKeys: [],
       cachedOpenKeys: []
     }
   },
   computed: {
-    rootSubmenuKeys: (vm) => {
-      let keys = []
-      vm.options.forEach(item => {
-        keys.push(item.path)
-      })
-      return keys
-    },
     menuTheme() {
       return this.theme == 'light' ? this.theme : 'dark'
     }
   },
   created () {
     this.updateMenu()
+    if (!this.options[0].fullPath) {
+      this.formatOptions(this.options, '')
+    }
     // 自定义国际化配置
     if(this.i18n && this.i18n.messages) {
       const messages = this.i18n.messages
@@ -90,14 +90,18 @@ export default {
   watch: {
     collapsed (val) {
       if (val) {
-        this.cachedOpenKeys = this.openKeys
-        this.openKeys = []
+        this.cachedOpenKeys = this.sOpenKeys
+        this.sOpenKeys = []
       } else {
-        this.openKeys = this.cachedOpenKeys
+        this.sOpenKeys = this.cachedOpenKeys
       }
     },
     '$route': function () {
       this.updateMenu()
+    },
+    sOpenKeys(val) {
+      this.$emit('openChange', val)
+      this.$emit('update:openKeys', val)
     }
   },
   methods: {
@@ -159,32 +163,22 @@ export default {
       return menuArr
     },
     formatOptions(options, parentPath) {
-      let this_ = this
       options.forEach(route => {
         let isFullPath = route.path.substring(0, 1) == '/'
         route.fullPath = isFullPath ? route.path : parentPath + '/' + route.path
         if (route.children) {
-          this_.formatOptions(route.children, route.fullPath)
+          this.formatOptions(route.children, route.fullPath)
         }
       })
     },
-    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] : []
-      }
-    },
     updateMenu () {
-      let routes = this.$route.matched.concat()
-      const route = routes.pop()
+      const menuRoutes = this.$route.matched.filter(item => item.path !== '')
+      const route = menuRoutes.pop()
       this.selectedKeys = [this.getSelectedKey(route)]
-      let openKeys = []
-      routes.forEach((item) => {
-        openKeys.push(item.path)
-      })
-      this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
+      let openKeys = menuRoutes.map(item => item.path)
+      if (!fastEqual(openKeys, this.sOpenKeys)) {
+        this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.sOpenKeys = openKeys
+      }
     },
     getSelectedKey (route) {
       if (route.meta.invisible && route.parent) {
@@ -200,14 +194,16 @@ export default {
         props: {
           theme: this.menuTheme,
           mode: this.$props.mode,
-          openKeys: this.openKeys,
-          selectedKeys: this.selectedKeys
+          selectedKeys: this.selectedKeys,
+          openKeys: this.openKeys ? this.openKeys : this.sOpenKeys
         },
         on: {
-          openChange: this.onOpenChange,
           select: (obj) => {
             this.selectedKeys = obj.selectedKeys
             this.$emit('select', obj)
+          },
+          'update:openKeys': (val) => {
+            this.sOpenKeys = val
           }
         }
       }, this.renderMenu(h, this.options)
diff --git a/src/utils/colors.js b/src/utils/colors.js
index 7a960b9..b69d151 100644
--- a/src/utils/colors.js
+++ b/src/utils/colors.js
@@ -1,5 +1,5 @@
 const varyColor = require('webpack-theme-color-replacer/client/varyColor')
-const generate =  require('@ant-design/colors').generate
+const {generate} =  require('@ant-design/colors')
 const {ADMIN, ANTD} = require('../config/default')
 const Config = require('../config')