Merge pull request 'add paging for screen 2 12' (#81) from dev-manhph1-figbug into dev

Reviewed-on: #81

pages/ems/effc/EnrgUsePlanPage.vue

@@ -32,15 +32,19 @@
 		</v-row>
 		<v-row ref="contents">
 			<v-col :cols="12" >
-				<v-card class="pb-5">
+				<v-card>
 					<div class="d-flex align-center justify-space-between py-4 px-4">
 						<v-card-title class="pa-0 custom-title-4">설비별 에너지 계획 리스트</v-card-title>
 						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
 					</div>
-					<div ref="gridParent" class="px-5" style="min-height: 60vh;">
+					<div ref="gridParent" class="px-5" style="min-height: 50vh;">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
 							:editorGrid="true" @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>
 				</v-card>
 			</v-col>
 		</v-row>
@@ -57,7 +61,7 @@ import Grid from '~/components/common/Grid';
 import Utility from '~/plugins/utility';
 import Buttons from '~/components/common/button/Buttons';
 import EnrgUsePlanModiPop from '~/components/common/modal/EnrgUsePlanModiPop';
-import DateUtility from '~/plugins/dateUtility';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -86,6 +90,7 @@ export default {
 		Grid,
 		Buttons,
 		EnrgUsePlanModiPop,
+		pagination
 	},
 	data() {
 		return {
@@ -104,7 +109,11 @@ export default {
 			fromDt: new Date().getFullYear(),
 			rowKey: null,
 			edtingFinishFlag: 'Y',
-			// gridName: 'rowGrid',
+			itemsPerPage: 10,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -134,7 +143,10 @@ export default {
 			this.fromDt = val;
 		},
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search();
+			}
 		},
 		async selectValue01(val) {
 			if (this.initedFlag) {
@@ -265,7 +277,7 @@ export default {
 		gridInit() {
 			this.loadGrid = false;
 			let _this = this;
-			const gridHeight = this.$refs.gridParent.offsetHeight - 50;
+			const gridHeight = this.$refs.gridParent.offsetHeight - 40;
 			let yyyyCol = this.pageData.fromDt + '년';
 			let childCols1 = [];
 			let myComplexColumns = [
@@ -358,14 +370,14 @@ export default {
 				{
 					header: 'FAB',
 					name: 'fab',
-					width: 100,
+					width: 85,
 					align: 'left',
 					// hidden: true,
 				},
 				{
 					header: '공정명',
 					name: 'eccNm',
-					width: 100,
+					width: 150,
 					align: 'left',
 					hidden: true,
 				},
@@ -415,7 +427,7 @@ export default {
 				{
 					header: '구분',
 					name: 'gubun',
-					width: 200,
+					width: 150,
 					align: 'left',
 					// hidden: true,
 					formatter({ value }) {
@@ -447,7 +459,7 @@ export default {
 				myColumns.push({
 					header: i.toString() + '월',
 					name: qty,
-					width: 80,
+					width: 70,
 					align: 'right',
 					editor: 'text',
 					formatter: this.numberFormatter,
@@ -500,8 +512,25 @@ export default {
 					pastDt: parseInt(this.fromDt) - 1,
 					eqpmGrpId: this.selectValue03,
 					eccId: this.selectValue01,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
+
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectEnrgUsePlanPageTotal',
+				resKey: 'enrgUsePlanPageTotal',
+				sendParam: {
+					fromDt: this.fromDt,
+					pastDt: parseInt(this.fromDt) - 1,
+					eqpmGrpId: this.selectValue03,
+					eccId: this.selectValue01,
+				},
+			});
+
+			this.totalCount = res2[0].totalcount;
+
 			let fabText = this.pageData.eccIdList.filter(item => {
 				return item.value == this.selectValue01;
 			})[0]['text'];
@@ -734,6 +763,12 @@ export default {
 				}
 			}
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 const dt = new Date();