รายการลงเวลาปฏิบัติงานที่ประมวลผลแล้ว

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

@@ -9,16 +9,25 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-const props = defineProps({
-  option: {
-    type: Object,
-    require: true,
-  },
-});
+const emit = defineEmits(["update:pagination"]);
+const updateProp = (newPagination: any, keyword: string, status: string) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, 1, keyword, status);
+};
 
+const option = ref<any[]>([
+  { id: "", name: "ทั้งหมด" },
+  { id: "normal", name: "ปกติ" },
+  { id: "late", name: "สาย" },
+  { id: "absent", name: "ขาดราชการ" },
+]);
 const filetStatus = ref<string>("");
 const keyword = ref<string>("");
 
+function filterFn() {
+  updateProp([], keyword.value, filetStatus.value);
+}
+
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
@@ -38,6 +47,7 @@ function calculateMaxDate() {
         :enableTimePicker="false"
         week-start="0"
         :max-date="calculateMaxDate()"
+        @update:model-value="filterFn"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -77,7 +87,8 @@ function calculateMaxDate() {
         label="สถานะ"
         use-input
         v-model="filetStatus"
-        :options="props.option as readonly any[] || undefined"
+        :options="option"
+        @update:model-value="filterFn"
       >
         <template v-slot:no-option>
           <q-item>
@@ -95,6 +106,7 @@ function calculateMaxDate() {
         v-model="keyword"
         label="ค้นหา"
         debounce="300"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon name="search" />