<!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">
|
|
<link rel="stylesheet" href="../../static/layui/lay/modules/formDesigner/cron.css" />
|
<link rel="stylesheet" href="../../static/layui/lay/modules/formDesigner/labelGeneration.css" />
|
<link rel="stylesheet" href="../../static/layui/lay/modules/formDesigner/formDesigner.css" />
|
<!--[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="planTypeTable" lay-filter="planTypeTable"></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/>-->
|
<select name="name" lay-verType="tips" lay-verify="required" required>
|
<option value="">请选择类型</option>
|
<option value="立体库（货架）">立体库（货架）</option>
|
<option value="立体库（集成）">立体库（集成）</option>
|
<option value="四向穿梭库/两向穿梭库">四向穿梭库/两向穿梭库</option>
|
<option value="阁楼货架/钢平台">阁楼货架/钢平台</option>
|
<option value="周转容器">周转容器</option>
|
<option value="平库">平库</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">区分: </label>
|
<div class="layui-input-block">
|
<select name="type" lay-verType="tips" lay-verify="required" required>
|
<option value="">请选择区分</option>
|
<option value="1">货架</option>
|
<option value="2">集成</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">类型标识</label>
|
<div class="layui-input-block">
|
<input class="layui-input" name="flag" placeholder="请输入标识"/>
|
</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" lay-event="form"><i class="layui-icon"></i>表单</a>
|
<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>
|
|
<!-- 表单弹窗 -->
|
<script type="text/html" id="formEditDialog">
|
<div style="height: 90%; width: 100%;" id="formDesigner"></div>
|
<hr>
|
<div class="layui-form-item text-right" style="padding-right: 25px">
|
<button class="layui-btn" lay-filter="forEditSubmit" lay-submit>保存</button>
|
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
|
</div>
|
</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 type="text/javascript" src="../../static/layui/lay/modules/formDesigner/Sortable/Sortable.js"></script>
|
<script type="text/javascript" src="../../static/layui/lay/modules/formDesigner/htmlformat.js"></script>
|
<script type="text/javascript" src="../../static/layui/lay/modules/formDesigner/jsformat.js"></script>
|
<script>
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).use(['table','laydate', 'form', 'util', 'admin', 'formDesigner'], function(){
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var admin = layui.admin;
|
var form = layui.form;
|
var table = layui.table;
|
var laydate = layui.laydate;
|
var formDesigner = layui.formDesigner;
|
|
// 添加
|
$('#eDialogAddBtn').click(function () {
|
showEditModel();
|
});
|
|
// 渲染表格
|
var insTb = table.render({
|
elem: '#planTypeTable',
|
headers: {token: localStorage.getItem('token')},
|
url: baseUrl+'/planType/page/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: 'type$', 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', // sm lg
|
// skin: 'nob'
|
/**
|
* line （行边框风格）
|
row （列边框风格）
|
nob （无边框风格）
|
*/
|
});
|
|
// 工具条点击事件
|
table.on('tool(planTypeTable)', function (obj) {
|
var data = obj.data;
|
if (obj.event === 'form') {
|
admin.open({
|
type: 1,
|
area: ['95%', '90%'],
|
offset: 'auto',
|
title: '表单设计',
|
content: $('#formEditDialog').html(),
|
success: function (layero, dIndex) {
|
let formData = [];
|
if (data.data) {
|
formData = eval(data.data);
|
}
|
let formDesIdx = formDesigner.render({
|
data: formData,
|
elem:'#formDesigner'
|
});
|
form.on('submit(forEditSubmit)', function () {
|
let loadIndex = layer.load(2);
|
$.ajax({
|
url: baseUrl+"/planType/update/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {
|
id: data.id,
|
data: JSON.stringify(formDesIdx.getData()),
|
html: formDesIdx.getHtmlData()
|
},
|
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;
|
})
|
}
|
})
|
} else 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: '600px',
|
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+"/planType/"+(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) {
|
layer.confirm('确定删除数据吗？', {
|
skin: 'layui-layer-admin',
|
shade: .1
|
}, function (i) {
|
layer.close(i);
|
var loadIndex = layer.load(2);
|
$.ajax({
|
url: baseUrl+"/planType/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>
|
