ExtmallForm.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : ExtmallForm.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.11.05 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. <form id="searchForm" name="searchForm" action="#" th:action="@{'/ocm/extmall/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
  29. <table class="frmStyle" aria-describedby="검색조건">
  30. <colgroup>
  31. <col style="width:10%;"/>
  32. <col/>
  33. </colgroup>
  34. <tr>
  35. <th>제휴몰벤더</th>
  36. <td>
  37. <select name="vendorId">
  38. <option value="">[전체]</option>
  39. <option th:if="${vendorList}" th:each="oneData, status : ${vendorList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  40. </select>
  41. </td>
  42. </tr>
  43. </table>
  44. <ul class="panelBar">
  45. <li class="center">
  46. <button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
  47. <button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();">초기화</button>
  48. </li>
  49. </ul>
  50. </form>
  51. </div>
  52. <!-- 검색조건 영역 -->
  53. <!-- 리스트 영역 -->
  54. <div class="panelStyle">
  55. <!-- 버튼 배치 영역 -->
  56. <ul class="panelBar">
  57. <li class="right">
  58. <button type="button" class="btn btn-default btn-lg" id="btnExcel">엑셀다운로드</button>
  59. </li>
  60. </ul>
  61. <!-- //버튼 배치 영역 -->
  62. <div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
  63. </div>
  64. <!-- //리스트 영역 -->
  65. <!-- 등록/수정 -->
  66. <div class="panelStyle">
  67. <div class="panelTitle">
  68. <h3><i class="fa fa-info-circle"></i><font color="red">신규등록 시 WMS에도 꼭 등록요청해주세요.</font></h3>
  69. </div>
  70. <form id="detailForm" name="detailForm" action="#" th:action="@{'/ocm/extmall/save'}">
  71. <table class="frmStyle" aria-describedby="등록/수정 폼">
  72. <colgroup>
  73. <col style="width:10%;"/>
  74. <col style="width:15%;"/>
  75. <col style="width:10%;"/>
  76. <col style="width:15%;"/>
  77. <col style="width:10%;"/>
  78. <col style="width:15%;"/>
  79. <col style="width:10%;"/>
  80. <col/>
  81. </colgroup>
  82. <tr>
  83. <th>제휴몰벤더<i class="required" title="필수"></i></th>
  84. <td>
  85. <select name="vendorId" required="required" data-valid-name="제휴몰벤더">
  86. <option value="">[선택]</option>
  87. <option th:if="${vendorList}" th:each="oneData, status : ${vendorList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  88. </select>
  89. </td>
  90. <th>제휴몰ID<i class="required" title="필수"></i></th>
  91. <td>
  92. <input type="text" class="w150" name="extmallId" maxlength="20" required="required" data-valid-name="제휴몰ID"/>
  93. </td>
  94. <th>제휴몰사용자ID<i class="required" title="필수"></i></th>
  95. <td>
  96. <input type="text" class="w150" name="extmallUserId" maxlength="20" required="required" data-valid-name="제휴몰사용자ID"/>
  97. </td>
  98. <th>제휴몰명<i class="required" title="필수"></i></th>
  99. <td>
  100. <input type="text" name="extmallNm" maxlength="50" required="required" data-valid-name="제휴몰명"/>
  101. </td>
  102. </tr>
  103. <tr>
  104. <th>공급업체</th>
  105. <td>
  106. <select name="supplyCompCd">
  107. <option value="">[선택]</option>
  108. <option th:if="${supplyCompList}" th:each="oneData, status : ${supplyCompList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
  109. </select>
  110. </td>
  111. <th>고객센터연락처</th>
  112. <td>
  113. <input type="text" class="w150" name="extmallTel" maxlength="20"/>
  114. </td>
  115. <td colspan="4"></td>
  116. <!-- 숨김처리 사용안하기로 함
  117. <th>판매매장코드</th>
  118. <td>
  119. <input type="text" class="w150" name="sellStoreCd" maxlength="20"/>
  120. </td>
  121. <th>재고판매비율<i class="required" title="필수"></i></th>
  122. <td>
  123. <input type="text" class="w100 aR" name="stockSellRate" maxlength="3" required="required" data-valid-type="real" data-valid-name="재고판매비율"/>%
  124. </td>
  125. <th>가격차이허용율<i class="required" title="필수"></i></th>
  126. <td>
  127. <input type="text" class="w100 aR" name="priceAcceptRate" maxlength="3" required="required" data-valid-type="real" data-valid-name="가격차이허용율"/>%
  128. </td>
  129. -->
  130. </tr>
  131. <tr>
  132. <th>직접회수여부</th>
  133. <td>
  134. <label class="rdoBtn"><input type="radio" name="dwdpYn" value="Y" checked="checked">제휴몰에서 회수<span></span></label>
  135. <label class="rdoBtn"><input type="radio" name="dwdpYn" value="N">자사몰에서 회수<span></span></label>
  136. </td>
  137. <th>취소문자발송여부</th>
  138. <td colspan="3">
  139. <label class="rdoBtn"><input type="radio" name="cnclsmsSendYn" value="Y" checked="checked">제휴몰에서 발송<span></span></label>
  140. <label class="rdoBtn"><input type="radio" name="cnclsmsSendYn" value="N">자사몰에서 발송<span></span></label>
  141. </td>
  142. <th>사용여부<i class="required" title="필수"></i></th>
  143. <td>
  144. <label class="rdoBtn"><input type="radio" name="useYn" value="Y" checked="checked">Yes<span></span></label>
  145. <label class="rdoBtn"><input type="radio" name="useYn" value="N">No<span></span></label>
  146. </td>
  147. </tr>
  148. </table>
  149. </form>
  150. <!-- 버튼 배치 영역 -->
  151. <ul class="panelBar">
  152. <li class="right">
  153. <button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
  154. <button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
  155. </li>
  156. </ul>
  157. <!-- //버튼 배치 영역 -->
  158. </div>
  159. <!-- 등록/수정 -->
  160. </div>
  161. <script th:inline="javascript">
  162. /*<![CDATA[*/
  163. let vendorList = gagajf.convertToArray([[${vendorList}]]);
  164. let supplyCompList = gagajf.convertToArray([[${supplyCompList}]]);
  165. let columnDefs = [
  166. // {width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
  167. // {headerName: "CRUD", field: "crud", width: 75, minWidth: 75, hide: true},
  168. {
  169. headerName: "제휴몰벤더", field: "vendorId", width: 150, cellClass: 'text-center',
  170. valueGetter: function (params) { return gagaAgGrid.lookupValue(vendorList, params.data.vendorId); }
  171. },
  172. {
  173. headerName: "제휴몰ID", field: "extmallId", width: 120, cellClass: 'text-center',
  174. cellRenderer: function(params) {
  175. return '<a href="javascript:void(0);">' + params.value + '</a>';
  176. }
  177. },
  178. {headerName: "제휴몰사용자ID", field: "extmallUserId", width: 150, cellClass: 'text-center'},
  179. {headerName: "제휴몰명", field: "extmallNm", width: 200},
  180. {
  181. headerName: "업체", field: "supplyCompCd", width: 150, cellClass: 'text-center',
  182. valueGetter: function (params) { return gagaAgGrid.lookupValue(supplyCompList, params.data.supplyCompCd); }
  183. },
  184. {headerName: "고객센터연락처", field: "extmallTel", width: 150, cellClass: 'text-center'},
  185. /* {headerName: "판매매장코드", field: "sellStoreCd", width: 120, cellClass: 'text-center'},
  186. {headerName: "재고판매비율(%)", field: "stockSellRate", width: 150, cellClass: 'text-center'},
  187. {headerName: "가격차이허용율(%)", field: "priceAcceptRate", width: 150, cellClass: 'text-center'}, */
  188. {
  189. headerName: "직접회수여부", field: "dwdpYn", width: 150, cellClass: 'text-center',
  190. cellRenderer: function (params) {
  191. return params.value == 'Y' ? '제휴몰에서회수' : '자사몰에서회수';
  192. }
  193. },
  194. {
  195. headerName: "취소문자발송여부", field: "cnclsmsSendYn", width: 150, cellClass: 'text-center',
  196. cellRenderer: function (params) {
  197. return params.value == 'Y' ? '제휴몰에서발송' : '자사몰에서발송';
  198. }
  199. },
  200. {
  201. headerName: "사용여부", field: "useYn", width: 100, cellClass: 'text-center',
  202. cellRenderer: function (params) {
  203. return params.value == 'Y' ? 'Yes' : 'No';
  204. }
  205. }
  206. ];
  207. let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
  208. // Cell click
  209. gridOptions.onCellClicked = function(event) {
  210. if (event.colDef.field != 'extmallId')
  211. return;
  212. $('#detailForm select[name=vendorId]').val(event.data.vendorId);
  213. $('#detailForm input[name=extmallId]').val(event.data.extmallId);
  214. $('#detailForm input[name=extmallUserId]').val(event.data.extmallUserId);
  215. $('#detailForm input[name=extmallNm]').val(event.data.extmallNm);
  216. $('#detailForm input[name=extmallTel]').val(event.data.extmallTel);
  217. $('#detailForm select[name=supplyCompCd]').val(event.data.supplyCompCd);
  218. $('#detailForm input[name=sellStoreCd]').val(event.data.sellStoreCd);
  219. $('#detailForm input[name=stockSellRate]').val(event.data.stockSellRate);
  220. $('#detailForm input[name=priceAcceptRate]').val(event.data.priceAcceptRate);
  221. if (event.data.dwdpYn == 'Y') {
  222. $('#detailForm input:radio[name=dwdpYn]').eq(0).trigger('click');
  223. } else {
  224. $('#detailForm input:radio[name=dwdpYn]').eq(1).trigger('click');
  225. }
  226. if (event.data.cnclsmsSendYn == 'Y') {
  227. $('#detailForm input:radio[name=cnclsmsSendYn]').eq(0).trigger('click');
  228. } else {
  229. $('#detailForm input:radio[name=cnclsmsSendYn]').eq(1).trigger('click');
  230. }
  231. if (event.data.useYn == 'Y') {
  232. $('#detailForm input:radio[name=useYn]').eq(0).trigger('click');
  233. } else {
  234. $('#detailForm input:radio[name=useYn]').eq(1).trigger('click');
  235. }
  236. }
  237. // 검색
  238. $('#btnSearch').on('click', function() {
  239. gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
  240. });
  241. // 신규버튼
  242. $('#btnNew').on('click', function() {
  243. $("#detailForm")[0].reset();
  244. });
  245. // 저장
  246. $("#btnSave").on("click", function() {
  247. // 필수값 체크
  248. if (!gagajf.validation('#detailForm'))
  249. return false;
  250. mcxDialog.confirm("저장하시겠습니까?", {
  251. cancelBtnText: "취소",
  252. sureBtnText: "확인",
  253. sureBtnClick: function() {
  254. gagajf.ajaxFormSubmit($('#detailForm').prop('action'), '#detailForm', function() {
  255. $('#btnNew').trigger('click');
  256. $('#btnSearch').trigger('click');
  257. });
  258. }
  259. });
  260. });
  261. // 엑셀다운로드
  262. $('#btnExcel').on('click', function() {
  263. gagaAgGrid.exportToExcel('제휴몰 목록', gridOptions);
  264. });
  265. $(document).ready(function() {
  266. // Create a agGrid
  267. gagaAgGrid.createGrid('gridList', gridOptions);
  268. });
  269. /*]]>*/
  270. </script>
  271. </html>