From 91d3c417d65ee676ffb9c08acaa957c13511469c Mon Sep 17 00:00:00 2001 From: setthawutttty Date: Wed, 30 Oct 2024 14:40:02 +0700 Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20paging?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TableListEvaluate.vue | 38 +++------- .../06_evaluate/views/EvaluateMain.vue | 64 ++++++++-------- src/modules/07_appealComplain/views/Main.vue | 73 ++++++++++--------- .../08_KPI/components/Evaluator/01_TabAll.vue | 2 +- src/modules/08_KPI/views/main.vue | 2 +- src/modules/08_KPI/views/mainEvaluator.vue | 2 +- src/modules/14_IDP/views/main.vue | 4 +- 7 files changed, 88 insertions(+), 97 deletions(-) diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue index cb9cb10..190e597 100644 --- a/src/modules/06_evaluate/components/TableListEvaluate.vue +++ b/src/modules/06_evaluate/components/TableListEvaluate.vue @@ -15,6 +15,9 @@ const store = useEvaluateStore(); const mixin = useCounterMixin(); const router = useRouter(); +const total = defineModel("total", { required: true }); +const totalList = defineModel("totalList", { required: true }); +const pagination = defineModel("pagination", { required: true }); const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin; const props = defineProps({ @@ -79,15 +82,6 @@ const columns = ref([ }, ]); -/** paging*/ -const pagination = ref({ - descending: false, - page: props.page, - rowsPerPage: props.pageSize, -}); - -const currentPage = ref(1); - /** * function ส่งข้อมูลไป Update Paging * @param newPagination ข้อมูล Paging ใหม่ @@ -97,13 +91,9 @@ function updateProp(newPagination: any, page: number) { emit("update:pagination", newPagination, page); } -/** - * function updatePageSize - * @param newPagination PageSize - */ -function updateRowsPerPagen(newPagination: any) { +function updatePagination(newPagination: any) { + pagination.value.page = 1; pagination.value.rowsPerPage = newPagination.rowsPerPage; - currentPage.value = 1; } /** @@ -137,11 +127,6 @@ function redirectToDetail(data: any) { router.push(`/evaluate/detail/${data.typeparam.toLowerCase()}/${data.id}`); } -/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */ -watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => { - updateProp(pagination.value, currentPage.value); -}); - /** Hook lifecycle*/ onMounted(() => { store.columns = columns.value; @@ -158,10 +143,9 @@ onMounted(() => { :columns="columns" :rows="store.row" dense - :rows-per-page-options="[10, 25, 50, 100]" :visible-columns="store.visibleColumns" - v-model:pagination="pagination" - @update:pagination="updateRowsPerPagen" + :rows-per-page-options="[1, 25, 50, 100]" + @update:pagination="updatePagination" > diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue index 5f8774d..541ce4b 100644 --- a/src/modules/06_evaluate/views/EvaluateMain.vue +++ b/src/modules/06_evaluate/views/EvaluateMain.vue @@ -47,6 +47,15 @@ const listMenu = ref([ }, ]); +const total = ref(0); +const totalList = ref(1); +const pagination = ref({ + sortBy: "createdAt", + descending: true, + page: 1, + rowsPerPage: 10, +}); + /** * function เปืด popup เพิ่มการประเมิน * @param data @@ -60,24 +69,22 @@ function openExpert() { router.push("/evaluate/expert"); } -/** ตัวแปร Paging*/ -const page = ref(1); -const pageSize = ref(25); -const maxPage = ref(10); - /** function เรียกรายการประเมิน*/ async function fetchEvaluteList() { showLoader(); const body = { - page: page.value, - pageSize: pageSize.value, + page: pagination.value.page, + pageSize: pagination.value.rowsPerPage, keyword: store.filterKeyword, status: selectedStatus.value, }; await http .put(config.API.evaluationList(), body) .then(async (res) => { - maxPage.value = Math.ceil(res.data.result.total / pageSize.value); + totalList.value = Math.ceil( + res.data.result.total / pagination.value.rowsPerPage + ); + total.value = res.data.result.total; store.fetchEvaluateList(res.data.result.data); await getProfileCheck(); }) @@ -112,24 +119,6 @@ async function getProfileCheck() { }); } -/** - * function updatePaging - * @param newPagination ข้อมูลใหม่ของ Paging - * @param currentPage หน้า Page - */ -async function updatePaging(newPagination: any, currentPage: number) { - page.value = currentPage; - pageSize.value = newPagination.rowsPerPage; - - await fetchEvaluteList(); -} - -async function filterFn() { - page.value = 1; - pageSize.value = pageSize.value; - await fetchEvaluteList(); -} - const selectedStatus = ref([ "CHECK_SPEC", "PREPARE_DOC_V1", @@ -187,6 +176,18 @@ watch( } ); +function getSearch() { + pagination.value.page = 1; + fetchEvaluteList(); +} + +watch( + () => pagination.value.rowsPerPage, + async () => { + getSearch(); + } +); + /** hook lifecycle*/ onMounted(async () => { await fetchEvaluteList(); @@ -260,7 +261,7 @@ onMounted(async () => { option-value="val" label="ค้นหาสถานะ" :style="!$q.screen.gt.xs ? '' : 'width: 35vw'" - @update:model-value="fetchEvaluteList" + @update:model-value="getSearch" use-input @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) " > @@ -286,7 +287,7 @@ onMounted(async () => { v-model="store.filterKeyword" label="ค้นหา" debounce="300" - @keydown.enter.prevent="filterFn" + @keydown.enter.prevent="getSearch" >