ปรับ table ลงเวลา

src/modules/09_leave/components/1_Work/ToolBar.vue

@@ -0,0 +1,98 @@
+<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-md">
+    <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
+            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
+        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 dense outlined v-model="workStore.filterTable" label="ค้นหา" />
+    </div>
+    <div class="col-2">
+      <q-select
+        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>