sk_fems_ui/components/Pagination.vue

<template>
	<div class="ly-pager d-flex">
		<v-row class="con-pager" align="center" justify="start">
			<!-- <span class="grey--text">{{ $m('CAP.PAGE_ROW', '페이지 행당') }} : </span> -->
			<v-menu offset-y>
				<template #activator="{ on, attrs }">
					<v-btn
						dark
						text
						color="primary"
						class="ml-2"
						v-bind="attrs"
						v-on="on"
					>
						{{ itemsPerPage }}
						<v-icon>mdi-chevron-down</v-icon>
					</v-btn>
				</template>
				<v-list v-if="useLimit">
					<v-list-item
						v-for="(number, index) in itemsPerPageArray"
						:key="index"
						@click="changePageLeng(number)"
					>
						<v-list-item-title>{{ number }}</v-list-item-title>
					</v-list-item>
				</v-list>
			</v-menu>
			<v-btn fab small class="mr-1 btn-pager" @click="firstToPage">
				<v-icon>mdi-chevron-double-left</v-icon>
			</v-btn>
			<v-btn fab small class="mr-1 btn-pager" @click="prevPage">
				<v-icon>mdi-chevron-left</v-icon>
			</v-btn>
			<!-- <span class="mr-4 grey--text mr-1">                {{ numberOfPages }} / {{ lastPage }}            </span> -->
			<span class="mr-4 mr-1"> {{ numberOfPages }} / {{ lastPage }} </span>
			<v-btn fab small class="ml-1 btn-pager" @click="nextPage">
				<v-icon>mdi-chevron-right</v-icon>
			</v-btn>
			<v-btn fab small class="mr-1 btn-pager" @click="lastToPage">
				<v-icon>mdi-chevron-double-right</v-icon>
			</v-btn>
			<div class="mr-1 btn-pager">
				<v-text-field v-model="moveToPage" type="number" label="page" />
			</div>
			<v-btn fab small class="mr-1" @click="movePage">
				{{ $m('CAP.MOVE', '이동') }}
			</v-btn>
		</v-row>
		<slot name="btn"> </slot>
		<!-- <Alert ref="alert" /> -->
	</div>
</template>

<script>
export default {
	props: {
		useLimit: {
			type: Boolean,
			default: true,
		},
		totalCount: {
			type: Number,
			default: 0,
		},
		pageNum: {
			type: Number,
			default: 0,
		},
		limit: {
			type: Number,
			default: 0,
		},
		itemsPerPageArray: {
			type: Array,
			default: () => [20, 50, 100],
		},
	},

	data() {
		return {
			moveToPage: '',
		};
	},

	computed: {
		page: function() {
			return this.numberOfPages + '-' + this.lastPage;
		},
		lastPage: function() {
			//grid data가 없을 경우 1 리턴
			if (this.totalCount == 0) return 1;

			let pageLength = Math.floor(this.totalCount / this.itemsPerPage);
			if (this.totalCount % this.itemsPerPage > 0) {
				pageLength++;
			}
			return pageLength;
		},
		itemsPerPage: function() {
			return this.limit;
		},
		numberOfPages: function() {
			return Number(this.pageNum);
		},
		plusPage: function() {
			return Number(this.pageNum) + 1;
		},
		minusPage: function() {
			return Number(this.pageNum) - 1;
		},
	},

	watch: {
		totalCount: function(newData) {
			return (this.moveToPage = newData > 0 ? this.moveToPage : '');
		},

		moveToPage: function() {
			return (this.moveToPage = this.moveToPage.replaceAll(/[^0-9]/g, ''));
		},
	},

	methods: {
		nextPage: function() {
			if (this.lastPage >= this.plusPage) {
				this.$emit('loadData', this.plusPage, this.itemsPerPage);
			}
		},

		prevPage: function() {
			if (0 != this.minusPage) {
				this.$emit('loadData', this.minusPage, this.itemsPerPage);
			}
		},

		movePage: function() {
			if (0 < this.moveToPage && this.moveToPage <= this.lastPage) {
				this.$emit('loadData', Number(this.moveToPage), this.itemsPerPage);
			} else {
				this.$refs.alert.done = () => {
					this.$emit('refresh');
				};
				this.$refs.alert.open(
					this.$m('COD.CNFM', '확인'),
					this.$m('CAP.PAGE_MOVE_CNFM', '이동할 페이지 정보를 확인 하세요'),
				);
			}
		},

		changePageLeng: function(limit) {
			//부모 컴포넌트에서 loadData(데이터 조회) 구현
			//this.$emit('loadData', this.pageNum, limit);
			// limit 변경 시 1 페이지로 초기화
			this.$emit('loadData', 1, limit);
		},

		firstToPage: function() {
			if (0 != this.minusPage) {
				this.$emit('loadData', 1, this.itemsPerPage);
			}
		},

		lastToPage: function() {
			if (this.lastPage >= this.plusPage) {
				this.$emit('loadData', this.lastPage, this.itemsPerPage);
			}
		},
	},
};
</script>

<style lang="scss">
.btn-pager {
	margin: 4px;
	input {
		width: 80px;
	}
}
.v-btn--fab.v-size--small {
	height: 30px;
	width: 30px;
}
.v-text-field__details {
	display: none;
}
.con-pager {
	margin-top: 12px;
	margin-bottom: -12px;
}
.ly-pager {
	margin: auto;
}
.v-btn {
	margin-left: 4px;
}
.v-btn--text {
	margin-right: 6px;
}
// .grey--text {
//     margin-left: 16px;
// }
.mr-4 {
	margin-left: 14px;
}
.v-btn__content {
	color: #ffffff;
}
</style>