แก้ไข max-page // page api ของประวัติการลา

*api ยังไม่ได้ส่ง total มาเลยคำนวน max-page ไม่ได้เลย setค่าไว้ 5 เพื่อรอ  api

src/components/TableHistory.vue

@@ -9,6 +9,7 @@ import { useChekIn } from '@/stores/chekin'
 import Popup from '@/components/PopUp.vue'
 
 const stores = useChekIn()
+const selected = ref<string[]>([])
 
 /** props from page */
 const props = defineProps({
@@ -16,6 +17,10 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  selected: {
+    type: Array,
+    defualt: [],
+  },
   pageSize: {
     type: Number,
     defualt: 10,
@@ -84,7 +89,7 @@ const initialPagination = ref<any>({
   sortBy: null,
   descending: false,
   page: 1,
-  rowsPerPage: props.pageSize,
+  rowsPerPage: 1,
 })
 
 // Pagination - update rowsPerPage
@@ -157,7 +162,7 @@ const columns = ref<QTableProps['columns']>([
     field: 'checkOutStatus',
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
-  }
+  },
 ])
 // popup
 const modalPopup = ref<boolean>(false)
@@ -187,11 +192,6 @@ function classStatus(status: string) {
   }
 }
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 2,
-})
-
 const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
   if (
     checkInStatus === 'ขาด' ||
@@ -212,10 +212,11 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
     :columns="columns"
     :rows="stores.rows"
     virtual-scroll
+    v-model:selected="selected"
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
     :grid="$q.screen.gt.xs ? false : true"
-    v-model:pagination="pagination"
+    :pagination="initialPagination"
     @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
@@ -336,9 +337,9 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
         </q-card>
       </div>
     </template>
-    <template v-slot:pagination="scope">
+    <!-- <template v-slot:pagination="scope">
       <q-pagination
-        v-model="pagination.page"
+        v-model="currentPage"
         active-color="primary"
         color="dark"
         :max="scope.pagesNumber"
@@ -347,6 +348,19 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
         boundary-links
         direction-links
       ></q-pagination>
+    </template> -->
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+        :max="Number(props.maxPage)"
+      ></q-pagination>
     </template>
   </q-table>
 

src/views/HistoryView.vue

@@ -18,16 +18,23 @@ const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
 onMounted(() => {
-  fetchlistHistory()
+  // fetchlistHistory()
 })
 
 // paging
 const page = ref<number>(1)
 const year = ref<number>(2023)
-const pageSize = ref<number>(25)
+const pageSize = ref<number>(5)
 const total = ref<number>(0)
-const maxPage = ref<number>(1)
+const maxPage = ref<number>(5)
 const filter = ref<string>('') //search data table
+
+/**
+ * ฟังก์ชั่น api เปลี่ยนหน้า
+ * @param pageVal page
+ * @param pageSizeVal pagesize
+ * @param loading loading
+ */
 async function changePage(
   pageVal: number,
   pageSizeVal: number,
@@ -49,7 +56,7 @@ const fetchlistHistory = async (loading = true) => {
     .then(async (res) => {
       const data = res.data.result
       total.value = data.total
-      maxPage.value = await Math.ceil(data.total / pageSize.value)
+      // maxPage.value = await Math.ceil(data.total / pageSize.value)
       fetchHistoryList(data)
     })
     .catch((err) => {
@@ -58,6 +65,7 @@ const fetchlistHistory = async (loading = true) => {
     .finally(() => {
       hideLoader()
     })
+  console.log(maxPage.value)
 }
 </script>
 <template>
@@ -89,6 +97,7 @@ const fetchlistHistory = async (loading = true) => {
             :page-size="pageSize"
             :total="total"
             :page="page"
+            :paging="true"
             :changePage="changePage"
             :max-page="maxPage"
           />