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