public
This commit is contained in:
388
public/static/admin/js/app.js
Normal file
388
public/static/admin/js/app.js
Normal file
@ -0,0 +1,388 @@
|
||||
/**
|
||||
* NOTE: 核心框架
|
||||
* author: FZR
|
||||
* desc: 大鹏一日同风起, 扶摇直上九万里
|
||||
*/
|
||||
layui.use(["form", "element"], function () {
|
||||
var $ = layui.jquery;
|
||||
var element = layui.element;
|
||||
var $body = $("body");
|
||||
var APP_BODY = "#LAY_app_body";
|
||||
var TABS_HEADER = "#LAY_app_tabsheader>li";
|
||||
var FILTER_TAB_TABS = "lay-layout-tabs";
|
||||
var TABS_BODY = 'lay-tabsbody-item'
|
||||
var SHOW = 'layui-show'
|
||||
//同步路由
|
||||
|
||||
var admin = {
|
||||
tabsPage: {},
|
||||
//关闭当前 pageTabs
|
||||
closeThisTabs: function () {
|
||||
if (!admin.tabsPage.index) return;
|
||||
$(TABS_HEADER).eq(admin.tabsPage.index).find('.layui-tab-close').trigger('click');
|
||||
$(TABS_HEADER).eq(admin.tabsPage.index).trigger('click');
|
||||
},
|
||||
//获取页面标签主体元素
|
||||
tabsBody: function (index) {
|
||||
return $(APP_BODY).find('.' + TABS_BODY).eq(index || 0);
|
||||
}
|
||||
//resize事件管理
|
||||
, resize: function (fn) {
|
||||
var router = layui.router()
|
||||
, key = router.path.join('-');
|
||||
|
||||
if (admin.resizeFn[key]) {
|
||||
$win.off('resize', admin.resizeFn[key]);
|
||||
delete admin.resizeFn[key];
|
||||
}
|
||||
|
||||
if (fn === 'off') return; //如果是清除 resize 事件,则终止往下执行
|
||||
|
||||
fn(), admin.resizeFn[key] = fn;
|
||||
$win.on('resize', admin.resizeFn[key]);
|
||||
}
|
||||
, resizeFn: {}
|
||||
, runResize: function () {
|
||||
var router = layui.router()
|
||||
, key = router.path.join('-');
|
||||
admin.resizeFn[key] && admin.resizeFn[key]();
|
||||
}
|
||||
, delResize: function () {
|
||||
this.resize('off');
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 操作事件
|
||||
*/
|
||||
let events = {
|
||||
// 左右滚动页面标签
|
||||
rollPage: function (type, index) {
|
||||
var tabsHeader = $('#LAY_app_tabsheader')
|
||||
, liItem = tabsHeader.children('li')
|
||||
, scrollWidth = tabsHeader.prop('scrollWidth')
|
||||
, outerWidth = tabsHeader.outerWidth()
|
||||
, tabsLeft = parseFloat(tabsHeader.css('left'));
|
||||
|
||||
//右左往右
|
||||
if (type === 'left') {
|
||||
if (!tabsLeft && tabsLeft <= 0) return;
|
||||
|
||||
//当前的left减去可视宽度,用于与上一轮的页标比较
|
||||
var prefLeft = -tabsLeft - outerWidth;
|
||||
|
||||
liItem.each(function (index, item) {
|
||||
var li = $(item)
|
||||
, left = li.position().left;
|
||||
|
||||
if (left >= prefLeft) {
|
||||
tabsHeader.css('left', -left);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else if (type === 'auto') { //自动滚动
|
||||
(function () {
|
||||
var thisLi = liItem.eq(index), thisLeft;
|
||||
|
||||
if (!thisLi[0]) return;
|
||||
thisLeft = thisLi.position().left;
|
||||
|
||||
//当目标标签在可视区域左侧时
|
||||
if (thisLeft < -tabsLeft) {
|
||||
return tabsHeader.css('left', -thisLeft);
|
||||
}
|
||||
|
||||
//当目标标签在可视区域右侧时
|
||||
if (thisLeft + thisLi.outerWidth() >= outerWidth - tabsLeft) {
|
||||
var subLeft = thisLeft + thisLi.outerWidth() - (outerWidth - tabsLeft);
|
||||
liItem.each(function (i, item) {
|
||||
var li = $(item)
|
||||
, left = li.position().left;
|
||||
|
||||
//从当前可视区域的最左第二个节点遍历,如果减去最左节点的差 > 目标在右侧不可见的宽度,则将该节点放置可视区域最左
|
||||
if (left + tabsLeft > 0) {
|
||||
if (left - tabsLeft > subLeft) {
|
||||
tabsHeader.css('left', -left);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}());
|
||||
} else {
|
||||
//默认向左滚动
|
||||
liItem.each(function (i, item) {
|
||||
var li = $(item)
|
||||
, left = li.position().left;
|
||||
|
||||
if (left + li.outerWidth() >= outerWidth - tabsLeft) {
|
||||
tabsHeader.css('left', -left);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 向右滚动页面标签
|
||||
, leftPage: function () {
|
||||
events.rollPage('left');
|
||||
}
|
||||
// 向左滚动页面标签
|
||||
, rightPage: function () {
|
||||
events.rollPage();
|
||||
}
|
||||
//关闭当前标签页
|
||||
, closeThisTabs: function () {
|
||||
events.rollPage('auto', admin.tabsPage.index);
|
||||
var topAdmin = parent === self ? admin : parent.layui.admin;
|
||||
topAdmin.closeThisTabs();
|
||||
}
|
||||
//关闭其它标签页
|
||||
, closeOtherTabs: function (type) {
|
||||
events.rollPage('auto', 0);
|
||||
var TABS_REMOVE = 'LAY-system-pagetabs-remove';
|
||||
if (type === 'all') {
|
||||
$(TABS_HEADER + ':gt(0)').remove();
|
||||
$(APP_BODY).find('.' + TABS_BODY + ':gt(0)').remove();
|
||||
|
||||
$(TABS_HEADER).eq(0).trigger('click');
|
||||
} else {
|
||||
$(TABS_HEADER).each(function (index, item) {
|
||||
if (index && index != admin.tabsPage.index) {
|
||||
$(item).addClass(TABS_REMOVE);
|
||||
admin.tabsBody(index).addClass(TABS_REMOVE);
|
||||
}
|
||||
});
|
||||
$('.' + TABS_REMOVE).remove();
|
||||
admin.tabsPage.index = 1
|
||||
}
|
||||
}
|
||||
//关闭全部标签页
|
||||
, closeAllTabs: function () {
|
||||
events.closeOtherTabs('all');
|
||||
// 需要删除 layui-body下面的容器, 保留工作台
|
||||
// 菜单切换到控制台的, 可以模拟点击标签, 看看能不能自动切换
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 打开标签(用于侧边菜单点击)
|
||||
* @author FZR
|
||||
* @param url (要打开的URL)
|
||||
* @param text (标签文本)
|
||||
* @param menus_id (数据库中的菜单ID)
|
||||
*/
|
||||
var openTabsPage = function (url, text, menus_id) {
|
||||
var matchTo;
|
||||
var tabs = $("#LAY_app_tabsheader > li");
|
||||
|
||||
// 循环查找是否已存在标签栏中
|
||||
tabs.each(function () {
|
||||
var lay_id = $(this).attr('lay-id');
|
||||
var lay_url = $(this).attr("lay-attr");
|
||||
if (lay_url === url && lay_id === menus_id) {
|
||||
matchTo = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 如果标签不存在则创建
|
||||
if (!matchTo) {
|
||||
setTimeout(function () {
|
||||
$(APP_BODY).find(".lay-tabsbody-item").removeClass("layui-show");
|
||||
$(APP_BODY).append([
|
||||
'<div lay-id="' + menus_id + '" class="lay-tabsbody-item layui-show">'
|
||||
, '<iframe src="' + url + '" class="lay-iframe"></iframe>'
|
||||
, '</div>'
|
||||
].join(''));
|
||||
}, 10);
|
||||
|
||||
element.tabAdd(FILTER_TAB_TABS, {
|
||||
title: text || '新打开标签'
|
||||
, id: menus_id
|
||||
, attr: url
|
||||
});
|
||||
|
||||
} else {
|
||||
//页面已存在,直接切换到页面就行,而不是重新加载新页面
|
||||
$(APP_BODY).find(".lay-tabsbody-item").removeClass("layui-show");
|
||||
$(APP_BODY).find(".lay-tabsbody-item[lay-id=" + menus_id + "]").addClass("layui-show");
|
||||
}
|
||||
|
||||
// 定位到当前Tabs
|
||||
element.tabChange(FILTER_TAB_TABS, menus_id);
|
||||
};
|
||||
|
||||
/**
|
||||
* 标签栏切换点击
|
||||
* @author FZR
|
||||
*/
|
||||
$body.on("click", TABS_HEADER, function () {
|
||||
var url = $(this).attr('lay-attr');
|
||||
var text = $(this).children("span").html();
|
||||
var lay_id = $(this).attr('lay-id');
|
||||
var elem = $(".layui-sidebar .layui-side-menu li a[lay-id=" + lay_id + "]");
|
||||
|
||||
// 切换到指定一级菜单
|
||||
elem.parents("li").siblings().find("a").removeClass("active");
|
||||
elem.parents("li").children("a").addClass("active");
|
||||
// 是否存在二级菜单
|
||||
if (elem.parents("li").has("dl").length) {
|
||||
$(".layui-sidebar > .layui-side-menu li dl").css("display", "");
|
||||
elem.parents("li").children("dl").css("display", "block");
|
||||
|
||||
elem.parents("li").children("dl").find("a").removeClass("active");
|
||||
elem.parents("li").children("dl").find("a[lay-id=" + lay_id + "]").addClass("active");
|
||||
$(APP_BODY).css({ "left": "232px" });
|
||||
} else {
|
||||
$(APP_BODY).css({ "left": "110px" });
|
||||
$(".layui-sidebar > .layui-side-menu li > dl").css("display", "");
|
||||
}
|
||||
|
||||
//页面已存在,直接切换到页面就行,而不是重新加载新页面
|
||||
$(APP_BODY).find(".lay-tabsbody-item").removeClass("layui-show");
|
||||
$(APP_BODY).find(".lay-tabsbody-item[lay-id=" + lay_id + "]").addClass("layui-show");
|
||||
});
|
||||
|
||||
/**
|
||||
* 侧边菜单切换(一二级)
|
||||
* @author FZR
|
||||
*/
|
||||
$body.on("click", ".layui-sidebar .layui-side-menu li", function () {
|
||||
if (!$(this).children("a").hasClass("active")) {
|
||||
// 一级菜单样式切换
|
||||
$(this).siblings().find("a").removeClass("active");
|
||||
$(this).children("a").addClass("active");
|
||||
// 二级菜单显示或隐藏
|
||||
if ($(this).has("dl").length) {
|
||||
$(".layui-sidebar > .layui-side-menu li dl").css("display", "");
|
||||
$(this).children("dl").css("display", "block");
|
||||
var towSubMenu = $(this).children("dl").find("dd > a");
|
||||
var Node = towSubMenu.eq(0).children("i").length ? towSubMenu.eq(1) : towSubMenu.eq(0);
|
||||
Node.addClass("active");
|
||||
$(APP_BODY).css({ "left": "232px" })
|
||||
|
||||
var id = Node.attr("lay-id");
|
||||
var url = Node.attr("lay-href");
|
||||
var text = Node.html();
|
||||
openTabsPage(url, text, id)
|
||||
} else {
|
||||
$(".layui-sidebar > .layui-side-menu li > dl").css("display", "");
|
||||
$(APP_BODY).css({ "left": "110px" });
|
||||
|
||||
var id = $(this).children("a").attr("lay-id");
|
||||
var url = $(this).children("a").attr("lay-href");
|
||||
var text = $(this).find("cite").html();
|
||||
openTabsPage(url, text, id)
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 三级菜单(显示/隐藏)
|
||||
* @author FZR
|
||||
*/
|
||||
$body.on("click", ".layui-sidebar > .layui-side-menu .child-menu-title", function () {
|
||||
if ($(this).children("i").hasClass("layui-icon-triangle-d")) {
|
||||
$(this).children("i").removeClass("layui-icon-triangle-d");
|
||||
$(this).children("i").addClass("layui-icon-triangle-r");
|
||||
$(this).next().stop().slideUp();
|
||||
} else {
|
||||
$(this).children("i").removeClass("layui-icon-triangle-r");
|
||||
$(this).children("i").addClass("layui-icon-triangle-d");
|
||||
$(this).next().stop().slideDown();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 三级菜(样式切换)
|
||||
* @author FZR
|
||||
*/
|
||||
$body.on("click", ".layui-sidebar > .layui-side-menu .child-menu dd", function () {
|
||||
if (!$(this).children("a").hasClass("child-menu-title")) {
|
||||
$(".layui-sidebar > .layui-side-menu .child-menu dd a").removeClass("active");
|
||||
$(this).children("a").addClass("active");
|
||||
// 打开标签
|
||||
var id = $(this).children("a").attr("lay-id");
|
||||
var url = $(this).children("a").attr("lay-href");
|
||||
var text = $(this).children("a").html();
|
||||
openTabsPage(url, text, id)
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 快捷方式切换
|
||||
*/
|
||||
$body.on("click", ".shortcut-list .shop-item > a", function () {
|
||||
var url = $(this).attr('lay-href');
|
||||
var id = $(this).attr('data-id');
|
||||
var text = $(this).attr('data-txt');
|
||||
console.log('aaaa')
|
||||
openTabsPage(url, text, id)
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新页面
|
||||
*/
|
||||
$body.on("click", ".layui-header .refresh", function () {
|
||||
var uri = $("#LAY_app_tabsheader li.layui-this").attr("lay-attr");
|
||||
$("#LAY_app_body .lay-tabsbody-item.layui-show .lay-iframe").attr("src", uri);
|
||||
});
|
||||
|
||||
/**
|
||||
* 按键盘全屏或退出全屏
|
||||
* @author FZR
|
||||
*/
|
||||
$body.on("keydown", "", function (event) {
|
||||
event = event || window.event || arguments.callee.caller.arguments[0];
|
||||
//按Esc
|
||||
if (event && event.keyCode === 27) {
|
||||
$(".fullscreen").children("i").eq(0).removeClass("layui-icon-screen-restore");
|
||||
}
|
||||
//按F11
|
||||
if (event && event.keyCode === 122) {
|
||||
$(".fullscreen").children("i").eq(0).addClass("layui-icon-screen-restore");
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击按钮全屏或退出全屏
|
||||
* @author FZR
|
||||
*/
|
||||
$body.on("click", ".fullscreen", function () {
|
||||
var docElm = document.documentElement;
|
||||
if ($(this).children("i").hasClass("layui-icon-screen-restore")) {
|
||||
document.exitFullscreen();
|
||||
$(this).children("i").eq(0).removeClass("layui-icon-screen-restore");
|
||||
} else {
|
||||
docElm.requestFullscreen();
|
||||
$(this).children("i").eq(0).addClass("layui-icon-screen-restore");
|
||||
}
|
||||
});
|
||||
//监听 tabspage 删除
|
||||
element.on('tabDelete(' + FILTER_TAB_TABS + ')', function (obj) {
|
||||
var othis = $(TABS_HEADER + '.layui-this');
|
||||
|
||||
obj.index && admin.tabsBody(obj.index).remove();
|
||||
admin.tabsBody(obj.index).addClass(SHOW).siblings().removeClass(SHOW);
|
||||
events.rollPage('auto', obj.index);
|
||||
if(admin.tabsPage.index == obj.index + 1) return
|
||||
if(othis.index() + 1 == obj.index ) {
|
||||
$(TABS_HEADER).eq(obj.index - 1).trigger('click');
|
||||
}
|
||||
if(othis.index() - 1 == obj.index ) {
|
||||
$(TABS_HEADER).eq(obj.index + 1).trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击事件
|
||||
*/
|
||||
$body.on('click', '*[lay-event]', function () {
|
||||
var that = $(this);
|
||||
var attrEvent = that.attr('lay-event');
|
||||
events[attrEvent] && events[attrEvent].call(this, that);
|
||||
});
|
||||
element.on('tab(' + FILTER_TAB_TABS + ')', function (data) {
|
||||
admin.tabsPage.index = data.index;
|
||||
events.rollPage('auto', data.index);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user