hrms-checkin/src/views/HistoryView.vue

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar'

import { useRouter } from 'vue-router'
import http from '@/plugins/http'
import config from '@/app.config'
import { useCheckIn } from '@/stores/checkin'
import { useCounterMixin } from '@/stores/mixin'
import { calculateFiscalYear } from '@/utils/function'

import TableHistory from '@/components/TableHistory.vue' //ตารางประวัติการลงเวลา
import ToolBar from '@/components/ToolBar.vue' // เมนู Herder

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

const year = ref<number>(calculateFiscalYear(new Date())) // ปีงบปรมาณ
const month = ref<number>(new Date().getMonth()) // เดือน
const year2 = ref<number>(new Date().getFullYear()) // ปีงบปรมาณ
const page = ref<number>(1) // หน้าปัจจุบัน
const pageSize = ref<number>(10) // จำนวนแถวต่อหน้า
const total = ref<number>(0) // จำนวนทั้งหมด
const maxPage = ref<number>(1) // จำนวนวหน้าทั้งหมด
const filter = ref<string>('') //search data table
const isLoading = ref<boolean>(false) // ตัวแปรสำหรับเช็คการโหลดข้อมูล

/**
 * ฟังก์ชั่น api เปลี่ยนหน้า
 * @param pageVal page
 * @param pageSizeVal pagesize
 *
 */
async function changePage(pageVal: number, pageSizeVal: number, key: string) {
  page.value = pageVal
  pageSize.value = pageSizeVal
  filter.value = key
  await functionFetch()
}

/** ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก*/
async function functionFetch() {
  stores.rows = []
  stores.tab === 'history' ? await fetchlistHistory() : await fetchlistTime()
}

/** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา*/
async function fetchlistHistory() {
  isLoading.value = true
  await http
    .get(
      config.API.history() +
        `?year=${year.value}&page=${page.value}&pageSize=${
          pageSize.value
        }&keyword=${filter.value ? filter.value : ''}`
    )
    .then(async (res) => {
      // ดึงข้อมูลและจำนวนทั้งหมด
      const data = await res.data.result.data
      total.value = await res.data.result.total

      // คำนวณจำนวนหน้า
      maxPage.value = Math.ceil(total.value / pageSize.value)

      await fetchHistoryList(data)
    })
    .catch((err) => {
      messageError($q, err)
    })
    .finally(() => {
      isLoading.value = false
    })
}

/**
 * ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ
 */
async function fetchlistTime() {
  isLoading.value = true
  await http
    .get(
      config.API.historyTime() +
        `?year=${year2.value}&month=${month.value + 1}&page=${
          page.value
        }&pageSize=${pageSize.value}&keyword=${
          filter.value ? filter.value : ''
        }`
    )
    .then(async (res) => {
      // ดึงข้อมูลและจำนวนทั้งหมด
      const data = await res.data.result.data
      total.value = await res.data.result.total

      // คำนวณจำนวนหน้า
      maxPage.value = Math.ceil(total.value / pageSize.value)

      await fetchHistoryList(data)
    })
    .catch((err) => {
      messageError($q, err)
    })
    .finally(() => {
      isLoading.value = false
    })
}

/**
 * ฟังก์ชันสำหรับอัปเดตปีและเดือน
 * @param y ปีที่ต้องการอัปเดต
 * @param m เดือนที่ต้องการอัปเดต
 */
async function updateYear(y: number, m: number) {
  stores.tab === 'history' ? (year.value = y) : (year2.value = y)
  month.value = m
  await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
}

/**
 * ดูการเปลี่ยนแปลงใน stores.tab เมื่อ stores.tab เปลี่ยนไป
 * จะรีเซ็ตค่า page , filter เป็นสถานะเริ่มต้น
 * แล้วเรียก functionFetch เพื่อดึงประวัติการลงเวลาใหม่
 */
watch(
  () => stores.tab,
  () => {
    page.value = 1
    filter.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"
        >
          <q-btn
            icon="arrow_back"
            round
            dense
            flat
            color="white"
            @click="router.go(-1)"
          />
          <span class="text-body1 text-weight-bold q-pl-md"
            >ประวัติการลงเวลา
          </span>
        </div>
        <div class="col-12 text-grey-9">
          <q-tabs
            v-model="stores.tab"
            dense
            align="left"
            inline-label
            class="rounded-borders"
            indicator-color="primary"
            active-bg-color="teal-1"
            active-class="text-primary"
          >
            <q-tab name="history" label="ประวัติการลงเวลา" />
            <q-tab name="time" label="รายการลงเวลากรณีพิเศษ" />
          </q-tabs>

          <q-separator />

          <q-tab-panels v-model="stores.tab" animated>
            <q-tab-panel name="history">
              <ToolBar
                :fetch-data="functionFetch"
                @update:year="updateYear"
                :tab="stores.tab"
              />
              <TableHistory
                :fetch-data="functionFetch"
                :page-size="pageSize"
                :total="total"
                :page="page"
                :paging="true"
                @update:change-page="changePage"
                :max-page="maxPage"
                :tab="stores.tab"
                :is-loading="isLoading"
              />
            </q-tab-panel>

            <q-tab-panel name="time">
              <ToolBar
                :fetch-data="functionFetch"
                @update:year="updateYear"
                :tab="stores.tab"
              />
              <TableHistory
                :fetch-data="functionFetch"
                :page-size="pageSize"
                :total="total"
                :page="page"
                :paging="true"
                @update:change-page="changePage"
                :max-page="maxPage"
                :tab="stores.tab"
                :is-loading="isLoading"
              />
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </q-card>
    </div>
  </div>
</template>

<style scoped>
.q-tab-panel {
  min-height: 400px;
}
</style>