root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

config.js 

var okConfig = {
   theme: "blue_theme", //主题色orange_theme|blue_theme
   menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
   tabMemory: true,  //是否开启tab刷新记忆
   tabRefresh: false, //是否开启切换刷新
};
master
zhizous 2020-04-06 17:59:35 +08:00
parent 71a453d54d
commit 197ba8478f
6 changed files with 811 additions and 663 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -9,6 +9,7 @@
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/okadmin.css"> <link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="lib/loading/okLoading.css"/> <link rel="stylesheet" href="lib/loading/okLoading.css"/>
<script type="text/javascript" src="./js/okconfig.js"></script>
<script type="text/javascript" src="lib/loading/okLoading.js"></script> <script type="text/javascript" src="lib/loading/okLoading.js"></script>
</head> </head>
<body class="layui-layout-body"> <body class="layui-layout-body">

11
js/okadmin.js
View File

@ -7,7 +7,6 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
var layer = layui.layer; var layer = layui.layer;
var okLayer = layui.okLayer; var okLayer = layui.okLayer;
var okHoliday = layui.okHoliday; var okHoliday = layui.okHoliday;
var okTab = layui.okTab({ var okTab = layui.okTab({
// 菜单请求路径 // 菜单请求路径
url: "data/navs.json", url: "data/navs.json",
@ -18,8 +17,18 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
return data; return data;
} }
}); });
var config = okUtils.local("okConfig") || okConfig || {};
objOkTab = okTab; objOkTab = okTab;
okLoading && okLoading.close();/**关闭加载动画*/ okLoading && okLoading.close();/**关闭加载动画*/
if(config.theme){ //主题颜色
$(".layui-layout-admin").removeClass("orange_theme blue_theme");
$(".layui-layout-admin").addClass(config.theme);
}
if(config.menuArrow){ //tab箭头样式
$("#navBar").addClass(config.menuArrow);
}
/** /**
* 左侧导航渲染完成之后的操作 * 左侧导航渲染完成之后的操作
*/ */

6
js/okconfig.js Normal file
View File

@ -0,0 +1,6 @@
var okConfig = {
theme: "blue_theme", //主题色orange_theme|blue_theme
menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
tabMemory: true, //是否开启tab刷新记忆
tabRefresh: false, //是否开启切换刷新
};

1005
lib/layui/lay/okmodules/okTab.js
View File

File diff suppressed because it is too large Load Diff

360
lib/layui/lay/okmodules/okUtils.js
View File

@ -1,163 +1,209 @@
"use strict"; "use strict";
layui.define(["layer"], function (exprots) { layui.define(["layer"], function (exprots) {
var $ = layui.jquery; var $ = layui.jquery;
var okUtils = { var okUtils = {
/** /**
* 是否前后端分离 * 是否前后端分离
*/ */
isFrontendBackendSeparate: true, isFrontendBackendSeparate: true,
/** /**
* 服务器地址 * 服务器地址
*/ */
baseUrl: "http://rap2api.taobao.org/app/mock/233041", baseUrl: "http://rap2api.taobao.org/app/mock/233041",
/** /**
* 获取body的总宽度 * 获取body的总宽度
*/ */
getBodyWidth: function () { getBodyWidth: function () {
return document.body.scrollWidth; return document.body.scrollWidth;
}, },
/** /**
* 主要用于对ECharts视图自动适应宽度 * 主要用于对ECharts视图自动适应宽度
*/ */
echartsResize: function (element) { echartsResize: function (element) {
var element = element || []; var element = element || [];
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
var isResize = localStorage.getItem("isResize"); var isResize = localStorage.getItem("isResize");
// if (isResize == "false") { // if (isResize == "false") {
for (let i = 0; i < element.length; i++) { for (let i = 0; i < element.length; i++) {
element[i].resize(); element[i].resize();
}
// }
});
},
/**
* ajax()函数二次封装
* @param url
* @param type
* @param params
* @param load
* @returns {*|never|{always, promise, state, then}}
*/
ajax: function (url, type, params, load) {
var deferred = $.Deferred();
var loadIndex;
$.ajax({
url: okUtils.isFrontendBackendSeparate ? okUtils.baseUrl + url : url,
type: type || "get",
data: params || {},
dataType: "json",
beforeSend: function () {
if (load) {
loadIndex = layer.load(0, {shade: 0.3});
}
},
success: function (data) {
if (data.code == 0) {
// 业务正常
deferred.resolve(data)
} else {
// 业务异常
layer.msg(data.msg, {icon: 7, time: 2000});
deferred.reject("okUtils.ajax warn: " + data.msg);
}
},
complete: function () {
if (load) {
layer.close(loadIndex);
}
},
error: function () {
layer.close(loadIndex);
layer.msg("服务器错误", {icon: 2, time: 2000});
deferred.reject("okUtils.ajax error: 服务器错误");
}
});
return deferred.promise();
},
/**
* 主要用于针对表格批量操作操作之前的检查
* @param table
* @returns {string}
*/
tableBatchCheck: function (table) {
var checkStatus = table.checkStatus("tableId");
var rows = checkStatus.data.length;
if (rows > 0) {
var idsStr = "";
for (var i = 0; i < checkStatus.data.length; i++) {
idsStr += checkStatus.data[i].id + ",";
}
return idsStr;
} else {
layer.msg("未选择有效数据", {offset: "t", anim: 6});
} }
}, // }
/** });
* 在表格页面操作成功后弹窗提示 },
* @param content /**
*/ * ajax()函数二次封装
tableSuccessMsg: function (content) { * @param url
layer.msg(content, {icon: 1, time: 1000}, function () { * @param type
// 刷新当前页table数据 * @param params
$(".layui-laypage-btn")[0].click(); * @param load
}); * @returns {*|never|{always, promise, state, then}}
}, */
/** ajax: function (url, type, params, load) {
* 获取父窗体的okTab var deferred = $.Deferred();
* @returns {string} var loadIndex;
*/ $.ajax({
getOkTab: function () { url: okUtils.isFrontendBackendSeparate ? okUtils.baseUrl + url : url,
return parent.objOkTab; type: type || "get",
}, data: params || {},
/** dataType: "json",
* 格式化当前日期 beforeSend: function () {
* @param date if (load) {
* @param fmt loadIndex = layer.load(0, {shade: 0.3});
* @returns {void | string} }
*/
dateFormat: function (date, fmt) {
var o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds(),
"q+": Math.floor((date.getMonth() + 3) / 3),
"S": date.getMilliseconds()
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
},
number: {
/**
* 判断是否为一个正常的数字
* @param num
*/
isNumber: function (num) {
if (num && !isNaN(num)) {
return true;
}
return false;
}, },
/** success: function (data) {
* 判断一个数字是否包括在某个范围 if (data.code == 0) {
* @param num // 业务正常
* @param begin deferred.resolve(data)
* @param end } else {
*/ // 业务异常
isNumberWith: function (num, begin, end) { layer.msg(data.msg, {icon: 7, time: 2000});
if (this.isNumber(num)) { deferred.reject("okUtils.ajax warn: " + data.msg);
if (num >= begin && num <= end) { }
return true;
}
return false;
}
}, },
} complete: function () {
}; if (load) {
exprots("okUtils", okUtils); layer.close(loadIndex);
}
},
error: function () {
layer.close(loadIndex);
layer.msg("服务器错误", {icon: 2, time: 2000});
deferred.reject("okUtils.ajax error: 服务器错误");
}
});
return deferred.promise();
},
/**
* 主要用于针对表格批量操作操作之前的检查
* @param table
* @returns {string}
*/
tableBatchCheck: function (table) {
var checkStatus = table.checkStatus("tableId");
var rows = checkStatus.data.length;
if (rows > 0) {
var idsStr = "";
for (var i = 0; i < checkStatus.data.length; i++) {
idsStr += checkStatus.data[i].id + ",";
}
return idsStr;
} else {
layer.msg("未选择有效数据", {offset: "t", anim: 6});
}
},
/**
* 在表格页面操作成功后弹窗提示
* @param content
*/
tableSuccessMsg: function (content) {
layer.msg(content, {icon: 1, time: 1000}, function () {
// 刷新当前页table数据
$(".layui-laypage-btn")[0].click();
});
},
/**
* sessionStorage 二次封装
*/
session: function (name, value) {
if (value) { /**设置*/
if (typeof value == "object") {
sessionStorage.setItem(name, JSON.stringify(value));
} else {
sessionStorage.setItem(name, value);
}
} else if (null !== value) {
/**获取*/
let val = sessionStorage.getItem(name);
try {
val = JSON.parse(val);
return val;
} catch (err) {
return val;
}
} else { /**清除*/
return sessionStorage.removeItem(name);
}
},
/**
* localStorage 二次封装
*/
local: function (name, value) {
if (value) { /**设置*/
if (typeof value == "object") {
localStorage.setItem(name, JSON.stringify(value));
} else {
localStorage.setItem(name, value);
}
} else if (null !== value) {
/**获取*/
let val = localStorage.getItem(name);
try {
val = JSON.parse(val);
return val;
} catch (err) {
return val;
}
} else { /**清除*/
return localStorage.removeItem(name);
}
},
/**
* 获取父窗体的okTab
* @returns {string}
*/
getOkTab: function () {
return parent.objOkTab;
},
/**
* 格式化当前日期
* @param date
* @param fmt
* @returns {void | string}
*/
dateFormat: function (date, fmt) {
var o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds(),
"q+": Math.floor((date.getMonth() + 3) / 3),
"S": date.getMilliseconds()
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
},
number: {
/**
* 判断是否为一个正常的数字
* @param num
*/
isNumber: function (num) {
if (num && !isNaN(num)) {
return true;
}
return false;
},
/**
* 判断一个数字是否包括在某个范围
* @param num
* @param begin
* @param end
*/
isNumberWith: function (num, begin, end) {
if (this.isNumber(num)) {
if (num >= begin && num <= end) {
return true;
}
return false;
}
},
}
};
exprots("okUtils", okUtils);
}); });

91
pages/system/setting.html
View File

@ -3,18 +3,23 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>系统设置</title> <title>系统设置</title>
<link rel="stylesheet" href="../../css/oksub.css"> <!--<link rel="stylesheet" href="../../css/oksub.css">-->
<link rel="stylesheet" href="../../css/okadmin.css">
<script type="text/javascript" src="../../js/okconfig.js"></script>
<style type="text/css"> <style type="text/css">
.ok-setting .layui-form-item{ .ok-setting .layui-form-item {
margin: 0; margin: 0;
} }
.ok-setting .set-label{
.ok-setting .set-label {
padding-left: 0; padding-left: 0;
width: auto; width: 80px;
text-align: right;
font-size: 16px; font-size: 16px;
padding-right: 10px; padding-right: 10px;
} }
.ok-setting .layui-input-block{
.ok-setting .layui-input-block {
margin: 0; margin: 0;
} }
</style> </style>
@ -22,11 +27,33 @@
<body> <body>
<div class="layui-card-body ok-setting"> <div class="layui-card-body ok-setting">
<form class="layui-form" action="javascript:;"> <form class="layui-form" action="javascript:;">
<div class="layui-form-item">
<label class="layui-form-label set-label">主题色：</label>
<div class="layui-input-block">
<input lay-filter="theme" type="radio" name="theme" value="" title="默认">
<input lay-filter="theme" type="radio" name="theme" value="blue_theme" title="蓝色"/>
<input lay-filter="theme" type="radio" name="theme" value="orange_theme" title="橘色"/>
</div>
</div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label set-label">导航箭头：</label> <label class="layui-form-label set-label">导航箭头：</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input lay-filter="arrow" type="radio" name="sex" value="" title="默认" checked> <input lay-filter="arrow" type="radio" name="arrow" value="" title="默认">
<input lay-filter="arrow" type="radio" name="sex" value="ok-arrow2" title="箭头" > <input lay-filter="arrow" type="radio" name="arrow" value="ok-arrow2" title="箭头">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label set-label">切换刷新：</label>
<div class="layui-input-block">
<input lay-filter="refresh" type="checkbox" name="refresh" lay-skin="switch" lay-text="开启|关闭">
<!--<input lay-filter="arrow" type="checkbox" name="sex" value="" title="默认">-->
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label set-label">tab记忆：</label>
<div class="layui-input-block">
<input lay-filter="memory" type="checkbox" name="memory" lay-skin="switch" lay-text="开启|关闭">
<!--<input lay-filter="arrow" type="checkbox" name="sex" value="" title="默认">-->
</div> </div>
</div> </div>
</form> </form>
@ -35,20 +62,60 @@
</html> </html>
<script type="text/javascript" src="../../lib/layui/layui.js"></script> <script type="text/javascript" src="../../lib/layui/layui.js"></script>
<script type="text/javascript"> <script type="text/javascript">
layui.use(['jquery', 'form'], function () { layui.use(['jquery', 'form', 'okUtils'], function () {
var $ = layui.jquery, var $ = layui.jquery,
form = layui.form, form = layui.form,
okUtils = layui.okUtils,
parentBody = parent.document.body;// 父级dom parentBody = parent.document.body;// 父级dom
var config = okUtils.local("okConfig") || okConfig || {};
var ok_arrow = ['ok-arrow2'];
let ok_arrow = ['ok-arrow2']; $("input[name=theme]").each(function (i,item) {
form.on('radio(arrow)', function(data){ //更改导航箭头样式 if(config.theme == $(item).val()){
if(data.value){ $(item).prop("checked", true);
}else {
$(item).prop("checked", false);
}
});
$("input[name=arrow]").each(function (i,item) {
if(config.menuArrow == $(item).val()){
$(item).prop("checked", true);
}else {
$(item).prop("checked", false);
}
});
$("input[name=refresh]").prop("checked", config.tabRefresh);
$("input[name=memory]").prop("checked", config.tabMemory);
form.render();
form.on('radio(arrow)', function (data) { //更改导航箭头样式
if (data.value) {
$(parentBody).find("#navBar").addClass(data.value); $(parentBody).find("#navBar").addClass(data.value);
} else { } else {
for(var i = 0; i < ok_arrow.length; i++){ for (var i = 0; i < ok_arrow.length; i++) {
$(parentBody).find("#navBar").removeClass(ok_arrow[i]); $(parentBody).find("#navBar").removeClass(ok_arrow[i]);
} }
} }
config.menuArrow = data.value;
okUtils.local("okConfig", config);
}); });
form.on('switch(refresh)', function (data) { //切换刷新
config.tabRefresh = data.elem.checked;
okUtils.local("okConfig", config);
});
form.on('switch(memory)', function (data) { //tab记忆
config.tabMemory = data.elem.checked;
okUtils.local("okConfig", config);
});
form.on('radio(theme)', function (data) {
$(parentBody).find(".layui-layout-admin").removeClass("orange_theme blue_theme");
$(parentBody).find(".layui-layout-admin").addClass(data.value);
config.theme = data.value;
okUtils.local("okConfig", config);
});
}); });
</script> </script>