layui.define(['element'], function (exports) { var element = layui.element; var tab = { /*新增一个Tab页面 * @id,tab页面唯一标识,可是标签中data-id的属性值 * @url,tab页面地址 * @name,tab页面标题, */ tabAdd: function (id, url, title) { element.tabAdd('gg-admin-tab', { id: id, title: '' + title, content: '', }); $('#GouguAppBody').append('
'); this.tabChange(id); var thetabs = $('#pageTabs .layui-tab-title').find('li'); if (thetabs.length > 12) { layer.tips('点击LOGO快速关闭打开的TAB', $('[event-logo]')); } }, //从子页面打开新的Tab页面,防止id重复,使用时间戳作为唯一标识 sonAdd: function (url, title) { let id = Date.now(); this.tabAdd( id, url,title); }, //根据传入的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; }) }, 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; } } }; //切换tab element.on('tab(gg-admin-tab)', function (data) { $('#GouguAppBody').find('.gg-tab-page').removeClass('layui-show'); $('#GouguAppBody').find('.gg-tab-page').eq(data.index).addClass('layui-show'); tab.tabRoll("auto", data.index); }); //删除tab element.on('tabDelete(gg-admin-tab)', function (data) { $('#GouguAppBody').find('.gg-tab-page').eq(data.index).remove(); tab.tabRoll("auto", data.index); }); //右滚动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 () { if (window.innerWidth > 992) { $('#GouguApp').toggleClass('side-spread'); } else { $('#GouguApp').toggleClass('side-spread-sm'); } }) $('#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 ($(this).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); });