pco/sp-admin/sa-frame/nav/nav-tool-bar.vue

<!-- 右边第一行，工具栏 -->
<template>
	<div class="tools-panel">
		<div class="tools-left">
			<span title="折叠菜单" class="tool-fox" v-if="$root.isOpen == true" @click="$root.endOpen()">
				<i class="el-icon-s-fold"></i>
			</span>
			<span title="展开菜单" class="tool-fox" v-if="$root.isOpen == false" @click="$root.startOpen()">
				<i class="el-icon-s-unfold"></i>
			</span>
			<span title="搜索-input" class="tool-fox search-fox" :class=" isSearch ? 'search-fox-show' : '' ">
				<el-select v-model="searchText" size="mini" filterable placeholder="请输入菜单关键字" ref="search"
					@change="findMenuBySearch" @blur="closeSearch" @keyup.esc.native="closeSearch">
					<el-option v-for="item in searchList" :key="item.id" :label="item.text" :value="item.id">
					</el-option>
				</el-select>
			</span>
			<span title="搜索菜单" class="tool-fox" @click="closeSearch()" v-if="!isShowSearchInput">
				<i class="el-icon-search" style="font-weight: bold;"></i>
			</span>
			<span title="搜索菜单" class="tool-fox" @click="startSearch()" v-else>
				<i class="el-icon-search" style="font-weight: bold;"></i>
			</span>
			<span title="刷新" class="tool-fox" @click="$root.f5Tab($root.nativeTab)">
				<i class="el-icon-refresh-right" style="font-weight: bold;"></i>
			</span>
			<span title="当前时间" class="tool-fox">
				<span style="font-size: 0.90em;">{{nowTime}}</span>
			</span>
		</div>
		<div class="tools-right">
			<span title="点击登录" class="tool-fox" onclick="location.href='login.html'" v-if="$root.user == null">
				<span style="font-size: 0.8em; font-weight: bold; position: relative; top: -2px;">未登录</span>
			</span>
			<span title="我的信息" class="tool-fox user-info" style="padding: 0;" v-if="$root.user != null">
				<el-dropdown @command="handleCommand" trigger="click" size="medium">
					<span class="el-dropdown-link user-name"
						style="height: 100%; padding: 0 1em; display: inline-block;">
						<img :src="$root.user.avatar" class="user-avatar">
						<span>{{$root.user.username}}</span>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="drop in $root.dropList" :command="drop.name" :key="drop.name">
							{{drop.name}}
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</span>
			<span title="主题" class="tool-fox" style="padding: 0;">
				<el-dropdown @command="toggleTheme" trigger="click" size="medium">
					<span class="el-dropdown-link" style="height: 100%; padding: 0 1em; display: inline-block;">
						<i class="el-icon-price-tag" style="font-weight: bold;"></i>
						<span style="font-size: 0.9em;">主题</span>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="t.value" v-for="t in themeList" :key="t.name">
							<span :style=" $root.themeV == t.value ? 'color: #44f' : '' ">{{t.name}} </span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</span>
			<span title="便签" class="tool-fox" @click="openNote()">
				<i class="el-icon-edit" style="font-weight: bold; font-size: 0.9em;"></i>
				<span style="font-size: 0.9em;">便签</span>
			</span>
			<span title="全屏" class="tool-fox" v-if="isFullScreen == false" @click="fullScreen()">
				<i class="el-icon-rank" style="font-weight: bold; transform: rotate(45deg)"></i>
			</span>
			<span title="退出全屏" class="tool-fox" v-if="isFullScreen == true" @click="outFullScreen()">
				<i class="el-icon-bottom-left" style="font-weight: bold; "></i>
			</span>
		</div>
		<!-- tab被拖拽时的遮罩（tab上拖拽：新窗口打开） -->
		<div class="shade-fox" v-if="$root.isDrag" @dragover="$event.preventDefault();"
			@drop="$event.preventDefault(); $event.stopPropagation(); $root.newWinTab($root.dragTab);">
			<span style="font-size: 16px;">新窗口打开</span>
		</div>
	</div>
</template>

<script>
	module.exports = {
		data() {
			return {
				msgTimmer: null,
				isSearch: false, // 当前是否处于搜索模式 
				isShowSearchInput: true, // 是否显示打开搜索图标 
				searchText: '', // 搜索框已经输入的字符 
				searchList: [], // 搜索框 待选列表 

				isFullScreen: false, // 是否处于全屏状态 

				nowTime: '加载中...', // 当前时间 
				currInterval: null, // 刷新当前时间的定时器 

				themeList: [ // 主题数组
					{
						name: '蓝色',
						value: '1'
					},
					{
						name: '绿色',
						value: '2'
					},
					{
						name: '白色',
						value: '3'
					},
					{
						name: '灰色',
						value: '4'
					},
					{
						name: '红色',
						value: '5'
					},
					{
						name: '紫色',
						value: '9'
					},
					{
						name: 'pro钛合金',
						value: '6'
					},
					{
						name: '沉淀黑蓝',
						value: '7'
					},
					{
						name: '简约灰色',
						value: '8'
					},
					{
						name: '简约草绿',
						value: '10'
					},
				],

			}
		},
		methods: {
			// ------------------------------ 搜索相关 ------------------------------
			// 开启搜索
			startSearch: function() {
				this.searchText = '';
				this.isSearch = true;
				this.f5SearchList();
				setTimeout(function() {
					this.isShowSearchInput = false;
					this.$refs['search'].focus(); //.$refs['nav-tool-bar'].
				}.bind(this), 200);
			},
			// 关闭搜索
			closeSearch: function() {
				this.searchText = '';
				this.isSearch = false;
				setTimeout(function() {
					try {
						this.isShowSearchInput = true;
						document.querySelector('body>.el-select-dropdown.el-popper').style.display =
							'none';
					} catch (e) {
						throw e
					}
				}.bind(this), 200);
			},
			// 查找菜单 
			findMenuBySearch: function(id) {
				this.$root.showMenuById(id);
				this.closeSearch();
			},
			// 刷新待选列表 
			f5SearchList: function() {
				var searchList = [];

				let index = 1;

				function push(id, str) {
					searchList.push({
						id: id,
						text: (index++) + ". " + str
					});
				}

				// 遍历菜单 
				let childList = this.$root.menuList;
				let showList = this.$root.showList;
				for (let menu1 of childList) {
					if (menu1.isShow === false || showList.indexOf(menu1.id + '') == -1) continue;
					if (menu1.childList) {
						for (let menu2 of menu1.childList) {
							if (menu2.isShow === false || showList.indexOf(menu2.id + '') == -1) continue;
							if (menu2.childList) {
								for (let menu3 of menu2.childList) {
									if (menu3.isShow === false || showList.indexOf(menu3.id + '') == -1) continue;
									if (menu3.childList) {
										for (let menu4 of menu3.childList) {
											if (menu4.isShow === false || showList.indexOf(menu4.id + '') == -1)
												continue;
											push(menu4.id, menu1.name + ' > ' + menu2.name + ' > ' + menu3.name +
												' > ' + menu4.name);
										}
									} else {
										push(menu3.id, menu1.name + ' > ' + menu2.name + ' > ' + menu3.name);
									}
								}
							} else {
								push(menu2.id, menu1.name + ' > ' + menu2.name);
							}
						}
					} else {
						push(menu1.id, menu1.name);
					}
				}

				this.searchList = searchList;
			},

			// ------------------------------ 主题 ------------------------------
			// 切换主题
			toggleTheme: function(command) {
				// 开始切换
				this.$root.themeV = command + "";
				localStorage.setItem('themeV', command);
				for (var i = 0; i < this.themeList.length; i++) {
					if (this.themeList[i].value + '' == command + '') {
						this.$message('切换成功，' + this.themeList[i].name);
					}
				}
			},

			// ------------------------------ 全屏 ------------------------------
			// 进入全屏 
			fullScreen: function() {
				this.isFullScreen = true;
				if (document.documentElement.RequestFullScreen) {
					document.documentElement.RequestFullScreen();
				}
				//兼容火狐
				if (document.documentElement.mozRequestFullScreen) {
					document.documentElement.mozRequestFullScreen();
				}
				//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
				if (document.documentElement.webkitRequestFullScreen) {
					document.documentElement.webkitRequestFullScreen();
				}
				//兼容IE,只能写msRequestFullscreen
				if (document.documentElement.msRequestFullscreen) {
					document.documentElement.msRequestFullscreen();
				}
			},
			// 退出全屏
			outFullScreen: function() {
				this.isFullScreen = false;
				if (document.exitFullScreen) {
					document.exitFullscreen()
				}
				//兼容火狐
				if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen()
				}
				//兼容谷歌等
				if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen()
				}
				//兼容IE
				if (document.msExitFullscreen) {
					document.msExitFullscreen()
				}
			},

			// ------------------------------ 其它 ------------------------------
			// 处理userinfo的下拉点击
			handleCommand: function(command) {
				this.$root.dropList.forEach(function(drop) {
					if (drop.name == command) {
						drop.click();
					}
				})
			},
			// 打开便签
			openNote: function() {
				var w = (document.body.clientWidth * 0.4) + 'px';
				var h = (document.body.clientHeight * 0.6) + 'px';
				var default_content = '一个简单的小便签, 关闭浏览器后再次打开仍然可以加载到上一次的记录, 你可以用它来记录一些临时资料';
				var value = localStorage.getItem('sa_admin_note') || default_content;
				var index = layer.prompt({
					title: '一个小便签',
					value: value,
					formType: 2,
					area: [w, h],
					btn: ['保存'],
					maxlength: 99999999,
					skin: 'layer-note-class'
				}, function(pass, index) {
					layer.close(index)
				});
				var se = '#layui-layer' + index + ' .layui-layer-input';
				var d = document.querySelector(se);
				d.oninput = function() {
					localStorage.setItem('sa_admin_note', this.value);
				}
			},

			// 刷新时间
			initInterval: function() {
				if (this.currInterval) {
					clearInterval(this.currInterval);
				}
				// 一直更新时间
				this.currInterval = setInterval(function() {
					var da = new Date();
					var Y = da.getFullYear(); //年
					var M = da.getMonth() + 1; //月
					var D = da.getDate(); //日
					var h = da.getHours(); //小时
					var sx = "凌晨";
					if (h >= 6) {
						sx = "上午"
					}
					if (h >= 12) {
						sx = "下午";
						if (h >= 18) {
							sx = "晚上";
						}
						h -= 12;
					}
					var m = da.getMinutes(); //分
					var s = da.getSeconds(); //秒
					var z = ['日', '一', '二', '三', '四', '五', '六'][da.getDay()]; //周几
					// z = z == 0 ? '日' : z;
					var zong = "";

					zong += Y + "-" + M + "-" + D + " " + sx + " " + h + ":" + m + ":" + s + " 周" + z;
					this.nowTime = zong;
				}.bind(this), 1000);
			},
			getBusinessMsg() {
				sa.ajaxNoLoading('/TbBusiness/getMsg', function(resp) {
					let msgList = resp.data;
					for (let i in msgList) {
						setTimeout(()=>{
							this.popMsg(msgList[i])
						},1000)
					}
				}.bind(this))
			},
			popMsg(content){
				this.$notify({
					title: '消息提醒',
					message: content,
					duration: 0
				});
			}
		
		},

		created() {
			this.getBusinessMsg();
			this.initInterval();
			this.msgTimmer = setInterval(() => {
				this.getBusinessMsg();
			}, 20000)
		},
		beforeDestroy() {
			if (this.msgTimmer != null) {
				clearInterval(this.msgTimmer);
			}
		}
	}
</script>

<style scoped>
	.tools-left {
		border: 0px #000 solid;
		float: left;
	}

	.tools-right {
		float: right;
	}

	.tool-fox {
		padding: 0 1em;
		display: inline-block;
		cursor: pointer;
	}

	.tool-fox,
	.tool-fox i {
		transition: all 0.2s;
	}

	.user-info {
		position: relative;
		top: -2px;
	}

	.user-avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		vertical-align: middle;
	}

	.user-info .user-name {
		font-size: 0.9em;
	}

	/* 搜素框 */
	.search-fox {
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		max-width: 0px;
		padding: 0em 0em;
		margin-left: -5px;
		transition: all 0.2s;
	}

	.search-fox-show {
		display: inline-block;
		max-width: 500px;
		margin-left: 0px;
		padding: 0 1em;
	}

	.search-fox:hover {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.search-fox .el-input__inner {
		border-radius: 0px;
		border-width: 0px;
		border-bottom-width: 1px;
		background-color: rgba(0, 0, 0, 0);
	}

	.search-fox .el-input__icon {
		display: none;
	}

	/*800之下*/
	@media(max-width: 800px) {
		.tools-right {
			display: none;
		}
	}
</style>