Merge branch 'master' of https://github.com/iczer/vue-antd-admin

 Conflicts:

	yarn.lock

docs/advance/authority.md

@@ -31,7 +31,7 @@ permission = {
   operation: ['add', 'delete', 'edit', 'close']  //权限下的操作权限
 }
 ```
-你也可以设置 role 的值为字符串，比如 permission = 'form', 它等同于：
+你也可以设置 permission 的值为字符串，比如 permission = 'form', 它等同于：
 ```js
 permission = {
   id: 'form'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-antd-admin",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "homepage": "https://iczer.github.io/vue-antd-admin",
   "private": true,
   "scripts": {

src/components/menu/menu.js

@@ -38,6 +38,26 @@ import {getI18nKey} from '@/utils/routerUtil'
 
 const {Item, SubMenu} = Menu
 
+const resolvePath = (path, params = {}) => {
+  let _path = path
+  Object.entries(params).forEach(([key, value]) => {
+    _path = _path.replace(new RegExp(`:${key}`, 'g'), value)
+  })
+  return _path
+}
+
+const toRoutesMap = (routes) => {
+  const map = {}
+  routes.forEach(route => {
+    map[route.fullPath] = route
+    if (route.children && route.children.length > 0) {
+      const childrenMap = toRoutesMap(route.children)
+      Object.assign(map, childrenMap)
+    }
+  })
+  return map
+}
+
 export default {
   name: 'IMenu',
   props: {
@@ -73,6 +93,9 @@ export default {
   computed: {
     menuTheme() {
       return this.theme == 'light' ? this.theme : 'dark'
+    },
+    routesMap() {
+      return toRoutesMap(this.options)
     }
   },
   created () {
@@ -132,7 +155,8 @@ export default {
     },
     renderMenuItem: function (h, menu) {
       let tag = 'router-link'
-      let config = {props: {to: menu.fullPath}, attrs: {style: 'overflow:hidden;white-space:normal;text-overflow:clip;'}}
+      const path = resolvePath(menu.fullPath, menu.meta.params)
+      let config = {props: {to: {path, query: menu.meta.query}, }, attrs: {style: 'overflow:hidden;white-space:normal;text-overflow:clip;'}}
       if (menu.meta && menu.meta.link) {
         tag = 'a'
         config = {attrs: {style: 'overflow:hidden;white-space:normal;text-overflow:clip;', href: menu.meta.link, target: '_blank'}}
@@ -200,16 +224,23 @@ export default {
       })
     },
     updateMenu () {
-      const matchedRoutes = this.$route.matched.filter(item => item.path !== '')
+      this.selectedKeys = this.getSelectedKeys()
-      this.selectedKeys = this.getSelectedKey(this.$route)
+      let openKeys = this.selectedKeys.filter(item => item !== '')
-      let openKeys = matchedRoutes.map(item => item.path)
       openKeys = openKeys.slice(0, openKeys.length -1)
       if (!fastEqual(openKeys, this.sOpenKeys)) {
         this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.sOpenKeys = openKeys
       }
     },
-    getSelectedKey (route) {
+    getSelectedKeys() {
-      return route.matched.map(item => item.path)
+      let matches = this.$route.matched
+      const route = matches[matches.length - 1]
+      let chose = this.routesMap[route.path]
+      if (chose && chose.meta && chose.meta.highlight) {
+        chose = this.routesMap[chose.meta.highlight]
+        const resolve = this.$router.resolve({path: chose.fullPath})
+        matches = (resolve.resolved && resolve.resolved.matched) || matches
+      }
+      return matches.map(item => item.path)
     }
   },
   render (h) {

src/layouts/header/HeaderNotice.vue

@@ -56,9 +56,10 @@ export default {
         this.loading = false
         return
       }
-      this.loadding = true
+			if (this.show) return
+      this.loading = true
       setTimeout(() => {
-        this.loadding = false
+        this.loading = false
       }, 1000)
     }
   }

src/layouts/tabs/TabsHead.vue

@@ -14,11 +14,11 @@
             :type="fixedTabs ? 'lock' : 'unlock'"
         />
       </a-tooltip>
-      <a-tab-pane v-for="page in pageList" :key="page.fullPath">
+      <a-tab-pane v-for="page in pageList" :key="page.path">
-        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.fullPath, e)">
+        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
-          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.fullPath !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
+          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
-          <div class="title" @click="onTabClick(page.fullPath)" >{{pageName(page)}}</div>
+          <div class="title" @click="onTabClick(page.path)" >{{pageName(page)}}</div>
-          <a-icon v-if="!page.unclose" @click="onClose(page.fullPath)" class="icon-close" type="close"/>
+          <a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
         </div>
       </a-tab-pane>
     </a-tabs>
@@ -89,7 +89,7 @@
         this.$emit('close', key)
       },
       onRefresh(page) {
-        this.$emit('refresh', page.fullPath, page)
+        this.$emit('refresh', page.path, page)
       },
       onContextmenu(pageKey, e) {
         this.$emit('contextmenu', pageKey, e)
@@ -185,4 +185,4 @@
   .virtual-tabs{
     height: 48px;
   }
-</style>
+</style>

src/layouts/tabs/TabsView.vue

@@ -13,7 +13,7 @@
     <div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`">
       <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
         <a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
-          <router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
+          <router-view v-if="!refreshing" ref="tabContent" :key="$route.path" />
         </a-keep-alive>
         <router-view ref="tabContent" v-else-if="!refreshing" />
       </page-toggle-transition>
@@ -62,10 +62,10 @@ export default {
     this.loadCacheConfig(this.$router?.options?.routes)
     this.loadCachedTabs()
     const route = this.$route
-    if (this.pageList.findIndex(item => item.fullPath === route.fullPath) === -1) {
+    if (this.pageList.findIndex(item => item.path === route.path) === -1) {
       this.pageList.push(this.createPage(route))
     }
-    this.activePage = route.fullPath
+    this.activePage = route.path
     if (this.multiPage) {
       this.$nextTick(() => {
         this.setCachedKey(route)
@@ -86,10 +86,13 @@ export default {
       this.loadCacheConfig(val)
     },
     '$route': function (newRoute) {
-      this.activePage = newRoute.fullPath
+      this.activePage = newRoute.path
+      const page = this.pageList.find(item => item.path === newRoute.path)
       if (!this.multiPage) {
         this.pageList = [this.createPage(newRoute)]
-      } else if (this.pageList.findIndex(item => item.fullPath === newRoute.fullPath) === -1) {
+      } else if (page) {
+        page.fullPath = newRoute.fullPath
+      } else if (!page) {
         this.pageList.push(this.createPage(newRoute))
       }
       if (this.multiPage) {
@@ -113,25 +116,26 @@ export default {
   methods: {
     changePage (key) {
       this.activePage = key
-      this.$router.push(key)
+      const page = this.pageList.find(item => item.path === key)
+      this.$router.push(page.fullPath)
     },
     remove (key, next) {
       if (this.pageList.length === 1) {
         return this.$message.warning(this.$t('warn'))
       }
       //清除缓存
-      let index = this.pageList.findIndex(item => item.fullPath === key)
+      let index = this.pageList.findIndex(item => item.path === key)
       this.clearCaches = this.pageList.splice(index, 1).map(page => page.cachedKey)
       if (next) {
         this.$router.push(next)
       } else if (key === this.activePage) {
         index = index >= this.pageList.length ? this.pageList.length - 1 : index
-        this.activePage = this.pageList[index].fullPath
+        this.activePage = this.pageList[index].path
         this.$router.push(this.activePage)
       }
     },
     refresh (key, page) {
-      page = page || this.pageList.find(item => item.fullPath === key)
+      page = page || this.pageList.find(item => item.path === key)
       page.loading = true
       this.clearCache(page)
       if (key === this.activePage) {
@@ -159,7 +163,7 @@ export default {
     },
     closeOthers (pageKey) {
       // 清除缓存
-      const clearPages = this.pageList.filter(item => item.fullPath !== pageKey && !item.unclose)
+      const clearPages = this.pageList.filter(item => item.path !== pageKey && !item.unclose)
       this.clearCaches = clearPages.map(item => item.cachedKey)
       this.pageList = this.pageList.filter(item => !clearPages.includes(item))
       // 判断跳转
@@ -169,25 +173,25 @@ export default {
       }
     },
     closeLeft (pageKey) {
-      const index = this.pageList.findIndex(item => item.fullPath === pageKey)
+      const index = this.pageList.findIndex(item => item.path === pageKey)
       // 清除缓存
       const clearPages = this.pageList.filter((item, i) => i < index && !item.unclose)
       this.clearCaches = clearPages.map(item => item.cachedKey)
       this.pageList = this.pageList.filter(item => !clearPages.includes(item))
       // 判断跳转
-      if (!this.pageList.find(item => item.fullPath === this.activePage)) {
+      if (!this.pageList.find(item => item.path === this.activePage)) {
         this.activePage = pageKey
         this.$router.push(this.activePage)
       }
     },
     closeRight (pageKey) {
       // 清除缓存
-      const index = this.pageList.findIndex(item => item.fullPath === pageKey)
+      const index = this.pageList.findIndex(item => item.path === pageKey)
       const clearPages = this.pageList.filter((item, i) => i > index && !item.unclose)
       this.clearCaches = clearPages.map(item => item.cachedKey)
       this.pageList = this.pageList.filter(item => !clearPages.includes(item))
       // 判断跳转
-      if (!this.pageList.find(item => item.fullPath === this.activePage)) {
+      if (!this.pageList.find(item => item.path === this.activePage)) {
         this.activePage = pageKey
         this.$router.push(this.activePage)
       }
@@ -234,7 +238,8 @@ export default {
     closePageListener(event) {
       const {closeRoute, nextRoute} = event.detail
       const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
-      this.remove(closePath, nextRoute)
+      const path = closePath && closePath.split('?')[0]
+      this.remove(path, nextRoute)
     },
     /**
      * 页面刷新事件监听
@@ -242,7 +247,8 @@ export default {
      */
     refreshPageListener(event) {
       const {pageKey} = event.detail
-      this.refresh(pageKey)
+      const path = pageKey && pageKey.split('?')[0]
+      this.refresh(path)
     },
     /**
      * 页面 unload 事件监听器，添加页签到 session 缓存，用于刷新时保留页签
@@ -255,6 +261,7 @@ export default {
       return {
         keyPath: route.matched[route.matched.length - 1].path,
         fullPath: route.fullPath, loading: false,
+        path: route.path,
         title: route.meta && route.meta.page && route.meta.page.title,
         unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
       }
@@ -264,7 +271,7 @@ export default {
      * @param route 页面对应的路由
      */
     setCachedKey(route) {
-      const page = this.pageList.find(item => item.fullPath === route.fullPath)
+      const page = this.pageList.find(item => item.path === route.path)
       page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
       if (!page._init_) {
         const vnode = this.$refs.tabContent.$vnode
@@ -294,7 +301,7 @@ export default {
       routes.forEach(item => {
         const cacheAble = item.meta?.page?.cacheAble ?? pCache ?? true
         if (!cacheAble) {
-          this.excludeKeys.push(new RegExp(`${item.fullPath}\\d+$`))
+          this.excludeKeys.push(new RegExp(`${item.path}\\d+$`))
         }
         if (item.children) {
           this.loadCacheConfig(item.children, cacheAble)

src/pages/Demo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <p>query: {{$route.query}}</p>
+    <p>params: {{$route.params}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Demo'
+  }
+</script>
+
+<style scoped>
+
+</style>

src/pages/list/QueryList.vue

@@ -117,6 +117,7 @@
           <a @click="deleteRecord(record.key)" v-auth="`delete`">
             <a-icon type="delete" />删除2
           </a>
+          <router-link :to="`/list/query/detail/${record.key}`" >详情</router-link>
         </div>
         <template slot="statusTitle">
           <a-icon @click.native="onStatusTitleClick" type="info-circle" />

src/router/config.js

@@ -95,6 +95,15 @@ const options = {
               },
               component: () => import('@/pages/list/QueryList'),
             },
+            {
+              path: 'query/detail/:id',
+              name: '查询详情',
+              meta: {
+                highlight: '/list/query',
+                invisible: true
+              },
+              component: () => import('@/pages/Demo')
+            },
             {
               path: 'primary',
               name: '标准列表',
@@ -230,6 +239,28 @@ const options = {
           },
           component: () => import('@/pages/form/basic')
         },
+        {
+          name: '带参菜单',
+          path: 'router/query',
+          meta: {
+            icon: 'project',
+            query: {
+              name: '菜单默认参数'
+            }
+          },
+          component: () => import('@/pages/Demo')
+        },
+        {
+          name: '动态路由菜单',
+          path: 'router/dynamic/:id',
+          meta: {
+            icon: 'project',
+            params: {
+              id: 123
+            }
+          },
+          component: () => import('@/pages/Demo')
+        },
         {
           name: 'Ant Design Vue',
           path: 'antdv',

src/store/modules/setting.js

@@ -30,8 +30,8 @@ export default {
       }
       return state.menuData
     },
-    firstMenu(state) {
+    firstMenu(state, getters) {
-      const {menuData} = state
+      const {menuData} = getters
       if (menuData.length > 0 && !menuData[0].fullPath) {
         formatFullPath(menuData)
       }

src/utils/routerUtil.js

@@ -44,17 +44,36 @@ function parseRoutes(routesConfig, routerMap) {
       router = typeof item === 'string' ? {path: item, name: item} : item
     }
     // 从 router 和 routeCfg 解析路由
+    const meta = {
+      authority: router.authority,
+      icon: router.icon,
+      page: router.page,
+      link: router.link,
+      params: router.params,
+      query: router.query,
+      ...router.meta
+    }
+    const cfgMeta = {
+      authority: routeCfg.authority,
+      icon: routeCfg.icon,
+      page: routeCfg.page,
+      link: routeCfg.link,
+      params: routeCfg.params,
+      query: routeCfg.query,
+      ...routeCfg.meta
+    }
+    Object.keys(cfgMeta).forEach(key => {
+      if (cfgMeta[key] === undefined || cfgMeta[key] === null || cfgMeta[key] === '') {
+        delete cfgMeta[key]
+      }
+    })
+    Object.assign(meta, cfgMeta)
     const route = {
       path: routeCfg.path || router.path || routeCfg.router,
       name: routeCfg.name || router.name,
       component: router.component,
       redirect: routeCfg.redirect || router.redirect,
-      meta: {
+      meta: {...meta, authority: meta.authority || '*'}
-        authority: routeCfg.authority || router.authority || routeCfg.meta?.authority || router.meta?.authority || '*',
-        icon: routeCfg.icon || router.icon ||  routeCfg.meta?.icon || router.meta?.icon,
-        page: routeCfg.page || router.page ||  routeCfg.meta?.page || router.meta?.page,
-        link: routeCfg.link || router.link ||  routeCfg.meta?.link || router.meta?.link
-      }
     }
     if (routeCfg.invisible || router.invisible) {
       route.meta.invisible = true

yarn.lock

@@ -10425,8 +10425,8 @@ webpack-sources@*, webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sourc
 
 webpack-theme-color-replacer@1.3.18:
   version "1.3.18"
-  resolved "https://registry.npm.taobao.org/webpack-theme-color-replacer/download/webpack-theme-color-replacer-1.3.18.tgz#98b70eab698e40b06ea3c56a3db8590f7ccef847"
+  resolved "https://registry.npmjs.org/webpack-theme-color-replacer/-/webpack-theme-color-replacer-1.3.18.tgz#98b70eab698e40b06ea3c56a3db8590f7ccef847"
-  integrity sha1-mLcOq2mOQLBuo8VqPbhZD3zO+Ec=
+  integrity sha512-z7qM3opvuSjAyJd0eLMOpZhH56r+fFctczWG6xnhUSeRsvbCg/EnFdsYoGL3xYJZNANvwLlggpJxnAcuFV5a6Q==
   dependencies:
     webpack-sources "*"