style24
/
style24.admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsVideoForm.html
 * @desc    : 상품동영상관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.16   eskim       최초 작성
  *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- 검색조건 영역 -->
		<div class="panelStyle">
			<!-- TITLE -->
			<div class="panelTitle">
				<h3><i class="fa fa-info-circle"></i>아래 검색조건 중 하나를 꼭 입력해 주세요.</h3>
			</div>
			<!-- //TITLE -->
			<div class="panelContent">
			
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/goods/video/list'}">
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:40%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>키워드</th>
						<td>
							<select name="keyWord">
								<option value="goodsCd">상품코드</option>
								<option value="goodsNm">상품명</option>
								<option value="goodsNum">품번</option>
								<option value="supplyGoodsCd">업체상품코드</option>
							</select>
							<input type="text" class="w100" maxlength="20" name="searchTxt" placeholder=""/>
							<input type="text" class="off" name="goodsCd" id="goodsCd"/>
							<input type="text" class="off" name="goodsNm" id="goodsNm"/>
							<input type="text" class="off" name="goodsNum" id="goodsNum"/>
							<input type="text" class="off" name="supplyGoodsCd" id="supplyGoodsCd"/>
						</td>
						<th>브랜드명</th>
						<td>
							<input type="text" class="w200" name="brandEnm" placeholder="" maxlength="50"/>
						</td>
					</tr>
					<tr>
						<th>등록일</th>
						<td colspan="3" id="sellTerms">
						</td>
					</tr>
				</table>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-default btn-lg" id="btnInit">초기화</button>
						<button type="button" class="btn btn-success btn-lg" id="btnSearch">조회</button>
					</li>
				</ul>
			</form>
			</div>
		</div>
		<!-- //검색조건 영역 -->
		
		<!-- 리스트 영역 -->
		<div class="panelStyle">
			<ul class="panelBar">
				<li class="left">
					<button type="button" class="btn btn-danger btn-lg" id="btnNotUse">노출안함</button>
				</li>
				<li  class="right">
					<button type="button" class="btn btn-default btn-lg" onclick="cfnDownloadSampleFile('SF002');">상품동영상등록 양식다운로드</button>
					<button type="button" class="btn btn-info btn-lg" id="btnExcReg">엑셀등록</button>
				</li>
			</ul>
			<div id="gridList" style="width: 100%; height: 450px;" class="ag-theme-balham"></div>
		</div>
		<!-- //리스트 영역 -->
		<!-- 등록/수정 -->
		<div class="panelStyle">
			<form id="detailForm" name="detailForm" action="#" >
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<td colspan='6'>동영상등록(상세)</td>
					</tr>
					<tr>
						<th>상품코드<em class="required" title="필수"></em></th>
						<td>
							<input name="videoSq"  data-valid-name="상품동영상일련번호" type="hidden"/>
							<input type="text" class="w150" name="goodsCd" maxlength="20" required="required" data-valid-name="상품코드"/>
						</td>
						<th>동영상구분<em class="required" title="필수"></em></th>
						<td>
							<select name="videoGb" id="videoGb" required="required" data-valid-name="동영상구분" onchange="fnVideoGb();">
								<!-- <option value="">[선택]</option> -->
								<option value="Y" selected="selected">[Y] 유투브</option>
								<option value="M">[M] MP4</option>
							</select>
						</td>
						<th>노출여부<em class="required" title="필수"></em></th>
						<td>
							<label class="rdoBtn"><input type="radio" name="dispYn" id="dispYn" value="Y" checked="checked">Y</label>
							<label class="rdoBtn"><input type="radio" name="dispYn" id="dispYn" value="N">N</label>
						</td>
					</tr>
					<tr id="youtubeArea">
						<th>동영상URL<em class="required" title="필수"></em></th>
						<td class="infoTxt" colspan="5">
							<em><i class="fa fa-info-circle"></i>유투브의 경우 빨간색 표시로 되어있는 값만 넣으세요.</em><br/>
							예시 : https://www.youtube.com/embed/<em><strong>5YqYG71bQ3s</strong></em>?showinfo=0&amp;rel=0&amp;vp=hd1080&amp;fs=0&amp;wmode=opaque&amp;enablejsapi=1
							<br/>
							<input type="text" class="w400" id="kmcKey" name="kmcKey" maxlength="100" >
							<button type="button" class="btn btn-dark btn-lg" onclick="cfnOpenGoodsVideoPopup('filmVideoView','kmcKey', '#detailForm', $('#videoGb').val());">미리보기</button>
						</td>
					</tr>
					<tr id="fileArea" style="display:none;">
						<th>파일첨부<em class="required" title="필수"></em></th>
						<td class="infoTxt" colspan="5">
							<div class="uFile w300">
								<input id="file" name="file" type="file" class="uFileInput w300"/>
								<label for="file" class="uFileLabel">파일선택</label>
								<input type="hidden" name="kufKey"/>
								<input type="hidden" name="kmcKey"/>
							</div>
							<div id="keyArea">미디어키 : <input type="text" class="w200"  name="hkmcKey" disabled> upload키 : <input type="text" class="w200"  name="hkufKey" disabled></div>
							<button type="button" class="btn btn-dark btn-lg" onclick="cfnOpenGoodsVideoPopup('filmVideoView','kmcKey', '#detailForm', $('#videoGb').val());">미리보기</button>
							
						</td>
					</tr>
				</table>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
						<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
					</li>
				</ul>
			</form>
		</div>
	</div>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.kollus.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	var videoGbList = {'Y':'유투브', 'M':'MP4'};
	// specify the columns
	var columnDefs = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{headerName: 'No', width: 60, cellClass: 'text-center', valueGetter: function(params) { return params.node.rowIndex + 1 }},
		{headerName: "브랜드명", field: "brandEnm", width: 120, cellClass: 'text-center'},
		{headerName: "상품동영상일련번호", field: "goodsVideoSq", width: 120, cellClass: 'text-center', hide: true},
		{headerName: "상품코드", field: "goodsCd", width: 120, cellClass: 'text-center',
			cellRenderer: function(params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}	
		},
 		{headerName: "동영상구분", field: "videoGb", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) { return !gagajf.isNull(params.value) ? "["+params.value+"] "+gagaAgGrid.lookupValue(videoGbList, params.value) : '';}
		},
		{headerName: "동영상정보", field: "kmcKey", width: 300, cellClass: 'text-center'},
		{headerName: "노출여부", field: "dispYn", width: 80, cellClass: 'text-center'},
		{headerName: "등록일자", field: "regDt", width: 150, cellClass: 'text-center',
			cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
			}
		},
		{headerName: "등록자", field: "regNm", width: 150, cellClass: 'text-center'},
		{headerName: "수정일자", field: "updDt", width: 150, cellClass: 'text-center',
			cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
			}
		},
		{headerName: "수정자", field: "updNm", width: 150, cellClass: 'text-center'},
	];
	
	// Get GridOptions
	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
	
	gridOptions.rowSelection = 'multiple';
	gridOptions.suppressRowClickSelection = true;
	
	// 상품코드 셀 클릭
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field == "goodsCd"){
			var formId = '#detailForm';
			$(formId + " input[name=videoSq]").val(event.data.videoSq);
			$(formId + " input[name=goodsCd]").val(event.data.goodsCd);
			$(formId + " select[name=videoGb]").val(event.data.videoGb);
			$(formId + " input[name=kmcKey]").val(event.data.kmcKey);
			$(formId + " input[name=kufKey]").val(event.data.kufKey);
			$(formId + " input[name=hkmcKey]").val(event.data.kmcKey);
			$(formId + " input[name=hkufKey]").val(event.data.kufKey);
			$(formId + " input:radio[name=dispYn]:input[value="+event.data.dispYn+"]").click();
			$(formId + " input[name=goodsCd]").prop("disabled", true);
			$(formId + " select[name=videoGb]").prop("disabled", true);
			
			$(formId).closest("div").show();
			if ("Y" == event.data.videoGb){
				$('#youtubeArea').show();
				$('#fileArea').hide();
			}else{
				$('#youtubeArea').hide();
				$('#fileArea').show();
				$('.uFile').hide();
				$('#keyArea').show();
			}
		}
	}
	
	// 신규 버튼 클릭
	$("#btnNew").on('click', function() {
		$("#detailForm")[0].reset();
		$("#detailForm input[name=videoSq]").val('');
		$("#detailForm input[name=goodsCd]").prop("disabled", false);
		$("#detailForm select[name=videoGb]").prop("disabled", false);
		$('#youtubeArea').show();
		$('#fileArea').hide();
	});

	// 엑셀등록
	$("#btnExcReg").on('click', function() {
		cfnExcelUploadPopup('','fnExcelUpoadCallback');
	});
	
	var fnExcelUpoadCallback = function(data){
		
		var jsonData = JSON.stringify(data);
		gagajf.ajaxJsonSubmit('/goods/video/excel/save', jsonData, fnSaveCallback);
		
	}
	
	// 동영상구분 변경시
	var fnVideoGb = function(){
		if ("Y" == $("#detailForm select[name=videoGb]").val()){
			$('#youtubeArea').show();
			$('#fileArea').hide();
			$('.uFile').hide();
			$('#keyArea').hide();
		}else{
			$('#youtubeArea').hide();
			$('#fileArea').show();
			$('.uFile').show();
			$('#keyArea').hide();
		}
	}
	
	// 조회
	$('#btnSearch').on('click', function() {
		$("#goodsCd").val('');
		$("#goodsNm").val('');
		$("#goodsNum").val('');
		$("#supplyGoodsCd").val('');
		$("#"+$("#searchForm select[name=keyWord]").val()).val($("#searchForm input[name=searchTxt]").val());
		
		if(!fnConditionCheck()) return;
		
		
		// Fetch data
		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
		$("#btnNew").click();
	});
	
	//검색 조건 확인
	var fnConditionCheck = function(){
		var form = document.searchForm;

		var searchFlag = false;
		var cnt = 0;

		for (i = 0; i < form.elements.length; i++ ) {
			var el = form.elements[i];

			if ($(el).prop("type") == "text" || ($(el).prop("type") == "select-one" && el.name != "search" && el.name != "pageSize" && el.name != "keyWord")) {
				if (!(el.value == null || el.value == "")) {
					cnt++;
				}
			}
		}
		if(cnt > 0) searchFlag = true;

		
		if(searchFlag == false){
			mcxDialog.alert("검색조건을 입력하세요.");
			return false;
		}
		
		// 기간 값 체크
		if (!fnCalendarDateValidation('#sellTerms', 'stDate', 'edDate')){
			return false;
		}

		return true;
	}
	
	// 검색조건 초기화
	$('#btnInit').on('click', function() {
		$("#searchForm")[0].reset();
	});
	
	// 선택상품 사용안함
	$("#btnNotUse").on('click', function() {
		var selectRowData = gagaAgGrid.selectedRowData(gridOptions);
		if(selectRowData.length>0){
			mcxDialog.confirm('선택한 상품동영상을 미노출처리 하시겠습니까?', {
				cancelBtnText: "취소",
				sureBtnText: "확인",
				sureBtnClick: function(){
					var jsonData = JSON.stringify(selectRowData);
					gagajf.ajaxJsonSubmit('/goods/video/update/notUse', jsonData, fnSaveCallback);
				}
			})
		}else{
			mcxDialog.alert("선택된 상품동영상이 없습니다.");
		}
	});
	
	// 동영상 저장
	$("#btnSave").on('click', function() {
		
		var formId = '#detailForm';
		var videoSq = $(formId + " input[name=videoSq]").val();
		var goodsCd = $(formId + " input[name=goodsCd]").val();
		var videoGb = $(formId + " select[name=videoGb]").val();
		var kmcKey = $(formId + " input[name=kmcKey]").val();
		var kufKey = $(formId + " input[name=kufKey]").val();
		var dispYn = $(formId + " input:radio[name=dispYn]:checked").val();
		
		if(goodsCd==''){
			gagajf.alertMessage(formId + " input[name=goodsCd]", 'input');
			return;
		}
		if(videoGb==''){
			gagajf.alertMessage(formId + " select[name=videoGb]", 'select');
			return;
		}
		/* if(kmcKey==''){
			gagajf.alertMessage(formId + " input[name=kmcKey]", 'input');
			return;
		} */
		
		if(kmcKey.indexOf("http")>-1){
			mcxDialog.alert('동영상 정보를 확인해 주세요.');
			return;
		}
		
		mcxDialog.confirm('저장 하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {videoSq : videoSq
							,goodsCd : goodsCd
							,videoGb : videoGb
							,kmcKey : kmcKey
							,kufKey : kufKey
							,dispYn : dispYn
							};
				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/goods/video/save', jsonData, fnSaveCallback);
			}
		})
	});
	
	var fnSaveCallback = function() {
		$('#btnSearch').click();
	}
	
	// 동영상파일 선택 시
	$('#detailForm input[name=file]').on('change', function() {
		var file = this.files[0];
		gagaKollus.upload('Goods', file, $('input[name=kufKey]'));
	});
	
	$(document).ready(function() {
		
		cfnCreateCalendar('#sellTerms', 'stDate', 'edDate', true, '등록일', true);
		
		// Create a agGrid
		gagaAgGrid.createGrid('gridList', gridOptions);
		
		//$('#btnSearch').click();
	});
/*]]>*/
</script>

</html>