btxtgxq-system-city/src/main/resources/static/route/usersignin/list.html

521 lines
23 KiB
HTML
Executable File

<!doctype html>
<html lang="en">
<head>
<base href="/servicecity/">
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<div class="test-table-reload-btn layui-form" style="margin-bottom: 5px;">
<div class="layui-inline" id="areaSelectTemplateBox" style="width: 150px;"></div>
<script id="areaSelectTemplate" type="text/html">
<select id="areaId" name="areaId" lay-filter="changeArea">
<option value="">选择地区</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.dictId}}">{{item.dictName}}</option>
{{# } }}
</select>
</script>
<div class="layui-inline" id="deptSelectTemplateBox" style="width: 150px;"></div>
<script id="deptSelectTemplate" type="text/html">
<select id="departmentId" name="departmentId">
<option value="">选择部门</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.id}}">{{item.name}}</option>
{{# } }}
</select>
</script>
<div class="layui-inline" id="communitySelectTemplateBox" style="width: 150px;"></div>
<script id="communitySelectTemplate" type="text/html">
<select id="communityId" name="communityId">
<option value="">选择网格</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.communityId}}">{{item.communityName}}</option>
{{# } }}
</select>
</script>
<div class="layui-inline" style="width: 150px;">
<select id="userType" name="userType">
<option value="">人员类别</option>
<option value="1">一级网格长</option>
<option value="2">二级网格长</option>
<option value="3">三级网格长</option>
<option value="4">专管员</option>
</select>
</div>
<div class="layui-inline" style="width: 150px;">
<select id="isLate" name="isLate">
<option value="">是否迟到</option>
<option value="1"></option>
<option value="0"></option>
</select>
</div>
<div class="layui-inline">
<input type="text" id="keywords" class="layui-input search-item" placeholder="姓名" style="height: 38px;" autocomplete="off">
</div>
</div>
<div class="test-table-reload-btn layui-form" style="margin-bottom: 5px;">
<div class="layui-inline">
<input type="text" id="startTime" class="layui-input search-item"
readonly="readonly" placeholder="开始时间" style="height: 38px;width:150px;cursor: pointer" autocomplete="off">
</div>
<div class="layui-inline">
<input type="text" id="endTime" class="layui-input search-item"
readonly="readonly" placeholder="结束时间" style="height: 38px;width:150px;cursor: pointer" autocomplete="off">
</div>
<div class="layui-inline" style="width: 150px;">
<select id="amPm" name="amPm">
<option value="">选择上下午</option>
<option value="AM">上午</option>
<option value="PM">下午</option>
</select>
</div>
<button type="button" id="search" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-search"></i> 搜索
</button>
<button type="button" id="exportTable" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-share"></i> 导出Excel
</button>
<button type="button" id="deleteTableData" class="layui-btn layui-btn-danger layui-btn-sm">
<i class="fa fa-lg fa-trash"></i> 批量删除
</button>
</div>
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
</div>
</div>
</div>
</div>
</div>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'table', 'laytpl', 'form','laydate'], function() {
var $ = layui.$;
var $win = $(window);
var laytpl = layui.laytpl;
var table = layui.table;
var admin = layui.admin;
var form = layui.form;
var laydate = layui.laydate;
var tableUrl = 'api/usersignin/listpageusersignindetail';
var dataLoading = false;
// 初始化表格
function initTable() {
dataLoading = true;
table.render({
elem: '#dataTable',
id: 'dataTable',
url: top.restAjax.path(getParamsUrl(tableUrl), []),
width: admin.screen() > 1 ? '100%' : '',
height: $win.height() - 140,
limit: 20,
limits: [20, 40, 60, 80, 100, 200],
request: {
pageName: 'page',
limitName: 'rows'
},
cols: [[
{field:'rowNum', width:60, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
{type:'checkbox', fixed: 'left'},
{field: 'userName', width: 100, title: '人员名称', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'userPhone', width: 120, title: '联系电话', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'userAvatar', width: 60, title: '头像', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '<img style="width: 30px;height: 30px;" src="assets/images/profile-photo.jpg"/>';
} else {
return '<img style="width: 30px;height: 30px;" src="route/file/downloadfile/false/'+ rowData +'"/>';
}
}
},
{field: 'gmtCreate', width: 180, title: '签到时间', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'amPm', width: 80, title: '上下午', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData === '') {
return '-';
}
if(rowData == 'AM'){
return '上午'
}
if(rowData == 'PM'){
return '下午'
}
}
},
{field: 'isLate', width: 60, title: '迟到', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
if(rowData == '1'){
return '<span style="color: red">是</span>'
}
if(rowData == '0'){
return '否'
}
}
},
{field: 'isOutside', width: 80, title: '范围外', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
if(rowData == '1'){
return '<span style="color: red">是</span>'
}
if(rowData == '0'){
return '否'
}
}
},
{field: 'signinLocation', width: 100, title: '签到位置', align:'center',
templet: function(row) {
var rowData = row[this.field];
return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="showLocation">查看位置</button>'
}
},
{field: 'communityBossLevel', width: 100, title: '网格等级', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'areaName', width: 120, title: '地区', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'communityNames', width: 120, title: '社区', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'departmentNames', width: 120, title: '部门', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'positionNames', width: 120, title: '职位', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{width: 130, align:'center',
templet: function(row) {
var dom = '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editData">编辑</button>'
dom += '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteData">删除</button>'
return dom;
}
},
]],
page: true,
parseData: function(data) {
return {
'code': 0,
'msg': '',
'count': data.total,
'data': data.rows
};
},
done: function(){
dataLoading = false;
}
});
}
setTimeout(function(){
initTable();
},500);
// 重载表格
function reloadTable(currentPage) {
dataLoading = true;
table.reload('dataTable', {
url: top.restAjax.path(tableUrl, []),
where: {
keywords: encodeURI($('#keywords').val()),
startTime: $('#startTime').val(),
amPm: $('#amPm').val(),
areaId: $('#areaId').val(),
departmentId: $('#departmentId').val(),
communityId: $('#communityId').val(),
userType: $('#userType').val(),
isLate: $('#isLate').val()
},
page: {
curr: currentPage
},
height: $win.height() - 140,
done:function(){
dataLoading = false;
}
});
}
//初始化地区
function initArea(){
top.restAjax.get('api/dict/listdict/9d179f05-3ea0-48f7-853c-d3b7124b791c', {}, null, function(code, data) {
laytpl(document.getElementById('areaSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaSelectTemplateBox').innerHTML = html;
});
form.render('select');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
initArea();
//初始化社区
function initCommunity(areaId) {
top.restAjax.get('api/community/listcommunity?areaId=' + areaId, {}, null, function(code, data) {
laytpl(document.getElementById('communitySelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('communitySelectTemplateBox').innerHTML = html;
});
form.render('select');
$('#communitySelectTemplateBox').show();
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
//初始化部门
function initDept(){
top.restAjax.get('api/department/listdepartments', {}, null, function(code, data) {
laytpl(document.getElementById('deptSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('deptSelectTemplateBox').innerHTML = html;
});
form.render('select');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
initDept();
//初始化时间
function initDateTime(){
laydate.render({
elem: '#startTime'
,value: new Date()
});
laydate.render({
elem: '#endTime'
,value: new Date()
});
}
initDateTime();
function getParamsUrl(url) {
var keywords = encodeURI($('#keywords').val());
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
var amPm = $('#amPm').val();
var areaId = $('#areaId').val();
var departmentId = $('#departmentId').val();
var communityId = $('#communityId').val();
var userType = $('#userType').val();
var isLate = $('#isLate').val();
var params = '?t='+ new Date().getTime();
if('' != keywords) {
params += '&keywords='+ encodeURI(keywords);
}
if('' != startTime) {
params += '&startTime='+ startTime;
}
if('' != endTime) {
params += '&endTime='+ endTime;
}
if('' != amPm) {
params += '&amPm='+ amPm;
}
if('' != areaId && 'undefined' != typeof(areaId)) {
params += '&areaId='+ areaId;
}
if('' != departmentId && 'undefined' != typeof(departmentId)) {
params += '&departmentId='+ departmentId;
}
if('' != communityId && 'undefined' != typeof(communityId)) {
params += '&communityId='+ communityId;
}
if('' != userType) {
params += '&userType='+ userType;
}
if('' != isLate) {
params += '&isLate='+ isLate;
}
return url + params;
}
function remove(ids){
top.dialog.msg(top.dataMessage.delete, {
time: 0,
btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
shade: 0.3,
yes: function (index) {
top.dialog.close(index);
var layIndex;
top.restAjax.delete(top.restAjax.path('api/usersignin/removeusersignin/{ids}', [ids]), {}, null, function (code, data) {
// success
top.dialog.msg(top.dataMessage.deleteSuccess, {time: 1000}, function () {
reloadTable();
});
}, function (code, data) {
// error
top.dialog.msg(data.msg);
}, function () {
// before
layIndex = top.dialog.msg(top.dataMessage.deleting, {icon: 16, time: 0, shade: 0.3});
}, function () {
// complete
top.dialog.close(layIndex);
});
}
});
}
$(document).on('click', '#search', function() {
if(dataLoading){
layer.msg('数据加载中,请稍等...');
return;
}
reloadTable(1);
});
$(document).on('click', '#exportTable', function() {
top.dialog.confirm('确定导出数据?', function(index) {
top.dialog.close(index);
window.open(getParamsUrl(top.restAjax.path('api/usersignin/listusersignindetailtoexcel', [])), '_blank');
});
});
$(document).on('click', '#deleteTableData', function() {
var checkStatus = table.checkStatus('dataTable');
if(checkStatus.data.length == 0){
layer.msg('请先勾选要删除的数据')
return;
}
var ids = '';
for (var i = 0, item;item = checkStatus.data[i++];){
if(i > 1) {
ids += '_';
}
ids += item.userSignoutId;
}
remove(ids);
});
form.on('select(changeArea)',function(data){
if(data.value == ''){
$('#communitySelectTemplateBox').hide();
$('#communityId').val('');
$('#deptSelectTemplateBox').show();
} else {
initCommunity(data.value);
$('#departmentId').val('');
$('#deptSelectTemplateBox').hide();
}
initDept();
});
table.on('tool(dataTable)', function(obj) {
if(obj.event === 'showLocation'){
layer.open({
type: 2,
title: '查看位置',
closeBtn: 1,
area: ['600px', '550px'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/userlocation/map_location.html?userId={userId}&lng={lng}&lat={lat}',
[obj.data.creator, obj.data.signinLongitude, obj.data.signinLatitude]),
end: function() {
}
});
}
if(obj.event === 'deleteData'){
remove(obj.data.userSigninId);
}
if(obj.event === 'editData'){
layer.open({
type: 2,
content: top.restAjax.path('route/usersignin/update.html?userSigninId={id}', [obj.data.userSigninId]),
title: '修改',
closeBtn: 1,
shadeClose: true,
area: ['800px', '600px'],
end: function() {
//reloadTable();
}
});
}
});
$('#communitySelectTemplateBox').hide();
});
</script>
</body>
</html>