update: layout

src/App.vue

 <template>
   <div id="app" v-loading="loading" style="min-height: 100vh">
     <transition name="fade" mode="out-in">
-      <router-view v-if="!loading" :menu-list="menuList"></router-view>
+      <router-view v-if="!loading" :menu-list="menuList" :page-right="pageRight"></router-view>
     </transition>
   </div>
 </template>
@@ -36,7 +36,8 @@ export default {
   data() {
     return {
       loading: true,
-      menuList: []
+      menuList: [],
+      pageRight: []
     };
   },
   created() {
@@ -85,8 +86,9 @@ export default {
           errorMsg.errorMsg(resp.data);
           return;
         }
+        this.pageRight = this.getPageRight(result.menu);
         this.checkButtonRight(result.button);
-        this.checkPageRight(result.menu, menu => consoleButtonCode(menu, result.button));
+        this.checkPageRight(this.pageRight, menu => consoleButtonCode(menu, result.button));
         // 打印当前页面需要权限控制的按钮数据
         function consoleButtonCode(menu, buttonList) {
           if (menu && menu.menuCode) {
@@ -96,6 +98,30 @@ export default {
       });
     },
     /**
+     * @description 给页面权限数据添加正则字段，页面访问权限校验时使用正则字段校验url
+     * @param {Array} menu 页面权限数据
+     * @return {Array} 新的页面权限数据，已经添加了正则字段并且过滤掉menuUrl为空的数据
+     */
+    getPageRight(menu) {
+      return menu
+        .filter(el => typeof el.menuUrl == 'string' && el.menuUrl.length > 0)
+        .map(el => {
+          let { menuUrl } = el;
+          let menuUrlReg = menuUrl;
+          let pathConfigReg = /(:.*)(\/?)/;
+          const pathRegStr = '([\\d\\w]+[\\-]*[\\d\\w]*)';
+          while (pathConfigReg.test(menuUrlReg)) {
+            menuUrlReg = menuUrlReg.replace(pathConfigReg, `${pathRegStr}$2`);
+          }
+          pathConfigReg = /(\/\*)(\/?)/;
+          while (pathConfigReg.test(menuUrlReg)) {
+            menuUrlReg = menuUrlReg.replace(pathConfigReg, `${pathRegStr}$2`);
+          }
+          el.regexp = new RegExp(`^\/${menuUrlReg}\$`);
+          return el;
+        });
+    },
+    /**
      * @description 校验按钮权限
      */
     checkButtonRight(rightList) {
@@ -111,7 +137,7 @@ export default {
      */
     checkPageRight(rightList, consoleButtonCode) {
       // 页面访问权限校验
-      const menu = rightList.find(el => el.menuUrl == toPath.substr(1));
+      const menu = rightList.find(el => el.regexp.test(toPath));
       // 页面第一次打开后，校验权限的beforeEach还没有创建，所以需要手动校验一下页面权限
       if (menu && menu.hasRight == 0) {
         // 切换商户后，如果当前页面无访问权限，就回首页
@@ -126,7 +152,7 @@ export default {
       }
       consoleButtonCode(menu);
       router.beforeEach((to, from, next) => {
-        const menu = rightList.find(el => el.menuUrl == to.path.substr(1));
+        const menu = rightList.find(el => el.regexp.test(to.path));
         consoleButtonCode(menu);
         if (menu && menu.hasRight == 0) {
           return next({ path: '/403' });

src/components/layout/index.vue

@@ -2,7 +2,7 @@
   <div class="hb-layout" v-loading="fullLoading.visible">
     <main-menu ref="mainMenu" :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''" @showLoading="onShowLoading"></main-menu>
     <aside-menu v-show="showAside" :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
-    <div class="hb-layout-content">
+    <div class="hb-layout-content" :style="{ width: showAside ? 'calc(100% - 206px)' : '100%' }">
       <bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
       <div class="hb-layout-pager" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%', 'padding-bottom': pagePaddingBottom }">
         <!-- 页面内容 -->
@@ -32,6 +32,10 @@ export default {
     menuList: {
       type: Array,
       default: () => []
+    },
+    pageRight: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -109,7 +113,7 @@ export default {
       return result;
     },
     getMenuByPath(path) {
-      return this.flatMenuList.find(el => el.menuUrl == path) || {};
+      return this.pageRight.find(el => el.regexp.test('/' + path)) || {};
     },
     onShowLoading(loading) {
       if (loading) {
@@ -153,8 +157,7 @@ export default {
   overflow: hidden;
   overflow-x: auto;
   .hb-layout-content {
-    padding: 20px 0 0 16px;
-    width: calc(100% - 190px);
+    padding-top: 20px;
     height: calc(100vh - 60px);
     box-sizing: border-box;
     .hb-layout-pager {