first
This commit is contained in:
289
safekiso_admin/base/components/BasePagination1.vue
Normal file
289
safekiso_admin/base/components/BasePagination1.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div
|
||||
class="pt-5 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
|
||||
>
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
|
||||
>
|
||||
Previous
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
|
||||
>
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium">{{ showingFrom }}</span>
|
||||
to
|
||||
<span class="font-medium">{{ showingTo }}</span>
|
||||
of
|
||||
<span class="font-medium">{{ recordsTotal }}</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<nav
|
||||
class="relative z-0 inline-flex shadow-sm -space-x-px"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
||||
@click="gotoPage('first', 0)"
|
||||
>
|
||||
<span class="sr-only">First</span>
|
||||
<!-- Heroicon name: chevron-double-left -->
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
||||
@click="gotoPage('prev', 0)"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
<!-- Heroicon name: chevron-left -->
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-for="(item, index) in currentSlots"
|
||||
:key="index"
|
||||
href="javascript:void(0)"
|
||||
:class="
|
||||
currentSlots[index] == currentPageNumber
|
||||
? 'bg-gray-200'
|
||||
: 'bg-white'
|
||||
"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
@click="gotoPage(currentSlots[index], index)"
|
||||
>
|
||||
{{ currentSlots[index] }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
||||
@click="gotoPage('next', 0)"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
<!-- Heroicon name: chevron-right -->
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
||||
@click="gotoPage('last', 0)"
|
||||
>
|
||||
<span class="sr-only">Last</span>
|
||||
<!-- Heroicon name: chevron-double-right -->
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 5l7 7-7 7M5 5l7 7-7 7"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from '@heroicons/vue/solid/index.js';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
totalPageCount: { type: Number, default: 1 },
|
||||
currentPageNumber: { type: Number, default: 1 },
|
||||
pageSize: { type: Number, default: 10 },
|
||||
recordsTotal: { type: Number, default: 0 },
|
||||
pageMove: { type: Function, required: true },
|
||||
});
|
||||
|
||||
const pagenationSize = 5;
|
||||
|
||||
//console.log(props);
|
||||
|
||||
const showingFrom = computed(() => {
|
||||
const result = 1 + (props.currentPageNumber - 1) * props.pageSize;
|
||||
return result;
|
||||
});
|
||||
|
||||
//console.log(showingFrom.value);
|
||||
|
||||
const showingTo = computed(() => {
|
||||
let result = props.currentPageNumber * props.pageSize;
|
||||
if (result > props.recordsTotal) {
|
||||
result = props.recordsTotal;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const currentSlots = computed(() => {
|
||||
const result: string[] = [];
|
||||
if (props.totalPageCount > pagenationSize) {
|
||||
if (props.currentPageNumber < Math.ceil(pagenationSize / 2)) {
|
||||
for (let i = 1; i < pagenationSize; i++) {
|
||||
// good for 3, 4, ....
|
||||
result.push(i.toString());
|
||||
}
|
||||
result.push('...');
|
||||
} else if (
|
||||
props.currentPageNumber >
|
||||
props.totalPageCount - pagenationSize / 2
|
||||
) {
|
||||
result.push('...');
|
||||
for (
|
||||
let i = props.totalPageCount - pagenationSize + 1;
|
||||
i <= props.totalPageCount;
|
||||
i++
|
||||
) {
|
||||
// good for 3, 4, ....
|
||||
result.push(i.toString());
|
||||
}
|
||||
} else {
|
||||
result.push('...');
|
||||
for (
|
||||
let i =
|
||||
props.currentPageNumber - Math.floor(pagenationSize / 2);
|
||||
i < props.currentPageNumber + Math.ceil(pagenationSize / 2);
|
||||
i++
|
||||
) {
|
||||
// good for 3, 4, ....
|
||||
result.push(i.toString());
|
||||
}
|
||||
result.push('...');
|
||||
}
|
||||
} else {
|
||||
for (let i = 1; i <= props.totalPageCount; i++) {
|
||||
result.push(i.toString());
|
||||
}
|
||||
}
|
||||
|
||||
//console.log('result = ', result);
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
function gotoPage(target, opt) {
|
||||
//console.log('gotoPage, target=', target);
|
||||
let targetPageIndex = props.currentPageNumber;
|
||||
switch (target) {
|
||||
case 'first':
|
||||
targetPageIndex = 1;
|
||||
break;
|
||||
case 'prev':
|
||||
if (props.currentPageNumber > 1) {
|
||||
targetPageIndex = props.currentPageNumber - 1;
|
||||
} else {
|
||||
targetPageIndex = props.currentPageNumber;
|
||||
}
|
||||
break;
|
||||
case 'next':
|
||||
if (props.totalPageCount > props.currentPageNumber) {
|
||||
targetPageIndex = props.currentPageNumber + 1;
|
||||
} else {
|
||||
targetPageIndex = props.currentPageNumber;
|
||||
}
|
||||
|
||||
break;
|
||||
case 'last':
|
||||
targetPageIndex = props.totalPageCount;
|
||||
break;
|
||||
|
||||
case '...':
|
||||
if (opt == 0) {
|
||||
if (props.currentPageNumber - pagenationSize > 0) {
|
||||
targetPageIndex = props.currentPageNumber - pagenationSize;
|
||||
} else {
|
||||
targetPageIndex = 1;
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
props.currentPageNumber + pagenationSize <
|
||||
props.totalPageCount
|
||||
) {
|
||||
targetPageIndex = props.currentPageNumber + pagenationSize;
|
||||
} else {
|
||||
targetPageIndex = props.totalPageCount;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
const tmpPageIdx = parseInt(target);
|
||||
if (tmpPageIdx >= 1 && tmpPageIdx <= props.totalPageCount) {
|
||||
targetPageIndex = tmpPageIdx;
|
||||
} else {
|
||||
targetPageIndex = props.currentPageNumber;
|
||||
}
|
||||
}
|
||||
//console.log('final targetPageIdex = ', targetPageIndex);
|
||||
|
||||
// console.log('huk', this);
|
||||
// this.$parent.pageMove(targetPageIndex);
|
||||
// $emit('pageMove', targetPageIndex);
|
||||
props.pageMove(targetPageIndex);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user