style24
/
STYLE24


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsImageMassForm.html
 * @desc    : 상품 이미지 보기 화면(대량등록)
 *============================================================================
 * SISUN
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.27   eskim       최초 작성
 *******************************************************************************
 -->
	<div class="modalPopup" data-width="1280">
		<!-- PANELSTYLE -->
			<div class="panelStyle">
				<!-- TITLE -->
				<div class="panelTitle">
					<h2>상품 이미지 <th:block th:text="${goodsImg.mode =='U'}? '상세':'등록'"></th:block>&nbsp;<button type="button" class="btn icn" onclick="fnOpenCommentPopup('comment')" ><i class="fa fa-cog" aria-hidden="true"></i></button></h2>
					<button type="button" class="close" onclick="fnGoodsImgFormClose()"><i class="fa fa-times"></i></button>
				</div>
				<!-- //TITLE -->
				<!-- CONTENT -->
				<div class="panelContent">
				<form id="goodsImgForm" name="goodsImgForm" action="#" th:method="post">
				<input type="hidden" name="goodsCd" th:value="${goodsImg.goodsCd}"/>
				<input type="hidden" name="colorCd" th:value="${goodsImg.colorCd}"/>
<!-- 				<input type="hidden" name="goodsCd" th:value="14373767"/>
				<input type="hidden" name="colorCd" th:value="IV"/>
 -->				
					<ul class="notice">
						<li>[업로드/수정] 버튼 클릭 하면 프론트에 바로 적용되므로 최종 확인 후 전송을 권장합니다.</li>
						<li>이미지 미리보기 리스트는 <em>업로드 후</em> 확인 할 수 있습니다.</li>
						<li>이미지보기 버튼은 이미지 파일 <em>등록 후</em> 확인 할 수 있습니다. 이미 <em>업로드 된</em> 파일은 확인 할 수 없습니다.(파일 크기 옆 화살표로 구분 가능합니다.)</li>
					</ul>
					<table class="frmStyle">
						<colgroup>
							<col width="7%"/>
							<col width="25%"/>
							<col width="8%"/>
							<col width="10%"/>
							<col width="8%"/>
							<col width="10%"/>
							<col width="8%"/>
							<col/>
						</colgroup>
						<tr>
							<th>상품코드</th>
							<td th:text="${goodsImg.goodsCd}">14373767</td>
							<th>컬러명</th>
							<td th:text="${goodsImg.colorNm}">PINK</td>
							<th>대표 이미지순번</th>
							<td><input type="text" class="text-right" name="defaultImgOrd" maxlength="3" th:value="${defaultImgOrd}" required="required" data-valid-type="number" data-valid-name="대표이미지순번"/></td>
							<td colspan="2"></td>
						</tr>
						<tr>
							<th>이미지등록</th>
							<td class="dexterArea">

								<!-- 덱스터 테이블 영역 -->
								<ul class="dexterTable">
									<li class="dexterNo" id="dx5Index">
										<!-- 덱스터 테이블 번호 -->
										<!-- //덱스터 테이블 번호 -->
									</li>
									<li>
									<!-- 덱스터 테이블 삽입 -->
										<!-- 덱스터 테이블 삽입<br/>공간은 테이블 넓이에 따라 자동으로 넓어집니다.<br/>
										(최소 넓이 : 350px로 설정됨)<br/> -->
										<div id="dext5-container" style="width: 100%; height: 450px;"></div>
									<!-- //덱스터 테이블 -->
									<li>
								</ul>
								<!-- //덱스터 테이블 영역 -->

							</td>
							<td colspan="6" class="verticalTop">

								<!-- 이미지 카드 영역 -->
								<div class="cardArea" id="dx5CardArea">
									<!-- 이미지 카드 -->
								</div>
								<!-- //이미지 카드 영역 -->
							</td>
						</tr>
					</table>
				</form>	
				</div>
				<!-- 버튼 배치 영역 -->
				<ul class="panelBar marT10">
					<li class="center">
						<button type="button" class="btn btn-base btn-sm" id="btnAddFiles">파일 추가</button>
						<button type="button" class="btn btn-default btn-sm" onclick="gagaDx5.deleteChooseFile();">선택 삭제</button>
						<button type="button" class="btn btn-default btn-sm" onclick="gagaDx5.deleteAllFiles();">전체 삭제</button>
						<button type="button" class="btn btn-info btn-sm" onclick="gagaDx5.moveFile(true);">위로 이동</button>
						<button type="button" class="btn btn-info btn-sm" onclick="gagaDx5.moveFile(false);">아래로 이동</button>
						<!-- <button type="button" class="btn btn-base btn-sm" onclick="gagaDx5.previewImage();">이미지 보기</button> -->
						<button type="button" class="btn btn-base btn-sm" onclick="gagaDx5.uploadFiles();">업로드/수정</button>
					</li>
				</ul>
				<!-- //버튼 배치 영역 -->
			</div>
	</div>
<script type="text/javascript" src="/dx5/dextuploadx5-configuration.js?v=2020122101"></script>
<script type="text/javascript" src="/dx5/dextuploadx5.js?v=2020122101"></script>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.dx5.js?2020122101"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	
	var goodsImgList = [[${goodsImgList}]];
	
	//--------------------------------------------------------------------------
	// Dextupload X5 이벤트 Start
	//--------------------------------------------------------------------------
	// Dextupload X5 생성
	gagaDx5.createDX5("dext5", "btnAddFiles", _goodsUrl, "goods");

	// Dextupload X5 생성 후 호출되는 이벤트
	var onDX5Created = function(id) {
		var actionUrl = '/dext/files/upload/goods';
		gagaDx5.onDX5Created(actionUrl, goodsImgList);
	}

	// Dextupload X5 에러 시 호출되는 이벤트
	var onDX5Error = function(id, code, msg) {
		mcxDialog.alert(id + " => " +  code + "\n" + msg);
	}

	// Dextupload X5 업로드 성공 시 호출되는 이벤트
	var onDX5UploadCompleted = function(id) {
		gagaDx5.uploadAfterProcess();
	}

	// Dextupload X5 이미지 등록이 완료된 후 호출되는 이벤트
	var onDX5ItemsAdded = function(id, count) {
		gagaDx5.resortDX5FileList();
	}
	//--------------------------------------------------------------------------
	// Dextupload X5 이벤트 End
	//--------------------------------------------------------------------------
	
	// 업로드 후처리. 반드시 구현해야 함. (gaga.dx5.js 파일에서 호출됨)
	var fnUploadAfterProcess = function(id, result) {
// 		if (typeof(result) != 'undefined') {
// 			if (!gagajf.isNull(result.error.message)) {
// 				gagaAlert.alert(result.error.message);
// 				return;
// 			}
// 		}

		console.log(result);

		var dx = dx5.get(id);

		var updatedData = [];

		// 삭제한 파일 설정
		var deleteFiles = dx.getRemovedFiles();
		if (deleteFiles.length > 0) {
			$.each(deleteFiles, function(idx, item) {
				var params = new Object();
				params.mode = 'D';
				params.goodsCd = $('#goodsImgForm input[name=goodsCd]').val();
				params.colorCd = $('#goodsImgForm input[name=colorCd]').val();
				params.dispOrd = idx + 1;
				params.orgImgNm = item.name;
				params.sysImgNm = item.name;
				params.sysImgUrl = item.url;
				params.defaultImgYn = 'N';
				updatedData.push(params);
			});
		}

		// 업로드한 파일 및 순서 변경한 파일 설정
		var totCnt = dx.getTotalItemCount();
		if (totCnt > 0) {
			for (var i = 0; i < totCnt; i++) {
				var item = dx.getItemByIndex(i);

				var params = new Object();
				params.mode = (item.type == 'FILE') ? 'C' : '';
				params.goodsCd = $('#goodsImgForm input[name=goodsCd]').val();
				params.colorCd = $('#goodsImgForm input[name=colorCd]').val();
				params.dispOrd = i + 1;
				params.orgImgNm = item.name;
				params.sysImgNm = item.name;
				params.sysImgUrl = item.url;
				params.defaultImgYn = ($('#goodsImgForm input[name=defaultImgOrd]').val() == (i + 1)) ? 'Y' : 'N';
				updatedData.push(params);
			}
		}

		var jsonData = JSON.stringify(updatedData);
		console.log(jsonData);

		gagajf.ajaxJsonSubmit('/goods/thumbnail/image/save', jsonData, fnUploadCallback);
	}

	// 콜백함수
	var fnUploadCallback = function(result) {
		// 기본이미지명 조회
		//var actionUrl = '/goods/default/image/url'
		//		+ '?goodsCd=' + $('#goodsImgForm input[name=goodsCd]').val()
		//		+ '&colorCd=' + $('#goodsImgForm input[name=colorCd]').val();

		//$.get(actionUrl
		//	, function(url) {
		//		console.log(url);
		//		//opener.setImg($('#goodsImgForm input[name=defaultImgOrd]').val(), result.defaultImgNm);
		//		fnGoodsImgFormClose();
		//	});
		fnGoodsImgFormClose();
	}

	// 더블클릭시 썸네일 지정 후 첫번째로 이동
	function onDX5ItemDoubleClick(id, itemIndex, itemId, itemType) {
		var dx = dx5.get(id);
		var gubun = $("#gubun").val();

		gagaAlert.confirm('선택하신 이미지를 대표이미지로 선택하시겠습니까?', function() {
			firstMoveUp(itemIndex);
			return false;
		});
	}

	// 선택 항목을 첫번째로 이동
	function firstMoveUp(selIndex){
		ti = parseInt(selIndex, 10);
		for(var i = ti; i > 0; i--) {
			dx5.get("dext5").moveItemUp(i);
		}
	}

	//창종료
	var fnGoodsImgFormClose = function(){
		$('.dx5-pop-up').remove();
		$('.dx5-pop-dn').remove();
		$('.dx5-pop-pv').remove();
		$('.dx5-pop-cp').remove();
		$('.dx5-pop-ud').remove();
		uifnPopupClose('popupGoodsImageMass');
	}

	//안내팝업
	var fnOpenCommentPopup = function(id) {
		var str = '<div class="popupWrap"  id="'+id+'" style="z-index:30">';
		str = str + '<div class="modalPopup" data-width="500">';
		str = str + '<div class="panelStyle">';
		str = str + '<div class="panelTitle"><button type="button" class="close" onclick="uifnPopupClose(\''+id+'\')"><i class="fa fa-times"></i></button></div>';
		str = str + '<div class="panelContent">';
		str = str + '<ul class="notice ">';
		str = str + '<em><b>* 이미지 타입</b></em>';
		str = str + '<li> <b>A</b> : <b>자사전용</b>(이미지 도메인명 없음)</li>';
		str = str + '  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ex) /P/PQS/PQS11TM24M_BU/1000/PQS11TM24M_BU_01.jpg';
		str = str + '<li> <b>B</b> : <b>입점전용</b>(https를 포함한 이미지 전체 경로)</li>';
		str = str + '  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ex) <em>https:</em>//pastel.jpg2.kr/goods/LCCAJ334_IV_1.jpg';
		str = str + '<li><b>IMG_PATH1 (<em>필수</em>)</b> : 상품코드_<b>01.jpg</li>';
		str = str + '<li><b>IMG_PATH2 ~ IMG_PATH5</b> (선택) : 상품코드_<b>02</b>.jpg ~ 상품코드_<b>05</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH6 ~ IMG_PATH10</b> (선택, 화보컷) : 상품코드_<b>M1</b>.jpg ~ 상품코드_<b>M5</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH11 ~ IMG_PATH25</b> (선택, 상세컷) : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D15</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH26 ~ IMG_PATH27</b> (선택, 라벨컷) : 상품코드_<b>R1</b>.jpg ~ 상품코드_<b>R2</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH28 ~ IMG_PATH30</b> (선택, 기타컷) : 상품코드_<b>E1</b>.jpg ~ 상품코드_<b>E3</b>.jpg</li>';
		str = str + '</ul>';
		str = str + '</div></div></div></div>';

		if ($('#'+ id).length == 0) {
			$('body').append(str);
		}
		uifnPopupOpen(id);
		//$("#"+id).css({display:"block"});
	}
	
/*]]>*/
</script>
</html>