ปรับค้นงานปีงบประมาณ ประวัติการลงเวลา

src/components/ToolBar.vue

@@ -1,24 +1,47 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+
+import type { DataDateMonthObject } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue'
 // import HeaderPopup from "@/components/HeaderPopup.vue";
 // import FormTime from "@/components/FormTime.vue";
+import { useCounterMixin } from '@/stores/mixin'
+import { useChekIn } from '@/stores/chekin'
+
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const stores = useChekIn()
+const { monthYear2Thai } = mixin
 
 const props = defineProps({
   fetchData: {
     type: Function,
     require: true,
   },
+  tab: {
+    type: String,
+    require: true,
+  },
 })
 const emit = defineEmits(['update:year'])
 
-const filterYear = ref<number>(new Date().getFullYear())
+const filterYear = ref<number>(stores.year)
-// const yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: stores.year,
+})
 
-function filterYearFn() {
+watch(
-  emit('update:year', filterYear.value)
+  () => stores.year,
+  () => {
+    dateMonth.value.year = stores.year
+  }
+)
+
+function filterYearFn(type: string) {
+  const year = type === 'year' ? filterYear.value : dateMonth.value.year
+  emit('update:year', year, dateMonth.value.month)
 }
 
 const modalPopup = ref<boolean>(false)
@@ -28,11 +51,17 @@ function onClickopen() {
 function onClickClose() {
   modalPopup.value = false
 }
+
+const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return ''
+  else return monthYear2Thai(val.month, val.year)
+}
 </script>
 <template>
   <div class="q-pb-sm row">
     <div class="items-center col-12 row q-gutter-sm">
       <datepicker
+        v-if="tab === 'history'"
         menu-class-name="modalfix"
         v-model="filterYear"
         class="col-xs-5 col-sm-3 col-md-2"
@@ -40,7 +69,7 @@ function onClickClose() {
         autoApply
         year-picker
         :enableTimePicker="false"
-        @update:modelValue="filterYearFn"
+        @update:modelValue="filterYearFn('year')"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -66,6 +95,41 @@ function onClickClose() {
         </template>
       </datepicker>
 
+      <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'"
+        autoApply
+        month-picker
+        :enableTimePicker="false"
+        @update:modelValue="filterYearFn('mount')"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            lazy-rules
+            outlined
+            :model-value="monthYearThai(dateMonth)"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+
       <q-space />
       <q-btn
         unelevated

src/interface/index/Main.ts

@@ -2,6 +2,11 @@ interface DataOption {
   id: string
   name: string
 }
+
+interface DataDateMonthObject {
+  month: number
+  year: number
+}
 interface FormRef {
   date: object | null
   reason: object | null
@@ -14,4 +19,4 @@ interface notiType {
   timereceive: Date
 }
 
-export type { DataOption, FormRef, notiType }
+export type { DataOption, FormRef, notiType, DataDateMonthObject }

src/stores/chekin.ts

@@ -7,6 +7,7 @@ const { date2Thai } = mixin
 
 /** store for checkin history*/
 export const useChekIn = defineStore('checkin', () => {
+  const year = ref<number>(new Date().getFullYear())
   const rows = ref<Datalist[]>()
 
   /**
@@ -90,6 +91,7 @@ export const useChekIn = defineStore('checkin', () => {
 
   return {
     rows,
+    year,
     fetchHistoryList,
     classColorStatus,
   }

src/stores/mixin.ts

@@ -267,8 +267,54 @@ export const useCounterMixin = defineStore('mixin', () => {
       })
   }
 
+  function monthYear2Thai(month: number, year: number, isFullMonth = false) {
+    const date = new Date(`${year}-${month + 1}-1`)
+    const fullMonthThai = [
+      'มกราคม',
+      'กุมภาพันธ์',
+      'มีนาคม',
+      'เมษายน',
+      'พฤษภาคม',
+      'มิถุนายน',
+      'กรกฎาคม',
+      'สิงหาคม',
+      'กันยายน',
+      'ตุลาคม',
+      'พฤศจิกายน',
+      'ธันวาคม',
+    ]
+    const abbrMonthThai = [
+      'ม.ค.',
+      'ก.พ.',
+      'มี.ค.',
+      'เม.ย.',
+      'พ.ค.',
+      'มิ.ย.',
+      'ก.ค.',
+      'ส.ค.',
+      'ก.ย.',
+      'ต.ค.',
+      'พ.ย.',
+      'ธ.ค.',
+    ]
+    let dstYear = 0
+    if (date.getFullYear() > 2500) {
+      dstYear = date.getFullYear()
+    } else {
+      dstYear = date.getFullYear() + 543
+    }
+    let dstMonth = ''
+    if (isFullMonth) {
+      dstMonth = fullMonthThai[date.getMonth()]
+    } else {
+      dstMonth = abbrMonthThai[date.getMonth()]
+    }
+    return dstMonth + ' ' + dstYear
+  }
+
   return {
     date2Thai,
+    monthYear2Thai,
     showLoader,
     hideLoader,
     covertDateObject,

src/views/HistoryView.vue

@@ -104,9 +104,11 @@ async function fetchlistTime() {
  * function updateYear
  * @param y ปีที่อัปเดท
  */
-async function updateYear(y: number) {
+async function updateYear(y: number, m: number) {
   year.value = y
-  y && functionFetch.value
+  month.value = m
+  stores.year = y
+  functionFetch.value
 }
 
 /** Hook*/
@@ -118,6 +120,7 @@ watch(
   () => tab.value,
   () => {
     page.value = 1
+    filter.value = ''
     functionFetch.value
   }
 )
@@ -146,7 +149,11 @@ watch(
           <div class="col-2"></div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
-          <ToolBar :fetchData="fetchlistHistory" @update:year="updateYear" />
+          <ToolBar
+            :fetchData="fetchlistHistory"
+            @update:year="updateYear"
+            :tab="tab"
+          />
           <q-card bordered flat>
             <q-tabs
               v-model="tab"