แก้ไข filterYear

src/modules/05_leave/componenst/ListCalendar.vue

@@ -126,9 +126,9 @@ const view = async (text: string) => {
 onMounted(async () => {
 	searchFilterTable()
 	fecthList([
-		{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "2566" },
+		{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "1" },
-		{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "2566" },
+		{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "1" },
-		{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "2566" },
+		{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "1" },
 	])
 })
 </script>

src/modules/05_leave/store.ts

@@ -9,7 +9,7 @@ export const useLeaveStore = defineStore("Leave", () => {
 	const { date2Thai } = mixin
 	const LeaveType = ref<string | null>("0")
 	const LeaveStatus = ref<string | null>("0")
-	const fiscalYearyear = ref<number | null>(null)
+	const fiscalYearyear = ref<string | null>("0")
 	const rows = ref<formListLeaveData>([])
 	const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
 	async function fecthList(data: formListLeaveData[]) {
@@ -64,18 +64,15 @@ export const useLeaveStore = defineStore("Leave", () => {
 			if (LeaveStatus.value !== "0") {
 				filteredData = filteredData.filter((item: formListLeaveData) => item.status === LeaveStatus.value)
 			}
-			// if (fiscalYearyear.value !== "0") {
+			if (fiscalYearyear.value !== "0") {
-			// 	console.log(filteredData)
+				filteredData = filteredData.filter((item: formListLeaveData) => item.year === fiscalYearyear.value)
-			// 	filteredData = filteredData.filter((item: formListLeaveData) => item.status === fiscalYearyear.value)
+			}
-			// 	console.log(filteredData)
-			// 	console.log(fiscalYearyear.value)
-			// }
 			const dataArr = filteredData.map((e: any) => ({
 				no: e.no,
 				type: convertType(e.type),
 				status: convertStatus(e.status),
 				date: date2Thai(new Date(e.date)),
-				year: e.year,
+				year: convertYear(e.year),
 			}))
 			rows.value = dataArr
 		}
@@ -104,10 +101,10 @@ export const useLeaveStore = defineStore("Leave", () => {
 	}
 
 	const fiscalyearOP = ref<OptionData[]>([
-		{ id: "0", name: "2563" },
+		{ id: "0", name: "ทั้งหมด" },
-		{ id: "1", name: "2564" },
+		{ id: "1", name: "2566" },
-		{ id: "2", name: "2565" },
+		{ id: "2", name: "2567" },
-		{ id: "2", name: "2566" },
+		{ id: "2", name: "2568" },
 	])
 
 	function convertType(val: string) {
@@ -150,6 +147,20 @@ export const useLeaveStore = defineStore("Leave", () => {
 				return "ใหม่"
 		}
 	}
+	function convertYear(val: string) {
+		switch (val) {
+			case "0":
+				return "ทั้งหมด"
+			case "1":
+				return "2566"
+			case "2":
+				return "2567"
+			case "3":
+				return "2568"
+			case "4":
+				return "2569"
+		}
+	}
 
 	const optionsSpecific = ref<OptionData[]>([
 		{ id: "0", name: "ลาไปศึกษา" },
@@ -234,5 +245,7 @@ export const useLeaveStore = defineStore("Leave", () => {
 		fecthList,
 		filterSelector,
 		searchFilterTable,
+		fiscalyearOP,
+		fiscalYearyear,
 	}
 })

src/modules/05_leave/views/Main.vue

@@ -24,9 +24,28 @@
 										</q-input>
 									</template>
 								</datepicker>
-
+								<q-select
+									v-if="currentTab === 'list'"
+									outlined
+									dense
+									lazy-rules
+									v-model="LeaveData.fiscalYearyear"
+									:label="`${'ปี พ.ศ.'}`"
+									emit-value
+									map-options
+									option-label="name"
+									:options="LeaveData.fiscalyearOP"
+									option-value="id"
+									hide-bottom-space
+									style="min-width: 150px"
+									class="col-xs-12 col-sm-auto"
+									@update:model-value="searchFilterTable"
+									@filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
+                    ) "
+								/>
 								<!-- filter เลือกปี -->
-								<datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="currentTab === 'list'">
+								<!-- <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="currentTab === 'list'">
 									<template #year="{ year }">{{ year + 543 }}</template>
 									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
 									<template #trigger>
@@ -36,7 +55,7 @@
 											</template>
 										</q-input>
 									</template>
-								</datepicker>
+								</datepicker> -->
 								<div class="q-ml-sm">
 									<!-- icon เพิ่มวันหยุด -->
 									<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
@@ -150,7 +169,10 @@ import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue"
 import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue"
 import { useCounterMixin } from "@/stores/mixin"
 import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
+import { useLeaveStore } from "@/modules/05_leave/store"
 
+const LeaveData = useLeaveStore()
+const { filterSelector, searchFilterTable } = LeaveData
 const router = useRouter()
 const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
 const dateMonth = ref<DataDateMonthObject>({