แก้ การลา paging

src/modules/09_leave/components/2_Leave/Tab2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,watch } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -23,17 +23,17 @@ const { fetchListLeaveReject } = leaveStore;
 const dataToobar = ref<any[]>([]);
 const $q = useQuasar(); //ใช้ noti quasar
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+
 const querySting = reactive<QuerySting>({
   year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
   type: leaveStore.filter.type, //*Id ประเภทการลา
   status: leaveStore.filter.status, //*สถานะการของลา
-  page: 1, //*หน้า
-  pageSize: 10, //*จำนวนแถวต่อหน้า
+  page: 1, //*สถานะการของลา
+  pageSize: 10, //*สถานะการของลา
   keyword: leaveStore.filter.keyword, //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
   leaveStore.rows = [];
@@ -50,8 +50,10 @@ async function fecthLeaveList() {
       .post(config.API.leaveListDelete(), querySting)
       .then((res) => {
         const data = res.data.result;
-        maxPage.value = Math.ceil(data.total / querySting.pageSize);
-        totalList.value = data.tatol;
+        totalList.value = Math.ceil(
+          res.data.result.total / querySting.pageSize
+        );
+        total.value = res.data.result.total;
         fetchListLeaveReject(data.data); /** ส่งข้อมูลไป stores*/
       })
       .catch((err) => {
@@ -98,6 +100,18 @@ async function fetchOption() {
     .finally(() => {});
 }
 
+function getSearch() {
+  querySting.page = 1;
+  fecthLeaveList();
+}
+
+watch(
+  () => querySting.pageSize,
+  async () => {
+    getSearch();
+  }
+);
+
 onMounted(async () => {
   await fetchOption();
   await fecthLeaveList();
@@ -105,17 +119,17 @@ onMounted(async () => {
 </script>
 <template>
   <ToolBar
-    :rowsPerPage="querySting.pageSize"
-    @update:querySting="updatePaging"
     :dataToobar="dataToobar"
+    v-model:query-sting="querySting"
+    :get-list="fecthLeaveList"
+    :get-search="getSearch"
   />
   <TableList
-    :page="querySting.page"
-    :rowsPerPage="querySting.pageSize"
-    :maxPage="maxPage"
-    :totalList="totalList"
-    @update:querySting="updatePaging"
+    v-model:total="total"
+    v-model:total-list="totalList"
+    v-model:pagination="querySting"
     :dataToobar="dataToobar"
+    :getList="fecthLeaveList"
   />
 </template>