LookbookListForm.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : LookbookListForm.html
  7. * @desc : 룩북관리 Page
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2021.3.4 bin2107 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div id="main">
  18. <!-- 메인타이틀 영역 -->
  19. <div class="main-title">
  20. </div>
  21. <!-- //메인타이틀 영역 -->
  22. <!-- 메뉴 설명 -->
  23. <div class="infoBox menu-desc">
  24. </div>
  25. <!-- //메뉴 설명 -->
  26. <!-- 검색조건 영역 -->
  27. <form id="searchForm" name="searchForm" action="#" th:action="@{'/display/lookbook/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
  28. <div class="panelStyle">
  29. <table class="frmStyle">
  30. <colgroup>
  31. <col style="width:10%;"/>
  32. <col style="width:15%;"/>
  33. <col style="width:10%;"/>
  34. <col style="width:15%;"/>
  35. <col style="width:10%;"/>
  36. <col style="width:40%;"/>
  37. </colgroup>
  38. <tr>
  39. <th>사이트</th>
  40. <td>
  41. <select name="siteCd">
  42. <option th:if="${siteCdList}" th:each="oneData, status : ${siteCdList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  43. </select>
  44. </td>
  45. <th>브랜드</th>
  46. <td>
  47. <input type="text" class="w100" name="brandCd" value="" />
  48. <button type="button" class="btn btnRight btn-success btn-lg" onclick="fnSearchLbBrandGroup();">브랜드조회</button>
  49. </td>
  50. <!--<td>
  51. <select name="brandCd">
  52. <option value="">[선택]</option>
  53. <option th:if="${brandGroupList}" th:each="oneData, status : ${brandGroupList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  54. </select>
  55. </td>-->
  56. <th>전시기간</th>
  57. <td colspan="5" id="sellTerms">
  58. <span class="nowrap">
  59. <input name="dispStdt" id="schStDate" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출기간 시작일" />
  60. <select id="schStTimeHour" required="required" data-valid-name="노출기간 시작시간">
  61. <th:block th:each="num, index : ${#numbers.sequence(0,23)}">
  62. <option th:value="${#numbers.formatInteger(num,2)}" th:text="|${#numbers.formatInteger(num,2)}시|" >시간</option>
  63. </th:block>
  64. </select>
  65. <select id="schStTimeMin" required="required" data-valid-name="노출기간 시작시간">
  66. <th:block th:each="num: ${#numbers.sequence(0,59)}">
  67. <option th:value="${#numbers.formatInteger(num,2)}" th:text="|${#numbers.formatInteger(num,2)}분|" >분</option>
  68. </th:block>
  69. </select>
  70. <input name="dispStTime" id="schStTime" type="hidden" data-valid-name="노출기간 시작시간" value='000000' />
  71. ~
  72. <input name="dispEddt" id="schEdDate" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출기간 종료일" />
  73. <select id="schEdTimeHour" required="required" data-valid-name="노출기간 종료시간">
  74. <th:block th:each="num: ${#numbers.sequence(0,23)}">
  75. <option th:value="${#numbers.formatInteger(num,2)}" th:text="|${#numbers.formatInteger(num,2)}시|" th:selected="${#numbers.formatInteger(num,2)}==23 ? 'true'">시간</option>
  76. </th:block>
  77. </select>
  78. <select id="schEdTimeMin" required="required" data-valid-name="노출기간 종료시간">
  79. <th:block th:each="num: ${#numbers.sequence(0,59)}">
  80. <option th:value="${#numbers.formatInteger(num,2)}" th:text="|${#numbers.formatInteger(num,2)}분|" th:selected="${#numbers.formatInteger(num,2)}==59 ? 'true'">분</option>
  81. </th:block>
  82. </select>
  83. <input name="dispEdTime" id="schEdTime" type="hidden" data-valid-name="노출기간 종료시간" value='235959' />
  84. </span>
  85. </td>
  86. </tr>
  87. </table>
  88. <ul class="panelBar">
  89. <li class="center">
  90. <button type="button" class="btn btn-default btn-lg" id="btnInit">초기화</button>
  91. <button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
  92. </li>
  93. </ul>
  94. </div>
  95. <!-- 검색조건 영역 -->
  96. <!-- 리스트 영역 -->
  97. <div class="panelStyle">
  98. <!-- 상단영역 START -->
  99. <ul class="panelBar">
  100. <li class="left">
  101. <span class="btnLeft">
  102. <button type="button" class="btn btn-danger btn-lg" id="btnDel">노출안함</button>
  103. </span>
  104. </li>
  105. <li class="right">
  106. <span class="btnRight">
  107. <button type="button" class="btn btn-success btn-lg" id="btnReg">등록</button>
  108. </span>
  109. 검색결과 : <strong><span id="gridRowTotalCount">0</span> 건</strong>&nbsp;
  110. 쪽번호 <span id="pgNo">0</span>/ <strong id="endPgNo">0</strong>&nbsp;&nbsp;
  111. <select id="pageSize" name="pageSize">
  112. <option value="50" selected="selected">50개씩 보기</option>
  113. <option value="100">100개씩 보기</option>
  114. <option value="500">500개씩 보기</option>
  115. <option value="1000">1000개씩 보기</option>
  116. </select>
  117. <input type="hidden" name="pageNo" id="pageNo" value ="1"/>
  118. </li>
  119. </ul>
  120. <!-- 상단영역 END -->
  121. <div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
  122. <ul class="panelBar">
  123. <li class="center">
  124. <div class="tablePaging" id="lookbookListPagination"></div>
  125. </li>
  126. </ul>
  127. </div>
  128. <!-- //리스트 영역 -->
  129. </form>
  130. </div>
  131. <script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js?v=2019072202"></script>
  132. <script th:inline="javascript">
  133. /*<![CDATA[*/
  134. var brandGroupList = [[${brandGroupList}]];
  135. let columnDefs = [
  136. {width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
  137. {headerName: "룩북일련번호", field: "lookbookSq", width: 100, cellClass: 'text-center'
  138. ,cellRenderer: function(params) {
  139. return '<a href="javascript:void(0);">' + params.value + '</a>';
  140. }
  141. },
  142. {headerName: "타이틀", field: "title", width: 200, cellClass: 'text-center'},
  143. {headerName: "브랜드", field: "brandCd", width: 80, cellClass: 'text-center'},
  144. {headerName: "메인룩북", field: "mainDispYn", width: 80, cellClass: 'text-center'},
  145. {headerName: "노출여부", field: "dispYn", width: 80, cellClass: 'text-center'},
  146. {headerName: "노출시작일", field: "dispStdt", width: 150, cellClass: 'text-center'},
  147. {headerName: "노출종료일", field: "dispEddt", width: 150, cellClass: 'text-center'},
  148. {headerName: "등록자", field: "regNm", width: 80, cellClass: 'text-center'},
  149. {headerName: "등록일자", field: "regDt", width: 150, cellClass: 'text-center'},
  150. {headerName: "수정자", field: "updNm", width: 80, cellClass: 'text-center'},
  151. {headerName: "수정일자", field: "updDt", width: 150, cellClass: 'text-center'}
  152. ];
  153. let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
  154. gridOptions.rowSelection = "multiple";
  155. // 셀 클릭 이벤트
  156. gridOptions.onCellClicked = function(event) {
  157. if (event.colDef.field == 'lookbookSq') {
  158. // 룩북 상세
  159. cfnOpenLookbookBannerPopup('U',event.data.lookbookSq);
  160. }
  161. }
  162. // 등록 팝업
  163. $("#btnReg").on('click', function(){
  164. cfnOpenLookbookBannerPopup('N');
  165. });
  166. // 초기화 버튼
  167. $("#btnInit").on('click', function (){
  168. $("#searchForm")[0].reset();
  169. gagajf.setDate('schStDate', 'schEdDate', 't');
  170. });
  171. // 조회
  172. $("#btnSearch").on('click', function(){
  173. $("#searchForm input[name=dispStTime]").val($('#searchForm #schStTimeHour').val()+$('#searchForm #schStTimeMin').val()+'00');
  174. $("#searchForm input[name=dispEdTime]").val($('#searchForm #schEdTimeHour').val()+$('#searchForm #schEdTimeMin').val()+'59');
  175. fnSearch();
  176. });
  177. var fnSearch = function(){
  178. gagaPaging.init('searchForm', fnSearchCallBack, 'lookbookListPagination', $('#searchForm').find('#pageSize').val());
  179. gagaPaging.load(1);
  180. };
  181. var fnSearchCallBack = function(result){
  182. $('#searchForm').find('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
  183. $('#searchForm').find('#pageNo').val(result.pageing.pageable.pageNo.addComma());
  184. $('#searchForm').find('#pgNo').html(result.pageing.pageable.pageNo.addComma());
  185. $('#searchForm').find('#endPgNo').html(result.pageing.pageable.totalPage.addComma());
  186. gridOptions.api.setRowData(result.lookbookList);
  187. gagaPaging.createPagination(result.pageing.pageable);
  188. }
  189. // 노출안함
  190. $("#btnDel").on('click', function (){
  191. var selectRowData = gagaAgGrid.selectedRowData(gridOptions);
  192. if (selectRowData.length > 0) {
  193. mcxDialog.confirm('변경하시겠습니까?', {
  194. cancelBtnText: "취소",
  195. sureBtnText: "확인",
  196. sureBtnClick: function(){
  197. var selectDataArr = [];
  198. $.each(selectRowData, function(idx, item) {
  199. selectDataArr.push(item.lookbookSq);
  200. });
  201. var data = {
  202. selectDataArr : selectDataArr
  203. };
  204. var jsonData = JSON.stringify(data);
  205. gagajf.ajaxJsonSubmit('/display/lookbook/delete', jsonData, fnSaveCollback);
  206. }
  207. });
  208. }else{
  209. mcxDialog.alert('선택된 행이 없습니다.');
  210. return;
  211. }
  212. });
  213. var fnSaveCollback = function (){
  214. $("#btnInit").click();
  215. $('#btnSearch').trigger('click');
  216. }
  217. var fnSearchLbBrandGroup = function (){
  218. cfnOpenBrandGroupListPopup("fnCallBackLbBrandGroup", "S", "S");
  219. }
  220. var fnCallBackLbBrandGroup = function (result){
  221. $("#searchForm").find("input[name=brandCd]").val(result[0].brandGroupNo);
  222. }
  223. $(document).ready(function() {
  224. // Create a agGrid
  225. gagaAgGrid.createGrid('gridList', gridOptions);
  226. });
  227. /*]]>*/
  228. </script>
  229. </html>