PlanPopupForm.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org">
  3. <!--
  4. *******************************************************************************
  5. * @source : PlanListPopupForm.html
  6. * @desc : 기획전 조회 팝업 화면 Page
  7. *============================================================================
  8. * SISUN
  9. * Copyright(C) 2020 TSIT, All rights reserved.
  10. *============================================================================
  11. * VER DATE AUTHOR DESCRIPTION
  12. * === =========== ========== =============================================
  13. * 1.0 2021.02.15 sowon 최초 작성
  14. *******************************************************************************
  15. -->
  16. <div class="modalPopup" data-width="1200" id="popupPlan">
  17. <div class="panelStyle" style="height: 750px;">
  18. <div class="panelTitle">
  19. <strong>기획전 조회</strong>
  20. <button type="button" class="close"
  21. onclick="uifnPopupClose('popupPlan')">
  22. <i class="fa fa-times"></i>
  23. </button>
  24. </div>
  25. <div class="panelContent">
  26. <form id="popupPlanSearchForm" name="popupPlanSearchForm" action="#"
  27. th:action="@{'/marketing/planning/list/detail/popup'}"
  28. onsubmit="$('#btnPlanPopupSearch').trigger('click'); return false;">
  29. <table class="frmStyle">
  30. <colgroup>
  31. <col style="width: 5%;" />
  32. <col style="width: 20%;" />
  33. <col style="width: 5%;" />
  34. <col style="width: 20%;" />
  35. <col style="width: 5%;" />
  36. <col style="width: 10%;" />
  37. <col style="width: 5%;" />
  38. <col style="width: 10%;" />
  39. <col />
  40. </colgroup>
  41. <tbody>
  42. <tr>
  43. <th>사이트</th>
  44. <td><select name="siteCd">
  45. <th:block th:if="${siteList}"
  46. th:each="oneData, status : ${siteList}">
  47. <option th:value="${oneData.cd}"
  48. th:text="${oneData.cdNm}"></option>
  49. </th:block>
  50. </select></td>
  51. <th>기획전명</th>
  52. <td><input type="text" name="planNm" id="planNm" /></td>
  53. <th>기획전번호</th>
  54. <td colspan="3"><input type="text" name="planSq" id="planSq" />
  55. </td>
  56. </tr>
  57. <tr>
  58. <th>웹/모바일구분</th>
  59. <td><select name="frontGb">
  60. <option value="">ALL</option>
  61. <option value="P">웹</option>
  62. <option value="M">모바일</option>
  63. <option value="A">앱</option>
  64. </select></td>
  65. <th>기획전구분</th>
  66. <td><select name="planGb">
  67. <option value="">전체</option>
  68. <option value="P">기획전</option>
  69. <option value="E">이벤트</option>
  70. <option value="C">출석체크</option>
  71. <option value="S">총알배송</option>
  72. </select></td>
  73. <th>오픈여부</th>
  74. <td><select name="openYn">
  75. <option value="">전체</option>
  76. <option th:if="${useYnList}"
  77. th:each="oneData, status : ${useYnList}"
  78. th:value="${oneData.cd}"
  79. th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  80. </select></td>
  81. <!-- <th>기획전템플릿유형</th>
  82. <td colspan="3"><select name="templateType">
  83. <option value="">전체</option>
  84. <option value="H">HTML</option>
  85. <option value="T">TEXT</option>
  86. </select></td> -->
  87. </tr>
  88. <tr>
  89. <th>진행기간</th>
  90. <td colspan="5" id="popupPlanTerms"></td>
  91. <!--
  92. <th>등록자</th>
  93. <td><input type="text" name="regId" id="regId" />
  94. </td> -->
  95. </tr>
  96. </tbody>
  97. </table>
  98. <ul class="panelBar">
  99. <li class="center">
  100. <input type="button" value="초기화" class="btn btn-gray btn-lg" id="btnInitPop"/>
  101. <input type="button" value="조회" class="btn btn-base btn-lg" id="btnPlanPopupSearch" />
  102. </li>
  103. </ul>
  104. </form>
  105. </div>
  106. <!-- 리스트 영역 -->
  107. <div class="panelContent">
  108. <div id="gridListPop" style="width: 100%; height: 400px;" class="ag-theme-balham"></div>
  109. </div>
  110. <!-- //리스트 영역 -->
  111. <!-- 버튼 배치 영역 -->
  112. <ul class="panelBar">
  113. <li class="right">
  114. <button type="button" class="btn btn-info btn-lg"
  115. id="btnPlanPopupApply">적용</button>
  116. </li>
  117. </ul>
  118. </div>
  119. </div>
  120. <script th:inline="javascript">
  121. /*<![CDATA[*/
  122. var siteCdList = gagajf.convertToArray([[${siteList}]]);
  123. var wmGbList = {"A":"ALL", "P":"웹", "M":"모바일"};
  124. var templateTypeList = {"H":"HTML", "T":"TEXT"};
  125. var planGbList = {"P":"기획전", "E":"이벤트"};
  126. var planList = ([[${planList}]]);
  127. // 초기화 클릭시
  128. $('#btnInitPop').on('click', function() {
  129. fnInit();
  130. });
  131. var fnInit = function(){
  132. $('#popupPlanSearchForm')[0].reset();
  133. }
  134. var columnDefs = [
  135. {width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
  136. {headerName: "미리보기" , field:'plan' , width:100, cellClass: 'text-center',
  137. cellRenderer: function(params) { return '<a href="javascript:void(0);" onclick="fnPreview(\'' + params.data.planSq + '\');">' + '미리보기' + '</a>'; }
  138. },
  139. {headerName: "기획전구분" , field:'planGb' , width:100, cellClass: 'text-center',
  140. cellEditor: 'agRichSelectCellEditor',
  141. cellEditorParams: { values: gagaAgGrid.extractValues(planGbList) },
  142. valueFormatter: function (params) { return gagaAgGrid.lookupValue(planGbList, params.value); },
  143. valueParser: function (params) { return gagaAgGrid.lookupKey(planGbList, params.newValue); }
  144. },
  145. {headerName: "사이트" , field:'siteCd' , width:100, cellClass: 'text-center',
  146. cellEditor: 'agRichSelectCellEditor',
  147. cellEditorParams: { values: gagaAgGrid.extractValues(siteCdList) },
  148. valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteCdList, params.value); },
  149. valueParser: function (params) { return gagaAgGrid.lookupKey(siteCdList, params.newValue); }
  150. },
  151. {headerName: "프론트구분" , field:'frontGb' , width:120, cellClass: 'text-center',
  152. cellEditor: 'agRichSelectCellEditor',
  153. cellEditorParams: { values: gagaAgGrid.extractValues(wmGbList) },
  154. valueFormatter: function (params) { return gagaAgGrid.lookupValue(wmGbList, params.value); },
  155. valueParser: function (params) { return gagaAgGrid.lookupKey(wmGbList, params.newValue); }
  156. },
  157. {headerName: "오픈여부" , field:'openYn' , width:80 , cellClass: 'text-center'},
  158. {headerName: "기획전번호" , field:'planSq' , width:100, cellClass: 'text-center',
  159. cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
  160. },
  161. {headerName: "기획전명" , field:'planNm' , width:300, cellClass: 'text-left',
  162. cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
  163. },
  164. {headerName: "서브제목" , field:'dtlTitle1' , width:300 , cellClass: 'text-center'},
  165. {headerName: "기획전템플릿유형" , field:'templateType' , width:100, cellClass: 'text-center',
  166. cellEditor: 'agRichSelectCellEditor',
  167. cellEditorParams: { values: gagaAgGrid.extractValues(templateTypeList) },
  168. valueFormatter: function (params) { return gagaAgGrid.lookupValue(templateTypeList, params.value); },
  169. valueParser: function (params) { return gagaAgGrid.lookupKey(templateTypeList, params.newValue); }
  170. },
  171. {headerName: "pc이미지" , field:'mainPimg' , width:100, cellClass: 'text-right' , hide: true},
  172. {headerName: "mobile이미지" , field:'mainMimg' , width:100, cellClass: 'text-right' , hide: true},
  173. {headerName: "전시순서" , field:'dispOrd' , width:100, cellClass: 'text-right' },
  174. {headerName: "진행시작일시" , field:'dispStdt' , width:150, cellClass: 'text-center'},
  175. {headerName: "진행종료일시" , field:'dispEddt' , width:150, cellClass: 'text-center'},
  176. {headerName: "등록자" , field:'regNm' , width:100, cellClass: 'text-center'},
  177. {headerName: "등록일" , field:'regDt' , width:150, cellClass: 'text-center'}
  178. ];
  179. var gridOptionsPopupPlan = gagaAgGrid.getGridOptions(columnDefs);
  180. gridOptionsPopupPlan.rowSelection = 'single';
  181. // 셀 클릭 이벤트
  182. gridOptionsPopupPlan.onCellClicked = function(event) {
  183. var field = event.colDef.field;
  184. if (field != 'planSq' && field != 'planNm')
  185. return;
  186. }
  187. // 미리보기
  188. var fnPreview = function(planSq) {
  189. var _wmall = [[${@environment.getProperty('domain.pastel')}]];
  190. window.open(_wmall + '/planning/detail/form?planSq=' + planSq + '&adminPreview=Y', '_blank');
  191. //document.location.href = _PAGE_CUSTOMER_INFO;
  192. }
  193. // 조회 버튼 클릭 시
  194. $('#btnPlanPopupSearch').on('click', function() {
  195. var formId = '#popupPlanSearchForm';
  196. gagaAgGrid.fetch($(formId).prop('action'), gridOptionsPopupPlan, formId);
  197. });
  198. // 적용 버튼 클릭 시
  199. $('#btnPlanPopupApply').on('click', function() {
  200. var selectedData = gagaAgGrid.selectedRowData(gridOptionsPopupPlan);
  201. if (selectedData.length < 1) {
  202. mcxDialog.alert('선택 된 기획전이 없습니다.');
  203. return
  204. }
  205. var callback = [[${params.callBackFun}]];
  206. var jsonData = JSON.stringify(selectedData);
  207. if ( typeof callback != 'undefined' && callback) {
  208. if (typeof callback == 'function') {
  209. callback(jsonData);
  210. } else {
  211. if (callback) {
  212. if ( callback.indexOf("(") == -1 ) eval( callback +"(" + jsonData+")");
  213. else eval( callback(jsonData) );
  214. }
  215. }
  216. uifnPopupClose('popupPlan');
  217. }
  218. });
  219. $(document).ready(function() {
  220. gagaAgGrid.createGrid('gridListPop', gridOptionsPopupPlan);
  221. cfnCreateCalendar('#popupPlanTerms', 'popupDispStdt', 'popupDispEddt', false);
  222. gagajf.setDate('popupDispStdt', 'popupDispEddt', '7d');
  223. });
  224. // 기획전 리스트 팝업============================================================================
  225. /* var fnPlanSearch = function(sub){
  226. if (sub == "View"){
  227. cfnOpenPlanPopup('fnSetPlanSqView');
  228. }else{
  229. cfnOpenPlanPopup('fnSetPlanSq');
  230. }
  231. }
  232. // 팝업 등록 기획전
  233. var fnSetPlanSq = function(result) {
  234. $('#planListSearchForm input[name=planSq]').val(result[0].planSq);
  235. }
  236. //미리보기 기획전
  237. var fnSetPlanSqView = function(result) {
  238. $('#planSqView').val(result[0].planSq);
  239. }
  240. */
  241. //=========================================================================================
  242. /*]]>*/
  243. </script>
  244. </html>