OneToOneQnaForm.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : OneToOneQnaForm.html
  7. * @desc : 1:1문의관리 Page
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2020.12.24 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div id="main">
  18. <form id="searchForm" name="searchForm" action="#" th:action="@{'/customer/onetoone/qna/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
  19. <!-- 메인타이틀 영역 -->
  20. <div class="main-title">
  21. </div>
  22. <!-- //메인타이틀 영역 -->
  23. <!-- 메뉴 설명 -->
  24. <div class="infoBox menu-desc">
  25. </div>
  26. <!-- //메뉴 설명 -->
  27. <!-- 검색조건 영역 -->
  28. <div class="panelStyle">
  29. <table class="frmStyle" aria-describedby="검색조건">
  30. <colgroup>
  31. <col style="width:10%;"/>
  32. <col style="width:12%;"/>
  33. <col style="width:10%;"/>
  34. <col style="width:15%;"/>
  35. <col style="width:10%;"/>
  36. <col style="width:10%;"/>
  37. <col style="width:10%;"/>
  38. <col/>
  39. </colgroup>
  40. <tr>
  41. <th>사이트</th>
  42. <td>
  43. <select name="siteCd">
  44. <option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  45. </select>
  46. </td>
  47. <th>상담분류</th>
  48. <td>
  49. <select name="counselClsf">
  50. <option value="">[선택]</option>
  51. <option th:if="${counselClsfList}" th:each="oneData, status : ${counselClsfList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  52. </select>
  53. </td>
  54. <th>답변상태</th>
  55. <td>
  56. <select name="ansStat">
  57. <option value="">[전체]</option>
  58. <option th:if="${ansStatList}" th:each="oneData, status : ${ansStatList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  59. </select>
  60. </td>
  61. <th>회원검색</th>
  62. <td>
  63. <select name="custGb">
  64. <option value="">[선택]</option>
  65. <option value="custId">회원ID</option>
  66. <option value="custNm">회원명</option>
  67. <option value="email">이메일</option>
  68. </select>
  69. <input type="text" name="condition" class="w200" maxlength="100"/>
  70. </td>
  71. </tr>
  72. <!-- <tr> -->
  73. <!-- <th>답변자</th> -->
  74. <!-- <td><input type="text" name="ansId" placeholder="" class="w300" maxlength="20"/></td> -->
  75. <!-- <th>의뢰자</th> -->
  76. <!-- <td colspan="3"><input type="text" name="ansTransId" class="w300" placeholder="" maxlength="20"/></td> -->
  77. <!-- </tr> -->
  78. <tr>
  79. <th>문의기간<i class="required" title="필수"></i></th>
  80. <td colspan="7" id="terms"></td>
  81. </tr>
  82. </table>
  83. <ul class="panelBar">
  84. <li class="center">
  85. <button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
  86. <button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();">초기화</button>
  87. </li>
  88. </ul>
  89. </div>
  90. <!-- //검색조건 영역 -->
  91. <!-- 리스트 영역 -->
  92. <div class="panelStyle">
  93. <ul class="panelBar">
  94. <li class="right">
  95. 검색결과 : <strong>
  96. <span id="gridRowTotalCount">0</span> 건</strong>&nbsp; 쪽번호 <span id="pgNo">0</span>/
  97. <strong id="endPgNo">0</strong>&nbsp;&nbsp; <select id="pageSize"
  98. name="pageSize">
  99. <option value="50" selected="selected">50개씩 보기</option>
  100. <option value="100">100개씩 보기</option>
  101. <option value="500">500개씩 보기</option>
  102. <option value="1000">1000개씩 보기</option>
  103. </select> <input type="hidden" name="pageNo" id="pageNo" value="1" />
  104. </li>
  105. </ul>
  106. <div id="gridList" style="width: 100%; height: 570px" class="ag-theme-balham"></div>
  107. <ul class="panelBar">
  108. <li class="center">
  109. <div class="tablePaging" id="onePagination"></div>
  110. </li>
  111. </ul>
  112. </div>
  113. <!-- //리스트 영역 -->
  114. </form>
  115. </div>
  116. <script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js"></script>
  117. <script th:inline="javascript">
  118. /*<![CDATA[*/
  119. let siteList = gagajf.convertToArray([[${siteList}]]); // 사이트
  120. let ansStatList = gagajf.convertToArray([[${ansStatList}]]); // 답변상태
  121. // specify the columns
  122. let columnDefs = [
  123. {
  124. headerName: "상담일련번호", field: "counselSq", width: 100, cellClass: 'text-center',
  125. cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
  126. },
  127. {
  128. headerName: "사이트", field: "siteCd", width: 100, cellClass: 'text-center',
  129. valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
  130. },
  131. {
  132. headerName: "상담분류", field: "counselClsfNm", width: 150, cellClass: 'text-center'
  133. // valueFormatter: function (params) { return params.value + (gagajf.isNull(params.data.counselDclsfNm) ? "" : "-" + params.data.counselDclsfNm); }
  134. },
  135. {
  136. headerName: "문의일시", field: "questDt", width: 150, cellClass: 'text-center',
  137. cellRenderer: function (params) { return gagaAgGrid.toDateTimeFormat(params.value); }
  138. },
  139. {headerName: "문의 제목", field: "questTitle", width: 300},
  140. {headerName: "고객번호", field: "custNo", width: 100, cellClass: 'text-center', hide: true},
  141. {headerName: "고객ID", field: "maskingCustId", width: 100, cellClass: 'text-center', hide: true},
  142. {
  143. headerName: "고객명", field: "maskingCustNm", width: 150, cellClass: 'text-center',
  144. cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '(' + params.data.maskingCustId + ')</a>'; }
  145. },
  146. {headerName: "휴대전화번호", field: "maskingCellPhnno", width: 120, cellClass: 'text-center'},
  147. {
  148. headerName: "SMS답변요청", field: "smsReqYn", width: 120, cellClass: 'text-center',
  149. cellRenderer: function(params) { return params.value == 'Y' ? 'Yes' : 'No'; }
  150. },
  151. {
  152. headerName: "SMS답변발송", field: "smsSendYn", width: 120, cellClass: 'text-center',
  153. cellRenderer: function(params) { return params.value == 'Y' ? 'Yes' : 'No'; }
  154. },
  155. {headerName: "이메일", field: "maskingEmail", width: 200},
  156. // {
  157. // headerName: "이메일답변요청", field: "emailReqYn", width: 120, cellClass: 'text-center',
  158. // cellRenderer: function(params) { return params.value == 'Y' ? 'Yes' : 'No'; }
  159. // },
  160. // {
  161. // headerName: "이메일답변발송", field: "emailSendYn", width: 120, cellClass: 'text-center',
  162. // cellRenderer: function(params) { return params.value == 'Y' ? 'Yes' : 'No'; }
  163. // },
  164. {
  165. headerName: "답변상태", field: "ansStat", width: 100, cellClass: 'text-center',
  166. cellRenderer: function (params) { return gagaAgGrid.lookupValue(ansStatList, params.value); }
  167. },
  168. {headerName: "답변자번호", field: "ansNo", width: 100, cellClass: 'text-center', hide: true},
  169. {headerName: "답변자명", field: "ansNm", width: 100, cellClass: 'text-center'},
  170. {
  171. headerName: "답변일시", field: "ansDt", width: 150, cellClass: 'text-center',
  172. cellRenderer: function (params) { return gagaAgGrid.toDateTimeFormat(params.value); }
  173. }
  174. ];
  175. // Get GridOptions
  176. let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
  177. // 셀 클릭 이벤트
  178. gridOptions.onCellClicked = function(event) {
  179. if (event.colDef.field == 'counselSq') {
  180. // 1:1문의 상세
  181. cfnOpenOneToOneQnaDetailPopup(event.data.counselSq);
  182. } else if (event.colDef.field == 'maskingCustNm') {
  183. // 고객 상세
  184. cfnOpenCustDetailPopup(event.data.custNo);
  185. }
  186. }
  187. $('#pageSize').on('click', function () {
  188. $('#btnSearch').trigger('click');
  189. });
  190. // 조회
  191. $('#btnSearch').on('click', function() {
  192. // 입력 값 체크
  193. if (!gagajf.validation('#searchForm'))
  194. return false;
  195. gagaPaging.init('searchForm', fnSearchCallBack, 'onePagination', $('#pageSize').val());
  196. gagaPaging.load($("#searchForm input[name=pageNo]").val());
  197. });
  198. var fnSearchCallBack = function(result){
  199. $('#searchForm').find('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
  200. $('#searchForm').find('#pageNo').val(result.pageing.pageable.pageNo.addComma());
  201. $('#searchForm').find('#pgNo').html(result.pageing.pageable.pageNo.addComma());
  202. $('#searchForm').find('#endPgNo').html(result.pageing.pageable.totalPage.addComma());
  203. gridOptions.api.setRowData(result.counselList);
  204. gagaPaging.createPagination(result.pageing.pageable);
  205. }
  206. $(document).ready(function() {
  207. // 공통 달력 생성
  208. cfnCreateCalendar('#terms', 'termStdt', 'termEddt', true);
  209. $('.btnToday').trigger('click');
  210. // Create a agGrid
  211. gagaAgGrid.createGrid('gridList', gridOptions);
  212. });
  213. /*]]>*/
  214. </script>
  215. </html>