112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
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>(2)
|
|
const total = ref<number>(0)
|
|
const maxPage = ref<number>(1)
|
|
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)
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
|
|
* @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
|
|
*/
|
|
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 ? data.total : 5
|
|
maxPage.value = await Math.ceil(total.value / pageSize.value)
|
|
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value
|
|
fetchHistoryList(data) // ปิดกรณีมี total
|
|
// fetchHistoryList(data.data) // เปิดกรณีมี total
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err)
|
|
})
|
|
.finally(() => {
|
|
hideLoader()
|
|
})
|
|
}
|
|
</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"
|
|
@update:change-page="changePage"
|
|
:max-page="maxPage"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</template>
|