ปรับ table ลงเวลา

src/modules/09_leave/components/2_Leave/ToolBar.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+//import Stores
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+
+const leaveStore = useLeavelistDataStore();
+const { searchDataFn, filterOption } = leaveStore;
+</script>
+
+<template>
+  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
+    <div class="col-2">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectYear"
+        :options="leaveStore.optionYear"
+        option-value="id"
+        option-label="name"
+        label="ปีงบประมาณ"
+      />
+    </div>
+    <div class="col-3">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectType"
+        :options="leaveStore.optionType"
+        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-2">
+      <q-select
+        v-if="leaveStore.tab == '2'"
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectStatus"
+        :options="leaveStore.optionStatus"
+        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')
+          "
+      />
+    </div>
+    <q-space />
+    <div class="col-2">
+      <q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
+    </div>
+    <div class="col-2">
+      <q-select
+        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>
+  </q-toolbar>
+</template>
+
+<style scoped></style>