소유자·행위자 관리: 소유자 선택 팝업 JSP 신규 추가, UI/그리드 컬럼 정의 및 초기화 로직 구현, 선택/삭제 처리 추가
단속 등록&열람: 높이 필드 필수 여부 제거, 면적 입력 필드 길이 확장 및 최대값 유효성 검증 추가, 검색 필드 width 조정 단속 상세: 불법행위 정보 연동 로직 개선, 소유자/행위자 선택/삭제 기능 구현, 위치정보 그리드의 데이터 의존성 제거dev
박성영
4 months ago
parent
fb9deb93df
commit
9e4ac3ea20
@ -0,0 +1,399 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
||||
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
||||
|
||||
<div class="popup_wrap">
|
||||
<div class="popup_inner">
|
||||
<div class="popup_tit">
|
||||
<h2 class="tit">소유자 선택</h2>
|
||||
<a href="#" class="pop-x-btn modalclose" id="btnCloseTop"></a>
|
||||
</div>
|
||||
<!-- 중요로직: 단속 정보 파라미터를 hidden input으로 관리 -->
|
||||
<input type="hidden" id="crdnYr" name="crdnYr" value="${crdnYr}" />
|
||||
<input type="hidden" id="crdnNo" name="crdnNo" value="${crdnNo}" />
|
||||
<input type="hidden" id="pstnInfoId" name="pstnInfoId" value="${pstnInfoId}" />
|
||||
<div class="popup_con">
|
||||
<!-- 검색 영역 -->
|
||||
<div class="box_column">
|
||||
<div class="containers">
|
||||
<div class="forms_table_non">
|
||||
<form id="searchForm" name="searchForm">
|
||||
<table>
|
||||
<tr>
|
||||
<th class="th">성명</th>
|
||||
<td>
|
||||
<input type="text" id="searchFlnm" name="searchFlnm" class="input" maxlength="100" placeholder="성명을 입력하세요"/>
|
||||
</td>
|
||||
<th class="th">주민등록번호</th>
|
||||
<td>
|
||||
<input type="text" id="searchRrno" name="searchRrno" class="input" maxlength="100" placeholder="주민등록번호를 입력하세요"/>
|
||||
</td>
|
||||
<td style="text-align: right; border: 0px;">
|
||||
<button type="button" id="searchBtn" class="newbtn bg1">검색</button>
|
||||
<button type="button" id="resetBtn" class="newbtn bg5" style="margin-left: 5px;">초기화</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th">이메일</th>
|
||||
<td>
|
||||
<input type="text" id="searchEml" name="searchEml" class="input" maxlength="50" placeholder="이메일을 입력하세요"/>
|
||||
</td>
|
||||
<th class="th">전화번호</th>
|
||||
<td>
|
||||
<input type="text" id="searchTelno" name="searchTelno" class="input" maxlength="11" placeholder="전화번호를 입력하세요"/>
|
||||
</td>
|
||||
<td style="text-align: right; border: 0px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 그리드 영역 -->
|
||||
<div class="box_column" style="margin-top: 20px;">
|
||||
<ul class="box_title">
|
||||
<li class="tit">소유자 목록</li>
|
||||
<span id="totalCount" class="total-count" style="padding-left: 25px;padding-right: 25px;">총 0건</span>
|
||||
</ul>
|
||||
<div class="containers">
|
||||
<div id="ownrSelectGrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup_foot">
|
||||
<button type="button" id="selectBtn" class="newbtns bg1">선택</button>
|
||||
<button type="button" id="closeBtn" class="newbtns bg2">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function(window, $) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* 소유자 선택 팝업 관리 네임스페이스
|
||||
*/
|
||||
var CrdnOwnrSelectPopup = {
|
||||
/**
|
||||
* 그리드 관련 객체
|
||||
*/
|
||||
grid: {
|
||||
/**
|
||||
* 그리드 인스턴스
|
||||
*/
|
||||
instance: null,
|
||||
|
||||
/**
|
||||
* 그리드 설정 초기화
|
||||
* @returns {Object} 그리드 설정 객체
|
||||
*/
|
||||
initConfig: function() {
|
||||
// 데이터 소스 설정
|
||||
var dataSource = this.createDataSource();
|
||||
|
||||
// 그리드 설정 객체 생성
|
||||
var gridConfig = new XitTuiGridConfig();
|
||||
|
||||
// 기본 설정
|
||||
gridConfig.setOptDataSource(dataSource); // 데이터소스 연결
|
||||
gridConfig.setOptGridId('ownrSelectGrid'); // 그리드를 출력할 Element ID
|
||||
gridConfig.setOptGridHeight(350); // 그리드 높이(단위: px)
|
||||
gridConfig.setOptRowHeight(30); // 그리드 행 높이(단위: px)
|
||||
gridConfig.setOptRowHeaderType('checkbox'); // 행 첫번째 셀 타입(checkbox: 체크박스)
|
||||
gridConfig.setOptUseClientSort(true); // 클라이언트 사이드 정렬
|
||||
gridConfig.setOptColumns(this.getGridColumns());
|
||||
|
||||
return gridConfig;
|
||||
},
|
||||
|
||||
/**
|
||||
* 그리드 컬럼 정의
|
||||
* @returns {Array} 그리드 컬럼 배열
|
||||
*/
|
||||
getGridColumns: function() {
|
||||
return [
|
||||
{
|
||||
header: '번호',
|
||||
name: '_rowNum',
|
||||
align: 'center',
|
||||
width: 60,
|
||||
sortable: false,
|
||||
formatter: function(e) {
|
||||
return XitReverseRowNumberRenderer.format(CrdnOwnrSelectPopup.grid.instance.getData().length, e);
|
||||
}
|
||||
},
|
||||
{ header: '소유자ID', name: 'ownrId', align: 'center', width: 100, hidden: true },
|
||||
{ header: '성명', name: 'flnm', align: 'center', width: 120, sortable: true },
|
||||
{ header: '주민등록번호', name: 'rrno', align: 'center', width: 150 },
|
||||
{ header: '소유자구분', name: 'ownrSeCdNm', align: 'center', width: 100 },
|
||||
{ header: '전화번호', name: 'telno', align: 'center', width: 120 },
|
||||
{ header: '이메일', name: 'eml', align: 'left', width: 200 },
|
||||
{ header: '주소', name: 'addr', align: 'left', width: 200 },
|
||||
{ header: '상세주소', name: 'daddr', align: 'left', width: 200 },
|
||||
{ header: '지번전체주소', name: 'lotnoWholAddr', align: 'left', width: 300 },
|
||||
{ header: '도로명전체주소', name: 'roadNmWholAddr', align: 'left', width: 300 },
|
||||
{ header: '우편번호', name: 'zip', align: 'center', width: 80 },
|
||||
{ header: '비고', name: 'rmrk', align: 'left', width: 200 },
|
||||
{ header: '등록일시', name: 'regDt', align: 'center', width: 150}
|
||||
];
|
||||
},
|
||||
|
||||
/**
|
||||
* 데이터 소스 생성
|
||||
* @returns {Object} 데이터 소스 설정 객체
|
||||
*/
|
||||
createDataSource: function() {
|
||||
return {
|
||||
api: {
|
||||
readData: {
|
||||
url: '<c:url value="/crdn/crndRegistAndView/crdnOwnrSelect/list.ajax"/>',
|
||||
method: 'POST',
|
||||
contentType: 'application/x-www-form-urlencoded',
|
||||
processData: true
|
||||
}
|
||||
},
|
||||
initialRequest: true, // 초기 데이터 요청 여부
|
||||
serializer: function(params) {
|
||||
// 기본 파라미터 (페이지 정보 등)
|
||||
var defaultParams = $.param(params);
|
||||
// 검색 조건 추가
|
||||
var searchParams = $.param({
|
||||
flnm: $('#searchFlnm').val() || '',
|
||||
rrno: $('#searchRrno').val() || '',
|
||||
telno: $('#searchTelno').val() || '',
|
||||
eml: $('#searchEml').val() || '',
|
||||
crdnYr: $('#crdnYr').val() || '',
|
||||
crdnNo: $('#crdnNo').val() || '',
|
||||
pstnInfoId: $('#pstnInfoId').val() || ''
|
||||
});
|
||||
return defaultParams + '&' + searchParams;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 그리드 인스턴스 생성
|
||||
*/
|
||||
create: function() {
|
||||
var gridConfig = this.initConfig();
|
||||
var Grid = tui.Grid;
|
||||
this.instance = gridConfig.instance(Grid);
|
||||
|
||||
// 그리드 테마 설정
|
||||
Grid.applyTheme('striped');
|
||||
|
||||
this.gridBindEvents();
|
||||
},
|
||||
|
||||
/**
|
||||
* 그리드 이벤트 바인딩
|
||||
*/
|
||||
gridBindEvents: function() {
|
||||
var self = this;
|
||||
|
||||
// 데이터 로딩 완료 이벤트 - 체크박스 상태 복원
|
||||
this.instance.on('successResponse', function(ev) {
|
||||
var responseObj = JSON.parse(ev.xhr.response);
|
||||
if( responseObj ){
|
||||
var totalCount = responseObj.data.contents.length;
|
||||
$("#totalCount").text('총 ' + totalCount.toLocaleString() + '건');
|
||||
}
|
||||
});
|
||||
|
||||
// 행 더블클릭 시 선택
|
||||
this.instance.on('dblclick', function(ev) {
|
||||
var rowData = self.instance.getRow(ev.rowKey);
|
||||
if (rowData) {
|
||||
CrdnOwnrSelectPopup.selectOwners([rowData]);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 체크된 행들 가져오기
|
||||
*/
|
||||
getCheckedRows: function() {
|
||||
return this.instance ? this.instance.getCheckedRows() : [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 모듈 초기화
|
||||
*/
|
||||
init: function() {
|
||||
// 그리드 생성
|
||||
this.grid.create();
|
||||
this.bindEvents();
|
||||
},
|
||||
|
||||
/**
|
||||
* 이벤트 바인딩
|
||||
*/
|
||||
bindEvents: function() {
|
||||
var self = this;
|
||||
|
||||
// 검색 버튼 클릭 이벤트
|
||||
$('#searchBtn').on('click', function() {
|
||||
self.search();
|
||||
});
|
||||
|
||||
// 초기화 버튼 클릭 이벤트
|
||||
$('#resetBtn').on('click', function() {
|
||||
$('#searchForm')[0].reset();
|
||||
self.search();
|
||||
});
|
||||
|
||||
// 선택 버튼 클릭 이벤트
|
||||
$('#selectBtn').on('click', function() {
|
||||
var checkedRows = self.grid.getCheckedRows();
|
||||
if (checkedRows.length === 0) {
|
||||
alert('선택할 소유자를 체크해주세요.');
|
||||
return;
|
||||
}
|
||||
self.selectOwners(checkedRows);
|
||||
});
|
||||
|
||||
// 닫기 버튼 클릭 이벤트
|
||||
$('#closeBtn, #btnCloseTop').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.close();
|
||||
});
|
||||
|
||||
// Enter 키로 검색
|
||||
$('#searchForm input').on('keypress', function(e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
$('#searchBtn').click();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 검색 함수
|
||||
*/
|
||||
search: function() {
|
||||
if (this.grid.instance) {
|
||||
this.grid.instance.readData();
|
||||
}
|
||||
},
|
||||
|
||||
// 중요로직: 선택된 소유자들을 TB_OWNR_INFO에 저장
|
||||
selectOwners: function(selectedOwners) {
|
||||
if (!selectedOwners || selectedOwners.length === 0) {
|
||||
alert('선택할 소유자가 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this;
|
||||
// 중요로직: hidden input에서 파라미터 값 가져오기
|
||||
var crdnYr = $('#crdnYr').val();
|
||||
var crdnNo = $('#crdnNo').val();
|
||||
var pstnInfoId = $('#pstnInfoId').val();
|
||||
|
||||
if (!crdnYr || !crdnNo || !pstnInfoId) {
|
||||
alert('단속 기본정보가 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 중요로직: 각 선택된 소유자에 대해 순차적으로 저장 처리
|
||||
var saveCount = 0;
|
||||
var duplicateCount = 0;
|
||||
var errorCount = 0;
|
||||
var duplicateOwners = [];
|
||||
|
||||
function processSaveOwner(index) {
|
||||
if (index >= selectedOwners.length) {
|
||||
// 모든 처리 완료 시 결과 표시
|
||||
self.showSaveResult(saveCount, duplicateCount, errorCount, duplicateOwners);
|
||||
return;
|
||||
}
|
||||
|
||||
var owner = selectedOwners[index];
|
||||
|
||||
$.ajax({
|
||||
url: '<c:url value="/crdn/crndRegistAndView/crdnOwnrInfo/saveSelectedOwnr.ajax"/>',
|
||||
type: 'POST',
|
||||
data: {
|
||||
crdnYr: crdnYr,
|
||||
crdnNo: crdnNo,
|
||||
pstnInfoId: pstnInfoId,
|
||||
ownrId: owner.ownrId
|
||||
},
|
||||
success: function(response) {
|
||||
if (response && response.success) {
|
||||
saveCount++;
|
||||
} else if (response && response.message && response.message.indexOf('이미 등록') !== -1) {
|
||||
duplicateCount++;
|
||||
duplicateOwners.push(owner.flnm || '이름없음');
|
||||
} else {
|
||||
errorCount++;
|
||||
}
|
||||
// 다음 소유자 처리
|
||||
processSaveOwner(index + 1);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('소유자 저장 오류:', error);
|
||||
errorCount++;
|
||||
// 다음 소유자 처리
|
||||
processSaveOwner(index + 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 첫 번째 소유자부터 처리 시작
|
||||
processSaveOwner(0);
|
||||
},
|
||||
|
||||
// 중요로직: 저장 결과 표시 및 부모창 새로고침
|
||||
showSaveResult: function(saveCount, duplicateCount, errorCount, duplicateOwners) {
|
||||
var message = '';
|
||||
|
||||
if (saveCount > 0) {
|
||||
message += saveCount + '건의 소유자 정보가 저장되었습니다.\n';
|
||||
}
|
||||
|
||||
if (duplicateCount > 0) {
|
||||
message += duplicateCount + '건의 소유자는 이미 등록되어 있습니다.\n';
|
||||
if (duplicateOwners.length > 0) {
|
||||
message += '(중복: ' + duplicateOwners.join(', ') + ')\n';
|
||||
}
|
||||
}
|
||||
|
||||
if (errorCount > 0) {
|
||||
message += errorCount + '건의 소유자 저장 중 오류가 발생했습니다.\n';
|
||||
}
|
||||
|
||||
if (message) {
|
||||
alert(message.trim());
|
||||
}
|
||||
|
||||
// 중요로직: 저장 성공 시 부모창 소유자 정보 그리드 새로고침
|
||||
if (saveCount > 0) {
|
||||
if (window.opener && window.opener.CrdnDetailViewOwnrInfo && window.opener.CrdnDetailViewOwnrInfo.search) {
|
||||
window.opener.CrdnDetailViewOwnrInfo.search();
|
||||
}
|
||||
}
|
||||
|
||||
window.close();
|
||||
},
|
||||
|
||||
// 체크된 행들 가져오기
|
||||
getCheckedRows: function() {
|
||||
return this.instance ? this.instance.getCheckedRows() : [];
|
||||
}
|
||||
};
|
||||
|
||||
// DOM 준비 완료 시 초기화
|
||||
$(document).ready(function() {
|
||||
// 중요로직: 소유자 선택 그리드 초기화
|
||||
CrdnOwnrSelectPopup.init();
|
||||
});
|
||||
|
||||
// 전역 네임스페이스에 모듈 노출
|
||||
window.CrdnOwnrSelectPopup = CrdnOwnrSelectPopup;
|
||||
|
||||
})(window, jQuery);
|
||||
</script>
|
||||
Loading…
Reference in New Issue