config.js
var okConfig = {
theme: "blue_theme", //主题色orange_theme|blue_theme
menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
tabMemory: true, //是否开启tab刷新记忆
tabRefresh: false, //是否开启切换刷新
};
master
zhizous
parent
71a453d54d
commit
197ba8478f
|
|
@ -9,6 +9,7 @@
|
|||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="css/okadmin.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>
|
||||
</head>
|
||||
<body class="layui-layout-body">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
|
|||
var layer = layui.layer;
|
||||
var okLayer = layui.okLayer;
|
||||
var okHoliday = layui.okHoliday;
|
||||
|
||||
var okTab = layui.okTab({
|
||||
// 菜单请求路径
|
||||
url: "data/navs.json",
|
||||
|
|
@ -18,8 +17,18 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
|
|||
return data;
|
||||
}
|
||||
});
|
||||
var config = okUtils.local("okConfig") || okConfig || {};
|
||||
objOkTab = okTab;
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧导航渲染完成之后的操作
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
var okConfig = {
|
||||
theme: "blue_theme", //主题色orange_theme|blue_theme
|
||||
menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
|
||||
tabMemory: true, //是否开启tab刷新记忆
|
||||
tabRefresh: false, //是否开启切换刷新
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,163 +1,209 @@
|
|||
"use strict";
|
||||
layui.define(["layer"], function (exprots) {
|
||||
var $ = layui.jquery;
|
||||
var okUtils = {
|
||||
/**
|
||||
* 是否前后端分离
|
||||
*/
|
||||
isFrontendBackendSeparate: true,
|
||||
/**
|
||||
* 服务器地址
|
||||
*/
|
||||
baseUrl: "http://rap2api.taobao.org/app/mock/233041",
|
||||
/**
|
||||
* 获取body的总宽度
|
||||
*/
|
||||
getBodyWidth: function () {
|
||||
return document.body.scrollWidth;
|
||||
},
|
||||
/**
|
||||
* 主要用于对ECharts视图自动适应宽度
|
||||
*/
|
||||
echartsResize: function (element) {
|
||||
var element = element || [];
|
||||
window.addEventListener("resize", function () {
|
||||
var isResize = localStorage.getItem("isResize");
|
||||
// if (isResize == "false") {
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
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});
|
||||
var $ = layui.jquery;
|
||||
var okUtils = {
|
||||
/**
|
||||
* 是否前后端分离
|
||||
*/
|
||||
isFrontendBackendSeparate: true,
|
||||
/**
|
||||
* 服务器地址
|
||||
*/
|
||||
baseUrl: "http://rap2api.taobao.org/app/mock/233041",
|
||||
/**
|
||||
* 获取body的总宽度
|
||||
*/
|
||||
getBodyWidth: function () {
|
||||
return document.body.scrollWidth;
|
||||
},
|
||||
/**
|
||||
* 主要用于对ECharts视图自动适应宽度
|
||||
*/
|
||||
echartsResize: function (element) {
|
||||
var element = element || [];
|
||||
window.addEventListener("resize", function () {
|
||||
var isResize = localStorage.getItem("isResize");
|
||||
// if (isResize == "false") {
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
element[i].resize();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 在表格页面操作成功后弹窗提示
|
||||
* @param content
|
||||
*/
|
||||
tableSuccessMsg: function (content) {
|
||||
layer.msg(content, {icon: 1, time: 1000}, function () {
|
||||
// 刷新当前页table数据
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取父窗体的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;
|
||||
// }
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 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});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 判断一个数字是否包括在某个范围
|
||||
* @param num
|
||||
* @param begin
|
||||
* @param end
|
||||
*/
|
||||
isNumberWith: function (num, begin, end) {
|
||||
if (this.isNumber(num)) {
|
||||
if (num >= begin && num <= end) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
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);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
exprots("okUtils", okUtils);
|
||||
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
|
||||
*/
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,18 +3,23 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
.ok-setting .layui-form-item{
|
||||
.ok-setting .layui-form-item {
|
||||
margin: 0;
|
||||
}
|
||||
.ok-setting .set-label{
|
||||
|
||||
.ok-setting .set-label {
|
||||
padding-left: 0;
|
||||
width: auto;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 16px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.ok-setting .layui-input-block{
|
||||
|
||||
.ok-setting .layui-input-block {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,11 +27,33 @@
|
|||
<body>
|
||||
<div class="layui-card-body ok-setting">
|
||||
<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">
|
||||
<label class="layui-form-label set-label">导航箭头：</label>
|
||||
<div class="layui-input-block">
|
||||
<input lay-filter="arrow" type="radio" name="sex" value="" title="默认" checked>
|
||||
<input lay-filter="arrow" type="radio" name="sex" value="ok-arrow2" title="箭头" >
|
||||
<input lay-filter="arrow" type="radio" name="arrow" value="" 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>
|
||||
</form>
|
||||
|
|
@ -35,20 +62,60 @@
|
|||
</html>
|
||||
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['jquery', 'form'], function () {
|
||||
layui.use(['jquery', 'form', 'okUtils'], function () {
|
||||
var $ = layui.jquery,
|
||||
form = layui.form,
|
||||
okUtils = layui.okUtils,
|
||||
parentBody = parent.document.body;// 父级dom
|
||||
var config = okUtils.local("okConfig") || okConfig || {};
|
||||
var ok_arrow = ['ok-arrow2'];
|
||||
|
||||
let ok_arrow = ['ok-arrow2'];
|
||||
form.on('radio(arrow)', function(data){ //更改导航箭头样式
|
||||
if(data.value){
|
||||
$("input[name=theme]").each(function (i,item) {
|
||||
if(config.theme == $(item).val()){
|
||||
$(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);
|
||||
} 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]);
|
||||
}
|
||||
}
|
||||
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>
|
||||
Loading…
Reference in New Issue