paging รายการลา

src/modules/09_leave/views/LeaveListMain.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 
 /**importType*/
+import type {
+  QuerySting,
+  DateFilter,
+} from "@/modules/09_leave/interface/request/leave";
 import type { DataRows } from "@/modules/09_leave/interface/response/leave";
 
 /**importStroe*/
@@ -14,30 +18,55 @@ import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
 
 const leaveStore = useLeavelistDataStore();
 const APIDATA = useLeavelistDataStoreTest();
-const { fetchList, clearFilter } = leaveStore;
+const { fetchList } = leaveStore;
+
+/** เรียกข้อมูลจาก API*/
+function fecthLeaveList() {
+  const data = APIDATA.data;
+  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  fetchList(data); /** ส่งข้อมูลไป stores*/
+}
+
+function updatePaging(
+  newPage: number,
+  pageSize: number,
+  dateFilter: DateFilter
+) {
+  querySting.year = dateFilter ? dateFilter.year : querySting.year;
+  querySting.type = dateFilter ? dateFilter.type : querySting.type;
+  querySting.status = dateFilter ? dateFilter.status : querySting.status;
+  querySting.page = newPage;
+  querySting.pageSize = pageSize;
+  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
+
+  console.log(querySting);
+}
+
+const maxPage = ref<number>(1);
+const querySting = reactive<QuerySting>({
+  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
+  status: "ALL", //*สถานะการของลา
+  page: 1, //*หน้า
+  pageSize: 5, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
+});
 
 onMounted(() => {
   fecthLeaveList();
 });
-/** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
-  const data = APIDATA.data;
-
-  fetchList(data); /** ส่งข้อมูลไป stores*/
-}
-
-/** เปลี่ยน TAB*/
-function changTab() {
-  clearFilter();
-  fecthLeaveList();
-}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-      <ToolBar />
-      <TableList />
+      <ToolBar @update:querySting="updatePaging" />
+      <TableList
+        :page="querySting.page"
+        :rowsPerPage="querySting.pageSize"
+        :maxPage="maxPage"
+        @update:querySting="updatePaging"
+      />
     </q-card>
   </div>
 </template>