เพิ่ม filter แก้ไข store ปรับ ui

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

@@ -7,7 +7,7 @@
 					outlined
 					dense
 					lazy-rules
-					v-model="type"
+					v-model="LeaveData.LeaveType"
 					:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
 					:label="`${'ประเภทใบลา'}`"
 					emit-value
@@ -20,14 +20,14 @@
 					class="col-xs-12 col-sm-auto"
 					@update:model-value="searchFilterTable"
 					@filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'typeOptions'
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
                     ) "
 				/>
 				<q-select
 					outlined
 					dense
 					lazy-rules
-					v-model="status"
+					v-model="LeaveData.LeaveStatus"
 					:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
 					:label="`${'สถานะ'}`"
 					emit-value
@@ -40,7 +40,7 @@
 					class="col-xs-12 col-sm-auto"
 					@update:model-value="searchFilterTable"
 					@filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
                     ) "
 				/>
 				<q-space />
@@ -99,15 +99,21 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue"
+import { ref, useAttrs, reactive, onMounted } from "vue"
 import { useLeaveStore } from "@/modules/05_leave/store"
+import type { OptionData } from "@/modules/05_leave/interface/index/main"
 import type { an } from "@fullcalendar/core/internal-common"
+import { useCounterMixin } from "@/stores/mixin"
 
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, date2Thai, messageError } = mixin
 const DataStore = useLeaveStore()
 const LeaveData = useLeaveStore()
+const { filterSelector, searchFilterTable } = LeaveData
 const attrs = ref<any>(useAttrs())
 const table = ref<any>(null)
 const filterRef = ref<any>(null)
+
 const rows = ref<any[]>([])
 const type = ref("ทั้งหมด")
 const status = ref("ทั้งหมด")
@@ -115,15 +121,6 @@ const status = ref("ทั้งหมด")
 const initialPagination = ref({
 	rowsPerPage: 0,
 })
-const yearly = ref<number>(new Date().getFullYear())
-let OriginalData = ref<any[]>([])
-let UpdataData = ref<any[]>([])
-
-const OriginalDataFetch = async () => {
-	await DataStore.DataMain(rows.value)
-	OriginalData.value = await DataStore.DataMainOrig
-	UpdataData.value = OriginalData.value
-}
 
 const props = defineProps({
 	count: Number,
@@ -157,69 +154,6 @@ const resetFilter = () => {
 	emit("update:inputfilter", "")
 	filterRef.value.focus()
 }
-
-const searchFilterTable = async () => {
-	// ส่งไป filter รายการข้อมูลตามเงื่อนไข
-	await DataStore.DataUpdate(typeOptions.value, statusOptions.value)
-	UpdataData.value = DataStore.DataMainUpdate
-}
-
-// รายการข้อมูลประเภท
-const typeOptions = ref<string>("")
-const typeOptionsFilter1 = ref<any>([])
-const typeOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
-
-const TypeFilter = async () => {
-	//   await http
-	//     .get(config.API.typeOrder())
-	//     .then((res) => {
-	//       const response = res.data.result;
-	//       LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
-	//       TypeOption.value.push(...response);
-	//       typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
-	//       typeOptionsFilter1.value.push(...response);
-	//     })
-	//     .catch((e) => {
-	//       messageError($q, e);
-	//     });
-}
-
-// รายการข้อมูลประเภท
-const statusOptions = ref<string>("")
-const statusOptionsFilter1 = ref<any>([])
-const statusOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
-
-const statusOptionsFilter = async () => {
-	//   await http
-	//     .get(config.API.typeOrder())
-	//     .then((res) => {
-	//       const response = res.data.result;
-	//       LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
-	//       TypeOption.value.push(...response);
-	//       typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
-	//       typeOptionsFilter1.value.push(...response);
-	//     })
-	//     .catch((e) => {
-	//       messageError($q, e);
-	//     });
-}
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-	switch (refData) {
-		case "typeOptions":
-			update(() => {
-				LeaveData.typeOptions.values = typeOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
-			})
-			break
-		case "statusOptions":
-			update(() => {
-				LeaveData.statusOptions.values = statusOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
-			})
-			break
-		default:
-			break
-	}
-}
 </script>
 <style lang="scss">
 .icon-color {