style24
/
style24.admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsImageMassForm.html
 * @desc    : 상품 이미지 보기 화면(대량등록)
 *============================================================================
 * STYLE24
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.27   eskim       최초 작성
 *******************************************************************************
 -->
	<div class="modalPopup" data-width="1400" data-height="800">
		<!-- 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}"/>
					<ul class="notice">
						<li>[업로드/수정] 버튼 클릭 하면 프론트에 바로 적용되므로 최종 확인 후 업로드를 권장합니다.</li>
						<li>이미지 미리보기 리스트는 <em>업로드 후</em> 확인 할 수 있습니다.</li>
						<li>상품이미지 업로드시 오류가 발생하면 화면 종료 후 다시 창의 띄어 파일 추가작업을 다시 해주세요.</li>
						<li>자사 상품의 <em>셋트/딜 상품</em> 이미지 등록시 파일명의 색상코드는 <em>'XX'</em>로 생성하여 진행해 주세요.</li>
						<li>자사 상품의 <em>외부몰용</em> 상품이미지(상품코드_색상코드_<em>X1</em>.jpg)의 사이즈는 <em>1000 x 1000</em> 입니다.</li>
					</ul>
					<table class="frmStyle">
						<colgroup>
							<col width="7%"/>
							<col/>
							<col width="7%"/>
							<col width="10%"/>
							<col width="10%"/>
							<col width="5%"/>
							<col width="10%"/>
							<col width="5%"/>
							<col width="7%"/>
							<col width="18%"/>
						</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="numeric" data-valid-name="대표이미지순번"/></td>
							<th>마우스오버 이미지순번</th>
							<td><input type="text" class="text-right" name="mouseoverImgOrd" maxlength="3" th:value="${mouseoverImgOrd}" required="required" data-valid-type="numeric" data-valid-name="마우스오버 이미지순번"/></td>
							<th>모델정보</th>
							<td><input type="text"  name="modelInfo" maxlength="50" th:value="${modelInfo}" required="required" /></td>
						</tr>
						<tr>
							<th>이미지등록</th>
							<td class="dexterArea" colspan="3">

								<!-- 덱스터 테이블 영역 -->
								<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.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';
				params.mouseoverImgYn = ($('#goodsImgForm input[name=mouseoverImgOrd]').val() == (i + 1)) ? 'Y' : 'N';
				params.modelInfo = $('#goodsImgForm input[name=modelInfo]').val();
				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);
				// 상세메인
				$("#goodsDetailForm").find("#goodsImgUrl").attr('src', url+"?RS=130");
				// 상세옵션
				$("#goodsDetailForm").find("#defaultImg").attr('src', url+"?RS=60");
				if (gagajf.isNull(url)){
					$("#goodsDetailForm").find("#btnDefaultImg").text("등록");	
				}else{
					$("#goodsDetailForm").find("#btnDefaultImg").text("수정");
				}
				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('popupGoodsImage');
	}

	//안내팝업
	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>상품메인컷</b> : 상품코드_색상코드_<b>01</b>.jpg<em>(앞)</em>,상품코드_색상코드_<b>02</b>.jpg<em>(뒤)</em></li>';
		str = str + '<li><b>상품모델컷</b> : 상품코드_색상코드_<b>C1</b>.jpg ~ 상품코드_색상코드_<b>C5</b>.jpg</li>';
		str = str + '<li><b>상품상세컷</b> : 상품코드_색상코드_<b>D1</b>.jpg ~ 상품코드_색상코드_<b>D20</b>.jpg</li>';
		str = str + '<li><b>상품소재컷</b> : 상품코드_색상코드_<b>F1</b>.jpg</li>';
		str = str + '<li><b>상품라벨컷</b> : 상품코드_색상코드_<b>L1</b>.jpg, (상품코드_색상코드_<b>L2</b>.jpg)</li>';
		str = str + '<li><b>상품외부몰용</b> : 상품코드_색상코드_<b>X1</b>.jpg</li>';
		str = str + '<br/>';
		str = str + '<em><b>* 입점 상품 이미지 파일명</b></em>';
		str = str + '<li><b>상품메인컷</b> : 상품코드_<b>01</b>.jpg<em>(앞)</em>,상품코드_<b>02</b>.jpg<em>(뒤)</em></li>';
		str = str + '<li><b>상품모델컷</b> : 상품코드_<b>C1</b>.jpg ~ 상품코드_<b>C5</b>.jpg</li>';
		str = str + '<li><b>상품상세컷</b> : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D20</b>.jpg</li>';
		str = str + '<li><b>상품소재컷</b> : 상품코드_<b>F1</b>.jpg</li>';
		str = str + '<li><b>상품라벨컷</b> : 상품코드_<b>L1</b>.jpg, (상품코드_<b>L2</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>