แก้ Filter ปีงบประมาณของระบบการลา

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

@@ -28,11 +28,11 @@ function fecthLeaveList() {
 
 //
 const querySting = reactive<QuerySting>({
-  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  year: new Date().getFullYear(), //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
   type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
   status: "ALL", //*สถานะการของลา
   page: 1, //*หน้า
-  pageSize: 5, //*จำนวนแถวต่อหน้า
+  pageSize: 10, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
 const maxPage = ref<number>(1);
@@ -54,7 +54,6 @@ function updatePaging(
   querySting.page = newPage;
   querySting.pageSize = pageSize;
   querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
-
   console.log(querySting);
 }
 
@@ -102,7 +101,10 @@ onMounted(async () => {
     </q-tabs>
   </q-toolbar>
   <div v-if="leaveStore.tabView === 'list'">
-    <ToolBar @update:querySting="updatePaging" />
+    <ToolBar
+      :rowsPerPage="querySting.pageSize"
+      @update:querySting="updatePaging"
+    />
     <TableList
       :page="querySting.page"
       :rowsPerPage="querySting.pageSize"

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

@@ -11,11 +11,18 @@ import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
 const leaveStore = useLeavelistDataStore();
 
+const props = defineProps({
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+});
+
 const emit = defineEmits(["update:querySting"]);
 
 /** formFilter*/
 const filter = reactive<DateFilter>({
-  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  year: new Date().getFullYear(), //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
   type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
   status: "ALL", //*สถานะการของลา
   keyword: "", //keyword ค้นหา
@@ -38,20 +45,14 @@ function updateQuerySting(
 
 /** function ค้นหาข้อมูลใน Table*/
 async function filterListLeave() {
-  filter.status && filter.type && (await updateQuerySting(1, 10, filter));
+  console.log("test");
+
+  // filter.status &&
+  //   filter.type &&
+  //   (await updateQuerySting(1, Number(props.rowsPerPage), filter));
 }
 
 /** Option*/
-const optionYear = ref<DataOption2[]>([
-  {
-    id: 0,
-    name: "ทั้งหมด",
-  },
-  {
-    id: 2023,
-    name: "2566",
-  },
-]);
 const optionType = ref<DataOption[]>([
   {
     id: "00000000-0000-0000-0000-000000000000",
@@ -138,19 +139,52 @@ onMounted(async () => {
 <template>
   <div class="row col-12 q-col-gutter-sm q-mb-sm">
     <div class="col-xs-12 col-sm-3 col-md-2">
-      <q-select
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="filter.year"
+        class="col-2"
+        :locale="'th'"
+        autoApply
+        year-picker
+        :enableTimePicker="false"
+        @update:model-value="filterListLeave"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            lazy-rules
+            outlined
+            :model-value="Number(filter.year) + 543"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+      <!-- <q-select
         for="selectYear"
         emit-value
         map-options
         outlined
         dense
         v-model="filter.year"
-        :options="optionYear"
+        :options="optionStatus"
         option-value="id"
         option-label="name"
         label="ปีงบประมาณ"
         @update:model-value="filterListLeave"
-      />
+      /> -->
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select