단속 사진 이미지 수정.

src/main/java/cokr/xit/fims/sprt/web/Sprt02Controller.java

@@ -191,7 +191,7 @@ public class Sprt02Controller extends ApplicationController {
 	 */
 	public ModelAndView updateCrdnImageFile(Crdn crdn, MultipartFile[] newFileList) {
 		boolean saved = false;
-		String retMessage = "[F] ";
+		String rtnMsg = "[F] ";
 
 		List<FileInfo> newFileInfoList = new ArrayList<FileInfo>();
 		if (newFileList != null) {
@@ -205,8 +205,8 @@ public class Sprt02Controller extends ApplicationController {
 			}
 		}
 
-		retMessage = sprt02Service.updateCrdnImageFile(crdn, newFileInfoList);
+		rtnMsg = sprt02Service.updateCrdnImageFile(crdn, newFileInfoList);
-		if (retMessage.contains("[S]")) {
+		if (rtnMsg.contains("[S]")) {
 			saved = true;
 		} else {
 			saved = false;
@@ -214,7 +214,7 @@ public class Sprt02Controller extends ApplicationController {
 
 		return new ModelAndView("jsonView")
 			.addObject("saved", saved)
-			.addObject("retMessage", retMessage);
+			.addObject("rtnMsg", rtnMsg);
 	}
 
 	/**단속 이미지 파일 정보를 삭제한다.
@@ -227,11 +227,11 @@ public class Sprt02Controller extends ApplicationController {
 	 */
 	public ModelAndView removeCrdnImageFile(String crdnId, String atchFileCnt, String... fileIDs) {
 		boolean saved = false;
-		String retMessage = "[F] ";
+		String rtnMsg = "[F] ";
 		Integer fileCnt = Integer.parseInt(atchFileCnt);
 
-		retMessage = sprt02Service.removeCrdnImageFile(crdnId, fileCnt, fileIDs);
+		rtnMsg = sprt02Service.removeCrdnImageFile(crdnId, fileCnt, fileIDs);
-		if (retMessage.contains("[S]")) {
+		if (rtnMsg.contains("[S]")) {
 			saved = true;
 		} else {
 			saved = false;
@@ -239,7 +239,7 @@ public class Sprt02Controller extends ApplicationController {
 
 		return new ModelAndView("jsonView")
 			.addObject("saved", saved)
-			.addObject("retMessage", retMessage);
+			.addObject("rtnMsg", rtnMsg);
 	}
 
 	/**지정하는 단속 ID의 의견제출 정보를 반환한다.

src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02020-info.jsp

@@ -300,17 +300,38 @@
 					<button type="button" class="btn btn-primary" id="btnDeleteFile--${pageName}" title="선택 사진 삭제">사진 삭제</button>
 				</div>
 			</div>
-			<div id="displayForExist--${pageName}" style="overflow-y:scroll; min-height:80px; max-height:600px; border-style:solid;">
+
+			<div id="displayForExist--${pageName}" style="border-style: solid;">
+				<ul id="dragAndDrop--${pageName}" style="display:flex; flex-wrap:wrap; overflow-y:scroll; min-height:80px; max-height: 600px;">
+				</ul>
 			</div>
 
 			<form id="frmUploadSet--${pageName}" method="post" enctype="multipart/form-data">
 				<input type="file" id="inputUploadSet--${pageName}" name="inputUploadSet" multiple accept="image/*" hidden />
 			</form>
-		</div> <!-- 단속 이미지 -->
+		</div>
+
+		<template id="imgRadioTemplate--${pageName}">
+			<li style="display:flex">
+				<label class='mx-1' style="display:flex;flex-direction:row">
+					<input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" />
+					<div style="position:relative;">
+						<img src="{src}" width="240" height="160" style=""display:absolute;"
+						data-crdn-photo-id="{crdnPhotoId}"
+						data-mosaic="{mosaic}"
+						onload='fn_photoMask($("#photoMask--top").is(":checked"),this);' />
+					</div>
+				</label>
+			</li>
+		</template>
+		<!-- 단속 이미지 -->
+
 	</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
 </div> <!-- <div class="content-wrapper"> -->
 
 <script>
+	LoadScript("sortableScript","/resources/3rd-party/sneat/libs/sortablejs/sortable.js");
+
 	/**************************************************************************
 	 * Global Variable
 	 **************************************************************************/
@@ -405,7 +426,7 @@
 		ajax.post({
 			  url : wctx.url(params.taskSeCd + ${pageName}PrefixUrl + "/010/remove.do")
 			, data : params || {}
-			, success : resp => ${pageName}Control.onRemove(resp)				// 삭제 callback
+			, success : resp => ${pageName}Control.onRemove(resp)		// 삭제 callback
 		});
 	}
 
@@ -428,45 +449,49 @@
 
 	// 이미지 파일만큼 html에 추가
 	fnMakeImgForExistFile${pageName} = (fileArr) => {
-		let tagsText = "";
+		let tagsTextArr = [];
 
-		for (let index = 0, j = 0; index < fileArr.length; index++) {
+		for(let index = 0, jLoop = 0; index < fileArr.length; index++){
 			let item = fileArr[index];
 
 			if (item.status == "delete") {
 				continue;
 			}
 
-			tagsText += "<label class='mx-2'>";
+			let template = document.getElementById("imgRadioTemplate--${pageName}").innerHTML;
-			tagsText += "<input type='radio' name='existPhoto' class='form-check-input' value='" + item.FILE_ID + "' ";
+			template = template.replace(/{name}/gi, "existPhoto");
+			template = template.replace(/{value}/gi, item.FILE_ID);
+			template = template.replace(/{src}/gi, item.URL);
 
-			if (index == 0) {
+			if (index != 0) {
-				tagsText += " checked='checked' ";
+				template = template.replace("checked=\"\"", "");
 			}
 
-			tagsText += " />";
+			template = template.replace(/{crdnPhotoId}/gi, "exist" + item.FILE_ID + "${pageName}");
-			tagsText += "<img src='"+ item.URL +"' width='260' height='150' />";
+			template = template.replace(/{mosaic}/gi, ifEmpty(item.MOSAIC,""));
-			tagsText += "</label>";
-			tagsText += "<br />";
-			tagsText += "<p></p>";
 
-			j++;
+			tagsTextArr.push(template);
+
+			if (jLoop % 2 == 1) {
+				//tagsTextArr.push("<br />");
+			}
+
+			jLoop++;
 		}
 
-		return tagsText;
+		return tagsTextArr.join("");
 	}
 
 	// 화면에 이미지 표시
 	fnImageDisplay${pageName} = (isExist) => {
 		if (isExist) {
-			let displayArea = document.querySelector("#displayForExist--${pageName}");
 			let tagsText = fnMakeImgForExistFile${pageName}(existFileArr${pageName});
 
 			if (tagsText == "") {
-				displayArea.innerHTML = "등록된 사진이 없습니다.";
+				document.querySelector("#dragAndDrop--${pageName}").innerHTML = "등록된 사진이 없습니다.";
 				$("#btnEditPhoto--${pageName}").hide();
 			} else {
-				displayArea.innerHTML = tagsText;
+				document.querySelector("#dragAndDrop--${pageName}").innerHTML = tagsText;
 				$("#btnEditPhoto--${pageName}").show();
 			}
 
@@ -482,10 +507,38 @@
 
 		// 이미지(사진) 재조회
 		if (resp.saved) {
-			${pageName}RefreshImageInfo();
+			refreshImageInfo${pageName}();
 		}
 	};
 
+	//사진 편집 콜백
+	callbackEditPhoto${pageName} = (modifiedFile, originalFileInfo, isNumberPlate) => {
+debugger;
+		modifiedFile.id = "file-" + new Date().getTime() + "-" + "0";
+		modifiedFile.url = (window.URL || window.webkitURL).createObjectURL(modifiedFile);
+
+// 		if(isNumberPlate){
+// 			modifiedFile.mosaic = "";
+// 			$P.localUploadArr.push(modifiedFile);
+
+// 			$P.updateFileInfo("insert");
+
+// 		} else {
+// 			$P.existFileArr.forEach(function(item,index){
+// 				if(item.FILE_ID == originalFileInfo.FILE_ID){
+// 					modifiedFile.URL = modifiedFile.url;
+// 					modifiedFile.FILE_ID = originalFileInfo.FILE_ID;
+// 					modifiedFile.SRT_ORD = originalFileInfo.SRT_ORD;
+// 					modifiedFile.status = "modified";
+// 					$P.existFileArr.splice(index, 1, modifiedFile);
+// 				};
+// 			});
+
+// 			$P.updateFileInfo("modifiy");
+
+// 		}
+	}
+
 	// 사진 저장
 	saveFile${pageName} = (info) => {
 		if (!info) return;
@@ -556,8 +609,35 @@
 		});
 	}
 
+	// 사진 정렬
+	updateFileOrder${pageName} = () => {
+		let formData = new FormData(document.getElementById("frmFile--${pageName}"));
+
+		formData.append("crdnId", ${pageName}Control.dataset.getValue("CRDN_ID"));
+		formData.append("atchFileCnt", existFileArr${pageName}.length);
+
+		let fileProcessingURL = wctx.url("file/changeOrderCrdnImageFile.do");
+		let inputs = $("#dragAndDrop--${pageName}").find("input[name='existPhoto']");
+
+		for (let iLoop=0; iLoop < inputs.length; iLoop++) {
+			formData.append("orderedKeys", inputs[iLoop].value);
+		}
+
+		ajax.post({
+			  url : fileProcessingURL
+			, data : formData
+			, contentType : false
+			, processData : false
+			, success : resp => {
+				if (resp.saved) {
+					refreshImageInfo${pageName}();
+				}
+			}
+		});
+	}
+
 	// 이미지(사진) 재조회
-	${pageName}RefreshImageInfo = () => {
+	refreshImageInfo${pageName} = () => {
 		let crdnId = ${pageName}Control.dataset.getValue("CRDN_ID");
 		let sggCd = ${pageName}Control.dataset.getValue("SGG_CD");
 		let taskSeCd = ${pageName}Control.dataset.getValue("TASK_SE_CD");
@@ -926,6 +1006,15 @@
 	 **************************************************************************/
 	// 이벤트 설정
 	setEvent${pageName} = () => {
+		//드래그앤드롭
+		Sortable.create(document.getElementById("dragAndDrop--${pageName}"), {
+			onEnd : function(evt) {
+				if (evt.oldIndex != evt.newIndex) {
+					updateFileOrder${pageName}();
+				}
+			}
+		});
+
 		// 선택 사진 편집
 		$("#btnEditPhoto--${pageName}").on("click", () => {
 			let checked = $("#displayForExist--${pageName}").find("[name='existPhoto']:checked");
@@ -936,9 +1025,11 @@
 
 			let fileId = checked.val();
 
-			window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}&fileId=" + fileId)
+			window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}"
-				,"editPhoto"
+					+ "&fileId=" + fileId
-				,"width=1400,height=750"
+					+ "&callbackFuncName=" + "callbackEditPhoto${pageName}")
+				, "editPhoto"
+				, "width=1400, height=750"
 			);
 		});
 
@@ -967,14 +1058,11 @@
 		});
 	}
 
-	// 초기 기본 설정
+	// 기본 데이터 설정
-	initForm${pageName} = () => {
+	initData${pageName} = () => {
-		// 화면 초기화
+		//
- 		$("#frmEdit--${pageName}")[0].reset();
+		$("#btnEditPhoto--${pageName}").hide();									// 사진 편집
-	}
 
-	// 화면 데이터 셋팅
-	setFormData${pageName} = () => {
 		// jquery를 이용한 show/hide (style이 유지)
 		$("#divBlank1--${pageName}").hide();									// 빈 칸1
 		$("#divBlank2--${pageName}").hide();									// 빈 칸2
@@ -1036,8 +1124,8 @@
 		// 이벤트 설정
 		setEvent${pageName}();
 
-		// 초기 기본 설정
+		// 기본 데이터 설정
-		initForm${pageName}();
+		initData${pageName}();
 
 		// Dataset 설정
 		${pageName}Control.setData([${crdnPayer}]);		// 단속, 납부자 정보
@@ -1045,7 +1133,7 @@
 		// 이미지 정보를 파일 배열에 셋팅
 		existFileArr${pageName} = [];					// 파일 배열 초기화
 
-		var crdnPayerInfo = ${pageName}Control.getCurrent();
+		let crdnPayerInfo = ${pageName}Control.getCurrent();
 
 		if (crdnPayerInfo.fileList) {
 			crdnPayerInfo.fileList.forEach(function(item) {
@@ -1055,9 +1143,6 @@
 		}
 		// 화면에 이미지 표시
 		fnImageDisplay${pageName}(true);
-
-		// 화면 데이터 셋팅
-		setFormData${pageName}();
 	});
 
 </script>