ประเมินบุคคล=> ปรับ paging
This commit is contained in:
parent
d04c6f30f5
commit
00d01ec986
3 changed files with 51 additions and 73 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue