แก้ การลา paging

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

@@ -2,44 +2,26 @@
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
-import type { DateFilter } from "@/modules/09_leave/interface/request/leave";
+import type {
+  DateFilter,
+  QuerySting,
+} from "@/modules/09_leave/interface/request/leave";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
 /** importStores*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
+const querySting = defineModel<QuerySting>("querySting", { required: true });
+
 const $q = useQuasar();
 const leaveStore = useLeavelistDataStore();
 
 const props = defineProps({
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
   dataToobar: Array,
+  getSearch: Function,
+  getList: Function,
 });
 
-const emit = defineEmits(["update:querySting"]);
-
-/**
- * function update ข้อมูลการค้นหา  (QuerySting)
- * @param newPage หน้า
- * @param pageSize ข้อมูลต่อแถว
- * @param dateFilter ข้อมูล Filter
- */
-function updateQuerySting(
-  newPage: number,
-  pageSize: number,
-  dateFilter: DateFilter
-) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:querySting", newPage, pageSize, dateFilter);
-}
-
-/** function ค้นหาข้อมูลใน Table*/
-async function filterListLeave() {
-  updateQuerySting(1, 0, leaveStore.filter);
-}
 
 /** Option*/
 const optionTypeMain = ref<DataOption[]>([]);
@@ -137,13 +119,13 @@ watch(
     <div class="col-xs-12 col-sm-3 col-md-2">
       <datepicker
         menu-class-name="modalfix"
-        v-model="leaveStore.filter.year"
+        v-model="querySting.year"
         class="col-2"
         :locale="'th'"
         autoApply
         year-picker
         :enableTimePicker="false"
-        @update:model-value="filterListLeave"
+        @update:model-value="props.getSearch?.()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -153,7 +135,7 @@ watch(
           <q-input
             dense
             outlined
-            :model-value="Number(leaveStore.filter.year) + 543"
+            :model-value="Number(querySting.year) + 543"
             :label="`${'ปีงบประมาณ'}`"
           >
             <template v-slot:prepend>
@@ -175,12 +157,12 @@ watch(
         map-options
         outlined
         dense
-        v-model="leaveStore.filter.type"
+        v-model="querySting.type"
         :options="optionType"
         option-value="id"
         option-label="name"
         label="ประเภทการลา"
-        @update:model-value="filterListLeave"
+        @update:model-value="props.getSearch?.()"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -194,7 +176,7 @@ watch(
         </template>
         <template
           v-if="
-            leaveStore.filter.type !== '00000000-0000-0000-0000-000000000000'
+            querySting.type !== '00000000-0000-0000-0000-000000000000'
           "
           v-slot:append
         >
@@ -202,9 +184,9 @@ watch(
             name="cancel"
             @click.stop.prevent="
               (optionType = optionTypeMain),
-                (leaveStore.filter.type =
+                (querySting.type =
                   '00000000-0000-0000-0000-000000000000'),
-                filterListLeave()
+                  props.getSearch?.()
             "
             class="cursor-pointer"
           />
@@ -218,12 +200,12 @@ watch(
         map-options
         outlined
         dense
-        v-model="leaveStore.filter.status"
+        v-model="querySting.status"
         :options="optionStatus"
         option-value="id"
         option-label="name"
         label="สถานะ"
-        @update:model-value="filterListLeave"
+        @update:model-value="props.getSearch?.()"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -235,13 +217,13 @@ watch(
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
         </template>
-        <template v-if="leaveStore.filter.status !== 'ALL'" v-slot:append>
+        <template v-if="querySting.status !== 'ALL'" v-slot:append>
           <q-icon
             name="cancel"
             @click.stop.prevent="
               (optionStatus = optionStatusMain),
-                (leaveStore.filter.status = 'ALL'),
-                filterListLeave()
+                (querySting.status = 'ALL'),
+                props.getSearch?.()
             "
             class="cursor-pointer"
           />
@@ -254,9 +236,9 @@ watch(
         for="filterTable"
         dense
         outlined
-        v-model="leaveStore.filter.keyword"
+        v-model="querySting.keyword"
         label="ค้นหา"
-        @keydown.enter.prevent="filterListLeave"
+        @keydown.enter.prevent="props.getSearch?.()"
       />
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">