DailyTradingForm.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : DailyTradingForm.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.08.31 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="@{'/statistics/daily/trading/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>발생일<i class="required" title="필수" aria-hidden="true"></i></th>
  36. <td id="terms">
  37. <span class="nowrap">
  38. <input name="startDt" id="startDt" type="text" class="w80 schDate" maxlength="8" required="required" data-valid-name="발생시작일"/>
  39. ~
  40. <input name="endDt" id="endDt" type="text" class="w80 schDate" maxlength="8" required="required" data-valid-name="발생종료일"/>
  41. </span>
  42. <button type="button" class="btn btn-default btn-sm btnToday" onclick="gagajf.setDate('#terms', 'startDt', 'endDt', 't');">오늘</button>
  43. <button type="button" class="btn btn-default btn-sm btnYesterday" onclick="gagajf.setDate('#terms', 'startDt', 'endDt', 'y');">어제</button>
  44. <button type="button" class="btn btn-default btn-sm" onclick="gagajf.setDate('#terms', 'startDt', 'endDt', '7d');">최근한주</button>
  45. <button type="button" class="btn btn-default btn-sm" onclick="gagajf.setDate('#terms', 'startDt', 'endDt', 'tw');">이번주</button>
  46. <button type="button" class="btn btn-default btn-sm" onclick="gagajf.setDate('#terms', 'startDt', 'endDt', 'pw');">지난주</button>
  47. <span class="infoTxt cRed marL10"><i class="fa fa-info-circle" aria-hidden="true"></i>(일주일 한도)</span>
  48. <!-- <input type="text" class="schDate w80" name="occurDt" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}" required="required" data-valid-type="calendar" data-valid-name="발생일"/> -->
  49. </td>
  50. </tr>
  51. </table>
  52. <ul class="panelBar">
  53. <li class="center">
  54. <button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
  55. </li>
  56. </ul>
  57. </form>
  58. </div>
  59. <!-- 검색조건 영역 -->
  60. <!-- 리스트 영역 -->
  61. <div class="panelStyle">
  62. <!-- 버튼 배치 영역 -->
  63. <ul class="panelBar">
  64. <li class="left">
  65. <span class="infoTxt cBlue">* 항목 설명</span>
  66. <!-- 아이콘 툴팁 -->
  67. <div class="iconTooltip marL10">
  68. <i class="fa fa-info" aria-hidden="true"></i>
  69. <span class="left" style="width: 600px;">
  70. <strong>1.판매구분</strong>: 판매, 취소, 품절, 반품, 교환<br/>
  71. <strong>2.판매금액</strong>: 판매가 * 판매수량<br/>
  72. <strong>3.쿠폰할인금액</strong>: 즉시할인쿠폰금액 + 상품쿠폰할인금액 <br/>
  73. <strong>4.수수료</strong>: 실판매금액(쿠폰할인금액과 다다익선할인금액만 차감. 포인트와 상품권은 포함) * 판매수수료율(%)<br/>
  74. </span>
  75. </div>
  76. <!-- //아이콘 툴팁 -->
  77. </li>
  78. <li class="right">
  79. <button type="button" class="btn btn-default btn-lg" id="btnExcel">엑셀다운로드</button>
  80. </li>
  81. </ul>
  82. <!-- //버튼 배치 영역 -->
  83. <div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
  84. </div>
  85. <!-- //리스트 영역 -->
  86. </div>
  87. <script th:inline="javascript">
  88. /*<![CDATA[*/
  89. let columnDefs = [
  90. { headerName: "주문번호", field: "ordNo", width: 100, cellClass: 'text-center' },
  91. { headerName: "주문상세번호", field: "ordDtlNo", width: 150, cellClass: 'text-center' },
  92. { headerName: "판매구분", field: "sellGb", width: 80, cellClass: 'text-center' },
  93. { headerName: "몰구분", field: "mallGbNm", width: 100, cellClass: 'text-center' },
  94. { headerName: "제휴몰주문번호", field: "extmallOrderId", width: 150, cellClass: 'text-center' },
  95. { headerName: "제휴몰명", field: "extmallNm", width: 150, cellClass: 'text-center' },
  96. { headerName: "상위제휴채널", field: "afChannelNm", width: 150, cellClass: 'text-center' },
  97. { headerName: "제휴채널", field: "afLinkNm", width: 150, cellClass: 'text-center' },
  98. { headerName: "유통구분", field: "distributionGbNm", width: 100, cellClass: 'text-center'},
  99. { headerName: "공급업체", field: "supplyCompNm", width: 150, cellClass: 'text-center' },
  100. { headerName: "공급벤더", field: "supplyVendorNm", width: 150, cellClass: 'text-center' },
  101. { headerName: "주문일시", field: "ordDt", width: 150, cellClass: 'text-center' },
  102. { headerName: "발생일시", field: "occurDt", width: 150, cellClass: 'text-center' },
  103. { headerName: "브랜드", field: "brandEnm", width: 100, cellClass: 'text-center' },
  104. { headerName: "상품코드", field: "goodsCd", width: 120, cellClass: 'text-center' },
  105. { headerName: "상품명", field: "goodsNm", width: 300 },
  106. { headerName: "단품코드", field: "itemCd", width: 120, cellClass: 'text-center' },
  107. { headerName: "옵션1", field: "optCd1", width: 100, cellClass: 'text-center' },
  108. { headerName: "옵션2", field: "optCd2", width: 100, cellClass: 'text-center' },
  109. {
  110. headerName: "품목", field: "itemkindNm", width: 200,
  111. cellRenderer: function (params) { return gagajf.isNull(params.value) ? '' : params.value.replaceAll('&gt;','>'); }
  112. },
  113. { headerName: "품목1", field: "itemkindNm1", width: 100 },
  114. { headerName: "품목2", field: "itemkindNm2", width: 100 },
  115. { headerName: "품목3", field: "itemkindNm3", width: 100 },
  116. { headerName: "품목4", field: "itemkindNm4", width: 100 },
  117. {
  118. headerName: "판매가", field: "sellPrice", width: 100, cellClass: 'text-right',
  119. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  120. },
  121. {
  122. headerName: "판매수량", field: "sellQty", width: 100, cellClass: 'text-center',
  123. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); },
  124. cellStyle : function(params) { if (Number(params.value) < 0) return { 'color' : 'red' } }
  125. },
  126. {
  127. headerName: "판매금액", field: "sellAmt", width: 100, cellClass: 'text-right',
  128. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); },
  129. cellStyle : function(params) { if (Number(params.value) < 0) return { 'color' : 'red' } }
  130. },
  131. {
  132. headerName: "쿠폰할인금액", field: "cpnDcAmt", width: 120, cellClass: 'text-right',
  133. valueGetter: function (params) { return gagaAgGrid.toAddComma(params.data.cpn1DcAmt + params.data.goodsCpnDcAmt); }
  134. },
  135. {
  136. headerName: "즉시사용쿠폰금액", field: "cpn1DcAmt", width: 120, cellClass: 'text-right',
  137. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  138. },
  139. {
  140. headerName: "상품쿠폰사용금액", field: "goodsCpnDcAmt", width: 120, cellClass: 'text-right',
  141. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  142. },
  143. {
  144. headerName: "주문서쿠폰사용금액", field: "cartCpnDcAmt", width: 130, cellClass: 'text-right',
  145. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  146. },
  147. {
  148. headerName: "포인트사용금액", field: "pntDcAmt", width: 120, cellClass: 'text-right',
  149. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  150. },
  151. {
  152. headerName: "다다익선할인금액", field: "tmtbDcAmt", width: 120, cellClass: 'text-right',
  153. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  154. },
  155. {
  156. headerName: "자사다다익선분담액", field: "selfTmtbDcAmt", width: 150, cellClass: 'text-right',
  157. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  158. },
  159. {
  160. headerName: "입점다다익선분담액", field: "supplyCompTmtbDcAmt", width: 150, cellClass: 'text-right',
  161. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  162. },
  163. {
  164. headerName: "상품권사용금액", field: "gfcdUseAmt", width: 120, cellClass: 'text-right',
  165. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  166. },
  167. {
  168. headerName: "자사쿠폰분담액", field: "selfCpnDcAmt", width: 120, cellClass: 'text-right',
  169. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  170. },
  171. {
  172. headerName: "입점쿠폰분담액", field: "supplyCompCpnDcAmt", width: 120, cellClass: 'text-right',
  173. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  174. },
  175. {
  176. headerName: "실판매가", field: "realSellPrice", width: 100, cellClass: 'text-right',
  177. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); }
  178. },
  179. {
  180. headerName: "실판매금액", field: "realSellAmt", width: 100, cellClass: 'text-right',
  181. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); },
  182. cellStyle : function(params) { if (Number(params.value) < 0) return { 'color' : 'red' } }
  183. },
  184. {
  185. headerName: "수수료율(%)", field: "sellFeeRate", width: 120, cellClass: 'text-center',
  186. cellRenderer: function (params) { return gagajf.isNull(params.value) ? '' : params.value + '%'; }
  187. },
  188. {
  189. headerName: "수수료", field: "sellFeeAmt", width: 100, cellClass: 'text-right',
  190. cellRenderer: function (params) { return gagaAgGrid.toAddComma(params.value); },
  191. cellStyle : function(params) { if (Number(params.value) < 0) return { 'color' : 'red' } }
  192. },
  193. { headerName: "담당MD", field: "mdNm", width: 100, cellClass: 'text-center' },
  194. ];
  195. let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
  196. // 검색
  197. $('#btnSearch').on('click', function() {
  198. // 입력 값 체크
  199. if (!gagajf.validation($('#searchForm')))
  200. return false;
  201. var fromDate = $('#searchForm input[name=startDt]').val().toDate('YYYY-MM-DD');
  202. var toDate = $('#searchForm input[name=endDt]').val().toDate('YYYY-MM-DD');
  203. if (fromDate > toDate) {
  204. mcxDialog.alert("시작일자는 종료일자 보다 클 수 없습니다.");
  205. $('#searchForm input[name=endDt]').focus();
  206. return false;
  207. }
  208. var iDays = Math.ceil((toDate - fromDate) / (60 * 60 * 24 * 1000));
  209. if (iDays >= 7) {
  210. mcxDialog.alert("최대 7일까지 조회할 수 있습니다.");
  211. return;
  212. }
  213. gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm', fnCreateTotal);
  214. });
  215. // 합계 생성
  216. var fnCreateTotal = function() {
  217. // var sellPrice = 0; // 판매가
  218. var sellQty = 0; // 판매수량
  219. var sellAmt = 0; // 판매금액
  220. var cpnDcAmt = 0; // 쿠폰할인금액
  221. var cpn1DcAmt = 0; // 즉시사용쿠폰금액
  222. var goodsCpnDcAmt = 0; // 상품쿠폰사용금액
  223. var cartCpnDcAmt = 0; // 주문서쿠폰사용금액
  224. var pntDcAmt = 0; // 포인트사용금액
  225. var tmtbDcAmt = 0; // 다다익선할인금액
  226. var selfTmtbDcAmt = 0; // 자사다다익선분담액
  227. var supplyCompTmtbDcAmt = 0; // 입점다다익선분담액
  228. var gfcdUseAmt = 0; // 상품권사용금액
  229. var selfCpnDcAmt = 0; // 자사쿠폰분담액
  230. var supplyCompCpnDcAmt = 0; // 입점쿠폰분담액
  231. var realSellPrice = 0; // 실판매가
  232. var realSellAmt = 0; // 실판매금액
  233. var sellFeeAmt = 0; // 수수료
  234. var settleAmt = 0; // 정산대상액
  235. gridOptions.api.forEachNode(function(rowNode, index) {
  236. if (!rowNode.group) {
  237. // if (typeof rowNode.data.sellPrice =='number') { sellPrice += rowNode.data.sellPrice; }
  238. if (typeof rowNode.data.sellQty =='number') { sellQty += rowNode.data.sellQty; }
  239. if (typeof rowNode.data.sellAmt =='number') { sellAmt += rowNode.data.sellAmt; }
  240. if (typeof rowNode.data.cpnDcAmt =='number') { cpnDcAmt += rowNode.data.cpnDcAmt; }
  241. if (typeof rowNode.data.cpn1DcAmt =='number') { cpn1DcAmt += rowNode.data.cpn1DcAmt; }
  242. if (typeof rowNode.data.goodsCpnDcAmt =='number') { goodsCpnDcAmt += rowNode.data.goodsCpnDcAmt; }
  243. if (typeof rowNode.data.cartCpnDcAmt =='number') { cartCpnDcAmt += rowNode.data.cartCpnDcAmt; }
  244. if (typeof rowNode.data.pntDcAmt =='number') { pntDcAmt += rowNode.data.pntDcAmt; }
  245. if (typeof rowNode.data.tmtbDcAmt =='number') { tmtbDcAmt += rowNode.data.tmtbDcAmt; }
  246. if (typeof rowNode.data.selfTmtbDcAmt =='number') { selfTmtbDcAmt += rowNode.data.selfTmtbDcAmt; }
  247. if (typeof rowNode.data.supplyCompTmtbDcAmt =='number') { supplyCompTmtbDcAmt += rowNode.data.supplyCompTmtbDcAmt; }
  248. if (typeof rowNode.data.gfcdUseAmt =='number') { gfcdUseAmt += rowNode.data.gfcdUseAmt; }
  249. if (typeof rowNode.data.selfCpnDcAmt =='number') { selfCpnDcAmt += rowNode.data.selfCpnDcAmt; }
  250. if (typeof rowNode.data.supplyCompCpnDcAmt =='number') { supplyCompCpnDcAmt += rowNode.data.supplyCompCpnDcAmt; }
  251. if (typeof rowNode.data.realSellPrice =='number') { realSellPrice += rowNode.data.realSellPrice; }
  252. if (typeof rowNode.data.realSellAmt =='number') { realSellAmt += rowNode.data.realSellAmt; }
  253. if (typeof rowNode.data.sellFeeAmt =='number') { sellFeeAmt += rowNode.data.sellFeeAmt; }
  254. if (typeof rowNode.data.settleAmt =='number') { settleAmt += rowNode.data.settleAmt; }
  255. }
  256. });
  257. var data = {
  258. ordNo: null, ordDtlNo: null, sellGb: null,
  259. mallGbNm: null, extmallOrderId: null, extmallNm: null,
  260. afChannelNm: null, afLinkNm: null,
  261. distributionGbNm: null, supplyCompNm: null, supplyVendorNm: null,
  262. ordDt: null, occurDt: null,
  263. brandEnm: null, goodsCd: null, goodsNm: null, itemCd: null, optCd1: null, optCd2: null,
  264. itemkindNm: null, itemkindNm1: null, itemkindNm2: null, itemkindNm3: null, itemkindNm4: '합계',
  265. // sellPrice: sellPrice,
  266. sellPrice: null,
  267. sellQty: sellQty, sellAmt: sellAmt,
  268. cpnDcAmt: cpnDcAmt, cpn1DcAmt: cpn1DcAmt, goodsCpnDcAmt: goodsCpnDcAmt, cartCpnDcAmt: cartCpnDcAmt,
  269. pntDcAmt: pntDcAmt, tmtbDcAmt: tmtbDcAmt, selfTmtbDcAmt: selfTmtbDcAmt, supplyCompTmtbDcAmt: supplyCompTmtbDcAmt,
  270. gfcdUseAmt: gfcdUseAmt, selfCpnDcAmt: selfCpnDcAmt, supplyCompCpnDcAmt: supplyCompCpnDcAmt,
  271. realSellPrice: realSellPrice, realSellAmt: realSellAmt,
  272. sellFeeRate: null, sellFeeAmt: sellFeeAmt, settleAmt: settleAmt,
  273. mdNm: null
  274. };
  275. gagaAgGrid.setPinnedRowData(gridOptions, data, 'top');
  276. }
  277. // 엑셀다운로드
  278. $('#btnExcel').on('click', function() {
  279. gagaAgGrid.exportToExcel('일일거래내역', gridOptions);
  280. });
  281. $(document).ready(function() {
  282. gagajf.setDate('#terms', 'startDt', 'endDt', 't');
  283. // Create a agGrid
  284. gagaAgGrid.createGrid('gridList', gridOptions);
  285. });
  286. /*]]>*/
  287. </script>
  288. </html>