From 9a42291cf4cd706242f48ac64003931d05c7eff1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pham=20Hoang=20Manh/=28Pham=20Hoang=20Manh=29/=ED=98=84?= =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074606@skcc.com> Date: Thu, 14 Aug 2025 15:50:01 +0900 Subject: [PATCH] add paging for page 38 --- assets/scss/common/grid.scss | 4 +- pages/comm/base/BatchLogMngPage.vue | 120 +++++++++++++++------------- store/modules/list.js | 1 + 3 files changed, 69 insertions(+), 56 deletions(-) diff --git a/assets/scss/common/grid.scss b/assets/scss/common/grid.scss index 095009b..5f3e86e 100644 --- a/assets/scss/common/grid.scss +++ b/assets/scss/common/grid.scss @@ -25,7 +25,7 @@ .tui-grid-header-area, .tui-grid-summary-area { - margin-right: $scrollbar-width; + margin-right: $scrollbar-width !important; } } @@ -358,7 +358,7 @@ &-header-area { // background-color: none; border: none; - margin-right: 0 !important; + // margin-right: 0 !important; background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-backgroundColor" diff --git a/pages/comm/base/BatchLogMngPage.vue b/pages/comm/base/BatchLogMngPage.vue index e6e3115..facf4e3 100644 --- a/pages/comm/base/BatchLogMngPage.vue +++ b/pages/comm/base/BatchLogMngPage.vue @@ -7,41 +7,21 @@ - + - + - + - +
@@ -59,14 +39,13 @@ 배치 리스트
- +
+
+ +
@@ -78,12 +57,8 @@
- +
@@ -105,6 +80,7 @@ import Buttons from '~/components/common/button/Buttons'; import Grid from '~/components/common/Grid'; import Form from '~/components/common/form/Form'; import Utility from '~/plugins/utility'; +import pagination from '~/components/common/Pagination'; let myTitle; let myPrgmId; @@ -133,6 +109,7 @@ export default { BtnSearch, BtnExcelDownload, Buttons, + pagination, }, data() { return { @@ -141,6 +118,11 @@ export default { gridName: 'rowGrid', // rowGridOrigin: [], detailList: myDetail, + itemsPerPage: 10, + itemsPerPageArray: [10, 20, 30], + limit: 20, + page: 1, + totalCount: 0, }; }, computed: { @@ -161,7 +143,10 @@ export default { }, watch: { chkIsFind(val) { - if (val) this.search(); + if (val) { + this.page = 1; + this.search(); + } }, chkExecRsltCd() { this.setPageData({ isFind: true }); @@ -197,16 +182,15 @@ export default { // chkOpenTabList: "chkOpenTabList" // }), init() { - // this.layoutInit(); + this.layoutInit(); this.gridInit(); }, - // layoutInit() { - // const searchFilterHeight = this.$refs.searchFilter.offsetHeight; - // this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`; - // }, + layoutInit() { + this.$refs.contents.style.height = 'auto'; + }, gridInit() { this.loadGrid = false; - const gridHeight = this.$refs.gridParent.offsetHeight - 30; + const gridHeight = this.$refs.gridParent.offsetHeight; const myOptions = { scrollX: false, @@ -219,10 +203,10 @@ export default { const _this = this; const myColumns = [ - { header: 'No.', name: 'batchLogSeq', align: 'right', width: 100 }, - { header: '배치ID', name: 'batchId', align: 'right', width: 100 }, + { header: 'No.', name: 'batchLogSeq', align: 'right', width: 90 }, + { header: '배치ID', name: 'batchId', align: 'right', width: 90 }, { header: '배치명', name: 'batchNm', align: 'left', width: 150 }, - { header: '실행 일자', name: 'execDt', align: 'right', width: 80 }, + { header: '실행 일자', name: 'execDt', align: 'right', width: 70 }, { header: '실행 결과', name: 'execRsltCd', @@ -252,9 +236,9 @@ export default { align: 'center', width: 160, }, - { header: '등록자NO', name: 'regUserNo', width: 120 }, + { header: '등록자NO', name: 'regUserNo', width: 100 }, { header: '등록일시', name: 'regDttm', align: 'center', width: 160 }, - { header: '수정자NO', name: 'procUserNo', width: 120 }, + { header: '수정자NO', name: 'procUserNo', width: 100 }, { header: '수정일시', name: 'procDttm', align: 'center', width: 160 }, ]; @@ -274,6 +258,11 @@ export default { }); }, async getRowGridData() { + this.loadGrid = false; + // this.setGridData({ + // gridKey: this.gridName, + // value: [], + // }); const res = await this.postApiReturn({ apiKey: 'selectBatchLog', resKey: 'batchLogData', @@ -282,8 +271,24 @@ export default { batchNm: this.pageData.batchNm, // 검색키워드: 배치명 execRsltCd: this.pageData.execRsltCd, //배치 실행 결과 fromDt: this.pageData.fromDt, + limit: this.limit, + page: this.page, + offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨 }, }); + + const res2 = await this.postApiReturn({ + apiKey: 'selectBatchLogPageTotal', + resKey: 'batchLogPageTotal', + sendParam: { + batchId: this.pageData.batchId, // 검색키워드: 배치ID + batchNm: this.pageData.batchNm, // 검색키워드: 배치명 + execRsltCd: this.pageData.execRsltCd, //배치 실행 결과 + fromDt: this.pageData.fromDt, + }, + }); + this.totalCount = res2[0].totalcount; + const newRes = res.map(item => { const newObj = { ...item, @@ -302,6 +307,7 @@ export default { }); this.$nextTick(() => { + this.loadGrid = true; if (newRes.length > 0) { this.$refs[this.gridName].focus({ rowKey: this.chkRowGridSelectKey || 0, @@ -361,6 +367,12 @@ export default { } return retVal; }, + changeGrid: async function (pageNum, limit) { + this.page = pageNum; + this.limit = limit; + + this.search(); + }, }, }; diff --git a/store/modules/list.js b/store/modules/list.js index 3010f05..cbaf031 100644 --- a/store/modules/list.js +++ b/store/modules/list.js @@ -281,6 +281,7 @@ const INIT_URL_STATE = { // prgmId: "PRG0020" 배치로그 selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그 + selectBatchLogPageTotal: 'comm/base/BatchLogCtr/selectBatchLogPageTotal', // 배치 로그 // prgmId: "PRG0017" 검침개소 기간별 비교 selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime',