단속 초기자료 메인 페이지 추가

main
이범준 1 year ago
parent 495e76d824
commit a7f19e8614

@ -0,0 +1,698 @@
<%@ 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" style="max-height:750px!important;">
<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" title="시민신고개별등록">시민신고개별등록</button>
<button type="button" class="btn btn-darkgray" id="btnMenualRegist" title="위반자료수기등록">위반자료수기등록</button>
<button type="button" class="btn btn-darkgray" id="btnExtrRegist" title="외부연계파일처리">외부연계파일처리</button>
</span>
</div>
<!-- tab 공통 -->
<form id="frmSearch" 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">
<%--
<code:radio
grpId="FIM001"
id="sysSeCd"
name="sysSeCd"
cls="form-check-input"
alt="시스템구분"/>
--%>
</span>
</div>
<div class="col-12">
<select id="schDateOpt" name="schDateOpt" class="form-select">
<option value="crdnYmd">단속일자</option>
<option value="regDt">등록일자</option>
</select>
<span class="form-search-linebox">
<input id="schDateFrom" 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" 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>
<span class="form-search-linebox">
<%--
<code:radio type="CMM_ETC2" id="crdnSeCd" name="crdnSeCd" grpId="FIM002"
cls="form-check-input" alt="단속구분" />
--%>
</span>
</div>
<div class="col-12">
<label class="form-label fw-bold form-search-title">자료상태</label>
<%--
<code:select id="crdnSttsCd" name="crdnSttsCd"
grpId="FIM010" defaultSelect="01" title="단속처리상태" cls="form-select" alt="단속처리상태" disabled="false"/>
--%>
<select id="schOpt" name="schOpt" class="form-select">
<option value="schVhrno">차량번호</option>
</select>
<input type="text" id="schWord" 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" title="검색">검색</button>
</div>
</div>
</div>
<div id="searchDetail" class="container-search container-search-detail collapse">
상세조회조건
</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="container-search">
<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>
<div id="tabs" class="nav-align-top mt-3">
<ul class="nav nav-tabs">
<li class="nav-item">
<button id="0" type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabContent0">전체</button>
</li>
<li class="nav-item">
<button id="1" type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabContent0">부분1</button>
</li>
<li class="nav-item">
<button id="2" type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabContent0">부분2</button>
</li>
<li class="nav-item">
<button id="3" type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabContent0">부분3</button>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tabContent0" style="flex-direction: column" class="tab-pane fade show active">
<div id="tabs_t0"></div>
</div>
<div id="tabContent1" class="tab-pane fade">
<div id="tabs_t1"></div>
</div>
<div id="tabContent2" class="tab-pane fade">
<div id="tabs_t2"></div>
</div>
</div>
<div id="grid"></div>
<div class="d-flex flex-row p-3 justify-content-between">
<label id="grid1PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
<ul id="grid1Paging" class="pagination pagination-primary"></ul>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />
<div class="content-backdrop fade"></div>
</div>
<script>
$(function(){
});
/**************************************************************************
* Global Variable
**************************************************************************/
/**
* tab index : 0 부터 시작
* @type {number}
*/
var CUR_TAB_IDX = 0;
/**
* tui-grid array
* @type {*[]}
*/
var GRID = {};
/**
* PageNavigation
* @type {*[]}
*/
var pageNav = {};
/**
* 부과대상 데이타 배열
* 단속ID, 접수번호
* @type {Array<{crdnId: string, cvlcptRcptNo: string}>}
*/
var IMPOSE_DATA;
/**
* 단속진행 상태
* 01 - 초기등록
* 10 - 부과대상
* @type {string[]}
*/
var ARR_PRC_STS_CODE = ['01', '10']
/**
* 팝업 객체
* @type {null}
*/
popup = null;
/**
*
*/
var popupDiv;
/**
* 팝업창에서 호출하는 콜백함수
*/
var callbackSearch = () => searchCrdnList();
var crdnControl = new FimsDatasetControl({
prefix:"crdn",
prefixName:"초기자료",
infoSize:"xl",
urls : {
load : wctx.url("/{biz}/crdn/list.do")
},
keymapper:info => info ? info.CRDN_ID : "",
dataGetter:obj => obj.crdnList
});
crdnControl._paginationInfo.pagingType = "scroll";
crdnControl._paginationInfo.fetchSize = 50;
crdnControl._paginationInfo.scrollFuncName = scrollCrdns;
crdnControl.onDatasetChange = obj => {
var prefix = obj.prefixInfo;
crdnControl._paginationInfo.totalSize = obj[prefix+"Total"];
if(crdnControl._paginationInfo.pagingType == "nav"){
crdnControl._paginationInfo.pageNum = (obj[prefix+"Start"]+obj[prefix+"Fetch"])/obj[prefix+"Fetch"];
}
renderCrdnList(obj);
if(crdnControl._paginationInfo.paging && crdnControl._paginationInfo.pagingType == "nav"){
$("#grid1Paging").setPaging({
list: crdnControl.dataset,
prefix: "grid1",
start: obj[prefix+"Start"],
totalSize: obj[prefix+"Total"],
fetchSize: obj[prefix+"Fetch"],
func: "crdnControl.load({index})"
});
}
//집계 표시
crdnControl.totalCountSetting(obj);
};
function searchCrdnList(){
crdnControl.query = fnBiz.getParams();
GRID.clear();
crdnControl.load(1);
}
function scrollCrdns(){
crdnControl.load(crdnControl._paginationInfo.pageNum + 1, "more");
}
function renderCrdnList(data) {
if(crdnControl._paginationInfo.paging && crdnControl._paginationInfo.pagingType == "nav"){
GRID.clear();
}
GRID.appendRows(data.crdnList);
}
/*******************************
* Biz function
*******************************/
// tab 전체
const fnBiz = {
getParams: () => {
return {
[$('#schOpt').val()]: $('#schWord').val()
,schDateOpt: $('#schDateOpt').val()
,schDateFrom: $('#schDateFrom').val()
,schDateTo: $('#schDateTo').val()
,sysSeCd: $('input:radio[name=sysSeCd]:checked').val()
,crdnSeCd: CUR_TAB_IDX === 2 ? '09' : $('input:radio[name=crdnSeCd]:checked').val()
,crdnSttsCd: CUR_TAB_IDX === 2 ? 'NON-INIT' : $('#crdnSttsCd').val()
,ctznAnsYn: $('input:radio[name=ctznAnsYn]:checked').val()
}
}
,pagePopup: function(flag, params){
let url;
let popTitle;
let popOption;
switch (flag) {
case "total":
url = fimsApiUrl.POPUP_CRACKDOWN_TOTAL;
popOption = {width: 1200, height:900};
popTitle = "개별총정보";
break;
case "edit":
url = fimsApiUrl.POPUP_CRACKDOWN_EDIT;
popOption = {width: 1200, height:900};
popTitle = "정보 변경";
break;
case "file":
url = fimsApiUrl.POPUP_EXTR_CRACKDOWN_FILE_SEL;
popOption = {width: 900, height:750};
popTitle = "외부연계 데이타 선택";
break;
case "impose":
url = fimsApiUrl.POPUP_IMPOSE;
popOption = {width: 500, height: 400};
popTitle = "과태료 시스템 등록";
break;
case "answerPreview":
url = fimsApiUrl.POPUP_CTZN_ANS_PREVIEW;
popOption = {width: 600, height: 620};
popTitle = "답변 내용 미리 보기";
break;
default:
break;
}
popup = CmmPopup.openModal(url, params, popOption, popTitle);
}
,onClickGrid: function(props){
const selColumn = props.columnInfo.name;
switch (selColumn){
case 'cvlcptRcptNo':
popupDiv = 'edit';
const rowDatas = GRID.store.data.rawData.map(d => {
return {crdnSeCd: d.crdnSeCd, crdnId: d.crdnId, crdnSttsCd: d.crdnSttsCd}
})
pageNav = new PageNavigation(GRID, rowDatas, props.rowKey);
fnBiz.pagePopup(popupDiv, pageNav.gridInfo.curRowData);
$(".tooltip").remove();
break;
default:
break;
}
}
,resetBtn: function() {
switch(CUR_TAB_IDX){
case 0:
$('#btnExtrRegist').show();
$('#divImpose').hide();
$('#divAnswer').hide();
$('#ansDiv').hide();
$('#crdnSttsCd').show();
$('#fldCrdnSeCd').show();
break;
case 1:
$('#btnExtrRegist').hide();
$('#divImpose').show();
$('#divAnswer').hide();
$('#ansDiv').hide();
$('#crdnSttsCd').show();
$('#fldCrdnSeCd').show();
break;
case 2:
$('#btnExtrRegist').hide();
$('#divImpose').hide();
$('#divAnswer').show();
$('#ansDiv').show();
$('#crdnSttsCd').show();
$('#fldCrdnSeCd').hide();
break;
}
}
,onDblClickGrid: function (props) {
popupDiv = 'total';
const rowDatas = GRID.store.data.rawData.map(d => {
return {crdnSeCd: d.crdnSeCd, crdnId: d.crdnId, crdnSttsCd: d.crdnSttsCd}
});
pageNav = new PageNavigation(GRID, rowDatas, props.rowKey);
fnBiz.pagePopup(popupDiv, pageNav.gridInfo.curRowData);
}
,getAnswerSeCode: (stsCode) => {
/*
,{value: '10', text: '부과대상'}
,{value: '11', text: '서손'}
,{value: '12', text: '계도'}
,{value: '20', text: '부과'}
*/
let answerSeCode;
switch(stsCode){
// 부과
case '10':
case '20':
answerSeCode = '${ansSeCodeImpose}';
break;
// 서손
case '11':
answerSeCode = '${ansSeCodeDisallow}';
break;
// 계도
case '12':
answerSeCode = '${ansSeCodeEnlight}';
break;
}
return answerSeCode;
}
};
/**************************************************************************
* event
**************************************************************************/
$(() => {
$("#tabs").on("click", "li", function () {
CUR_TAB_IDX = parseInt($("#tabs .nav-link.active").attr("id"));
});
$('#btnSearch').on('click', () => searchCrdnList());
$('#btnMenualRegist').on('click', () => {
//fnBiz.pagePopup('edit', {});
});
$('#btnExtrRegist').on('click', () => {
//fnBiz.pagePopup('file');
});
});
/* *******************************
* Grid
******************************* */
const gridColumns = [
{
header: '등록구분',
name: 'CRDN_REG_SE_CD',
minWidth: 50,
sortable: false,
align: 'center',
formatter({value}) {
return (new CodeFormat(ComboCodeData.crdnRegSeCd)).format(value);
}
},
{
header: '접수번호',
name: 'CVLCPT_RCPT_NO',
minWidth: 130,
sortable: false,
align: 'center',
renderer: {
type: CustomButtonRenderer,
options: {
formatter: (props)=>{
const rowData = props.grid.getRow(props.rowKey);
return {
formatter: rowData.crdnSeCd === '09' ? rowData.cvlcptRcptNo : rowData.fileLinkId
,element: "text"
,dataAttrs : {
bsToggle: "tooltip",
bsOffset: "0,4",
bsPlacement: "top",
bsHtml: "true"
}
,attrs : {
title : "<i class='bx bx-window bx-xs'></i> <span>단속현황 정보</span>"
}
}
}
,eventFunction: fnBiz.onClickGrid
,eventType: "click"
}
}
},
{
header: '차량번호',
name: 'VHRNO',
minWidth: 80,
sortable: false,
align: 'center'
},
{
header: '단속구분(신고방법)',
name: 'CRDN_SE_CD',
minWidth: 100,
sortable: false,
align: 'center',
formatter: 'listItemText',
disabled: true,
editor: {
type: "select",
options: {
listItems: [...ComboCodeData.crdnSeCd]
}
}
},
{
header: '위반일시',
name: 'CRDN_YMD_TM',
minWidth: 120,
sortable: false,
align: 'center',
formatter({value}) {
return datetimeFormat.format(value); //
}
},
{
header: '사진건수',
name: 'ATCH_FILE_CNT',
minWidth: 40,
sortable: false,
align: 'center'
},
{
header: '수납금액',
name: 'RCVMT_AMT',
minWidth: 100,
sortable: false,
align: 'right',
formatter({value}) {
return numberFormat.format(value); //
}
},
{
header: '위반횟수',
name: 'VLTN_NMTM',
minWidth: 80,
sortable: false,
align: 'right'
},
{
header: '위반장소',
name: 'CRDN_PLC',
minWidth: 200,
sortable: false
},
{
header: '주민번호(전체)',
name: 'RTPYR_NO',
minWidth: 110,
sortable: false,
align: 'center',
className: "privacy"
},
{
header: '주민번호(마스킹)',
name: 'RTPYR_NO_MASK',
minWidth: 110,
sortable: false,
align: 'center',
className: "privacy-mask"
},
{
header: '특기사항',
name: 'ETC_CN',
width: 80,
sortable: false,
align: 'center'
},
{
header: '서손사유',
name: 'ETC_CN', //levyExclRsnCd
width: 80,
sortable: false,
align: 'center'
},
{
header: '처리상태명',
name: 'CRDN_STTS_NM',
hidden: true
},
{
header: '접수일자',
name: 'CVLCPT_RCPT_YMD',
minWidth: 80,
sortable: false,
align: 'center',
formatter({value}) {
return dateFormat.format(value); //
}
},
{
header: '처리기한',
name: 'CVLCPT_PRCS_PRNMNT_DT',
minWidth: 80,
sortable: false,
align: 'center',
formatter({value}) {
return dateFormat.format(value); //
}
},
{
header: '신고자',
name: 'CVLCPT_APLCNT_NM',
minWidth: 80,
sortable: false,
align: 'center'
},
{
header: '등록일시',
name: 'REG_DT',
minWidth: 150,
sortable: false,
align: 'center',
formatter({value}) {
return datetimeFormat.format(value); //
}
},
{
header: '최종처리일시',
name: 'MDFCN_DT',
minWidth: 150,
sortable: false,
align: 'center',
formatter({value}) {
return datetimeFormat.format(value);
}
},
{
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
}
];
const gridOptions = {
el: 'grid',
rowHeaders: ['rowNum'],
columns: gridColumns,
columnOptions: {
frozenCount: 3
},
paginationInfoRef : crdnControl._paginationInfo
};
const initGrid = () => {
GRID = TuiGrid.of(gridOptions);
GRID.on('dblclick', function (props) { fnBiz.onDblClickGrid(props); });
};
$(document).ready(function(){
CUR_TAB_IDX = 0;
fnBiz.resetBtn();
initGrid();
$("#schDateFrom").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true
});
$("#schDateTo").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true
});
$('#schDateFrom').datepicker('setDate', DateUtil.getDateDay(-5475).date);
$('#schDateTo').datepicker('setDate', new Date());
$( "#frmSearch .form-date" ).next("button.bx-calendar").on("click", function() {
$(this).prev().focus();
});
});
</script>

@ -21,13 +21,13 @@
</div> </div>
<!-- /Search --> <!-- /Search -->
<div class="ms-2 me-2" style="min-width: max-content;"> <div class="ms-2 me-2" style="min-width: max-content;">
<select id="schOpt" class="form-select"> <select id="schOptTop" class="form-select">
<option value="vhrno">차량번호</option> <option value="vhrno">차량번호</option>
<option value="rtpyrNm">납부자명</option> <option value="rtpyrNm">납부자명</option>
<option value="rtpyrNo">납부자번호</option> <option value="rtpyrNo">납부자번호</option>
<option value="petitionerNm">신고인명</option> <option value="petitionerNm">신고인명</option>
</select> </select>
<input type="text" id="schWord" class="form-control" /> <input type="text" id="schWordTop" class="form-control" />
<button type="button" id="fastSearch" class="btn btn-outline-dark bg-orange" title="통합조회"> <button type="button" id="fastSearch" class="btn btn-outline-dark bg-orange" title="통합조회">
<i class="bx bx-search"></i>통합조회 <i class="bx bx-search"></i>통합조회
</button> </button>

Loading…
Cancel
Save