hrms-mgt/src/modules/09_leave/components/1_Work/ToolBar.vue

<script setup lang="ts">
//import Stores
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";

const workStore = useWorklistDataStore();
const mixin = useCounterMixin();

const { date2Thai } = mixin;
const { filterFn, searchDataFn } = workStore;
</script>

<template>
  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-sm">
    <div class="col-2">
      <datepicker
        menu-class-name="modalfix"
        v-model="workStore.selectDate"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        @update:model-value="
          searchDataFn(workStore.selectDate, workStore.selectStatus)
        "
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            for="selectDate"
            dense
            outlined
            lazy-rules
            :model-value="
              workStore.selectDate !== null
                ? date2Thai(workStore.selectDate)
                : null
            "
            hide-bottom-space
            :label="`${'วันที่'}`"
          >
            <template v-slot:prepend>
              <q-icon name="event" class="cursor-pointer text-primary">
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>
    <div class="col-3">
      <q-select
        for="selectStatus"
        emit-value
        map-options
        outlined
        dense
        v-model="workStore.selectStatus"
        :options="workStore.optionStatus"
        option-value="id"
        option-label="name"
        label="สถานะ"
        @update:model-value="
          searchDataFn(workStore.selectDate, workStore.selectStatus)
        "
        use-input
        @filter="filterFn"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template></q-select
      >
    </div>
    <q-space />
    <div class="col-2">
      <q-input
        for="filterTable"
        dense
        outlined
        v-model="workStore.filterTable"
        label="ค้นหา"
      />
    </div>
    <div class="col-2">
      <q-select
        for="visibleColumns"
        v-model="workStore.visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="workStore.columns"
        option-value="name"
        options-cover
      />
    </div>
  </q-toolbar>
</template>

<style scoped></style>