fix : 상품 목록 제거 기능 추가(폐기신청서접수 등록 화면), 그리드 이미지 뷰어 수정

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

@@ -121,15 +121,15 @@
 						</tbody>
 						<template id="productListRow--productList">
 							<tr data-key="{keyCnt}">
-								<td class="cmn text-center" {onclick}="" {ondblclick}="">{prductCd}</td>
+								<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{prductCd}</td>
-								<td {onclick}="" {ondblclick}="">{prductNm}</td>
+								<td  onclick="{onclick}" ondblclick="{ondblclick}">{prductNm}</td>
-								<td class="cmn text-end" {onclick}="" {ondblclick}="">{dsuseQy}</td>
+								<td class="cmn text-end"  onclick="{onclick}" ondblclick="{ondblclick}">{dsuseQy}</td>
-								<td class="cmn text-center prdDsuseImg" {onclick}="" {ondblclick}=""></td>
+								<td class="cmn text-center prdDsuseImg"  onclick="{onclick}" ondblclick="{ondblclick}"></td>
-								<td class="cmn text-center" {onclick}="" {ondblclick}="">{prdValidDe}</td>
+								<td class="cmn text-center"  onclick="{onclick}" ondblclick="{ondblclick}">{prdValidDe}</td>
-								<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfNo}</td>
+								<td class="cmn text-center"  onclick="{onclick}" ondblclick="{ondblclick}">{mnfNo}</td>
-								<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfSeq}</td>
+								<td class="cmn text-center"  onclick="{onclick}" ondblclick="{ondblclick}">{mnfSeq}</td>
-								<td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbQy} {minDistbUnit}</td>
+								<td class="cmn text-center"  onclick="{onclick}" ondblclick="{ondblclick}">{minDistbQy} {minDistbUnit}</td>
-								<td class="cmn text-center" {onclick}="" {ondblclick}="">{pceQy} {pceUnit}</td>
+								<td class="cmn text-center"  onclick="{onclick}" ondblclick="{ondblclick}">{pceQy} {pceUnit}</td>
 							</tr>
 						</template>
 						<template id="productListNotFound--productList">
@@ -326,10 +326,10 @@
 			});
 		}
 		
-		$P.productList.onDatasetChange = item => {
-			if (!item) return;
 		
-			let empty = $P.productList.empty;
+		$P.productList.onAppend = item => {
+			
+			if (!item) return;
 
 			// 업무별 DataTables(그리드) tr, td
 			let foundContent = document.getElementById("productListRow--productList").content;
@@ -344,12 +344,27 @@
 			let replacer = (str, dataItem) => str
 				.replace(/{onclick}/gi, "pageObject['${pageName}'].productList.setCurrent('" + dataItem.getValue("keyCnt") + "');");
 			
-			let trs = empty ? [document.getElementById("$productListNotFound--productList").content.outerHTML]
+			let di = $P.productList.getData(item[0].keyCnt, "item");
-							: $P.productList.inStrings(foundTr.outerHTML, replacer);
+			
+			let tr = di.inString(foundTr.outerHTML, replacer);
 
-			$("#table-responsive--${pageName}")[0].changeContent(trs.join(), true, true);
+			$("#tbody--productList").append(tr);
 			
-			fnMakeGridImageViewer($("#tbody--productList").find("td.prdDsuseImg").get(), "dsusePrdImgFiles");
+			fnMakeGridImageViewer($("#tbody--productList").find("td.prdDsuseImg").last()[0], "dsusePrdImgFiles");
+		}
+		
+		$P.productList.onRemove = item => {
+
+			let key = item[0].data.keyCnt;
+			
+			$("#tbody--productList").find("tr[data-key='"+key+"']").remove();
+		}
+		
+		$P.productList.onCurrentChange = item => {
+			if (!item) return;
+
+            let key = item.data.keyCnt;
+            $("#tbody--productList").setCurrentRow(key);
 		}
 		
 		/**************************************************************************
@@ -456,10 +471,10 @@
 				return false;
 			}
 
-console.log($P.productFormFields.get());
+			console.log($P.productFormFields.get());
-const data = {...$P.productFormFields.get(), keyCnt: prdRowKey++};
+			const data = {...$P.productFormFields.get(), keyCnt : ""+prdRowKey++};
-console.log(data);
+			console.log(data);
-			$P.productList.addData([data]);
+			$P.productList.append([data]);
 			// FIXME: 상품필드 초기화 코드 추가
 			//
 		}
@@ -473,7 +488,7 @@ console.log(data);
 				, init: () => { setDialogZindex(); }
 				, onOK: () => {
 					console.log($P.productList.getCurrent().keyCnt);
-					debugger
+
 					$P.productList.remove($P.productList.getCurrent().keyCnt);
 				}
 			});
@@ -504,7 +519,6 @@ console.log(data);
 
 		// 초기 화면 설정
 		$P.initForm = () => {
-			fnMakeScrollableTable($("#table-responsive--${pageName}")[0], $P.scrollDataList);
 			
 		}
 

src/main/webapp/resources/js/adds/cmmn/adds-componentization.js

@@ -1,9 +1,7 @@
 /**************************************************************************
 * 그리드 내부 이미지 첨부
 **************************************************************************/
-function fnMakeGridImageViewer(tdEls, fileInputElName){
+function fnMakeGridImageViewer(tdEl, fileInputElName){
-	
-	for(let tdEl of tdEls){
 		
 	let fileInputEl = document.createElement("input");
 	fileInputEl.name = fileInputElName;
@@ -40,10 +38,11 @@ function fnMakeGridImageViewer(tdEls, fileInputElName){
 	});
 
 	$(viewButtonEl).on("click", function(){
-			window.open((window.URL || window.webkitURL).createObjectURL(fileInputEl.files[0])
+		
-			, "이미지"
+		let viewUrl = (window.URL || window.webkitURL).createObjectURL(fileInputEl.files[0]);
-			, "width=500, height=500");
+
+		window.open(viewUrl, "이미지", "width=500, height=500");
 	});
-	}
+	
 
 }