sk_fems_ui commit
This commit is contained in:
unknown
209
components/Pagination.vue
Normal file
209
components/Pagination.vue
Normal file
@ -0,0 +1,209 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user