框架调整

src/components/AppList/index.vue

@@ -2,11 +2,12 @@
   <el-row>
     <el-col :span="24">
       <el-card class="el-card-auto" style="min-height:350px">
-      <div slot="header" class="clearfix">
-        <span style="font-size: 20px;">我的应用</span>
-        <el-button style="font-size: 20px;float: right; padding: 3px 0" type="text" @click="childMethod()">新建应用</el-button>
-      </div>
-      <!-- <div class="appList">
+        <div slot="header" class="clearfix">
+          <span style="font-size: 20px;">我的应用</span>
+          <el-button style="font-size: 20px;float: right; padding: 3px 0" type="text"
+            @click="childMethod()">新建应用</el-button>
+        </div>
+        <!-- <div class="appList">
         <div class="typeTitle">OA</div>
         <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
           <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
@@ -42,18 +43,19 @@
           </div>
         </div>
       </div> -->
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane v-for="item,index in appList" :label="item.name" :name="item.type" :key="index">
-          <div class="app-item" v-for="(childItem,index) in item.list" :key="index" @click="handleSelect(childItem)" @mouseover="showContent=index" @mouseleave="showContent=null">
-            <svg-icon :icon-class="childItem.icon" style="width: 40px;height: 40px"/>
-            {{ childItem.title }}
-            <div v-if="showContent==index" class="app-item-tools">
-              <!-- <el-popconfirm
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane v-for="item, index in appList" :label="item.name" :name="item.type" :key="index">
+            <div class="app-item" v-for="(childItem, index) in item.list" :key="index" @click="handleSelect(childItem)"
+              @mouseover="showContent = index" @mouseleave="showContent = null">
+              <svg-icon :icon-class="childItem.icon" style="width: 40px;height: 40px" />
+              {{ childItem.title }}
+              <div v-if="showContent == index" class="app-item-tools">
+                <!-- <el-popconfirm
                 title="确定删除吗？">
                 <i slot="reference" class="el-icon-delete-solid" @click="removeApp(index)"></i>
               </el-popconfirm> -->
-              <i slot="reference" class="el-icon-s-tools" @click.stop="editApp(childItem)"></i>
-              <!-- <el-popover
+                <i slot="reference" class="el-icon-s-tools" @click.stop="editApp(childItem)"></i>
+                <!-- <el-popover
                 placement="bottom"
                 width="200"
                 trigger="click"
@@ -61,11 +63,11 @@
                 <i slot="reference" class="el-icon-delete-solid"></i>
               </el-popover> -->
 
-              
+
+              </div>
             </div>
-          </div>
-        </el-tab-pane>
-        <!-- <el-tab-pane label="OA" name="first">
+          </el-tab-pane>
+          <!-- <el-tab-pane label="OA" name="first">
           <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
             <svg-icon :icon-class="item.meta.icon"/>
             {{ item.meta.title }}
@@ -89,39 +91,42 @@
             {{ item.meta.title }}
           </div>
         </el-tab-pane> -->
-      </el-tabs>
-    </el-card>
+        </el-tabs>
+      </el-card>
     </el-col>
   </el-row>
 </template>
 
 <script>
-
+import { constantRoutes } from "@/router";
+import router from '@/router'
+import store from '@/store'
+import { set } from "nprogress";
 export default {
   data() {
     return {
       activeName: 'first',
       showContent: null,
-      appList:[
+      appList: [
         {
           name: 'OA',
           type: 'first',
           list: [
             {
-              type:1,
+              type: 1,
               path: 'https://www.baidu.com/',
               title: '自定义应用',
               icon: 'zidingyi',
             },
             {
-              type:2,
+              type: 2,
               path: '/system/user',
               title: '请假',
               icon: 'qingjia',
             },
             {
-              type:2,
-              path: '/',
+              type: 2,
+              path: '/task/my',
               title: '出差',
               icon: 'chuchai',
             },
@@ -131,19 +136,19 @@ export default {
           name: '人事',
           type: 'second',
           list: [],
-          
+
         },
         {
           name: '财务',
           type: 'third',
           list: [],
-          
+
         },
         {
           name: 'CRM',
           type: 'fourth',
           list: [],
-          
+
         },
       ]
     };
@@ -168,28 +173,131 @@ export default {
     routers() {
       return this.$store.state.permission.topbarRouters;
     },
+    // 设置子路由
+    childrenMenus() {
+      const childrenMenus = [];
+      this.routers.map((router) => {
+        for (let item in router.children) {
+          if (router.children[item].parentPath === undefined) {
+            if (router.path === "/") {
+              router.children[item].path = "/" + router.children[item].path;
+            } else {
+              if (!this.ishttp(router.children[item].path)) {
+                router.children[item].path = router.path + "/" + router.children[item].path;
+              }
+            }
+            router.children[item].parentPath = router.path;
+          }
+          childrenMenus.push(router.children[item]);
+        }
+      });
+      return constantRoutes.concat(childrenMenus);
+    },
   },
   methods: {
+    // 当前激活的路由
+    activeRoutes(key) {
+      debugger
+      const routes = []
+      if (this.childrenMenus && this.childrenMenus.length > 0) {
+        this.childrenMenus.map((item) => {
+          if (key === item.parentPath || (key === "index" && "" === item.path)) {
+            routes.push(item);
+          }
+        });
+      }
+      if (routes.length > 0) {
+        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+      }
+      this.$router.push({ path: key });
+    },
     childMethod() {
-        this.$parent.openAppList();
+      this.$parent.openAppList();
     },
     //编辑应用
-    editApp(item){
+    editApp(item) {
       this.$parent.editApp(item);
     },
     // 菜单选择事件
     handleSelect(item) {
       let key = item.path;
+      const menus = [
+        {
+          "id": 1,
+          "parentId": 0,
+          "name": "任务管理",
+          "path": "/task",
+          "component": null,
+          "componentName": null,
+          "icon": "cascader",
+          "visible": true,
+          "keepAlive": true,
+          "alwaysShow": true,
+          "children": [
+            {
+              "id": 1201,
+              "parentId": 1200,
+              "name": "我的流程",
+              "path": "my",
+              "component": "bpm/processInstance/index",
+              "componentName": "BpmProcessInstance",
+              "icon": "people",
+              "visible": true,
+              "keepAlive": true,
+              "alwaysShow": true,
+              "children": null
+            },
+            {
+              "id": 1207,
+              "parentId": 1200,
+              "name": "待办任务",
+              "path": "todo",
+              "component": "bpm/task/todo/index",
+              "componentName": "BpmTodoTask",
+              "icon": "eye-open",
+              "visible": true,
+              "keepAlive": true,
+              "alwaysShow": true,
+              "children": null
+            },
+            {
+              "id": 1208,
+              "parentId": 1200,
+              "name": "已办任务",
+              "path": "done",
+              "component": "bpm/task/done/index",
+              "componentName": "BpmDoneTask",
+              "icon": "eye",
+              "visible": true,
+              "keepAlive": true,
+              "alwaysShow": true,
+              "children": null
+            }
+          ]
+        },
+      ]
+      localStorage.setItem("menus",JSON.stringify(menus))
       if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
         window.open(key, "_blank");
-      }else{
+      } else {
+        store.dispatch('GenerateRoutes', menus).then(accessRoutes => {
+          console.log(accessRoutes);
+          // 根据 roles 权限生成可访问的路由表
+          router.addRoutes(accessRoutes) // 动态添加可访问路由表
+          // this.$router.push({ path: key });
+        })
+        // 显示左侧联动菜单
+        // this.activeRoutes(key);
         //路径内部打开
-        this.$router.push({ path: key });
+        setTimeout(() => {
+          this.$router.push({ path: key });
+        }, 200);
       }
+
     },
     handleClick(tab, event) {
-        console.log(tab, event);
+      console.log(tab, event);
     },
     ishttp(url) {
       return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
@@ -198,76 +306,86 @@ export default {
 };
 </script>
 <style>
-  /*去掉切换时el-tab-pane底部的蓝色下划线*/
-  /* .el-tabs__active-bar {
+/*去掉切换时el-tab-pane底部的蓝色下划线*/
+/* .el-tabs__active-bar {
     background-color: transparent !important;
   } */
-  
-  /*去掉tabs底部的下划线*/
-  .el-tabs__nav-wrap::after {
-    position: static !important;
-  }
-  .el-tabs__nav-wrap{
-    padding: 0 30px !important;
-  }
+
+/*去掉tabs底部的下划线*/
+.el-tabs__nav-wrap::after {
+  position: static !important;
+}
+
+.el-tabs__nav-wrap {
+  padding: 0 30px !important;
+}
 </style>
 <style lang="scss">
-.el-icon-s-tools:hover{
+.el-icon-s-tools:hover {
   color: #00B899;
 }
-.typeTitle{
+
+.typeTitle {
   font-size: 20px;
   font-weight: 400;
   color: #1f2f3d;
   margin-left: 10px;
   margin-bottom: 10px;
 }
+
 .el-card-auto {
   min-height: 100%;
   height: 100%;
   margin-bottom: 20px;
 }
-.el-card-auto >>> .el-card__body {
+
+.el-card-auto>>>.el-card__body {
   height: 100%;
 }
+
 .el-tabs__item {
-    font-size: 18px;
-    font-weight: 500;
+  font-size: 18px;
+  font-weight: 500;
 }
+
 .app-item {
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    float: left;
-    width: 178px;
-    height: 150px; 
-    color: #999093;
-    margin: 10px 10px 10px 10px;
-    border-radius: 5px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  width: 178px;
+  height: 150px;
+  color: #999093;
+  margin: 10px 10px 10px 10px;
+  border-radius: 5px;
 }
+
 .app-item {
-    line-height: 50px;
-    font-size: 18px;
-    list-style: none;
-    cursor: pointer;
-    position: relative;
-    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-    box-sizing: border-box;
-    white-space: nowrap;
+  line-height: 50px;
+  font-size: 18px;
+  list-style: none;
+  cursor: pointer;
+  position: relative;
+  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
+  box-sizing: border-box;
+  white-space: nowrap;
 }
-.app-item-tools{
-    color: #838892;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 16px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
+
+.app-item-tools {
+  color: #838892;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 16px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
 }
-.app-item:hover, .app-item:focus {
-    outline: none;
-    background-color: #FFFFFF;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+.app-item:hover,
+.app-item:focus {
+  outline: none;
+  background-color: #FFFFFF;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -3,11 +3,11 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">爱思系统</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">爱思系统</h1>
       </router-link>
     </transition>
   </div>

src/permission.js

@@ -7,6 +7,61 @@ import { getAccessToken } from '@/utils/auth'
 import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
+// const menus = [
+//     {
+//         "id": 1,
+//         "parentId": 0,
+//         "name": "任务管理",
+//         "path": "/task",
+//         "component": null,
+//         "componentName": null,
+//         "icon": "cascader",
+//         "visible": true,
+//         "keepAlive": true,
+//         "alwaysShow": true,
+//         "children": [
+//             {
+//                 "id": 1201,
+//                 "parentId": 1200,
+//                 "name": "我的流程",
+//                 "path": "my",
+//                 "component": "bpm/processInstance/index",
+//                 "componentName": "BpmProcessInstance",
+//                 "icon": "people",
+//                 "visible": true,
+//                 "keepAlive": true,
+//                 "alwaysShow": true,
+//                 "children": null
+//             },
+//             {
+//                 "id": 1207,
+//                 "parentId": 1200,
+//                 "name": "待办任务",
+//                 "path": "todo",
+//                 "component": "bpm/task/todo/index",
+//                 "componentName": "BpmTodoTask",
+//                 "icon": "eye-open",
+//                 "visible": true,
+//                 "keepAlive": true,
+//                 "alwaysShow": true,
+//                 "children": null
+//             },
+//             {
+//                 "id": 1208,
+//                 "parentId": 1200,
+//                 "name": "已办任务",
+//                 "path": "done",
+//                 "component": "bpm/task/done/index",
+//                 "componentName": "BpmDoneTask",
+//                 "icon": "eye",
+//                 "visible": true,
+//                 "keepAlive": true,
+//                 "alwaysShow": true,
+//                 "children": null
+//             }
+//         ]
+//     }
+// ]
 
 // 增加三方登陆 update by 芋艿
 const whiteList = ['/login','/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
@@ -26,13 +81,22 @@ router.beforeEach((to, from, next) => {
         store.dispatch('dict/loadDictDatas')
         // 判断当前用户是否已拉取完 user_info 信息
         store.dispatch('GetInfo').then(userInfo => {
+          console.log('用户信息',userInfo);
           isRelogin.show = false
-          // 触发 GenerateRoutes 事件时，将 menus 菜单树传递进去
-          store.dispatch('GenerateRoutes', userInfo.menus).then(accessRoutes => {
-            // 根据 roles 权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
+          if(localStorage.getItem('new')){
+            var path = localStorage.getItem('new')
+            if (path == to.path) { //动态路由页面的刷新事件
+              //触发 GenerateRoutes 事件时，将 menus 菜单树传递进去
+              //获取菜单数据
+              let menus = localStorage.getItem('menus')
+              store.dispatch('GenerateRoutes', JSON.parse(menus)).then(accessRoutes => {
+                // 根据 roles 权限生成可访问的路由表
+                router.addRoutes(accessRoutes) // 动态添加可访问路由表
+                next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+              })
+            }
+          }
+          next({ ...to, replace: true }) 
         }).catch(err => {
           store.dispatch('LogOut').then(() => {
             Message.error(err)
@@ -56,6 +120,7 @@ router.beforeEach((to, from, next) => {
   }
 })
 
-router.afterEach(() => {
+router.afterEach((to, from) => {
+  localStorage.setItem("new",to.path)
   NProgress.done()
 })