layui.define(['element'], function (exports) {
var element = layui.element;
var $gouguApp = $("#GouguApp");
var $gouguAppBody = $("#GouguAppBody");
var $gouguMenuList = $("#menuList");
var tab = {
// tab动画加载效果
loading: function() {
let load = '
';
let $iframe = $gouguAppBody.find('.gg-tab-page.layui-show iframe');
if (!$iframe.next().length) {
$iframe.parent().append(load);
let tabLoad = $iframe.parent().find('.tab-loading');
let tab_timestamp = $iframe.data('timestamp');
let timestamp = new Date().getTime();
//console.log(tab_timestamp);
if(timestamp-tab_timestamp<666){
$iframe.on('load', function() {
tabLoad.fadeOut(666, function() {
tabLoad.remove();
});
})
}
else{
tabLoad.fadeOut(666, function() {
tabLoad.remove();
});
}
}
},
//历史tab预加载
tabTem: function (id, url, title) {
element.tabAdd('gg-admin-tab', {
id: id,
url:url,
title: '' + title
});
$gouguAppBody.append('');
},
/*新增一个Tab页面
* @id,tab页面唯一标识,可是标签中data-id的属性值
* @url,tab页面地址
* @name,tab页面标题,
*/
tabAdd: function (id, url, title) {
let thetabs = $('#pageTabUl').find('li');
if (thetabs.length > 15) {
layer.tips('点击LOGO快速关闭已开的TAB页面', $('.layui-logo'));
}
if (thetabs.length > 20) {
layer.msg('你已打开了太多TAB页面了,请关闭部分TAB再使用');
return false;
}
element.tabAdd('gg-admin-tab', {
id: id,
url:url,
title: '' + title
});
// 获取当前时间戳(毫秒数)
let timestamp = new Date().getTime();
$gouguAppBody.append('');
this.tabChange(id);
},
//从子页面打开新的Tab页面,防止id重复,使用时间戳作为唯一标识
sonAdd: function (url, title,id) {
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//打开新的tab项
this.tabAdd(id, url, title);
} else {
//否则判断该tab项是否以及存在
var isHas = false;
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
if ($(this).attr("lay-id") == id) {
isHas = true;
$('[data-frameid="' + id + '"]').attr('src', url);
//最后不管是否新增tab,最后都转到要打开的选项页面上
tab.tabChange(id);
}
})
if (isHas == false) {
//标志为false 新增一个tab项
tab.tabAdd(id, url, title);
}
}
try {
layer.close(window.openTips);
} catch (e) {
console.log(e.message);
}
},
//根据传入的id传入到指定的tab项,并滚动定位
tabChange: function (id) {
element.tabChange('gg-admin-tab', id);
},
//删除tab页面
tabDelete: function (id) {
if (id == 0) {
return;
}
element.tabDelete('gg-admin-tab', id);
},
/*删除所有tab页面
*@ids 是一个数组,存放多个id,调用tabDelete方法分别删除
*/
tabDeleteAll: function (ids) {
var that = this;
$.each(ids, function (i, item) {
that.tabDelete(item);
})
},
//tab页面关闭自己,需要使用父iframe配合一起调用,如:parent.tab.sonClose();
sonClose: function (id) {
$('.layui-tab .layui-tab-title .layui-this i').click();
},
//滚动tab
tabRoll: function (event, index) {
var $tabTitle = $("#pageTabs .layui-tab-title"),
$tabs = $tabTitle.children("li"),
$outerWidth = ($tabTitle.prop("scrollWidth"), $tabTitle.outerWidth()),
$left = parseFloat($tabTitle.css("left"));
if ("left" === event) {
if (!$left && $left <= 0) return;
var roll = -$left - $outerWidth;
$tabs.each(function (item, i) {
var $item = $(i),
$itemleft = $item.position().left;
if ($itemleft >= roll) {
return $tabTitle.css("left", -$itemleft), false;
}
})
} else "auto" === event ? ! function () {
var $itemleft, $item = $tabs.eq(index);
if ($item[0]) {
if ($itemleft = $item.position().left, $itemleft < -$left) return $tabTitle.css("left", -$itemleft);
if ($itemleft + $item.outerWidth() >= $outerWidth - $left) {
var $diff = $itemleft + $item.outerWidth() - ($outerWidth - $left);
$tabs.each(function (e, i) {
var $tabitem = $(i),
$tabitemleft = $tabitem.position().left;
if ($tabitemleft + $left > 0 && $tabitemleft - $left > $diff) return $tabTitle.css("left", -$tabitemleft), false;
})
}
}
}() : $tabs.each(function (item, i) {
var $item = $(i),
$itemleft = $item.position().left;
if ($itemleft + $item.outerWidth() >= $outerWidth - $left) return $tabTitle.css("left", -$itemleft), false;
})
},
tabFollow:function(id){
$gouguMenuList.find('.side-menu-item').removeClass('layui-this');
$gouguMenuList.find('dd').removeClass('layui-this').removeClass('layui-nav-itemed');
$gouguMenuList.find('.menu-li').removeClass('layui-nav-itemed');
$gouguMenuList.find('.gg-second-menu').removeClass('current');
$('#GouguAppBody').removeClass('sub-menu');
$('.side-menu-item').each(function (index,item){
if($(item).data("id") == id) {
//console.log(item);
$(item).addClass('layui-this');
$(item).parents('dd').addClass('layui-nav-itemed');
$(item).parents('dl').addClass('current');
let $menuli = $(item).parents('.menu-li');
$menuli.addClass('layui-nav-itemed');
// 展开菜单模式
if ($('.layout-menu-expand').length) {
$menuli.siblings().find('a').removeClass('layui-this');
$menuli.children('a').addClass('layui-this');
// 子级菜单
$menuli.siblings().find('.gg-second-menu').removeClass('current');
if ($menuli.children('.gg-second-menu').length) {
$('#GouguAppBody').addClass('sub-menu');
let second_menu = $(this).parent().parent();
second_menu.removeClass('show-up');
//console.log(second_menu.html());
}
}
}
})
},
refresh:function(id){
if(parent.document.getElementById(id)){
var src = parent.document.getElementById(id).contentWindow.location.href ? parent.document.getElementById(id).contentWindow.location.href : iframe.src;
document.getElementById(id).src = src;
}
},
tabCookie:function(){
let thetabs = $('#pageTabUl').find('li');
let tab_id = 0,tab_array=[];
thetabs.each(function(index,item){
let _id = $(item).attr('lay-id'),_url = $(item).attr('lay-url'),_title = $(item).text();
if(_id>0){
tab_array.push({'id':_id,'url':_url,'title':_title});
}
if($(item).hasClass('layui-this')){
tab_id = _id;
}
})
if(tab_array.length>0){
let tabs_obj = {
'tab_id':tab_id,
'tab_array':tab_array
}
//console.log(tabs_obj);
tab.setCookie('gougutab',JSON.stringify(tabs_obj));
}
else{
tab.delCookie('gougutab');
}
},
setCookie: function (name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
},
getCookie: function (name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
return unescape(arr[ 2 ]);
}
return null;
},
delCookie: function (name) {
this.setCookie(name, "", -1);
}
};
//切换tab
element.on('tab(gg-admin-tab)', function (data) {
let thisPage = $gouguAppBody.find('.gg-tab-page').eq(data.index);
let id = thisPage.data('id');
let url = thisPage.data('url');
if(thisPage.find('iframe').length==0){
// 获取当前时间戳(毫秒数)
let timestamp = new Date().getTime();
thisPage.html('');
}
tab.tabFollow(id);
$gouguAppBody.find('.gg-tab-page').removeClass('layui-show');
thisPage.addClass('layui-show');
if(data.index==0){
tab.refresh(0);
}
tab.loading();
tab.tabRoll("auto", data.index);
tab.tabCookie();
});
//删除tab
element.on('tabDelete(gg-admin-tab)', function (data) {
$gouguAppBody.find('.gg-tab-page').eq(data.index).remove();
tab.tabRoll("auto", data.index);
tab.tabCookie();
});
//右滚动tab
$('[gg-event="tabRollRight"]').click(function () {
tab.tabRoll("right");
})
//左滚动tab
$('[gg-event="tabRollLeft"]').click(function () {
tab.tabRoll("left");
})
//关闭全部tab,只保留首页
$gouguApp.on('click', '[gg-event="closeAllTabs"]', function () {
var thetabs = $('#pageTabs .layui-tab-title').find('li'), ids = [];
for (var i = 0; i < thetabs.length; i++) {
var id = thetabs.eq(i).attr('lay-id');
ids.push(id);
}
tab.tabDeleteAll(ids);
return false;
})
//关闭其他tab
$gouguApp.on('click', '[gg-event="closeOtherTabs"]', function () {
var thetabs = $('#pageTabs .layui-tab-title').find('li'), ids = [];
var thisid = $('#pageTabs .layui-tab-title').find('.layui-this').attr('lay-id');
for (var i = 0; i < thetabs.length; i++) {
var id = thetabs.eq(i).attr('lay-id');
if (id != thisid) {
ids.push(id);
}
}
tab.tabDeleteAll(ids);
return false;
})
//关闭当前tab
$gouguApp.on('click', '[gg-event="closeThisTabs"]', function () {
var thisid = $('#pageTabs .layui-tab-title').find('.layui-this').attr('lay-id');
tab.tabDelete(thisid);
return false;
})
//当点击有side-menu-item属性的标签时,即左侧菜单栏中内容 ,触发tab
$('body').on('click', 'a.side-menu-item', function () {
var that = $(this);
var url = that.data("href"), id = that.data("id"), title = that.data("title");
if (url == '' || url == '/') {
return false;
}
//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
//$('.site-menu-active').removeClass('layui-this');
//that.addClass('layui-this');
//$gouguApp.removeClass('side-spread-sm');
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//打开新的tab项
tab.tabAdd(id, url, title);
} else {
//否则判断该tab项是否以及存在
var isHas = false;
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
if ($(this).attr("lay-id") == id) {
isHas = true;
$('[data-frameid="' + id + '"]').attr('src', url);
//最后不管是否新增tab,最后都转到要打开的选项页面上
tab.tabChange(id);
}
})
if (isHas == false) {
//标志为false 新增一个tab项
tab.tabAdd(id, url, title);
}
}
try {
layer.close(window.openTips);
} catch (e) {
console.log(e.message);
}
});
//左侧菜单展开&收缩
$gouguApp.on('click', '[gg-event="shrink"]', function () {
var that_i = $(this).children('i');
if (that_i.hasClass("layui-icon-shrink-right")) {
that_i.removeClass("layui-icon-shrink-right").addClass("layui-icon-spread-left");
}
else{
that_i.removeClass("layui-icon-spread-left").addClass("layui-icon-shrink-right");
}
$gouguApp.toggleClass('side-spread');
})
/*
$gouguApp.on('click', '[gg-event="shade"]', function () {
$gouguApp.removeClass('side-spread-sm');
})
*/
//左上角清除缓存
$gouguApp.on('click', '[gg-event="cache"]', function (e) {
let that = $(this);
let url = $(this).data('href');
if (that.attr('class') === 'clearThis') {
layer.tips('正在努力清理中...', this);
return false;
}
layer.tips('正在清理系统缓存...', this);
that.attr('class', 'clearThis');
$.ajax({
url: url,
success: function (res) {
if (res.code == 1) {
setTimeout(function () {
that.attr('class', '');
layer.tips(res.msg, that);
}, 1000)
} else {
layer.tips(res.msg, that);
}
}
})
})
//右上角刷新当前tab页面
$gouguApp.on('click', '[gg-event="refresh"]', function () {
var that = $(this);
if (that.hasClass("refreshThis")) {
that.removeClass("refreshThis");
var iframe = $(".gg-tab-page.layui-show").find("iframe")[0];
if (iframe) {
tab.refresh(iframe.id);
}
setTimeout(function () {
that.attr("class", "refreshThis");
}, 2000)
} else {
layer.tips("每2秒只可刷新一次", this, {
tips: 1
});
}
return false;
})
//右上角全屏&退出全屏
$gouguApp.on("click", ".fullScreen", function () {
if ($(this).hasClass("layui-icon-screen-restore")) {
screenFun(2).then(function () {
$(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
});
} else {
screenFun(1).then(function () {
$(".fullScreen").eq(0).addClass("layui-icon-screen-restore");
});
}
});
//小菜单展现多级菜单
$gouguApp.on("mouseenter", ".layui-nav-tree .menu-li", function () {
var tips = $(this).prop("innerHTML");
if ($gouguApp.hasClass('side-spread') && tips) {
tips = "";
window.openTips = layer.tips(tips, $(this), {
tips: [2, '#2f4056'],
time: 300000,
skin: "popup-tips",
success: function (el) {
var left = $(el).position().left - 10;
$(el).addClass('side-layout').css({ left: left });
element.render();
}
});
}
});
$("body").on("mouseleave", ".popup-tips", function () {
try {
layer.close(window.openTips);
} catch (e) {
console.log(e.message);
}
});
function screenFun(num) {
num = num || 1;
num = num * 1;
var docElm = document.documentElement;
switch (num) {
case 1:
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
break;
case 2:
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
break;
}
return new Promise(function (res, rej) {
res("返回值");
});
}
function isFullscreen() {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
window.onresize = function () {
if (!isFullscreen()) {
$(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
}
}
exports('admin', tab);
});