From 048dded1b2abdfdfd3764b7431eb9b4c6e7eaa6f Mon Sep 17 00:00:00 2001
From: leebeomjun <leebj91@xit.co.kr>
Date: Thu, 13 Jul 2023 15:13:40 +0900
Subject: [PATCH] =?UTF-8?q?=EC=97=85=EB=AC=B4=EB=B3=84=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=EC=A1=B0=EA=B1=B4,=20=EC=97=85=EB=AC=B4=EB=B3=84=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=ED=95=AD=EB=AA=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/fims/crdn/crdn05030-info.jsp  | 138 ++++++++++--------
 .../WEB-INF/jsp/fims/crdn/crdn06010-main.jsp  |  26 +++-
 .../WEB-INF/jsp/fims/crdn/crdn06020-main.jsp  |  41 ++++--
 3 files changed, 127 insertions(+), 78 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05030-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05030-info.jsp
index 167fe0ff..157678e2 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05030-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05030-info.jsp
@@ -2,12 +2,12 @@
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 
 <div class="d-flex flex-row justify-content-evenly">
-
 	<div class="card" style="max-width:1100px;" title="단속정보">
 		<form id="frmEdit--${pageName}">
 			<input name="crdnId" type="hidden" data-map="CRDN_ID" />
 			<input id="taskSeCd--${pageName}" name="taskSeCd" type="hidden" value="${taskSeCd}" />
 			<div class="row g-1">
+				<div class="col-md-12 slot-edit" data-slot-index="0"></div>
 				<div class="col-md-4">
 					<label for="crdnYmd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end required">
 						위반일자
@@ -29,7 +29,7 @@
 					</label>
 					<input type="text" id="vhrno--${pageName}" name="vhrno" data-map="VHRNO" class="form-control" required />
 				</div>
-				<div class="col-md-12">
+				<div class="col-md-6">
 					<label for="vltnCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">
 						위반내용
 					</label>
@@ -39,24 +39,23 @@
 		                </c:forEach>
 					</select>
 				</div>
-				
 				<div class="col-md-6 select2-primary">
 					<label for="crdnStdgNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">법정동</label>
 					<input type="text" id="crdnStdgNm--${pageName}" name="crdnStdgNm" data-map="CRDN_STDG_NM" class="form-control" readonly/>
 					<button type="button" class="btn btn-sm btn-outline-dark" onclick="">검색</button>
 				</div>
-				<div class="col-md-12">
+				<div class="col-md-4">
 					<label for="crdnPlc--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">위반장소</label>
 					<input type="text" id="crdnPlc--${pageName}" name="crdnPlc" data-map="CRDN_PLC" class="form-control" />
 				</div>
-				
-				
-				
+				<div class="col-md-8 slot-edit" data-slot-index="1">
+
+				</div>
 				<div class="col-md-12">
 					<label for="etcCn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">특기사항</label>
 					<input type="text" id="etcCn--${pageName}" name="etcCn" data-map="ETC_CN" class="form-control" />
 				</div>
-				<div class="col-md-12">
+				<div class="col-md-4">
 					<label for="rtpyrNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">소유자</label>
 					<input type="text" id="rtpyrNm--${pageName}" name="rtpyrNm" data-map="RTPYR_NM" class="form-control" />
 				</div>
@@ -73,10 +72,6 @@
 					<input type="text" id="rtpyrNo--${pageName}" name="rtpyrNo" data-map="RTPYR_NO" class="form-control privacy" />
 					<input type="text" id="mask-rtpyrNo--${pageName}" class="form-control privacy-mask" disabled value="******"/>
 				</div>
-				<div class="col-md-4">
-					<label for="vin--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
-					<input type="text" id="vin--${pageName}" name="vin" data-map="VIN" class="form-control" readonly />
-				</div>
 				<div class="col-md-12">
 					<label for="addr--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
 					<input type="text" id="addr--${pageName}" name="addr" data-map="ADDR" class="form-control w-px-700" />
@@ -93,15 +88,21 @@
 				<div class="col-md-6">
 					차량명칭/차량색상은 입력항목이 아닙니다.
 				</div>
-				<div class="col-md-6">
+				<div class="col-md-4">
+					<label for="vin--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
+					<input type="text" id="vin--${pageName}" name="vin" data-map="VIN" class="form-control" readonly />
+				</div>
+				<div class="col-md-4 slot-edit" data-slot-index="2"></div>
+				<div class="col-md-4 slot-edit" data-slot-index="3"></div>
+				<div class="col-md-4">
 					<label for="vhclNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량명칭</label>
 					<input type="text" id="vhclNm--${pageName}" name="vhclNm" data-map="VHCL_NM" class="form-control" readonly />
 				</div>
-				<div class="col-md-6">
+				<div class="col-md-4">
 					<label for="vhclColor--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량색상</label>
 					<input type="text" id="vhclColor--${pageName}" name="vhclColor" data-map="VHCL_COLOR" class="form-control" readonly />
 				</div>
-				<div class="col-md-6">
+				<div class="col-md-4">
 					<label for="useFuelCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
 					<select id="useFuelCd--${pageName}" name="useFuelCd" data-map="USE_FUEL_CD" class="form-select" disabled>
 						<c:forEach items="${LVS005List}" var="item">
@@ -110,11 +111,11 @@
 		                </c:forEach>
 					</select>
 				</div>
-				
-				<div id="editByTask--${pageName}">
-				
-				</div>
-				
+				<div class="col-md-4 slot-edit" data-slot-index="4"></div>
+				<div class="col-md-4 slot-edit" data-slot-index="5"></div>
+				<div class="col-md-4 slot-edit" data-slot-index="6"></div>
+				<div class="col-md-4 slot-edit" data-slot-index="7"></div>
+				<div class="col-md-4 slot-edit" data-slot-index="8"></div>
 				<div class="col-md-6">
 					<label for="doGuidance--${pageName}">
 						<input type="checkbox" id="doGuidance--${pageName}" name="doGuidance" class="form-check-input" />계도처리
@@ -135,6 +136,9 @@
 		</form>
 	</div>
 	<div class="card" style="width:400px;">
+		<div class="col-md-12">
+			<button type="button" id="" class="btn btn-blue">동영상 캡쳐</button>
+		</div>
 		<form id="frmFile--${pageName}" class="dpv eca" method="post" enctype="multipart/form-data">
 			<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" />
 		</form>
@@ -144,13 +148,33 @@
 	</div>
 
 	<template id="taskItem--${pageName}">
-		<div class="col-md-12 dpv eca">
-			<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">
-				단속자,신고자
-			</label>
-			(보류)
+		<div class="col-md-12 pvs bpv slot-edit" data-slot-index="0">
+			<label for="crdnSeCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속구분</label>
+			<select id="crdnSeCd--${pageName}" name="crdnSeCd" data-map="CRDN_SE_CD" class="form-select">
+				<c:forEach items="${FIM002List}" var="item">
+					<option value="${item.code}">${item.value}</option>
+                </c:forEach>
+			</select>
+		</div>
+		<div class="col-md-8 bpv slot-edit" data-slot-index="1">
+			<label for="dtlCrdnPlc--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">상세위반장소</label>
+			<input type="text" id="dtlCrdnPlc--${pageName}" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" class="form-control" />
 		</div>
-		<div class="col-md-12 dpv eca pvs">
+		<div class="col-md-8 pvs slot-edit" data-slot-index="1">
+			<label for="crdnSpareaCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
+			<select id="crdnSpareaCd--${pageName}" name="crdnSpareaCd" data-map="CRDN_SPAREA_CD" class="form-select">
+				<c:forEach items="${FIM007List}" var="item">
+					<option value="${item.code}">${item.value}</option>
+                </c:forEach>
+			</select>
+		</div>
+		<div class="col-md-4 pvs bpv slot-edit" data-slot-index="2">
+			<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량구분</label>
+		</div>
+		<div class="col-md-4 pvs bpv slot-edit" data-slot-index="3">
+			<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
+		</div>
+		<div class="col-md-4 dpv eca pvs slot-edit" data-slot-index="4">
 			<label for="towngYn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
 			<select id="towngYn--${pageName}" name="towngYn" class="form-select" data-map="TOWNG_YN">
 				<c:forEach items="${FIM053List}" var="item">
@@ -158,7 +182,11 @@
                 </c:forEach>
 			</select>
 		</div>
-		<div class="col-md-12 dpv">
+		<div class="col-md-4 dpv eca pvs slot-edit" data-slot-index="5">
+			<label for="crdnSn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
+			<input type="text" id="crdnSn--${pageName}" name="crdnSn" data-map="CRDN_SN" class="form-control" />
+		</div>
+		<div class="col-md-4 dpv slot-edit" data-slot-index="6">
 			<label for="parkngPsbltyRsltCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
 			<select id="parkngPsbltyRsltCd--${pageName}" name="parkngPsbltyRsltCd" data-map="PARKNG_PSBLTY_RSLT_CD" class="form-select">
 				<c:forEach items="${FIM034List}" var="item">
@@ -168,45 +196,24 @@
                 </c:forEach>
 			</select>
 		</div>
-		<div class="col-md-12 dpv eca pvs">
-			<label for="crdnSn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
-			<input type="text" id="crdnSn--${pageName}" name="crdnSn" data-map="CRDN_SN" class="form-control" />
-		</div>
-		<div class="col-md-12 bpv">
-			<label for="dtlCrdnPlc--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">상세위반장소</label>
-			<input type="text" id="dtlCrdnPlc--${pageName}" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" class="form-control" />
-		</div>
-		<div class="col-md-12 pvs bpv">
+		<div class="col-md-12 pvs bpv slot-edit" data-slot-index="7">
 			<label for="teamNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속조</label>
 			<select id="teamNm--${pageName}" name="teamNm" data-map="TEAM_NM" class="form-select">
 			</select>
 		</div>
-		<div class="col-md-12 pvs bpv">
+		<div class="col-md-12 pvs bpv slot-edit" data-slot-index="8">
 			<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속원</label>
 			<input type="text" id="teamer1--${pageName}" name="teamer1" data-map="TEAMER_1" class="form-control" />
 			<input type="text" id="teamer2--${pageName}" name="teamer2" data-map="TEAMER_2" class="form-control" />
 			<input type="text" id="teamer3--${pageName}" name="teamer3" data-map="TEAMER_3" class="form-control" />
 			<input type="text" id="teamer4--${pageName}" name="teamer4" data-map="TEAMER_4" class="form-control" />
 		</div>
-		<div class="col-md-12 pvs">
-			<label for="crdnSpareaCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
-			<select id="crdnSpareaCd--${pageName}" name="crdnSpareaCd" data-map="CRDN_SPAREA_CD" class="form-select">
-				<c:forEach items="${FIM007List}" var="item">
-					<option value="${item.code}">${item.value}</option>
-                </c:forEach>
-			</select>
-		</div>
-		<div class="col-md-12 pvs bpv">
-			<label for="crdnSeCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속구분</label>
-			<select id="crdnSeCd--${pageName}" name="crdnSeCd" data-map="CRDN_SE_CD" class="form-select">
-				<c:forEach items="${FIM002List}" var="item">
-					<option value="${item.code}">${item.value}</option>
-                </c:forEach>
-			</select>
-		</div>
-		<div class="col-md-12 pvs bpv">
-			<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량구분</label>
-			<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
+		
+		<div class="col-md-12 dpv eca">
+			<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">
+				단속자,신고자
+			</label>
+			(보류)
 		</div>
 	</template>
 </div>
@@ -295,9 +302,21 @@ $(document).ready(function(){
 	 * 초기화
 	 **************************************************************************/
 	var clsForTask = $("#taskSeCd--${pageName}").val().toLowerCase();
-	var content = document.getElementById("taskItem--${pageName}").content;
-	var taskItem = $(content).find("."+clsForTask);
-	$("#editByTask--${pageName}").html(taskItem);
+	
+	//업무별 입력 항목
+	var editContent = document.getElementById("taskItem--${pageName}").content;
+	var taskItems = $(editContent).find("."+clsForTask);
+	var editSlotAreas = $("#frmEdit--${pageName}").find(".slot-edit");
+	editSlotAreas.each(function(){
+		var taskItem = taskItems.filter("[data-slot-index='"+this.dataset.slotIndex+"']");
+		if(taskItem.length > 0){
+			this.replaceWith(taskItem[0].cloneNode(true));
+		} else {
+			this.classList.remove("pvs","bpv","dpv","eca");
+			this.innerHTML = "";
+		}
+	});
+	
 	
 	initDatepicker("frmEdit--${pageName}"); //달력 초기화
 
@@ -333,5 +352,4 @@ $(document).ready(function(){
 
 });
 
-
 </script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
index 1c3eaf26..62f72a2f 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
@@ -100,18 +100,19 @@
 
 		                        </div>
 					        </div>
-					        <div id="searchByTaskArea--${pageName}" class="row" >
+					        <div class="row">
+					        	<div class="slot-search" data-slot-index="0"></div>
 					        </div>
 				        </div>
 				    </form>
 
 				    <template id="taskSearchOption--${pageName}">
-			            <div class="pvs dpv eca col-6">
+			            <div class="pvs dpv eca col-6 slot-search" data-slot-index="0">
 			                <label class="form-label fw-bold form-search-title">견인</label>
                             <input type="radio" name="temp1" value="Y" />예
                             <input type="radio" name="temp1" value="N" />아니오
 			            </div>
-			            <div class="bpv col-6">
+			            <div class="bpv col-6 slot-search" data-slot-index="0">
 			                <label class="form-label fw-bold form-search-title">전용차로구분</label>
                             <select name="temp2" class="form-select">
                             	<option value="">전체</option>
@@ -297,10 +298,21 @@ $(document).ready(function(){
 
 		var clsForTask = taskSeCd.toLowerCase();
 
-		var searchOption = document.getElementById("taskSearchOption--${pageName}").content.querySelector("."+clsForTask)?.outerHTML;
-		if(!searchOption) searchOption = "";
-		$("#searchByTaskArea--${pageName}").html(searchOption);
-
+		//업무별 조회조건
+		var searchOptionContent = document.getElementById("taskSearchOption--${pageName}").content;
+		var searchOptions = $(searchOptionContent).find("."+clsForTask);
+		var searchSlotAreas = $("#frmSearch--${pageName}").find(".slot-search");
+		searchSlotAreas.each(function(){
+			var searchOption = searchOptions.filter("[data-slot-index='"+this.dataset.slotIndex+"']");
+			if(searchOption.length > 0){
+				this.replaceWith(searchOption[0].cloneNode(true));
+			} else {
+				this.classList.remove("pvs","bpv","dpv","eca");
+				this.innerHTML = "";
+			}
+		});
+		
+		//업무별 그리드
 		var colsContent = document.getElementById("crdnCols--${pageName}").content;
 		var cols = $(colsContent).find("."+clsForTask+",.cmn");
 		var colsStr = "";
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06020-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06020-main.jsp
index 8168df22..5dd771be 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06020-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06020-main.jsp
@@ -78,7 +78,7 @@
 		                        		<input type="checkbox" name="schOnlyUnpay" class="form-check-input" />
 		                        		미납만조회
 									</label>
-									<span id="searchByTaskArea--${pageName}">
+									<span class="slot-search" data-slot-index="0">
 
 									</span>
 		                        	<span class="flr">
@@ -127,7 +127,7 @@
 				    </form>
 					<!-- 업무별 조회조건  -->
 					<template id="taskSearchOption--${pageName}">
-						<span class="pvs">
+						<span class="pvs slot-search" data-slot-index="0">
 							<label class="area-photoinspection">
                         		<input type="checkbox" name="schExclTimeout" class="form-check-input" />
                         		2시간초과제외
@@ -136,7 +136,7 @@
 					</template>
 
 
-			        <div class="container-page-btn">
+			        <div id="gridbuttonArea--${pageName}" class="container-page-btn">
 			        	<div class="d-flex flex-row justify-content-between">
 							<label id="photoInspectionPaging--${pageName}PagingInfo" 
 								class="dataTables_info area-photoinspection" role="status" aria-live="polite"></label>
@@ -151,7 +151,7 @@
 						</div>
 			            <span class="container-window-btn-right">
 							<a href="#" id="btnInstLevyExcl--${pageName}" class="btn btn-blue" title="비부과 등록">비부과 등록</a>
-							<span id="buttonByTaskArea--${pageName}">
+							<span class="slot-button" data-slot-index="0">
 
 							</span>
 			            </span>
@@ -159,7 +159,7 @@
 
 					<!-- 업무별 버튼 -->
 				    <template id="taskButton--${pageName}">
-						<span class="pvs">
+						<span class="pvs slot-button" data-slot-index="0">
 							<a href="#" id="btnInstTimeout--${pageName}" class="btn btn-blue" title="2시간초과 등록"
 								onclick="">2시간초과 등록</a>
 						</span>
@@ -436,13 +436,32 @@ $(document).ready(function(){
 
 		var clsForTask = taskSeCd.toLowerCase();
 		//업무별 조회조건
-		var searchOption = document.getElementById("taskSearchOption--${pageName}").content.querySelector("."+clsForTask)?.outerHTML;
-		if(!searchOption) searchOption = "";
-		$("#searchByTaskArea--${pageName}").html(searchOption);
+		var searchOptionContent = document.getElementById("taskSearchOption--${pageName}").content;
+		var searchOptions = $(searchOptionContent).find("."+clsForTask);
+		var searchSlotAreas = $("#frmSearch--${pageName}").find(".slot-search");
+		searchSlotAreas.each(function(){
+			var searchOption = searchOptions.filter("[data-slot-index='"+this.dataset.slotIndex+"']");
+			if(searchOption.length > 0){
+				this.replaceWith(searchOption[0].cloneNode(true));
+			} else {
+				this.classList.remove("pvs","bpv","dpv","eca");
+				this.innerHTML = "";
+			}
+		});
+		
 		//업무별 버튼
-		var buttons = document.getElementById("taskButton--${pageName}").content.querySelector("."+clsForTask)?.outerHTML;
-		if(!buttons) buttons = "";
-		$("#buttonByTaskArea--${pageName}").html(buttons);
+		var buttonContent = document.getElementById("taskButton--${pageName}").content
+		var buttons = $(buttonContent).find("."+clsForTask);
+		var buttonSlotAreas = $("#gridbuttonArea--${pageName}").find(".slot-button");
+		buttonSlotAreas.each(function(){
+			var button = buttons.filter("[data-slot-index='"+this.dataset.slotIndex+"']");
+			if(button.length > 0){
+				this.replaceWith(button[0].cloneNode(true));
+			} else {
+				this.className = "slot-button";
+				this.innerHTML = "";
+			}
+		});
 
 		$('#btnPhotoInspection--${pageName}').trigger("click");
 	}