add:okUtils、okLayer

lib/layui/lay/okmodules/okLayer.js

@@ -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);
+});

lib/layui/lay/okmodules/okUtils.js

@@ -1,31 +1,129 @@
-layui.define(["jquery"], function (exprots) {
+"use strict";
+layui.define(["layer"], function(exprots) {
 	var $ = layui.jquery;
 	var okUtils = {
-      getBodyWidth: function () {
+		// 是否前后端分离
-         return document.body.scrollWidth;//body的总宽度
+		isFrontendBackendSeparate: false,
+		// 服务器地址
+        baseUrl: "http://localhost:8080",
+		/**
+		 * 获取body的总宽度
+		 */
+		getBodyWidth: function() {
+			return document.body.scrollWidth;
 		},
-      echartsResize: function (elemnt) {
+		/**
-         /*
 		 * 主要用于对echart视图自动适应宽度
-         * eg:
+		 */
-         * var mapTree = echarts.init($("#mapOne")[0], "mytheme");
+		echartsResize: function(elemnt) {
-         * var mapTree2 = echarts.init($("#mapOne")[0], "mytheme");
-         * resize(mapTree,mapTree2);
-         * */
-         /*console.log(arguments[0]);
-         console.log(elemnt);*/
 			elemnt = elemnt || [];
-         
+			window.addEventListener("resize", function() {
-         window.addEventListener("resize", function () {
 				var isResize = localStorage.getItem("isResize");
-            if(isResize != 'false'){
+				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();
+                });
+            }
+        },
+		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);
 });
-

lib/layui/layui.js

@@ -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",

pages/member/user-add.html

@@ -105,30 +105,30 @@
 <!--js逻辑-->
 <script src="../../lib/layui/layui.js"></script>
 <script>
-    layui.use(['element', 'form', 'jquery', 'laydate'], function () {
+    layui.use(["element", "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({
+        laydate.render({elem: "#birthday", type: "datetime"});
-            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) {
+        form.on("submit(add)", function (data) {
-            console.log(data.field);
+			okUtils.ajax(okUtils.mockApi.user.add, "post", data.field).done(function (response) {
-            layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
+			    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>

pages/member/user-edit.html

@@ -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,27 +105,35 @@
 <!--js逻辑-->
 <script src="../../lib/layui/layui.js"></script>
 <script>
-    layui.use(['element', 'form', 'jquery', 'laydate'], function () {
+    var initData;
-        var element = layui.element;
+	function initForm(data) {
-        var table = layui.table;
+		var jsonString = JSON.stringify(data)
-        var form = layui.form;
+		initData = JSON.parse(jsonString);
-        var $ = layui.jquery;
+	}
-        var laydate = layui.laydate;
 
-        laydate.render({
+    layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
-            elem: '#birthday',
+        var form = layui.form;
-            type: "datetime"
+        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) {
+        form.on("submit(edit)", function (data) {
-            console.log(data.field);
+            okUtils.ajax(okUtils.mockApi.user.edit, "put", data.field).done(function (response) {
-            layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
+                console.log(response)
+                okLayer.msg.greenTick("编辑成功", function () {
                     parent.layer.close(parent.layer.getFrameIndex(window.name));
                 });
+            }).fail(function (error) {
+                console.log(error)
+            });
             return false;
         });
     })

pages/member/user.html

@@ -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 () {
+        form.on("submit(search)", function (data) {
-            layer.msg("正在查询，请稍后...");
+            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 () {
+			okLayer.confirm("确定要批量启用吗？", function (index) {
-			    var checkStatus = table.checkStatus('tableId');
+			    // TODO
-			    var rows = checkStatus.data.length;
+			    layer.close(index);
-			    if (rows > 0) {
+			    var idsStr = okUtils.table.batchCheck(table);
-			        var idsStr = "";
+			    if (idsStr) {
-			        for (var i = 0; i < checkStatus.data.length; i++) {
+			        okUtils.ajax(okUtils.mockApi.user.batchNormal, "put", {idsStr: idsStr}).done(function (response) {
-			            idsStr += checkStatus.data[i].id + ',';
+			            console.log(response)
-			        }
+			            okUtils.table.successMsg("批量启用成功");
-			        console.log("选择的id-->" + idsStr);
+			        }).fail(function (error) {
-			        layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
+			            console.log(error)
-			            $(".layui-laypage-btn")[0].click();
-			        });
-			    } else {
-			        layer.msg('未选择有效数据', {
-			            offset: 't',
-			            anim: 6
 			        });
 			    }
 			});
 		}
 
 		function batchDisabled() {
-			layer.confirm("确定要批量停用吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 2}, function () {
+			okLayer.confirm("确定要批量停用吗？", function (index) {
-			    var checkStatus = table.checkStatus('tableId');
+			    layer.close(index);
-			    var rows = checkStatus.data.length;
+			    var idsStr = okUtils.table.batchCheck(table);
-			    if (rows > 0) {
+			    if (idsStr) {
-			        var idsStr = "";
+			        okUtils.ajax(okUtils.mockApi.user.batchStop, "put", {idsStr: idsStr}).done(function (response) {
-			        for (var i = 0; i < checkStatus.data.length; i++) {
+			            console.log(response)
-			            idsStr += checkStatus.data[i].id + ',';
+			            okUtils.table.successMsg("批量停用成功");
-			        }
+			        }).fail(function (error) {
-			        console.log("选择的id-->" + idsStr);
+			            console.log(error)
-			        layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
-			            $(".layui-laypage-btn")[0].click();
-			        });
-			    } else {
-			        layer.msg('未选择有效数据', {
-			            offset: 't',
-			            anim: 6
 			        });
 			    }
 			});
 		}
 		
 		function batchDel() {
-			layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
+			okLayer.confirm("确定要批量删除吗？", function (index) {
-			    var checkStatus = table.checkStatus('tableId');
+			    layer.close(index);
-			    var rows = checkStatus.data.length;
+			    var idsStr = okUtils.table.batchCheck(table);
-			    if (rows > 0) {
+			    if (idsStr) {
-			        var idsStr = "";
+			        okUtils.ajax(okUtils.mockApi.user.batchDel, "delete", {idsStr: idsStr}).done(function (response) {
-			        for (var i = 0; i < checkStatus.data.length; i++) {
+			            console.log(response)
-			            idsStr += checkStatus.data[i].id + ',';
+			            okUtils.table.successMsg("批量删除成功");
-			        }
+			        }).fail(function (error) {
-			        console.log("选择的id-->" + idsStr);
+			            console.log(error)
-			        layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
-			            $(".layui-laypage-btn")[0].click();
-			        });
-			    } else {
-			        layer.msg('未选择有效数据', {
-			            offset: 't',
-			            anim: 6
 			        });
 			    }
 			});
 		}
 
 		function add () {
-			layer.open({
+			okLayer.open("添加用户", "user-add.html", "90%", "90%", null, function () {
-			    title: '添加用户',
+                userTable.reload();
-			    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();
-			    }
-			});
 		}
 
-        function edit () {
+        function edit (data) {
-			layer.open({
+			okLayer.open("编辑用户", "user-edit.html", "90%", "90%", function (layero) {
-			    title: "编辑用户",
+				var iframeWin = window[layero.find("iframe")[0]["name"]];
-			    type: 2,
+				iframeWin.initForm(data);
-			    shade: false,
+			}, function () {
-			    maxmin: true,
+				userTable.reload();
-			    shade: 0.5,
+			})
-			    area: ['90%', '90%'],
-			    content: 'user-edit.html',
-			    zIndex: layer.zIndex,
-			    end: function () {
-			        $(".layui-laypage-btn")[0].click();
-			    }
-			});
 		}
 		
 		function del () {
-			 layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
+			okLayer.confirm("确定要删除吗？", function () {
-			    layer.msg("操作成功！", {icon: 1, time: 1000});
+			    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>