2023-06-09 17:06:36 +08:00
|
|
|
|
<%--
|
|
|
|
|
|
Created by IntelliJ IDEA.
|
|
|
|
|
|
User: LDQ
|
|
|
|
|
|
Date: 2023/6/9
|
|
|
|
|
|
Time: 16:57
|
|
|
|
|
|
To change this template use File | Settings | File Templates.
|
|
|
|
|
|
--%>
|
|
|
|
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<title>Title</title>
|
2023-06-10 00:07:58 +08:00
|
|
|
|
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
|
|
|
|
<!-- 引入 layui.css -->
|
|
|
|
|
|
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 引入 layui.js -->
|
|
|
|
|
|
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
|
2023-06-09 17:06:36 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2023-06-10 00:07:58 +08:00
|
|
|
|
|
|
|
|
|
|
<script type="text/html" id="toolbarDemo">
|
|
|
|
|
|
<div class="layui-btn-container">
|
|
|
|
|
|
<button class="layui-btn layui-btn-sm" lay-event="addAdmin">添加管理员</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table class="layui-hide" id="ID-table-demo-data"></table>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/html" id="ID-table-demo-templet-switch">
|
|
|
|
|
|
<!-- 这里的 checked 的状态值判断仅作为演示 -->
|
|
|
|
|
|
<input type="checkbox" id="checkbox" name="status" value="{{= d.adminId }}" title="开启|关闭" lay-skin="switch" lay-filter="status" {{= d.isValid == '1' ? "checked" : "" }}>
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/html" id="barDemo">
|
|
|
|
|
|
<div class="layui-clear-space">
|
|
|
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
|
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="more">
|
|
|
|
|
|
更多
|
|
|
|
|
|
<i class="layui-icon layui-icon-down"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
function getDate(){
|
|
|
|
|
|
axios({
|
|
|
|
|
|
// 请求方式
|
|
|
|
|
|
method: 'get',
|
|
|
|
|
|
// 请求的地址
|
|
|
|
|
|
url: 'http://localhost:8080${pageContext.request.contextPath}/adminList',
|
|
|
|
|
|
// URL 中的查询参数
|
|
|
|
|
|
params: {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(function (result) {
|
|
|
|
|
|
layui.use('table', function(){
|
|
|
|
|
|
var table = layui.table;
|
|
|
|
|
|
var form = layui.form;
|
|
|
|
|
|
var dropdown = layui.dropdown;
|
|
|
|
|
|
// 已知数据渲染
|
|
|
|
|
|
var inst = table.render({
|
|
|
|
|
|
elem: '#ID-table-demo-data'
|
|
|
|
|
|
,toolbar: '#toolbarDemo'
|
|
|
|
|
|
,cols: [[ //标题栏
|
|
|
|
|
|
{field: 'adminId', title: 'ID', width: 80, sort: true}
|
|
|
|
|
|
,{field: 'adminUserName', title: '管理员', width: 180}
|
|
|
|
|
|
,{field: 'adminPassword', title: '密码', width: 200}
|
|
|
|
|
|
,{field: 'isValid', title: '是否有效', width: 150,templet: function(d){
|
|
|
|
|
|
if(d.isValid === 1){
|
|
|
|
|
|
return '<span style="color: green" title="有效">●</span>';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return '<span style="color: red" title="无效">●</span>';
|
|
|
|
|
|
}
|
|
|
|
|
|
}},
|
|
|
|
|
|
{title: '状态', width:100, templet: '#ID-table-demo-templet-switch'},
|
|
|
|
|
|
{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
|
|
|
|
|
|
|
|
|
|
|
|
]],done:function (){
|
|
|
|
|
|
form.on('switch(status)', function (obj) {
|
|
|
|
|
|
var id = obj.value;
|
|
|
|
|
|
if(this.checked){
|
|
|
|
|
|
OpenAdmin(id);
|
|
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
CloseAdmin(id);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
table.on('toolbar(ID-table-demo-data)', function(obj){
|
|
|
|
|
|
var id = obj.config.id;
|
|
|
|
|
|
var checkStatus = table.checkStatus(id);
|
|
|
|
|
|
var othis = lay(this);
|
|
|
|
|
|
switch(obj.event){
|
|
|
|
|
|
case 'addAdmin':
|
|
|
|
|
|
layer.open({
|
|
|
|
|
|
title: '添加管理员',
|
|
|
|
|
|
type: 1,
|
|
|
|
|
|
area: ['50%','80%'],
|
|
|
|
|
|
content: `<div id="warp">
|
|
|
|
|
|
<div style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
|
<label class="layui-form-label">管理员</label>
|
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
|
<input type="text" name="admin" id="adminUserName" 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" id="adminPassword" lay-verify="required" class="layui-input" >
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item" pane>
|
|
|
|
|
|
<label class="layui-form-label">是否有效</label>
|
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
|
<input type="text" id="isValid" name="open" lay-filter="required" class="layui-input" >
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
|
<button class="layui-btn" onclick="addAdmin()">确认</button>
|
|
|
|
|
|
<!-- <button type="close" class="layui-btn layui-btn-primary" onclick="close()">关闭</button>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>`,
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
break;
|
|
|
|
|
|
// case 'getData':
|
|
|
|
|
|
// var getData = table.getData(id);
|
|
|
|
|
|
// console.log(getData);
|
|
|
|
|
|
// layer.alert(layui.util.escape(JSON.stringify(getData)));
|
|
|
|
|
|
// break;
|
|
|
|
|
|
// case 'LAYTABLE_TIPS':
|
|
|
|
|
|
// layer.alert('自定义工具栏图标按钮');
|
|
|
|
|
|
// break;
|
|
|
|
|
|
};
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 触发单元格工具事件
|
|
|
|
|
|
table.on('tool(ID-table-demo-data)', function(obj){ // 双击 toolDouble
|
|
|
|
|
|
var data = obj.data; // 获得当前行数据
|
|
|
|
|
|
// console.log(obj)
|
|
|
|
|
|
if(obj.event === 'edit'){
|
|
|
|
|
|
layer.open({
|
|
|
|
|
|
title: '编辑 - id:'+ data.adminId,
|
|
|
|
|
|
type: 1,
|
|
|
|
|
|
area: ['50%','80%'],
|
|
|
|
|
|
content: `<div id="warp">
|
|
|
|
|
|
<div style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
|
<label class="layui-form-label">ID</label>
|
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
|
<input type="text" name="id" id="ID" 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="admin" id="adminUserName" 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" id="adminPassword" lay-verify="required" class="layui-input" >
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item" pane>
|
|
|
|
|
|
<label class="layui-form-label">是否有效</label>
|
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
|
<input type="text" id="isValid" name="open" lay-filter="required" class="layui-input" >
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
|
<button class="layui-btn" onclick="upAdateAdmin()">确认</button>
|
|
|
|
|
|
<!-- <button type="close" class="layui-btn layui-btn-primary" onclick="close()">关闭</button>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>`,
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
} else if(obj.event === 'more'){
|
|
|
|
|
|
// 更多 - 下拉菜单
|
|
|
|
|
|
dropdown.render({
|
|
|
|
|
|
elem: this, // 触发事件的 DOM 对象
|
|
|
|
|
|
show: true, // 外部事件触发即显示
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
title: '查看',
|
|
|
|
|
|
id: 'detail'
|
|
|
|
|
|
},{
|
|
|
|
|
|
title: '删除',
|
|
|
|
|
|
id: 'del'
|
|
|
|
|
|
}],
|
|
|
|
|
|
click: function(menudata){
|
|
|
|
|
|
if(menudata.id === 'detail'){
|
|
|
|
|
|
layer.msg('ID:'+ data.adminId
|
|
|
|
|
|
+'\n管理员:'+data.adminUserName
|
|
|
|
|
|
+"\n密 码:"+data.adminPassword
|
|
|
|
|
|
+"\n是否有效:"+data.isValid);
|
|
|
|
|
|
} else if(menudata.id === 'del'){
|
|
|
|
|
|
layer.confirm('真的删除行 [id: '+ data.adminId +'] 么', function(){
|
|
|
|
|
|
obj.del(); // 删除对应行（tr）的DOM结构
|
|
|
|
|
|
// layer.close(index);
|
|
|
|
|
|
deleteAdmin(data.adminId);
|
|
|
|
|
|
// 向服务端发送删除指令
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
align: 'right', // 右对齐弹出
|
|
|
|
|
|
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
,data: result.data
|
|
|
|
|
|
//,skin: 'line' // 表格风格
|
|
|
|
|
|
//,even: true
|
|
|
|
|
|
,page: true // 是否显示分页
|
|
|
|
|
|
,limits: [5, 10, 15]
|
|
|
|
|
|
,limit: 5 // 每页默认显示的数量
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
getDate();
|
|
|
|
|
|
|
|
|
|
|
|
function OpenAdmin(id){
|
|
|
|
|
|
axios({
|
|
|
|
|
|
// 请求方式
|
|
|
|
|
|
method: 'get',
|
|
|
|
|
|
// 请求的地址
|
|
|
|
|
|
url: 'http://localhost:8080${pageContext.request.contextPath}/openAdmin',
|
|
|
|
|
|
// URL 中的查询参数
|
|
|
|
|
|
params: {
|
|
|
|
|
|
id:id
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(function (result) {
|
|
|
|
|
|
layer.msg('开启成功'), {
|
|
|
|
|
|
offset: '6px'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function CloseAdmin(id){
|
|
|
|
|
|
axios({
|
|
|
|
|
|
// 请求方式
|
|
|
|
|
|
method: 'get',
|
|
|
|
|
|
// 请求的地址
|
|
|
|
|
|
url: 'http://localhost:8080${pageContext.request.contextPath}/closeAdmin',
|
|
|
|
|
|
// URL 中的查询参数
|
|
|
|
|
|
params: {
|
|
|
|
|
|
id:id
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(function (result) {
|
|
|
|
|
|
layer.msg('关闭成功'), {
|
|
|
|
|
|
offset: '6px'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function upAdateAdmin(){
|
|
|
|
|
|
var id=document.getElementById('ID').value;
|
|
|
|
|
|
var adminUserName=document.getElementById('adminUserName').value;
|
|
|
|
|
|
var adminPassword=document.getElementById('adminPassword').value;
|
|
|
|
|
|
var isValid=document.getElementById('isValid').value;
|
|
|
|
|
|
axios({
|
|
|
|
|
|
// 请求方式
|
|
|
|
|
|
method: 'post',
|
|
|
|
|
|
// 请求的地址
|
|
|
|
|
|
url: 'http://localhost:8080${pageContext.request.contextPath}/updateAdmin',
|
|
|
|
|
|
// URL 中的查询参数
|
|
|
|
|
|
params: {
|
|
|
|
|
|
id:id,
|
|
|
|
|
|
adminUserName:adminUserName,
|
|
|
|
|
|
adminPassword:adminPassword,
|
|
|
|
|
|
isValid:isValid
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(function (result) {
|
|
|
|
|
|
layer.msg('修改成功!'), {
|
|
|
|
|
|
offset: '6px'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function deleteAdmin(id){
|
|
|
|
|
|
axios({
|
|
|
|
|
|
// 请求方式
|
|
|
|
|
|
method: 'get',
|
|
|
|
|
|
// 请求的地址
|
|
|
|
|
|
url: 'http://localhost:8080${pageContext.request.contextPath}/deleteAdmin',
|
|
|
|
|
|
// URL 中的查询参数
|
|
|
|
|
|
params: {
|
|
|
|
|
|
id:id,
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(function (result) {
|
|
|
|
|
|
layer.msg('删除成功!'), {
|
|
|
|
|
|
offset: '6px'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
function addAdmin()
|
|
|
|
|
|
{
|
|
|
|
|
|
var adminUserName=document.getElementById('adminUserName').value;
|
|
|
|
|
|
var adminPassword=document.getElementById('adminPassword').value;
|
|
|
|
|
|
var isValid=document.getElementById('isValid').value;
|
|
|
|
|
|
axios({
|
|
|
|
|
|
// 请求方式
|
|
|
|
|
|
method: 'post',
|
|
|
|
|
|
// 请求的地址
|
|
|
|
|
|
url: 'http://localhost:8080${pageContext.request.contextPath}/addAdmin',
|
|
|
|
|
|
// URL 中的查询参数
|
|
|
|
|
|
params: {
|
|
|
|
|
|
adminUserName:adminUserName,
|
|
|
|
|
|
adminPassword:adminPassword,
|
|
|
|
|
|
isValid:isValid
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then(function (result) {
|
|
|
|
|
|
layer.msg('添加成功!'), {
|
|
|
|
|
|
offset: '6px'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
2023-06-09 17:06:36 +08:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
