supermarkpp/src/views/Home.vue

<style lang="scss">
@import '../style/home.scss';
.siteTitle{
	font-size: 20px;
	font-weight: 400;
}
</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>
				<div class="siteTitle">顽主杯实盘大赛后台</div>
				
			</div>	
		</el-header>
		<el-container class="main">
			<!-- 左侧菜单 -->
			<el-aside class="left-aside" width="210px">
				<el-menu background-color='#151932'	text-color='#ffffff' :unique-opened='false'  :default-active="'/'+ $route.path.split('/')[1]" router class="left-menue" active-text-color="#ffffff">
					<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:'/'})
			})
		},
		// 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>