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

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 yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
+const filterYear = ref<number>(stores.year)
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: stores.year,
+})
 
-function filterYearFn() {
-  emit('update:year', filterYear.value)
+watch(
+  () => 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