dev-manhph1-add-pagination-28

pages/ems/base/PastRsltDataReadPage.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="l-layout">
-		<CommonPageTitle/>
+		<CommonPageTitle />
 
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
@@ -16,7 +16,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
-							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12"/>
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'" :textCols="12" />
 						</v-col>
 						<v-col :cols="3" class="d-flex align-end justify-end text-right">
 							<BtnExcelDownload class="mr-1" :parentPrgmId="myPrgmId" :gridName="gridName" type="primary"
@@ -35,13 +35,8 @@
 							:parentPrgmId="myPrgmId" />
 					</div>
 					<div class="d-flex align-center justify-space-between">
-						<pagination
+						<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-							id="pagination"
+							@loadData="changeGrid" />
-							:total-count="totalCount"
-							:page-num="page"
-							:limit="limit"
-							@loadData="changeGrid"
-						/>
 					</div>
 				</v-card>
 			</v-col>
@@ -297,6 +292,7 @@ export default {
 			this.loadGrid = false;
 
 			let res = [];
+			let res2 = [];
 			let yearQuarterData = [];
 			yearQuarterData = this.yearQuarterMaker([
 				this.pageData.fromDt,
@@ -349,10 +345,17 @@ export default {
 					resKey: 'pastRsltReadData',
 					sendParam: sendParams,
 					limit: this.limit,
-						page: this.page,
+					page: this.page,
-						offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				});
 
+				res2 = await this.postApiReturn({
+					apiKey: 'selectTagRawDataByQuarterPageTotal',
+					resKey: 'pastRslPageTotal',
+					sendParam: sendParams
+				});
+				this.totalCount = res2[0].totalcount;
+
 				this.setGridData({
 					gridKey: this.gridName,
 					value: res,
@@ -364,8 +367,8 @@ export default {
 					toDt: this.pageData.toDt,
 					yearQuarterList: yearQuarterData['yearQuarterList'],
 					limit: this.limit,
-						page: this.page,
+					page: this.page,
-						offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				};
 				sendParams['tagId'] = this.pageData.tagId;
 				//
@@ -383,6 +386,13 @@ export default {
 					sendParam: sendParams,
 				});
 
+				res2 = await this.postApiReturn({
+					apiKey: 'selectTagRawDataByQuarterPageTotal',
+					resKey: 'pastRslPageTotal',
+					sendParam: sendParams
+				});
+				this.totalCount = res2[0].totalcount;
+
 				this.setGridData({
 					gridKey: this.gridName,
 					value: res,
@@ -460,7 +470,7 @@ export default {
 			finalResult['yearQuarterList'] = result;
 			return finalResult;
 		},
-		changeGrid: async function(pageNum, limit) {
+		changeGrid: async function (pageNum, limit) {
 			this.page = pageNum;
 			this.limit = limit;
 

store/modules/list.js

@@ -669,7 +669,8 @@ const INIT_URL_STATE = {
 	// prgmId : PRG0052 과거 검침 데이터 조회
 	selectTagRawDataByQuarter:
 		'ems/base/PastRsltDataReadCtr/selectTagRawDataByQuarter',
-
+	selectTagRawDataByQuarterPageTotal:
+		'ems/base/PastRsltDataReadCtr/selectTagRawDataByQuarterPageTotal',
 	// prgmId : PRG4107 개인화 대시보드
 	selectIndvWidgetList: 'ems/base/DashboardHfemsCtr/selectIndvWidgetList',
 	selectEnergyUseReadHourAddup: