전시 - 상품 순서 변경 팝업 개발중

src/main/java/com/style24/admin/biz/web/TsaDisplayController.java

@@ -336,7 +336,6 @@ public class TsaDisplayController extends TsaBaseController {
 	public GagaMap getCategoryGoodsList(@RequestBody CategoryGoods categoryGoods) {
 		GagaMap result = new GagaMap();
 
-		log.info("getCategoryGoodsList categoryGoods::{}",categoryGoods);
 		categoryGoods.setRegNo(TsaSession.getInfo().getUserNo());	//엑셀조회시 로그인 사용자의 엑셀 상품조회시 사용
 		categoryGoods.setPageable(new TscPageRequest(categoryGoods.getPageNo() - 1, categoryGoods.getPageSize()));
 		categoryGoods.getPageable().setTotalCount(displayService.getCategoryGoodsListCount(categoryGoods));
@@ -403,4 +402,26 @@ public class TsaDisplayController extends TsaBaseController {
 		mav.setViewName("display/GoodsDispOrdChangePopupForm");
 		return mav;
 	}
+
+	/**
+	 * 전시 상품 순서변경 리스트
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 18
+	 */
+	@PostMapping("/goods/dispord/change/popup/list")
+	@ResponseBody
+	public GagaMap getGoodsDispOrdChangePopupList(@RequestBody CategoryGoods categoryGoods) {
+		GagaMap result = new GagaMap();
+
+		log.info("getGoodsDispOrdChangePopupList categoryGoods::{}",categoryGoods);
+		categoryGoods.setRegNo(TsaSession.getInfo().getUserNo());	//엑셀조회시 로그인 사용자의 엑셀 상품조회시 사용
+		categoryGoods.setPageable(new TscPageRequest(categoryGoods.getPageNo() - 1, categoryGoods.getPageSize()));
+		categoryGoods.getPageable().setTotalCount(displayService.getCategoryGoodsListCount(categoryGoods));
+
+		result.set("pageing", categoryGoods);
+		result.set("categoryGoodsList", displayService.getCategoryGoodsList(categoryGoods));
+
+		return result;
+	}
 }

src/main/java/com/style24/persistence/domain/CategoryGoods.java

@@ -44,6 +44,7 @@ public class CategoryGoods extends TscBaseDomain {
 	private String formalGb;
 
 	private int stockQty;
+	private int currStockQty;
 
 	private String mode;
 	private String addCateNo;
@@ -54,6 +55,8 @@ public class CategoryGoods extends TscBaseDomain {
 	private String[] multiGoods;
 
 	private String callBackFun;	// 콜백함수
+	private String imgPath1;
+	private String goodsAddYn;
 
 	// Pagination
 	private TscPageRequest pageable;

src/main/java/com/style24/persistence/mybatis/shop/TsaDsiplay.xml

@@ -881,10 +881,12 @@
 		/* TsaDisplay.getCategoryGoodsList */
 		SELECT Z.*
 		FROM ( SELECT @rownum := @rownum + 1 AS RNUM
+				, (SELECT STOCK_QTY FROM TB_GOODS_STOCK WHERE GOODS_CD = A.GOODS_CD ) AS CURR_STOCK_QTY
 				, A.*
 				FROM ( SELECT G.GOODS_CD
 							, G.GOODS_TNM
 							, G.GOODS_NM
+							, (SELECT SYS_IMG_NM FROM TB_GOODS_IMG WHERE GOODS_CD = G.GOODS_CD AND DEFAULT_IMG_YN = 'Y') AS IMG_PATH1
 							, A.CATE_NO
 							, A.DISP_ORD
 							, G.GOODS_TYPE

src/main/webapp/WEB-INF/views/display/CategoryGoodsForm.html

@@ -241,6 +241,7 @@
 		params += '&cate3No=' + $('#searchForm select[name=cate3No]').val();
 		params += '&cate4No=' + $('#searchForm select[name=cate4No]').val();
 		params += '&searchGb=' + $('#searchForm select[name=searchGb]').val();
+		params += '&goodsAddYn=Y';
 
 		cfnOpenGoodsDispOrdChangePopup('fnSaveCallback', params);
 	});

src/main/webapp/WEB-INF/views/display/GoodsDispOrdChangePopupForm.html

@@ -14,41 +14,184 @@
  * 1.0  2021.02.18   bin2107     최초 작성
  *******************************************************************************
  -->
-<div class="modalPopup" data-width="full" data-height="800">
-	<div class="panelStyle">
-		<div class="panelTitle">
-			<h2>상품 순서변경</h2>
-			<button type="button" class="close" onclick="uifnPopupClose('popupGoodsDispOrdChange')"><i class="fa fa-times"></i></button>
-		</div>
-		<div class="panelContent">
-			<!-- 상단 영역 START -->
-			<ul class="lrStyle">
-				<li class="aL"><font color="#1e90ff">* 상품은 왼쪽에서 오른쪽 순서대로 전시 됩니다.</font></li>
-				<li class="aR">
-					<button type="button" class="btn btn btn-info btn-sm">원 위치로</button>
-					<button type="button" class="btn btn btn-primary btn-sm">전시순서 초기화</button>
-					<button type="button" class="btn btn btn-dark btn-sm">저장</button>
-				</li>
-			</ul>
-			<!-- 상단 영역 END -->
-
-			<!-- 상품 영역 START -->
-			<div class="sortableWrap" data-unit="7">
-				<div class="itemWrap" id="sortable">
+<div class="modalPopup" data-width="full" data-height="850">
+	<div class="panelStyle" >
+		<form id="goodsDispOrdChangeForm" name="goodsDispOrdChangeForm" action="#" th:action="@{'/display/goods/dispord/change/popup/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
+			<input type="hidden" id="siteCd" name="siteCd" value="G00_10"/>
+			<input type="hidden" id="selLvl" name="selLvl" th:value="${params.selLvl}"/>
+			<input type="hidden" id="cateGb" name="cateGb" th:value="${params.cateGb}"/>
+			<input type="hidden" id="cate1No" name="cate1No" th:value="${params.cate1No}"/>
+			<input type="hidden" id="cate2No" name="cate2No" th:value="${params.cate2No}"/>
+			<input type="hidden" id="cate3No" name="cate3No" th:value="${params.cate3No}"/>
+			<input type="hidden" id="cate4No" name="cate4No" th:value="${params.cate4No}"/>
+			<input type="hidden" id="searchGb" name="searchGb" value="BASIC"/>
+			<button type="button" class="btn btn-base btn-lg" id="btnSearch" style="display: none;">조회</button>
+			<div class="panelTitle">
+				<h2>상품 순서변경</h2>
+				<button type="button" class="close" onclick="uifnPopupClose('popupGoodsDispOrdChange')"><i class="fa fa-times"></i></button>
+			</div>
+			<div class="panelContent">
+				<!-- 상단 영역 START -->
+				<ul class="lrStyle">
+					<li class="aL"><font color="#1e90ff">* 상품은 왼쪽에서 오른쪽 순서대로 전시 됩니다.</font></li>
+					<li class="aR">
+						<button type="button" class="btn btn btn-info btn-sm">원 위치로</button>
+						<button type="button" class="btn btn btn-primary btn-sm">전시순서 초기화</button>
+						<button type="button" class="btn btn btn-dark btn-sm">저장</button>
+					</li>
+				</ul>
+				<!-- 상단 영역 END -->
 
+				<!-- 상품 영역 START -->
+				<div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">
+					<div class="itemWrap" id="sortable">
+					</div>
 				</div>
+				<!-- 상품 영역 END -->
+
+				<!-- 페이징영역 START -->
+					<ul class="panelBar" style="display:none;">
+						<li class="right">
+							검색결과 : <strong><span id="gridRowTotalCount">0</span> 건</strong>&nbsp;
+							쪽번호 <span id="pgNo">0</span>/ <strong id="endPgNo">0</strong>&nbsp;&nbsp;
+							<select id="pageSize" name="pageSize">
+								<option value="50" selected="selected">50개씩 보기</option>
+								<option value="100">100개씩 보기</option>
+								<option value="500">500개씩 보기</option>
+								<option value="1000">1000개씩 보기</option>
+							</select>
+							<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
+						</li>
+					</ul>
+					<ul class="panelBar">
+						<li class="center">
+							<div class="tablePaging" id="goodsDispOrdChangePopupPagination"></div>
+						</li>
+					</ul>
+				<!-- 페이징영역 END -->
 			</div>
-			<!-- 상품 영역 END -->
-
-			<!-- 페이징 영역 START -->
-			<ul class="panelBar">
-				<li class="center">
-					<div class="tablePaging" id="goodsDispOrdChangePopupPagination"></div>
-				</li>
-			</ul>
-			<!-- 페이징 영역 END -->
-		</div>
+		</form>
 	</div>
 </div>
+<script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js?v=2019072202"></script>
+<script th:inline="javascript">
+	var params = [[${params}]];
+	var uploadGoodsUrl = "image.istyle24.com/Upload/ProductImage";//[[${@environment.getProperty('upload.goods.view')}]];
+	var resultParam = "";
+
+	$("#btnSearch").on('click', function(){
+		$("#goodsDispOrdChangeForm input[name=searchGb]").val("BASIC");
+		gagaPaging.load(1);
+	});
+
+	var fnSearchPopup = function (){
+		gagaPaging.init('goodsDispOrdChangeForm', fnSelectCallBack, 'goodsDispOrdChangePopupPagination', $('#goodsDispOrdChangeForm').find('#pageSize').val());
+		gagaPaging.load(1);
+	}
+
+	var fnSelectCallBack = function (result){
+		$('#goodsDispOrdChangeForm').find('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
+		$('#goodsDispOrdChangeForm').find('#pageNo').val(result.pageing.pageable.pageNo.addComma());
+		$('#goodsDispOrdChangeForm').find('#pgNo').html(result.pageing.pageable.pageNo.addComma());
+		$('#goodsDispOrdChangeForm').find('#endPgNo').html(result.pageing.pageable.totalPage.addComma());
+
+		if(typeof result.categoryGoodsList != 'undefined'){
+			resultList = result.categoryGoodsList;
+		}
+		console.log('[resultList length]'+resultList.length);
+		if(resultList.length > 0){
+			var html = '';
+			for(var i=0; i<resultList.length; i++){
+				if(i==0){
+					firstOrd = resultList[i].dispOrd;
+				}
+				html+='<ul class="item ui-state-default" style="min-height:194px; ';
+				if(resultList[i].goodsStat!="90" || resultList[i].currStockQty<1){
+					html += 'background:#f5f5f5;';
+				}
+				html += '">';
+				html += '<li class="img">';
+				var imgPath = '';
+				if(resultList[i].imgType=='A'){
+					imgPath = uploadGoodsUrl;
+				}
+				html += '<img src="'+imgPath+ "/" +resultList[i].imgPath1+'" onerror="this.src=\'/image/no.gif\';"/>';
+				html += '<div class="btnArea">';
+				html += '<button type="button" class="icnSm" title="맨위로" onclick="fnUpdownBtn(\''+resultList[i].goodsCd+'\', \''+resultList[i].dispOrd+'\', \'up\');"><i class="fa fa-play-circle fa-rotate-270" aria-hidden="true"></i></button>';
+				html += '<button type="button" class="icnSm" title="위로"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>';
+				html += '<button type="button" class="icnSm" title="맨아래로" onclick="fnUpdownBtn(\''+resultList[i].goodsCd+'\', \''+resultList[i].dispOrd+'\', \'down\');"><i class="fa fa-play-circle fa-rotate-90" aria-hidden="true"></i></button>';
+				html += '<button type="button" class="icnSm" title="아래로"><i class="fa fa-arrow-down" aria-hidden="true"></i></button>';
+				html += '</div>';
+				html += '</li>';
+				html += '<li class="cont">';
+				html += '<ul>';
+				html += '<li class="no" name="goodsCd"><span>'+resultList[i].goodsCd+'</span>';
+				if(params.goodsAddYn=='Y'){
+					html += '<span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnPopupRemoveGoods(\''+resultList[i].goodsCd+'\');">X</a></span>';
+				}
+				html += '</li>';
+				html += '<li class="title">'+resultList[i].goodsNm+'</li>';
+				html += '<li class="price"><span>가격 :</span><em>'+resultList[i].currPrice.addComma()+'</em>원</li>';
+				html += '<li><span>재고 :</span><em>'+resultList[i].currStockQty+'</em></li>';
+				html += '<li>';
+				html += '<span>전시순서 :</span>';
+				html += '<input type="text" name="dispOrdEdit" value="" />';
+				html += '<input type="hidden" name="setDispOrd" value="'+resultList[i].dispOrd+'"/>';
+				html += '</li>';
+				html += '</ul>';
+				html += '</li>';
+				html += '</ul>';
+			}
+			$("#sortable").html(html);
+
+			$(".fa-arrow-up").off('click');
+			$(".fa-arrow-up").on('click', function(){
+				var ind = $(this).closest('.item').index();
+				if(ind>0){
+					$(".item").eq(ind-1).before($(".item").eq(ind));
+					$(".item").eq(ind).find("input[name=setDispOrd]").val(Number($(".item").eq(ind).find("input[name=setDispOrd]").val())+1);
+					$(".item").eq(ind-1).find("input[name=setDispOrd]").val(Number($(".item").eq(ind-1).find("input[name=setDispOrd]").val())-1);
+				}
+			});
+			$(".fa-arrow-down").off('click');
+			$(".fa-arrow-down").on('click', function(){
+				var ind = $(this).closest('.item').index();
+				if(ind<resultList.length){
+					$(".item").eq(ind+1).after($(".item").eq(ind));
+					$(".item").eq(ind).find("input[name=setDispOrd]").val(Number($(".item").eq(ind).find("input[name=setDispOrd]").val())-1);
+					$(".item").eq(ind+1).find("input[name=setDispOrd]").val(Number($(".item").eq(ind+1).find("input[name=setDispOrd]").val())+1);
+				}
+			});
+			fnViewInit();
+		}
+		gagaPaging.createPagination(result.pageing.pageable);
+	}
+
+	var fnViewInit = function() {
+		//상품 나열 갯수 지정
+		var unitVal = $(".sortableWrap").attr("data-unit");
+		var itemW = parseInt($(".sortableWrap .item").outerWidth())+15;
+		var setW = unitVal*itemW;
+		$(".sortableWrap .itemWrap").css("width", setW+"px");
+	}
 
+	$(document).ready(function() {
+		$("#sortable").sortable({
+			stop: function(event, ui) {
+				var pageNo = Number($("#pageNo").val());
+				if(firstOrd==''){
+					firstOrd = 1;
+				}else{
+					firstOrd = Number(firstOrd);
+				}
+				$(".item").each(function(i){
+					$(this).find("input[name=dispOrd]").val(i+firstOrd);
+				});
+			}
+		});
+		$("#sortable").disableSelection();
+		//sortable Item List
+		fnSearchPopup();
+	});
+</script>
 </html>