需求
FORM表单新增页面,提交成功后,自动跳转到list页面
//带参数跳转
top.layui.index.openTabsPage('{:Url("admin/AutoComparedBill/showList")}?page=1&limit=10&id=' + data.id, '自动化对账');
新增页面
就是一个简单的表单提交
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-header">这是一个FORM表单新增页面</div>
<div class="layui-card-body" style="padding: 15px;">
<form class="layui-form" action="" lay-filter="component-form-group">
<!--模板基础信息 面板-->
<div class="layui-card">
<div class="layui-card-header layui-card-header-child">基础信息</div>
<div class="layui-card-body">
<div class="layui-col-sm12 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label input-label-inline">调账单编号:</label>
<div class="layui-input-block">
<input value="(系统自动生成)" autocomplete="off" class="layui-input" type="text" disabled>
</div>
</div>
</div>
<div class="layui-col-sm12 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label input-label-inline">调账单名称:</label>
<div class="layui-input-block">
<input name="billAdjustName" autocomplete="off" class="layui-input" type="text" placeholder="请输入" lay-verify="required">
</div>
</div>
</div>
<div class="layui-col-sm12 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label input-label-inline">调账类别:</label>
<div class="layui-input-block">
<select name="billAdjustType" lay-verify="required">
<option value="">请选择</option>
{volist name="bill_type" id="vo"}
<option value="{$vo.id}">{$vo.name}</option>
{/volist}
</select>
</div>
</div>
</div>
<div class="layui-col-sm12 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label input-label-inline">调账台账:</label>
<div class="layui-input-block">
<select name="billTotalId" lay-filter="billTotalId" id="billTotalId" lay-verify="required" lay-search>
<option value="">请选择</option>
{volist name="bill_list" id="bill_list"}
<option value="{$bill_list.id}" >{$bill_list.billCode}({$bill_list.billName})</option>
{/volist}
</select>
</div>
</div>
</div>
<div class="layui-col-sm12 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label input-label-inline">运营商:</label>
<div class="layui-input-block">
<select name="operatorName" id="operatorName" disabled>
<option value="">请选择</option>
{volist name="operator_list" id="operator_list"}
<option value="{$operator_list.operatorName}">{$operator_list.operatorName}</option>
{/volist}
</select>
</div>
</div>
</div>
<div class="layui-col-sm12 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label input-label-inline">所属地:</label>
<div class="layui-input-block">
<select name="operatorCity" id="operatorCity" disabled>
<option value="">请选择</option>
{volist name="operator_area_list" id="operator_area_list"}
<option value="{$operator_area_list.operatorCity}" >{$operator_area_list.operatorCity}</option>
{/volist}
</select>
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<!--模板内容 面板-->
<div class="layui-card">
<div class="layui-card-header layui-card-header-child">佣金调整</div>
<div class="layui-card-body">
<div class="layui-col-sm12 layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label input-label-inline" style="width: 124px">本月佣金总收入(元)</label>
<div class="layui-input-block" style="margin-left: 130px;">
<input name="adjustCommission" autocomplete="off" class="layui-input" type="text" lay-verify="required">
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="layui-form-item layui-layout-admin">
<div class="layui-input-block">
<div class="layui-footer" style="left: 0;">
<button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">启动调账</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<style>
.layui-card>.layui-card-header-child{
background-color:#f2f2f2;
font-weight: bold;
}
.layui-form>.layui-card{
border: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.input-label-inline{
padding: 9px 0;
width: 98px;
}
.required-verify-label>span{
color: #ff0000;
}
.field-flex>div{
padding:0 150px
}
</style>
<script src="__STATIC__/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: '__STATIC__/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'laydate'], function () {
var $ = layui.$,
admin = layui.admin,
element = layui.element,
layer = layui.layer,
laydate = layui.laydate,
form = layui.form;
form.render(null, 'component-form-group');
form.on('select(billTotalId)', function(data){
//data.value 得到被选中的值
$.post('{:Url("getoperatorInfo")}'
,{ id: data.value }
,function(data){
$("#operatorCity").val(data.operatorCity);
$("#operatorName").val(data.operatorName);
form.render("select");
});
});
/* 监听提交 */
form.on('submit(component-form-demo1)', function (data) {
layer.close();
layer.load(0,{shade: [0.7, '#393D49']}, {shadeClose: true});
$.ajax({
'url':'{:Url("addBill")}',
'data':data.field,
'success':function(data){
if (data.status === 0) {
parent.layer.msg('成功');
//提交成功后,自动跳转页面
top.layui.index.openTabsPage('{:Url("admin/DebugBillMeau/showList")}', '调账单');
location.reload()
} else {
parent.layer.msg('失败');
layer.closeAll();
}
},
'dataType':'json',//返回的格式
'type':'post',//发送的格式
});
return false;
});
});
</script>
解析:
//格式
top.layui.index.openTabsPage(url, title);
实例:
top.layui.index.openTabsPage('{:Url("admin/DebugBillMeau/showList")}', '调账单');
效果: