gagamel пре 5 година
родитељ
комит
a3f3dfb34a
1 измењених фајлова са 461 додато и 0 уклоњено
  1. 461 0
      style24.admin/src/main/webapp/WEB-INF/views/display/CategoryForm.html

+ 461 - 0
style24.admin/src/main/webapp/WEB-INF/views/display/CategoryForm.html

@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : CategoryForm.html
+ * @desc    : 카테고리관리 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2020.12.30   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="@{'/display/category/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
+				<table class="frmStyle" aria-describedby="검색조건">
+					<colgroup>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+						<col width="10%"/>
+					</colgroup>
+					<tr>
+						<th>사이트</th>
+						<td>
+							<select name="siteCd">
+								<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>카테고리구분</th>
+						<td>
+							<select name="cateGb" id="selCate1" onchange="fnChangeSelect($(this).val(), 2);">
+								<option value="">[선택]</option>
+							</select>
+						</td>
+						<th>대카테고리</th>
+						<td>
+							<select name="tcateNo" id="selCate2" onchange="fnChangeSelect($(this).val(), 3);">
+								<option value="">[선택]</option>
+							</select>
+						</td>
+						<th>중카테고리</th>
+						<td>
+							<select name="mcateNo" id="selCate3" onchange="fnChangeSelect($(this).val(), 4);">
+								<option value="">[선택]</option>
+							</select>
+						</td>
+						<th>소카테고리</th>
+						<td>
+							<select name="scateNo" id="selCate4" onchange="fnChangeSelect($(this).val(), 5);">
+								<option value="">[선택]</option>
+							</select>
+						</td>
+					</tr>
+				</table>
+			</form>
+		</div>
+		<!-- 검색조건 영역 -->
+
+		<!-- 리스트 영역 -->
+		<div class="panelStyle">
+			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
+		</div>
+		<!-- //리스트 영역 -->
+		
+		<!-- 등록/수정 -->
+		<div class="panelStyle">
+			<form id="detailForm" name="detailForm" action="#" th:action="@{'/display/category/save'}">
+				<table class="frmStyle" aria-describedby="등록/수정 폼">
+					<colgroup>
+						<col style="width:10%;"/>
+						<col style="width:23%;"/>
+						<col style="width:10%;"/>
+						<col style="width:23%;"/>
+						<col style="width:10%;"/>
+						<col/>
+					</colgroup>
+					<tr>
+						<th>카테고리번호<i class="required" title="필수"></i></th>
+						<td>
+							<input type="text" class="w200" name="cateNo" placeholder="자동생성" disabled="disabled" required="required" data-valid-name="카테고리번호"/>
+						</td>
+						<th>카테고리명<i class="required" title="필수"></i></th>
+						<td class="infoTxt">
+							<input type="text" class="w200" name="cateNm" maxlength="50" required="required" data-valid-name="카테고리명"/>
+						</td>
+						<th>카테고리유형<i class="required" title="필수"></i></th>
+						<td>
+							<select name="cateType" id="cateType" data-valid-name="카테고리유형">
+								<option th:if="${cateTypeList}" th:each="oneData, status : ${cateTypeList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+					</tr>
+					<tr>
+						<th>상위카테고리<i class="star"></i></th>
+						<td colspan="5">
+							<input name="selLvl" type="hidden"/>
+							<select name="siteCd" id="cateLvl" data-valid-name="사이트" onchange="fnChangeSelectCateLvl($(this).val(), 1);">
+								<option value="null">[선택]</option>
+								<option th:if="${siteCdList}" th:each="oneData, status : ${siteCdList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+							<select name="cateGb" id="cateLvl1" data-valid-name="카테고리구분" onchange="fnChangeSelectCateLvl($(this).val(), 2);">
+								<option value="">[선택]</option>
+							</select>
+							<select name="tcateCd" id="cateLvl2" data-valid-name="대카테고리" onchange="fnChangeSelectCateLvl($(this).val(), 3);">
+								<option value="">[선택]</option>
+							</select>
+							<select name="mcateCd" id="cateLvl3" data-valid-name="중카테고리" onchange="fnChangeSelectCateLvl($(this).val(), 4);">
+								<option value="">[선택]</option>
+							</select>
+							<select name="scateCd" id="cateLvl4" data-valid-name="소카테고리" onchange="fnChangeSelectCateLvl($(this).val(), 5);">
+								<option value="">[선택]</option>
+							</select>
+						</td>
+					</tr>
+					<tr>
+						<th>노출순서<i class="required" title="필수"></i></th>
+						<td>
+							<input type="text" class="w100" name="dispOrd" maxlength="5" required="required" data-valid-type="integer" data-valid-name="노출순서"/>
+						</td>
+						<th>정상이월구분</th>
+						<td>
+							<select name="formalGb">
+								<option th:if="${formalList}" th:each="oneData, status : ${formalList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th>컨텐츠위치</th>
+						<td>
+							<select name="contentsLoc" disabled="disabled" required="required" data-valid-name="컨텐츠위치">
+								<option value="">[선택]</option>
+								<option th:if="${contentsLocList}" th:each="oneData, status : ${contentsLocList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+					</tr>
+					<tr>
+						<th>노출여부<i class="required" title="필수"></i></th>
+						<td>
+<!-- 							<input type="hidden" name="useYn"/> -->
+<!-- 							<label class="chkBox checked"><input type="checkbox" name="chkUseYn" value="Y" checked="checked"/>사용</label> -->
+							<label class="rdoBtn"><input type="radio" name="dispYn" value="Y" checked="checked">노출</label>
+							<label class="rdoBtn"><input type="radio" name="dispYn" value="N">미노출</label>
+						</td>
+						<th>사용여부<i class="required" title="필수"></i></th>
+						<td colspan="3">
+							<label class="rdoBtn"><input type="radio" name="useYn" value="Y" checked="checked">사용</label>
+							<label class="rdoBtn"><input type="radio" name="useYn" value="N">미사용</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>
+					<button type="button" class="btn btn-base btn-lg" id="btnRef4Srch" th:if="${sessionInfo.roleCd == '0000'}">4SRCH 갱신</button>
+				</li>
+			</ul>
+			<!-- //버튼 배치 영역 -->
+		</div>
+		<!-- 등록/수정 -->
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	let siteList = gagajf.convertToArray([[${siteList}]]);
+	let cateGbList = gagajf.convertToArray([[${cateGbList}]]);
+	let cateTypeList = gagajf.convertToArray([[${cateTypeList}]]);
+
+	let columnDefs = [
+		{
+			headerName: "사이트", field: "siteCd", width: 150, cellClass: 'text-center',
+			valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
+		},
+		{
+			headerName: "카테고리구분", field: "cateGb", width: 150, cellClass: 'text-center',
+			valueFormatter: function (params) { return gagaAgGrid.lookupValue(cateGbList, params.value); }
+		},
+		{headerName: "카테고리번호", field: "cateNo", width: 150, cellClass: 'text-center'},
+		{
+			headerName: "카테고리명", field: "cateNm", width: 150, cellClass: 'text-center',
+			cellRenderer: function(params) {
+				return '<a href="javascript:void(0);">' + params.value + '</a>';
+			}
+		},
+		{
+			headerName: "카테고리유형", field: "cateType", width: 150, cellClass: 'text-center',
+			valueFormatter: function (params) { gagaAgGrid.lookupValue(cateTypeList, params.value); }
+		},
+		{headerName: "말단여부", field: "leafYn", width: 80, cellClass: 'text-center'},
+		{headerName: "노출순서", field: "dispOrd", width: 100, cellClass: 'text-center'},
+		{headerName: "정상이월구분", field: "formalGb", width: 150, cellClass: 'text-center'},
+		{headerName: "컨텐츠위치", field: "contentsLoc", width: 150, cellClass: 'text-center'},
+		{headerName: "노출여부", field: "dispYn", width: 80, cellClass: 'text-center'},
+		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'}
+	];
+	
+	let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
+	
+	// Cell click
+	gridOptions.onCellClicked = function(event) {
+		if (event.colDef.field != 'cateNm')
+			return;
+		
+		$("#btnNew").click();
+		var formId = '#detailForm';
+		$(formId + " input[name=cateNo]").val(event.data.cateNo);
+		$(formId + " input[name=cateNm]").val(event.data.cateNm);
+		$(formId + " select[name=cateType]").val(event.data.cateType);
+		$(formId + " input[name=dispOrd]").val(event.data.dispOrd);
+		$(formId + " select[name=formalGb]").val(event.data.formalGb);
+		$(formId + " select[name=contentsLoc]").val(event.data.contentsLoc);
+		$(formId + " input:radio[name=dispYn]:input[value="+event.data.dispYn+"]").click();
+		$(formId + " input:radio[name=useYn]:input[value="+event.data.useYn+"]").click();
+		var selLvl = $("#selLvl").val();
+		$("#cateLvl").html($("#selCate").html());
+		$("#cateLvl").val($("#selCate").val());
+		for(var i=1; i<5; i++){
+			$("#cateLvl"+i).html($("#selCate"+i).html());
+			$("#cateLvl"+i).val($("#selCate"+i).val());
+			if(i>=selLvl){
+				$("#cateLvl"+i).hide();
+			}else{
+				$("#cateLvl"+i).show();
+			}
+		}
+		$(formId + " input[name=selLvl]").val(selLvl);
+		if(event.data.cateType=="20"){
+			$(formId + " select[name=contentsLoc]").val(event.data.contentsLoc);
+			$(formId + " select[name=contentsLoc]").prop('disabled', false);
+			$(formId + " select[name=contentsLoc]").removeClass('formControl');
+		}
+	}
+
+	var fnChangeSelect = function(val, selLvl){
+		if (val == '') {
+			if (selLvl > 1) {
+				selLvl = selLvl - 1;
+			} else {
+				selLvl = 1;
+			}
+		}
+		$("#selLvl").val(selLvl);
+		
+		// Fetch data
+		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm', fnChangeCategory);
+	}
+	
+	var fnChangeCategory = function(data){
+		var selLvl = $("#selLvl").val();
+		var cd = '';
+		var nm = '';
+		var html = '<option value="">[선택]</option>';
+		for (var i = 1; i < 5; i++) {
+			if (i > selLvl) {
+				$("#selCate"+i).html(html);
+			}
+		}
+		
+		for (var i = 0; i < data.length; i++) {
+			if (data[i].useYn == 'Y') {
+				if (selLvl == '1') {
+					cd = data[i].cateGb;
+					nm = gagaAgGrid.lookupValue(cateGbList, cd);
+				} else {
+					cd = data[i].cateCd;
+					nm = data[i].cateNm;
+				}
+				html += '<option value="'+cd+'">['+cd+'] '+nm+'</option>';
+			}
+		}
+		$("#selCate" + selLvl).html(html);
+		$("#btnNew").click();
+	}
+	
+	var fnChangeSelectCateLvl = function(val, selLvl){
+		if(val==''){
+			if(selLvl>1){
+				selLvl = selLvl - 1;
+			}else{
+				selLvl = '';
+			}
+		}
+		$("#detailForm input[name=selLvl]").val(selLvl);
+		gagajf.ajaxFormSubmit($('#searchForm').prop('action'), "#detailForm", fnChangeCateLvl);
+	}
+	
+	var fnChangeCateLvl = function(data){
+		var selLvl = $("#detailForm input[name=selLvl]").val();
+		var cd = '';
+		var nm = '';
+		var html = '<option value="">[선택]</option>';
+		for(var i=1; i<5; i++){
+			if(i>selLvl){
+				$("#cateLvl"+i).html(html);
+			}
+		}
+		for(var i=0; i<data.length; i++){
+			if(data[i].useYn=='Y'){
+				if(selLvl=='1'){
+					cd = data[i].cateGb;
+					nm = gagaAgGrid.lookupValue(cateGbList, cd);
+				}else{
+					cd = data[i].cateCd;
+					nm = data[i].cateNm;
+				}
+				html += '<option value="'+cd+'">['+cd+'] '+nm+'</option>';
+			}
+		}
+		$("#cateLvl"+selLvl).html(html);
+	}
+	
+	// 카테고리 저장/수정
+	$('#btnSave').on('click', function() {
+		var formId = '#detailForm';
+		var cateCd = $(formId + " input[name=cateCd]").val();
+		var cateNm = $(formId + " input[name=cateNm]").val();
+		
+		var cateType = $(formId + " select[name=cateType]").val();
+		var dispOrd = $(formId + " input[name=dispOrd]").val();
+		var formalGb = $(formId + " select[name=formalGb]").val();
+		var contentsLoc = $(formId + " select[name=contentsLoc]").val();
+		var dispYn = $(formId + " input:radio[name=dispYn]:checked").val();
+		var useYn = $(formId + " input:radio[name=useYn]:checked").val();
+		var siteCd = $(formId + " select[name=siteCd]").val();
+		var cateGb = $(formId + " select[name=cateGb]").val();
+		var tcateCd = $(formId + " select[name=tcateCd]").val();
+		var mcateCd = $(formId + " select[name=mcateCd]").val();
+		var scateCd = $(formId + " select[name=scateCd]").val();
+		var dcateCd = $(formId + " select[name=dcateCd]").val();
+		var selLvl = Number($(formId + " input[name=selLvl]").val());
+		if(cateNm==''){
+			gagajf.alertMessage(formId + " input[name=cateNm]", 'input');
+			return;
+		}
+		if(cateType==''){
+			gagajf.alertMessage(formId + " select[name=cateType]", 'select');
+			return;
+		}
+		if(dispOrd==''){
+			gagajf.alertMessage(formId + " input[name=dispOrd]", 'input');
+			return;
+		}
+		if(siteCd==''){
+			gagajf.alertMessage(formId + " select[name=siteCd]", 'select');
+			return;
+		}
+		var testSelLvl = $("#selLvl").val();
+		if(tcateCd==''){
+			if(testSelLvl>2){
+				gagajf.alertMessage(formId + " select[name=tcateCd]", 'select');
+				return;
+			}
+		}		
+		if(mcateCd==''){
+			if(testSelLvl>3){
+				gagajf.alertMessage(formId + " select[name=mcateCd]", 'select');
+				return;
+			}
+		}
+		if(scateCd==''){
+			if(testSelLvl>4){
+				gagajf.alertMessage(formId + " select[name=scateCd]", 'select');
+				return;
+			}
+		}
+		
+		mcxDialog.confirm('저장하시겠습니까?', {
+			cancelBtnText: "취소",
+			sureBtnText: "확인",
+			sureBtnClick: function(){
+				var data = {
+						formId : formId,
+						cateCd : cateCd,
+						cateNm : cateNm,
+						cateType : cateType,
+						dispOrd : dispOrd,
+						formalGb : formalGb,
+						contentsLoc : contentsLoc,
+						dispYn : dispYn,
+						useYn : useYn,
+						siteCd : siteCd,
+						cateGb : cateGb,
+						tcateCd : tcateCd,
+						mcateCd : mcateCd,
+						scateCd : scateCd,
+						dcateCd : dcateCd,
+						selLvl : selLvl
+				};
+				var jsonData = JSON.stringify(data);
+				gagajf.ajaxJsonSubmit($(formId).prop('action'), jsonData, fnSaveCallback);
+			}
+		});
+	});
+	
+	$("#btnRef4Srch").on("click", function(){
+		var data = [];
+		var jsonData = JSON.stringify(data);
+		gagajf.ajaxJsonSubmit('/display/category/refresh4srch', jsonData, fnSaveCallback);
+	});
+	
+	// 신규 버튼 클릭
+	$("#btnNew").on("click", function(){
+		$("#detailForm")[0].reset();
+		$("#detailForm input[name=selLvl]").val('');
+		for(var i=1; i<5; i++){
+			$("#cateLvl"+i).show();
+		}
+	});
+	
+	$("#cateType").on("change", function(){
+		if($(this).val()=='20'){
+			$("#detailForm select[name=contentsLoc]").prop('disabled', false);
+			$("#detailForm select[name=contentsLoc]").removeClass('formControl');
+		}else{
+			$("#detailForm select[name=contentsLoc]").prop('disabled', true);
+			$("#detailForm select[name=contentsLoc]").addClass('formControl');
+		}
+	});
+	
+	var fnSaveCallback = function() {
+		// Fetch data
+		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm', fnChangeCategory);
+		$("#btnNew").click();
+	}
+	
+	$(document).ready(function() {
+		// Create a agGrid
+		gagaAgGrid.createGrid('gridList', gridOptions);
+		
+		$("#detailForm select[name=contentsLoc]").prop('disabled', false);
+		gagajf.setDate('schStDate', 'schEdDate', 't');
+		fnChangeSelect($("#selCate").val(), 1);
+	});
+/*]]>*/
+</script>
+
+</html>