|
@@ -9,9 +9,10 @@
|
|
|
<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"
|
|
|
+ <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-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">
|
|
@@ -33,13 +34,16 @@
|
|
|
</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;">
|
|
|
+ <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-item v-for="drop in $root.dropList" :command="drop.name" :key="drop.name">
|
|
|
+ {{drop.name}}
|
|
|
+ </el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</span>
|
|
@@ -55,7 +59,7 @@
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
- </span>
|
|
|
+ </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>
|
|
@@ -68,8 +72,7 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
<!-- tab被拖拽时的遮罩(tab上拖拽:新窗口打开) -->
|
|
|
- <div class="shade-fox" v-if="$root.isDrag"
|
|
|
- @dragover="$event.preventDefault();"
|
|
|
+ <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>
|
|
@@ -80,29 +83,60 @@
|
|
|
module.exports = {
|
|
|
data() {
|
|
|
return {
|
|
|
- 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'},
|
|
|
+ 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: {
|
|
@@ -114,7 +148,7 @@
|
|
|
this.f5SearchList();
|
|
|
setTimeout(function() {
|
|
|
this.isShowSearchInput = false;
|
|
|
- this.$refs['search'].focus(); //.$refs['nav-tool-bar'].
|
|
|
+ this.$refs['search'].focus(); //.$refs['nav-tool-bar'].
|
|
|
}.bind(this), 200);
|
|
|
},
|
|
|
// 关闭搜索
|
|
@@ -122,10 +156,13 @@
|
|
|
this.searchText = '';
|
|
|
this.isSearch = false;
|
|
|
setTimeout(function() {
|
|
|
- try{
|
|
|
+ try {
|
|
|
this.isShowSearchInput = true;
|
|
|
- document.querySelector('body>.el-select-dropdown.el-popper').style.display = 'none';
|
|
|
- }catch(e){throw e}
|
|
|
+ document.querySelector('body>.el-select-dropdown.el-popper').style.display =
|
|
|
+ 'none';
|
|
|
+ } catch (e) {
|
|
|
+ throw e
|
|
|
+ }
|
|
|
}.bind(this), 200);
|
|
|
},
|
|
|
// 查找菜单
|
|
@@ -136,27 +173,33 @@
|
|
|
// 刷新待选列表
|
|
|
f5SearchList: function() {
|
|
|
var searchList = [];
|
|
|
-
|
|
|
+
|
|
|
let index = 1;
|
|
|
+
|
|
|
function push(id, str) {
|
|
|
- searchList.push({id: id, text: (index++) + ". " + 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) {
|
|
|
+ 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) {
|
|
|
+ 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) {
|
|
|
+ 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);
|
|
|
+ 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);
|
|
@@ -170,10 +213,10 @@
|
|
|
push(menu1.id, menu1.name);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
this.searchList = searchList;
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// ------------------------------ 主题 ------------------------------
|
|
|
// 切换主题
|
|
|
toggleTheme: function(command) {
|
|
@@ -181,57 +224,57 @@
|
|
|
this.$root.themeV = command + "";
|
|
|
localStorage.setItem('themeV', command);
|
|
|
for (var i = 0; i < this.themeList.length; i++) {
|
|
|
- if(this.themeList[i].value + '' == command + '') {
|
|
|
+ if (this.themeList[i].value + '' == command + '') {
|
|
|
this.$message('切换成功,' + this.themeList[i].name);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// ------------------------------ 全屏 ------------------------------
|
|
|
// 进入全屏
|
|
|
fullScreen: function() {
|
|
|
this.isFullScreen = true;
|
|
|
- if(document.documentElement.RequestFullScreen){
|
|
|
+ if (document.documentElement.RequestFullScreen) {
|
|
|
document.documentElement.RequestFullScreen();
|
|
|
}
|
|
|
//兼容火狐
|
|
|
- if(document.documentElement.mozRequestFullScreen){
|
|
|
+ if (document.documentElement.mozRequestFullScreen) {
|
|
|
document.documentElement.mozRequestFullScreen();
|
|
|
}
|
|
|
//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
|
|
|
- if(document.documentElement.webkitRequestFullScreen){
|
|
|
+ if (document.documentElement.webkitRequestFullScreen) {
|
|
|
document.documentElement.webkitRequestFullScreen();
|
|
|
}
|
|
|
//兼容IE,只能写msRequestFullscreen
|
|
|
- if(document.documentElement.msRequestFullscreen){
|
|
|
+ if (document.documentElement.msRequestFullscreen) {
|
|
|
document.documentElement.msRequestFullscreen();
|
|
|
}
|
|
|
},
|
|
|
// 退出全屏
|
|
|
outFullScreen: function() {
|
|
|
this.isFullScreen = false;
|
|
|
- if(document.exitFullScreen){
|
|
|
+ if (document.exitFullScreen) {
|
|
|
document.exitFullscreen()
|
|
|
}
|
|
|
//兼容火狐
|
|
|
- if(document.mozCancelFullScreen){
|
|
|
+ if (document.mozCancelFullScreen) {
|
|
|
document.mozCancelFullScreen()
|
|
|
}
|
|
|
//兼容谷歌等
|
|
|
- if(document.webkitExitFullscreen){
|
|
|
+ if (document.webkitExitFullscreen) {
|
|
|
document.webkitExitFullscreen()
|
|
|
}
|
|
|
//兼容IE
|
|
|
- if(document.msExitFullscreen){
|
|
|
+ if (document.msExitFullscreen) {
|
|
|
document.msExitFullscreen()
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// ------------------------------ 其它 ------------------------------
|
|
|
// 处理userinfo的下拉点击
|
|
|
handleCommand: function(command) {
|
|
|
this.$root.dropList.forEach(function(drop) {
|
|
|
- if(drop.name == command) {
|
|
|
+ if (drop.name == command) {
|
|
|
drop.click();
|
|
|
}
|
|
|
})
|
|
@@ -243,15 +286,15 @@
|
|
|
var default_content = '一个简单的小便签, 关闭浏览器后再次打开仍然可以加载到上一次的记录, 你可以用它来记录一些临时资料';
|
|
|
var value = localStorage.getItem('sa_admin_note') || default_content;
|
|
|
var index = layer.prompt({
|
|
|
- title: '一个小便签',
|
|
|
+ title: '一个小便签',
|
|
|
value: value,
|
|
|
formType: 2,
|
|
|
area: [w, h],
|
|
|
btn: ['保存'],
|
|
|
maxlength: 99999999,
|
|
|
- skin: 'layer-note-class'
|
|
|
- }, function(pass, index){
|
|
|
- layer.close(index)
|
|
|
+ skin: 'layer-note-class'
|
|
|
+ }, function(pass, index) {
|
|
|
+ layer.close(index)
|
|
|
});
|
|
|
var se = '#layui-layer' + index + ' .layui-layer-input';
|
|
|
var d = document.querySelector(se);
|
|
@@ -259,10 +302,10 @@
|
|
|
localStorage.setItem('sa_admin_note', this.value);
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 刷新时间
|
|
|
initInterval: function() {
|
|
|
- if(this.currInterval) {
|
|
|
+ if (this.currInterval) {
|
|
|
clearInterval(this.currInterval);
|
|
|
}
|
|
|
// 一直更新时间
|
|
@@ -285,42 +328,122 @@
|
|
|
}
|
|
|
var m = da.getMinutes(); //分
|
|
|
var s = da.getSeconds(); //秒
|
|
|
- var z = ['日', '一', '二', '三', '四', '五', '六'][da.getDay()] ; //周几
|
|
|
+ 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.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;}
|
|
|
-
|
|
|
+ .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;}
|
|
|
-
|
|
|
+ .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;}
|
|
|
+ .tools-right {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|