FreeGoodsPromotionForm.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : FreeGoodsPromotionForm.html
  7. * @desc : 사은품 프로모션 관리 페이지
  8. *============================================================================
  9. * SISUN
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2020.12.16 xodud1202 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div id="main">
  18. <!-- 메인타이틀 영역 -->
  19. <div class="main-title"></div>
  20. <!-- //메인타이틀 영역 -->
  21. <!-- 메뉴 설명 -->
  22. <div class="infoBox menu-desc"></div>
  23. <form id="searchForm" name="searchForm" action="#" th:action="@{'/marketing/freegoods/promotion/list'}">
  24. <input type="hidden" id="searchGb" name="searchGb" />
  25. <input type="hidden" id="imageViewYn" name="imageViewYn" />
  26. <input type="hidden" id="goodsPriceYn" name="goodsPriceYn" value="Y"/> <!-- 즉시할인판매가 조회 -->
  27. <!-- 패널 영역1 -->
  28. <div class="panelStyle" >
  29. <!-- 검색조건 영역 -->
  30. <!-- TITLE -->
  31. <div class="panelTitle">
  32. <h3><i class="fa fa-info-circle"></i>아래 검색조건 중 <font color="red">업체, 키워드, 발생일</font>중 하나를 꼭 입력해 주세요.</h3>
  33. <span class="panelControl">
  34. <i class="fa fa-chevron-up"></i>
  35. </span>
  36. </div>
  37. <!-- //TITLE -->
  38. <div class="panelContent">
  39. <table class="frmStyle">
  40. <colgroup>
  41. <col style="width: 7%;"/>
  42. <col/>
  43. </colgroup>
  44. <tr>
  45. <th>기간<em class="required" title="필수"></em></th>
  46. <td id="sellTerms"></td>
  47. </tr>
  48. <tr>
  49. <th>프로모션 조회</th>
  50. <td>
  51. <label class="rdoBtn"><input type="radio" name="promotionGubun" id="promotionId" value="freegiftSq" checked/>프로모션ID</label>
  52. <label class="rdoBtn"><input type="radio" name="promotionGubun" id="promotionName" value="freegiftNm"/>프로모션명</label>
  53. <input type="text" class="w900" name="searchTxt" id="searchTxt" maxlength="30" />
  54. </td>
  55. </tr>
  56. </table>
  57. <ul class="panelBar">
  58. <li class="center">
  59. <button type="button" class="btn btn-gray btn-lg" id="btnInit" >초기화</button>
  60. <button type="button" class="btn btn-info btn-lg" id="btnSearch" >조회</button>
  61. </li>
  62. </ul>
  63. </div>
  64. <!-- //검색조건 영역 -->
  65. </div>
  66. <!-- 패널 영역1 -->
  67. <div class="panelStyle">
  68. <!-- 상단버튼 영역 -->
  69. <ul class="panelBar">
  70. <li class="right">
  71. 검색결과 : <strong><span id="gridRowTotalCount">0</span> 건</strong>&nbsp;
  72. 쪽번호 <span id="pgNo">0</span>/ <strong id="endPgNo">0</strong>&nbsp;&nbsp;
  73. <select id="pageSize" name="pageSize">
  74. <option value="50" selected="selected">50개씩 보기</option>
  75. <option value="100">100개씩 보기</option>
  76. <option value="500">500개씩 보기</option>
  77. <option value="1000">1000개씩 보기</option>
  78. </select>
  79. <input type="hidden" name="pageNo" id="pageNo" value ="1"/>
  80. <button type="button" class="btn btn-info btn-lg" id="btnFreeGoodsRegi" >프로모션등록</button>
  81. </li>
  82. </ul>
  83. <!-- 검색결과 영역 -->
  84. <div class="panelContent" style="overflow: hidden;">
  85. <div id="gridList" style="width: 100%; height: 700px;" class="ag-theme-balham"></div>
  86. </div>
  87. <ul class="panelBar">
  88. <li class="center">
  89. <div class="tablePaging" id="freegiftPromotionListPagination"></div>
  90. </li>
  91. </ul>
  92. </div>
  93. </form>
  94. <script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js"></script>
  95. <script th:inline="javascript">
  96. /*<![CDATA[*/
  97. //let freegiftStatList = gagajf.convertToArray([[${freegiftStatList}]]); // 프로모션 상태 리스트
  98. let columnDefs = [
  99. {headerName: "프로모션ID", field: "freegiftSq", width: 80, cellClass: 'text-center'},
  100. {headerName: "프로모션명", field: "freegiftNm", width: 350, cellClass: 'text-center'
  101. ,cellRenderer: function(params) {
  102. return '<a href="javascript:void(0);">' + params.value + '</a>';
  103. }
  104. },
  105. {headerName: "상태", field: "freegiftStatNm", width: 140, cellClass: 'text-center'},
  106. {headerName: "시작일", field: "freegiftStdt", width: 140, cellClass: 'text-center'},
  107. {headerName: "종료일", field: "freegiftEddt", width: 140, cellClass: 'text-center'},
  108. {headerName: "등록자", field: "regNm", width: 200, cellClass: 'text-left'
  109. ,cellRenderer: function(params) {
  110. return params.value + "(" + params.data.regDt + ")";
  111. }
  112. },
  113. {headerName: "최종수정자", field: "updNm", width: 200, cellClass: 'text-left'
  114. ,cellRenderer: function(params) {
  115. return params.value + "(" + params.data.updDt + ")";
  116. }
  117. }
  118. ];
  119. // Get GridOptions
  120. var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
  121. // Row Click
  122. gridOptions.onCellClicked = function(event) {
  123. var freegiftSq = event.data.freegiftSq;
  124. if (event.colDef.field == "freegiftNm"){
  125. cfnOpenFreeGoodsPromotionSetPopup('U', freegiftSq);
  126. }
  127. }
  128. // 어떤건지 확인 필요
  129. /* gridOptions.getRowStyle = function(params) {
  130. if ("G008_00" == params.data.goodsStat || "G008_10" == params.data.goodsStat || "G008_20" == params.data.goodsStat || "G008_30" == params.data.goodsStat) {
  131. return { background: '#23c6c8' };
  132. }
  133. } */
  134. // 초기화 클릭시
  135. $('#searchForm #btnInit').on('click', function() {
  136. $('#searchForm')[0].reset();
  137. //$("#searchForm input[type=radio]").removeClass("checked");
  138. $("#searchForm input[type=checkbox]").removeClass("checked");
  139. //$("#searchForm input[type=radio]").parent("label").removeClass("checked");
  140. $("#searchForm input[type=checkbox]").parent("label").removeClass("checked");
  141. $("#searchForm input[type=radio][checked]").parent("label").addClass("checked");
  142. });
  143. // 조회클릭시
  144. $('#searchForm #btnSearch').on('click', function() {
  145. $("#searchForm input[name=pageNo]").val('1');
  146. fnFreeGoodsPromotionListSearch();
  147. });
  148. // 조회
  149. var fnFreeGoodsPromotionListSearch = function() {
  150. if(!fnConditionCheck()) return;
  151. gagaPaging.init('searchForm', fnSearchCallBack, 'freegiftPromotionListPagination', $('#searchForm').find('#pageSize').val());
  152. gagaPaging.load($("#searchForm input[name=pageNo]").val());
  153. }
  154. //검색 조건 확인
  155. var fnConditionCheck = function(){
  156. var fromDate = $('#searchForm input[name=stDate]').val();
  157. var toDate = $('#searchForm input[name=edDate]').val();
  158. if (!gagajf.isNull(fromDate) || !gagajf.isNull(toDate)) {
  159. if (gagajf.isNull(fromDate) || gagajf.isNull(toDate)) {
  160. mcxDialog.alertC("기간 조회시 시작일자와 종료일자를 입력하세요.", {
  161. sureBtnText: "확인",
  162. sureBtnClick: function() {
  163. $('#searchForm input[name=stDate]').focus();
  164. }
  165. });
  166. return false;
  167. }
  168. if (fromDate > toDate) {
  169. mcxDialog.alertC("등록 시작일자는 종료일자 보다 클 수 없습니다.", {
  170. sureBtnText: "확인",
  171. sureBtnClick: function() {
  172. $('#searchForm input[name=stDate]').focus();
  173. }
  174. });
  175. return false;
  176. }
  177. // 검색 기간 1년 이내로 지정
  178. var sdt = new Date(fromDate);
  179. var edt = new Date(toDate);
  180. var dateDiff = Math.ceil((edt.getTime()-sdt.getTime())/(1000*3600*24));
  181. if(dateDiff > 365) {
  182. mcxDialog.alertC("최대 1년까지 선택하실 수 있습니다.", {
  183. sureBtnText: "확인",
  184. sureBtnClick: function() {
  185. $('#searchForm input[name=stDate]').focus();
  186. }
  187. });
  188. return false;
  189. }
  190. } else {
  191. /* 기간 입력 확인 > 테스트 중에만 제거
  192. mcxDialog.alertC("검색 기간을 입력해주세요.", {
  193. sureBtnText: "확인",
  194. sureBtnClick: function() {
  195. $('#searchForm input[name=stDate]').focus();
  196. }
  197. });
  198. return false;*/
  199. }
  200. return true;
  201. }
  202. var fnSearchCallBack = function(result){
  203. $('#searchForm').find('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
  204. $('#searchForm').find('#pageNo').val(result.pageing.pageable.pageNo.addComma());
  205. $('#searchForm').find('#pgNo').html(result.pageing.pageable.pageNo.addComma());
  206. $('#searchForm').find('#endPgNo').html(result.pageing.pageable.totalPage.addComma());
  207. gridOptions.api.setRowData(result.freeGoodsList);
  208. gagaPaging.createPagination(result.pageing.pageable);
  209. }
  210. // 프로모션 등록 클릭시
  211. $('#searchForm #btnFreeGoodsRegi').on('click', function() {
  212. cfnOpenFreeGoodsPromotionSetPopup('C');
  213. });
  214. //페이징
  215. $('#searchForm select[name=pageSize]').on('change', function() {
  216. $("#searchForm input[name=pageNo]").val('1');
  217. fnFreeGoodsPromotionListSearch();
  218. });
  219. $(document).ready(function() {
  220. // 기간 검색 조건
  221. cfnCreateCalendar('#sellTerms', 'stDate', 'edDate', true, '기간', 'X');
  222. // 기간 검색 default 조건 (최근1주일)
  223. let date = new Date();
  224. $("#searchForm #edDate").val(date.format("YYYY-MM-DD")); // 오늘 날짜
  225. date.setDate(date.getDate() - 6); //월~일, 금~목으로 6을 뺌
  226. $("#searchForm #stDate").val(date.format("YYYY-MM-DD")); // 1주일 전 날짜
  227. // Create a agGrid
  228. gagaAgGrid.createGrid('gridList', gridOptions);
  229. });
  230. /*]]>*/
  231. </script>
  232. </div>
  233. </html>