CouponRetrievePopupForm.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : CouponRetrievePopupForm.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.01.08 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div class="modalPopup" data-width="1200" id="popupCoupon">
  18. <div class="panelStyle">
  19. <!-- TITLE -->
  20. <div class="panelTitle">
  21. <strong>쿠폰 조회</strong>
  22. <button type="button" class="close" onclick="uifnPopupClose('popupCoupon');"><em class="fa fa-times"></em></button>
  23. </div>
  24. <!-- //TITLE -->
  25. <!-- CONTENT -->
  26. <div class="panelContent">
  27. <form id="searchCouponForm" name="searchCouponForm" action="#" th:action="@{'/marketing/coupon/retrieve/list'}" th:method="post">
  28. <table class="frmStyle" aria-describedby="검색조건">
  29. <colgroup>
  30. <col style="width:10%;"/>
  31. <col style="width:40%;"/>
  32. <col style="width:10%;"/>
  33. <col style="width:40%;"/>
  34. </colgroup>
  35. <tbody>
  36. <tr>
  37. <th>사이트<em class="required" title="필수"></em></th>
  38. <td>
  39. <select name="siteCd" required="required">
  40. <option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  41. </select>
  42. </td>
  43. <th>쿠폰유형</th>
  44. <td>
  45. <select name="cpnType">
  46. <option value="">[전체]</option>
  47. <option th:if="${cpnTypeList}" th:each="oneData, status : ${cpnTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  48. </select>
  49. </td>
  50. </tr>
  51. <tr>
  52. <th>쿠폰ID</th>
  53. <td>
  54. <input type="text" name="cpnId" maxlength="20"/>
  55. </td>
  56. <th>쿠폰명</th>
  57. <td>
  58. <input type="text" name="cpnNm" maxlength="50" th:value="${cpnNm}"/>
  59. </td>
  60. </tr>
  61. </tbody>
  62. </table>
  63. <ul class="panelBar">
  64. <li class="center">
  65. <button type="button" class="btn btn-base btn-lg" id="btnSearchCouponRetrieve">조회</button>
  66. </li>
  67. </ul>
  68. </form>
  69. </div>
  70. <!-- //CONTENT -->
  71. <!-- 리스트 영역 -->
  72. <div class="panelContent">
  73. <div id="gridCouponList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
  74. </div>
  75. <!-- //리스트 영역 -->
  76. <!-- 버튼 배치 영역 -->
  77. <ul class="panelBar">
  78. <li class="right">
  79. <button type="button" class="btn btn-info btn-lg" id="btnConfirmCoupon">확인</button>
  80. </li>
  81. </ul>
  82. <!-- //버튼 배치 영역 -->
  83. </div>
  84. </div>
  85. <script th:inline="javascript">
  86. /*<![CDATA[*/
  87. let returnCode = [[${returnCode}]];
  88. let returnName = [[${returnName}]];
  89. let siteList = gagajf.convertToArray([[${siteList}]]);
  90. let usableCustGbList = gagajf.convertToArray([[${usableCustGbList}]]);
  91. let cpnTypeList = gagajf.convertToArray([[${cpnTypeList}]]);
  92. let dcWayList = gagajf.convertToArray([[${dcWayList}]]);
  93. let columnDefsCouponList = [
  94. // {width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
  95. {
  96. headerName: "사이트", field: "siteCd", width: 80, cellClass: "text-center", pinned: 'left',
  97. valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
  98. },
  99. {headerName: "쿠폰ID", field: "cpnId", width: 90, cellClass: 'text-center', pinned: 'left'},
  100. {headerName: "쿠폰명", field: "cpnNm", width: 150, pinned: 'left'},
  101. {
  102. headerName: "사용가능고객", field: "usableCustGb", width: 120, cellClass: "text-center",
  103. valueFormatter: function (params) { return gagaAgGrid.lookupValue(usableCustGbList, params.value); }
  104. },
  105. {
  106. headerName: "쿠폰유형", field: "cpnType", width: 100, cellClass: "text-center",
  107. valueFormatter: function (params) { return gagaAgGrid.lookupValue(cpnTypeList, params.value); }
  108. },
  109. {
  110. headerName: "할인방식", field: "dcWay", width: 100, cellClass: "text-center",
  111. valueFormatter: function (params) { return gagaAgGrid.lookupValue(dcWayList, params.value); }
  112. },
  113. {
  114. headerName: "할인값(PC)", field: "dcPval", width: 100, cellClass: "text-center",
  115. cellRenderer: function(params) { return (!gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : '') + (params.data.dcWay == '10' ? '원' : '%'); }
  116. },
  117. {
  118. headerName: "할인값(모바일)", field: "dcMval", width: 100, cellClass: "text-center",
  119. cellRenderer: function(params) { return (!gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : '') + (params.data.dcWay == '10' ? '원' : '%'); }
  120. },
  121. {
  122. headerName: "최고할인값", field: "maxDcAmt", width: 100, cellClass: "text-center",
  123. cellRenderer: function(params) { return (!gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : '') + (params.data.dcWay == '10' ? '원' : '%'); }
  124. },
  125. // {
  126. // headerName: "기간/일수", field: "pdGb", width: 100, cellClass: "text-center", hide: true,
  127. // cellRenderer: function(params) { return (params.value == 'P' ? '기간' : '일수'); }
  128. // },
  129. // {
  130. // headerName: "유효시작일시", field: "availStdt", width: 150, cellClass: "text-center", hide: true,
  131. // cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toDateTimeFormat(params.value) : ''; }
  132. // },
  133. // {
  134. // headerName: "유효종료일시", field: "availEddt", width: 150, cellClass: "text-center", hide: true,
  135. // cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toDateTimeFormat(params.value) : ''; }
  136. // },
  137. // {headerName: "유효일수", field: "availDays", width: 100, cellClass: "text-center", hide: true},
  138. {
  139. headerName: "유효기간", field: "availPeriod", width: 300, cellClass: "text-center",
  140. cellRenderer: function(params) { return params.data.pdGb == 'P' ? gagaAgGrid.toDateTimeFormat(params.data.availStdt) + '~' + gagaAgGrid.toDateTimeFormat(params.data.availStdt) : gagaAgGrid.toAddComma(params.data.availDays) + '일'; }
  141. },
  142. {headerName: "발행제한여부", field: "pubLimitYn", width: 100, cellClass: "text-center"},
  143. {
  144. headerName: "고객당발행제한수량", field: "custPubLimitQty", width: 100, cellClass: "text-center",
  145. cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
  146. },
  147. {
  148. headerName: "총발행제한수량", field: "totPubLimitQty", width: 100, cellClass: "text-center",
  149. cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
  150. },
  151. {
  152. headerName: "1회발행수량", field: "onePubQty", width: 100, cellClass: "text-center",
  153. cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
  154. },
  155. {headerName: "다운로드구분", field: "dnGb", width: 100, cellClass: "text-center"},
  156. {
  157. headerName: "구매제한금액", field: "buyLimitAmt", width: 100, cellClass: "text-right",
  158. cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
  159. }
  160. ];
  161. let gridOptionsCouponList = gagaAgGrid.getGridOptions(columnDefsCouponList);
  162. gridOptionsCouponList.rowSelection = 'single';
  163. gridOptionsCouponList.rowMultiSelectWithClick = true; // 클릭으로 선택 가능
  164. // Row double click
  165. gridOptionsCouponList.onRowDoubleClicked = function(event) {
  166. $('#btnConfirmCoupon').trigger('click');
  167. }
  168. // 조회
  169. $('#btnSearchCouponRetrieve').on('click', function() {
  170. // Fetch data
  171. gagaAgGrid.fetch($('#searchCouponForm').prop('action'), gridOptionsCouponList, '#searchCouponForm');
  172. });
  173. // 부모창에 값을 설정
  174. let fnSetCouponValueToOpener = function(rowData) {
  175. $(returnCode).val(rowData.cpnId);
  176. $(returnName).val(rowData.cpnNm);
  177. uifnPopupClose('popupCoupon');
  178. }
  179. // 확인
  180. $('#btnConfirmCoupon').on('click', function() {
  181. var selectedData = gagaAgGrid.selectedRowData(gridOptionsCouponList);
  182. console.log('selectedData.length: ' + selectedData.length);
  183. if (selectedData.length == 0) {
  184. mcxDialog.alert('선택된 쿠폰이 없습니다.');
  185. return false;
  186. }
  187. fnSetCouponValueToOpener(selectedData[0]);
  188. });
  189. $(document).ready(function() {
  190. // Create a agGrid
  191. gagaAgGrid.createGrid('gridCouponList', gridOptionsCouponList);
  192. $('#btnSearchCouponRetrieve').trigger('click');
  193. });
  194. /*]]>*/
  195. </script>
  196. </html>