OrderSamplePopupForm.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : OrderSamplePopupForm.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 2021.01.30 card007 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div class="modalPopup" data-width="1200" id="popupOrderSample">
  18. <div class="panelStyle">
  19. <!-- TITLE -->
  20. <div class="panelTitle">
  21. <strong th:text="${'주문 샘플 데이터 생성'}"></strong>
  22. <button type="button" class="close" onclick="uifnPopupClose('popupOrderSample');"><em class="fa fa-times"></em></button>
  23. </div>
  24. <!-- //TITLE -->
  25. <!-- CONTENT -->
  26. <div class="panelContent">
  27. <form id="orderSamplePopupForm" name="orderSamplePopupForm" action="#" th:action="@{'/order/sample/create'}" th:method="post">
  28. <table class="frmStyle" aria-describedby="등록폼">
  29. <colgroup>
  30. <col style="width:7%;"/>
  31. <col style="width:26%;"/>
  32. <col style="width:7%;"/>
  33. <col style="width:26%;"/>
  34. <col style="width:7%;"/>
  35. <col/>
  36. </colgroup>
  37. <tbody>
  38. <tr>
  39. <th>회원번호</th>
  40. <td>
  41. <input class="w200" type="text" name="custNo" id="custNo"/>
  42. <button type="button" class="btn btn-info btn-lg" id="btnOrderSearch" onclick="fnApplyCustomerInfo()">적용</button>
  43. </td>
  44. <th>주문자명</th>
  45. <td>
  46. <input type="text" name="ordNm" id="ordNm"/>
  47. </td>
  48. <th>핸드폰번호</th>
  49. <td>
  50. <input type="text" name="ordPhnno" id="ordPhnno"/>
  51. </td>
  52. </tr>
  53. <tr>
  54. <th>전화번호</th>
  55. <td>
  56. <input type="text" name="ordTelno" id="ordTelno"/>
  57. </td>
  58. <th>이메일</th>
  59. <td colspan="3">
  60. <input type="text" name="ordEmail" id="ordEmail"/>
  61. </td>
  62. </tr>
  63. <tr>
  64. <th>배송지</th>
  65. <td colspan="5">
  66. <input type="text" name ="recipZipcode" id="recipZipcode" class="w100" readonly="readonly"/>
  67. <button type="button" class="btn btn-info" onclick="fnOpenDaumAddr('delivery');">우편번호찾기</button>
  68. <input type="text" name ="recipBaseAddr" id="recipBaseAddr" class="w300"/>
  69. <input type="text" name ="recipDtlAddr" id="recipDtlAddr" class="w300"/>
  70. </td>
  71. </tr>
  72. </tbody>
  73. </table>
  74. </form>
  75. </div>
  76. <!-- //CONTENT -->
  77. <!-- Grid -->
  78. <ul class="panelBar">
  79. <li class="left">
  80. <button type="button" class="btn btn-danger btn-lg" onclick="fnGoodsDeleteRow();">행삭제</button>
  81. </li>
  82. <li class="right">
  83. <button type="button" class="btn btnRight btn-base btn-lg" onclick="fnOpenGoodsPopup();">주문상품추가</button>
  84. </li>
  85. </ul>
  86. <div id="gridGoodsList" style="height: 390px;" class="ag-theme-balham lh60"></div>
  87. <!-- //Grid -->
  88. <!-- 버튼 배치 영역 -->
  89. <ul class="panelBar">
  90. <li class="right">
  91. <button type="button" class="btn btn-info btn-lg" id="btnCreateOrderSample">저장</button>
  92. </li>
  93. </ul>
  94. <!-- //버튼 배치 영역 -->
  95. </div>
  96. </div>
  97. <script th:inline="javascript">
  98. /*<![CDATA[*/
  99. var sessRoleCd = [[${sessionInfo.roleCd}]];
  100. var goodsStatList = gagajf.convertToArray([[${goodsStatList}]]);
  101. var formalGbList = gagajf.convertToArray([[${formalGbList}]]);
  102. var seasonList = gagajf.convertToArray([[${seasonList}]]);
  103. var columnDefs = [];
  104. columnDefs = [
  105. {width: 40, minWidth: 40, cellClass: 'text-right', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
  106. {headerName: 'No', width: 60, cellClass: 'text-center',
  107. valueGetter: function(params) { return cfnGridNumner('searchForm',params.node.rowIndex, 'A');}
  108. },
  109. {headerName: "이미지", field: "sysImgNm", width: 100, height: 60, cellClass: 'text-center'
  110. ,cellRenderer: function(params) {
  111. return '<img width="60" src="'+ _goodsUrl+ "/" + params.value + '" alt="" onclick="cfnOpenImagePreViewPopup(\'goodsImgView\', \''+ _goodsUrl+ "/" + params.value +'\')" onerror="this.src=\'/image/no.gif\';"/>';
  112. }
  113. },
  114. {headerName: "상품코드", field: "goodsCd", width: 140, cellClass: 'text-center'},
  115. {headerName: "상품명", field: "goodsNm", width: 200, cellClass: 'text-left'
  116. ,cellRenderer: function(params) {
  117. return '<a href="javascript:void(0);">' + params.value + '</a>';
  118. }
  119. },
  120. {headerName: "구성상품코드", field: "compsGoodsCd", width: 140, cellClass: 'text-center'},
  121. {headerName: "판매가능재고", field: "stockQtySum", width: 120, cellClass: 'text-right',
  122. valueFormatter: function(params) { return params.value.addComma();},
  123. cellStyle : function(params){
  124. if ("00" == params.data.goodsStat || "10" == params.data.goodsStat || "20" == params.data.goodsStat || "30" == params.data.goodsStat) {
  125. return;
  126. }
  127. var color = "";
  128. if (params.value <= 0){
  129. color = '#ff96689c';
  130. }
  131. return { 'background-color': color};
  132. }
  133. },
  134. {
  135. headerName : "주문옵션"
  136. , field : "optCd"
  137. , width : 100
  138. , cellClass : "text-center"
  139. , cellRenderer : function (params) {
  140. var strVal = '';
  141. if (!gagajf.isNull(params.data.optCd2)) {
  142. var optArr = params.data.optCd2.split(',');
  143. strVal += '<select class="optCd2" name="optCd2" goodsCd="' + params.data.goodsCd + '" onchange="fnChangeOption(this)">';
  144. if (gagajf.isNull(params.data.optCd)) {
  145. strVal += '<option value="" selected>선택</option>';
  146. } else {
  147. strVal += '<option value="">선택</option>'
  148. }
  149. $.each(optArr, function (idx, item) {
  150. if (params.data.optCd == item) {
  151. strVal += '<option value="' + item + '" selected>' + item + '</option>';
  152. } else {
  153. strVal += '<option value="' + item + '">' + item + '</option>';
  154. }
  155. });
  156. }
  157. return strVal;
  158. }
  159. },
  160. {headerName: "주문수량", field: "ordQty", width: 100, cellClass: 'text-center', editable : true},
  161. {headerName: "상품상태", field: "goodsStat" , width: 100, cellClass: 'text-center',
  162. cellEditorParams: { values: gagaAgGrid.extractValues(goodsStatList) },
  163. valueFormatter: function (params) { return gagaAgGrid.lookupValue(goodsStatList, params.value); },
  164. valueParser: function (params) { return gagaAgGrid.lookupKey(goodsStatList, params.newValue); }
  165. },
  166. {headerName: "년도", field: "styleYear" , width: 80, cellClass: 'text-center'},
  167. {headerName: "시즌", field: "seasonCd" , width: 80, cellClass: 'text-center',
  168. cellEditorParams: { values: gagaAgGrid.extractValues(seasonList) },
  169. valueFormatter: function (params) { return gagaAgGrid.lookupValue(seasonList, params.value); },
  170. valueParser: function (params) { return gagaAgGrid.lookupKey(seasonList, params.newValue); }
  171. },
  172. {headerName: "정상가", field: "listPrice" , width: 100, cellClass: 'text-right'
  173. ,valueFormatter: function(params) {return params.value.addComma();},
  174. cellEditor: 'textCellEditor',
  175. cellEditorParams: { maxlength: 14, validType: 'numeric'}
  176. },
  177. {headerName: "판매가", field: "currPrice" , width: 100, cellClass: 'text-right'
  178. ,valueFormatter: function(params) {return params.value.addComma();},
  179. cellEditor: 'textCellEditor',
  180. cellEditorParams: { maxlength: 14, validType: 'numeric'}
  181. },
  182. /*{headerName: "할인율", field: "dcRate" , width: 90, cellClass: 'text-right'},*/
  183. {headerName: "가격변경일", field: "priceUpdDt", width: 150, cellClass: 'text-center',
  184. cellRenderer: function(params) {
  185. return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
  186. }
  187. },
  188. {headerName: "ERP재고연동여부", field: "erpStockLinkYn", width: 120, cellClass: 'text-center'},
  189. {headerName: "이월구분", field: "formalGb", width: 100, cellClass: 'text-center',
  190. cellEditorParams: { values: gagaAgGrid.extractValues(formalGbList) },
  191. valueFormatter: function (params) { return gagaAgGrid.lookupValue(formalGbList, params.value); },
  192. valueParser: function (params) { return gagaAgGrid.lookupKey(formalGbList, params.newValue); }
  193. },
  194. {headerName: "반품가능", field: "returnableYn" , width: 90, cellClass: 'text-center'},
  195. {headerName: "등록일시", field: "regDt", width: 150, cellClass: 'text-center',
  196. cellRenderer: function(params) {
  197. return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
  198. }
  199. },
  200. {headerName: "등록자", field: "regNm" , width: 100, cellClass: 'text-center'},
  201. {headerName: "수정일시", field: "updDt", width: 150, cellClass: 'text-center',
  202. cellRenderer: function(params) {
  203. return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
  204. }
  205. },
  206. {headerName: "수정자", field: "updNm" , width: 100, cellClass: 'text-center'}
  207. ];
  208. // Get GridOptions
  209. var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
  210. // 중복 선택 가능
  211. gridOptions.rowSelection = 'multiple';
  212. gridOptions.suppressRowClickSelection = true;
  213. gridOptions.rowHeight = 60; //이미지가 있을경우 높이 지정해야함.
  214. gridOptions.getRowStyle = function(params) {
  215. if ("G008_00" == params.data.goodsStat || "G008_10" == params.data.goodsStat || "G008_20" == params.data.goodsStat || "G008_30" == params.data.goodsStat) {
  216. return { background: '#23c6c8' };
  217. }
  218. }
  219. // 주문수량 변경 이벤트
  220. gridOptions.onCellValueChanged = function(event) {
  221. let ordQty = event.data.ordQty;
  222. if (event.colDef.field == "ordQty" && event.data.ordQty > event.data.stockQtySum) {
  223. ordQty = event.data.stockQtySum;
  224. mcxDialog.alert('주문수량이 판매가능재고보다 클 수 없습니다.');
  225. }
  226. gridOptions.api.forEachNode(function(rowNode, index) {
  227. if (event.data.goodsCd == rowNode.data.goodsCd){
  228. rowNode.data.ordQty = ordQty;
  229. gridOptions.api.updateRowData({update: [rowNode.data]});
  230. }
  231. });
  232. }
  233. //상품조회 팝업
  234. var fnOpenGoodsPopup = function() {
  235. cfnOpenGoodsPopup('fnFetchGoods');
  236. }
  237. // 상품추가
  238. var fnFetchGoods = function(goodsData) {
  239. if (goodsData.length < 1) return;
  240. // 기존상품
  241. var oldGoodsSetList = gagaAgGrid.getAllRowData(gridOptions);
  242. var index = oldGoodsSetList.length+1;
  243. var arrGoodsCd = [];
  244. $.each(goodsData, function(idx, item) {
  245. arrGoodsCd.push(item.goodsCd);
  246. })
  247. var isExist = false;
  248. var jsonData = JSON.stringify(arrGoodsCd);
  249. gagajf.ajaxJsonSubmit('/order/sample/goods/info', jsonData, function(result) {
  250. $.each(result, function(idx, item) {
  251. isExist = false;
  252. gridOptions.api.forEachNode(function(rowNode, index) {
  253. //중복상품 여부 확인
  254. if (item.goodsCd == rowNode.data.goodsCd){
  255. isExist = true;
  256. }
  257. });
  258. if(!isExist){
  259. var data = {
  260. no: index
  261. , sysImgNm : item.sysImgNm
  262. , goodsCd : item.goodsCd
  263. , compsGoodsCd : item.repGoodsCd
  264. , goodsNm : item.goodsNm
  265. , ordQty : 1
  266. , optCd2 : item.siteCd
  267. , stockQtySum : item.stockQtySum
  268. , goodsStat : item.goodsStat
  269. , styleYear : item.styleYear
  270. , seasonCd : item.seasonCd
  271. , listPrice : item.listPrice
  272. , currPrice : item.currPrice
  273. , priceUpdDt : item.priceUpdDt
  274. , erpStockLinkYn : item.erpStockLinkYn
  275. , formalGb : item.formalGb
  276. , returnableYn : item.returnableYn
  277. , regDt : item.regDt
  278. , regNm : item.regNm
  279. , updDt : item.updDt
  280. , updNm : item.updNm
  281. };
  282. //그리드 마지막에 추가해야함
  283. gridOptions.api.updateRowData({add: [data], addIndex: idx});
  284. gridOptions.api.refreshCells();
  285. index++;
  286. }
  287. });
  288. });
  289. }
  290. //상품삭제
  291. var fnGoodsDeleteRow = function() {
  292. var selectedData = gagaAgGrid.selectedRowData(gridOptions);
  293. if (selectedData.length == 0) {
  294. mcxDialog.alert('선택된 행이 없습니다.');
  295. return;
  296. }
  297. //화면에서 삭제
  298. gagaAgGrid.removeRowData(gridOptions, false);
  299. }
  300. // 저장
  301. $('#btnCreateOrderSample').on('click', function() {
  302. // 입력 값 체크
  303. let selectedData = gagaAgGrid.selectedRowData(gridOptions);
  304. if (selectedData.length == 0) {
  305. mcxDialog.alert('선택된 행이 없습니다.');
  306. return;
  307. }
  308. let optChk = true;
  309. let qtyChk = true;
  310. $.each(selectedData, function(idx, item) {
  311. if (gagajf.isNull(item.optCd)) {
  312. optChk = false;
  313. } else if (item.ordQty <= 0) {
  314. qtyChk = false;
  315. }
  316. });
  317. if (!optChk) {
  318. mcxDialog.alert('주문옵션이 없습니다.');
  319. return false;
  320. }
  321. if (!qtyChk) {
  322. mcxDialog.alert('주문수량은 0보다 커야 됩니다.');
  323. return false;
  324. }
  325. mcxDialog.confirm("저장하시겠습니까?", {
  326. cancelBtnText: "취소",
  327. sureBtnText: "확인",
  328. sureBtnClick: function() {
  329. let params = {};
  330. params.custNo = $('#custNo').val();
  331. params.ordNm = $('#ordNm').val();
  332. params.ordPhnno = $('#ordPhnno').val();
  333. params.ordEmail = $('#ordEmail').val();
  334. params.recipZipcode = $('#recipZipcode').val();
  335. params.recipBaseAddr = $('#recipBaseAddr').val();
  336. params.recipDtlAddr = $('#recipDtlAddr').val();
  337. params.goods = selectedData;
  338. let jsonData = JSON.stringify(params);
  339. gagajf.ajaxJsonSubmit($('#orderSamplePopupForm').prop('action'), jsonData, function(result) {
  340. uifnPopupClose('popupOrderSample');
  341. });
  342. }
  343. });
  344. });
  345. // 회원정보 적용
  346. var fnApplyCustomerInfo = function() {
  347. var params = {};
  348. params.searchGb = 'custNo';
  349. params.searchTxt = $('#orderSamplePopupForm input[name=custNo]').val();
  350. var jsonData = JSON.stringify(params);
  351. gagajf.ajaxJsonSubmit('/customer/active/list', jsonData, function(result) {
  352. let param = result[0];
  353. $('#ordNm').val(param.custNm);
  354. $('#ordPhnno').val(param.cellPhnno);
  355. $('#ordEmail').val(param.email);
  356. $('#recipZipcode').val(param.homeZipcode);
  357. $('#recipBaseAddr').val(param.homeBaseAddr);
  358. $('#recipDtlAddr').val(param.homeDtlAddr);
  359. });
  360. }
  361. var fnOpenDaumAddr = function() {
  362. let daumZip = new daum.Postcode({
  363. oncomplete: function(data) {
  364. // 우편번호와 주소 정보를 해당 필드에 넣는다.
  365. $('#orderSamplePopupForm input[name=recipZipcode]').val(data.zonecode);
  366. $('#orderSamplePopupForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
  367. $('#orderSamplePopupForm input[name=recipDtlAddr]').focus();
  368. cfnCloseDaumAddr();
  369. },
  370. width: '100%'
  371. });
  372. cfnOpenDaumAddr(daumZip);
  373. }
  374. var fnChangeOption = function(param) {
  375. var params = {};
  376. params.goodsCd = $(param).attr('goodsCd');
  377. params.siteCd = $(param).val();
  378. var jsonData = JSON.stringify(params);
  379. gagajf.ajaxJsonSubmit('/order/sample/goods/stock', jsonData, function(result) {
  380. gridOptions.api.forEachNode(function(rowNode, index) {
  381. if (result.goodsCd == rowNode.data.compsGoodsCd){
  382. rowNode.data.stockQtySum = result.minOrdQty;
  383. console.log(result);
  384. rowNode.data.optCd = result.siteCd;
  385. gridOptions.api.updateRowData({update: [rowNode.data]});
  386. }
  387. });
  388. });
  389. }
  390. $(document).ready(function() {
  391. gagaAgGrid.createGrid('gridGoodsList', gridOptions);
  392. });
  393. /*]]>*/
  394. </script>
  395. </html>