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

add:okUtils、okLayer

master
bobi 2019-08-21 15:12:39 +08:00
parent d3b928f636
commit aa98c0fc57
6 changed files with 340 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
lib/layui/lay/okmodules/okLayer.js Normal file
View File

@ -0,0 +1,120 @@
"use strict";
layui.define(["layer"], function (exports) {
var okLayer = {
/**
* confirm()函数二次封装
* @param content
* @param yesFunction
*/
confirm: function (content, yesFunction) {
var options = {skin: okLayer.skinChoose(), icon: 3, title: "提示", anim: okLayer.animChoose()};
layer.confirm(content, options, yesFunction);
},
/**
* open()函数二次封装,支持在table页面和普通页面打开
* @param title
* @param content
* @param width
* @param height
* @param successFunction
* @param endFunction
*/
open: function (title, content, width, height, successFunction, endFunction) {
layer.open({
title: title,
type: 2,
maxmin: true,
shade: 0.5,
anim: okLayer.animChoose(),
area: [width, height],
content: content,
zIndex: layer.zIndex,
skin: okLayer.skinChoose(),
success: successFunction,
end: endFunction
});
},
/**
* msg()函数二次封装
*/
msg: {
// msg弹窗默认消失时间
time: 1000,
// 绿色勾
greenTick: function (content, callbackFunction) {
var options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 红色叉
redCross: function (content, callbackFunction) {
var options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 黄色问号
yellowQuestion: function (content, callbackFunction) {
var options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 灰色锁
grayLock: function (content, callbackFunction) {
var options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 红色哭脸
redCry: function (content, callbackFunction) {
var options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 绿色笑脸
greenLaugh: function (content, callbackFunction) {
var options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 黄色感叹号
yellowSigh: function (content, callbackFunction) {
var options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
}
},
/**
* 皮肤选择
* @returns {string}
*/
skinChoose: function () {
var storage = window.localStorage;
var skin = storage.getItem("skin");
if (skin == 1) {
// 灰白色
return "";
} else if (skin == 2) {
// 墨绿色
return "layui-layer-molv";
} else if (skin == 3) {
// 蓝色
return "layui-layer-lan";
} else if (!skin || skin == 4) {
// 随机颜色
var skinArray = ["", "layui-layer-molv", "layui-layer-lan"];
return skinArray[Math.floor(Math.random() * skinArray.length)];
}
},
/**
* 动画选择
* @returns {number}
*/
animChoose: function () {
var storage = window.localStorage;
var anim = storage.getItem("anim");
var animArray = ["0", "1", "2", "3", "4", "5", "6"];
if (animArray.indexOf(anim) > -1) {
// 用户选择的动画
return anim;
} else if (!anim || anim == 7) {
// 随机动画
return Math.floor(Math.random() * animArray.length);
}
}
}
exports("okLayer", okLayer);
});

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

@ -1,31 +1,129 @@
layui.define(["jquery"], function (exprots) {
var $ = layui.jquery;
var okUtils = {
getBodyWidth: function () {
return document.body.scrollWidth;//body的总宽度
},
echartsResize: function (elemnt) {
/*
* 主要用于对echart视图自动适应宽度
* eg:
* var mapTree = echarts.init($("#mapOne")[0], "mytheme");
* var mapTree2 = echarts.init($("#mapOne")[0], "mytheme");
* resize(mapTree,mapTree2);
* */
/*console.log(arguments[0]);
console.log(elemnt);*/
elemnt = elemnt || [];
window.addEventListener("resize", function () {
var isResize = localStorage.getItem("isResize");
if(isResize != 'false'){
for (var i = 0; i < elemnt.length; i++) {
elemnt[i].resize();
}
"use strict";
layui.define(["layer"], function(exprots) {
var $ = layui.jquery;
var okUtils = {
// 是否前后端分离
isFrontendBackendSeparate: false,
// 服务器地址
baseUrl: "http://localhost:8080",
/**
* 获取body的总宽度
*/
getBodyWidth: function() {
return document.body.scrollWidth;
},
/**
* 主要用于对echart视图自动适应宽度
*/
echartsResize: function(elemnt) {
elemnt = elemnt || [];
window.addEventListener("resize", function() {
var isResize = localStorage.getItem("isResize");
if (isResize != 'false') {
for (var i = 0; i < elemnt.length; i++) {
elemnt[i].resize();
}
}
});
},
/**
* ajax()函数二次封装
* @param url
* @param type
* @param param
* @returns {*|*|*}
*/
ajax: function (url, type, param) {
var deferred = $.Deferred();
var loadIndex;
$.ajax({
url: okUtils.isFrontendBackendSeparate ? okUtils.baseUrl + url : url,
type: type || "get",
data: param || {},
dataType: "json",
beforeSend: function () {
loadIndex = layer.load(0, {shade: false});
},
success: function (data) {
if (data.status == 1000) {
// 业务正常
deferred.resolve(data.data)
} else {
// 业务异常
layer.msg(data.msg, {icon: 7, time: 2000});
deferred.reject("okUtils.ajax warn: " + data.msg);
}
},
complete: function () {
layer.close(loadIndex);
},
error: function () {
layer.close(loadIndex);
layer.msg("服务器错误", {icon: 2, time: 2000});
deferred.reject("okUtils.ajax error: 服务器错误");
}
});
return deferred.promise();
},
table: {
/**
* 主要用于针对表格批量操作操作之前的检查
* @param table
* @returns {string}
*/
batchCheck: 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
*/
successMsg: function (content) {
layer.msg(content, {icon: 1, time: 1000}, function () {
// 刷新当前页table数据
$(".layui-laypage-btn")[0].click();
});
}
});
}
};
exprots("okUtils", okUtils);
},
mockApi: {
login: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/login",
menu: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/menu/list"
},
user: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/list",
batchNormal: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchNormal",
batchStop: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchStop",
batchDel: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchDel",
add: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/add",
edit: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/edit"
},
role: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/role/list"
},
permission: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/permission/list"
},
article: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/article/list"
},
log: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/log/list"
},
message: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/message/list"
}
}
};
exprots("okUtils", okUtils);
});

1
lib/layui/layui.js
View File

@ -33,6 +33,7 @@ if (!Object.assign) {
"qrcode": "okmodules/qrcode",
"jQqrcode": "okmodules/jQqrcode",
"okAddlink": "okmodules/okAddlink",
"okLayer": "okmodules/okLayer",
};
var modulePath=Object.assign({
layer: "modules/layer",

28
pages/member/user-add.html
View File

@ -105,30 +105,30 @@
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(['element', 'form', 'jquery', 'laydate'], function () {
var element = layui.element;
var table = layui.table;
layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
laydate.render({
elem: '#birthday',
type: "datetime"
});
laydate.render({elem: "#birthday", type: "datetime"});
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
form.on('submit(add)', function (data) {
console.log(data.field);
layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
form.on("submit(add)", function (data) {
okUtils.ajax(okUtils.mockApi.user.add, "post", data.field).done(function (response) {
console.log(response)
okLayer.msg.greenTick("添加成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
});
return false;
});
})
});
</script>
</body>
</html>

38
pages/member/user-edit.html
View File

@ -21,7 +21,7 @@
</a>
</div>
<!--form表单-->
<form class="layui-form ok-form">
<form class="layui-form ok-form" lay-filter="filter">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
@ -105,26 +105,34 @@
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(['element', 'form', 'jquery', 'laydate'], function () {
var element = layui.element;
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate;
var initData;
function initForm(data) {
var jsonString = JSON.stringify(data)
initData = JSON.parse(jsonString);
}
laydate.render({
elem: '#birthday',
type: "datetime"
});
layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
var form = layui.form;
var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
form.val("filter", initData);
laydate.render({elem: "#birthday", type: "datetime"});
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
form.on('submit(edit)', function (data) {
console.log(data.field);
layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
form.on("submit(edit)", function (data) {
okUtils.ajax(okUtils.mockApi.user.edit, "put", data.field).done(function (response) {
console.log(response)
okLayer.msg.greenTick("编辑成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
});
return false;
});

139
pages/member/user.html
View File

@ -37,17 +37,19 @@
<script src="../../lib/layui/layui.js"></script>
<script src="../../lib/nprogress/nprogress.js"></script>
<script>
layui.use(["element", "table", "form", "jquery", "laydate"], function () {
layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var element = layui.element;
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
laydate.render({elem: "#startTime", type: "datetime"});
laydate.render({elem: "#endTime", type: "datetime"});
table.render({
var userTable = table.render({
elem: '#tableId',
url: "../../data/user-list.json",
limit: 10,
@ -72,8 +74,11 @@
}
});
form.on("submit(search)", function () {
layer.msg("正在查询，请稍后...");
form.on("submit(search)", function (data) {
userTable.reload({
where: data.field,
page: {curr: 1}
});
return false;
});
@ -107,109 +112,75 @@
});
function batchEnabled () {
layer.confirm("确定要批量启用吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 1}, function () {
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 + ',';
}
console.log("选择的id-->" + idsStr);
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
$(".layui-laypage-btn")[0].click();
});
} else {
layer.msg('未选择有效数据', {
offset: 't',
anim: 6
okLayer.confirm("确定要批量启用吗？", function (index) {
// TODO
layer.close(index);
var idsStr = okUtils.table.batchCheck(table);
if (idsStr) {
okUtils.ajax(okUtils.mockApi.user.batchNormal, "put", {idsStr: idsStr}).done(function (response) {
console.log(response)
okUtils.table.successMsg("批量启用成功");
}).fail(function (error) {
console.log(error)
});
}
});
}
function batchDisabled() {
layer.confirm("确定要批量停用吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 2}, function () {
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 + ',';
}
console.log("选择的id-->" + idsStr);
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
$(".layui-laypage-btn")[0].click();
});
} else {
layer.msg('未选择有效数据', {
offset: 't',
anim: 6
okLayer.confirm("确定要批量停用吗？", function (index) {
layer.close(index);
var idsStr = okUtils.table.batchCheck(table);
if (idsStr) {
okUtils.ajax(okUtils.mockApi.user.batchStop, "put", {idsStr: idsStr}).done(function (response) {
console.log(response)
okUtils.table.successMsg("批量停用成功");
}).fail(function (error) {
console.log(error)
});
}
});
}
function batchDel() {
layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
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 + ',';
}
console.log("选择的id-->" + idsStr);
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
$(".layui-laypage-btn")[0].click();
});
} else {
layer.msg('未选择有效数据', {
offset: 't',
anim: 6
okLayer.confirm("确定要批量删除吗？", function (index) {
layer.close(index);
var idsStr = okUtils.table.batchCheck(table);
if (idsStr) {
okUtils.ajax(okUtils.mockApi.user.batchDel, "delete", {idsStr: idsStr}).done(function (response) {
console.log(response)
okUtils.table.successMsg("批量删除成功");
}).fail(function (error) {
console.log(error)
});
}
});
}
function add () {
layer.open({
title: '添加用户',
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
anim: 4,
area: ['90%', '90%'],
content: 'user-add.html',
zIndex: layer.zIndex,
// skin: 'layui-layer-molv',
end: function () {
$(".layui-laypage-btn")[0].click();
}
});
okLayer.open("添加用户", "user-add.html", "90%", "90%", null, function () {
userTable.reload();
})
}
function edit () {
layer.open({
title: "编辑用户",
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
area: ['90%', '90%'],
content: 'user-edit.html',
zIndex: layer.zIndex,
end: function () {
$(".layui-laypage-btn")[0].click();
}
});
function edit (data) {
okLayer.open("编辑用户", "user-edit.html", "90%", "90%", function (layero) {
var iframeWin = window[layero.find("iframe")[0]["name"]];
iframeWin.initForm(data);
}, function () {
userTable.reload();
})
}
function del () {
layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
layer.msg("操作成功！", {icon: 1, time: 1000});
});
okLayer.confirm("确定要删除吗？", function () {
okUtils.ajax(okUtils.mockApi.user.batchDel, "delete", {idsStr: id}).done(function (response) {
console.log(response)
okUtils.table.successMsg("删除成功");
}).fail(function (error) {
console.log(error)
});
})
}
})
</script>