dd_pc/src/index.vue

<template>
	<el-container class="box-all" v-loading="loading">
		<el-header>
			<div class="flex-box" style="height: 60px;min-width: 1200px;">
				<div class="logo-box flex-box flex-center-center" @click="openHome()">
					<img src="./assets/image/logo.png" class="logo" />
					<div>功道云积分制</div>
				</div>
				
				<div class="flex-1 hea-right flex-box flex-v-ce" >
					<div class="name" style="min-width: 200px;">{{ info.name }}</div>
					<div class="flex-1 flex-box-ce font-flex-word" style="cursor: pointer;padding: 0 20px;">
						<template v-if="$supremeAuthority()=='dept_manager'||$supremeAuthority()=='employee'">
							<template v-if="information.name">
								<img src="./assets/image/tz.png" style="width: 18px;height: 18px;"/>
								<span style="max-width: 500px;padding-left: 10px;" class="font-flex-word"  @click="$router.push({path:'inform'})">{{information.name}}</span>
							</template>
						</template>
						<div v-else  class="flex-box-ce" >
							<img src="./assets/image/tz.png" style="width: 18px;height: 18px;"/>
							<template v-if="information.name">
								<span style="max-width: 500px;padding-left: 10px;" class="font-flex-word"  @click="$router.push({path:'inform'})">{{information.name}}</span>
							</template>
							<span v-else style="padding: 0 10px;cursor: pointer;color: #606266;"  @click="$router.push({path:'inform'})">暂无公告,点击此处添加公告</span>
						</div>
					</div>
					<div class="flex-box flex-v-ce">
						<div>
							您当前为
							<span class="blue">"{{ corpMessage.package_name }}"</span>
							,有效期至
							<span style="color:#FF9600">{{ corpMessage.expire_time }}</span>
						</div>
						<el-button size="small" @click="isTz = true" class="upgrade" type="primary" icon="el-icon-upload">续费升级</el-button>
						<el-tooltip class="item" effect="dark" content="设置向导" placement="bottom" v-if="!this.$authoritys('employee') && !this.$authoritys('dept_manager')">
							<img src="./assets/image/wn.png" class="wn" @click="showWn" />
						</el-tooltip>
						<userImage :user_name="userData.name" :img_url="userData.img_url" width="44px" height="44px"></userImage>
					</div>
				</div>
			</div>
		</el-header>
		<el-container class="main">
			<el-aside>
				<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" :router="true" @select="activeRouter" :unique-opened="true">
					<template v-for="(item, index) in routers">
						<div v-if="item.children.length != 0" :key="index">
							<el-submenu :index="index.toString()" :key="index" v-if="item.children.length >= 1 && item.name != '首页'">
								<template slot="title">
									<span class="iconfont titleIcon" :class="item.icon" style="font-size: 20px;"></span>
									<span style="margin-left: 5px;">{{ item.name }}</span>
								</template>
								<template v-for="(item2, index2) in item.children">
									<el-menu-item :index="returnIndex(index, index2)" :ref="item2.path" :route="item2.path" :key="index2" class="font-flex-word">
										<span slot="title" style="margin-left: 10px;width:120px">{{ item2.name }}</span>
									</el-menu-item>
								</template>
							</el-submenu>
							<el-menu-item :index="returnIndex(index, index)" :route="item.children[0].path" :ref="item.children[0].path" v-else>
								<span class="iconfont titleIcon" :class="item.icon" style="font-size: 20px;"></span>
								<span slot="title" style="margin-left: 5px;">{{ item.children[0].name }}</span>
							</el-menu-item>
						</div>
					</template>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view />
				<div class="fontColorF" style="text-align: center;margin: 10px 0;">Copyright © 2021 广东功道云数字科技有限公司 All Rights Reserved</div>
			</el-main>
		</el-container>
		<!-- 续费升级 -->
		<el-dialog class="续费升级" :visible.sync="isTz" width="400px">
			<div style="border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px; width: 276px;box-sizing: border-box;margin: 0 auto;">
				<img src="./assets/image/code.png" />
			</div>
			<div class="fontColorF" style="text-align: center;margin-top: 15px;font-size: 18px;">手机钉钉扫码，付费升级</div>
		</el-dialog>
		<el-dialog title="设置向导" :visible.sync="wn_show" width="600px">
			<div>
				<div class="wn-title fontColorF">三步轻松搭建积分管理体系：定人员、分责权、建制度</div>
				<div class="flex-box flex-v-ce wn-box">
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(0)">
						<div><span class="iconfont " :class="routers_one[0].meta.icon"></span></div>
						<div>1、确定{{ routers_one[0].name }}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(1)">
						<div><span class="iconfont " :class="routers_one[1].meta.icon"></span></div>
						<div>2、分配{{ routers_one[1].name }}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(2)">
						<div><span class="iconfont " :class="routers_one[2].meta.icon"></span></div>
						<div>3、建立{{ routers_one[2].name }}</div>
					</div>
				</div>
			</div>
			<div>
				<div class="wn-title fontColorF">更有效地做好积分激励和认可，你还可以设置以下3项</div>
				<div class="flex-box flex-v-ce wn-box">
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(3)">
						<div><span class="iconfont " :class="routers_one[3].meta.icon"></span></div>
						<div>{{ routers_one[3].name }}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(4)">
						<div><span class="iconfont " :class="routers_one[4].meta.icon"></span></div>
						<div>{{ routers_one[4].name }}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(5)">
						<div><span class="iconfont " :class="routers_one[5].meta.icon"></span></div>
						<div>{{ routers_one[5].name }}</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</el-container>
</template>

<script>
import { createSocket,sendWSPush,sendPing } from './api/websocket'
import { removeCache } from './api/auth'
export default {
	data() {
		return {
			loading: false,
			userData: {},
			routers: [],
			routers_one: [],
			info: {},
			wn_show: false,
			defaultActive: '0-0',
			isShowWn: true,
			isTz: false,
			direction: 'rtl',
			corpMessage: {} ,//企业套餐信息
			information:{name:''},
		};
	},
	watch: {
		$route(to, from) {
			var str = to.path;
			this.routers.map((item, index) => {
				if (item.children.length > 0) {
					item.children.map((item2, index2) => {
						if (item2.path == str) {
							this.defaultActive = index + '-' + index2;
							localStorage.setItem('path', index + '-' + index2);
						}
					});
				}
			});
			if(localStorage.getItem('inform')){
				this.getInform()
				removeCache('inform')
			}
		}
	},
	created() {
		this.initRouter();
		this.getEmployee()//缓存人员列表
		this.getInform();
	},
	mounted() {
		this.getTypes();
		this.getInfo();
		var url = window.location.href;
		var str = this.GetRequest(url).corpId || '123';
		// var rUrl = this.GetRequest(url).url || '';
		var corpId = str.split('#')[0];
		if (corpId) {
			this.getCorp(corpId);
		}
		this.$nextTick(function() {
			if (!this.$authoritys('employee') && !this.$authoritys('dept_manager')) {
				if (localStorage.getItem('wn_show')) {
					this.wn_show = false;
					this.isShowWn = false;
				} else {
					this.wn_show = true;
					localStorage.setItem('wn_show', 'true');
				}
			}
		});
	},
	methods: {
		openWebSocket(){
			// 接收消息
			const getsocketData = e => {  // 创建接收消息函数
			  const data = e && e.detail.data
			  console.log(data)
			}
			// 注册监听事件
			window.addEventListener('onmessageWS', getsocketData)
			
			// 在需要的时候卸载监听事件，比如离开页面
			window.removeEventListener('onmessageWS', getsocketData)
		},
		getInform(){
			let params = {
				page: 1,
				page_size: 1
			};
			this.$axios('get', '/api/information/index', params).then(res => {
				if (res.data.code == 1) {
					let data= res.data.data;
					if(data[0]){
						this.information=data[0]
					}else{
						this.information={name:''};
					}
					
				}
			});
		},
		initRouter() {
			this.routers = [
				{ name: '首页', children: this.returnRoutersArr('home'), icon: 'icon-shouye' },
				{ name: 'A/B分', children: this.returnRoutersArr('abPoint'), icon: 'icon-PC_gongzuotai_ABfen' },
				{ name: '任务', children: this.returnRoutersArr('task'), icon: 'icon-kaoqin_kaoqinyuebaobiao' },
				{ name: '统计', children: this.returnRoutersArr('ranking'), icon: 'icon-dingdingPC_tongji1' },
				// { name: '福利', children: this.returnRoutersArr('welfare'), icon: 'icon-fulizhongxin'}
			];
			//this.$authoritys('权限名') 判断权限
			if (this.$authoritys('creator') || this.$authoritys('admin') || this.$authoritys('point_manager') || this.$authoritys('dept_manager')) {
				this.routers.splice(3, 0, { name: '审批', children: this.returnRoutersArr('workbench'), icon: 'icon-shezhi_jifenguize' });
			}
			if (this.$authoritys('creator') || this.$authoritys('admin') || this.$authoritys('point_manager')) {
				this.routers.push({ name: '设置', children: this.returnRoutersArr('set'), icon: 'icon-dingdingPC_shezhi1' });
			}
			//this.returnRoutersArr('set',true) 加true表示不限制路由
			this.routers_one = this.returnRoutersArr('set', true);
			this.userData = this.$getUserData();
			if (this.$route.path != '/home') {
				//当刷新页面是控制左边导航栏的选中
				this.defaultActive = localStorage.getItem('path');
			}
		},
		openHome() {
			this.$router.push({ path: '/home' });
		},
		GetRequest(urlStr) {
			if (typeof urlStr == 'undefined') {
				var url = decodeURI(location.search); //获取url中"?"符后的字符串
			} else {
				var url = '?' + urlStr.split('?')[1];
			}
			var theRequest = new Object();
			var strs;
			if (url.indexOf('?') != -1) {
				var str = url.substr(1);
				strs = str.split('&');
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return theRequest;
		},
		//获取套餐信息
		getCorp(corpId) {
			this.$axios('get', 'api/order/corp', { corp_id: corpId }).then(res => {
				this.corpMessage = res.data.data;
			});
		},
		//当刷新页面是控制左边导航栏的选中
		activeRouter(index, indexPath) {
			localStorage.setItem('path', indexPath[1] ? indexPath[1] : indexPath[0]);
		},
		routerAstrict(data) {
			//限制路由
			let obj = [];
			let supAuthority = this.$supremeAuthority(); //$supremeAuthority获取当前登录者的最高权限
			data.forEach(item => {
				if (!item.hidden) {
					if (!item.meta.jurisdiction) {
						obj.push(item);
					} else {
						if (item.meta.jurisdiction.indexOf(supAuthority) == -1) {
							obj.push(item);
						}
					}
				}
			});
			return obj;
		},
		returnRoutersArr(str, bool) {
			var routers = this.$router.options.routes[0].children;
			var routersArr = [];
			routers.forEach(item => {
				if (item.meta.groupCode == str) {
					//获取对应模块的路由
					routersArr.push(item);
				}
			});
			if (bool) {
				return routersArr;
			}
			return this.routerAstrict(routersArr);
		},
		returnIndex(str, str2) {
			return str + '-' + str2;
		},
		openView(e) {
			this.wn_show = false;
			this.isShowWn = false;
			this.$router.push({ path: this.routers_one[e].path });
		},
		showWn() {
			this.wn_show = true;
		},
		getInfo() {
			var that = this;
			this.$axios('get', '/api/site/info').then(res => {
				that.info = res.data.data;
			});
		},
		getTypes() {
			var that = this;
			this.$axios('get', '/api/integral/types').then(res => {
				that.$setTyps(res.data.data.list);
			});
		},
		//获取员工列表
		getEmployee() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, page: 1, page_size: 3000,is_official:1 }).then(res => {
				let map={};
				res.data.data.list.map(item=>{
					 map[item.id]=item
				})
				localStorage.setItem("userList",JSON.stringify(map))
			})
		},
	},
};
</script>

<style scoped="scoped" lang="scss">	
.wn-box {
	padding: 20px 0;
}
.wn-box .flex-1 {
	cursor: pointer;
}
.wn-box .flex-1 div:nth-child(1) {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	text-align: center;
	line-height: 55px;
	background-color: #e0f2ff;
	color: #26a2ff;
	margin-bottom: 20px;
}
.wn-box .flex-1 div:nth-child(2) {
	width: 110px;
	border-radius: 25px;
	border: 1px solid #26a2ff;
	padding: 7px 10px;
	text-align: center;
	color: #26a2ff;
}
.wn-box .flex-1:hover div:nth-child(1) {
	color: #fff;
	background-color: #26a2ff;
}

.wn-box .flex-1:hover div:nth-child(2) {
	color: #fff;
	background-color: #26a2ff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 180px;
	// min-height: 400px;
}
.el-header {
	background-color: #fff;
	// line-height: 60px;
	padding: 0 !important;
	border-bottom: 1px solid #f1f1f1;
}
.el-menu {
	overflow: hidden;
	border: none;
}
.el-aside {
	transition: width 0.28s;
	width: 180px !important;
	background-color: #fff;
	height: calc(100vh - 60px);
}
.el-aside::-webkit-scrollbar {
	width: 0px;
	background-color: #fff;
}

.el-aside::-webkit-scrollbar-thumb {
	background-color: #ccc;
}
.con_nav_left {
	background: #fff;
	overflow-y: scroll;
}
.box-all {
	height: 100%;
	overflow: hidden;
}
.el-main {
	background-color: #f4f6f9;
	height: calc(100vh - 60px);
	overflow-y: scroll;
	padding: 10px;
	min-width: 1000px;
}
.el-main::-webkit-scrollbar {
	width: 3px;
	height: 10px;
	background-color: #fff;
}
.el-main::-webkit-scrollbar-thumb {
	background-color: #d9d9d9;
}
.logo-box {
	width: 180px;
	cursor: pointer;
}
.logo-box .logo {
	width: 30px;
	height: 30px;
	margin-right: 5px;
	border-radius: 6px;
}
.logo-box div {
	font-size: 16px;
	font-weight: 600;
}
.wn {
	height: 26px;
	width: 26px;
	margin-right: 12px;
	cursor: pointer;
}
.hea-right {
	padding: 0 20px;
}
.upgrade {
	margin-left: 10px;
	margin-right: 10px;
}
::v-deep .el-menu-item {
	padding-right: 10px !important;
}
::v-deep .el-menu-item.is-active {
	color: #26a2ff;
	background-color: #ecf5ff;
}
</style>