zky-admin/src/views/Home.vue

<style lang="scss">
@import '../style/home.scss';
.siteTitle{
	width:300px;
	margin:0 auto;
}
</style>

<template>
	<el-container>
		<el-header>
			<div class="header">
				<!-- <img class="logo" src="../assets/logo.png" alt=""> -->
				<!-- <div class="siteTitle">中科院期刊微信公众号集中管理平台</div> -->
			</div>	
			<div class="nav">
				<!-- <router-link :class="act?'active':''" to="/index/index" @click.native='active(1)'>首页</router-link>
				<router-link to="/journal/journal" @click.native='active(2)'>刊群导览</router-link>
				<router-link to="/learning/activity" @click.native='active(3)'>学术交流</router-link>
				<router-link to="/article/article" @click.native='active(4)'>精品导读</router-link>
				<router-link to="/conference/conference" @click.native='active(5)'>会议系统</router-link>
				<router-link to="/message/message" @click.native='active(6)'>信息管理</router-link>
				<router-link to="/system/account" @click.native='active(7)'>系统管理</router-link> -->
				<router-link v-for='(item,index) in inDate' :key='index' :class="item.act?'active':''" :to="item.to" @click.native='active(index)'>
					{{item.name}}
				</router-link>
				<div class="setting">
					<i class="el-icon-message-solid"></i>
					<el-dropdown>
						<span class="el-dropdown-link">
							{{info.name}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>修改密码</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span class="logout" @click="logout">退出登陆</span>
				</div>
			</div>
		</el-header>
		<el-container class="main">
			<!-- 左侧菜单 -->
			<el-aside class="left-aside" width="210px">
				<el-menu background-color='#ffffff'	text-color='#666666' :unique-opened='false'  :default-active="'/'+ $route.path.split('/')[1]+'/'+ $route.path.split('/')[2]" router class="left-menue" active-text-color="#3895FE">
					<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  :info='info' :community='community' v-if='isShow'></router-view>
						</transition>
				</el-main>
				<!-- <el-footer>Footer</el-footer> -->
			</el-container>
		</el-container>
	</el-container>
</template>

<script>
import Router from 'vue-router'
export default {
	name: 'home',
	watch:{
		$route(to,from){
			let mod = to.path.split("/")[1];
			this.$router.options.routes.forEach((element,i) => {
				if(element.path.indexOf(mod)==-1){
					element.show = 0
				}else{
					element.show = 1
				}
			});
		}
	},
	data() {
		return {
			inDate:"",
			checkedCompany:'',
			menuList:[],
			path:'',
			info:{},
			community_list:[],
			community:{},
			menu:[],
			now:(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString(),
			isShow:true
		};
	},
	methods: {
		getDate(){
			this.now=(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString()
		},
		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
				}
			})
		},
		active(i){
			let that = this;
			that.inDate.forEach( (item,index,arr) => {
				if(i != index) return item.act = false;
				item.act = true;
			})
		},
		initNav(){
			let data = [
				{ act: true, to: '/index/index', name: '首页' },
				{ act: false, to: '/journal/journal', name: '刊群导览' },
				{ act: false, to: '/learning/activity', name: '学术交流' },
				{ act: false, to: '/article/article', name: '精品导读' },
				{ act: false, to: '/conference/conference', name: '会议系统' },
				{ act: false, to: '/message/message', name: '信息管理' },
				{ act: false, to: '/system/account', name: '系统管理' },
			];
			let mod = this.$route.path.split("/")[1];
			this.$router.options.routes.forEach((element,i) => {
				if(element.path.indexOf(mod)==-1){
					element.show = 0
				}else{
					element.show = 1
				}
			});
			data.forEach(item =>{
				if(mod == item.to.split("/")[1]) return item.act = true;
				item.act = false;
			})
			this.inDate = data;
		},
	},
	
	created(){
		this.initNav()
		this.getData()
	}
};
</script>