123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433 |
- layui.define(['element'], function (exports) {
- var element = layui.element;
- var tab = {
- /*新增一个Tab页面
- * @id,tab页面唯一标识,可是标签中data-id的属性值
- * @url,tab页面地址
- * @name,tab页面标题,
- */
- tabTem: function (id, url, title) {
- element.tabAdd('gg-admin-tab', {
- id: id,
- url:url,
- title: '<span class="gg-tab-active"></span>' + title
- });
- $('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '" data-url="' + url + '"></div>');
- },
- tabAdd: function (id, url, title) {
- var thetabs = $('#pageTabUl').find('li');
- if (thetabs.length > 12) {
- layer.tips('点击LOGO快速关闭已开的TAB页面', $('.layui-logo'));
- }
- if (thetabs.length > 16) {
- layer.msg('你已打开了太多TAB页面了,请关闭部分TAB再使用');
- return false;
- }
- element.tabAdd('gg-admin-tab', {
- id: id,
- url:url,
- title: '<span class="gg-tab-active"></span>' + title
- });
- $('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '"><iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe></div>');
- 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){
- $('.layui-nav-tree').find('.side-menu-item').removeClass('layui-this');
- $('.layui-nav-tree').find('dd').removeClass('layui-this');
- $('.layui-nav-tree').find('dd').removeClass('layui-nav-itemed');
- $('.layui-nav-tree').find('.menu-li').removeClass('layui-nav-itemed');
- $('.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('.menu-li').addClass('layui-nav-itemed');
- }
- })
- },
- 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=[];
- $('#pageTabUl li').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){
- thisPage.html('<iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>');
- }
- tab.tabFollow(id);
- $('#GouguAppBody').find('.gg-tab-page').removeClass('layui-show');
- thisPage.addClass('layui-show');
- if(data.index==0){
- tab.refresh(0);
- }
- 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 () {
- 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 = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>" + tips + "</li></ul>";
- 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);
- });
|