hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

46
src/modules/12_evaluatePersonal/components/Director/MainPage.vue
View file

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

46
src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
View file

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

32
src/modules/12_evaluatePersonal/views/MainPage.vue
View file

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