style24
/
style24.admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
	<!--
 *******************************************************************************
 * @source  : CustomerGradePolicyForm.html
 * @desc    : 회원등급정책관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.06   gagamel     최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- //메뉴 설명 -->
		
		<!-- 검색조건 영역 -->
		<div class="panelStyle">
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/envset/customer/grade/policy/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
				<table class="frmStyle" aria-describedby="검색조건">
					<colgroup>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>사이트</th>
						<td>
							<select name="siteCd">
								<option th:if="${siteList}" th:each="oneData, status : ${siteList}"th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
					</tr>
				</table>
				
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
					</li>
				</ul>
			</form>
		</div>
		<!-- 검색조건 영역 -->
		
		<!-- 리스트 영역 -->
		<div class="panelStyle">
			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham lh60"></div>
		</div>
		
		<!-- 등록/수정 -->
		<div class="panelStyle">
			<form id="detailForm" name="detailForm" action="#" th:action="@{'/envset/customer/grade/policy/create'}">
				<table class="frmStyle" aria-describedby="등록/상세폼">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:15%;"/>
						<col style="width:10%;"/>
						<col style="width:15%;"/>
						<col style="width:10%;"/>
						<col style="width:15%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>사이트<em class="required" title="필수"></em></th>
						<td>
							<select name="siteCd" required="required" data-valid-name="사이트">
								<option value="">[선택]</option>
								<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>회원등급<em class="required" title="필수"></em></th>
						<td>
							<select name="gradeCd" required="required" data-valid-name="회원등급">
								<option value="">[선택]</option>
								<option th:if="${custGradeList}" th:each="oneData, status : ${custGradeList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th rowspan="2">아이콘명<em class="required" title="필수"></em></th>
						<td colspan="3" rowspan="2">
							<span class="badgeLevel black marR10" id="iconPrefix"></span>
							<input type="text" name="iconNm" class="w50" maxlength="20" required="required" data-valid-type="alphaNumeric" data-valid-name="아이콘명" onkeyup="$(this).val($(this).val().toUpperCase());"/>
							<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>프론트 표기 접두사</span>
						</td>
					</tr>
					<tr>
						<th>등급산정기간<em class="required" title="필수"></em></th>
						<td colspan="5">
							전월 기준 최근 <input type="text" name="calMonths" class="w50 aR" maxlength="2" value="3" required="required" data-valid-type="pinteger" data-valid-name="등급산정기간"/> 개월
						</td>
					</tr>
					<tr>
						<th>승급조건<em class="required" title="필수"></em></th>
						<td colspan="7">
							구매금액(<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>쿠폰할인, 포인트할인, 배송비, 취소/반품내역을 반영한 실결제금액</span>)
							<input type="text" name="minBuyAmt" class="w100 aR" maxlength="10" value="0" required="required" data-valid-type="pinteger" data-valid-name="구매금액"/>원 <span class="cRed">이상</span>
							<span class="infoTxt cRed"><strong>또는</strong></span>
							주문당 <input type="text" name="buyExceptAmt" class="w100 aR" maxlength="10" value="0" required="required" data-valid-type="pinteger" data-valid-name="구매건수제외조건"/>원 <span class="cRed">미만 구매건을 제외</span>한 구매건수(<span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>취소를 반영한 주문건수</span>)
							<input type="text" name="minBuyCnt" class="w50 aR" maxlength="2" value="0" required="required" data-valid-type="pinteger" data-valid-name="구매건수"/>건 <span class="cRed">이상</span>
						</td>
					</tr>
					<tr>
						<th>혜택쿠폰1</th>
						<td colspan="3">
							<input type="text" class="w300" name="gradeCpnNm1" onkeypress="if (window.event.keyCode == 13) { fnOpenCouponRetrievePopup('input[name=gradeCpnId1]', 'input[name=gradeCpnNm1]'); }"/>
							<button type="button" class="btn icn" onclick="fnOpenCouponRetrievePopup('input[name=gradeCpnId1]', 'input[name=gradeCpnNm1]');"><i class="fa fa-search cpn" aria-hidden="true"></i></button>
							<input name="gradeCpnId1" type="text" class="w100" maxlength="20" readonly="readonly"/>
							<button type="button" class="btn icn" onclick="$('input[name=gradeCpnId1], input[name=gradeCpnNm1]').val('');"><i class="fa fa-eraser" aria-hidden="true"></i></button>
							<br/><span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>WELCOME 등급시 회원가입시 자동 지급하는 쿠폰</span>
						</td>
						<th>혜택쿠폰2</th>
						<td colspan="3">
							<input type="text" class="w300" name="gradeCpnNm2" onkeypress="if (window.event.keyCode == 13) { fnOpenCouponRetrievePopup('input[name=gradeCpnId2]', 'input[name=gradeCpnNm2]'); }"/>
							<button type="button" class="btn icn" onclick="fnOpenCouponRetrievePopup('input[name=gradeCpnId2]', 'input[name=gradeCpnNm2]');"><i class="fa fa-search cpn" aria-hidden="true"></i></button>
							<input name="gradeCpnId2" type="text" class="w100" maxlength="20"  readonly="readonly"/>
							<button type="button" class="btn icn" onclick="$('input[name=gradeCpnId2], input[name=gradeCpnNm2]').val('');"><i class="fa fa-eraser" aria-hidden="true"></i></button>
						</td>
					</tr>
					<tr>
						<th>혜택쿠폰3(생일쿠폰)</th>
						<td colspan="3">
							<input type="text" class="w300" name="gradeCpnNm3" onkeypress="if (window.event.keyCode == 13) { fnOpenCouponRetrievePopup('input[name=gradeCpnId3]', 'input[name=gradeCpnNm3]'); }"/>
							<button type="button" class="btn icn" onclick="fnOpenCouponRetrievePopup('input[name=gradeCpnId3]', 'input[name=gradeCpnNm3]');"><i class="fa fa-search cpn" aria-hidden="true"></i></button>
							<input name="gradeCpnId3" type="text" class="w100" maxlength="20"  readonly="readonly"/>
							<button type="button" class="btn icn" onclick="$('input[name=gradeCpnId3], input[name=gradeCpnNm3]').val('');"><i class="fa fa-eraser" aria-hidden="true"></i></button>
						</td>
						<th>표시순서<i class="required" title="필수" aria-hidden="true"></i></th>
						<td>
							<input type="text" class="w100 aR" name="dispOrd" placeholder="" maxlength="5" required="required" data-valid-type="numeric" data-valid-name="표시순서" />
						</td>
						<th>사용여부</th>
						<td>
							<input type="hidden" name="useYn" value="Y"/>
							<label class="chkBox checked"><input type="checkbox" name="chkUseYn" checked="checked"/>사용</label>
						</td>
					</tr>
				</table>
			</form>
			
			<!-- 버튼 배치 영역 -->
			<ul class="panelBar">
				<li class="right">
					<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>
			<!-- //버튼 배치 영역 -->
		</div>
		<!-- 등록/수정 -->
	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	var siteList = gagajf.convertToArray([[${siteList}]]);
	var custGradeList = gagajf.convertToArray([[${custGradeList}]]);

	var columnDefs = [
		{
			headerName: "사이트", field: "siteCd", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
		},
		{
			headerName: "회원등급", field: "gradeCd", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) { return '<a href="javascript:void(0);">' + gagaAgGrid.lookupValue(custGradeList, params.value) + '</a>'; }
		},
		{
			headerName: "아이콘명", field: "iconNm", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) { return '<span class="badgeLevel black">' + params.value + '</span>' }
		},
		{
			headerName: "등급산정기간", field: "calMonths", width: 180, cellClass: 'text-center',
			cellRenderer: function(params) { return '전월 기준 최근 ' + gagaAgGrid.toAddComma(params.value) + '개월'; }
		},
		{
			headerName: "승급조건", field: "upgradeCondition", width: 500, cellClass: 'text-center',
			cellRenderer: function(params) {
				let condition = '';
				if (params.data.minBuyAmt > 0) condition += '구매금액 <span class="cRed">' + gagaAgGrid.toAddComma(params.data.minBuyAmt) + '</span>원 이상';
				if (params.data.minBuyAmt > 0) condition += ' 또는 ';
				condition += '구매건수 <span class="cRed">' + gagaAgGrid.toAddComma(params.data.minBuyCnt) + '</span>건 이상';
				if (params.data.minBuyCnt == 0) condition += ' (즉, 미구매)';
				if (params.data.buyExceptAmt > 0) condition += ' (<span class="cRed">' + gagaAgGrid.toAddComma(params.data.buyExceptAmt) + '</span>원 미만 구매건 제외)';
				return condition;
			}
		},
		{headerName: "구매금액", field: "minBuyAmt", width: 150, cellClass: 'text-right', hide: true},
		{headerName: "구매건수", field: "minBuyCnt", width: 150, cellClass: 'text-right', hide: true},
		{headerName: "구매건수제외조건", field: "buyExceptAmt", width: 150, cellClass: 'text-right', hide: true},
		{headerName: "등급쿠폰ID1", field: "gradeCpnId1", width: 120, cellClass: 'text-center', hide: true},
		{headerName: "등급쿠폰명1", field: "gradeCpnNm1", width: 200, hide: true},
		{headerName: "등급쿠폰ID2", field: "gradeCpnId2", width: 120, cellClass: 'text-center', hide: true},
		{headerName: "등급쿠폰명2", field: "gradeCpnNm2", width: 200, hide: true},
		{headerName: "등급쿠폰ID3", field: "gradeCpnId3", width: 120, cellClass: 'text-center', hide: true},
		{headerName: "등급쿠폰명3", field: "gradeCpnNm3", width: 200, hide: true},
		{headerName: "표시순서", field: "dispOrd", width: 80, cellClass: 'text-center'},
		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'},
		{headerName: "수정자", field: "updNm", width: 80, 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") : '';
			}
		}
	];

	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);

	// 이미지가 있을 경우 높이 지정
	gridOptions.rowHeight = 60;
	
	// 셀 클릭 이벤트
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field != 'gradeCd')
			return;
		
		$('#detailForm select[name=siteCd]').val(event.data.siteCd);
		$('#detailForm select[name=gradeCd]').val(event.data.gradeCd);
		$('#detailForm input[name=iconNm]').val(event.data.iconNm);
		$('#iconPrefix').html(event.data.iconNm);
		$('#detailForm input[name=calMonths]').val(event.data.calMonths);
		$('#detailForm input[name=minBuyAmt]').val(event.data.minBuyAmt.addComma());
		$('#detailForm input[name=minBuyCnt]').val(event.data.minBuyCnt);
		$('#detailForm input[name=buyExceptAmt]').val(event.data.buyExceptAmt.addComma());
		$('#detailForm input[name=gradeCpnId1]').val(event.data.gradeCpnId1);
		$('#detailForm input[name=gradeCpnNm1]').val(event.data.gradeCpnNm1);
		$('#detailForm input[name=gradeCpnId2]').val(event.data.gradeCpnId2);
		$('#detailForm input[name=gradeCpnNm2]').val(event.data.gradeCpnNm2);
		$('#detailForm input[name=gradeCpnId3]').val(event.data.gradeCpnId3);
		$('#detailForm input[name=gradeCpnNm3]').val(event.data.gradeCpnNm3);
		$('#detailForm input[name=dispOrd]').val(event.data.dispOrd);
		
		if (event.data.useYn == 'Y') {
			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', true);
			$("#detailForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
		} else {
			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', false);
			$("#detailForm input:checkbox[name=chkUseYn]").parent().removeClass('checked');
		}
	}

	// 검색
	$('#btnSearch').on('click', function() {
		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
	});
	
	// 쿠폰조회 팝업
	var fnOpenCouponRetrievePopup = function(strReturnCode, strReturnName) {
		var oParam = new Object();
		oParam.returnCode = strReturnCode;
		oParam.returnName = strReturnName;
		cfnOpenCouponRetrievePopup($(strReturnName).val(), oParam);
	}
	
	// 신규
	$('#btnNew').on('click', function() {
		$('#detailForm')[0].reset();
		$('#iconPrefix').html('');
		$('#detailForm select[name=siteCd]').focus();
	});

	// 저장
	$("#btnSave").on("click", function() {
		// 필수값 체크
		if (!gagajf.validation('#detailForm'))
			return false;

		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				$('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(':checked') ? 'Y' : 'N');
				
				gagajf.ajaxFormSubmit($('#detailForm').prop('action'), '#detailForm', function() {
					$('btnNew').click();
					$('#btnSearch').trigger('click');
				});
			}
		});
	});

	$(document).ready(function() {
		gagaAgGrid.createGrid('gridList', gridOptions);
	});
/*]]>*/
</script>

</html>