hrms-mgt/src/modules/09_leave/components/2_Leave/ToolBar.vue

<script setup lang="ts">
/** importStores*/
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

const leaveStore = useLeavelistDataStore();
const { searchDataFn, filterOption } = leaveStore;
</script>

<template>
  <div class="row col-12 q-col-gutter-sm q-mb-sm">
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectYear"
        emit-value
        map-options
        outlined
        dense
        v-model="leaveStore.selectYear"
        :options="leaveStore.optionYear"
        option-value="id"
        option-label="name"
        label="ปีงบประมาณ"
      />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectType"
        emit-value
        map-options
        outlined
        dense
        v-model="leaveStore.selectType"
        :options="leaveStore.leaveOps"
        option-value="id"
        option-label="name"
        label="ประเภทการลา"
        @update:model-value="
          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
        "
        use-input
        @filter="
            (inputValue:any, doneFn:Function) =>
            filterOption(inputValue, doneFn, 'type')
          "
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template></q-select
      >
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectStatus"
        emit-value
        map-options
        outlined
        dense
        v-model="leaveStore.selectStatus"
        :options="leaveStore.statusOps"
        option-value="id"
        option-label="name"
        label="สถานะ"
        @update:model-value="
          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
        "
        use-input
        @filter="
            (inputValue:any, doneFn:Function) =>
            filterOption(inputValue, doneFn, 'status')
          "
      >
        <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-xs-12 col-sm-3 col-md-2">
      <q-input
        for="filterTable"
        dense
        outlined
        v-model="leaveStore.filterTable"
        label="ค้นหา"
      />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="visibleColumns"
        v-model="leaveStore.visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="leaveStore.columns"
        option-value="name"
        options-cover
      />
    </div>
  </div>
</template>