style24
/
style24.admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
							<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsDispOrdChangePopupForm.html
 * @desc    : 전시 상품 순서변경 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.18   bin2107     최초 작성
 *******************************************************************************
 -->
<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"/>
			<input type="hidden" id="cateCd" name="cateCd" th:value="${params.cateCd}"/>
			<input type="hidden" id="contentsLoc" name="contentsLoc" th:value="${params.contentsLoc}"/>
			<input type="hidden" id="brandGroupNo" name="brandGroupNo" th:if="${params.brandGroupNo!=null}" th:value="${params.brandGroupNo}"/>
			<input type="hidden" id="brandGroupNo" name="brandGroupNo" th:unless="${params.brandGroupNo!=null}" value="0"/>
			<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-primary btn-lg leafCateBtn" id="btnPopupAddGoods">상품추가</button>-->
<!--						<button type="button" class="btn btn btn-info btn-sm" id="btnPopupReset">원 위치로</button>-->
<!--						<button type="button" class="btn btn btn-info btn-sm" id="btnPopupInit">전시순서 초기화</button>-->
<!--						<button type="button" class="btn btn btn-success btn-sm" id="btnPopupSave">저장</button>-->
<!--					</li>-->
				</ul>
				<ul class="panelBar" style="margin-top: 10px;">
					<li>
						<button type="button" class="btn btn-danger btn-lg" onclick="fnAllGoodsDelete();">전체삭제</button>
					</li>
					<li class="right">
						<button type="button" class="btn btn-primary btn-lg leafCateBtn" id="btnPopupAddGoods">상품추가</button>
						<button type="button" class="btn btn btn-info btn-sm" id="btnPopupReset">원 위치로</button>
						<button type="button" class="btn btn btn-info btn-sm" id="btnPopupInit">전시순서 초기화</button>
						<button type="button" class="btn btn btn-success btn-sm" id="btnPopupSave">저장</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>
		</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 = [[${@environment.getProperty('upload.goods.view')}]];

	$("#btnSearch").on('click', function(){
		$("#goodsDispOrdChangeForm input[name=searchGb]").val("BASIC");
		gagaPaging.load(1);
	});

	var fnSearchData = function (){
		gagaPaging.init('goodsDispOrdChangeForm', fnSelectCallBack, 'goodsDispOrdChangePopupPagination', $('#goodsDispOrdChangeForm').find('#pageSize').val());
		gagaPaging.load(1);
	}

	var firstOrd = '';
	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;
		}
		var html = '';
		if(resultList.length > 0){
			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:225px; ';
				if(resultList[i].goodsStat!="G008_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();
		}else{
			$("#sortable").html(html);
		}
		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");
	}

	/**
	 * 원위치 버튼
	 */
	$("#btnPopupReset").on("click", function(){
		fnSearchData();
	});

	/**
	 * 상품추가 버튼
	 */
	$("#btnPopupAddGoods").on("click", function(){
		cfnOpenGoodsPopup('fnPopupAddGoods');
	});

	var fnPopupAddGoods = function(result){
		mcxDialog.confirm('적용하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var multiGoods = [];
				$.each(result, function(idx, item) {
					multiGoods.push(item.goodsCd);
				});

				var data = {
					mode : 'add'
					,cateNo : $("#goodsDispOrdChangeForm input[name=cateCd]").val()
					,multiGoods : multiGoods
					,brandGroupNo : $("#goodsDispOrdChangeForm input[name=brandGroupNo]").val()
				}
				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/display/category/goods/save', jsonData, fnSearchData);
				uifnPopupClose('popupGoods');
			}
		});
	}

	/**
	 * 상품 삭제 버튼
	 */
	var fnPopupRemoveGoods = function (goodsCd){
		mcxDialog.confirm('삭제하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {
					mode : 'delete'
					,cateNo : $("#goodsDispOrdChangeForm input[name=cateCd]").val()
					,brandGroupNo : $("#goodsDispOrdChangeForm input[name=brandGroupNo]").val()
					,goodsCd : goodsCd
				};

				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/display/goods/dispord/change/delete', jsonData, fnSearchData);
			}
		});
	}

	/**
	 * 전시초기화 클릭
	 */
	$("#btnPopupInit").on("click", function (){
		mcxDialog.confirm('전시순서가 상품 등록일 순서로 초기화 됩니다.\n초기화 하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {
					cateNo : $("#goodsDispOrdChangeForm input[name=cateCd]").val()
					,brandGroupNo : $("#goodsDispOrdChangeForm input[name=brandGroupNo]").val()
				};

				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/display/category/goods/dispord/init', jsonData, fnSearchData);
			}
		});
	});

	/**
	 * 상품 전체삭제
	 */
	var fnAllGoodsDelete = function (){
		mcxDialog.confirm('전체 상품을 삭제하시겠습니까??', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {
					mode : 'delete'
					,cateNo : $("#goodsDispOrdChangeForm input[name=cateCd]").val()
					,brandGroupNo : $("#goodsDispOrdChangeForm input[name=brandGroupNo]").val()
				};

				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/display/goods/dispord/change/delete', jsonData, fnSearchData);
			}
		});
	}

	$("#btnAlldelete").on("click", function (){

	});


	/**
	 * 최상단/하단 이동 버튼
	 */
	var fnUpdownBtn = function (goodsCd, dispOrd, changeGb){
		var msg = "최상단으로 이동시 바로 저장됩니다. 이동하시겠습니까?";
		if(changeGb=='down'){
			msg = "최하단으로 이동시 바로 저장됩니다. 이동하시겠습니까?";
		}
		mcxDialog.confirm(msg, {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {
					goodsCdArr : goodsCd
					,dispOrdArr : dispOrd
					,changeGb : changeGb
					,cateNo : $("#goodsDispOrdChangeForm input[name=cateCd]").val()
				}
				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/display/category/goods/dispord/updown', jsonData, fnSearchData);

			}
		});
	}

	$("#btnPopupSave").on("click", function(){
		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var dispOrdArr = [];
				var goodsCdArr = [];
				$(".item input[name=setDispOrd]").each(function(i){
					if($(".item").eq(i).find("input[name=dispOrdEdit]").val()==''){
						dispOrdArr.push($(this).val());
					}else{
						dispOrdArr.push($(".item").eq(i).find("input[name=dispOrdEdit]").val());
					}
				});
				$(".item li[name=goodsCd]").each(function(i){
					goodsCdArr.push($(this).find("span").eq(0).text());
				});

				var data = {
					dispOrdArr : dispOrdArr
					,goodsCdArr : goodsCdArr
					,cateNo : $("#goodsDispOrdChangeForm input[name=cateCd]").val()
					,contentsLoc : $("#goodsDispOrdChangeForm input[name=contentsLoc]").val()
				}

				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/display/category/goods/dispord/update', jsonData, fnSearchData);
			}
		});
	});

	$(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=setDispOrd]").val(i+firstOrd);
				});
			}
		});
		$("#sortable").disableSelection();
		//sortable Item List
		fnSearchData();
	});
</script>
</html>