lz il y a 3 ans
Parent
commit
1ae199c070

+ 46 - 46
src/assets/styles/variables.scss

@@ -1,41 +1,41 @@
 // base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #f4f4f5;
+$base-menu-background: #131b28;
 $base-logo-title-color: #ffffff;
 
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-hover: #001528;
 
 // sidebar
-$menuText:#fff;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#fff; // https://github.com/ElemeFE/element/issues/12951
+$menuText: #fff;
+$menuActiveText: #409eff;
+$subMenuActiveText: #fff; // https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#141B29;
-$menuHover:#263445;
+$menuBg: #141b29;
+$menuHover: #263445;
 $sidebarTitle: #ffffff;
 
-$menuLightBg:#ffffff;
-$menuLightHover:#f0f1f5;
+$menuLightBg: #ffffff;
+$menuLightHover: #f0f1f5;
 $sidebarLightTitle: #001529;
 
-$subMenuBg:#141B29;
-$subMenuHover:#4774cc;
+$subMenuBg: #141b29;
+$subMenuHover: #4774cc;
 
 $sideBarWidth: 185px;
 // 自定义暗色菜单风格
@@ -58,27 +58,27 @@ $base-sidebar-width: 200px;
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-  // menuColor: $base-menu-color;
-  // menuLightColor: $base-menu-light-color;
-  // menuColorActive: $base-menu-color-active;
-  // menuBackground: $base-menu-background;
-  // menuLightBackground: $base-menu-light-background;
-  // subMenuBackground: $base-sub-menu-background;
-  // subMenuHover: $base-sub-menu-hover;
-  // sideBarWidth: $base-sidebar-width;
-  // logoTitleColor: $base-logo-title-color;
-  // logoLightTitleColor: $base-logo-light-title-color
+	// menuColor: $base-menu-color;
+	// menuLightColor: $base-menu-light-color;
+	// menuColorActive: $base-menu-color-active;
+	// menuBackground: $base-menu-background;
+	// menuLightBackground: $base-menu-light-background;
+	// subMenuBackground: $base-sub-menu-background;
+	// subMenuHover: $base-sub-menu-hover;
+	// sideBarWidth: $base-sidebar-width;
+	// logoTitleColor: $base-logo-title-color;
+	// logoLightTitleColor: $base-logo-light-title-color
 
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  menuLightBg: $menuLightBg;
-  menuLightHover: $menuLightHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-  sidebarTitle: $sidebarTitle;
-  sidebarLightTitle: $sidebarLightTitle
+	menuText: $menuText;
+	menuActiveText: $menuActiveText;
+	subMenuActiveText: $subMenuActiveText;
+	menuBg: $menuBg;
+	menuHover: $menuHover;
+	menuLightBg: $menuLightBg;
+	menuLightHover: $menuLightHover;
+	subMenuBg: $subMenuBg;
+	subMenuHover: $subMenuHover;
+	sideBarWidth: $sideBarWidth;
+	sidebarTitle: $sidebarTitle;
+	sidebarLightTitle: $sidebarLightTitle;
 }

+ 69 - 68
src/components/shortcutMenu/index.vue

@@ -15,84 +15,85 @@
 </template>
 
 <script>
-	export default {
-		data() {
+export default {
+	data() {
+		return {
+			moreStatus: false,
+			delStatus: false
+		}
+	},
+	computed: {
+		theme() {
+			return this.$store.state.settings.theme
+		}
+	},
+	methods: {
+		isActive(route) {
+			return route.path === this.$route.path
+		},
+		activeStyle(tag) {
+			if (!this.isActive(tag)) return {}
 			return {
-				moreStatus: false,
-				delStatus: false
+				'background-color': this.theme,
+				'border-color': this.theme
 			}
 		},
-		computed: {
-			theme() {
-				return this.$store.state.settings.theme
-			}
+		moreOpen() {
+			this.moreStatus = true
 		},
-		methods: {
-			isActive(route) {
-				return route.path === this.$route.path
-			},
-			activeStyle(tag) {
-				if (!this.isActive(tag)) return {}
-				return {
-					'background-color': this.theme,
-					'border-color': this.theme
-				}
-			},
-			moreOpen() {
-				this.moreStatus = true
-			},
-			moreClose() {
-				this.moreStatus = false
-			}
+		moreClose() {
+			this.moreStatus = false
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.shortcut {
-		height: 40px;
-		line-height: 40px;
-		padding: 0 10px;
-		overflow: hidden;
-		display: flex;
-		.tags {
-			flex: 1;
-			.tag {
-				font-size: 14px;
-				color: #fff;
-				margin-right: 5px;
-				display: inline-block;
-				position: relative;
-				background: #4c9898;
-				border: #4c9898 1px solid;
-				border-radius: 5px;
-				margin-top: 7px;
-				padding: 0 15px;
-				i {
-					position: absolute;
-					top: 20%;
-					right: -10px;
-				}
-			}
-		}
-		.btns {
-			width: 50px;
-			display: flex;
-			justify-content: space-between;
-			.more-open i {
-				transform: rotate(-90deg);
-				-webkit-transform: rotate(-90deg);
-				-moz-transform: rotate(-90deg);
-				-o-transform: rotate(-90deg);
-				-mz-transform: rotate(-90deg);
-			}
-			.more-close i {
-				transform: rotate(90deg);
-				-webkit-transform: rotate(90deg);
-				-moz-transform: rotate(90deg);
-				-o-transform: rotate(90deg);
-				-mz-transform: rotate(90deg);
+.shortcut {
+	height: 40px;
+	line-height: 40px;
+	padding: 0 10px;
+	overflow: hidden;
+	display: flex;
+	justify-content: space-between;
+	.tags {
+		flex: 1;
+		.tag {
+			font-size: 14px;
+			color: #fff;
+			margin-right: 5px;
+			display: inline-block;
+			position: relative;
+			background: #4c9898;
+			border: #4c9898 1px solid;
+			border-radius: 5px;
+			margin-top: 7px;
+			padding: 0 15px;
+			i {
+				position: absolute;
+				top: 20%;
+				right: -10px;
 			}
 		}
 	}
+	.btns {
+		height: 40px;
+		display: flex;
+		align-items: center;
+		// .more-open i {
+		// 	transform: rotate(-90deg);
+		// 	-webkit-transform: rotate(-90deg);
+		// 	-moz-transform: rotate(-90deg);
+		// 	-o-transform: rotate(-90deg);
+		// 	-mz-transform: rotate(-90deg);
+		// }
+		// .more-close i {
+		// 	transform: rotate(90deg);
+		// 	-webkit-transform: rotate(90deg);
+		// 	-moz-transform: rotate(90deg);
+		// 	-o-transform: rotate(90deg);
+		// 	-mz-transform: rotate(90deg);
+		// }
+	}
+}
 </style>

+ 64 - 0
src/layout/components/Sidebar.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="has-logo">
+		<logo :collapse="isCollapse" />
+		<div class="sidebar-box">
+			<div v-for="item in sidebarRouters" :key="item.path" class="sidebar-box-item" @click="test(item)">{{ item.menuName }}</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+import Logo from './Sidebar/Logo'
+import variables from '@/assets/styles/variables.scss'
+
+export default {
+	components: { Logo },
+	computed: {
+		...mapState(['settings']),
+		...mapGetters(['sidebarRouters', 'sidebar']),
+		activeMenu() {
+			const route = this.$route
+			const { meta, path } = route
+			// if set path, the sidebar will highlight the path you set
+			if (meta.activeMenu) {
+				return meta.activeMenu
+			}
+			return path
+		},
+		variables() {
+			return variables
+		},
+		isCollapse() {
+			return !this.sidebar.opened
+		}
+	},
+	methods: {
+		test(e) {
+			console.log(e)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sidebar-box {
+	width: 100%;
+	.sidebar-box-item {
+		width: 100%;
+		height: 49px;
+		font-size: 14px;
+		color: #fff;
+		text-align: center;
+		line-height: 49px;
+		cursor: pointer;
+		border-bottom: 1px dashed #535559;
+		&:hover {
+			background-color: #535559;
+		}
+		&.active {
+			background-color: #4c9898;
+		}
+	}
+}
+</style>

+ 1 - 1
src/layout/components/index.js

@@ -1,5 +1,5 @@
 export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
 export { default as Settings } from './Settings'
-export { default as Sidebar } from './Sidebar/index.vue'
+export { default as Sidebar } from './Sidebar.vue'
 export { default as TagsView } from './TagsView/index.vue'

+ 26 - 78
src/store/modules/permission.js

@@ -1,34 +1,14 @@
 import { constantRoutes } from '@/router'
 import { getRouters } from '@/api/menu'
 import Layout from '@/layout/index'
-import ParentView from '@/components/ParentView'
-import InnerLink from '@/layout/components/InnerLink'
 
 const permission = {
 	state: {
-		routes: [],
-		addRoutes: [],
-		defaultRoutes: [],
-		topbarRouters: [],
-		sidebarRouters: []
+		routes: []
 	},
 	mutations: {
 		SET_ROUTES: (state, routes) => {
-			state.addRoutes = routes
-			state.routes = constantRoutes.concat(routes)
-		},
-		SET_DEFAULT_ROUTES: (state, routes) => {
-			state.defaultRoutes = constantRoutes.concat(routes)
-		},
-		SET_TOPBAR_ROUTES: (state, routes) => {
-			// 顶部导航菜单默认添加统计报表栏指向首页
-			const index = [
-				{
-					path: 'index',
-					meta: { title: '统计报表', icon: 'dashboard' }
-				}
-			]
-			state.topbarRouters = routes.concat(index)
+			state.routes = routes
 		},
 		SET_SIDEBAR_ROUTERS: (state, routes) => {
 			state.sidebarRouters = routes
@@ -40,15 +20,12 @@ const permission = {
 			return new Promise(resolve => {
 				// 向后端请求路由数据
 				getRouters().then(res => {
-					const sdata = JSON.parse(JSON.stringify(res.data))
-					const rdata = JSON.parse(JSON.stringify(res.data))
-					const sidebarRoutes = filterAsyncRouter(sdata)
-					const rewriteRoutes = filterAsyncRouter(rdata, false, true)
+					const data = JSON.parse(JSON.stringify(res.data))
+					const sidebarRouters = filterSideBarRouters(data)
+					const rewriteRoutes = filterAsyncRouter(data)
 					rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
-					commit('SET_ROUTES', rewriteRoutes)
-					commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
-					commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-					commit('SET_TOPBAR_ROUTES', sidebarRoutes)
+					commit('SET_ROUTES', constantRoutes.concat(rewriteRoutes))
+					commit('SET_SIDEBAR_ROUTERS', sidebarRouters)
 					resolve(rewriteRoutes)
 				})
 			})
@@ -57,63 +34,34 @@ const permission = {
 }
 
 // 遍历后台传来的路由字符串,转换为组件对象
-function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
-	return asyncRouterMap.filter(route => {
-		route.meta.perms = route.perms
-		if (type && route.children) {
-			route.children = filterChildren(route.children)
-		}
-		if (route.component) {
-			// Layout ParentView 组件特殊处理
-			if (route.component === 'Layout') {
-				route.component = Layout
-			} else if (route.component === 'ParentView') {
-				route.component = ParentView
-			} else if (route.component === 'InnerLink') {
-				route.component = InnerLink
-			} else {
-				route.component = loadView(route.component)
+function filterAsyncRouter(data) {
+	return data
+		.filter(item => item.menuType === 'C')
+		.map(item => {
+			return {
+				path: '/' + item.path,
+				component: Layout,
+				hidden: true,
+				children: [
+					{
+						path: '',
+						component: loadView(item.component),
+						name: item.path,
+						meta: { title: item.menuName, icon: item.icon }
+					}
+				]
 			}
-		}
-		if (route.children != null && route.children && route.children.length) {
-			route.children = filterAsyncRouter(route.children, route, type)
-		} else {
-			delete route['children']
-			delete route['redirect']
-		}
-		return true
-	})
+		})
 }
 
-function filterChildren(childrenMap, lastRouter = false) {
-	var children = []
-	childrenMap.forEach((el, index) => {
-		if (el.children && el.children.length) {
-			if (el.component === 'ParentView' && !lastRouter) {
-				el.children.forEach(c => {
-					c.path = el.path + '/' + c.path
-					if (c.children && c.children.length) {
-						children = children.concat(filterChildren(c.children, c))
-						return
-					}
-					children.push(c)
-				})
-				return
-			}
-		}
-		if (lastRouter) {
-			el.path = lastRouter.path + '/' + el.path
-		}
-		children = children.concat(el)
-	})
-	return children
+function filterSideBarRouters(data) {
+	return data.filter(item => item.menuType === 'M')
 }
 
 export const loadView = view => {
 	if (process.env.NODE_ENV === 'development') {
 		return resolve => require([`@/views/${view}`], resolve)
 	} else {
-		// 使用 import 实现生产环境的路由懒加载
 		return () => import(`@/views/${view}`)
 	}
 }