NotiinfoForm.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : NotiinfoForm.html
  7. * @desc : 정보고시 목록
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2020.10.19 eskim 최초 작성
  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. <form id="searchForm" name="searchForm" action="#" th:action="@{'/goods/notiInfo/list'}" >
  29. <input type="hidden" id="niClsfCd" name="niClsfCd"/>
  30. <div class="boxTitle"></div>
  31. <ul class="boxContent">
  32. <li class="boxContentBtnT">
  33. <span style="padding:5.5px 15px; background:#e9ecfb; border-top:1px solid #dae0fd; border-bottom:0.5px solid #dae0fd;">업체</span>
  34. <select name="supplyCompCd" id="supplyCompCd">
  35. <option value="S0001" th:if="${sessionInfo.roleCd != 'G001_B000' }" th:selected="${sessionInfo.roleCd != 'G001_B000'}">한세엠케이</option>
  36. <option value="S0002" th:if="${sessionInfo.roleCd != 'G001_B000' }">한세드림</option>
  37. <option value="E" th:selected="${sessionInfo.roleCd == 'G001_B000'}">입점</option>
  38. </select>
  39. </li>
  40. <li class="boxContentTop">
  41. <table class="w100p">
  42. <colgroup>
  43. <col style="width:39%;"/>
  44. <col style="width:2%;"/>
  45. <col/>
  46. <col style="width:10%;"/>
  47. </colgroup>
  48. <tr>
  49. <td><h4>고시분류</h4></td>
  50. <td>&nbsp;</td>
  51. <td><h4>고시항목</h4></td>
  52. <td class="aR padB10"><button type="button" class="btn btn-success btn-lg" id="btnNotiItemlSave">저장</button></td>
  53. </tr>
  54. <tr>
  55. <td><div id="gridNotiList" style="width: 100%; height: 600px;" class="ag-theme-balham"></div></td>
  56. <td>&nbsp;</td>
  57. <td colspan="2"><div id="gridNotiItemlList" style="width: 100%; height: 600px;" class="ag-theme-balham"></div></td>
  58. </tr>
  59. </table>
  60. </li>
  61. </ul>
  62. </form>
  63. </div>
  64. <!-- //테이블 영역 -->
  65. </div>
  66. <script th:inline="javascript">
  67. /*<![CDATA[*/
  68. var useYnList = gagajf.convertToArray([[${useYnList}]]);
  69. var niItemCdList = gagajf.convertToArray([[${niItemCdList}]]);
  70. // specify the columns
  71. var columnNotiDefs = [
  72. /* {width: 40, minWidth: 40, cellClass: 'text-right', headerCheckboxSelection: true, checkboxSelection: true, filter: false}, */
  73. {headerName: "CRUD", field: "crud", width: 75, minWidth: 75, hide: true},
  74. //{headerName: 'No', width: 60, cellClass: 'text-center', valueGetter: function(params) { return params.node.rowIndex + 1 }},
  75. {headerName: "고시분류코드", field: "niClsfCd", width: 150, cellClass: 'text-center',editable: true,
  76. editable : function(params){return params.data.crud=='C' ? true : false;},
  77. cellEditor: 'textCellEditor',
  78. cellEditorParams: { maxlength: 50, required: true },
  79. cellRenderer: function(params) {
  80. return '<a href="javascript:void(0);">' + params.value + '</a>';
  81. }
  82. },
  83. {headerName: "상품 정보고시명", field: "niClsfNm", width: 440, cellClass: 'text-center',editable: true,
  84. editable : function(params){return params.data.crud=='C' ? true : false;}
  85. },
  86. {headerName: "등록일자", field: "regDt" , width: 150, cellClass: 'text-center', hide: true},
  87. {headerName: "수정일자", field: "udtDt", width: 150, cellClass: 'text-center', hide: true}
  88. ];
  89. var columnNotiItemlDefs = [
  90. {width: 40, minWidth: 40, cellClass: 'text-right', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
  91. {headerName: "CRUD", field: "crud", width: 75, minWidth: 75, hide: true},
  92. {headerName: "항목명", field: "niItemCd" , width: 200, cellClass: 'text-left' ,editable: true,
  93. editable : function(params){return params.data.crud=='C' ? true : false;},
  94. cellEditor: 'agRichSelectCellEditor',
  95. cellEditorParams: { values: gagaAgGrid.extractValues(niItemCdList) },
  96. valueFormatter: function (params) { return gagaAgGrid.lookupValue(niItemCdList, params.value); },
  97. valueParser: function (params) { return gagaAgGrid.lookupKey(niItemCdList, params.newValue); }
  98. },
  99. {headerName: "내용", field: "niContent" , width: 350, cellClass: 'text-left' ,editable: true,
  100. cellEditor: 'textCellEditor',
  101. cellEditorParams: { maxlength: 500, required: true }
  102. },
  103. {headerName: "필수여부", field: "reqYn" , width: 110, cellClass: 'text-center',editable: false,
  104. cellEditor: 'agRichSelectCellEditor',
  105. cellEditorParams: { values: gagaAgGrid.extractValues(useYnList), required: true },
  106. valueFormatter: function (params) { return gagaAgGrid.lookupValue(useYnList, params.value); },
  107. valueParser: function (params) { return gagaAgGrid.lookupKey(useYnList, params.newValue); }
  108. },
  109. {headerName: "노출여부", field: "dispYn" , width: 110, cellClass: 'text-center',editable: true,
  110. cellEditor: 'agRichSelectCellEditor',
  111. cellEditorParams: { values: gagaAgGrid.extractValues(useYnList), required: true },
  112. valueFormatter: function (params) { return gagaAgGrid.lookupValue(useYnList, params.value); },
  113. valueParser: function (params) { return gagaAgGrid.lookupKey(useYnList, params.newValue); }
  114. },
  115. {headerName: "노출순서", field: "dispOrd" , width: 110, cellClass: 'text-center',editable: true,
  116. cellEditor: 'textCellEditor',
  117. cellEditorParams: { maxlength: 3, validType: 'integer', required: true }
  118. },
  119. {headerName: "등록일자", field: "regDt" , width: 150, cellClass: 'text-center', hide: true},
  120. {headerName: "수정일자", field: "udtDt", width: 150, cellClass: 'text-center', hide: true},
  121. {headerName: "niClsfCd", field: "niClsfCd", hide: true},
  122. {headerName: "supplyCompCd", field: "supplyCompCd", hide: true}
  123. ];
  124. // Get GridOptions
  125. var gridNotiOptions = gagaAgGrid.getGridOptions(columnNotiDefs);
  126. var gridNotiItemlOptions = gagaAgGrid.getGridOptions(columnNotiItemlDefs);
  127. //그리드 셀에디트 하는 화면에 옵션 추가해 주면 포커스 잃을 시 에디트 바로 중지(데이터 변경후 엔터 안쳐도 됩)
  128. gridNotiItemlOptions.stopEditingWhenGridLosesFocus = true;
  129. // Add on options
  130. gridNotiItemlOptions.rowSelection = 'multiple';
  131. gridNotiItemlOptions.suppressRowClickSelection = true;
  132. //Row Click
  133. gridNotiOptions.onCellClicked = function(event) {
  134. var niClsfCd = event.data.niClsfCd;
  135. if (event.colDef.field == "niClsfCd" && event.data.crud != "C"){
  136. fnNotiItemlSearch(niClsfCd);
  137. }
  138. }
  139. // 조회
  140. var fnSearch = function() {
  141. var formId = '#searchForm';
  142. $('#searchForm input[name=niClsfCd]').val('');
  143. if (gagajf.isNull($('#searchForm select[name=supplyCompCd]').val())){
  144. mcxDialog.alertC("업체를 선택해 주세요.", {
  145. sureBtnText: "확인",
  146. sureBtnClick: function() {
  147. $('#searchForm select[name=supplyCompCd]').focus();
  148. }
  149. });
  150. return;
  151. }
  152. gagaAgGrid.fetch($(formId).prop('action'), gridNotiOptions, formId);
  153. fnNotiItemlSearch('01'); // 임의값을 넣어서 고시항목 초기화
  154. }
  155. // 상세 조회
  156. var fnNotiItemlSearch = function(niClsfCd){
  157. $('#searchForm input[name=niClsfCd]').val(niClsfCd);
  158. var actionUrl = "/goods/notiInfo/item/list";
  159. gagaAgGrid.fetch(actionUrl, gridNotiItemlOptions, '#searchForm');
  160. }
  161. // 고시항목 행추가
  162. $('#btnNotiItemlAddRow').on('click', function() {
  163. if ($('#searchForm input[name=niClsfCd]').val() == ""){
  164. mcxDialog.alert("고시분류 선택 후 추가해 주세요.");
  165. return;
  166. }
  167. var iRow = gridNotiItemlOptions.api.getDisplayedRowCount();
  168. var allRowData = gagaAgGrid.getAllRowData(gridNotiItemlOptions);
  169. var maxDispOrd = 0;
  170. allRowData.forEach(function(item, index) {
  171. if (item.dispOrd > maxDispOrd){
  172. maxDispOrd = item.dispOrd;
  173. }
  174. });
  175. var niClsfCd = $('#searchForm input[name=niClsfCd]').val();
  176. var supplyCompCd = $('#searchForm select[name=supplyCompCd]').val();
  177. var data = { crud: "C", niItemCd: "", niContent: "", dispOrd: Number(maxDispOrd)+1, niClsfCd: niClsfCd, supplyCompCd: supplyCompCd};
  178. //그리드 마지막에 추가해야함
  179. gridNotiItemlOptions.api.updateRowData({add: [data], addIndex: 0});
  180. });
  181. // 고시항목 행삭제
  182. $('#btnNotiItemlDeleteRow').on('click', function() {
  183. var selectedData = gagaAgGrid.selectedRowData(gridNotiItemlOptions);
  184. var iTotalCnt = 0;
  185. var iCnt = 0;
  186. selectedData.forEach(function(item, index) {
  187. iTotalCnt ++;
  188. if (item.crud == "C"){
  189. gridNotiItemlOptions.api.updateRowData({remove: [item]});
  190. iCnt ++;
  191. }
  192. });
  193. if (iTotalCnt > 0 && iTotalCnt == iCnt){
  194. return;
  195. }
  196. if (selectedData.length == 0) {
  197. mcxDialog.alert('선택된 행이 없습니다.');
  198. return;
  199. }
  200. mcxDialog.confirm('삭제하시겠습니까?', {
  201. cancelBtnText: "취소",
  202. sureBtnText: "확인",
  203. sureBtnClick: function(){
  204. //화면에서 삭제
  205. var removedData = gagaAgGrid.removeRowData(gridNotiItemlOptions, false);
  206. var jsonData = JSON.stringify(removedData);
  207. gagajf.ajaxJsonSubmit('/goods/notiInfo/item/delete', jsonData, fnNotiItemlCollBack);
  208. }
  209. });
  210. });
  211. // 고시항목 저장
  212. $('#btnNotiItemlSave').on('click', function() {
  213. var checkFlag = false;
  214. var selectedData = gagaAgGrid.selectedRowData(gridNotiItemlOptions);
  215. if (selectedData.length == 0) {
  216. mcxDialog.alert('선택된 행이 없습니다.');
  217. return;
  218. }
  219. // Validation
  220. if (!gagaAgGrid.validation(gridNotiItemlOptions, selectedData))
  221. return;
  222. //항목 중복 여부 확인
  223. var allRowData = gagaAgGrid.getAllRowData(gridNotiItemlOptions);
  224. var loopRowData = gagaAgGrid.getAllRowData(gridNotiItemlOptions);
  225. var selIndex = 0;
  226. selectedData.forEach(function(item, index) {
  227. if(checkFlag) return false;
  228. if (item.crud == "C"){
  229. selIndex = index;
  230. loopRowData.forEach(function(loopItem, loopIndex) {
  231. if (selIndex != loopIndex){
  232. if(item.niItemCd == loopItem.niItemCd){
  233. checkFlag = true;
  234. mcxDialog.alertC("항목명이 중복됩니다. 확인해주세요.", {
  235. sureBtnText: "확인",
  236. sureBtnClick: function() {
  237. gridNotiItemlOptions.api.setFocusedCell(selIndex, "niItemCd", null);
  238. }
  239. });
  240. return;
  241. }
  242. }
  243. });
  244. }
  245. });
  246. if(checkFlag) return false;
  247. mcxDialog.confirm('저장하시겠습니까?', {
  248. cancelBtnText: "취소",
  249. sureBtnText: "확인",
  250. sureBtnClick: function(){
  251. var jsonData = JSON.stringify(selectedData);
  252. gagajf.ajaxJsonSubmit('/goods/notiInfo/item/save', jsonData, fnNotiItemlCollBack);
  253. }
  254. });
  255. });
  256. var fnNotiItemlCollBack = function(){
  257. fnNotiItemlSearch($('#searchForm input[name=niClsfCd]').val());
  258. }
  259. $("#supplyCompCd").on("change", function(){
  260. fnSearch();
  261. });
  262. $(document).ready(function() {
  263. // Create a agGrid
  264. gagaAgGrid.createGrid('gridNotiList', gridNotiOptions);
  265. // Create a agGrid
  266. gagaAgGrid.createGrid('gridNotiItemlList', gridNotiItemlOptions);
  267. fnSearch();
  268. });
  269. /*]]>*/
  270. </script>
  271. </html>