wlcb-common-population/src/main/resources/static/route/basepopulationinfo/list-count.html

476 lines
23 KiB
HTML
Raw Normal View History

2023-06-20 14:37:19 +08:00
<!doctype html>
<html lang="en">
<head>
<base href="/populationhouse/">
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=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 layui-col-space5">
<div class="layui-col-md12 layui-col-sm12">
<div class="layui-card" id="left-card-div" style="">
<div class="layui-card-body">
<div style="padding: 10px 0px; border-bottom: 1px solid #DDDDDD;text-align: left">
<!--<button typeof="button" class="layui-btn layui-btn-normal layui-btn-sm">数据图表</button>-->
<button typeof="button" id="backToArea" class="layui-btn layui-btn-sm">返回上级区域</button>
</div>
<div>
<table class="layui-table">
<colgroup>
<col width="180">
<col width="70">
<col width="90">
<col width="70">
<col width="70">
<col width="70">
<col width="70">
<col width="70">
<col width="70">
<col width="70">
<col width="70">
<col width="70">
<col width="70">
</colgroup>
<thead>
<tr>
<th style="text-align: center;">行政区域</th>
<th style="text-align: center;min-width: 70px;">户籍人口</th>
<th style="text-align: center;min-width: 90px;">户籍人口(外出)</th>
<th style="text-align: center;min-width: 70px;">非户籍人口</th>
<th style="text-align: center;min-width: 70px;">境外人口</th>
<th style="text-align: center;min-width: 70px;">留守人员</th>
<th style="text-align: center;min-width: 70px;">刑满释放</th>
<th style="text-align: center;min-width: 70px;">社区矫正</th>
<th style="text-align: center;min-width: 70px;">精神障碍</th>
<th style="text-align: center;min-width: 70px;">吸毒人员</th>
<th style="text-align: center;min-width: 70px;">艾滋病人员</th>
<th style="text-align: center;min-width: 70px;">重点青少年</th>
</tr>
</thead>
<tbody id="areaUserCountBox"></tbody>
<script type="text/html" id="areaUserCountTemplate">
{{# for(var i = 0, item; item = d[i++];) { }}
<tr>
<td style="text-align: center;">
{{# if(item.hasSubArea == 'false'){ }}
<a href="javascript:void(0)" data-hansubarea="{{item.hasSubArea}}">{{item.areaName}}</a>
{{# } }}
{{# if(item.hasSubArea == 'true'){ }}
<a href="javascript:void(0)" class="change-area" style="color: #0a54a6;text-decoration: underline"
data-areaid="{{item.areaId}}" data-areacode="{{item.areaCode}}">{{item.areaName}}<i class="fa fa-lg fa-sign-in"></i></a>
{{# } }}
</td>
<td style="text-align: center;">
<b>{{item.huJi == null ? '查询中' : item.huJi }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.changZhu == null ? '查询中' : item.changZhu }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.waiLai == null ? '查询中' : item.waiLai }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.jingWai == null ? '查询中' : item.jingWai }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.liuShou == null ? '查询中' : item.liuShou }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.xingMan == null ? '查询中' : item.xingMan }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.jiaoZheng == null ? '查询中' : item.jiaoZheng }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.jingShen == null ? '查询中' : item.jingShen }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.xiDu == null ? '查询中' : item.xiDu }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.aiZi == null ? '查询中' : item.aiZi }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
<td style="text-align: center;">
<b>{{item.zhongDian == null ? '查询中' : item.zhongDian }}{{i == d.length ? '人' : ''}}</b>
2023-06-20 14:37:19 +08:00
</td>
</tr>
{{# } }}
</script>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="popIdCardNumberSearchBox-template" type="text/html">
<div style="height: 40px;">
<div style="margin: 20px 10px 0px 10px;">
<input type="text" id="idCardNumberSearchValue" class="layui-input" value="" autocomplete="off" placeholder="请输入身份证号进行查询">
</div>
</div>
</script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script>
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'table', 'laydate', 'common','laytpl', 'form'], function() {
var $ = layui.$;
var $win = $(window);
var table = layui.table;
var admin = layui.admin;
var laydate = layui.laydate;
var laytpl = layui.laytpl;
var form = layui.form;
var resizeTimeout = null;
var tableUrl = 'api/basepopulationinfo/listpagebasepopulationinfo';
var idCardNumberSearchValue = "";
var areaParentId = [''];
var areaCode = '';
$('#left-card-div').height($win.height() - 30);
$('#left-card-div').css('overflow', 'auto');
function initData(){
//initTable();
listAreaUserCounts();
//initNationSelect();
//initPoliticalStatusSelect();
}
initData();
function listAreaUserCounts(){
var loadIndex = layer.load(0,{shade : 0.3});
top.restAjax.get(top.restAjax.path('api/basepopulationinfo/list-area-user-countsnew', []),
{areaParentId : areaParentId[areaParentId.length - 1]}, null, function (code, data) {
laytpl(document.getElementById('areaUserCountTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaUserCountBox').innerHTML = html;
});
layer.close(loadIndex);
}, function (code, data) {
top.dialog.msg(data.msg);
});
}
// 绑定点击区域切换事件
$(document).on('click', '.change-area', function(){
areaParentId.push($(this).data().areaid);
areaCode = '';
listAreaUserCounts();
reloadTable();
});
// 点击人员查看人员列表
$(document).on('click', '.people-event', function(){
areaCode = $(this).data().areacode;
reloadTable();
});
// 返回上级
$(document).on('click', '#backToArea',function(){
if(areaParentId.length > 1){
areaParentId.splice(areaParentId.length - 1, 1);
}
areaCode = '';
listAreaUserCounts();
reloadTable();
});
// 初始化民族下拉选择
function initNationSelect() {
top.restAjax.get(top.restAjax.path('api/mongo/data/list/parent-id/a981579c-572b-4fd1-8e76-5d17df97f6a4', []), {}, null, function(code, data, args) {
laytpl(document.getElementById('nationSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('nationSelectTemplateBox').innerHTML = html;
});
form.render('select', 'nationSelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 初始化政治面貌下拉选择
function initPoliticalStatusSelect() {
top.restAjax.get(top.restAjax.path('api/mongo/data/list/parent-id/b2c96de0-3df8-41db-99b1-bc4e24ac6c24', []), {}, null, function(code, data, args) {
laytpl(document.getElementById('politicalStatusSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('politicalStatusSelectTemplateBox').innerHTML = html;
});
form.render('select', 'politicalStatusSelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 初始化表格
function initTable() {
table.render({
elem: '#dataTable',
id: 'dataTable',
url: top.restAjax.path(tableUrl, []),
where : {
areaParentId : areaParentId[areaParentId.length -1],
areaCode : areaCode,
},
width: admin.screen() > 1 ? '100%' : '',
height: $win.height() - 140,
limit: 20,
limits: [20, 40, 60, 80, 100, 200],
toolbar: '#headerToolBar',
request: {
pageName: 'page',
limitName: 'rows'
},
cols: [[
{type:'checkbox', fixed: 'left'},
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
{field: 'fullName', width: 120, title: '姓名', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'genderDictionaryName', width: 120, title: '性别', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'idCardNumber', width: 180, title: '公民身份证号', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'telephone', width: 150, title: '联系方式', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'nationDictionaryName', width: 120, title: '民族', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'nativePlaceAddr', width: 150, title: '住址', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData
}
},
{field: 'politicalStatusDictionaryName', width: 120, title: '政治面貌', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-';
}
return rowData;
}
},
{field: 'occupationCategoryDictionaryName', width: 150, title: '职业', align:'center',
templet: function(row) {
var rowData = row[this.field];
if(rowData === '' || typeof (rowData) === 'undefined'){
return row['occupation'];
}
return rowData + '-' + row['occupation'];
}
},
{field: 'currentResidenceAddr', width: 180, title: '现住地', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
}
]],
page: true,
parseData: function(data) {
return {
'code': 0,
'msg': '',
'count': data.total,
'data': data.rows
};
}
});
}
// 重载表格
function reloadTable(currentPage) {
table.reload('dataTable', {
url: top.restAjax.path(tableUrl, []),
where: {
fullName: $('#fullName').val(),
idCardNumber: $('#idCardNumber').val(),
telephone: $('#telephone').val(),
fullName: $('#fullName').val(),
areaParentId : areaParentId[areaParentId.length -1],
areaCode : areaCode,
},
page: {
curr: currentPage
},
height: $win.height() - 140,
});
listAreaUserCounts();
}
// 事件 - 页面变化
$win.on('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
reloadTable();
$('#left-card-div').height($win.height() - 30);
}, 500);
});
// 事件 - 搜索
$(document).on('click', '#search', function() {
reloadTable(1);
});
// 事件 - 增删改
table.on('toolbar(dataTable)', function(obj) {
var layEvent = obj.event;
var checkStatus = table.checkStatus('dataTable');
var checkDatas = checkStatus.data;
if(layEvent === 'saveEvent') {
popIdCardNumberSearchBox();
} else if(layEvent === 'updateEvent') {
if(checkDatas.length === 0) {
top.dialog.msg(top.dataMessage.table.selectEdit);
} else if(checkDatas.length > 1) {
top.dialog.msg(top.dataMessage.table.selectOneEdit);
} else {
layer.open({
type: 2,
title: false,
closeBtn: 0,
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/basepopulationinfo/update-basepopulationinfo.html?basePopulationInfoId={basePopulationInfoId}', [checkDatas[0].basePopulationInfoId]),
end: function() {
reloadTable();
}
});
}
} else if(layEvent === 'removeEvent') {
if(checkDatas.length === 0) {
top.dialog.msg(top.dataMessage.table.selectDelete);
} else {
var ids = '';
for(var i = 0, item; item = checkDatas[i++];) {
if(i > 1) {
ids += '_';
}
ids += item['basePopulationInfoId'];
}
removeData(ids);
}
}
});
// 弹出身份证校验窗口
function popIdCardNumberSearchBox(){
var popIndex = layer.open({
type: 1
,title: '请先输入身份证号进行查询'
,closeBtn: 1
,area: '300px'
,offset: '250px'
,shade: 0.5
,id: 'popIdCardNumberSearchBox' //设定一个id防止重复弹出
,btn: ['查询']
,btnAlign: 'c'
,content: $('#popIdCardNumberSearchBox-template').html()
,yes: function(){
idCardNumberSearchValue = $('#idCardNumberSearchValue').val();
if(idCardNumberSearchValue == ''){
layer.msg("请输入身份证号进行查询!");
return;
}
getIdCardNumberVerify(idCardNumberSearchValue, popIndex);
}
});
}
function getIdCardNumberVerify(idCardNumber, popIndex) {
top.restAjax.get(top.restAjax.path('api/basepopulationinfo/get-idCardNumber-verify/{arg}', [idCardNumber]), {}, null, function (code, data) {
if (typeof (data) == "boolean" && data) {
layer.close(popIndex);
checkHasInfo()
} else {
layer.msg("请填写有效的身份证号码");
}
}, function (code, data) {
layer.msg("请填写有效的身份证号码");
});
}
function checkHasInfo(){
// 查询所输入身份证是否已有基本信息
top.restAjax.get(top.restAjax.path('api/basepopulationinfo/getbasepopulationinfo', []),
{idCardNumber : idCardNumberSearchValue}, null, function(code, data) {
if(typeof (data.basePopulationInfoId) === 'undefined' || data.basePopulationInfoId == ''){
top.layer.msg('未查询到基本信息,请先补充基本信息');
layer.open({
type: 2,
title: false,
closeBtn: 0,
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/basepopulationinfo/save-base-user-info.html?idCardNumber={arg}', [idCardNumberSearchValue]),
end: function() {
reloadTable();
}
});
} else {
layer.open({
type: 2,
title: false,
closeBtn: 0,
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/basepopulationinfo/update-basepopulationinfo.html?basePopulationInfoId={arg}', [data.basePopulationInfoId]),
end: function() {
reloadTable();
}
});
}
}, function(code, data) {
layer.msg(data.msg);
}
);
}
});
</script>
</body>
</html>