ประเมินบุคคล=> ปรับ paging

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-26 11:06:38 +07:00
parent d04c6f30f5
commit 00d01ec986
3 changed files with 51 additions and 73 deletions

View file

@ -13,36 +13,36 @@ const dataStore = useEvaluateDirectorDataStore();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
// const currentPage = ref<number>(1);
// const maxPage = ref<number>(1);
// const page = ref<number>(1);
// const rowsPerPage = ref<number>(10);
/**
*pagination ของตาราง
*/
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
page: 1,
rowsPerPage: 10,
});
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getList();
}
);
// watch(
// () => currentPage.value,
// () => {
// rowsPerPage.value = pagination.value.rowsPerPage;
// getList();
// }
// );
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getList();
}
);
// watch(
// () => pagination.value.rowsPerPage,
// () => {
// rowsPerPage.value = pagination.value.rowsPerPage;
// currentPage.value = 1;
// getList();
// }
// );
function getList() {
showLoader();
@ -180,7 +180,7 @@ onMounted(() => {
v-model:pagination="pagination"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:pagination="scope">
<!-- <template v-slot:pagination="scope">
<q-pagination
v-model="currentPage"
active-color="primary"
@ -190,7 +190,7 @@ onMounted(() => {
boundary-links
direction-links
></q-pagination>
</template>
</template> -->
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">

View file

@ -20,36 +20,36 @@ const {
success,
} = mixin;
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
// const currentPage = ref<number>(1);
// const maxPage = ref<number>(1);
// const page = ref<number>(1);
// const rowsPerPage = ref<number>(10);
/**
*pagination ของตาราง
*/
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
page: 1,
rowsPerPage: 10,
});
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getList();
}
);
// watch(
// () => currentPage.value,
// () => {
// rowsPerPage.value = pagination.value.rowsPerPage;
// getList();
// }
// );
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getList();
}
);
// watch(
// () => pagination.value.rowsPerPage,
// () => {
// rowsPerPage.value = pagination.value.rowsPerPage;
// currentPage.value = 1;
// getList();
// }
// );
async function getList() {
showLoader();
await http
@ -197,7 +197,7 @@ function filterFn() {
v-model:pagination="pagination"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:pagination="scope">
<!-- <template v-slot:pagination="scope">
<q-pagination
v-model="currentPage"
active-color="primary"
@ -207,7 +207,7 @@ function filterFn() {
boundary-links
direction-links
></q-pagination>
</template>
</template> -->
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">

View file

@ -42,35 +42,12 @@ const initialPagination = ref<any>({
async function updatePagination(initialPagination: any) {
currentPage.value = 1;
pageSize.value = initialPagination.rowsPerPage;
page.value = 1; // set current page 1 per row
}
/** function callback เมื่อมีการเปลี่ยนหน้า*/
watch(
[
() => currentPage.value,
() => (pageSize.value = initialPagination.value.rowsPerPage),
],
async () => {
fetchEvaluteList();
}
);
/** function callback เมื่อมีการเปลี่ยนหน้า*/
watch(
[() => currentPage.value, () => initialPagination.value.rowsPerPage],
async () => {
page.value = currentPage.value;
await fetchEvaluteList();
}
);
/** function callback เมื่อมีการเปลี่ยนจำนวนแถว*/
watch(
() => initialPagination.value.rowsPerPage,
() => pageSize.value,
() => {
pageSize.value = initialPagination.value.rowsPerPage;
currentPage.value = 1;
fetchEvaluteList();
}
);
@ -106,8 +83,7 @@ async function fetchEvaluteList() {
.then(async (res) => {
const data = res.data.result.data;
total.value = res.data.result.total;
maxPage.value = await Math.ceil(total.value / pageSize.value);
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
maxPage.value = Math.ceil(total.value / pageSize.value);
store.fetchData(data);
})
.catch((e) => {
@ -268,7 +244,7 @@ onMounted(async () => {
class="custom-header-table"
:visible-columns="store.visibleColumns"
v-model:pagination="initialPagination"
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[1, 10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
@ -309,6 +285,8 @@ onMounted(async () => {
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchEvaluteList"
></q-pagination>
</template>
</d-table>