17 changed files with 367 additions and 493 deletions
@ -1,247 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|
||||
<head> |
|
||||
<meta charset="utf-8"> |
|
||||
<title>分步表单</title> |
|
||||
<meta name="renderer" content="webkit"> |
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
||||
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|
||||
<link rel="stylesheet" href="/static/js/lay-module/step-lay/step.css" media="all"> |
|
||||
</head> |
|
||||
<body> |
|
||||
<div class="layuimini-container"> |
|
||||
<div class="layuimini-main"> |
|
||||
<div class="layui-fluid"> |
|
||||
<div class="layui-card"> |
|
||||
<div class="layui-card-body" style="padding-top: 40px;"> |
|
||||
<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin-top: 5em;"> |
|
||||
<div carousel-item> |
|
||||
<div> |
|
||||
<form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;"> |
|
||||
<div class="layui-form-item"> |
|
||||
<h2>验证码将发送至<span id="oldEmail" th:text="${email}">1789131794@qq.com</span></h2> |
|
||||
<h3 style="color: grey;margin-top: 1em">如果长时间未收到验证码，请检查垃圾箱</h3> |
|
||||
</div> |
|
||||
<div class="layui-form-item" style="margin-top: 5em"> |
|
||||
<label class="layui-form-label required" style="display: inline">邮箱验证码:</label> |
|
||||
<input type="text" id="oldCode" class="layui-input" name="oldCode" |
|
||||
placeholder="请输入验证码" |
|
||||
lay-verify="required" |
|
||||
maxlength="4" style="width:160px;display: inline"> |
|
||||
<button id="sendCodeBtn1" class="layui-btn layui-btn-normal layui-btn-sm" |
|
||||
style="display: inline;margin-left: 10px">发送验证码 |
|
||||
</button> |
|
||||
</div> |
|
||||
<div class="layui-form-item"> |
|
||||
<div class="layui-input-block"> |
|
||||
<button class="layui-btn" lay-submit lay-filter="formStep1"> |
|
||||
 下一步  |
|
||||
</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</form> |
|
||||
</div> |
|
||||
<div> |
|
||||
<form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;"> |
|
||||
<div class="layui-form-item"> |
|
||||
<label class="layui-form-label required">邮箱</label> |
|
||||
<div class="layui-input-block"> |
|
||||
<input type="newEmail" name="email" lay-verify="email" placeholder="请输入邮箱" |
|
||||
value="" |
|
||||
class="layui-input"> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="layui-form-item" style="margin-top: 5em"> |
|
||||
<label class="layui-form-label required" style="display: inline">邮箱验证码:</label> |
|
||||
<input type="text" id="newCode" class="layui-input" name="newCode" |
|
||||
placeholder="请输入验证码" |
|
||||
lay-verify="required" |
|
||||
maxlength="4" style="width:160px;display: inline"> |
|
||||
<button id="sendCodeBtn2" class="layui-btn layui-btn-normal layui-btn-sm" |
|
||||
lay-submit style="display: inline;margin-left: 10px">发送验证码 |
|
||||
</button> |
|
||||
</div> |
|
||||
<div class="layui-form-item"> |
|
||||
<div class="layui-input-block"> |
|
||||
<button class="layui-btn" lay-submit lay-filter="formStep2"> |
|
||||
 下一步  |
|
||||
</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</form> |
|
||||
<div> |
|
||||
<div style="text-align: center;margin-top: 90px;"> |
|
||||
<i class="layui-icon layui-circle" |
|
||||
style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;"></i> |
|
||||
<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;"> |
|
||||
邮箱修改成功 |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<hr> |
|
||||
<div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;"> |
|
||||
<h3>说明</h3><br> |
|
||||
验证码五分钟后会失效，请及时输入。 |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|
||||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|
||||
<script> |
|
||||
layui.use(['form', 'layer', 'step'], function () { |
|
||||
var $ = layui.$, |
|
||||
form = layui.form, |
|
||||
layer = layui.layer, |
|
||||
step = layui.step; |
|
||||
|
|
||||
|
|
||||
step.render({ |
|
||||
elem: '#stepForm', |
|
||||
filter: 'stepForm', |
|
||||
width: '100%', //设置容器宽度 |
|
||||
stepWidth: '750px', |
|
||||
height: '100%', |
|
||||
stepItems: [{ |
|
||||
title: '验证旧邮箱' |
|
||||
}, { |
|
||||
title: '验证新邮箱' |
|
||||
}, { |
|
||||
title: '修改成功' |
|
||||
}] |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
$('#sendCodeBtn1').click(function () { |
|
||||
let email = $('#oldEmail').text(); |
|
||||
$.ajax({ |
|
||||
url: "/sendCode", |
|
||||
data:'{"email":'+JSON.stringify(email)+'}', |
|
||||
type: "post", |
|
||||
dataType: 'JSON', |
|
||||
contentType: "application/json;charset=utf-8", |
|
||||
success: function (data) { |
|
||||
if (data.status !== 200) { |
|
||||
layer.msg(data.statusInfo.message);//失败的表情 |
|
||||
return; |
|
||||
} else { |
|
||||
layer.msg("验证码发送成功，请前往邮箱查看", { |
|
||||
icon: 6,//成功的表情 |
|
||||
time: 1000 //1秒关闭（如果不配置，默认是3秒） |
|
||||
}, function () { |
|
||||
|
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
// $.ajax({ |
|
||||
// url: '/sendCode', |
|
||||
// type: 'POST', |
|
||||
// dataType:'json', |
|
||||
// contentType: "application/json;charset=utf-8", |
|
||||
// data: '{"email":'+JSON.stringify(email)+'}', |
|
||||
// beforeSend: function () { |
|
||||
// this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
// }, |
|
||||
// success: function (res) { |
|
||||
// if (res.status >= 300) { |
|
||||
// layer.msg(data.statusInfo.message);//失败的表情 |
|
||||
// } else { |
|
||||
// layer.msg("验证码发送成功，请前往邮箱查看", { |
|
||||
// icon: 6,//成功的表情 |
|
||||
// time: 1000 //1秒关闭（如果不配置，默认是3秒） |
|
||||
// }); |
|
||||
// } |
|
||||
// } |
|
||||
// }); |
|
||||
}) |
|
||||
form.on('submit(formStep1)', function (data) { |
|
||||
data = data.field; |
|
||||
$.ajax({ |
|
||||
type: 'put', |
|
||||
dataType: 'json', |
|
||||
contentType: "application/json;charset=utf-8", |
|
||||
url: '/checkOldEmail', |
|
||||
data: JSON.stringify(data), |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (res) { |
|
||||
if (res.status >= 300) { |
|
||||
layer.msg(data.statusInfo.message);//失败的表情 |
|
||||
} else { |
|
||||
layer.msg("验证成功", { |
|
||||
icon: 6,//成功的表情 |
|
||||
time: 1000 //1秒关闭（如果不配置，默认是3秒） |
|
||||
}); |
|
||||
step.next('#stepForm'); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
return false; |
|
||||
}); |
|
||||
|
|
||||
$('#sendCodeBtn2').click(function () { |
|
||||
let data = {}; |
|
||||
data.email = $('#oldEmail').text(); |
|
||||
$.ajax({ |
|
||||
type: 'POST', |
|
||||
dataType: 'json', |
|
||||
contentType: "application/json;charset=utf-8", |
|
||||
url: '/sendCode', |
|
||||
data: JSON.stringify(data), |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (res) { |
|
||||
if (res.status >= 300) { |
|
||||
layer.msg(data.statusInfo.message);//失败的表情 |
|
||||
} else { |
|
||||
layer.msg("验证码发送成功，请前往邮箱查看", { |
|
||||
icon: 6,//成功的表情 |
|
||||
time: 1000 //1秒关闭（如果不配置，默认是3秒） |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}) |
|
||||
|
|
||||
form.on('submit(formStep2)', function (data) { |
|
||||
data = data.field; |
|
||||
data.oldCode = $("#oldCode"); |
|
||||
$.ajax({ |
|
||||
type: 'put', |
|
||||
dataType: 'json', |
|
||||
contentType: "application/json;charset=utf-8", |
|
||||
url: '/updateEmail', |
|
||||
data: JSON.stringify(data), |
|
||||
beforeSend: function () { |
|
||||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|
||||
}, |
|
||||
success: function (res) { |
|
||||
if (res.status >= 300) { |
|
||||
layer.msg(data.statusInfo.message);//失败的表情 |
|
||||
} else { |
|
||||
layer.msg("验证成功", { |
|
||||
icon: 6,//成功的表情 |
|
||||
time: 1000 //1秒关闭（如果不配置，默认是3秒） |
|
||||
}); |
|
||||
step.next('#stepForm'); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
return false; |
|
||||
}); |
|
||||
}) |
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
@ -0,0 +1,204 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" xmlns:checked="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>layui</title> |
||||
|
<meta content="webkit" name="renderer"> |
||||
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> |
||||
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> |
||||
|
<link href="/static/lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet"> |
||||
|
<link href="/static/css/public.css" media="all" rel="stylesheet"> |
||||
|
|
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="layuimini-container"> |
||||
|
<input id="userId" style="display: none" th:value="${userId}"> |
||||
|
<script type="text/html" id="toolbarDemo"> |
||||
|
<div class="layui-btn-container"> |
||||
|
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add_role">添加仓库</button> |
||||
|
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除仓库</button> |
||||
|
</div> |
||||
|
</script> |
||||
|
<table id="demo" class="layui-hide" lay-filter="currentTableFilter"></table> |
||||
|
|
||||
|
<script type="text/html" id="currentTableBar"> |
||||
|
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">详情</a> |
||||
|
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a> |
||||
|
</script> |
||||
|
|
||||
|
</div> |
||||
|
<script charset="utf-8" src="/static/lib/layui-v2.6.3/layui.js"></script> |
||||
|
<script> |
||||
|
layui.use('table', function () { |
||||
|
var table = layui.table; |
||||
|
var $ = layui.$; |
||||
|
let userId = $("#userId").val(); |
||||
|
//第一个实例 |
||||
|
table.render({ |
||||
|
elem: '#demo' |
||||
|
, url: 'findUserRole?userId=' + userId+'&classes=3', //数据接口 |
||||
|
parseData: function (res) { //res 即为原始返回的数据 |
||||
|
return { |
||||
|
"status": res.status, //解析接口状态 |
||||
|
"message": res.statusInfo.message, //解析提示文本 |
||||
|
"count": res.count, //解析数据长度 |
||||
|
"data": res.data //解析数据列表 |
||||
|
}; |
||||
|
}, |
||||
|
height: 'full-265',//固定高度-即固定表头固定第一行首行 |
||||
|
request: { |
||||
|
pageName: 'page', //页码的参数名称，默认：page |
||||
|
limitName: 'pagesize' //每页数据量的参数名，默认：limit |
||||
|
}, |
||||
|
response: { |
||||
|
statusName: 'status' //规定数据状态的字段名称，默认：code |
||||
|
, statusCode: 200 //规定成功的状态码，默认：0 |
||||
|
, msgName: 'message' //规定状态信息的字段名称，默认：msg |
||||
|
, countName: 'count' //规定数据总数的字段名称，默认：count |
||||
|
, dataName: 'data' //规定数据列表的字段名称，默认：data |
||||
|
}, toolbar: '#toolbarDemo' |
||||
|
, cols: [ |
||||
|
[ //表头 |
||||
|
{type: "checkbox", width: 50}, |
||||
|
{field: 'id', width: 80, title: 'ID', sort: true}, |
||||
|
{field: 'depositoryName', width: 200, title: '仓库名称', sort: true}, |
||||
|
{field: 'number', width: 100, title: '工号', sort: true}, |
||||
|
{field: 'name', width: 100, title: '姓名', sort: true}, |
||||
|
{field: 'mobilephone', width: 200, title: '内线电话', sort: true}, |
||||
|
{field: 'companyname', width: 200, title: '公司名称', sort: true}, |
||||
|
{field: 'maindeparmentname', width: 200, title: '主部门', sort: true}, |
||||
|
{field: 'sunmaindeparmentname', width: 200, title: '岗位', sort: true}, |
||||
|
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} |
||||
|
] |
||||
|
], |
||||
|
limits: [10, 15, 20, 25, 50, 100], |
||||
|
limit: 10, |
||||
|
page: true, |
||||
|
skin: 'line', |
||||
|
done:function () { |
||||
|
$("[data-field='id']").css('display','none'); |
||||
|
} |
||||
|
}); |
||||
|
//监听表格复选框选择 |
||||
|
table.on('checkbox(currentTableFilter)', function (obj) { |
||||
|
console.log(obj) |
||||
|
}); |
||||
|
table.on('tool(currentTableFilter)', function (obj) { |
||||
|
let data = obj.data; |
||||
|
if(obj.event === 'detail'){ |
||||
|
var index = layer.open({ |
||||
|
title: '修改权限', |
||||
|
type: 2, |
||||
|
shade: 0.2, |
||||
|
maxmin:true, |
||||
|
shadeClose: true, |
||||
|
area: ['100%', '100%'], |
||||
|
content: '/user_role_edit?id='+data.id, |
||||
|
end:function () { |
||||
|
location.reload() |
||||
|
} |
||||
|
}); |
||||
|
$(window).on("resize", function () { |
||||
|
layer.full(index); |
||||
|
}); |
||||
|
return false; |
||||
|
} |
||||
|
else if(obj.event === 'delete'){ |
||||
|
var req = {}; |
||||
|
req.id = data.id; |
||||
|
layer.confirm('真的删除么', {icon: 2, title: '提示'}, function (index) { |
||||
|
$.ajax({ |
||||
|
url: '/sys/userRole_del', |
||||
|
dataType: 'json', |
||||
|
type: 'POST', |
||||
|
contentType: "application/json;charset=utf-8", |
||||
|
data: JSON.stringify(req), |
||||
|
beforeSend: function () { |
||||
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
||||
|
}, |
||||
|
success: function (data) { |
||||
|
layer.close(this.layerIndex); |
||||
|
if (data.status >= 300) { |
||||
|
layer.msg(data.statusInfo.message);//失败的表情 |
||||
|
return; |
||||
|
} else { |
||||
|
obj.del(); |
||||
|
layer.msg("删除成功", { |
||||
|
icon: 6,//成功的表情 |
||||
|
time: 500 //1秒关闭（如果不配置，默认是3秒） |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
table.on('toolbar(currentTableFilter)', function (obj) { |
||||
|
if (obj.event === 'add_role') { |
||||
|
var index = layer.open({ |
||||
|
title: '添加权限', |
||||
|
type: 2, |
||||
|
shade: 0.2, |
||||
|
maxmin:true, |
||||
|
shadeClose: true, |
||||
|
area: ['100%', '100%'], |
||||
|
content: '/user_add?userId='+userId+'&classes=3', |
||||
|
end:function () { |
||||
|
location.reload() |
||||
|
} |
||||
|
}); |
||||
|
$(window).on("resize", function () { |
||||
|
layer.full(index); |
||||
|
}); |
||||
|
return false; |
||||
|
} |
||||
|
else if (obj.event === 'delete') { // 监听删除操作 |
||||
|
var checkStatus = table.checkStatus('demo') |
||||
|
, data = checkStatus.data; |
||||
|
var req = {}; |
||||
|
req.ids = []; |
||||
|
for (i = 0, len = data.length; i < len; i++) { |
||||
|
req.ids[i] = data[i].id; |
||||
|
} |
||||
|
if(req.ids.length > 0) { |
||||
|
layer.confirm('真的删除么', {icon: 2, title: '提示'}, function (index) { |
||||
|
$.ajax({ |
||||
|
url: '/sys/userRole_del', |
||||
|
dataType: 'json', |
||||
|
type: 'POST', |
||||
|
contentType: "application/json;charset=utf-8", |
||||
|
data: JSON.stringify(req), |
||||
|
beforeSend: function () { |
||||
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
||||
|
}, |
||||
|
success: function (data) { |
||||
|
layer.close(this.layerIndex); |
||||
|
if (data.status >= 300) { |
||||
|
layer.msg(data.statusInfo.message);//失败的表情 |
||||
|
return; |
||||
|
} else { |
||||
|
layer.msg("删除成功", { |
||||
|
icon: 6,//成功的表情 |
||||
|
time: 500 //1秒关闭（如果不配置，默认是3秒） |
||||
|
}); |
||||
|
//执行搜索重载 |
||||
|
table.reload('demo', { |
||||
|
url: '/findUserRole?userId=' + userId, |
||||
|
page: { |
||||
|
curr: 1 |
||||
|
} |
||||
|
}, 'data'); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
}else{ |
||||
|
layer.msg("未选中记录，请确认！"); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue