add paging for page 38

Reviewed-on: #58

assets/images/SwapRight.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="black" fill-opacity="0.45"/>
+</svg>

assets/images/SwapRight_Dark.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="white" fill-opacity="0.45"/>
+</svg>

assets/scss/common.scss

@@ -954,6 +954,7 @@ a {
         & th,
         & td {
           height: 48px;
+          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
         }
       }
 

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"

components/common/Datepicker.vue

@@ -23,14 +23,14 @@
 						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template> -->
 					<template v-slot:append>
-						<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
 					</template>
 				</v-text-field>
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
-					<img :src="arrowIcon" alt="">
+					<img :src="arrowIcon">
 				</div>
 				<v-text-field
 					v-show="isRange"
@@ -43,7 +43,9 @@
 					outlined
 				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -212,9 +214,9 @@ export default {
 		},
 		arrowIcon() {
 			if(this.isDarkMode){
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {

components/common/DatepickerTopView.vue

@@ -5,10 +5,7 @@
 				<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
 					>mdi-record-circle</v-icon
 				> -->
-				<v-icon
+				<v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
-					small
-					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
-					>
 					$icoBulletPoint
 				</v-icon>
 				{{ label }}
@@ -16,17 +13,11 @@
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
 			<div class="datepicker-container">
-				<v-text-field
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
-					id="startpicker"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					ref="startpicker"
+					outlined>
-					v-model="fromDtValue"
+					<template v-slot:append>
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
+						<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
-					:hide-details="true"
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -36,18 +27,13 @@
 				<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
-					v-show="isRange"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					id="endpicker"
+					outlined>
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -91,9 +77,9 @@ export default {
 			require: false,
 			default: false,
 		},
-		isRangeOption:{
+		isRangeOption: {
-			type:Boolean,
+			type: Boolean,
-			require:false,
+			require: false,
 			default: true
 		}
 	},
@@ -177,21 +163,23 @@ export default {
 				this.myOptions.viewFormat,
 			);
 		},
-		toDtChange(){
+		toDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
+				isCheck: this.searchParam.isCheck,
-				toDt : Utility.setFormatDate(
+				toDt: Utility.setFormatDate(
-				this.searchParam.toDt,
+					this.searchParam.toDt,
-				this.myOptions.viewFormat,
+					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
-		fromDtChange(){
+		fromDtChange() {
 			return {
-				isCheck:this.searchParam.isCheck ,
+				isCheck: this.searchParam.isCheck,
-				fromDt : Utility.setFormatDate(
+				fromDt: Utility.setFormatDate(
 					this.searchParam.fromDt,
 					this.myOptions.viewFormat,
-			)};
+				)
+			};
 		},
 		defaultRange() {
 			return this.searchParam.defaultRange
@@ -205,10 +193,10 @@ export default {
 			);
 		},
 		arrowIcon() {
-			if(this.isDarkMode){
+			if (this.isDarkMode) {
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -242,24 +230,24 @@ export default {
 				this.endDatepickerInstance.setDate(new Date(newVal));
 			}
 		},
-		fromDtChange:{
+		fromDtChange: {
-			deep:true,
+			deep: true,
-			handler(){
+			handler() {
-				if(this.fromDtChange.isCheck){
+				if (this.fromDtChange.isCheck) {
 					this.fromDtChanged(this.fromDtChange.fromDt);
 					this.setPageData({
-						isCheck : false
+						isCheck: false
 					})
 				}
 			}
 		},
-		toDtChange:{
+		toDtChange: {
-			deep:true,
+			deep: true,
-			handler(){
+			handler() {
-				if(this.toDtChange.isCheck){
+				if (this.toDtChange.isCheck) {
 					this.toDtChanged(this.toDtChange.toDt);
 					this.setPageData({
-						isCheck : false
+						isCheck: false
 					})
 				}
 			}
@@ -370,7 +358,7 @@ export default {
 			if (
 				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				// if(this.cmCycleFlag){
 				this.setPageData({ isFind: true });
@@ -400,7 +388,7 @@ export default {
 			if (
 				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				this.setPageData({ isFind: true });
 			} else {
@@ -424,6 +412,7 @@ export default {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}

components/common/PastRsltDatePicker.vue

@@ -2,25 +2,19 @@
 	<v-row class="search-box" align="center" no-gutters>
 		<v-col v-if="label" :cols="labelCols">
 			<label for="" class="search-box-label">
-				<v-icon small color="primary" 
+				<v-icon small color="primary"
-				:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
+					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
-				>$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="label ? textCols : ''">
-			<div :class="['datepicker-container', customClass]"  >
+			<div :class="['datepicker-container', customClass]">
-				<v-text-field
+				<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
-					id="startpicker"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					ref="startpicker"
+					outlined>
-					v-model="fromDtValue"
+					<template #append>
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
+						<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
-					:hide-details="true"
+						<!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
-					readonly
-					outlined
-				>
-					<template #append >
-						<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
 					</template>
 					<template #append-outer>
 						<div ref="startpicker-container" id="startpicker-container"></div>
@@ -29,18 +23,13 @@
 				<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
 					<img :src="arrowIcon" alt="">
 				</div>
-				<v-text-field
+				<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
-					v-show="isRange"
+					:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
-					id="endpicker"
+					outlined>
-					ref="endpicker"
-					v-model="toDtValue"
-					:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
-					:hide-details="true"
-					readonly
-					outlined
-				>
 					<template #append>
-						<v-icon size="20">$icoCalendar</v-icon>
+						<div class="pr-1">
+							<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
+						</div>
 					</template>
 					<template #append-outer>
 						<div ref="endpicker-container" id="endpicker-container"></div>
@@ -98,6 +87,7 @@ export default {
 			searchParam(state) {
 				return state.pageData[this.parentPrgmId];
 			},
+			isDarkMode: "isDarkMode",
 		}),
 		myCmCycle() {
 			return this.searchParam.cmCycle;
@@ -138,10 +128,10 @@ export default {
 			);
 		},
 		arrowIcon() {
-			if(this.isDarkMode){
+			if (this.isDarkMode) {
-				return require('@/assets/images/arrow_datepicker_dm.png');
+				return require('@/assets/images/SwapRight_Dark.svg');
 			}
-			return require('@/assets/images/arrow_datepicker.png');
+			return require('@/assets/images/SwapRight.svg');
 		}
 	},
 	watch: {
@@ -280,7 +270,7 @@ export default {
 			if (
 				(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				// if(this.cmCycleFlag){
 				this.setPageData({ isFind: true });
@@ -310,7 +300,7 @@ export default {
 			if (
 				(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
 				defaultDt.format(this.myOptions.sendFormat) ===
-					compareDt.format(this.myOptions.sendFormat)
+				compareDt.format(this.myOptions.sendFormat)
 			) {
 				this.setPageData({ isFind: true });
 			} else {
@@ -334,6 +324,7 @@ export default {
 		display: flex;
 		justify-content: space-around;
 		background-color: #edf4fc;
+
 		.tui-timepicker-column.tui-timepicker-colon {
 			color: #000 !important;
 		}

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -4,7 +4,7 @@
 			class="d-flex justify-space-between align-center"
 			style="height: 80px;"
 		>
-			<span class="txt custom-title-4-new">공정 입출력 정보</span>
+			<span class="txt custom-subtitle-tab">공정 입출력 정보</span>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"

pages/comm/base/BatchLogMngPage.vue

@@ -67,6 +67,10 @@
 								@getRowsData="getRowData"
 							/>
 						</div>
+						<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+						<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+							@loadData="changeGrid" />
+					</div>
 					</div>
 				</v-card>
 			</v-col>
@@ -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() {
+		layoutInit() {
-		//   const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
+		  this.$refs.contents.style.height = 'auto';
-		//   this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
+		},
-		// },
 		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: 'No.', name: 'batchLogSeq', align: 'right', width: 90 },
-				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
+				{ 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();
+		},
 	},
 };
 

pages/ems/base/PastRsltDataReadPage.vue

@@ -12,7 +12,7 @@
 						</v-col>
 						<v-col :cols="3">
 							<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
-								customClass="select-large" />
+								class="no-gutters" customClass="select-large" />
 						</v-col>
 						<v-col :cols="3">
 							<!-- 대상일 -->
@@ -29,17 +29,18 @@
 			</v-col>
 		</v-row>
 		<v-row ref="contents">
-			<v-col :cols="12" style="height: 100%" class="h100">
+			<v-col :cols="12" class="h100">
-				<v-card class="px-5 py-5 h100">
+				<v-card class="px-5 py-5">
-					<div ref="gridParent" class="h100 px-5" style="height: 100%">
+					<div ref="gridParent" class="px-5" style="height:calc(100% - 40px)">
 						<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 							:parentPrgmId="myPrgmId" />
 					</div>
-					<div class="d-flex align-center justify-space-between">
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
-						<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
-							@loadData="changeGrid" />
+								@loadData="changeGrid" />
-					</div>
+						</div>
 				</v-card>
+
 			</v-col>
 		</v-row>
 	</div>
@@ -61,7 +62,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
 import DateUtility from '~/plugins/dateUtility';
 // import Search from "~/components/common/search";
 import EvtObjPop from '~/components/common/modal/EvtObjPop';
-import pagination from '~/components/Pagination';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0052";
@@ -212,7 +213,7 @@ export default {
 		},
 		layoutInit() {
 			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
-			this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
+			this.$refs.contents.style.height = `calc(100% - 30px - ${searchFilterHeight}px) `;
 		},
 		async setFromDt() {
 			this.pageData.fromDt = Utility.setBeforetDate(
@@ -220,7 +221,6 @@ export default {
 				this.pageData.toDt,
 				'YYYYMMDD',
 			);
-			// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
 		},
 		gridInit() {
 			this.loadGrid = false;

pages/ems/base/ReadResultCloseMngPage.vue

@@ -100,6 +100,10 @@
                 :gridName="gridName"
               />
           </div>
+					<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
+            <pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+								@loadData="changeGrid" />
+						</div>
         </v-card>
       </v-col>
     </v-row>
@@ -117,6 +121,7 @@ import selectCodeList from "@/components/common/select/selectCodeList";
 import SelectMttList from "@/components/common/select/SelectMttList";
 import Datepicker from "~/components/common/Datepicker";
 import BtnExcelDownload from "~/components/common/button/BtnExcelDownload";
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 // const myPrgmId = "PRG0018";
@@ -144,27 +149,18 @@ export default {
     Datepicker,
     Search,
     Grid,
+    pagination,
   },
   data() {
     return {
       myPrgmId: myPrgmId,
       gridName: "rowGrid",
       loadGrid: false,
-      dataPathMock: {
+			itemsPerPage: 10,
-        rowGrid: {
+			itemsPerPageArray: [10, 20, 30],
-          column: [
+			limit: 20,
-            { header: "태그", name: "id", headerAlign: "left" },
+			page: 1,
-            { header: "배율", name: "lable", headerAlign: "left" },
+			totalCount: 0,
-            { header: "설비비", name: "type", headerAlign: "left" },
-            { header: "설비배분비율", name: "note", headerAlign: "left" },
-            { header: "금일데이터", name: "note", headerAlign: "left" },
-            { header: "최종마감시각", name: "date", headerAlign: "left" },
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {},
-        },
-      },
     };
   },
   computed: {
@@ -190,7 +186,10 @@ export default {
   },
   watch: {
     chkIsFind(val) {
-      if (val) this.search();
+      if (val) {
+				this.page = 1;
+				this.search();
+			}
     },
     chkBlocId() {
       this.setPageData({ isFind: true });
@@ -243,10 +242,6 @@ export default {
         columnOptions: {
           resizable: true,
         },
-        pageOptions: {
-					useClient: true,
-					perPage: 13,
-				},
       };
       this.setGridOption({
         gridKey: this.gridName,
@@ -261,6 +256,8 @@ export default {
       await this.getRowGridData();
     },
     async getRowGridData() {
+      this.loadGrid = false;
+
       if (
         this.pageData.blocMstrList.length > 0 &&
         this.pageData.commCdList.length > 0 &&
@@ -274,8 +271,25 @@ export default {
             mttCd: this.pageData.commCd, // 검침대상유형
             mttTp: this.pageData.readObjId, // 검침대상
             readDt: this.pageData.fromDt, // 조회기간
+            limit: this.limit,
+					  page: this.page,
+					  offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
           },
         });
+
+        const res2 = await this.postApiReturn({
+					apiKey: 'selectReadResultCloseMngPageTotal',
+					resKey: 'cdKindPageTotal',
+          sendParam: {
+            blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId, // 사업장
+            mttCd: this.pageData.commCd, // 검침대상유형
+            mttTp: this.pageData.readObjId, // 검침대상
+            readDt: this.pageData.fromDt, // 조회기간
+          },
+				});
+
+				this.totalCount = res2[0].totalcount;
+
         this.setGridData({
           gridKey: this.gridName,
           value: res.map((item) => ({
@@ -325,6 +339,12 @@ export default {
         this.setPageData({ isFind: true });
       }
     },
+    changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
   },
 };
 
@@ -431,13 +451,4 @@ const myColumns = [
     },
   },
 ];
-
-import { getPathDataExample } from "@/const/const";
-const dataPathDataExample = getPathDataExample({
-  id: "INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV",
-  lable: "INCHEON 고온 냉동기 101호기 - 호로1",
-  type: "사용",
-  note: "-",
-  date: "2023-01-10 20:02:00",
-});
 </script>

store/modules/list.js

@@ -210,6 +210,8 @@ const INIT_URL_STATE = {
 	// prgmId: "TMP0013" 검침실적마감관리 ems/ReadResultCloseMngPage
 	selectReadResultCloseMng:
 		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMng', // 일일검침정보
+	selectReadResultCloseMngPageTotal:
+		'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMngPageTotal', // 일일검침정보
 	saveReadResultCloseMngSP:
 		'ems/base/ReadResultCloseMngCtr/saveReadResultCloseMngSP', // 전월 or 일 마감
 	saveReadResultCloseMngSPMM:
@@ -279,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',