Merge branch 'develop' into dev

* develop:
  fix:bug layout  datepicker
  fix: ปีงบ => ปี พ.ศ.
  fix(history): search year
  fix:add  function calculateFiscalYear

src/components/FormTime.vue

@@ -229,6 +229,7 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 :max-date="dateNow"
+                :teleport="true"
               >
                 <template #year="{ year }">
                   {{ year + 543 }}

src/components/ToolBar.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import { useCounterMixin } from '@/stores/mixin'
 import { useChekIn } from '@/stores/chekin'
+import { calculateFiscalYear } from '@/utils/function'
 
 import type { DataDateMonthObject } from '@/interface/index/Main'
 
@@ -26,14 +27,11 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:year'])
 
-const filterYear = ref<number>(
-  stores.year ? stores.year : new Date().getFullYear()
-) //ปีงบประมาณ
+const filterYear = ref<number>(calculateFiscalYear(new Date())) //ปีงบประมาณ
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
-  year:
-    stores.year && !isNaN(stores.year) ? stores.year : new Date().getFullYear(),
+  year: new Date().getFullYear(),
 })
 const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ
 
@@ -45,6 +43,8 @@ function filterYearFn(type: string) {
   const year = type === 'year' ? filterYear.value : dateMonth.value.year
   const month = dateMonth.value.month
 
+  console.log(year, month)
+
   // ตรวจสอบค่าก่อนส่ง
   if (isNaN(Number(year)) || isNaN(Number(month))) {
     console.warn('Invalid year or month value:', { year, month })
@@ -90,21 +90,25 @@ const monthYearThai = (val: DataDateMonthObject) => {
   return monthYear2Thai(month, year)
 }
 
-/**
- * watch การเปลี่ยนแปลงของ stores.year
- */
-watch(
-  () => stores.year,
-  (newYear) => {
-    dateMonth.value.year = newYear
-  }
-)
+onMounted(() => {
+  filterYearFn(props.tab === 'history' ? 'year' : 'month')
+})
+
+// /**
+//  * watch การเปลี่ยนแปลงของ stores.year
+//  */
+// watch(
+//   () => stores.year,
+//   (newYear) => {
+//     dateMonth.value.year = newYear
+//   }
+// )
 </script>
 <template>
   <div class="items-center col-12 row q-pb-sm">
     <datepicker
       v-if="tab === 'history'"
-      menu-class-name="modalfix"
+      :teleport="true"
       v-model="filterYear"
       class="col-xs-5 col-sm-3 col-md-2"
       :locale="'th'"
@@ -142,7 +146,6 @@ watch(
 
     <datepicker
       v-else-if="tab === 'time'"
-      menu-class-name="modalfix"
       v-model="dateMonth"
       class="col-xs-5 col-sm-3 col-md-2"
       :locale="'th'"
@@ -151,6 +154,7 @@ watch(
       :transitions="false"
       :enableTimePicker="false"
       @update:modelValue="filterYearFn('month')"
+      :teleport="true"
     >
       <template #year="{ year }">{{
         Number.isFinite(year) ? year + 543 : ''
@@ -164,7 +168,7 @@ watch(
           lazy-rules
           outlined
           :model-value="monthYearThai(dateMonth) || 'เลือกเดือน/ปี'"
-          :label="`${'เดือน/ปีงบประมาณ'}`"
+          :label="`${'เดือน/ปี พ.ศ.'}`"
         >
           <template v-slot:prepend>
             <q-icon

src/stores/chekin.ts

@@ -2,13 +2,14 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { FormData, Datalist } from '@/interface/response/checkin'
 import { useCounterMixin } from '@/stores/mixin'
+import { calculateFiscalYear } from '@/utils/function'
 
 const mixin = useCounterMixin()
 const { date2Thai } = mixin
 
 /** store for checkin history*/
 export const useChekIn = defineStore('checkin', () => {
-  const year = ref<number>(new Date().getFullYear())
+  const year = ref<number>(calculateFiscalYear(new Date())) //ปีงบประมาณ
   const rows = ref<Datalist[]>([])
   const tab = ref<string>('history')
 

src/utils/function.ts

@@ -0,0 +1,10 @@
+/**
+ * คำนวณปีงบประมาณ
+ *
+ * @param date วันที่ปัจจุบัน
+ * @returns ปีงบประมาณ
+ */
+export function calculateFiscalYear(date: Date) {
+  const month = date.getMonth() + 1
+  return month >= 10 ? date.getFullYear() + 1 : date.getFullYear()
+}

src/views/HistoryView.vue

@@ -7,6 +7,7 @@ import http from '@/plugins/http'
 import config from '@/app.config'
 import { useChekIn } from '@/stores/chekin'
 import { useCounterMixin } from '@/stores/mixin'
+import { calculateFiscalYear } from '@/utils/function'
 
 import TableHistory from '@/components/TableHistory.vue' //ตารางประวัติการลงเวลา
 import ToolBar from '@/components/ToolBar.vue' // เมนู Herder
@@ -17,8 +18,9 @@ const stores = useChekIn()
 const { showLoader, hideLoader, messageError } = useCounterMixin()
 const { fetchHistoryList } = stores
 
-const year = ref<number>(new Date().getFullYear()) // ปีงบปรมาณ
+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) // จำนวนทั้งหมด
@@ -81,7 +83,7 @@ async function fetchlistTime() {
   await http
     .get(
       config.API.historyTime() +
-        `?year=${year.value}&month=${month.value + 1}&page=${
+        `?year=${year2.value}&month=${month.value + 1}&page=${
           page.value
         }&pageSize=${pageSize.value}&keyword=${
           filter.value ? filter.value : ''
@@ -111,9 +113,8 @@ async function fetchlistTime() {
  * @param m เดือนที่ต้องการอัปเดต
  */
 async function updateYear(y: number, m: number) {
-  year.value = y
+  stores.tab === 'history' ? (year.value = y) : (year2.value = y)
   month.value = m
-  stores.year = y
   await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
 }
 
@@ -127,15 +128,8 @@ watch(
   () => {
     page.value = 1
     filter.value = ''
-    functionFetch()
   }
 )
-/**
- * Hook
- */
-onMounted(() => {
-  functionFetch()
-})
 </script>
 
 <template>