root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!29 优化admin.js代码 

Merge pull request !29 from miko/master
develop
就眠仪式 2020-11-23 17:09:42 +08:00 committed by Gitee
parent ad6ba22898 55e018f48f
commit 5e446c4fe2
1 changed files with 104 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
component/pear/modules/admin.js
View File

@ -2,57 +2,57 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
function(exports) { function(exports) {
"use strict"; "use strict";
var $ = layui.jquery, const $ = layui.jquery,
form = layui.form, form = layui.form,
element = layui.element, element = layui.element,
pearTab = layui.tab, pearTab = layui.tab,
pearMenu = layui.menu, pearMenu = layui.menu,
pearFrame = layui.frame; pearFrame = layui.frame;
var bodyFrame; let bodyFrame;
var sideMenu; let sideMenu;
var bodyTab; let bodyTab;
var config; let config;
const body = $('body');
const pearAdmin = new function () {
var pearAdmin = new function() { let configPath = '';
var configPath = ''; this.setConfigPath = function (path) {
this.setConfigPath = function(path){
configPath = path; configPath = path;
} }
this.render = function(initConfig) { this.render = function (initConfig) {
if (initConfig != undefined) { if (initConfig !== undefined) {
applyConfig(initConfig); applyConfig(initConfig);
} else { } else {
pearAdmin.readConfig().then(function(param) { pearAdmin.readConfig().then(function (param) {
applyConfig(param); applyConfig(param);
}); });
} }
} }
this.readConfig = function() { this.readConfig = function () {
var defer = $.Deferred(); const defer = $.Deferred();
var configUrl = (configPath == '' ? "pear.config.json" : configPath) + "?fresh=" + Math.random(); const configUrl = (configPath === '' ? "pear.config.json" : configPath) + "?fresh=" + Math.random();
$.getJSON(configUrl, function(result) { $.getJSON(configUrl, function (result) {
defer.resolve(result) defer.resolve(result)
}); });
return defer.promise(); return defer.promise();
} }
this.logoRender = function(param) { this.logoRender = function (param) {
$(".layui-logo .logo").attr("src", param.logo.image); $(".layui-logo .logo").attr("src", param.logo.image);
$(".layui-logo .title").html(param.logo.title); $(".layui-logo .title").html(param.logo.title);
} }
this.menuRender = function(param) { this.menuRender = function (param) {
sideMenu = pearMenu.render({ sideMenu = pearMenu.render({
elem: 'sideMenu', elem: 'sideMenu',
async: param.menu.async != undefined ? param.menu.async : true, async: param.menu.async !== undefined ? param.menu.async : true,
theme: "dark-theme", theme: "dark-theme",
height: '100%', height: '100%',
control: param.menu.control ? 'control' : false, // control control: param.menu.control ? 'control' : false, // control
@ -61,16 +61,32 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
url: param.menu.data, url: param.menu.data,
data: param.menu.data, //async为false时，传入菜单数组 data: param.menu.data, //async为false时，传入菜单数组
parseData: false, parseData: false,
change: function() { change: function () {
compatible(); compatible();
}, },
done: function() { done: function () {
sideMenu.selectItem(param.menu.select); sideMenu.selectItem(param.menu.select);
} }
}); });
} }
this.bodyRender = function(param) { this.bodyRender = function (param) {
body.on("click", ".refresh", function () {
const refreshA = $(".refresh a");
refreshA.removeClass("layui-icon-refresh-1");
refreshA.addClass("layui-anim");
refreshA.addClass("layui-anim-rotate");
refreshA.addClass("layui-anim-loop");
refreshA.addClass("layui-icon-loading");
bodyTab.refresh(400);
setTimeout(function () {
refreshA.addClass("layui-icon-refresh-1");
refreshA.removeClass("layui-anim");
refreshA.removeClass("layui-anim-rotate");
refreshA.removeClass("layui-anim-loop");
refreshA.removeClass("layui-icon-loading");
}, 600)
})
if (param.tab.muiltTab) { if (param.tab.muiltTab) {
bodyTab = pearTab.render({ bodyTab = pearTab.render({
elem: 'content', elem: 'content',
@ -80,7 +96,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
height: '100%', height: '100%',
index: 0, index: 0,
tabMax: param.tab.tabMax, tabMax: param.tab.tabMax,
closeEvent: function(id) { closeEvent: function (id) {
sideMenu.selectItem(id); sideMenu.selectItem(id);
}, },
data: [{ data: [{
@ -90,29 +106,15 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
close: false close: false
}] }]
}); });
bodyTab.click(function(id) { bodyTab.click(function (id) {
if (!param.tab.keepState) { if (!param.tab.keepState) {
bodyTab.refresh(false); bodyTab.refresh(false);
} }
bodyTab.positionTab(); bodyTab.positionTab();
sideMenu.selectItem(id); sideMenu.selectItem(id);
}) })
$("body").on("click", ".refresh", function() {
$(".refresh a").removeClass("layui-icon-refresh-1"); sideMenu.click(function (dom, data) {
$(".refresh a").addClass("layui-anim");
$(".refresh a").addClass("layui-anim-rotate");
$(".refresh a").addClass("layui-anim-loop");
$(".refresh a").addClass("layui-icon-loading");
bodyTab.refresh(400);
setTimeout(function() {
$(".refresh a").addClass("layui-icon-refresh-1");
$(".refresh a").removeClass("layui-anim");
$(".refresh a").removeClass("layui-anim-rotate");
$(".refresh a").removeClass("layui-anim-loop");
$(".refresh a").removeClass("layui-icon-loading");
}, 600)
})
sideMenu.click(function(dom, data) {
bodyTab.addTabOnly({ bodyTab.addTabOnly({
id: data.menuId, id: data.menuId,
title: data.menuTitle, title: data.menuTitle,
@ -130,46 +132,32 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
width: '100%', width: '100%',
height: '100%' height: '100%'
}); });
$("body").on("click", ".refresh", function() {
$(".refresh a").removeClass("layui-icon-refresh-1"); sideMenu.click(function (dom, data) {
$(".refresh a").addClass("layui-anim");
$(".refresh a").addClass("layui-anim-rotate");
$(".refresh a").addClass("layui-anim-loop");
$(".refresh a").addClass("layui-icon-loading");
bodyFrame.refresh(400);
setTimeout(function() {
$(".refresh a").addClass("layui-icon-refresh-1");
$(".refresh a").removeClass("layui-anim");
$(".refresh a").removeClass("layui-anim-rotate");
$(".refresh a").removeClass("layui-anim-loop");
$(".refresh a").removeClass("layui-icon-loading");
}, 600)
})
sideMenu.click(function(dom, data) {
bodyFrame.changePage(data.menuUrl, data.menuPath, true); bodyFrame.changePage(data.menuUrl, data.menuPath, true);
compatible() compatible()
}) })
} }
} }
this.keepLoad = function(param) { this.keepLoad = function (param) {
compatible() compatible()
setTimeout(function() { setTimeout(function () {
$(".loader-main").fadeOut(200); $(".loader-main").fadeOut(200);
}, param.other.keepLoad) }, param.other.keepLoad)
} }
this.themeRender = function(option) { this.themeRender = function (option) {
if (option.theme.allowCustom == false) { if (option.theme.allowCustom === false) {
$(".setting").remove(); $(".setting").remove();
} }
var colorId = localStorage.getItem("theme-color"); const colorId = localStorage.getItem("theme-color");
var menu = localStorage.getItem("theme-menu"); let menu = localStorage.getItem("theme-menu");
var color = getColorById(colorId); const color = getColorById(colorId);
if (menu == "null") { if (menu === "null") {
menu = option.theme.defaultMenu; menu = option.theme.defaultMenu;
} else { } else {
if (option.theme.allowCustom == false) { if (option.theme.allowCustom === false) {
menu = option.theme.defaultMenu; menu = option.theme.defaultMenu;
} }
} }
@ -179,14 +167,15 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
this.menuSkin(menu); this.menuSkin(menu);
} }
this.menuSkin = function(theme) { this.menuSkin = function (theme) {
$(".pear-admin").removeClass("light-theme"); const pearAdmin = $(".pear-admin");
$(".pear-admin").removeClass("dark-theme"); pearAdmin.removeClass("light-theme");
$(".pear-admin").addClass(theme); pearAdmin.removeClass("dark-theme");
pearAdmin.addClass(theme);
} }
this.colorSet = function(color) { this.colorSet = function (color) {
var style = ''; let style = '';
// 自 定 义 菜 单 配 色 // 自 定 义 菜 单 配 色
style += style +=
'.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' + '.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +
@ -237,20 +226,27 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
} }
}; };
$("body").on("click", ".collaspe,.pear-cover", function() { function abc(){
sideMenu.collaspe(); sideMenu.collaspe();
if ($(".pear-admin").is(".pear-mini")) { const admin = $(".pear-admin");
$(".layui-icon-spread-left").addClass("layui-icon-shrink-right") const left = $(".layui-icon-spread-left")
$(".layui-icon-spread-left").removeClass("layui-icon-spread-left") const right = $(".layui-icon-shrink-right")
$(".pear-admin").removeClass("pear-mini"); if (admin.is(".pear-mini")) {
left.addClass("layui-icon-shrink-right")
left.removeClass("layui-icon-spread-left")
admin.removeClass("pear-mini");
} else { } else {
$(".layui-icon-shrink-right").addClass("layui-icon-spread-left") right.addClass("layui-icon-spread-left")
$(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right") right.removeClass("layui-icon-shrink-right")
$(".pear-admin").addClass("pear-mini"); admin.addClass("pear-mini");
} }
}
body.on("click", ".collaspe,.pear-cover", function() {
abc()
}); });
$("body").on("click", ".fullScreen", function() { body.on("click", ".fullScreen", function() {
if ($(this).hasClass("layui-icon-screen-restore")) { if ($(this).hasClass("layui-icon-screen-restore")) {
screenFun(2).then(function() { screenFun(2).then(function() {
$(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
@ -262,7 +258,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
} }
}); });
$("body").on("click", '[user-menu-id]', function() { body.on("click", '[user-menu-id]', function() {
if (config.tab.muiltTab) { if (config.tab.muiltTab) {
bodyTab.addTabOnly({ bodyTab.addTabOnly({
id: $(this).attr("user-menu-id"), id: $(this).attr("user-menu-id"),
@ -276,8 +272,8 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
} }
}); });
$("body").on("click", ".setting", function() { body.on("click", ".setting", function() {
var bgColorHtml = let bgColorHtml =
'<li class="layui-this" data-select-bgcolor="dark-theme" >' + '<li class="layui-this" data-select-bgcolor="dark-theme" >' +
'<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' + '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' + '<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
@ -293,7 +289,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
'</a>' + '</a>' +
'</li>'; '</li>';
var html = const html =
'<div class="pearone-color">\n' + '<div class="pearone-color">\n' +
'<div class="color-title">整体风格</div>\n' + '<div class="color-title">整体风格</div>\n' +
'<div class="color-content">\n' + '<div class="color-content">\n' +
@ -316,21 +312,21 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
success: function(layero, index) { success: function(layero, index) {
form.render(); form.render();
var color = localStorage.getItem("theme-color"); const color = localStorage.getItem("theme-color");
var menu = localStorage.getItem("theme-menu"); const menu = localStorage.getItem("theme-menu");
if (color != "null") { if (color !== "null") {
$(".select-color-item").removeClass("layui-icon") $(".select-color-item").removeClass("layui-icon")
.removeClass("layui-icon-ok"); .removeClass("layui-icon-ok");
$("*[color-id='" + color + "']").addClass("layui-icon") $("*[color-id='" + color + "']").addClass("layui-icon")
.addClass("layui-icon-ok"); .addClass("layui-icon-ok");
} }
if (menu != "null") { if (menu !== "null") {
$("*[data-select-bgcolor]").removeClass("layui-this"); $("*[data-select-bgcolor]").removeClass("layui-this");
$("[data-select-bgcolor='" + menu + "']").addClass("layui-this"); $("[data-select-bgcolor='" + menu + "']").addClass("layui-this");
} }
$('#layui-layer-shade' + index).click(function() { $('#layui-layer-shade' + index).click(function() {
var $layero = $('#layui-layer' + index); const $layero = $('#layui-layer' + index);
$layero.animate({ $layero.animate({
left: $layero.offset().left + $layero.width() left: $layero.offset().left + $layero.width()
}, 200, function() { }, 200, function() {
@ -341,20 +337,20 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
}); });
}); });
$('body').on('click', '[data-select-bgcolor]', function() { body.on('click', '[data-select-bgcolor]', function() {
var theme = $(this).attr('data-select-bgcolor'); const theme = $(this).attr('data-select-bgcolor');
$('[data-select-bgcolor]').removeClass("layui-this"); $('[data-select-bgcolor]').removeClass("layui-this");
$(this).addClass("layui-this"); $(this).addClass("layui-this");
localStorage.setItem("theme-menu", theme); localStorage.setItem("theme-menu", theme);
pearAdmin.menuSkin(theme); pearAdmin.menuSkin(theme);
}); });
$('body').on('click', '.select-color-item', function() { body.on('click', '.select-color-item', function() {
$(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok"); $(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
$(this).addClass("layui-icon").addClass("layui-icon-ok"); $(this).addClass("layui-icon").addClass("layui-icon-ok");
var colorId = $(".select-color-item.layui-icon-ok").attr("color-id"); const colorId = $(".select-color-item.layui-icon-ok").attr("color-id");
localStorage.setItem("theme-color", colorId); localStorage.setItem("theme-color", colorId);
var color = getColorById(colorId); const color = getColorById(colorId);
pearAdmin.colorSet(color.color); pearAdmin.colorSet(color.color);
}); });
@ -368,17 +364,17 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
} }
function getColorById(id) { function getColorById(id) {
var color; let color;
var flag = false; let flag = false;
$.each(config.colors, function(i, value) { $.each(config.colors, function(i, value) {
if (value.id == id) { if (value.id === id) {
color = value; color = value;
flag = true; flag = true;
} }
}) })
if (flag == false || config.theme.allowCustom == false) { if (flag === false || config.theme.allowCustom === false) {
$.each(config.colors, function(i, value) { $.each(config.colors, function(i, value) {
if (value.id == config.theme.defaultColor) { if (value.id === config.theme.defaultColor) {
color = value; color = value;
} }
}) })
@ -387,7 +383,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
} }
function buildLinkHtml() { function buildLinkHtml() {
var links = ""; let links = "";
$.each(config.links, function(i, value) { $.each(config.links, function(i, value) {
links += '<a class="more-menu-item" href="' + value.href + '" target="_blank">' + links += '<a class="more-menu-item" href="' + value.href + '" target="_blank">' +
'<i class="' + value.icon + '" style="font-size: 19px;"></i> ' + value.title + '<i class="' + value.icon + '" style="font-size: 19px;"></i> ' + value.title +
@ -397,7 +393,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
} }
function buildColorHtml() { function buildColorHtml() {
var colors = ""; let colors = "";
$.each(config.colors, function(i, value) { $.each(config.colors, function(i, value) {
colors += "<span class='select-color-item' color-id='" + value.id + "' style='background-color:" + value.color + colors += "<span class='select-color-item' color-id='" + value.id + "' style='background-color:" + value.color +
";'></span>"; ";'></span>";
@ -408,23 +404,14 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
function compatible() { function compatible() {
if ($(window).width() <= 768) { if ($(window).width() <= 768) {
sideMenu.collaspe(); abc()
if ($(".pear-admin").is(".pear-mini")) {
$(".layui-icon-spread-left").addClass("layui-icon-shrink-right")
$(".layui-icon-spread-left").removeClass("layui-icon-spread-left")
$(".pear-admin").removeClass("pear-mini");
} else {
$(".layui-icon-shrink-right").addClass("layui-icon-spread-left")
$(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right")
$(".pear-admin").addClass("pear-mini");
}
} }
} }
function screenFun(num) { function screenFun(num) {
num = num || 1; num = num || 1;
num = num * 1; num = num * 1;
var docElm = document.documentElement; const docElm = document.documentElement;
switch (num) { switch (num) {
case 1: case 1:
if (docElm.requestFullscreen) { if (docElm.requestFullscreen) {