FaqDetailForm.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : FaqDetailForm.html
  7. * @desc : FAQ 상세 팝업 Page
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2020.10.29 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div class="modalPopup" data-width="1200" id="popupFaq">
  18. <div class="panelStyle">
  19. <!-- TITLE -->
  20. <div class="panelTitle">
  21. <strong th:text="${'FAQ ' + (mode == 'N' ? '등록' : '상세')}">FAQ 상세</strong>
  22. <button type="button" class="close" onclick="uifnPopupClose('popupFaq');"><em class="fa fa-times"></em></button>
  23. </div>
  24. <!-- //TITLE -->
  25. <!-- CONTENT -->
  26. <div class="panelContent" th:if="${mode == 'N'}">
  27. <form id="faqDetailForm" name="faqDetailForm" action="#" th:action="@{'/board/faq/save'}" th:method="post">
  28. <input type="hidden" name="mode" th:value="${mode}"/>
  29. <table class="frmStyle" aria-describedby="등록폼">
  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:15%;"/>
  37. <col style="width:10%;"/>
  38. <col/>
  39. </colgroup>
  40. <tbody>
  41. <tr>
  42. <th>FAQ번호</th>
  43. <td>
  44. <input type="text" name="faqSq" maxlength="20" placeholder="자동생성" readonly="readonly"/>
  45. </td>
  46. <th>사이트<em class="required" title="필수"></em></th>
  47. <td>
  48. <select name="siteCd" required="required">
  49. <option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  50. </select>
  51. </td>
  52. <th>FAQ유형<em class="required" title="필수"></em></th>
  53. <td>
  54. <select name="faqType" required="required">
  55. <option th:if="${faqTypeList}" th:each="oneData, status : ${faqTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  56. </select>
  57. </td>
  58. <th>사용여부<em class="required" title="필수"></em></th>
  59. <td>
  60. <label class="rdoBtn"><input type="radio" name="useYn" value="Y" checked="checked"/>Yes</label>
  61. <label class="rdoBtn"><input type="radio" name="useYn" value="N"/>No</label>
  62. </td>
  63. </tr>
  64. <tr>
  65. <th>질문<em class="required" title="필수"></em></th>
  66. <td colspan="7">
  67. <input type="text" name="question" maxlength="200" required="required" data-valid-name="질문"/>
  68. </td>
  69. </tr>
  70. <tr>
  71. <th>답변<em class="required" title="필수"></em></th>
  72. <td colspan="7">
  73. <textarea class="textareaR4" id="answer" name="answer" data-valid-name="답변"></textarea>
  74. </td>
  75. </tr>
  76. </tbody>
  77. </table>
  78. </form>
  79. </div>
  80. <div class="panelContent" th:if="${mode == 'U'}">
  81. <form id="faqDetailForm" name="faqDetailForm" action="#" th:action="@{'/board/faq/save'}" th:method="post" th:object="${faqInfo}">
  82. <input type="hidden" name="mode" th:value="${mode}"/>
  83. <table class="frmStyle" aria-describedby="상세폼">
  84. <colgroup>
  85. <col style="width:10%;"/>
  86. <col style="width:15%;"/>
  87. <col style="width:10%;"/>
  88. <col style="width:15%;"/>
  89. <col style="width:10%;"/>
  90. <col style="width:15%;"/>
  91. <col style="width:10%;"/>
  92. <col/>
  93. </colgroup>
  94. <tbody>
  95. <tr>
  96. <th>FAQ번호</th>
  97. <td>
  98. <input type="text" name="faqSq" maxlength="20" placeholder="자동생성" readonly="readonly" th:field="*{faqSq}"/>
  99. </td>
  100. <th>사이트<em class="required" title="필수"></em></th>
  101. <td>
  102. <select name="siteCd" required="required" th:field="*{siteCd}">
  103. <option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|" th:selected="${siteCd == oneData.cd}"></option>
  104. </select>
  105. </td>
  106. <th>FAQ유형<em class="required" title="필수"></em></th>
  107. <td>
  108. <select name="faqType" required="required" th:field="*{faqType}">
  109. <option th:if="${faqTypeList}" th:each="oneData, status : ${faqTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|" th:selected="${faqType == oneData.cd}"></option>
  110. </select>
  111. </td>
  112. <th>사용여부<em class="required" title="필수"></em></th>
  113. <td>
  114. <label class="rdoBtn"><input type="radio" name="useYn" value="Y" th:field="*{useYn}"/>Yes</label>
  115. <label class="rdoBtn"><input type="radio" name="useYn" value="N" th:field="*{useYn}"/>No</label>
  116. </td>
  117. </tr>
  118. <tr>
  119. <th>질문<em class="required" title="필수"></em></th>
  120. <td colspan="5">
  121. <input type="text" name="question" placeholder="" maxlength="200" required="required" data-valid-name="질문" th:field="*{question}"/>
  122. </td>
  123. <th>조회수</th>
  124. <td><input type="text" name="readCnt" class="w50 aR" readonly="readonly" th:field="*{readCnt}"/></td>
  125. </tr>
  126. <tr>
  127. <th>답변<em class="required" title="필수"></em></th>
  128. <td colspan="7">
  129. <textarea class="textareaR4" id="answer" name="answer" data-valid-name="답변" th:field="*{answer}"></textarea>
  130. </td>
  131. </tr>
  132. </tbody>
  133. </table>
  134. </form>
  135. </div>
  136. <!-- //CONTENT -->
  137. <!-- 버튼 배치 영역 -->
  138. <ul class="panelBar">
  139. <li class="right">
  140. <button type="button" class="btn btn-info btn-lg" id="btnSaveFaq">저장</button>
  141. </li>
  142. </ul>
  143. <!-- //버튼 배치 영역 -->
  144. </div>
  145. </div>
  146. <script type="text/javascript" src="/ux/plugins/summernote/summernote.js?v=2020102902"></script>
  147. <script type="text/javascript" src="/ux/plugins/gaga/gaga.summernote.js?v=20201030"></script>
  148. <script th:inline="javascript">
  149. /*<![CDATA[*/
  150. // 저장
  151. $('#btnSaveFaq').on('click', function() {
  152. // 입력 값 체크
  153. if (!gagajf.validation('#faqDetailForm'))
  154. return false;
  155. if (gagajf.isNull($('#answer').val())) {
  156. mcxDialog.alert('답변을 입력해 주세요.');
  157. return false;
  158. }
  159. mcxDialog.confirm("저장하시겠습니까?", {
  160. cancelBtnText: "취소",
  161. sureBtnText: "확인",
  162. sureBtnClick: function() {
  163. gagajf.ajaxFormSubmit($('#faqDetailForm').prop('action'), '#faqDetailForm', function() {
  164. uifnPopupClose('popupFaq');
  165. $('#btnSearch').trigger('click');
  166. });
  167. }
  168. });
  169. });
  170. $(document).ready(function() {
  171. // Create a summernote
  172. let snOptions = gagaSn.getToolbarOptions();
  173. gagaSn.createSummernote(snOptions, '#answer');
  174. });
  175. /*]]>*/
  176. </script>
  177. </html>