feat: 초기자료편집 > 단속건수 클릭시 차량단속 목록 팝업 반영
parent
f87aae3296
commit
7fdfaef75e
@ -0,0 +1,168 @@
|
|||||||
|
<%--
|
||||||
|
================================================================================
|
||||||
|
File : /fims/biz/cmm/cmmCtznComplaintHistPopup.jsp
|
||||||
|
Name : 단속현황 시민 민원 이력 팝업 - 단속관리>초기자료 편집
|
||||||
|
Auth : lim.jong.uk
|
||||||
|
Date : 2023-03-20
|
||||||
|
Desc : 단속현황 시민 민원 이력 팝업
|
||||||
|
================================================================================
|
||||||
|
Date Author Description
|
||||||
|
================================================================================
|
||||||
|
================================================================================
|
||||||
|
--%>
|
||||||
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||||
|
<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp"%>
|
||||||
|
|
||||||
|
<div class="popup" style="min-width: 100px;">
|
||||||
|
<div class="popup_inner" style="max-width: 800px;">
|
||||||
|
<p class="pop_title">차량 단속 내역</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="popup_btn">
|
||||||
|
<div class="flr p_flr">
|
||||||
|
<span>
|
||||||
|
<a href="#" id='btnClose' class="btn lightgray">닫기</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="grid"></div>
|
||||||
|
</div><!--row -->
|
||||||
|
</div>
|
||||||
|
<script type="text/javaScript">
|
||||||
|
/**************************************************************************
|
||||||
|
* Global Variable
|
||||||
|
**************************************************************************/
|
||||||
|
let GRID = null;
|
||||||
|
|
||||||
|
/* *******************************
|
||||||
|
* Biz function
|
||||||
|
******************************* */
|
||||||
|
|
||||||
|
|
||||||
|
/**************************************************************************
|
||||||
|
* event
|
||||||
|
**************************************************************************/
|
||||||
|
$(() => {
|
||||||
|
$("#btnClose").on('click', () => {
|
||||||
|
window.close()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ******************************
|
||||||
|
* Grid
|
||||||
|
****************************** */
|
||||||
|
const initPopupGrid = () => {
|
||||||
|
const gridColumns = [
|
||||||
|
{
|
||||||
|
header: '단속구분',
|
||||||
|
name: 'regltSeCode',
|
||||||
|
minWidth: 100,
|
||||||
|
//editor: 'text',
|
||||||
|
sortable: false,
|
||||||
|
align: 'center',
|
||||||
|
formatter: 'listItemText',
|
||||||
|
disabled: true,
|
||||||
|
editor: {
|
||||||
|
type: "select",
|
||||||
|
options: {
|
||||||
|
listItems: [...ComboCodeData.regltSeCode]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '위반일시',
|
||||||
|
name: 'regltDeTime',
|
||||||
|
minWidth: 120,
|
||||||
|
sortable: false,
|
||||||
|
align: 'center',
|
||||||
|
formatter({value}) {
|
||||||
|
return setDateTimeFmt(value); //
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '단속장소',
|
||||||
|
name: 'regltPlace',
|
||||||
|
minWidth: 120,
|
||||||
|
sortable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '위반내역',
|
||||||
|
name: 'violtDtlsCode',
|
||||||
|
minWidth: 150,
|
||||||
|
//editor: 'text',
|
||||||
|
sortable: false,
|
||||||
|
align: 'center',
|
||||||
|
formatter: 'listItemText',
|
||||||
|
disabled: true,
|
||||||
|
editor: {
|
||||||
|
type: "select",
|
||||||
|
options: {
|
||||||
|
listItems: [...ComboCodeData.violtDtlsCode]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '차량번호',
|
||||||
|
name: 'vhcleNo',
|
||||||
|
minWidth: 90,
|
||||||
|
//editor: 'text',
|
||||||
|
sortable: false,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '등록일시',
|
||||||
|
name: 'registDt',
|
||||||
|
minWidth: 120,
|
||||||
|
//editor: 'text',
|
||||||
|
sortable: true,
|
||||||
|
align: 'center',
|
||||||
|
formatter({value}) {
|
||||||
|
return setDateTimeFmt(value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: '등록자',
|
||||||
|
name: 'register',
|
||||||
|
minWidth: 120,
|
||||||
|
//editor: 'text',
|
||||||
|
sortable: false,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 민원 등록 이력 datasource
|
||||||
|
const gridDatasource = {
|
||||||
|
initialRequest: true, // 화면 load시 조회 안함 - default
|
||||||
|
api: {
|
||||||
|
readData: {
|
||||||
|
url: fimsApiUrl.FIND_RT_REGLT_CAR_CRACKDOWN_CNT
|
||||||
|
, serializer: (params) => getPageParam({vhcleNo: '${param.vhcleNo}', regltId: '${param.regltId}', regltSeCode: '${param.regltSeCode}'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const gridOptions = {
|
||||||
|
el: 'grid',
|
||||||
|
minBodyHeight: 200,
|
||||||
|
bodyHeight: 200, //[선택]Grid 높이 (number(단위: px)|'auto'|'fitToParent')
|
||||||
|
rowHeaders: ['rowNum'],
|
||||||
|
pageOptions: {
|
||||||
|
perPage: 100,
|
||||||
|
type: 'scroll'
|
||||||
|
},
|
||||||
|
columns: gridColumns
|
||||||
|
};
|
||||||
|
|
||||||
|
GRID = TuiGrid.of(gridOptions, gridDatasource, (res) => {
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**************************************************************************
|
||||||
|
* initialize
|
||||||
|
**************************************************************************/
|
||||||
|
$(document).ready(function(){
|
||||||
|
initPopupGrid();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -1,319 +0,0 @@
|
|||||||
|
|
||||||
/**************************************************************************
|
|
||||||
* Global Variable
|
|
||||||
***************************************************************************/
|
|
||||||
const menuTab = null,
|
|
||||||
menuScrollable = null,
|
|
||||||
iframeMap = {},
|
|
||||||
menuTabScrollable = null;
|
|
||||||
|
|
||||||
/*
|
|
||||||
function addTab(title, url){
|
|
||||||
if ($('#tt').tabs('exists', title)){
|
|
||||||
$('#tt').tabs('select', title);
|
|
||||||
} else {
|
|
||||||
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
|
|
||||||
$('#tt').tabs('add',{
|
|
||||||
title:title,
|
|
||||||
content:content,
|
|
||||||
closable:true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
function openMenu(menuId, menuNm, menuUrl) {
|
|
||||||
if(!menuUrl) return;
|
|
||||||
if(iframeMap[menuId]){
|
|
||||||
// 해당 tab 활성화
|
|
||||||
|
|
||||||
// 해당 메뉴 iframe만 활성화
|
|
||||||
$("#ifrTabs").find("iframe").each((idx, data) => {
|
|
||||||
if(data.id == menuId) {
|
|
||||||
$('#ifrTabs').tabs({active: parseInt(data.dataset.tabIndex)})
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const num_tabs = $('div#ifrTabs ul li.tab').length + 1;
|
|
||||||
// const liEl = '<li class="tab ui-icon ui-icon-close"><a href="#tab-'+ num_tabs + '">' + menuNm + '</a></li>';
|
|
||||||
//const liEl = '<li class="tab ui-icon-close"><a onclick="closeTab(${menuId}, ${num_tabs})" href="#tab-'+ num_tabs + '">' + menuNm + '</a></li>';
|
|
||||||
const liEl = '<li onclick="closeTab()" id="'+ menuId +'" class="tab ui-icon-close"><a href="#tab-'+ menuId + '">' + menuNm + '</a></li>';
|
|
||||||
//const liEl = '<li class="tab ui-icon-close"><a href="#tab-'+ num_tabs + '">' + menuNm + '</a></li>';
|
|
||||||
$('div#ifrTabs ul').append(liEl);
|
|
||||||
|
|
||||||
$('div#ifrTabs').append(
|
|
||||||
//'<div id="tab-' + num_tabs + '"></div>');
|
|
||||||
'<div id="tab-' + menuId + '"></div>');
|
|
||||||
$('#ifrTabs').tabs("option","create");
|
|
||||||
$('#ifrTabs').tabs("refresh");
|
|
||||||
$('#ifrTabs').tabs("option", "active", -1); //makes the new tab active
|
|
||||||
|
|
||||||
$('#'+menuId).on('click', (e)=>{
|
|
||||||
console.log('#######')
|
|
||||||
alert('llll')
|
|
||||||
})
|
|
||||||
|
|
||||||
//const $iframe = $("<iframe id='" + menuId + "'></iframe>");
|
|
||||||
const $iframe = $("<iframe></iframe>");
|
|
||||||
$iframe.attr("id" , menuId)
|
|
||||||
.attr("name" , menuNm)
|
|
||||||
.attr("data-tab-index", num_tabs - 1)
|
|
||||||
.attr("frameborder" , "0")
|
|
||||||
.attr("scrolling" , "no")
|
|
||||||
.attr("width" , "100%")
|
|
||||||
.attr("src" , menuUrl)
|
|
||||||
.css("border" , "0")
|
|
||||||
.css("height" , "900px")
|
|
||||||
.css("overflow" , "auto")
|
|
||||||
.css("overflow-x" , "no")
|
|
||||||
//.css("zindex", "99999")
|
|
||||||
;
|
|
||||||
//$("#content").append($iframe);
|
|
||||||
|
|
||||||
//insertContent(menuId, $iframe);
|
|
||||||
|
|
||||||
let activeTab = $("#ifrTabs").tabs('option', 'active');
|
|
||||||
activeTab += 1;
|
|
||||||
//$("#tab-" + activeTab).append($iframe);
|
|
||||||
$("#tab-" + menuId).append($iframe);
|
|
||||||
|
|
||||||
|
|
||||||
iframeMap[menuId] = $iframe;
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeTab(menuId) {
|
|
||||||
const iframe = iframeMap[menuId];
|
|
||||||
|
|
||||||
const closeTabIdx = parseInt(ifr.dataset.tabIndex);
|
|
||||||
|
|
||||||
let activeTabIdx = $("#ifrTabs").tabs('option', 'active');
|
|
||||||
|
|
||||||
// 활성탭의 close
|
|
||||||
if(closeTabIdx === activeTabIdx){
|
|
||||||
|
|
||||||
if(iframe.next().length > 0){
|
|
||||||
$('#ifrTabs').tabs({active: activeTabIdx + 1})
|
|
||||||
}else if(iframe.prev().length > 0){
|
|
||||||
$('#ifrTabs').tabs({active: activeTabIdx - 1})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
iframeMap[menuId].remove();
|
|
||||||
delete iframeMap[menuId];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//});
|
|
||||||
|
|
||||||
//Insert content into the currently selected tab
|
|
||||||
function insertContent(menuId, content) {
|
|
||||||
//iframeMap[]
|
|
||||||
let activeTab = $("#ifrTabs").tabs('option', 'active');
|
|
||||||
activeTab += 1;
|
|
||||||
$("#tab-" + activeTab).append(content);
|
|
||||||
|
|
||||||
//iframeMap.find(menuId)
|
|
||||||
iframeMap[menuId] = content;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.ui-icon-close').on('click', (e) => {
|
|
||||||
console.log(e.target)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function tab(){
|
|
||||||
//탭메뉴 클릭할 때 실행
|
|
||||||
$('.tab_wrap .tit_list > li a').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
//초기화
|
|
||||||
$('.tab_wrap .tit_list > li').removeClass('active');
|
|
||||||
$('.tab_wrap .tab_list').hide();
|
|
||||||
|
|
||||||
//실행
|
|
||||||
$(this).parent().addClass('active');
|
|
||||||
const activeTab = $(this).attr('href');
|
|
||||||
$(activeTab).show();
|
|
||||||
|
|
||||||
//파라미터 확인
|
|
||||||
urlParam = location.search.substr(location.search.indexOf("?") + 1);
|
|
||||||
if(urlParam != ''){
|
|
||||||
urlParam = '?' + urlParam;
|
|
||||||
}
|
|
||||||
|
|
||||||
//파라미터 변경
|
|
||||||
getNewUrl('tabName', urlParam); //(변경·추가할 파라미터 이름, 현재 파라미터)
|
|
||||||
function getNewUrl(paramName, oldUrl) {
|
|
||||||
var newUrl;
|
|
||||||
var urlChk = new RegExp('[?&]'+paramName+'\\s*=');
|
|
||||||
var urlChk2 = new RegExp('(?:([?&])'+paramName+'\\s*=[^?&]*)')
|
|
||||||
|
|
||||||
|
|
||||||
if (urlChk.test(oldUrl)) { //해당 파라미터가 있을 때
|
|
||||||
newUrl = oldUrl.replace(urlChk2, "$1"+paramName+"=" + activeTab.substr(1));
|
|
||||||
} else if (/\?/.test(oldUrl)) { //해당 파라미터가 없고 다른 파라미터가 있을 때
|
|
||||||
newUrl = oldUrl + "&"+paramName+"=" + activeTab.substr(1);
|
|
||||||
} else { //파라미터가 없을 때
|
|
||||||
newUrl = oldUrl + "?"+paramName+"=" + activeTab.substr(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
history.pushState(null, null, newUrl);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//파라미터 값 검사
|
|
||||||
function getParameter(name) {
|
|
||||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
|
||||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
|
||||||
results = regex.exec(location.search);
|
|
||||||
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
|
|
||||||
}
|
|
||||||
|
|
||||||
var getParam = getParameter('tabName'); //선택한 탭 파라미터
|
|
||||||
var loadChk = getParameter('loadChk'); //첫 로드 여부 체크
|
|
||||||
|
|
||||||
if(getParam != ''){ //파라미터 값이 있으면 파라미터 값 기준으로 탭메뉴 선택
|
|
||||||
$('.tab_wrap .tit_list > li a[href="#'+getParam+'"]').parent().addClass('active');
|
|
||||||
$('.tab_wrap .tit_list > li a[href="#'+getParam+'"]').trigger('click');
|
|
||||||
|
|
||||||
if(loadChk == 'on'){ //처음 로드되었으면 스크롤 이동
|
|
||||||
//탭 위치로 이동
|
|
||||||
var tabTop = $('.tab_wrap').offset().top;
|
|
||||||
$(window).scrollTop(tabTop - 100);
|
|
||||||
|
|
||||||
//파라미터 확인
|
|
||||||
var urlParam = location.search.substr(location.search.indexOf("?") + 1);
|
|
||||||
if(urlParam != ''){
|
|
||||||
urlParam = '?' + urlParam;
|
|
||||||
}
|
|
||||||
|
|
||||||
//loadChk 파라미터 값 변경
|
|
||||||
loadChange('loadChk', urlParam);
|
|
||||||
function loadChange(paramName, oldUrl) {
|
|
||||||
var newUrl;
|
|
||||||
var urlChk = new RegExp('[?&]'+paramName+'\\s*=');
|
|
||||||
var urlChk2 = new RegExp('(?:([?&])'+paramName+'\\s*=[^?&]*)')
|
|
||||||
newUrl = oldUrl.replace(urlChk2, "$1"+paramName+"=off");
|
|
||||||
history.pushState(null, null, newUrl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}else{ //파라미터 값이 없으면 active 클래스 기준으로 탭메뉴 선택
|
|
||||||
var activeChk = 0;
|
|
||||||
$('.tab_wrap .tit_list > li').each(function(i) {
|
|
||||||
if ($(this).hasClass('active')){
|
|
||||||
$(this).addClass('active');
|
|
||||||
$(this).find('a').trigger('click');
|
|
||||||
activeChk ++
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//active 지정 안했을 시 첫 탭메뉴 선택
|
|
||||||
if(activeChk == 0){
|
|
||||||
$('.tab_wrap .tit_list > li:first-child a').trigger('click');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//뒤로가기 탭메뉴 복구
|
|
||||||
window.onpopstate = function(event) {
|
|
||||||
//초기화
|
|
||||||
$('.tab_wrap .tit_list > li').removeClass('active');
|
|
||||||
$('.tab_wrap .tab_list').hide();
|
|
||||||
var getParam2 = getParameter('tabName'); //선택한 탭 파라미터
|
|
||||||
|
|
||||||
//탭메뉴 열기
|
|
||||||
if(getParam2 != ''){
|
|
||||||
$('.tab_wrap .tit_list > li a[href="#'+getParam2+'"]').parent().addClass('active');
|
|
||||||
$('#'+getParam2).show()
|
|
||||||
}else{
|
|
||||||
$('.tab_wrap .tit_list > li:first-child').addClass('active');
|
|
||||||
$('.tab_wrap .tab_list:first-of-type').show();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function tab2(){
|
|
||||||
//탭메뉴 클릭할 때 실행
|
|
||||||
$(".tab_wrap .tit_list > li a").on( "click", function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
//초기화
|
|
||||||
$(".tab_wrap .tit_list > li").removeClass("active");
|
|
||||||
$(".tab_wrap .tab_list").hide();
|
|
||||||
|
|
||||||
//실행
|
|
||||||
$(this).parent().addClass("active");
|
|
||||||
var activeTab = $(this).attr("href");
|
|
||||||
$(activeTab).show();
|
|
||||||
});
|
|
||||||
|
|
||||||
//초기 탭 설정
|
|
||||||
var activeChk = 0;
|
|
||||||
$(".tab_wrap .tit_list > li").each(function(i) {
|
|
||||||
if ($(this).hasClass("active")){
|
|
||||||
$(this).addClass("active");
|
|
||||||
$(this).find('a').trigger("click");
|
|
||||||
activeChk ++
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//active 지정 안했을 시 첫 탭메뉴 선택
|
|
||||||
if(activeChk == 0){
|
|
||||||
$(".tab_wrap .tit_list > li:first-child a").trigger("click");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
let cache = 1;
|
|
||||||
function createMainTab(){
|
|
||||||
var mainDiv = document.createElement("div");
|
|
||||||
mainDiv.setAttribute("class","ui-tabs ui-widget ui-widget-content ui-corner-all");
|
|
||||||
mainDiv.style.height="100%";
|
|
||||||
mainDiv.onk_initialised = false;
|
|
||||||
return mainDiv;
|
|
||||||
}
|
|
||||||
function createTabHelper(){
|
|
||||||
var mainUl = document.createElement("ul");
|
|
||||||
mainUl.setAttribute("class","ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
|
|
||||||
return mainUl;
|
|
||||||
}
|
|
||||||
function createTabHelperElement(name,mainTab){
|
|
||||||
var mainLi = document.createElement("li");
|
|
||||||
var active = !mainTab.onk_initialised;
|
|
||||||
mainTab.onk_initialised=true;
|
|
||||||
if(active){
|
|
||||||
mainLi.setAttribute("class","ui-state-default ui-corner-top ui-tabs-selected ui-state-active");
|
|
||||||
}else{
|
|
||||||
mainLi.setAttribute("class","ui-state-default ui-corner-top");
|
|
||||||
}
|
|
||||||
mainLi.onk_createdActive = active;
|
|
||||||
mainLi.onk_id = "tab_"+cache;
|
|
||||||
var oLink = document.createElement("a");
|
|
||||||
oLink.setAttribute("href","#tab_"+cache);
|
|
||||||
oLink.innerHTML = name;
|
|
||||||
mainLi.appendChild(oLink);
|
|
||||||
cache++;
|
|
||||||
return mainLi;
|
|
||||||
}
|
|
||||||
function createTab(tabHelper){
|
|
||||||
var tabDiv = document.createElement("div");
|
|
||||||
if(tabHelper.onk_createdActive){
|
|
||||||
tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom");
|
|
||||||
}else{
|
|
||||||
tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide");
|
|
||||||
}
|
|
||||||
tabDiv.setAttribute("id",tabHelper.onk_id);
|
|
||||||
return tabDiv;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue