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

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