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); });