hrms-checkin/src/components/ToolBar.vue

<script setup lang="ts">
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>(stores.year)
const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
const dateMonth = ref<DataDateMonthObject>({
  month: new Date().getMonth(),
  year: stores.year,
})

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)
function onClickopen() {
  modalPopup.value = true
}
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"
        :locale="'th'"
        autoApply
        year-picker
        :enableTimePicker="false"
        @update:modelValue="filterYearFn('year')"
      >
        <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="filterYear + 543"
            :label="`${'ปีงบประมาณ'}`"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </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
        outline
        icon="add"
        color="light-blue"
        :class="$q.screen.gt.xs ? 'q-px-sm bg-blue-1' : ''"
        :label="$q.screen.gt.xs ? 'เพิ่มรายการลงเวลากรณีพิเศษ' : ''"
        @click="onClickopen"
      />
    </div>
  </div>

  <Popup
    :modal="modalPopup"
    :title="titleName"
    :clickClose="onClickClose"
    :fetchData="props.fetchData"
  />
</template>

<style scoped></style>