审查视图

src/views/Home.vue 8.6 KB
朱兆平 authored
1
<template>
shenhailong authored
2
	<el-row class="container darkmenu" style="margin-top: 0px;">
朱兆平 authored
3 4
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
5
				水电集中缴费平台
朱兆平 authored
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
shenhailong authored
26
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed" style="min-width: 230px">
朱兆平 authored
27 28 29 30 31 32 33 34 35 36 37 38 39
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
shenhailong authored
40
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
朱兆平 authored
41 42 43 44
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<template v-else>
shenhailong authored
45 46
					<li class="el-submenu">
						<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
朱兆平 authored
47
					</li>
shenhailong authored
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
</template>
</li>
</ul>
</aside>
<section class="content-container">
	<div class="grid-content bg-purple-light">
		<el-col :span="24" class="breadcrumb-container">
			<strong class="title">{{$route.name}}</strong>
			<el-breadcrumb separator="/" class="breadcrumb-inner">
				<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
					{{ item.name }}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</el-col>
		<el-col :span="24" class="content-wrapper">
			<transition name="fade" mode="out-in">
				<router-view :key="$route.path +$route.query.t"></router-view>
			</transition>
朱兆平 authored
66
		</el-col>
shenhailong authored
67 68 69 70
	</div>
</section>
</el-col>
</el-row>
朱兆平 authored
71 72 73
</template>

<script>
shenhailong authored
74 75 76 77 78 79 80 81
	import rt from '../routes'
	export default {

		provide() {
			return {
				reload: this.reload
			}
		},
朱兆平 authored
82 83
		data() {
			return {
shenhailong authored
84
				sysName:'易通快速通关申报管理系统',
朱兆平 authored
85 86 87
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
shenhailong authored
88
				isRouterAlive: true,
朱兆平 authored
89 90 91 92 93 94 95 96 97 98 99 100 101
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		},
		methods: {
shenhailong authored
102 103 104 105 106 107 108 109 110 111
			reload() {
				this.$nextTick(function () {
					this.$router.push({
						path: this.$router.path,
						query:{
							t: new Date().getTime()
						}
					})
				})
			},
朱兆平 authored
112 113 114 115
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
116
				console.log('handleopen');
朱兆平 authored
117 118
			},
			handleclose() {
119
				console.log('handleclose');
朱兆平 authored
120 121
			},
			handleselect: function (a, b) {
shenhailong authored
122
				this.reload()
朱兆平 authored
123 124 125 126 127 128 129 130
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('user');
shenhailong authored
131 132 133 134
					sessionStorage.removeItem('menu');
					//退出后初始化原来的路由
					let sysRoutes =  JSON.parse(sessionStorage.getItem('sysMenu'));
					console.log(sysRoutes);
135 136
					_this.$router.options.routes = sysRoutes;
朱兆平 authored
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
					_this.$router.push('/login');
				}).catch(() => {

				});


			},
			//折叠导航栏
			collapse:function(){
				this.collapsed=!this.collapsed;
			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			}
		},
		mounted() {
shenhailong authored
153
			var _this = this;
朱兆平 authored
154 155 156
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
朱兆平 authored
157 158
				this.sysUserName = user.username || '';
				this.sysUserAvatar = user.userface || '/static/images/faceDefault.jpg';
朱兆平 authored
159
			}
160 161 162
			//操作路由,判断本地存储的用户栏目列表是否存在,如果存在则加载路由
			var userRouters = sessionStorage.getItem('menu');
			if (userRouters) {
shenhailong authored
163 164 165 166
				userRouters = JSON.parse(userRouters);
				_this.$router.options.routes = userRouters;
				console.log("home:");
				console.log(_this.$router.options.routes);
167
			}
朱兆平 authored
168 169 170 171 172 173 174 175 176 177 178 179 180 181 182
		}
	}

</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
shenhailong authored
183
			background: $color-primary url("/static/images/air-banner.png");
朱兆平 authored
184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 230px;
				width: 230px;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
			}
270 271 272
			.menu-expanded ul{
				width: 230px;
			}
朱兆平 authored
273 274 275 276 277 278 279 280 281
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
shenhailong authored
282
				padding: 10px;
朱兆平 authored
283 284 285 286 287 288
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
shenhailong authored
289
						margin-left: 10px;
朱兆平 authored
290 291 292
					}
					.breadcrumb-inner {
						float: right;
shenhailong authored
293 294 295 296
						margin-right:10px;
					}
					.el-breadcrumb{
						line-height:36px;
朱兆平 authored
297 298 299 300 301 302 303 304 305
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
shenhailong authored
306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343
</style>
<style lang="scss">
	.darkmenu{
		.main {
			aside {
				.el-menu{
					height: 100%;
					background: #606060;
					.el-menu-item {
						i{
							color: white;
						}
						color: white;
					}
					.el-menu-item.is-active{
						color:#e6a23c;
					}
					.el-menu-item:hover,.el-menu-item:focus{
						background-color: #1a4496;
					}
					.el-submenu {
						ul.el-menu.el-menu--inline{
							background: #303030;
						}
						.el-submenu__title {
							color: white;
							i{
								color: white;
							}
						}
						.el-submenu__title:hover {
							background-color: #1a4496;
						}
					}
				}
			}
		}
	}
朱兆平 authored
344
</style>