|
|
@@ -1,6 +1,6 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="ko"
|
|
|
- xmlns:th="http://www.thymeleaf.org">
|
|
|
+ xmlns:th="http://www.thymeleaf.org">
|
|
|
<!--
|
|
|
*******************************************************************************
|
|
|
* @source : CategoryGoodsForm.html
|
|
|
@@ -11,71 +11,338 @@
|
|
|
*============================================================================
|
|
|
* VER DATE AUTHOR DESCRIPTION
|
|
|
* === =========== ========== =============================================
|
|
|
- * 1.0 2021.01.19 bin2107 최초 작성
|
|
|
+ * 1.0 2021.1.19 bin2107 최초 작성
|
|
|
*******************************************************************************
|
|
|
-->
|
|
|
- <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/>
|
|
|
- </colgroup>
|
|
|
- <tr>
|
|
|
- <th>카테고리</th>
|
|
|
- <td>
|
|
|
- <input type="hidden" name="selLvl"/>
|
|
|
- <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>
|
|
|
- <select name="cateGb" id="selCate1" onchange="fnChangeSearchCondition($(this).val(), 1);">
|
|
|
- <option value="">[카테고리구분]</option>
|
|
|
- <option th:if="${cateGbList}" th:each="oneData, status : ${cateGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
|
|
|
- </select>
|
|
|
- <select name="cate1No" id="selCate2" onchange="fnChangeSearchCondition($(this).val(), 2);">
|
|
|
- <option value="">[카테고리1]</option>
|
|
|
- </select>
|
|
|
- <select name="cate2No" id="selCate3" onchange="fnChangeSearchCondition($(this).val(), 3);">
|
|
|
- <option value="">[카테고리2]</option>
|
|
|
- </select>
|
|
|
- <select name="cate3No" id="selCate4" onchange="fnChangeSearchCondition($(this).val(), 4);">
|
|
|
- <option value="">[카테고리3]</option>
|
|
|
- </select>
|
|
|
- <select name="cate4No" id="selCate5" onchange="fnChangeSearchCondition($(this).val(), 5);">
|
|
|
- <option value="">[카테고리4]</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 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/>
|
|
|
+ </colgroup>
|
|
|
+ <tr>
|
|
|
+ <th>카테고리</th>
|
|
|
+ <td>
|
|
|
+ <input type="hidden" name="selLvl"/>
|
|
|
+ <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>
|
|
|
+ <select name="cateGb" id="selCate1" onchange="fnChangeSearchCondition($(this).val(), 1);">
|
|
|
+ <option value="">[카테고리구분]</option>
|
|
|
+ <option th:if="${cateGbList}" th:each="oneData, status : ${cateGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
|
|
|
+ </select>
|
|
|
+ <select name="cate1No" id="selCate2" onchange="fnChangeSearchCondition($(this).val(), 2);">
|
|
|
+ <option value="">[카테고리1]</option>
|
|
|
+ </select>
|
|
|
+ <select name="cate2No" id="selCate3" onchange="fnChangeSearchCondition($(this).val(), 3);">
|
|
|
+ <option value="">[카테고리2]</option>
|
|
|
+ </select>
|
|
|
+ <select name="cate3No" id="selCate4" onchange="fnChangeSearchCondition($(this).val(), 4);">
|
|
|
+ <option value="">[카테고리3]</option>
|
|
|
+ </select>
|
|
|
+ <select name="cate4No" id="selCate5" onchange="fnChangeSearchCondition($(this).val(), 5);">
|
|
|
+ <option value="">[카테고리4]</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'}">
|
|
|
+
|
|
|
+ </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="btnRefresh4Srch" th:if="${sessionInfo.roleCd == 'G001_0000'}">4SRCH 갱신</button>-->
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- //버튼 배치 영역 -->
|
|
|
+ </div>
|
|
|
+ <!-- 등록/수정 -->
|
|
|
+</div>
|
|
|
|
|
|
<script th:inline="javascript">
|
|
|
-/*<![CDATA[*/
|
|
|
+ /*<![CDATA[*/
|
|
|
+ let siteList = gagajf.convertToArray([[${siteList}]]);
|
|
|
+ let cateGbList = gagajf.convertToArray([[${cateGbList}]]);
|
|
|
+ let cateTypeList = gagajf.convertToArray([[${cateTypeList}]]);
|
|
|
+ let formalGbList = gagajf.convertToArray([[${formalGbList}]]);
|
|
|
+ let conentsLocList = gagajf.convertToArray([[${conentsLocList}]]);
|
|
|
+
|
|
|
+ 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',
|
|
|
+ cellRenderer: 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',
|
|
|
+ cellRenderer: function (params) { return 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',
|
|
|
+ cellRenderer: function (params) { return gagaAgGrid.lookupValue(formalGbList, params.value); }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: "컨텐츠위치", field: "contentsLoc", width: 200, cellClass: 'text-center',
|
|
|
+ cellRenderer: function (params) { return gagaAgGrid.lookupValue(conentsLocList, params.value); }
|
|
|
+ },
|
|
|
+ {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();
|
|
|
+ $('#detailForm input[name=siteCd]').val(event.data.siteCd);
|
|
|
+ $('#detailForm input[name=cateNo]').val(event.data.cateNo);
|
|
|
+ $('#detailForm input[name=cateNm]').val(event.data.cateNm);
|
|
|
+ $('#detailForm select[name=cateType]').val(event.data.cateType);
|
|
|
+
|
|
|
+ // 상위카테고리
|
|
|
+ var selLvl = $("#searchForm input[name=selLvl]").val();
|
|
|
+ for (let 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();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $('#detailForm input[name=selLvl]').val(selLvl);
|
|
|
+
|
|
|
+ $('#detailForm input[name=dispOrd]').val(event.data.dispOrd);
|
|
|
+ $('#detailForm select[name=formalGb]').val(event.data.formalGb);
|
|
|
+ $('#detailForm select[name=contentsLoc]').val(event.data.contentsLoc);
|
|
|
+
|
|
|
+ // 카테고리유형에 따른 컨텐츠위치 설정 변경
|
|
|
+ if (event.data.cateType == 'G031_10') {
|
|
|
+ $('#detailForm select[name=contentsLoc]').prop('disabled', true);
|
|
|
+ } else if (event.data.cateType == 'G031_20') {
|
|
|
+ $('#detailForm select[name=contentsLoc]').prop('disabled', false);
|
|
|
+ }
|
|
|
+
|
|
|
+ $('#detailForm input:radio[name=dispYn]:input[value=' + event.data.dispYn + ']').click();
|
|
|
+ $('#detailForm input:radio[name=useYn]:input[value=' + event.data.useYn + ']').click();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 검색폼의 카테고리 선택 시
|
|
|
+ */
|
|
|
+ var fnChangeSearchCondition = function(val, selLvl) {
|
|
|
+ if (gagajf.isNull(val)) {
|
|
|
+ if (selLvl > 1) {
|
|
|
+ selLvl = selLvl - 1;
|
|
|
+ } else {
|
|
|
+ selLvl = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $('#searchForm input[name=selLvl]').val(selLvl);
|
|
|
+
|
|
|
+ // Fetch data
|
|
|
+ gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm', function(data) {
|
|
|
+ let selLvl = Number($('#searchForm input[name=selLvl]').val()) + 1;
|
|
|
+
|
|
|
+ for (let i = 2; i <= 5; i++) {
|
|
|
+ if (i >= selLvl) {
|
|
|
+ $('#selCate' + i).html('<option value="">[카테고리' + (i - 1) + ']</option>');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let tag = '';
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].useYn == 'Y') {
|
|
|
+ tag += '<option value="' + data[i].cateNo + '">[' + data[i].cateNo + '] ' + data[i].cateNm + '</option>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ $("#selCate" + selLvl).append(tag);
|
|
|
+ //$("#btnNew").click();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 카테고리유형 변경 시
|
|
|
+ $('#detailForm select[name=cateType]').on('change', function() {
|
|
|
+ if ($(this).val() == 'G031_10') { // 상품분류카테고리
|
|
|
+ $("#detailForm select[name=contentsLoc]").prop('disabled', true);
|
|
|
+ } else if ($(this).val() == 'G031_20') { // 컨텐츠카테고리
|
|
|
+ $("#detailForm select[name=contentsLoc]").prop('disabled', false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 등록/수정폼의 상위카테고리 선택 시
|
|
|
+ var fnChangeUpperCategory = function(val, selLvl) {
|
|
|
+ if (gagajf.isNull(val)) {
|
|
|
+ if (selLvl > 1) {
|
|
|
+ selLvl = selLvl - 1;
|
|
|
+ } else {
|
|
|
+ selLvl = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $('#detailForm input[name=selLvl]').val(selLvl);
|
|
|
+
|
|
|
+ gagajf.ajaxFormSubmit($('#searchForm').prop('action'), "#detailForm", function(data) {
|
|
|
+ let selLvl = Number($('#detailForm input[name=selLvl]').val()) + 1;
|
|
|
+
|
|
|
+ for (let i = 2; i <= 5; i++) {
|
|
|
+ if (i >= selLvl) {
|
|
|
+ $('#cateLvl' + i).html('<option value="">[카테고리' + (i - 1) + ']</option>');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let tag = '';
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].useYn == 'Y') {
|
|
|
+ tag += '<option value="' + data[i].cateNo + '">[' + data[i].cateNo + '] ' + data[i].cateNm + '</option>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ $("#cateLvl" + selLvl).append(tag);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 신규
|
|
|
+ $('#btnNew').on('click', function(){
|
|
|
+ $("#detailForm")[0].reset();
|
|
|
+// $("#detailForm input[name=selLvl]").val('');
|
|
|
+ for (let i = 2; i <= 5; i++) {
|
|
|
+ $("#cateLvl" + i).show();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 저장
|
|
|
+ $('#btnSave').on('click', function() {
|
|
|
+ // 입력 값 체크
|
|
|
+ if (!gagajf.validation('#detailForm'))
|
|
|
+ return false;
|
|
|
+
|
|
|
+ let selLvl = Number($('#detailForm input[name=selLvl]').val());
|
|
|
+ if (gagajf.isNull($('#detailForm select[name=cate1No]').val())) {
|
|
|
+ if (selLvl > 2) {
|
|
|
+ mcxDialog.alertC('카테고리1을 선택해 주세요.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $('#detailForm select[name=cate1No]').focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gagajf.isNull($('#detailForm select[name=cate2No]').val())) {
|
|
|
+ if (selLvl > 3) {
|
|
|
+ mcxDialog.alertC('카테고리2를 선택해 주세요.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $('#detailForm select[name=cate2No]').focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gagajf.isNull($('#detailForm select[name=cate3No]').val())) {
|
|
|
+ if (selLvl > 4) {
|
|
|
+ mcxDialog.alertC('카테고리3을 선택해 주세요.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $('#detailForm select[name=cate3No]').focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gagajf.isNull($('#detailForm select[name=cate4No]').val())) {
|
|
|
+ if (selLvl > 5) {
|
|
|
+ mcxDialog.alertC('카테고리4를 선택해 주세요.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $('#detailForm select[name=cate4No]').focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ mcxDialog.confirm('저장하시겠습니까?', {
|
|
|
+ cancelBtnText: "취소",
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $("#detailForm select[name=contentsLoc]").prop('disabled', false);
|
|
|
+
|
|
|
+ var jsonData = JSON.stringify($('#detailForm').serializeObject());
|
|
|
+ gagajf.ajaxFormSubmit($('#detailForm').prop('action'), '#detailForm', function() {
|
|
|
+ $('#btnNew').trigger('click');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 카테고리 갱신
|
|
|
+ $("#btnRefresh4Srch").on("click", function() {
|
|
|
+ mcxDialog.confirm('갱신하시겠습니까?', {
|
|
|
+ cancelBtnText: "취소",
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ gagajf.ajaxJsonSubmit('/display/category/refresh', null);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ // Create a agGrid
|
|
|
+ gagaAgGrid.createGrid('gridList', gridOptions);
|
|
|
|
|
|
-/*]]>*/
|
|
|
+ $("#detailForm select[name=contentsLoc]").prop('disabled', false);
|
|
|
+ });
|
|
|
+ /*]]>*/
|
|
|
</script>
|
|
|
|
|
|
</html>
|
eskim