From 17f4ac6291aaf806700f8252d900cd01f228dcaf Mon Sep 17 00:00:00 2001 From: Angelina Filippova Date: Thu, 28 Jan 2021 21:53:35 +0300 Subject: [PATCH] Pass nested settings routes to GenerateRoutes and save them in state --- src/router/index.js | 19 ++++---- src/store/modules/permission.js | 45 ++++++++++++++----- .../layout/components/Sidebar/SidebarItem.vue | 1 - src/views/layout/components/Sidebar/index.vue | 29 ++++++------ 4 files changed, 61 insertions(+), 33 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index c682264d..bead7d81 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -9,15 +9,16 @@ import Layout from '@/views/layout/Layout' const disabledFeatures = process.env.DISABLED_FEATURES || [] const settingsDisabled = disabledFeatures.includes('settings') const settingsChildren = () => { - const items = localStorage.getItem('settingsTabs') || [] - return JSON.parse(items).map(({ label, value }) => { - return { - path: value, - component: () => import(`@/views/settings/components/${label}`), - name: label, - meta: { title: label } - } - }) + return localStorage.getItem('settingsTabs') + ? JSON.parse(localStorage.getItem('settingsTabs')).map(({ label, value }) => { + return { + path: value, + component: () => import(`@/views/settings/components/${label}`), + name: label, + meta: { title: label } + } + }) + : [] } const settings = { path: '/settings', diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js index 13f60efb..c214e9ce 100644 --- a/src/store/modules/permission.js +++ b/src/store/modules/permission.js @@ -40,23 +40,48 @@ const permission = { addRouters: [] }, mutations: { - SET_ROUTERS: (state, routers) => { + SET_ADD_ROUTERS: (state, routers) => { state.addRouters = routers - state.routers = constantRouterMap.concat(routers) + }, + SET_ROUTERS: (state, routers) => { + state.routers = routers } }, actions: { - GenerateRoutes({ commit }, data) { + GenerateRoutes({ commit }, { roles, routes }) { return new Promise(resolve => { - const { roles } = data - let accessedRouters - if (roles.includes('admin')) { - accessedRouters = asyncRouterMap + if (!routes) { + let accessedRouters + if (roles.includes('admin')) { + accessedRouters = asyncRouterMap + } else { + accessedRouters = filterAsyncRouter(asyncRouterMap, roles) + } + commit('SET_ADD_ROUTERS', accessedRouters) + commit('SET_ROUTERS', constantRouterMap.concat(accessedRouters)) + resolve() } else { - accessedRouters = filterAsyncRouter(asyncRouterMap, roles) + const updRoutes = routes.reduce((acc, element) => { + if (acc.findIndex(route => route.path === element.path) !== -1) { + return acc + } else if (element.parent) { + const index = acc.findIndex(route => route.path === element.parent.path) + if (index > -1) { + const children = acc[index].children ? [...acc[index].children, element] : [element] + acc[index] = { ...acc[index], children } + return acc + } else { + const newRoute = { ...element.parent, children: [element] } + return [...acc, newRoute] + } + } else { + return [...acc, element] + } + }, []) + + commit('SET_ROUTERS', updRoutes) + resolve() } - commit('SET_ROUTERS', accessedRouters) - resolve() }) } } diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue index 75b3d58c..9db479da 100644 --- a/src/views/layout/components/Sidebar/SidebarItem.vue +++ b/src/views/layout/components/Sidebar/SidebarItem.vue @@ -91,7 +91,6 @@ export default { methods: { hasOneShowingChild(children, parent) { if (parent.hasSubmenu) { - console.log(children) return false } diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue index b23e4dc6..73c7a98b 100644 --- a/src/views/layout/components/Sidebar/index.vue +++ b/src/views/layout/components/Sidebar/index.vue @@ -18,13 +18,14 @@ import { mapGetters } from 'vuex' import SidebarItem from './SidebarItem' import variables from '@/styles/variables.scss' -// import router from '@/router' +import router from '@/router' export default { components: { SidebarItem }, computed: { ...mapGetters([ 'permission_routers', + 'roles', 'sidebar', 'tabs' ]), @@ -41,20 +42,22 @@ export default { methods: { async handleOpen($event) { if ($event === '/settings') { - let items = localStorage.getItem('settingsTabs') - if (!items) { + if (!localStorage.getItem('settingsTabs')) { await this.$store.dispatch('FetchSettings') - items = this.tabs - localStorage.setItem('settingsTabs', JSON.stringify(items)) + const menuItems = this.tabs + localStorage.setItem('settingsTabs', JSON.stringify(menuItems)) + + menuItems.forEach(({ label, value }) => { + router.addRoute('Settings', { + path: value, + component: () => import(`@/views/settings/components/${label}`), + name: label, + meta: { title: label } + }) + }) + const routes = router.getRoutes().filter(item => !item.hidden) + this.$store.dispatch('GenerateRoutes', { roles: this.roles, routes }) } - JSON.parse(items).forEach(item => { - // router.addRoute('Settings', [{ - // path: item.value, - // component: { - // template: 'Ioio' - // } - // }]) - }) } } }