sccg_ui.git - Gitblit

			@@ -1,69 +1,88 @@
			<template>
			<div>
			<!-- 侧边导航栏 -->
			<el-aside width="200px">
			<h2 class="siderbar-title" @click="toHome()">遂昌执法平台</h2>
			<el-scrollbar>
			<!-- 路由 -->
			<el-menu router
			class="el-menu-vertical"
			:default-active="$route.path.name"
			@select="handleSelect">
			<el-submenu
			:index="String(menu.id)"
			v-for="menu in menuList"
			:key="menu.id"
			class="firstMenu"
			>
			<template slot="title">
			<span slot="prefix" class="icon-padding fisrtSpan">
			<svg-icon class="icon-title" :icon-class="menu.icon"></svg-icon>
			</span>
			<span class="fisrtSpan">{{ menu.title }}</span>
			</template>
			<template v-if="menu.menuVoArrayList.length > 0">
			<template v-for="secondMenu in menu.menuVoArrayList">
			<el-submenu
			:key="secondMenu.id"
			v-if="secondMenu.menuVoArrayList.length > 0"
			:index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
			class="secondMenu"
			:class="secondMenu.menuVoArrayList.length > 0?'is-Active':'none-Active'"
			<div>
			<!-- 侧边导航栏 -->
			<el-aside width="200px">
			<h2 class="siderbar-title" @click="toHome()">遂昌执法平台</h2>
			<el-scrollbar>
			<!-- 路由 -->
			<el-menu
			router
			class="el-menu-vertical"
			:default-active="$route.path.name"
			@select="handleSelect"
			>
			<template slot="title">
			<span class="secondSpan">{{ secondMenu.title }}</span>
			</template>
			<el-menu-item
			v-for="thirdMenu in secondMenu.menuVoArrayList"
			:key="thirdMenu.id"
			:index="`${thirdMenu.id}`"
			:route="{ name: thirdMenu.url }"
			v-if="thirdMenu.id!='65'"
			<el-submenu
			:index="String(menu.id)"
			v-for="menu in menuList"
			:key="menu.id"
			class="firstMenu"
			>
			<template>
			{{thirdMenu.title }}
			</template></el-menu-item
			>
			</el-submenu>
			<el-menu-item
			v-else
			:index="`${secondMenu.id}`"
			:route="{ name: secondMenu.url }"
			>{{ secondMenu.title }}</el-menu-item>
			</template>
			</template>
			<el-menu-item
			v-else
			:key="menu.id"
			:index="`${menu.id}`"
			:route="{ name: menu.url }"
			>{{ menu.title }}</el-menu-item
			>
			</el-submenu>
			</el-menu>
			</el-scrollbar>
			</el-aside>
			</div>
			<template slot="title">
			<span slot="prefix" class="icon-padding fisrtSpan">
			<svg-icon
			class="icon-title"
			v-bind:class="menu.icon"
			:icon-class="menu.icon"
			></svg-icon>
			</span>
			<span class="fisrtSpan">{{ menu.title }}</span>
			</template>
			<template v-if="menu.menuVoArrayList.length > 0">
			<template
			v-for="secondMenu in menu.menuVoArrayList"
			>
			<el-submenu
			:key="secondMenu.id"
			v-if="secondMenu.menuVoArrayList.length > 0"
			:index="
			secondMenu.url
			? secondMenu.url
			: secondMenu.id.toString()
			"
			class="secondMenu"
			:class="
			secondMenu.menuVoArrayList.length > 0
			? 'is-Active'
			: 'none-Active'
			"
			>
			<template slot="title">
			<span class="secondSpan">{{
			secondMenu.title
			}}</span>
			</template>
			<el-menu-item
			v-for="thirdMenu in secondMenu.menuVoArrayList"
			:key="thirdMenu.id"
			:index="`${thirdMenu.id}`"
			:route="{ name: thirdMenu.url }"
			v-if="thirdMenu.id != '65'"
			>
			<template>
			{{ thirdMenu.title }}
			</template></el-menu-item
			>
			</el-submenu>
			<el-menu-item
			v-else
			:index="`${secondMenu.id}`"
			:route="{ name: secondMenu.url }"
			>{{ secondMenu.title }}</el-menu-item
			>
			</template>
			</template>
			<el-menu-item
			v-else
			:key="menu.id"
			:index="`${menu.id}`"
			:route="{ name: menu.url }"
			>{{ menu.title }}</el-menu-item
			>
			</el-submenu>
			</el-menu>
			</el-scrollbar>
			</el-aside>
			</div>
			</template>

			<script>
			@@ -71,168 +90,172 @@
			import router from "@/router";

			export default {
			data() {
			return {
			menuList: [],
			isActive:''
			};
			},
			created() {
			this.loadMenu();
			},
			watch: {
			$route(){
			this.handleSelect(this.$route.fullPath)
			console.log(this.$route)
			}
			},
			methods: {
			handleSelect(path){
			this.isActive = path
			data() {
			return {
			menuList: [],
			isActive: ''
			};
			},
			loadMenu() {
			const userName = sessionStorage.getItem('name');
			users.getMenu({ name: userName })
			.then(res => {
			// console.log(res)
			// debugger
			this.menuList = res.menus;
			sessionStorage.setItem('user', JSON.stringify(res));
			})
			.catch(err => this.$message.error(err))
			created() {
			this.loadMenu();
			},
			toHome(){
			router.push("/home")
			}
			},
			watch: {
			$route() {
			this.handleSelect(this.$route.fullPath)
			},
			'$route.path'(toPath, fromPath) {
			this.handleSelect(toPath)
			this.$router.push({ path: toPath })
			},
			},

			methods: {
			handleSelect(path) {
			this.isActive = path
			},
			loadMenu() {
			const userName = sessionStorage.getItem('name');
			users.getMenu({ name: userName })
			.then(res => {
			this.menuList = res.menus;
			sessionStorage.setItem('user', JSON.stringify(res));
			})
			.catch(err => this.$message.error(err))
			},
			toHome() {
			router.push("/home")
			}
			},
			};
			</script>

			<style lang="scss" scpoed>
			.icon-padding {
			padding-right: 10px;
			.icon-title{
			width: 36px;
			height: 36px;
			}
			padding-right: 10px;
			.icon-title {
			width: 36px;
			height: 36px;
			}
			}
			.smoke {
			padding: 5px;
			}
			.el-aside {
			background: #313350;
			color: #e9eef3;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			// 固定标题
			.siderbar-title {
			position: fixed;
			background: #313350;
			color: #e9eef3;
			text-align: center;
			margin: 0;
			font-size: 26px;
			width: 200px;
			line-height: 66px;
			top: 0;
			left: 0;
			z-index: 999;
			cursor: pointer;
			}
			.el-scrollbar {
			height: calc(100vh - 66px);
			margin-top: 66px;
			box-sizing: border-box;
			.el-menu {
			background: linear-gradient(#313350, #0f2b56);
			border: 0;
			font-size: 16px;
			.is-opened{
			.fisrtSpan{
			color: #22d3eb;
			}
			}
			.firstMenu {
			background: #313350;
			text-align: left;
			//border-bottom:1px solid #ccc ;
			&:hover > .el-submenu__title {
			background-color: #092c4a;
			}
			&:hover .fisrtSpan {
			color: #22d3eb;
			}
			span,
			span {
			color: #e9eef3;
			font-size: 16px;
			}
			.el-menu{
			.is-active {
			background-color: #409EFF;
			color: #fff;
			}
			.is-Active{
			background-color: #092c4a;
			color: #fff;
			}
			}
			.el-menu-item {
			color: #e9eef3;
			background-color: #313350;
			font-size: 16px;
			// border-bottom: 0.5px solid #7c7979;
			}
			.el-menu-item:hover {
			background-color: #409EFF;
			color: #22d3eb;
			}
			.is-opened{
			.secondSpan{
			color: #22d3eb;
			}
			}
			.secondMenu{
			//border-bottom:1px solid #ccc ;
			.is-active {
			background-color: #409EFF;
			color: #22d3eb;
			}
			}
			}
			.secondMenu {

			&:hover > .el-submenu__title {
			background-color: #092c4a;
			}
			.secondSpan{
			}
			&:hover .secondSpan {
			color: #22d3eb;
			}
			.is-opened{
			.el-submenu__title{
			background-color: #fff;
			}
			}
			.is-active {
			background-color: #409EFF;
			color: #fff;
			}
			}
			.thirdMenu {
			&:hover > .el-submenu__title {
			background-color: #092c4a;
			}

			&:hover .thirdSpan {
			color: #22d3eb;
			}
			}

			.is-active {
			background-color: #092c4a;
			}
			position: relative;
			// 固定标题
			.siderbar-title {
			position: fixed;
			text-align: center;
			margin: 0;
			font-size: 26px;
			width: 200px;
			line-height: 66px;
			top: 0;
			left: 0;
			z-index: 999;
			cursor: pointer;
			}
			.el-scrollbar__wrap {
			overflow-x: hidden;
			.el-scrollbar {
			height: calc(100vh - 66px);
			margin-top: 66px;
			box-sizing: border-box;
			.el-menu {
			background: linear-gradient(#313350, #0f2b56);
			border: 0;
			font-size: 16px;
			.is-opened {
			.fisrtSpan {
			color: #22d3eb;
			}
			}
			.firstMenu {
			background: #313350;
			text-align: left;
			//border-bottom:1px solid #ccc ;
			&:hover > .el-submenu__title {
			background-color: #092c4a;
			}
			&:hover .fisrtSpan {
			color: #22d3eb;
			}
			span,
			span {
			color: #e9eef3;
			font-size: 16px;
			}
			.el-menu {
			.is-active {
			background-color: #409eff;
			color: #fff;
			}
			.is-Active {
			background-color: #092c4a;
			color: #fff;
			}
			}
			.el-menu-item {
			color: #e9eef3;
			background-color: #313350;
			font-size: 16px;
			// border-bottom: 0.5px solid #7c7979;
			}
			.el-menu-item:hover {
			background-color: #409eff;
			color: #22d3eb;
			}
			.is-opened {
			.secondSpan {
			color: #22d3eb;
			}
			}
			.secondMenu {
			//border-bottom:1px solid #ccc ;
			.is-active {
			background-color: #409eff;
			color: #22d3eb;
			}
			}
			}
			.secondMenu {
			&:hover > .el-submenu__title {
			background-color: #092c4a;
			}
			.secondSpan {
			}
			&:hover .secondSpan {
			color: #22d3eb;
			}
			.is-opened {
			.el-submenu__title {
			background-color: #fff;
			}
			}
			.is-active {
			background-color: #409eff;
			color: #fff;
			}
			}
			.thirdMenu {
			&:hover > .el-submenu__title {
			background-color: #092c4a;
			}

			&:hover .thirdSpan {
			color: #22d3eb;
			}
			}

			.is-active {
			background-color: #092c4a;
			}
			}
			.el-scrollbar__wrap {
			overflow-x: hidden;
			}
			}
			}
			}
			</style>