BatchForm.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : BatchForm.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.12.02 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div id="main">
  18. <!-- 메인타이틀 영역 -->
  19. <div class="main-title">
  20. </div>
  21. <!-- //메인타이틀 영역 -->
  22. <!-- 메뉴 설명 -->
  23. <div class="infoBox menu-desc">
  24. </div>
  25. <!-- //메뉴 설명 -->
  26. <!-- 검색조건 영역 -->
  27. <div class="panelStyle">
  28. <!-- Search -->
  29. <form id="searchForm" name="searchForm" action="#" th:action="@{'/system/batch/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
  30. <input type="hidden" name="batchId"/>
  31. <table class="frmStyle" aria-describedby="검색조건">
  32. <colgroup>
  33. <col style="width:10%;"/>
  34. <col style="width:20%;"/>
  35. <col style="width:10%;"/>
  36. <col style="width:20%;"/>
  37. <col style="width:10%;"/>
  38. <col/>
  39. </colgroup>
  40. <tr>
  41. <th>업무구분</th>
  42. <td>
  43. <select name="bizGb" class="w150">
  44. <option value="">[전체]</option>
  45. <option th:if="${bizGbList}" th:each="oneData, status : ${bizGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  46. </select>
  47. </td>
  48. <th>배치주기</th>
  49. <td>
  50. <select name="batchFrq">
  51. <option value="">[전체]</option>
  52. <option value="H">[H] 시간배치</option>
  53. <option value="D">[D] 일배치</option>
  54. <option value="M">[M] 월배치</option>
  55. <option value="Y">[Y] 연배치</option>
  56. </select>
  57. </td>
  58. <th>검색어</th>
  59. <td>
  60. <select name="searchGb">
  61. <option value="">[선택]</option>
  62. <option value="batchId">배치ID</option>
  63. <option value="batchNm">배치명</option>
  64. </select>
  65. <input type="text" class="w300" name="searchTxt" placeholder="" maxlength="50"/>
  66. </td>
  67. </tr>
  68. <tr>
  69. <th>수행기간</th>
  70. <td colspan="5" id="terms">
  71. </td>
  72. </tr>
  73. </table>
  74. <ul class="panelBar">
  75. <li class="center">
  76. <button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
  77. </li>
  78. </ul>
  79. </form>
  80. </div>
  81. <!-- //검색조건 영역 -->
  82. <div class="panelStyle">
  83. <!-- 다중 TABLE 배치 -->
  84. <ul class="division">
  85. <li style="width: 45%">
  86. <div class="panelBar">
  87. <h4>배치 목록</h4>
  88. </div>
  89. <div id="gridList1" style="width: 100%; height: 300px" class="ag-theme-balham"></div>
  90. <form id="detailForm" name="detailForm" action="#" th:action="@{'/system/batch/save'}">
  91. <input type="hidden" name="mode" value="N"/>
  92. <table class="frmStyle" aria-describedby="등록/수정 폼">
  93. <colgroup>
  94. <col style="width:20%;"/>
  95. <col style="width:30%;"/>
  96. <col style="width:20%;"/>
  97. <col/>
  98. </colgroup>
  99. <tr>
  100. <th>배치ID<em class="required" title="필수"></em></th>
  101. <td colspan="3">
  102. <input type="text" name="batchId" placeholder="" required="required" maxlength="50" data-valid-name="배치ID"/>
  103. </td>
  104. </tr>
  105. <tr>
  106. <th>배치명<em class="required" title="필수"></em></th>
  107. <td colspan="3">
  108. <input type="text" name="batchNm" placeholder="" maxlength="100" required="required" data-valid-name="배치명"/>
  109. </td>
  110. </tr>
  111. <tr>
  112. <th>업무구분<em class="required" title="필수"></em></th>
  113. <td>
  114. <select name="bizGb" class="w150" required="required" data-valid-name="업무구분">
  115. <option value="">[선택]</option>
  116. <option th:if="${bizGbList}" th:each="oneData, status : ${bizGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  117. </select>
  118. </td>
  119. <th>배치주기<em class="required" title="필수"></em></th>
  120. <td>
  121. <select name="batchFrq" required="required" data-valid-name="배치주기">
  122. <option value="">[선택]</option>
  123. <option value="H">[H] 시간배치</option>
  124. <option value="D">[D] 일배치</option>
  125. <option value="M">[M] 월배치</option>
  126. <option value="Y">[Y] 연배치</option>
  127. </select>
  128. </td>
  129. </tr>
  130. <tr>
  131. <th>배치설명</th>
  132. <td colspan="3">
  133. <textarea class="textareaR2" name="batchDesc"></textarea>
  134. </td>
  135. </tr>
  136. <tr>
  137. <th>배치URL</th>
  138. <td colspan="3">
  139. <input type="text" name="batchUrl" placeholder="" maxlength="100"/>
  140. </td>
  141. </tr>
  142. <tr>
  143. <th>사용여부<em class="required" title="필수"></em></th>
  144. <td colspan="3">
  145. <input type="hidden" name="useYn"/>
  146. <label class="chkBox checked"><input type="checkbox" name="chkUseYn" value="Y" checked="checked" readonly="readonly"/>사용</label>
  147. </td>
  148. </tr>
  149. </table>
  150. <ul class="panelBar">
  151. <li class="right">
  152. <button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
  153. <button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
  154. </li>
  155. </ul>
  156. </form>
  157. </li>
  158. <li style="width: 55%">
  159. <div class="panelBar">
  160. <h4>배치 로그</h4>
  161. </div>
  162. <div id="gridList2" style="width: 100%; height: 570px" class="ag-theme-balham"></div>
  163. </li>
  164. </ul>
  165. </div>
  166. </div>
  167. <script th:inline="javascript">
  168. /*<![CDATA[*/
  169. let bizGbList = gagajf.convertToArray([[${bizGbList}]]);
  170. // specify the columns
  171. let columnDefs1 = [
  172. {
  173. headerName: "배치ID", field: "batchId", width: 200,
  174. cellRenderer: function(params) {
  175. return '<a href="javascript:void(0);">' + params.value + '</a>';
  176. }
  177. },
  178. {headerName: "배치명", field: "batchNm", width: 200},
  179. {
  180. headerName: "업무구분", field: "bizGb", width: 100, cellClass: 'text-center',
  181. cellRenderer: function (params) { return gagaAgGrid.lookupValue(bizGbList, params.value); }
  182. },
  183. {
  184. headerName: "배치주기", field: "batchFrq", width: 80, cellClass: 'text-center',
  185. cellRenderer: function(params) {
  186. let batchFrqNm = '시간배치';
  187. if (params.value == 'D') batchFrqNm = '일배치';
  188. else if (params.value == 'M') batchFrqNm = '월배치';
  189. else if (params.value == 'Y') batchFrqNm = '연배치';
  190. return batchFrqNm;
  191. }
  192. },
  193. {headerName: "상태", field: "batchStat", width: 80, cellClass: 'text-center', hide: true},
  194. {
  195. headerName: "실행", field: "btnNm", width: 120, cellClass: 'text-center',
  196. cellRenderer: function(params) {
  197. let btnNm = '';
  198. if (params.data.useYn == 'N') {
  199. btnNm = '미사용';
  200. } else {
  201. if (gagajf.isNull(params.data.batchStat) || params.data.batchStat == 'F') {
  202. btnNm = '<button type="button" class="btn btn-base btn-lg" onclick="fnExcuteBatch(\'' + params.data.batchId + '\',\'' + params.data.batchStat + '\',\'' + params.data.batchUrl + '\');">실행</button>';
  203. } else {
  204. btnNm = '실행중';
  205. }
  206. }
  207. return btnNm;
  208. }
  209. },
  210. {headerName: "배치설명", field: "batchDesc", width: 400, hide: true},
  211. {headerName: "배치URL", field: "batchUrl", width: 200},
  212. {headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'}
  213. ];
  214. let columnDefs2 = [
  215. // {headerName: "배치ID", field: "batchId", width: 200},
  216. {headerName: "배치명", field: "batchNm", width: 200},
  217. // {
  218. // headerName: "업무구분", field: "bizGb", width: 100, cellClass: 'text-center',
  219. // cellRenderer: function (params) { return gagaAgGrid.lookupValue(bizGbList, params.value); }
  220. // },
  221. {
  222. headerName: "배치주기", field: "batchFrq", width: 80, cellClass: 'text-center',
  223. cellRenderer: function(params) {
  224. let batchFrqNm = '시간배치';
  225. if (params.value == 'D') batchFrqNm = '일배치';
  226. else if (params.value == 'M') batchFrqNm = '월배치';
  227. else if (params.value == 'Y') batchFrqNm = '연배치';
  228. return batchFrqNm;
  229. }
  230. },
  231. {
  232. headerName: "상태", field: "batchStat", width: 80, cellClass: 'text-center',
  233. cellRenderer: function(params) {
  234. return params.value == 'I' ? '실행중' : '실행완료';
  235. }
  236. },
  237. {headerName: "시작일시", field: "batchStdt", width: 180, cellClass: 'text-center'},
  238. {headerName: "종료일시", field: "batchEddt", width: 180, cellClass: 'text-center'},
  239. {
  240. headerName: "수행시간(초)", field: "runTime", width: 100, cellClass: 'text-center',
  241. cellRenderer: function(params) { return gagaAgGrid.toAddComma(params.value); }
  242. }
  243. ];
  244. // Get GridOptions
  245. let gridOptions1 = gagaAgGrid.getGridOptions(columnDefs1);
  246. let gridOptions2 = gagaAgGrid.getGridOptions(columnDefs2);
  247. // Cell Click
  248. gridOptions1.onCellClicked = function(event) {
  249. if (event.colDef.field != 'batchId') {
  250. return false;
  251. }
  252. $('#detailForm input[name=mode]').val('U');
  253. $('#detailForm input[name=batchId]').val(event.data.batchId);
  254. $('#detailForm input[name=batchId]').attr('readonly', true);
  255. $('#detailForm input[name=batchNm]').val(event.data.batchNm);
  256. $('#detailForm select[name=bizGb]').val(event.data.bizGb);
  257. $('#detailForm select[name=batchFrq]').val(event.data.batchFrq);
  258. $('#detailForm textarea[name=batchDesc]').val(event.data.batchDesc);
  259. $('#detailForm input[name=batchUrl]').val(event.data.batchUrl);
  260. if (event.data.useYn == 'Y') {
  261. $("#detailForm input:checkbox[name=chkUseYn]").prop('checked', true);
  262. $("#detailForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
  263. } else {
  264. $("#detailForm input:checkbox[name=chkUseYn]").prop('checked', false);
  265. $("#detailForm input:checkbox[name=chkUseYn]").parent().removeClass('checked');
  266. }
  267. $('#detailForm input:checkbox[name=chkUseYn]').attr('readonly', false);
  268. // 배치로그 조회
  269. fnGetBatchLogByBatchId(event.data.batchId);
  270. }
  271. // 배치 실행
  272. var fnExcuteBatch = function(batchId, batchStat, batchUrl) {
  273. if (batchStat == 'I') {
  274. mcxDialog.alert("실행중입니다. 종료되면 실행해 주세요.");
  275. return false;
  276. }
  277. if (gagajf.isNull(batchUrl)) {
  278. mcxDialog.alert("배치URL 정보가 없습니다. 등록 후 실행해 주세요.");
  279. return false;
  280. }
  281. mcxDialog.confirm("배치는 몇 분이 소요될 수 있으며 나중에 확인하셔야 할 수도 있습니다.<br/>계속 진행하시겠습니까?", {
  282. cancelBtnText: "취소",
  283. sureBtnText: "확인",
  284. sureBtnClick: function() {
  285. let actionUrl = [[${@environment.getProperty('domain.batch')}]] + batchUrl;
  286. $.get(actionUrl, function(result) {
  287. // 배치로그 조회
  288. fnGetBatchLogByBatchId(batchId);
  289. });
  290. }
  291. });
  292. }
  293. // 조회
  294. $('#btnSearch').on('click', function() {
  295. // Fetch data
  296. gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions1, '#searchForm');
  297. gagaAgGrid.fetch('/system/batch/log/list', gridOptions2, '#searchForm');
  298. });
  299. // 신규
  300. $('#btnNew').on('click', function() {
  301. $('#detailForm')[0].reset();
  302. $('#detailForm input[name=mode]').val('N');
  303. $('#detailForm input[name=batchId]').attr('readonly', false);
  304. $('#detailForm input:checkbox[name=chkUseYn]').prop('checked', true);
  305. $("#detailForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
  306. $('#detailForm input:checkbox[name=chkUseYn]').attr('readonly', true);
  307. $('#detailForm input[name=batchId]').focus();
  308. });
  309. // 저장 처리
  310. $('#btnSave').on('click', function() {
  311. // 입력 값 체크
  312. if (!gagajf.validation('#detailForm'))
  313. return;
  314. $('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(":checked") ? 'Y' : 'N');
  315. mcxDialog.confirm("저장하시겠습니까?", {
  316. cancelBtnText: "취소",
  317. sureBtnText: "확인",
  318. sureBtnClick: function() {
  319. gagajf.ajaxFormSubmit($('#detailForm').prop('action')
  320. , $('#detailForm')
  321. , function() {
  322. $('#btnNew').trigger('click');
  323. $('#btnSearch').trigger('click');
  324. }
  325. );
  326. }
  327. });
  328. });
  329. // 배치로그 조회
  330. var fnGetBatchLogByBatchId = function(batchId) {
  331. $('#searchForm input[name=batchId]').val(batchId);
  332. gagaAgGrid.fetch('/system/batch/log/list', gridOptions2, '#searchForm');
  333. }
  334. $(document).ready(function() {
  335. cfnCreateCalendar('#terms', 'batchStdt', 'batchEddt');
  336. $('#batchStdt').val(new Date().format("YYYY-MM-DD"));
  337. $('#batchEddt').val(new Date().format("YYYY-MM-DD"));
  338. // Create a agGrid
  339. gagaAgGrid.createGrid('gridList1', gridOptions1);
  340. gagaAgGrid.createGrid('gridList2', gridOptions2);
  341. });
  342. /*]]>*/
  343. </script>
  344. </html>