hrms-checkin/src/components/ToolBar.vue

<script setup lang="ts">
import { ref } from 'vue'
import type { DataOption } from '@/interface/index/Main'
import Popup from '@/components/PopUp.vue'
// import HeaderPopup from "@/components/HeaderPopup.vue";
// import FormTime from "@/components/FormTime.vue";

const filterYear = ref<number>(new Date().getFullYear() + 543)
const yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')

const modalPopup = ref<boolean>(false)
function onClickopen() {
  modalPopup.value = true
}
function onClickClose() {
  modalPopup.value = false
}
</script>
<template>
  <div class="q-pb-sm row">
    <div class="items-center col-12 row q-gutter-sm">
      <q-select
        dense
        outlined
        style="width: 180px"
        label="ปีงบประมาณ"
        v-model="filterYear"
        :options="yearOption"
        option-label="name"
        option-value="id"
      />
      <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" />
</template>

<style scoped></style>