hrms-checkin/src/views/HistoryView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import Table from '@/components/TableHistory.vue'
import ToolBar from '@/components/ToolBar.vue'
import http from '@/plugins/http'
import config from '@/app.config'
import { useCounterMixin } from '@/stores/mixin'
// importStores
import { useChekIn } from '@/stores/chekin'

const mixin = useCounterMixin()
const router = useRouter()
const stores = useChekIn()
const { showLoader, hideLoader, messageError } = mixin
const { fetchHistoryList } = stores
const $q = useQuasar() //ใช้ noti quasar

onMounted(() => {
  // fetchlistHistory()
})

// paging
const page = ref<number>(1)
const year = ref<number>(2023)
const pageSize = ref<number>(5)
const total = ref<number>(0)
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,
  loading: false
) {
  page.value = await pageVal
  pageSize.value = await pageSizeVal
  fetchlistHistory(loading)
}

//นำข้อมูลมาแสดง
const fetchlistHistory = async (loading = true) => {
  loading === true ?? showLoader()
  await http
    .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) => {
      messageError($q, err)
    })
    .finally(() => {
      hideLoader()
    })
  console.log(maxPage.value)
}
</script>
<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <q-card flat class="row col-12 cardNone">
        <div
          class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm"
        >
          <div class="col-2">
            <q-btn
              icon="arrow_back"
              round
              dense
              flat
              color="white"
              @click="router.go(-1)"
            />
          </div>
          <q-space />
          <span class="text-body1 text-weight-bold col-8 text-center"
            >ประวัติการลงเวลา</span
          >
          <div class="col-2"></div>
        </div>
        <div class="col-12 q-pa-md text-grey-9">
          <ToolBar />
          <Table
            :page-size="pageSize"
            :total="total"
            :page="page"
            :paging="true"
            :changePage="changePage"
            :max-page="maxPage"
          />
        </div>
      </q-card>
    </div>
  </div>
</template>