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