120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
|
<div class="list-paging-wrapper">
|
|
<div class="pagination-content">
|
|
<icon-button
|
|
classList="pagination-nav pagination-nav-prev"
|
|
@click="changePage('<')"
|
|
icon="arrow" />
|
|
<div class="pagination-input">
|
|
<input
|
|
type="text"
|
|
class="pagination-current-page"
|
|
:value="pageNumber"
|
|
@keydown="validationStore.allowNumbersWithKeys"
|
|
@keyup="InputPageControl($event)"
|
|
@focus="PageNumberFocus($event)"
|
|
min="1"
|
|
:max="totalPage()" />
|
|
</div>
|
|
<div class="pagination-total-page">
|
|
/
|
|
<span>{{ totalPage() }}</span>
|
|
</div>
|
|
<div class="button-c" @click="getPage">Git</div>
|
|
<icon-button
|
|
classList="pagination-nav pagination-nav-next"
|
|
@click="changePage('>')"
|
|
icon="arrow" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onBeforeMount, watch } from 'vue'
|
|
import type { Ref } from 'vue'
|
|
import { useGlobalStore } from '@/stores/globalStore'
|
|
import { useValidationStore } from '@/stores/validationStore'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const globalStore = useGlobalStore()
|
|
const validationStore = useValidationStore()
|
|
|
|
interface IPagination {
|
|
pageNumber: number
|
|
pageSize: number
|
|
totalRecords: number
|
|
}
|
|
|
|
export interface Props {
|
|
pagination: IPagination
|
|
isUseRoute?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
isUseRoute: false
|
|
})
|
|
|
|
const emit = defineEmits(['update:pagination'])
|
|
|
|
const localPagination: Ref<IPagination> = ref(props.pagination)
|
|
const pageNumber: Ref<number> = ref(1)
|
|
|
|
const totalPage = (): number => {
|
|
return Math.ceil(localPagination.value.totalRecords / globalStore.perPage)
|
|
}
|
|
|
|
const changePage = (v: string) => {
|
|
if (v === '<') {
|
|
if (Number(pageNumber.value) > 1) pageNumber.value--
|
|
} else {
|
|
if (Number(pageNumber.value) < totalPage()) pageNumber.value++
|
|
}
|
|
localPagination.value.pageNumber = pageNumber.value
|
|
if (props.isUseRoute) {
|
|
router.push({
|
|
query: {
|
|
...route.query,
|
|
pageNumber: pageNumber.value
|
|
}
|
|
})
|
|
}
|
|
emit('update:pagination', localPagination.value)
|
|
}
|
|
|
|
const InputPageControl = (e: Event) => {
|
|
if (Number((e.target as HTMLInputElement).value) < 1)
|
|
(e.target as HTMLInputElement).value = '1'
|
|
if (Number((e.target as HTMLInputElement).value) > totalPage())
|
|
(e.target as HTMLInputElement).value = String(totalPage())
|
|
pageNumber.value = Number((e.target as HTMLInputElement).value)
|
|
|
|
if ((e as KeyboardEvent).key === 'Enter') getPage()
|
|
}
|
|
const PageNumberFocus = (e: Event) => {
|
|
;(e.target as HTMLInputElement).select()
|
|
}
|
|
const getPage = () => {
|
|
localPagination.value.pageNumber = pageNumber.value
|
|
emit('update:pagination', localPagination.value)
|
|
}
|
|
const SetPageNumber = () => {
|
|
if (props.isUseRoute) {
|
|
if (route.query.pageNumber !== undefined && route.query.pageNumber !== '') {
|
|
localPagination.value.pageNumber = pageNumber.value = Number(
|
|
route.query.pageNumber
|
|
)
|
|
}
|
|
}
|
|
}
|
|
onBeforeMount(() => {
|
|
SetPageNumber()
|
|
})
|
|
watch(
|
|
() => route.query.pageNumber,
|
|
() => {
|
|
SetPageNumber()
|
|
}
|
|
)
|
|
</script>
|