<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<title>弹窗实例</title>
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../static/css/admin.css?v=318" media="all">
|
<!--[if lt IE 9]>
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
<![endif]-->
|
<style>
|
/** 查看详情弹窗样式 */
|
.paper-info-group {
|
padding: 15px 25px;
|
}
|
|
.paper-info-group h3 {
|
font-weight: bold;
|
color: #000000;
|
padding-bottom: 8px;
|
}
|
|
.paper-info-group p {
|
color: #666;
|
padding-bottom: 12px;
|
font-size: 16px;
|
}
|
|
.paper-info-group .paper-info-group-imgs {
|
padding-top: 5px;
|
}
|
|
.paper-info-group .paper-info-group-imgs img {
|
margin-right: 15px;
|
margin-bottom: 15px;
|
cursor: zoom-in;
|
}
|
|
.paper-info-group .paper-info-group-imgs img:last-child {
|
margin-right: 0;
|
}
|
|
/* 日期组件不显示秒 */
|
.laydate-time-list li:last-child {
|
display: none;
|
}
|
|
.laydate-time-list li {
|
width: 50% !important;
|
}
|
|
.laydate-time-list ol li {
|
padding-left: 55px !important;
|
width: 100% !important;
|
}
|
|
</style>
|
</head>
|
<body>
|
|
<!-- 正文开始 -->
|
<div class="layui-fluid">
|
<div class="layui-card">
|
<div class="layui-card-body">
|
<button id="eDialogAddBtn" class="layui-btn">添加项目</button>
|
</div>
|
</div>
|
<div class="layui-card">
|
<div class="layui-card-header">项目 - 数据列表</div>
|
<div class="layui-card-body">
|
<table id="hostTable" lay-filter="hostTable"></table>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/html" id="editDialog">
|
<form id="detail" lay-filter="detail" class="layui-form model-form layui-row">
|
<input name="id" type="hidden"/>
|
<div class="layui-col-md12">
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">项目名称</label>
|
<div class="layui-input-block">
|
<input class="layui-input" name="name" placeholder="请输入项目名称" lay-verType="tips" lay-verify="required" required/>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">备注</label>
|
<div class="layui-input-block">
|
<input class="layui-input" name="memo" placeholder="请输入备注"/>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item text-right">
|
<button class="layui-btn" lay-filter="editSubmit" lay-submit>保存</button>
|
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
|
</div>
|
</form>
|
</script>
|
|
<!-- 表格操作列 -->
|
<script type="text/html" id="eDialogTbBar">
|
<a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit"><i class="layui-icon"></i>修改</a>
|
<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon"></i>删除</a>
|
</script>
|
|
|
<!-- js部分 -->
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
|
<script>
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).use(['table','laydate', 'form', 'util', 'admin'], function(){
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var admin = layui.admin;
|
var form = layui.form;
|
var table = layui.table;
|
var laydate = layui.laydate;
|
|
// 添加
|
$('#eDialogAddBtn').click(function () {
|
showEditModel();
|
});
|
|
// 渲染表格
|
var insTb = table.render({
|
elem: '#hostTable',
|
headers: {token: localStorage.getItem('token')},
|
url: baseUrl+'/host/list/auth',
|
page: true,
|
limit: 16,
|
limits: [16, 30, 50, 100, 200, 500],
|
cellMinWidth: 50,
|
cols: [[
|
{type: 'numbers', title: '#'}
|
// ,{field: 'id', title: 'ID', sort: true,align: 'center', fixed: 'left', width: 80}
|
,{field: 'name', align: 'center',title: '项目名称'}
|
// ,{field: 'flag', align: 'center',title: '标识'}
|
// ,{field: 'createTime$', align: 'center',title: '添加时间'}
|
// ,{field: 'status$', align: 'center',title: '状态'}
|
// ,{field: 'createTime$', align: 'center',title: '添加时间'}
|
// ,{field: 'createBy$', align: 'center',title: '添加人员'}
|
,{field: 'updateTime$', align: 'center',title: '修改时间'}
|
,{field: 'updateBy$', align: 'center',title: '修改人员'}
|
,{field: 'memo', align: 'center',title: '备注'}
|
,{align: 'center', toolbar: '#eDialogTbBar', title: '操作', minWidth: 80}
|
]],
|
request: {
|
pageName: 'curr',
|
pageSize: 'limit'
|
},
|
parseData: function (res) {
|
return {
|
'code': res.code,
|
'msg': res.msg,
|
'count': res.data.total,
|
'data': res.data.records
|
}
|
},
|
response: {
|
statusCode: 200
|
},
|
size: 'lg'
|
});
|
|
// 工具条点击事件
|
table.on('tool(hostTable)', function (obj) {
|
var data = obj.data;
|
if (obj.event === 'delete') {
|
var ids = [data.id];
|
doDel({ids: ids});
|
} else if (obj.event === 'edit') {
|
showEditModel(data);
|
}
|
});
|
|
/* 显示表单弹窗 */
|
function showEditModel(mData) {
|
admin.open({
|
type: 1,
|
title: (mData ? '修改' : '添加') + '项目',
|
area: '500px',
|
content: $('#editDialog').html(),
|
success: function (layero, dIndex) {
|
// 回显表单数据
|
form.val('detail', mData);
|
// 表单提交事件
|
form.on('submit(editSubmit)', function (data) {
|
var loadIndex = layer.load(2);
|
$.ajax({
|
url: baseUrl+"/host/"+(mData?'update':'add')+"/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: data.field,
|
method: 'POST',
|
success: function (res) {
|
layer.close(loadIndex);
|
if (res.code === 200){
|
layer.close(dIndex);
|
layer.msg(res.msg, {icon: 1});
|
$(".layui-laypage-btn")[0].click();
|
} else if (res.code === 403){
|
top.location.href = baseUrl+"/";
|
}else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
return false;
|
})
|
}
|
});
|
}
|
|
function doDel(obj) {
|
console.log(obj)
|
layer.confirm('确定删除数据吗？', {
|
skin: 'layui-layer-admin',
|
shade: .1
|
}, function (i) {
|
layer.close(i);
|
var loadIndex = layer.load(2);
|
$.ajax({
|
url: baseUrl+"/host/delete/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {ids: obj.ids},
|
method: 'POST',
|
success: function (res) {
|
layer.close(loadIndex);
|
if (res.code === 200){
|
layer.msg(res.msg, {icon: 1});
|
$(".layui-laypage-btn")[0].click();
|
} else if (res.code === 403){
|
top.location.href = baseUrl+"/";
|
}else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
|
});
|
}
|
|
})
|
</script>
|
</body>
|
</html>
|
