ผูก API รายลงเวลาปฏิบัติงานของ Admin (รายการลงเวลา)

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@@ -6,7 +8,16 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
-const { filterFn, searchDataFn } = workStore;
+
+const props = defineProps({
+  option: {
+    type: Object,
+    require: true,
+  },
+});
+
+const filetStatus = ref<string>("");
+const keyword = ref<string>("");
 
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
@@ -27,9 +38,6 @@ function calculateMaxDate() {
         :enableTimePicker="false"
         week-start="0"
         :max-date="calculateMaxDate()"
-        @update:model-value="
-          searchDataFn(workStore.selectDate, workStore.selectStatus)
-        "
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -64,16 +72,12 @@ function calculateMaxDate() {
         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"
+        v-model="filetStatus"
+        :options="props.option as readonly any[] || undefined"
       >
         <template v-slot:no-option>
           <q-item>
@@ -88,7 +92,7 @@ function calculateMaxDate() {
         for="filterTable"
         dense
         outlined
-        v-model="workStore.filterTable"
+        v-model="keyword"
         label="ค้นหา"
         debounce="300"
       >