แก้ paging วินัย

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -61,9 +61,7 @@ const checkRoutePermisson = ref<boolean>(
 );
 const organizationOption = ref<DataOption[]>([]);
 /** query string*/
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
+
 const filterKeyword2 = ref<string>("");
 const listDirector = ref<any>([]);
 const modalEditDirector = ref<boolean>(false);
@@ -79,6 +77,15 @@ const modalPerson = ref<boolean>(false);
 /**  search data table*/
 const filter = ref<string>("");
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const extendStatus = ref<boolean>(false);
@@ -233,7 +240,7 @@ async function deleteDirector(id: string) {
 async function fetchDatadetail() {
   if (props.data) {
     if (countNum.value === 1) {
-      isReadonly.value = props.data.status != "NEW" ?? true;
+      isReadonly.value = props.data.status != "NEW" ? true : false;
       isSave.value = false;
       isSaveInfo.value = false;
       formData.respondentType = props.data.respondentType;
@@ -444,14 +451,18 @@ async function fetchDListDirector() {
   await http
     .get(
       config.API.directorList(
-        page.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword2.value,
         mainStore.pathDirector(route.name as string)
       )
     )
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      total.value = res.data.result.total;
+
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
       const data = res.data.result.data;
       let datalistDirector: responseType[] = data.map((e: directorType) => ({
         id: e.id,
@@ -480,15 +491,6 @@ async function fetchDListDirector() {
     });
 }
 
-/**
- * function อัดเดท Paging กรรมการ
- * @param rpp ต่อหน้า
- * @param p หน้า
- */
-async function updatePaging(rpp: number, p: number) {
-  page.value = p;
-  rowsPerPage.value = rpp;
-}
 
 /**
  * function return รายชื่อกรรมการที่เลือก
@@ -709,6 +711,18 @@ function filterOptionFnCauseText(val: string, update: Function) {
   });
 }
 
+function getSearch() {
+  pagination.value.page = 1;
+  fetchDListDirector();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 watch(
   () => formData.disciplinaryFaultLevel,
   () => {
@@ -1935,16 +1949,16 @@ onMounted(async () => {
 
   <DialogDirector
     v-model:Modal="modal"
+    :get-search="getSearch"
     :clickClose="clickClose"
     :rows2="listDirector"
     v-model:filterKeyword2="filterKeyword2"
     v-model:type="type"
     :get-list="fetchDListDirector"
-    :rowsPerPage="rowsPerPage"
-    :page="page"
-    :maxPage="maxPage"
+    v-model:pagination="pagination"
+    v-model:total="total"
+    v-model:total-list="totalList"
     :selected-row="rows"
-    @update:pagination="updatePaging"
     @returnDirector="returnDirector"
   />
 

src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -10,17 +10,22 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader } = mixin;
 const { fetchList } = dataInvestigateDis;
 
-const rowsPerPage = ref<number>(10);
 const filter = ref<string>(""); //search data table
-const page = ref<number>(1);
-const maxPage = ref<number>(1);
-const totalList = ref<number>();
 
 const status = ref<string>("NEW");
 async function fetchListDisciplinary() {
@@ -28,12 +33,14 @@ async function fetchListDisciplinary() {
   await http
     .get(
       config.API.disciplineDisciplinary() +
-        `?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filter.value}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
     )
     .then((res) => {
       const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       fetchList(data);
     })
     .catch((err) => {})
@@ -57,17 +64,23 @@ function openDetail(id: string) {
   router.push(`/discipline-detail/disciplinary/${id}`);
 }
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await fetchListDisciplinary();
-}
-
 function filterStatus(statusReturn: string) {
   status.value = statusReturn;
+  getSearch()
+}
+
+function getSearch() {
+  pagination.value.page = 1;
   fetchListDisciplinary();
 }
 
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -89,19 +102,17 @@ onMounted(async () => {
         :visible-columns="dataInvestigateDis.visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :pagination="rowsPerPage"
         :nornmalData="true"
         :paging="true"
         :titleText="''"
-        :rowsPerPage="rowsPerPage"
-        :page="page"
-        :maxPage="maxPage"
-        :totalList="totalList"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
         :fetchListDisciplinary="fetchListDisciplinary"
-        @update:pagination="updatePagingProp"
         v-model:open-edit="openEdit"
         :open-detail="openDetail"
         :filterStatus="filterStatus"
+        :get-search="getSearch"
       >
       </Table>
     </div>

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -4,6 +4,10 @@ import { ref, useAttrs, watch } from "vue";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { checkPermission } from "@/utils/permissions";
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+
 const dataInvestigateDis = useInvestigateDisStore();
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -22,6 +26,7 @@ const props = defineProps({
   icon: String,
   inputvisible: Array,
   editvisible: Boolean,
+  getSearch: Function,
   validate: {
     type: Function,
     default: () => console.log("not function"),
@@ -79,13 +84,6 @@ const emit = defineEmits([
   "update:pagination",
 ]);
 
-/** แสดงจำนวนในตาราง */
-const pagination = ref({
-  descending: true,
-  page: Number(props.page),
-  rowsPerPage: props.rowsPerPage,
-});
-
 function paginationLabel(start: string, end: string, total: string) {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -116,7 +114,7 @@ function dataUpdate() {
 }
 
 function filterFn() {
-  props.fetchListDisciplinary?.();
+  props.getSearch?.();
 }
 
 /**
@@ -133,20 +131,10 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
 </script>
 
 <template>
@@ -232,20 +220,21 @@ watch(
     virtual-scroll
     :virtual-scroll-sticky-size-start="48"
     dense
-    :pagination-label="paginationLabel"
-    v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.totalList }} รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
-        :max="Number(props.maxPage)"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
+        :max-pages="5"
+        @update:model-value="props.fetchListDisciplinary?.()"
       ></q-pagination>
     </template>
     <template v-slot:header="props">