폐기이미지 추가 기능 추가

src/main/webapp/WEB-INF/jsp/adds/nims/dsuseMgtRslt-info.jsp

@@ -75,13 +75,28 @@
 					<label for="dsuseLoc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">폐기장소</label>
 					<input type="text" class="form-control w-80" id="dsuseLoc--${pageName}" name="dsuseLoc" data-map="DSUSE_LOC">
 				</div>
-				<div class="col-md-4">
+				<div class="col-md-12">
-					<label for="dsuseImg--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">폐기이미지</label>
+					<span class="d-inline-flex">
-					<input type="text" class="form-control w-60" id="dsuseImg--${pageName}" name="dsuseImg" data-map="DSUSE_IMG" readonly>
+						<label for="dsuseImg--${pageName}" 
+						class="w-px-130 h-px-30 bg-lighter pe-2 col-form-label text-sm-end">폐기이미지</label>
+						<button type="button" class="btn btn-primary mx-1" 
+	                    onclick="$('#inputUploadSet--${pageName}').trigger('click');">추가</button>
+	                    <button type="button" class="btn btn-primary mx-1"
+	                    id="btnImageDel--${pageName}" hidden>삭제</button>
+					</span>
+				</div>
+				<div class="col-md-12">
+					<div class="border-card rounded w-100 h-px-250 ox-scroll align-content-center">
+						<ul id="dragAndDrop--${pageName}" class="d-inline-flex">
+                    
+                    	</ul>
+					</div>
 				</div>
 			</div>
+			
 			<div class="row my-1 mx-1 g-1 border-card rounded"></div>
 		</form> <!-- /입력 영역 -->
+		<input type="file" accept="image/*" id="inputUploadSet--${pageName}" hidden multiple />
 	</div> <!-- <div class="card"> -->
 
 		<!-- 업무 버튼 표시 -->
@@ -98,6 +113,17 @@
 	</div> <!-- / Content <div class="container flex-grow-1 px-0"> -->
 </div> <!-- / inner page html <div class="content-wrapper"> -->
 
+<template id="imgRadioTemplate--${pageName}">
+    <li class="d-flex">
+        <label class='mx-1 d-flex flex-row'>
+            <input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" />
+            <div class="position-relative">
+                <img src="{src}" width='200' height='200' />
+            </div>
+        </label>
+    </li>
+</template>
+
 <script>
 	/**************************************************************************
 	 * Global Variable
@@ -111,6 +137,8 @@
 		// pageObject
 		let $P = pageObject["${pageName}"];
 		
+		$P.fileArr = [];
+		
 		// FormFields
 	 	$P.formFields = new FimsFormFields("#frmEdit--${pageName}");
 
@@ -164,8 +192,7 @@
 
 			// Dataset 셋팅
 			$P.formFields.set($P.control, item);
-			// 업무구분에 따른 URL 변경
+
-			$P.fnSetURL(item.data.TASK_SE_CD);
 		}
 
 		// 저장 callback
@@ -217,6 +244,21 @@
 			});
 		}	
 
+		//uploadSupport 생성
+		$P.uploadSet = uploadSupport("#inputUploadSet--${pageName}");
+
+        $P.uploadSet.onDatasetChange  = () => {
+
+            var files = $P.uploadSet.getDataset();
+            if(files != null && files.length > 0){
+				for(var i=0;i < files.length; i++){
+					$P.fileArr.push(files[i]);
+				}
+			}
+            
+            $P.fnDisplay();
+            
+        };
         
 		/**************************************************************************
 		 * DataTables 이벤트
@@ -266,12 +308,44 @@
 		/**************************************************************************
 		 * 사용자 함수(function)
 		 **************************************************************************/
-		// 업무구분에 따른 URL 설정
+		 
-		$P.fnSetURL = (taskSeCd) => {
+		// 이미지 표시
-			//$P.control.urls.create = wctx.url("/" + taskSeCd + "${infoPrefixUrl}" + "/040/create.do");	// 등록
+		$P.fnDisplay = () => {
-			//$P.control.urls.update = wctx.url("/" + taskSeCd + "${infoPrefixUrl}" + "/040/update.do");	// 수정
+			
+			if($P.fileArr.length > 0){
+                var tagsText = $P.fnMakeImgTags($P.fileArr);
+                document.querySelector("#dragAndDrop--${pageName}").innerHTML = tagsText;
+                $("#btnImageDel--${pageName}").removeAttr("hidden");
+            } else {
+                document.querySelector("#dragAndDrop--${pageName}").innerHTML = "";
+                $("#btnImageDel--${pageName}").attr("hidden","hidden");
+            }
+			
 		}
 		
+		// HTML 태그(img,radio) 문자열 생성
+        $P.fnMakeImgTags = (fileArr) => {
+            var tagsTextArr = [];
+
+            for(var index = 0; index < fileArr.length; index++){
+                var item = fileArr[index];
+
+                var template = document.getElementById("imgRadioTemplate--${pageName}").innerHTML;
+                
+                template = template.replace(/{name}/gi, "dsusePrdImgFilesSlector");
+                template = template.replace(/{value}/gi, item.id);
+                if(index != 0){
+                    template = template.replace("checked=\"\"", "");
+                }
+                
+                template = template.replace(/{src}/gi, item.url);
+                
+                tagsTextArr.push(template);
+            }
+
+            return tagsTextArr.join("");
+        }
+		
 		// 전자우편 안내문 등록 버튼 이벤트
 		$P.fnSearchBssh = (title) => {
 			$P.control.getBsshInfo();
@@ -304,12 +378,36 @@
 				$P.fnSearchBssh($(this).attr("title"));
 			});
 			
+			//이미지 삭제 버튼
+			$("#btnImageDel--${pageName}").on("click", function() {
+                var key = $("#dragAndDrop--${pageName}").find(":radio[name='dsusePrdImgFilesSlector']:checked").val();
+                
+                $P.fileArr = $P.fileArr.filter((element) => element.id != key);
+                
+                $P.fnDisplay();
+            });
+			
 			// 버튼 이벤트
 			$("#btnSave--${pageName}").on("click", () => $P.fnSave());			// 저장
 		}
 
 		// 초기 화면 설정
 		$P.initForm = () => {
+
+			//드래그로 이미지 순서 변경
+	        Sortable.create(document.getElementById("dragAndDrop--${pageName}"), {
+	            onEnd : function(evt){
+	                if(evt.oldIndex != evt.newIndex){
+
+	                	let tmp = $P.fileArr[evt.oldIndex];
+	                	$P.fileArr[evt.oldIndex] = $P.fileArr[evt.newIndex];
+	                	$P.fileArr[evt.newIndex] = tmp;
+	                	
+	                	$P.fnDisplay();
+	                }
+	            }
+	        });
+			
 			// Dialog 마우스로 드래그 할 수 있도록 설정.
 //			fnMakeDraggableDialog(document.getElementById($P.control.prefix + "Dialog"));
 			

src/main/webapp/WEB-INF/jsp/include/tail.jsp

@@ -33,6 +33,7 @@
 
 <!-- 전체화면 비활성화 -->
 <script src="<c:url value="/webjars/3rd-party/sneat/libs/block-ui/block-ui.js"/>"></script>
+<script src="<c:url value="/webjars/3rd-party/sneat/libs/sortablejs/sortable.js"/>"></script>
 
 <script src="<c:url value="/resources/js/base/fimsFormFields.js?${ver}"/>"></script>
 
@@ -46,6 +47,7 @@
 <script src="<c:url value="/webjars/applib/js/componentization.js?${ver}"/>"></script>
 <script src="<c:url value="/resources/js/adds/cmmn/componentization.js?${ver}"/>"></script>
 
+
 <!-- endbuild -->
 <c:set var="functions" scope="request">
 wctx.path = "${pageContext.request.contextPath}";