diff --git a/assets/scss/common/grid.scss b/assets/scss/common/grid.scss index f6c637a..bb34e53 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; } } @@ -406,7 +406,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..9633561 100644 --- a/pages/comm/base/BatchLogMngPage.vue +++ b/pages/comm/base/BatchLogMngPage.vue @@ -67,6 +67,10 @@ @getRowsData="getRowData" /> +
+ +
@@ -105,6 +109,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 +138,7 @@ export default { BtnSearch, BtnExcelDownload, Buttons, + pagination, }, data() { return { @@ -141,6 +147,11 @@ export default { gridName: 'rowGrid', // rowGridOrigin: [], detailList: myDetail, + itemsPerPage: 10, + itemsPerPageArray: [10, 20, 30], + limit: 20, + page: 1, + totalCount: 0, }; }, computed: { @@ -161,7 +172,10 @@ export default { }, watch: { chkIsFind(val) { - if (val) this.search(); + if (val) { + this.page = 1; + this.search(); + } }, chkExecRsltCd() { this.setPageData({ isFind: true }); @@ -197,16 +211,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 +232,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 +265,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 +287,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 +300,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 +336,7 @@ export default { }); this.$nextTick(() => { + this.loadGrid = true; if (newRes.length > 0) { this.$refs[this.gridName].focus({ rowKey: this.chkRowGridSelectKey || 0, @@ -361,6 +396,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',