一、遇到的问题:
1、layui.laydate时间控件初始化默认值问题,时间段设置问题
2、boostrapTable查询列表查询参数重写赋值问题,页面第一次加载,参数获取为空
二、解决方式:
HTML页面:
<form class="form-horizontal m layui-form" id="form-notice-edit">
<div class="form-group">
<label class="col-sm-3 control-label">开始时间 :</label>
<div class="col-sm-8">
<input type="text" class="time-input" maxlength="8" id="beginTime" style="width: 63%" name="beginTime"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">结束时间 :</label>
<div class="col-sm-8">
<input type="text" class="time-input" maxlength="8" id="endTime" style="width: 63%" name="endTime" />
</div>
</div>
</form>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
SCRIPT代码:
<script th:inline="javascript">
var detailFlag = [[${@permission.hasPermi('monitor:operlog:detail')}]];
var datas = [[${@dict.getType('sys_oper_type')}]];
var prefix = ctx + "monitor/operlog";
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
}
$(function() {
$("#beginTime").val(new Date().format("yyyy-MM-dd"));
$("#endTime").val(new Date().format("yyyy-MM-dd"));
layui.use('laydate', function () {
var laydate = layui.laydate;
var startDate = laydate.render({
elem: '#beginTime',
theme: 'molv',
max:$("#endTime").val().replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3"),
format: 'yyyy-MM-dd',
value:new Date(),
trigger: 'click',
done: function (value, date) {
// 结束时间大于开始时间
if (value !== '') {
endDate.config.min.year = date.year;
endDate.config.min.month = date.month - 1;
endDate.config.min.date = date.date;
} else {
endDate.config.min.year = '';
endDate.config.min.month = '';
endDate.config.min.date = '';
}
}
});
var endDate = laydate.render({
elem: '#endTime',
theme: 'molv',
min:$("#beginTime").val().replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3"),
max:'2999-12-31',
format: 'yyyy-MM-dd',
value:new Date(),
trigger: 'click',
done: function (value, date) {
// 开始时间小于结束时间
if (value !== '') {
startDate.config.max.year = date.year;
startDate.config.max.month = date.month - 1;
startDate.config.max.date = date.date;
} else {s
startDate.config.max.year = '';
startDate.config.max.month = '';
startDate.config.max.date = '';
}
}
});
});
var options = {
url: prefix + "/list",
cleanUrl: prefix + "/clean",
detailUrl: prefix + "/detail/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
sortName: "operTime",
sortOrder: "desc",
modalName: "操作日志",
queryParams: queryParams,
search: false,
showExport: false,
columns: [{
checkbox: true
},
{
field: 'operId',
title: '日志编号'
},
{
field: 'title',
title: '系统模块'
},
{
field: 'businessType',
title: '操作类型',
align: 'center',
formatter: function(value, row, index) {
return $.table.selectDictLabel(datas, value);
}
},
{
field: 'operName',
title: '操作人员',
sortable: true
},
{
field: 'deptName',
title: '部门名称'
},
{
field: 'operIp',
title: '主机'
},
{
field: 'browser',
title: '浏览器'
},
{
field: 'os',
title: '操作系统'
},
{
field: 'operLocation',
title: '操作地点'
},
{
field: 'status',
title: '操作状态',
align: 'center',
formatter: function(value, row, index) {
if (value == 0) {
return '<span class="badge badge-primary">成功</span>';
} else if (value == 1) {
return '<span class="badge badge-danger">异常</span>';
}
}
},
{
field: 'operTime',
title: '操作时间',
sortable: true
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="#" onclick="$.operate.detail(\'' + row.operId + '\')"><i class="fa fa-search"></i>详细</a>');
return actions.join('');
}
}]
};
$.table.init(options);
});
//得到查询的参数
function queryParams(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
title: $("#title").val(),
operName: $("#operName").val(),
businessType: $("#businessType").val(),
beginTime: $("#beginTime").val(),
endTime: $("#endTime").val(),
flag: 2,
pageNum: params.offset / params.limit + 1,
pageSize: params.limit,
};
return temp;
};
</script>