แก้ 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"
   />