페이지별 자바스크립트 객체명,함수명 중복 방지 처리를 위해 pageObject 객체 추가
parent
0acc774a06
commit
90530ef3a4
@ -1,2 +1,344 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
|
||||
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
|
||||
|
||||
<!-- inner page html -->
|
||||
<div class="content-wrapper">
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<c:set var="prefixName" scope="request">표지 정보 미확인 자료</c:set>
|
||||
<div class="card">
|
||||
<div class="wrapper-list">
|
||||
<div>
|
||||
<div class="container-page-btn">
|
||||
<button type="button" class="btn btn-outline-dark">초기화</button>
|
||||
<span class="container-window-btn-right">
|
||||
<button type="button" class="btn btn-darkgray" id="btnSingoRegist--${pageName}" title="시민신고개별등록">시민신고개별등록</button>
|
||||
<button type="button" class="btn btn-darkgray" id="btnMenualRegist--${pageName}" title="위반자료수기등록">위반자료수기등록</button>
|
||||
<button type="button" class="btn btn-darkgray" id="btnExtrRegist--${pageName}" title="외부연계파일처리">외부연계파일처리</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form id="frmSearch--${pageName}" name="frmSearch">
|
||||
<div class="container-search">
|
||||
<div class="row">
|
||||
<div class="col-11">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold form-search-title">시스템구분</label>
|
||||
<span class="form-search-linebox">
|
||||
<c:forEach items="${FIM001List}" var="item">
|
||||
<label>
|
||||
<input name="sysSeCd" type="radio" value="${item.code}"
|
||||
class="form-check-input" alt="시스템구분"
|
||||
onchange="pageObject['${pageName}'].fnResetAndChangeBiz(this.value);">
|
||||
${item.value}
|
||||
</label>
|
||||
</c:forEach>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<select id="schDateOpt--${pageName}" name="schDateOpt" class="form-select">
|
||||
<option value="crdnYmd">단속일자</option>
|
||||
<option value="regDt">등록일자</option>
|
||||
</select>
|
||||
<span class="form-search-linebox">
|
||||
<input id="schDateFrom--${pageName}" class="form-control form-date" data-fmt-type="day" name="schDateFrom" type="text" title="시작 날짜 선택">
|
||||
<button type="button" class="bx bx-calendar bg-white"></button>
|
||||
~
|
||||
<input id="schDateTo--${pageName}" class="form-control form-date" data-fmt-type="day" name="schDateTo" type="text" title="종료 날짜 선택">
|
||||
<button type="button" class="bx bx-calendar bg-white"></button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold form-search-title">단속구분</label>
|
||||
<select id="crdnSeCd--${pageName}" name="crdnSeCd" class="form-select">
|
||||
<option value="">전체</option>
|
||||
<c:forEach items="${FIM002List}" var="item">
|
||||
<option value="${item.code}">${item.value}</option>
|
||||
</c:forEach>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold form-search-title">자료상태</label>
|
||||
<select id="crdnSttsCd--${pageName}" name="crdnSttsCd" class="form-select">
|
||||
<option value="">전체</option>
|
||||
<c:forEach items="${FIM010List}" var="item">
|
||||
<option value="${item.code}">${item.value}</option>
|
||||
</c:forEach>
|
||||
</select>
|
||||
|
||||
<select id="schOpt--${pageName}" name="schOpt" class="form-select">
|
||||
<option value="schVhrno">차량번호</option>
|
||||
</select>
|
||||
<input type="text" id="schWord--${pageName}" name="schWord" class="form-control" value="" />
|
||||
|
||||
<span class="flr">
|
||||
<button type="button" class="btn btn-open-detail btn-sm" data-bs-toggle="collapse" data-bs-target="#searchDetail">
|
||||
<i class="bx bx-chevron-down"></i>
|
||||
상세조회조건
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1 d-flex align-items-center justify-content-center">
|
||||
<button type="button" class="btn btn-search btn-square h-px-75" id="btnSearch--${pageName}" title="검색">검색</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="searchDetail" class="container-search container-search-detail collapse">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<span class="me-5">동적 조회조건</span>
|
||||
<label class="form-label fw-bold form-search-title">클릭한 항목</label>
|
||||
<input type="text" id="" name="" class="form-control" value="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<span class="container-page-btn">
|
||||
<div id="totCnt">전체 ㅣ <span></span></div>
|
||||
<span class="container-window-btn-right">
|
||||
선택 | n건
|
||||
<a href="#" class="btn btn-blue" id="" title="업무처리1">업무 처리1</a>
|
||||
<a href="#" class="btn btn-blue" id="" title="업무처리2">업무 처리2</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-datatable text-nowrap">
|
||||
<div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
|
||||
<div id="table-responsive--${pageName}" class="table-responsive"
|
||||
style="max-width: 1200px;overflow-x: scroll;height:400px;overflow-y: scroll;border-width: 1px">
|
||||
<table id="DataTables_Table_0"
|
||||
class="datatables-ajax table table-bordered dataTable no-footer"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
>
|
||||
<thead>
|
||||
<tr id="crdnTheadTr--${pageName}">
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="crdnTbody--${pageName}">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-flex flex-row p-3 justify-content-between">
|
||||
<label id="crdnPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
|
||||
<ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />
|
||||
|
||||
<div class="content-backdrop fade"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/**************************************************************************
|
||||
* Global Variable
|
||||
**************************************************************************/
|
||||
var FIM002 = new CommonCodes(${FIM002});
|
||||
var FIM026 = new CommonCodes(${FIM026});
|
||||
|
||||
|
||||
|
||||
pageObject['${pageName}'] = {};
|
||||
|
||||
pageObject['${pageName}'].crdnControl = new DatasetControl({
|
||||
prefix:"crdn",
|
||||
prefixName:"종합",
|
||||
infoSize:"xl",
|
||||
urls : {
|
||||
load : "",
|
||||
getInfo : ""
|
||||
},
|
||||
formats: {
|
||||
CRDN_YMD_TM : datetimeFormat,
|
||||
REG_DT : datetimeFormat,
|
||||
MDFCN_DT : datetimeFormat,
|
||||
CVLCPT_PRCS_PRNMNT_DT : dateFormat,
|
||||
CVLCPT_RCPT_YMD : dateFormat,
|
||||
|
||||
RCVMT_AMT : numberFormat,
|
||||
|
||||
CRDN_SE_CD: FIM002,
|
||||
CRDN_REG_SE_CD: FIM026
|
||||
},
|
||||
keymapper:info => info ? info.CRDN_ID : "",
|
||||
dataGetter:obj => obj.crdnList,
|
||||
appendData:true
|
||||
});
|
||||
|
||||
pageObject['${pageName}'].crdnControl.onDatasetChange = obj => {
|
||||
|
||||
var prefix = obj.infoPrefix;
|
||||
pageObject['${pageName}'].renderCrdnList(obj);
|
||||
|
||||
$("#crdnPaging--${pageName}").setPagingInfo({
|
||||
list: pageObject['${pageName}'].crdnControl.dataset,
|
||||
prefix: "crdn",
|
||||
start: obj[prefix+"Start"],
|
||||
totalSize: obj[prefix+"Total"],
|
||||
fetchSize: obj[prefix+"Fetch"],
|
||||
func: "pageObject['${pageName}'].crdnControl.load({index})"
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
pageObject['${pageName}'].fnResetAndChangeBiz = sysSeCd => {
|
||||
$("#crdnTbody--${pageName}").html("");
|
||||
pageObject['${pageName}'].crdnControl.urls.load = wctx.url("/crdn/crdn06/010/"+ sysSeCd +"/list.do");
|
||||
pageObject['${pageName}'].crdnControl.urls.getInfo = wctx.url("/sprt/sprt01/020/"+ sysSeCd +"/info.do");
|
||||
}
|
||||
|
||||
pageObject['${pageName}'].searchCrdnList = () => {
|
||||
pageObject['${pageName}'].crdnControl.query = pageObject['${pageName}'].getParams();
|
||||
$("#crdnTbody--${pageName}").html("");
|
||||
pageObject['${pageName}'].crdnControl.load(1);
|
||||
}
|
||||
|
||||
pageObject['${pageName}'].scrollCrdnList = () => {
|
||||
pageObject['${pageName}'].crdnControl.load(pageObject['${pageName}'].crdnControl.query.pageNum + 1);
|
||||
}
|
||||
|
||||
pageObject['${pageName}'].renderCrdnList = data => {
|
||||
if(!pageObject['${pageName}'].crdnControl.appendData){
|
||||
$("#crdnTbody--${pageName}").html("");
|
||||
}
|
||||
|
||||
var crdnList = pageObject['${pageName}'].crdnControl.dataset;
|
||||
|
||||
var empty = crdnList.empty;
|
||||
|
||||
var trs = empty ? [ pageObject['${pageName}'].tbodyTemplate.notFound ] : crdnList.inStrings(pageObject['${pageName}'].tbodyTemplate.found);
|
||||
|
||||
$("#crdnTbody--${pageName}").html(trs.join());
|
||||
|
||||
}
|
||||
|
||||
pageObject['${pageName}'].getParams = () => {
|
||||
var form = $("#frmSearch--${pageName}");
|
||||
|
||||
return {
|
||||
sysSeCd: form.find("[name='sysSeCd']:checked").val()
|
||||
,[form.find("[name='schOpt']").val()]: form.find("[name='schWord']").val()
|
||||
,schDateOpt: form.find("[name='schDateOpt']").val()
|
||||
,schDateFrom: form.find("[name='schDateFrom']").val()
|
||||
,schDateTo: form.find("[name='schDateTo']").val()
|
||||
,crdnSeCd: form.find("[name='crdnSeCd']").val()
|
||||
,crdnSttsCd: form.find("[name='crdnSttsCd']").val()
|
||||
,ctznAnsYn: form.find("[name='ctznAnsYn']:checked").val()
|
||||
,fetchSize: 30
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* *******************************
|
||||
* Grid
|
||||
******************************* */
|
||||
pageObject['${pageName}'].gridColumns = [
|
||||
{ header: '차량번호', name: 'VHRNO', width: 80, align: 'center' },
|
||||
{ header: '단속구분(신고방법)', name: 'CRDN_SE_CD', width: 100, align: 'center' },
|
||||
{ header: '위반일시', name: 'CRDN_YMD_TM', width: 120, align: 'center' },
|
||||
{ header: '사진건수', name: 'ATCH_FILE_CNT', width: 40, align: 'center' },
|
||||
{ header: '수납금액', name: 'RCVMT_AMT', width: 100, align: 'right' },
|
||||
{ header: '위반횟수', name: 'VLTN_NMTM', width: 80, align: 'right' },
|
||||
{ header: '위반장소', name: 'CRDN_PLC', width: 150 },
|
||||
{ header: '주민번호(전체)', name: 'RTPYR_NO', width: 110, align: 'center', className: "privacy" },
|
||||
{ header: '주민번호(마스킹)', name: 'RTPYR_NO_MASK', width: 110, align: 'center', className: "privacy-mask" },
|
||||
{ header: '특기사항', name: 'ETC_CN', width: 80, align: 'center' },
|
||||
{ header: '서손사유', name: 'ETC_CN', width: 80, align: 'center' },
|
||||
{ header: '처리상태명', name: 'CRDN_STTS_NM', width: 80},
|
||||
{ header: '민원접수번호', name: 'CVLCPT_RCPT_NO', width: 150, align: 'center' },
|
||||
{ header: '민원접수일자', name: 'CVLCPT_RCPT_YMD', width: 80, align: 'center' },
|
||||
{ header: '처리기한', name: 'CVLCPT_PRCS_PRNMNT_DT', width: 80, align: 'center' },
|
||||
{ header: '신고자', name: 'CVLCPT_APLCNT_NM', width: 80, align: 'center' },
|
||||
{ header: '등록구분', name: 'CRDN_REG_SE_CD', width: 50, align: 'center' },
|
||||
{ header: '등록일시', name: 'REG_DT', width: 150, align: 'center' },
|
||||
{ header: '최종처리일시', name: 'MDFCN_DT', width: 150, align: 'center' },
|
||||
{ header: '상태', name: 'CRDN_STTS_CD', hidden: true },
|
||||
{ header: '서손ID', name: 'LEVY_EXCL_ID', hidden: true },
|
||||
{ header: '소유자ID', name: 'RTPYR_ID', hidden: true },
|
||||
{ header: '서손사유코드', name: 'LEVY_EXCL_RSN_CD', hidden: true },
|
||||
{ header: 'interfaceSeqN', name: 'INTERFACE_SEQN', hidden: true }
|
||||
];
|
||||
pageObject['${pageName}'].gridOptions = {
|
||||
theadTr: 'crdnTheadTr--${pageName}',
|
||||
rowHeader: 'No.',
|
||||
trDataKey: 'CRDN_ID',
|
||||
infoPrefix: "crdn",
|
||||
prefixName : "단속",
|
||||
clickEvent : "pageObject['${pageName}'].crdnControl.setCurrent('{CRDN_ID}')",
|
||||
dblClickEvent : "pageObject['${pageName}'].crdnControl.getInfo({})",
|
||||
columns: pageObject['${pageName}'].gridColumns
|
||||
};
|
||||
|
||||
pageObject['${pageName}'].tbodyTemplate = {};
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
var thisPO = pageObject['${pageName}'];
|
||||
|
||||
//페이지로딩 후 초기화
|
||||
thisPO.tbodyTemplate = initGrid(thisPO.gridOptions);
|
||||
|
||||
$("#schDateFrom--${pageName}").datepicker({
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true
|
||||
});
|
||||
$("#schDateTo--${pageName}").datepicker({
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
showButtonPanel: true
|
||||
});
|
||||
$('#schDateFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-5475).date);
|
||||
$('#schDateTo--${pageName}').datepicker('setDate', new Date());
|
||||
|
||||
$( "#frmSearch--${pageName} .form-date" ).next("button.bx-calendar").on("click", function() {
|
||||
$(this).prev().focus();
|
||||
});
|
||||
|
||||
var defaultBizValue = $("#layout-navbar input[name='sysSeCd']:checked").val();
|
||||
$("#frmSearch--${pageName} input[name='sysSeCd'][value='" + defaultBizValue + "']").prop("checked",true);
|
||||
thisPO.fnResetAndChangeBiz(defaultBizValue);
|
||||
|
||||
//스크롤 이벤트 추가
|
||||
$("#table-responsive--${pageName}").scroll(function(){
|
||||
var el = $(this);
|
||||
if(el.scrollTop() == 0){
|
||||
return;
|
||||
}
|
||||
if((el[0].scrollHeight - el.scrollTop() + 15) == el.outerHeight()){
|
||||
thisPO.scrollCrdnList();
|
||||
}
|
||||
});
|
||||
|
||||
$('#btnSearch--${pageName}').on('click', () => thisPO.searchCrdnList());
|
||||
|
||||
$('#btnMenualRegist--${pageName}').on('click', () => {
|
||||
|
||||
});
|
||||
|
||||
$('#btnExtrRegist--${pageName}').on('click', () => {
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue