supermarkpp/src/views/Home.vue

<style lang="scss">
	@import '../style/home.scss';

	.siteTitle {
		font-size: 20px;
		font-weight: 400;
		position: relative;
		&::before{
			content: '|';
			position: absolute;
			left:-20px;
			font-size: 14px;
			color: #D2D2D2;
		}
	}
</style>

<template>
	<el-container>
		<el-header>
			<div class="header">
				<span class="logout" @click="logout">退出登陆</span>
				<el-dropdown class="logout" v-if='info.name' style="margin-right:10px;">
					<span class="el-dropdown-link" style="color:#fff;font-size:16px;">
						{{info.name}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="changePsw">修改密码</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<!-- <img width="128" src="../assets/logo.png" alt=""> -->
				<div class="siteTitle">云阅评管理系统</div>
			</div>
		</el-header>
		<el-container class="main">
			<!-- 左侧菜单 -->
			<el-aside class="left-aside" width="210px">
				<el-menu  :unique-opened='false'
					:default-active="0" router class="left-menue"
					active-text-color="#FA0A2F">
					<template v-for="(item, index) in $router.options.routes">
						<el-menu-item v-if='item.show&&item.isLeaf' :index="item.path" :key='index'>
							<i :class="item.icon"></i>
							<span slot="title">{{item.name}}</span>
						</el-menu-item>
						<el-submenu v-if='item.show&&!item.isLeaf' :index="'index_'+index" :key='index'>
							<template slot="title">
								<i :class="item.icon"></i>
								<span>{{item.name}}</span>
							</template>
							<el-menu-item-group>
								<el-menu-item class="child" v-for="(child,idx) in item.children" :key="index+'_'+idx"
									:index="child.path" v-show='!child.hide'>
									{{child.name}}
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</template>
				</el-menu>
			</el-aside>
			<!-- 右侧内容 -->
			<el-container>
				<el-main>

					<transition name="fade" mode="out-in">
						<router-view></router-view>
					</transition>
				</el-main>
				<!-- <el-footer>Footer</el-footer> -->
			</el-container>
		</el-container>


		<el-dialog title="修改密码" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" label-width="80px">
				<!-- <el-form-item label="旧密码">
                    <el-input clearable v-model="form.password" placeholder=""></el-input>
                </el-form-item> -->
				<el-form-item label="新密码">
					<el-input type="password" v-model="form.password" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input type="password" v-model="form.repassword" placeholder=""></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="open=false">取 消</el-button>
			</div>
		</el-dialog>
	</el-container>
</template>

<script>
	import Router from 'vue-router'
	export default {
		name: 'home',

		data() {
			return {
				info: {},
				open: false,
				form: {}
			};
		},
		methods: {
			changePsw() {
				this.open = true;

			},
			submitForm() {
				if (!this.form.password) {
					this.msgError('请输入新密码');
					return
				}
				if (!this.form.repassword) {
					this.msgError('请确认密码');
					return
				}
				this.$api.reset(this.form).then(res => {
					if (res.data.code == 0) {
						this.$router.push({
							path: '/'
						})
					} else {
						this.msgError(res.data.message);
					}

				})
			},
			logout() {
				this.$api.logout().then(res => {
					// this.$router.push({path:'/login'})
					this.$router.push({
						path: '/admin'
					})
				})
			},
			// permission(name){
			// 	let permissions=this.info.permissions||[];
			// 	let list=[];
			// 	for(let i=0;i<permissions.length;i++){
			// 		list.push(permissions[i].name)
			// 	}
			// 	if(list.indexOf(name)<0){
			// 		return false;
			// 	}else{
			// 		return true;
			// 	}	
			// },
			getData() {
				this.$api.getAccountInfo().then(res => {
					if (!res.code) {
						this.info = res.data.data
					}
				})
			},

		},

		created() {
			this.getData()
		}
	};
</script>