비고 자세히 볼수 있도록 레이어팝업 추가

main
박성영 2 weeks ago
parent 5d1a3d31d0
commit 84ed820cfe

@ -99,23 +99,23 @@ public class ComparisonRemarkBuilder {
StringBuilder sb = new StringBuilder();
// 첫 줄: 명의이전(25.9.3.) 이전소유자 상품용
sb.append("명의이전(").append(chgYmdFormatted).append(") 이전소유자 상품용").append(", ");
sb.append("명의이전(").append(chgYmdFormatted).append(") 이전소유자 상품용").append("\n");
// 둘째 줄: 차량번호
sb.append(StringUtil.nvl(vhclno)).append(", ");
sb.append(StringUtil.nvl(vhclno)).append("\n");
// 셋째 줄: 검사기간 시작일자 - 종료일자
sb.append(" - 검사기간: ").append(DateUtil.formatDateString(vldPrdExpryYmd))
.append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append(", ");
.append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append("\n");
// 넷째 줄: 검사일 일자
sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append(", ");
sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append("\n");
// 다섯째 줄: 명의이전 일자
sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append(", ");
sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append("\n");
// 여섯째 줄: 상품용 일자 (명의이전 일자와 동일)
sb.append(" - 상품용: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append(", ");
sb.append(" - 상품용: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append("\n");
// 일곱째 줄: 일수차이
sb.append("일수차이: ").append(daysBetween).append("일");
@ -161,20 +161,20 @@ public class ComparisonRemarkBuilder {
StringBuilder sb = new StringBuilder();
// 첫 줄: 명의이전(25.9.3.) 이전소유자 상품용
sb.append("명의이전(").append(chgYmdFormatted).append(")").append(", ");
sb.append("명의이전(").append(chgYmdFormatted).append(")").append("\n");
// 둘째 줄: 차량번호
sb.append(StringUtil.nvl(vhclno)).append(", ");
sb.append(StringUtil.nvl(vhclno)).append("\n");
// 셋째 줄: 검사기간 시작일자 - 종료일자
sb.append(" - 검사기간: ").append(DateUtil.formatDateString(vldPrdExpryYmd))
.append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append(", ");
.append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append("\n");
// 넷째 줄: 검사일 일자
sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append(", ");
sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append("\n");
// 다섯째 줄: 명의이전 일자
sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append(", ");
sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append("\n");
// 일곱째 줄: 일수차이
sb.append("일수차이: ").append(daysBetween).append("일");

@ -89,6 +89,17 @@
</div>
<!-- /Main body -->
<!-- 비고 레이어 팝업 -->
<div id="rmrkLayerPopup" style="display: none; position: fixed; z-index: 10000; background: white; border: 2px solid #2196F3; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); min-width: 400px; max-width: 600px;">
<div id="rmrkPopupHeader" style="background: #2196F3; color: white; padding: 12px 15px; cursor: move; border-radius: 6px 6px 0 0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: bold;">비고 상세</span>
<span id="rmrkPopupClose" onclick="closeRmrkPopup()" style="cursor: pointer; font-size: 20px; line-height: 1;">&times;</span>
</div>
<div style="padding: 20px; max-height: 400px; overflow-y: auto;">
<pre id="rmrkPopupContent" style="white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: inherit; font-size: 14px; line-height: 1.6;"></pre>
</div>
</div>
<script type="text/javascript">
/**
@ -423,7 +434,19 @@
name: 'rmrk',
align: 'left',
width: 200,
editor: 'text'
editor: 'text',
formatter: function(e) {
var rmrk = e.value || '';
var displayText = rmrk.length > 30 ? rmrk.substring(0, 30) + '...' : rmrk;
if (rmrk && rmrk.trim()) {
// 비고 값이 있으면 아이콘 + 텍스트 표시
var escapedRmrk = rmrk.replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '');
return '<span class="mdi mdi-note-text" style="color: #2196F3; cursor: pointer; margin-right: 5px;" onclick="showRmrkPopup(\'' + escapedRmrk + '\')"></span>' +
'<span style="cursor: pointer;" onclick="showRmrkPopup(\'' + escapedRmrk + '\')">' + displayText + '</span>';
}
return displayText;
}
},
{ header: '기본사항조회성명', name: 'carBscMttrInqFlnm', align: 'center', width: 100 },
{ header: '기본사항조회시군구코드', name: 'carBscMttrInqSggCd', align: 'center', width: 100, hidden: true },
@ -979,4 +1002,97 @@
window.open(url, '_blank');
}
/**
* 비고 레이어 팝업 열기 (전역 함수)
*/
function showRmrkPopup(rmrkText) {
var $popup = $('#rmrkLayerPopup');
var $content = $('#rmrkPopupContent');
// 이스케이프된 문자 복원
rmrkText = rmrkText.replace(/\\n/g, '\n').replace(/\\'/g, "'");
// 내용 설정
$content.text(rmrkText);
// 팝업 표시 (화면 중앙) - transform 대신 계산된 위치 사용
$popup.css({
display: 'block',
transform: 'none'
});
// 중앙 위치 계산
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var popupWidth = $popup.outerWidth();
var popupHeight = $popup.outerHeight();
$popup.css({
left: (windowWidth - popupWidth) / 2 + 'px',
top: (windowHeight - popupHeight) / 2 + 'px'
});
// 드래그 기능 초기화
initRmrkPopupDrag();
}
/**
* 비고 레이어 팝업 닫기 (전역 함수)
*/
function closeRmrkPopup() {
$('#rmrkLayerPopup').hide();
}
/**
* 비고 레이어 팝업 드래그 기능 초기화
*/
var rmrkPopupDragInitialized = false;
function initRmrkPopupDrag() {
if (rmrkPopupDragInitialized) {
return;
}
var $popup = $('#rmrkLayerPopup');
var $header = $('#rmrkPopupHeader');
var $closeBtn = $('#rmrkPopupClose');
var isDragging = false;
var dragOffset = { x: 0, y: 0 };
$header.on('mousedown', function(e) {
// 닫기 버튼 클릭 시 드래그 시작하지 않음
if ($(e.target).is($closeBtn) || $(e.target).closest('#rmrkPopupClose').length > 0) {
return;
}
isDragging = true;
var popupOffset = $popup.offset();
dragOffset.x = e.pageX - popupOffset.left;
dragOffset.y = e.pageY - popupOffset.top;
e.preventDefault(); // 텍스트 선택 방지
});
$(document).on('mousemove', function(e) {
if (isDragging) {
$popup.css({
left: e.pageX - dragOffset.x + 'px',
top: e.pageY - dragOffset.y + 'px'
});
}
});
$(document).on('mouseup', function() {
isDragging = false;
});
rmrkPopupDragInitialized = true;
}
// 팝업 외부 클릭 시 닫기 (선택사항)
$(document).on('click', function(e) {
var $popup = $('#rmrkLayerPopup');
if ($popup.is(':visible') && !$(e.target).closest('#rmrkLayerPopup, .mdi-note-text').length) {
closeRmrkPopup();
}
});
</script>

Loading…
Cancel
Save