SampleFileForm.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : SampleFileForm.html
  7. * @desc : 샘플양식관리 Page
  8. *============================================================================
  9. * SISUN
  10. * Copyright(C) 2019 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2019.07.10 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div id="main">
  18. <!-- 메인타이틀 영역 -->
  19. <div class="main-title">
  20. </div>
  21. <!-- //메인타이틀 영역 -->
  22. <div class="panelStyle2">
  23. <form id="registerForm" name="registerForm" action="#" th:action="@{'/system/sample/file/save'}">
  24. <table class="frmStyle" aria-describedby="신규">
  25. <colgroup>
  26. <col style="width:10%;"/>
  27. <col style="width:40%;"/>
  28. <col style="width:10%;"/>
  29. <col/>
  30. </colgroup>
  31. <tr>
  32. <th>샘플파일ID<i class="star" aria-hidden="true"></i></th>
  33. <td>
  34. <input type="text" class="w100" name="sampleFileId" placeholder="" value="자동생성" readonly="readonly"/>
  35. </td>
  36. <th>샘플파일명<i class="star" aria-hidden="true"></i></th>
  37. <td>
  38. <input type="text" name="sampleFileNm" placeholder="" required="required" data-valid-name="샘플파일명"/>
  39. </td>
  40. </tr>
  41. <tr>
  42. <th>샘플파일<i class="star" aria-hidden="true"></i></th>
  43. <td colspan="3">
  44. <div class="uFile w600">
  45. <input type="file" id="file" name="file" class="uFileInput"/>
  46. <label for="file" class="uFileLabel">파일 선택</label>
  47. <input type="hidden" name="orgFileNm"/>
  48. <input type="hidden" name="sysFileNm"/>
  49. </div>
  50. <span style="margin-left: 10px; display: none;" id="sampleFileList">
  51. <a href="">SMS수신_미동의_Sample.xlsx</a>
  52. </span>
  53. </td>
  54. </tr>
  55. <tr>
  56. <th>사용여부<i class="star" aria-hidden="true"></i></th>
  57. <td colspan="3">
  58. <input type="hidden" name="useYn"/>
  59. <label><input type="checkbox" name="chkUseYn" value="Y" checked="checked" disabled="disabled"/>사용</label>
  60. </td>
  61. </tr>
  62. </table>
  63. <div class="panelBtnB">
  64. <button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
  65. <button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
  66. </div>
  67. </form>
  68. </div>
  69. <div class="panelStyle2">
  70. <div class="panelContent" style="overflow: hidden;">
  71. <div id="gridList" style="width: 100%;" class="ag-theme-balham"></div>
  72. </div>
  73. </div>
  74. </div>
  75. <script th:inline="javascript">
  76. /*<![CDATA[*/
  77. // specify the columns
  78. var columnDefs = [
  79. {headerName: "샘플파일ID", field: "sampleFileId", width: 120, cellClass: 'text-center'},
  80. {
  81. headerName: "샘플파일명", field: "sampleFileNm", width: 300,
  82. cellRenderer: function(params) {
  83. return '<a href="javascript:void(0);">' + params.value + '</a>';
  84. }
  85. },
  86. {headerName: "시스템파일명", field: "sysFileNm", width: 400},
  87. {headerName: "사용여부", field: "useYn", width: 100, cellClass: 'text-center'}
  88. ];
  89. // Get GridOptions
  90. var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
  91. // Cell Click
  92. gridOptions.onCellClicked = function(event) {
  93. if (event.colDef.field != 'sampleFileNm')
  94. return;
  95. fnBindDetail(event.data);
  96. }
  97. // 조회
  98. var fnSearch = function() {
  99. gagaAgGrid.fetch('/system/sample/file/list', gridOptions);
  100. }
  101. // 목록 > row 클릭 시
  102. var fnBindDetail = function(rowData) {
  103. $('#registerForm input[name=sampleFileId]').val(rowData.sampleFileId);
  104. $('#registerForm input[name=sampleFileNm]').val(rowData.sampleFileNm);
  105. $('#registerForm input[name=orgFileNm]').val(rowData.orgFileNm);
  106. $('#registerForm input[name=sysFileNm]').val(rowData.sysFileNm);
  107. $('#sampleFileList').html('<a href="javascript:void(0);" onclick="cfnDownloadSampleFile(\'' + rowData.sampleFileId + '\');">' + rowData.sysFileNm + '</a>');
  108. $('#sampleFileList').show();
  109. $('#registerForm input:checkbox[name=chkUseYn]').attr('disabled', false);
  110. $('#registerForm input:checkbox[name=chkUseYn]').removeClass('formControl');
  111. $("#registerForm input[name=useYn]").val(rowData.useYn);
  112. if (rowData.useYn == 'Y') {
  113. $("#registerForm input:checkbox[name=chkUseYn]").prop('checked', true);
  114. $("#registerForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
  115. } else {
  116. $("#registerForm input:checkbox[name=chkUseYn]").prop('checked', false);
  117. $("#registerForm input:checkbox[name=chkUseYn]").parent().removeClass('checked');
  118. }
  119. }
  120. // 신규
  121. $('#btnNew').on('click', function() {
  122. $('#registerForm')[0].reset();
  123. $('#registerForm input[name=sampleFileId]').val('자동생성');
  124. $('#registerForm input[name=file]').val('');
  125. $('#registerForm input:checkbox[name=chkUseYn]').attr('disabled', true);
  126. $('#registerForm input:checkbox[name=chkUseYn]').addClass('formControl');
  127. $('#sampleFileList').html('');
  128. $('#sampleFileList').hide();
  129. });
  130. // 저장 처리
  131. $('#btnSave').on('click', function() {
  132. // 입력 값 체크
  133. if (!gagajf.validation('#registerForm'))
  134. return;
  135. if (gagajf.isNull($('#registerForm input[name=sysFileNm]').val())) {
  136. mcxDialog.alert('샘플파일을 선택해 주세요.');
  137. return;
  138. }
  139. $('#registerForm input[name=useYn]').val($('#registerForm input:checkbox[name=chkUseYn]').is(":checked") ? 'Y' : 'N');
  140. mcxDialog.confirm("저장하시겠습니까?", {
  141. cancelBtnText: "취소",
  142. sureBtnText: "확인",
  143. sureBtnClick: function() {
  144. gagajf.ajaxFormSubmit($('#registerForm').prop('action')
  145. , $('#registerForm')
  146. , function() {
  147. $('#btnNew').trigger('click');
  148. fnSearch();
  149. }
  150. );
  151. }
  152. });
  153. });
  154. // 파일첨부 선택 시
  155. $('#registerForm input[name=file]').on('change', function() {
  156. // multiple 속성이 있으면 files에는 다수의 객체가 할당됨
  157. var file = this.files[0];
  158. // 파일 업로드
  159. gagajf.ajaxFileUpload('/common/file/upload?subDir=/sample'
  160. , file
  161. , function(result) {
  162. // 업로드한 파일명 설정
  163. $('#registerForm input[name=orgFileNm]').val(result.oldFileName);
  164. $('#registerForm input[name=sysFileNm]').val(result.newFileName);
  165. }
  166. );
  167. });
  168. $(document).ready(function() {
  169. // Create a agGrid
  170. gagaAgGrid.createGrid('gridList', gridOptions);
  171. // grid 높이 자동 조정
  172. uifnFitGrid('auto');
  173. fnSearch();
  174. });
  175. /*]]>*/
  176. </script>
  177. </html>