zky-admin/src/views/Home.vue

<style lang="scss">
@import '../style/home.scss';
.siteTitle{
	width:300px;
	margin:0 auto;
}
.el-badge__content.is-fixed{
	top:10px;
}
.el-badge:hover{
	cursor: pointer;
}
.el-dropdown{
	font-size: 18px;
}
.notification-header-01 {
    width: 15px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(31,93,234,1);
    cursor: pointer;
	i{
		color:white;
	}
}
.notificationTitle{
	position: absolute;
	top:16px;
	left:25px;
}
.item:first-child{
	border-top: 1px solid rgba(232,233,235,1);
}
.item{
	padding:15px;
	border-bottom: 1px solid rgba(232,233,235,1);
	h4{
		padding:5px 0px;
	}
	.desc{
		word-break: break-all;
		font-size: 12px;
		font-weight: 400;
		color: rgba(107,121,142,1);
		line-height: 20px;
		overflow: hidden;  
      	display: -webkit-box;  
     	-webkit-line-clamp: 2;
     	-webkit-box-orient: vertical; 
	}
}
.item:hover{
	cursor: pointer;
}

</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 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">
					<div style="display:inline-block;" @click="drawer=true">
						<el-badge :value="notices.length">
							<i class="el-icon-message-solid" style="font-size:22px;"></i>
						</el-badge>
					</div>
					<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-drawer
			title="消息中心"
			:withHeader="false"
			:visible.sync="drawer"
			direction="rtl"
			size="15%"
			:wrapperClosable="true"
			>
				<div style="position:relative;padding:10px 0px;">
					<div class="notification-header notification-header-01" id="closeNotification" @click="drawer=false">
            			<i class="el-icon-arrow-right"></i>
        			</div>
					<h3 class="notificationTitle">消息中心</h3>
				</div>
				<div class="nitification-container">
					<div class="item" v-for="(item,index) in info.notices" :key="index" @click='$router.push({path:"/message/message/detail",query:{id:item.id}})'>
						<h4>{{item.name}}</h4>
						<p v-html="item.content" class="desc">{{item.content}}</p>
						<p style="font-size:12px;color: rgba(107,121,142,1);text-align:right;">{{item.ctime}}</p>
					</div>
				</div>
			</el-drawer>
	</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:{notices:[]},
			community_list:[],
			community:{},
			menu:[],
			now:(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString(),
			isShow:true,
			drawer:false,
			notices:[]
		};
	},
	methods: {
		handleClose(){

		},
		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||[];
			if(permissions.indexOf(name)<0){
				return false;
			}else{
				return true;
			}	
		},
		getData(){
			let _this = this
			this.$api.getAccountInfo().then(res=>{
				if(!res.code){
					localStorage.setItem('role',res.data.data.role_id)
					_this.info = res.data.data;
					_this.resetSetItem('watchStorage', JSON.stringify(res.data.data.notices));
					_this.initNav()
				}
			})
		},
		active(i){
			this.initNav()
			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{
					if(this.permission(element.name)){
						element.show = 1
					}else{
						element.show = 0
					}
				}
				// if(this.permission(element.name)){
				// 	element.show = 1
				// }else{
				// 	element.show = 0
				// }	
			});
			let navs = []
			data.forEach(item =>{
				// if(mod == item.to.split("/")[1]) return item.act = true;
				// item.act = false;
				if(this.permission(item.name)){
					navs.push(item)
				}
			})
			this.inDate = navs;
		},
	},
	
	created(){
		this.getData()
	},
	mounted(){
		window.addEventListener('setItem', ()=> {
        this.notices = JSON.parse(localStorage.getItem('watchStorage'))
		})
	}
};
</script>