<!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <title>智能粮库管理系统－用户管理</title> <link rel="stylesheet" th:href="@{../../static/plugins/layui/css/layui.css}"> </head> <body style="padding: 10px;"> <table class="layui-hide" id="tableData" lay-filter="tableData"></table> <script type="text/html" id="toolbar"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-normal" lay-event="addUser">新增用户</button> <button class="layui-btn layui-btn-warm" lay-event="editUser">用户调整</button> <button class="layui-btn layui-btn-danger" lay-event="resetPwd">重置密码</button> <button class="layui-btn " lay-event="flushRole">刷新全局权限</button> <button class="layui-btn " lay-event="flushData">刷新数据</button> </div> </script> <script type="text/html" id="renderMale"> {{# if(d.male == true){ }} <span>男</span> {{# } else { }} <span>女</span> {{# } }} </script> <script type="text/html" id="renderEnabled"> {{# if(d.enabled == true){ }} <span>在职</span> {{# } else { }} <span>离职</span> {{# } }} </script> <script th:src="@{../../static/plugins/layui/layui.js}"></script> <script th:src="@{../../static/js/jquery.min.js}"></script> <!-- 弹出用户信息框 --> <div class="layui-tab-content" id="dialogAddUser" style="display: none;"> <form class="layui-form" lay-filter="form-addUser" id="form-addUser"> <div class="layui-form-item"> <label class="layui-form-label">登陆帐号</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="required|name" lay-reqtext="必填项，不可为空" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" id="password" lay-verify="required|pass" lay-reqtext="必填项，不可为空" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">中文名称</label> <div class="layui-input-block"> <input type="text" name="cname" lay-verify="required" lay-reqtext="必填项，不可为空" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="male" value="true" title="男" checked=""> <input type="radio" name="male" value="false" title="女"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">手机号码</label> <div class="layui-input-block"> <input type="text" name="mobile" lay-verify="phone" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否在职</label> <div class="layui-input-block"> <input type="radio" name="enabled" value="true" title="在职" checked=""> <input type="radio" name="enabled" value="false" title="离职"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">所在部门</label> <div class="layui-input-block"> <select name="deptId" lay-filter="select_deptId"> <option value=""></option> <option th:each="dept,deptSet:${depts}" th:value="${dept.id}" th:text="${dept.name}"></option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">所属角色</label> <div class="layui-input-block"> <select name="roleId" lay-filter="select_roleId"> <option value=""></option> <option th:each="role,roleSet:${roles}" th:value="${role.id}" th:text="${role.name}"></option> </select> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn layui-btn-normal" type="submit" lay-submit="" lay-filter="submit-addUser"> 提交信息 </button> </div> </div> </form> </div> <script> layui.use(['layer', 'table', 'form'], function () { var table = layui.table; var form = layui.form; var layer = layui.layer; var index = 0; //检验规则 form.verify({ name: function(value, item){ //value：表单的值、item：表单的DOM对象 var regName = new RegExp('(?=.*[a-zA-Z0-9]).{5,12}'); if(!regName.test(value)){ return '用户名需为5到11位的字母或数字'; } }, pass: function(value, item){ //value：表单的值、item：表单的DOM对象 var regPass = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{5,20}'); if(!regPass.test(value)){ return '密码必须包含5到20位的字母、数字、特称字符'; } } }); table.render({ elem: '#tableData', url: '../../basic/sys/query-user-list', toolbar: '#toolbar', title: '系统用户表', cols: [[ {type: 'radio', title: '选择'}, {field: 'username', title: '登陆帐号', sort: true, align: 'center'} , {field: 'cname', title: '中文名称', sort: true, align: 'center'} , {field: 'male', title: '性别', align: 'center', templet: "#renderMale"} , {field: 'mobile', title: '手机号', align: 'center'} , {field: 'enabled', title: '是否在职', align: 'center', templet: "#renderEnabled"} , {field: 'deptName', title: '所在部门', align: 'center'} , {field: 'roleName', title: '所属角色', align: 'center'} ]], page: false }); var type = "ADD"; //头工具栏事件 table.on('toolbar(tableData)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'addUser': type = "ADD"; $('#form-addUser')[0].reset(); $('#password').attr("disabled", false); form.render(); index = layer.open({ type: 1, title: '新增用户信息', area: ['450px', '600px'], shade: 0, content: $('#dialogAddUser'), btn: false, closeBtn: 1 }); break; case 'editUser': type = "EDIT"; var data = checkStatus.data[0]; if (!data) { layer.alert("请先选择数据"); return false; } //赋值 form.val('form-addUser', data); $('#password').attr("disabled", true); index = layer.open({ type: 1, title: '修改用户信息', area: ['450px', '600px'], shade: 0, content: $('#dialogAddUser'), btn: false, closeBtn: 1 }); break; case 'flushRole': flushRole(); break; case 'resetPwd': type = "SET_PWD"; var data = checkStatus.data[0]; if (!data) { layer.alert("请先选择数据"); return false; } layer.confirm('确定要执行密码重置么?', function (index) { resetPwd(data); layer.close(index); }); break; case 'flushData': flushData(); break; } }); form.on('submit(submit-addUser)', function (data) { var url = "../../basic/sys/add-user"; if ("EDIT" == type) { url = "../../basic/sys/update-user"; } submitData(url, data.field); return false; }); function submitData(url, data) { $.ajax({ type: "POST", url: url, dataType: "json", contentType: "application/json;charset=UTF-8", data: JSON.stringify(data), success: function (result) { layer.close(index); if ("0000" != result.code) { layer.alert("执行失败：" + result.msg); } else { flushData(); layer.alert("执行成功"); } }, error: function () { layer.alert("后台执行出现异常"); } }); } function flushRole() { $.ajax({ type: "POST", url: "../../basic/sys/flush-role", dataType: "json", contentType: "application/json;charset=UTF-8", success: function (result) { if ("0000" != result.code) { layer.closeAll(); layer.alert("执行失败：" + result.msg); } else { layer.alert("执行成功"); } }, error: function () { layer.alert("后台执行出现异常"); } }); } function resetPwd(data) { $.ajax({ type: "POST", url: "../../basic/sys/reset-pwd", dataType: "json", contentType: "application/json;charset=UTF-8", data: JSON.stringify(data), success: function (result) { if ("0000" != result.code) { layer.alert("执行失败：" + result.msg); } else { layer.alert("执行成功：" + result.msg); } }, error: function () { layer.alert("后台执行出现异常"); } }); } function flushData() { table.reload('tableData', { url: '../../basic/sys/query-user-list', where: {} }); } }); </script> </body> </html>
|
