You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
clean-parking/src/main/webapp/WEB-INF/views/biz/totalInfo/totalInfo_popup.jsp

666 lines
30 KiB
Plaintext

<%--
Created by IntelliJ IDEA.
User: kurt
Date: 2025. 7. 31.
Time: 오후 5:34
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="main_body">
<div id="tabs" class="main_body">
<ul>
<li><a href="#tabs-a">위반정보</a></li>
<li><a href="#tabs-b">의견진술</a></li>
<li><a href="#tabs-c">세부내역</a></li>
<li><a href="#tabs-d">부과이후</a></li>
<li><a href="#tabs-e">민원내역</a></li>
</ul>
<div id="tabs-a">
<div class="detail-card">
<div class="card-header">
<div class="title">개별 총정보</div>
<div class="actions">
<span class="pill">Double Click 민원원본보기</span>
<button type="button" class="close-btn">닫기 Esc</button>
</div>
</div>
<!-- 상단 네비/페이지 인디케이터 -->
<div class="card-toolbar">
<%-- 부모창에서 받아오는 리스트 배열 --%>
<input type="hidden" id="mmCodes" />
<%-- 부모창에서 받아오는 리스크 커서 --%>
<input type="hidden" id="cursor" />
<%-- 개별총정보 상태값 --%>
<input type="hidden" id="infoState" value="init" />
<div class="page-indicator">
<span id="cursorCnt">0</span>of <span id="total">0</span>
</div>
<div class="nav-group">
<button type="button" class="nav-btn" name="navigate" data-act="first" id="first">◀◀</button>
<button type="button" class="nav-btn" name="navigate" data-act="prev">◀</button>
<button type="button" class="nav-btn" name="navigate" data-act="next">▶</button>
<button type="button" class="nav-btn" name="navigate" data-act="last">▶▶</button>
</div>
</div>
<div class="detail-body">
<!-- 좌측 정보 -->
<div class="left">
<div class="section-title">위반 정보</div>
<div class="subnote">등록구분/위반일시/위반내역 등</div>
<div class="form-grid">
<!-- 1줄: 등록구분 / 자료출처 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">등록구분</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmDlgb" id="mmDlgb" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">자료출처</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmIngb" id="mmIngb" value="" readonly>
</div>
</div>
</div>
<!-- 2줄: 위반일시 / 위반내용 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">위반일시</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmDate" id="mmDate" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">위반내용</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmLawgb" id="mmLawgb" value="" readonly>
</div>
</div>
</div>
<!-- 3줄: 신고자 / 연락처 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">신고자</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmSgnm" id="mmSgnm" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">연락처</div>
<div class="fld">
<input type="text" name="cpAnswer" data-field="asCell" id="asCell" value="" readonly>
</div>
</div>
</div>
<!-- 4줄: 담당자 / 공개여부 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">담당자</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmSgtel" id="mmSgtel" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">공개여부</div>
<div class="fld">
<input type="text" data-field="" id="" value="" readonly>
</div>
</div>
</div>
<!-- 5줄: 신고내용 (textarea, 한 줄 전체) -->
<div class="form-row block">
<div class="field-group full">
<div class="lbl">신고내용</div>
<div class="fld">
<textarea name="cpMain" data-field="mmSgcont" id="mmSgcont" value="" readonly></textarea>
</div>
</div>
</div>
<!-- 6줄: 위반장소 / 접수번호 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">위반장소</div>
<div class="fld">
<input type="text" data-field="" id="" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">접수번호</div>
<div class="fld">
<input type="text" name="cpAnswer" data-field="asJsno" id="asJsno" value="" readonly>
</div>
</div>
</div>
<!-- 7줄: 접수일자 / 목록번호 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">접수일자</div>
<div class="fld">
<input type="text" name="cpAnswer" data-field="asJsdate" id="asJsdate" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">목록번호</div>
<div class="fld">
<input type="text" name="cpAnswer" data-field="asBbsNo" id="asBbsNo" value="" readonly>
</div>
</div>
</div>
<!-- 8줄: 법정동 / (빈칸) -->
<div class="form-row">
<div class="field-group">
<div class="lbl">법정동</div>
<div class="fld">
<input type="text" data-field="" id="" value="" readonly>
</div>
</div>
<div class="field-group empty"></div>
</div>
<!-- 9줄: 사진등록금액 / 부과금액 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">사진등록금액</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmKeum1" id="mmKeum1" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">부과금액</div>
<div class="fld">
<input type="text" name="cpMain" data-field="mmKeum2" id="mmKeum2" value="" readonly>
</div>
</div>
</div>
<!-- 10줄: 감액금액 / 총수납액 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">감액금액</div>
<div class="fld">
<input type="text" data-field="" id="" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">총수납액</div>
<div class="fld">
<input type="text" data-field="" id="" value="" readonly>
</div>
</div>
</div>
<!-- 11줄: 잔액 / 특기사항 버튼 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">잔액</div>
<div class="fld">
<input class="hl" data-field="" type="text" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">특기사항</div>
<div class="fld">
<button type="button" class="btn btn-light" id="btnSpecial">특기사항 보기</button>
</div>
</div>
</div>
<!-- 구분선 -->
<div class="bar"></div>
<!-- 12줄: 처리상태일시 / 처리상태 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">처리상태일시</div>
<div class="fld">
<input type="text" name="cpAnswer" data-field="asStateDt" id="asStateDt" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">처리상태</div>
<div class="fld">
<input type="text" class="hl" name="cpAnswer" data-field="asState" id="asState" value="" readonly>
</div>
</div>
</div>
<!-- 13줄: 차량명 / 차량색상 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">차량명</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">차량색상</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
</div>
<!-- 14줄: 연료구분 / (빈칸) -->
<div class="form-row">
<div class="field-group">
<div class="lbl">연료구분</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
<div class="field-group empty"></div>
</div>
<!-- 구분선 -->
<div class="bar"></div>
<!-- 소유주 정보 타이틀 -->
<div class="section-title">소유주 정보</div>
<!-- 15줄: 소유주 / 등록구분 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">소유주</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">등록구분</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
</div>
<!-- 16줄: 주민번호 / 우편번호 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">주민번호</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">우편번호</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
</div>
<!-- 17줄: 주소 (한 줄 전체) -->
<div class="form-row block">
<div class="field-group full">
<div class="lbl">주소</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
</div>
<!-- 18줄: 번지 / 차대번호 -->
<div class="form-row">
<div class="field-group">
<div class="lbl">번지</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
<div class="field-group">
<div class="lbl">차대번호</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
</div>
<!-- 19줄: 도로코드 / (빈칸) -->
<div class="form-row">
<div class="field-group">
<div class="lbl">도로코드</div>
<div class="fld">
<input type="text" data-field="" value="" readonly>
</div>
</div>
<div class="field-group empty"></div>
</div>
</div>
</div>
<!-- 우측 사진/지도/프리뷰 -->
<div class="right">
<div class="section-title">사진</div>
<div class="thumbs" id="photoThumbs">
<%-- IMG area --%>
</div>
<div class="mapbox">
<img src="" alt="지도">
</div>
<div class="preview" id="photoPreviewBox">
<img id="photoPreview" src="${pageContext.request.contextPath}/static/img/sample-1.jpg" alt="미리보기">
</div>
</div>
<div id="btn-area">
<button type="button" class="btn btn-light" id="infoEdit" hidden>수정</button>
<button type="button" class="btn btn-light" id="infoSave" hidden>저장</button>
<button type="button" class="btn btn-light" id="infoReadReturn" hidden>되돌리기</button>
<button type="button" class="btn btn-light" id="infoDel" hidden>삭제</button>
<button type="button" class="btn btn-light" id="delay" hidden>보류</button>
<button type="button" class="btn btn-light" id="destructionDocReReg" hidden>서손자료 재등록</button>
<button type="button" class="btn btn-light" id="buillPrint" hidden>고지서 출력</button>
<button type="button" class="btn btn-light" name="changeSt" id="non-target" value="81" hidden>미부과</button>
<button type="button" class="btn btn-light" id="stateChange" hidden>처리상태 변경</button>
</div>
</div>
<div class="statusbar">
<div class="status-left" id="mmCode"></div>
<div class="status-right">
<span><span class="count-dot" id="photoCount">3</span> 사진</span>
<label><input type="checkbox" id="hidePhoto"> 사진 안보이기</label>
</div>
</div>
</div>
</div>
<div id="photoEditSection" style="display:none;">
<jsp:include page="/WEB-INF/views/biz/totalInfo/totalInfo_photo_dialog.jsp" />
</div>
<div id="tabs-b">
의견진술
</div>
<div id="tabs-c">
세부내역
</div>
<div id="tabs-d">
부과이후
</div>
<div id="tabs-e">
민원내역
</div>
</div>
</div>
<!-- /Main body -->
<%--<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>--%>
<%--<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>--%>
<script type="text/javascript">
// const { cursor, mmCodes } = JSON.parse(localStorage.getItem("TOTAL_INFO_STATE"));
//해당 객체는 팝업으로 인한 브라우저 전역선언이다.
//일반적으로 함수를 선언할땐 그냥 fnBiz로 선언하면 된다.
//window 전역을 그냥 복사하면 덮어씌워져서 난리남.
//sample.jsp 형태로 하면됨
window.TOTAL_INFO_POPUP_API = {
search: () => {
console.log("Total Info Search!!!!")
const { cursor, mmCodes } = JSON.parse(localStorage.getItem("TOTAL_INFO_STATE"));
$.ajax({
// PathVariable 형태로 url를 동적으로 쓰는방식이다.
// 해당 방식 이외에 그냥 쿼리스트링으로 넘기는 방법도 있다.
url: "/total/info/" + cursor + "/info.ajax",
type: "GET",
dataType: 'json',
success: function(response) {
console.log(response.data)
$("#mmIngb").val(response.data.cpMain.mmIngb);
$("#mmDlgb").val(response.data.cpMain.mmDlgb);
$("#mmLawgb").val(response.data.cpMain.mmLawgb);
$("#mmKeum1").val(response.data.cpMain.mmKeum1);
$("#mmKeum2").val(response.data.cpMain.mmKeum2);
$("#mmSgcont").val(response.data.cpMain.mmSgcont);
$("#mmSgnm").val(response.data.cpMain.mmSgnm);
$("#mmSgtel").val(response.data.cpMain.mmSgtel);
$("#mmDate").val(response.data.cpMain.mmDate);
$("#asBbsNo").val(response.data.cpAnswer.asBbsNo);
$("#asState").val(response.data.cpAnswer.asState);
$("#asStateDt").val(response.data.cpAnswer.asStateDt);
$("#asCell").val(response.data.cpAnswer.asCell);
$("#asJsno").val(response.data.cpAnswer.asJsno);
$("#asJsdate").val(response.data.cpAnswer.asJsdate);
$("#mmCode").text(response.data.cpMain.mmCode.substring(5).replace(/^(\d{4})(.*)$/, '$1-$2'))
// 이미지 태그 동적 추가
const mmCode = response.data.cpMain.mmCode;
const imgPath = "${sessionScope.sessionVO.imgPath}";
console.log(imgPath)
const thumbContainer = $("#photoThumbs");
const imgList = ['A','B','C']; // 필요한 개수만큼
thumbContainer.empty(); // 기존 내용 제거
imgList.forEach(num => {
const img = `
<div class="thumb">
<img src="/images/\${mmCode}\${num}.jpg" alt="사진 ${num}" onerror="this.style.display='none'">
</div>`
;
thumbContainer.append(img);
});
//네비게이터 커서 카운트
$("#cursorCnt").text(mmCodes.indexOf(cursor) + 1);
$("#total").text(mmCodes.length);
// total info 초기상태
$("#infoState").val("init").trigger("change");
},
error: function(xhr, status, error) {
$("#result").text("조회 실패");
}
});
},
}
let fnBiz = {
init: () => {
// fnBiz.search();
},
infoSave: () => {
const { cursor, mmCodes } = JSON.parse(localStorage.getItem("TOTAL_INFO_STATE"));
const payload = fnBiz.collectByDataField();
console.log("data-field payload:", payload);
$.ajax({
url: "/total/info/" + cursor + "/info/edit.ajax",
type: "POST",
data: JSON.stringify(payload),
contentType: "application/json",
success: function(response) {
alert("수정완료.")
},
error: function(xhr, status, error) {
$("#result").text("수정 실패");
}
});
},
changeState: (e) => {
let state = e.target.value;
const { cursor, mmCodes } = JSON.parse(localStorage.getItem("TOTAL_INFO_STATE"));
$.ajax({
url: `/total/info/\${cursor}/\${state}/state.ajax`,
type: "POST",
contentType: "application/json",
success: function(response) {
alert("완료.")
},
error: function(xhr, status, error) {
$("#result").text("수정 실패");
}
});
},
btnSet: (infoState) => {
switch (infoState) {
case "init":
$("#btn-area > button").prop("hidden", true);
$("#infoEdit").prop("hidden", false);
$("#infoDel").prop("hidden", false);
$("#delay").prop("hidden", false);
$("#buillPrint").prop("hidden", false);
$("#stateChange").prop("hidden", false);
$("#non-target").prop("hidden", false);
break;
case "edit":
$("#btn-area > button").prop("hidden", true);
$("#infoSave").prop("hidden", false);
$("#infoReadReturn").prop("hidden", false);
break;
}
switch ($("#asState")) {
case "":
$("#destructionDocReReg").prop("hidden", false);
}
},
collectByDataField: () => {
const payload = {};
$("[data-field]").each(function () {
const key = $(this).data("field");
const val = $(this).val();
payload[key] = val;
});
return payload;
},
eventListener: () => {
/** 네비게이션 */
$("button[name=navigate]").on("click", (e) => {
let flag = $(e.currentTarget).data("act");
let {cursor, mmCodes} = JSON.parse(localStorage.getItem("TOTAL_INFO_STATE"));
if (!cursor || !mmCodes) return;
const idx = mmCodes.indexOf(cursor);
let nextCursor = cursor;
switch (flag) {
case "first":
nextCursor = mmCodes[0];
break;
case "prev":
nextCursor = mmCodes[Math.max(0, idx - 1)];
break;
case "next":
nextCursor = mmCodes[Math.min(mmCodes.length - 1, idx + 1)];
break;
case "last":
nextCursor = mmCodes[mmCodes.length - 1];
break;
}
// 스토리지 업데이트
localStorage.setItem("TOTAL_INFO_STATE", JSON.stringify({ cursor: nextCursor, mmCodes: mmCodes }))
//커서로 조회
TOTAL_INFO_POPUP_API.search();
});
/** 개별총정보 상태변경 트리거 */
$("#infoState").on("change", () => {
fnBiz.btnSet($("#infoState").val());
})
/** 개별총정보 수정모드 진입*/
$("#infoEdit").on("click", () => {
$("input").prop("readonly", false);
$("#infoState").val("edit").trigger("change");
})
/** 개별총정보 읽기모드 진입 */
$("#infoReadReturn").on("click", () => {
$("input").prop("readonly", true);
TOTAL_INFO_POPUP_API.search();
$("#infoState").val("init").trigger("change");
})
/** 정보수정 */
$("#infoSave").on("click", () => {
fnBiz.infoSave();
$("input").prop("readonly", true);
TOTAL_INFO_POPUP_API.search();
})
/** 상태값 변경 */
$("button[name='changeSt']").on("click", (e) => {
let flag = e.target.value;
fnBiz.changeState(e, flag);
})
/** 사진 더블클릭 → 원본 다이얼로그 */
$("#photoThumbs").on("dblclick", "img", function () {
const src = $(this).attr("src"); // 썸네일 경로
$("#photoDialogImg").attr("src", src); // 같은 경로를 원본으로 사용 (원본/썸네일 분리돼 있으면 여기서 가공)
$("#photoDialog").dialog("open");
});
}
}
$(function () {
$("#tabs").tabs();
TOTAL_INFO_POPUP_API.search();
fnBiz.eventListener();
});
</script>