ClauseDetailForm.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : ClauseDetailForm.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 2020.10.29 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div class="modalPopup" data-width="900" id="popupClause">
  18. <div class="panelStyle">
  19. <!-- TITLE -->
  20. <div class="panelTitle">
  21. <strong th:text="${'약관 ' + (mode == 'N' ? '등록' : '상세')}">약관 상세</strong>
  22. <button type="button" class="close" onclick="uifnPopupClose('popupClause');"><em class="fa fa-times"></em></button>
  23. </div>
  24. <!-- //TITLE -->
  25. <!-- CONTENT -->
  26. <div class="panelContent" th:if="${mode == 'N'}">
  27. <form id="clauseDetailForm" name="clauseDetailForm" action="#" th:action="@{'/envset/clause/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:15%;"/>
  32. <col style="width:25%;"/>
  33. <col style="width:15%;"/>
  34. <col style="width:45%;"/>
  35. </colgroup>
  36. <tbody>
  37. <tr>
  38. <th>약관번호</th>
  39. <td>
  40. <input type="text" name="clauseSq" maxlength="20" placeholder="자동생성" readonly="readonly"/>
  41. </td>
  42. <th>사이트<em class="required" title="필수"></em></th>
  43. <td>
  44. <select name="siteCd" required="required">
  45. <option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  46. </select>
  47. </td>
  48. </tr>
  49. <tr>
  50. <th>약관유형<em class="required" title="필수"></em></th>
  51. <td>
  52. <select name="clauseType" required="required">
  53. <option th:if="${clauseTypeList}" th:each="oneData, status : ${clauseTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
  54. </select>
  55. </td>
  56. <th>시행일자<em class="required" title="필수"></em></th>
  57. <td>
  58. <input type="text" class="schDate w80" name="effectDt" maxlength="10" required="required" data-valid-type="calendar" data-valid-name="시행일자"/>
  59. </td>
  60. </tr>
  61. <tr>
  62. <th>노출여부</th>
  63. <td colspan="3">
  64. <input type="hidden" name="dispYn" value="Y"/>
  65. <label class="chkBox"><input type="checkbox" name="chkDispYn" value="Y" checked="checked"/>노출</label>
  66. <span class="cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i> 노출여부를 체크할 경우, 현재 약관으로 노출됩니다.</span>
  67. </td>
  68. </tr>
  69. <tr>
  70. <th>약관 제목<em class="required" title="필수"></em></th>
  71. <td colspan="3">
  72. <input type="text" name="clauseTitle" placeholder="" maxlength="100" data-valid-name="약관 제목"/>
  73. </td>
  74. </tr>
  75. <tr>
  76. <th>약관 내용<em class="required" title="필수"></em></th>
  77. <td colspan="3">
  78. <textarea class="textareaR4" id="clauseContent" name="clauseContent" data-valid-name="약관 내용"></textarea>
  79. </td>
  80. </tr>
  81. </tbody>
  82. </table>
  83. </form>
  84. </div>
  85. <div class="panelContent" th:if="${mode == 'U'}">
  86. <form id="clauseDetailForm" name="clauseDetailForm" action="#" th:action="@{'/envset/clause/save'}" th:method="post" th:object="${clauseInfo}">
  87. <input type="hidden" name="mode" th:value="${mode}"/>
  88. <table class="frmStyle" aria-describedby="상세폼">
  89. <colgroup>
  90. <col style="width:15%;"/>
  91. <col style="width:25%;"/>
  92. <col style="width:15%;"/>
  93. <col style="width:45%;"/>
  94. </colgroup>
  95. <tbody>
  96. <tr>
  97. <th>약관번호</th>
  98. <td>
  99. <input type="text" name="clauseSq" maxlength="20" placeholder="자동생성" readonly="readonly" th:field="*{clauseSq}"/>
  100. </td>
  101. <th>사이트<em class="required" title="필수"></em></th>
  102. <td>
  103. <select name="siteCd" required="required" th:field="*{siteCd}">
  104. <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>
  105. </select>
  106. </td>
  107. </tr>
  108. <tr>
  109. <th>약관유형<em class="required" title="필수"></em></th>
  110. <td>
  111. <select name="clauseType" required="required" th:field="*{clauseType}">
  112. <option th:if="${clauseTypeList}" th:each="oneData, status : ${clauseTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|" th:selected="${clauseType == oneData.cd}"></option>
  113. </select>
  114. </td>
  115. <th>시행일자<em class="required" title="필수"></em></th>
  116. <td>
  117. <input type="text" class="schDate w80" name="effectDt" maxlength="10" required="required" data-valid-type="calendar" data-valid-name="시행일자" th:field="*{effectDt}"/>
  118. </td>
  119. </tr>
  120. <tr>
  121. <th>노출여부</th>
  122. <td colspan="3">
  123. <input type="hidden" name="dispYn" value="Y" th:value="${clauseInfo.dispYn}"/>
  124. <label class="chkBox"><input type="checkbox" name="chkDispYn" value="Y" th:checked="${clauseInfo.dispYn == 'Y'}"/>노출</label>
  125. <span class="cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i> 노출여부를 체크할 경우, 현재 약관으로 노출됩니다.</span>
  126. </td>
  127. </tr>
  128. <tr>
  129. <th>약관 제목<em class="required" title="필수"></em></th>
  130. <td colspan="3">
  131. <input type="text" name="clauseTitle" placeholder="" maxlength="100" data-valid-name="약관 제목" th:field="*{clauseTitle}"/>
  132. </td>
  133. </tr>
  134. <tr>
  135. <th>약관 내용<em class="required" title="필수"></em></th>
  136. <td colspan="3">
  137. <textarea class="textareaR4" id="clauseContent" name="clauseContent" data-valid-name="약관 내용" th:field="*{clauseContent}"></textarea>
  138. </td>
  139. </tr>
  140. </tbody>
  141. </table>
  142. </form>
  143. </div>
  144. <!-- //CONTENT -->
  145. <!-- 버튼 배치 영역 -->
  146. <ul class="panelBar">
  147. <li class="right">
  148. <button type="button" class="btn btn-info btn-lg" id="btnSaveClause">저장</button>
  149. </li>
  150. </ul>
  151. <!-- //버튼 배치 영역 -->
  152. </div>
  153. </div>
  154. <script type="text/javascript" src="/ux/plugins/summernote/summernote.js?v=2020102902"></script>
  155. <script type="text/javascript" src="/ux/plugins/gaga/gaga.summernote.js?v=20201030"></script>
  156. <script th:inline="javascript">
  157. /*<![CDATA[*/
  158. // 저장
  159. $('#btnSaveClause').on('click', function() {
  160. // 입력 값 체크
  161. if (!gagajf.validation('#clauseDetailForm'))
  162. return false;
  163. mcxDialog.confirm("저장하시겠습니까?", {
  164. cancelBtnText: "취소",
  165. sureBtnText: "확인",
  166. sureBtnClick: function() {
  167. $('#clauseDetailForm input[name=dispYn]').val($('#clauseDetailForm input:checkbox[name=chkDispYn]').is(':checked') ? 'Y' : 'N');
  168. gagajf.ajaxFormSubmit($('#clauseDetailForm').prop('action'), '#clauseDetailForm', function() {
  169. uifnPopupClose('popupClause');
  170. $('#btnSearch').trigger('click');
  171. });
  172. }
  173. });
  174. });
  175. $(document).ready(function() {
  176. // Create a summernote
  177. let snOptions = gagaSn.getToolbarOptions();
  178. gagaSn.createSummernote(snOptions, '#clauseContent');
  179. });
  180. /*]]>*/
  181. </script>
  182. </html>