เเก้ไขเพิ่ม ต่อ api History

src/components/TableHistory.vue

@@ -109,6 +109,15 @@ const columns = ref<QTableProps['columns']>([
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
+  {
+    name: 'loIn',
+    align: 'left',
+    label: 'พิกัด',
+    sortable: true,
+    field: 'loIn',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px',
+  },
   {
     name: 'out',
     align: 'left',
@@ -118,6 +127,15 @@ const columns = ref<QTableProps['columns']>([
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
+  {
+    name: 'loOut',
+    align: 'left',
+    label: 'พิกัด',
+    sortable: true,
+    field: 'loOut',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px',
+  },
   {
     name: 'Morningstatus',
     align: 'left',
@@ -136,25 +154,6 @@ const columns = ref<QTableProps['columns']>([
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
-  {
-    name: 'loIn',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'loIn',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
-
-  {
-    name: 'loOut',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'loOut',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
   {
     name: 'status',
     align: 'left',

src/views/HistoryView.vue

@@ -23,13 +23,35 @@ onMounted(() => {
   fetchlistHistory()
 })
 
+// paging
+const page = ref<number>(1)
+const year = ref<number>(2023)
+const pageSize = ref<number>(25)
+const total = ref<number>(0)
+const maxPage = ref<number>(1)
+const filter = ref<string>('') //search data table
+async function changePage(
+  pageVal: number,
+  pageSizeVal: number,
+  loading: boolean = false
+) {
+  page.value = await pageVal
+  pageSize.value = await pageSizeVal
+  fetchlistHistory(loading)
+}
+
 //นำข้อมูลมาแสดง
-const fetchlistHistory = async () => {
-  showLoader()
+const fetchlistHistory = async (loading: boolean = true) => {
+  loading === true ?? showLoader()
   await http
-    .get(config.API.history() + '?year=2023&page=1&pageSize=5&keyword=')
-    .then((res) => {
+    .get(
+      config.API.history() +
+        `?year=${year.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+    )
+    .then(async (res) => {
       const data = res.data.result
+      total.value = data.total
+      maxPage.value = await Math.ceil(data.total / pageSize.value)
       fetchHistoryList(data)
     })
     .catch((err) => {
@@ -120,7 +142,13 @@ const fetchlistHistory = async () => {
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <ToolBar />
-          <Table />
+          <Table
+            :page-size="pageSize"
+            :total="total"
+            :page="page"
+            :changePage="changePage"
+            :max-page="maxPage"
+          />
         </div>
       </q-card>
     </div>