Merge branch 'feature/4月-菜单和权限' into dev

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/aside-menu.vue

@@ -46,6 +46,7 @@ export default {
 <style lang="scss" scoped>
 .aside-menu-box {
   flex-shrink: 0;
+  margin-right: 16px;
   padding: 8px 10px;
   width: 190px;
   height: calc(100vh - 60px);

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 {

src/router/index.js

@@ -430,11 +430,6 @@ export const constantRouterMap = [
                 },
 
     {
-        path: '/gic-error',
-        name: 'gic跳转失败页',
-        component: _import('errorPage', 'gic-error')
-    },
-    {
         path: '/403',
         name: '无权访问',
         component: errorPage
@@ -450,7 +445,12 @@ export const constantRouterMap = [
         component: errorPage
     }
     ]
-  }
+},
+{
+    path: '/gic-error',
+    name: 'gic跳转失败页',
+    component: _import('errorPage', 'gic-error')
+},
 ];
 export default new Router({
     // mode:'history',

src/views/errorPage/gic-error.vue

-<!--
- * @Descripttion: 当前组件信息
- * @version: 1.0.0
- * @Author: 无尘
- * @Date: 2019-10-28 09:32:04
- * @LastEditors: 无尘
- * @LastEditTime: 2020-07-20 09:49:55
- -->
 <template>
-  <div style="background:#f0f2f5;margin-top: -20px;height:100vh;">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img class="pic-404__parent" :src="img_404" alt="404" />
-      </div>
-      <div class="bullshit">
-        <!-- <div class="bullshit__oops">404</div> -->
-        <div class="bullshit__headline">{{ message }}</div>
-        <a :href="gicHost + '/gic-web/#/login?ishb=1'" class="bullshit__return-home" rel="noopener noreferrer">返回好办登录页</a>
-      </div>
-    </div>
+  <div class="error-page">
+    <!-- <img class="error-icon" src="@/assets/gic-error.png" alt="404" />
+    <div class="error-message">{{ message }}</div>
+    <el-button type="primary" @click="toLogin">返回好办登录页</el-button> -->
   </div>
 </template>
 
 <script>
-import img_404 from '@/assets/gic-error.png';
-
 export default {
   name: 'page404',
-  inject: ['layoutVm'],
   data() {
     return {
-      img_404,
       gicHost: '',
       message: ''
     };
   },
-  destroyed() {
-    this.layoutVm.$emit('command', 'showAside');
+  methods: {
+    toLogin() {
+      location.href = this.gicHost + '/gic-web/#/login?ishb=1';
+    }
   },
-  /* eslint-disable */
   mounted() {
-    this.layoutVm.$emit('command', 'hideAside');
-
     const errorCode = this.$route.query.errorCode;
     const message = {
       '1000': '系统异常', //传入的导购id错误、传入的企业微信id错误
@@ -48,8 +28,10 @@ export default {
       '1003': '系统异常，通过手机号查询失败',
       '1004': '企微应用未授权',
       '1005': '登录超时,请重新登录'
-    }
+    };
     this.message = message[errorCode] || '系统异常，请联系达摩管理员';
+    this.$message.error(this.message);
+    setTimeout(this.toLogin, 3000);
 
     const userInfos = JSON.parse(sessionStorage.getItem('userInfos') || '{}');
     this.gicHost = typeof userInfos.gicHost == 'string' ? userInfos.gicHost.replace(/\/$/, '') : '';
@@ -58,200 +40,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  margin: 20px auto 60px;
-  padding: 0 100px;
-  overflow: hidden;
-  .pic-404 {
-    position: relative;
-    width: 100%;
-    padding: 150px 0 0 ;
-    text-align: center;
-    overflow: hidden;
-    &__parent {
-      width: 148px;
-      max-width: 430px;
-    }
-    &__child {
-      position: absolute;
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
-    }
-  }
-  .bullshit {
-    position: relative;
-    width: 100%;
-    padding: 46px 0;
-    overflow: hidden;
+.error-page {
   display: flex;
-    align-items: center;
   flex-direction: column;
   justify-content: center;
-    &__oops {
-      color: #434e59;
-      font-size: 72px;
-      font-weight: 600;
-      line-height: 72px;
-      margin-bottom: 24px;
-      /*animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;*/
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background: #f2f3f5;
+  .error-icon {
+    width: 148px;
+    height: auto;
+    vertical-align: middle;
   }
-    &__headline {
+  .error-message {
+    margin: 60px 0 37px;
     color: #606266;
     font-size: 14px;
     line-height: 28px;
-      margin-bottom: 37px;
-      /*animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;*/
-    }
-
-    &__return-home {
-      display: inline-block;
-      height: 32px;
-      line-height: 32px;
-      font-weight: 400;
-      text-align: center;
-      -ms-touch-action: manipulation;
-      touch-action: manipulation;
-      background-image: none;
-      white-space: nowrap;
-      padding: 0 15px;
-      font-size: 14px;
-      border-radius: 4px;
-      border: 1px solid #2f54eb;
-      color: #fff;
-      background-color: #2f54eb;
-      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-      -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
-      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
-      cursor: pointer;
-      /*animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;*/
-      &:hover {
-        color: #fff;
-        background-color: #597ef7;
-        border-color: #597ef7;
-      }
-      &:active {
-        color: #fff;
-        background-color: #597ef7;
-        border-color: #597ef7;
-      }
-    }
-    @keyframes slideUp {
-      0% {
-        transform: translateY(60px);
-        opacity: 0;
-      }
-      100% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
   }
 }
 </style>