ฟิลเตอร์การลา

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

@@ -67,13 +67,18 @@ function updateVisible(value: []) {
 
 /** filter */
 const year = ref<number>(new Date().getFullYear());
-const type = ref<string>("00000000-0000-0000-0000-000000000000");
+
-const status = ref<string>("ALL");
 const filter = ref<string>("");
 
 /** function updateFilter*/
 function filterTable() {
-  emit("update:filter", year.value, type.value, status.value, filter.value);
+  emit(
+    "update:filter",
+    year.value,
+    leaveStore.type,
+    leaveStore.status,
+    filter.value
+  );
 }
 
 /** function updatePagination*/
@@ -134,7 +139,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         <q-select
           outlined
           dense
-          v-model="type"
+          v-model="leaveStore.type"
           :label="`${'ประเภทใบลา'}`"
           emit-value
           map-options
@@ -149,17 +154,31 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
           @filter="(inputValue:any,
                     doneFn:Function) => filterOption(inputValue, doneFn,'LeaveTypeOption'
                     ) "
+          typeOptionsMain
         >
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
             </q-item>
-          </template></q-select
+          </template>
-        >
+          <template
+            v-if="leaveStore.type !== '00000000-0000-0000-0000-000000000000'"
+            v-slot:append
+          >
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                (leaveStore.typeOptions = leaveStore.typeOptionsMain),
+                  (leaveStore.type = '00000000-0000-0000-0000-000000000000'),
+                  filterTable()
+              "
+              class="cursor-pointer"
+            /> </template
+        ></q-select>
         <q-select
           outlined
           dense
-          v-model="status"
+          v-model="leaveStore.status"
           :label="`${'สถานะ'}`"
           emit-value
           map-options
@@ -179,8 +198,18 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
             <q-item>
               <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
             </q-item>
-          </template></q-select
+          </template>
-        >
+          <template v-if="leaveStore.status !== 'ALL'" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                (leaveStore.statusOptions = leaveStore.statusOptionsMain),
+                  (leaveStore.status = 'ALL'),
+                  filterTable()
+              "
+              class="cursor-pointer"
+            /> </template
+        ></q-select>
         <q-space />
 
         <!-- แสดงคอลัมน์ใน table -->
@@ -209,7 +238,6 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       ref="table"
       flat
       bordered
-     
       v-bind="attrs"
       virtual-scroll
       :virtual-scroll-sticky-size-start="48"

src/modules/05_leave/store.ts

@@ -12,7 +12,8 @@ import { useCounterMixin } from "@/stores/mixin"
 const mixin = useCounterMixin()
 const { date2Thai, messageError } = mixin
 const $q = useQuasar()
-
+const type = ref<string>("00000000-0000-0000-0000-000000000000");
+const status = ref<string>("ALL");
 export const useLeaveStore = defineStore("Leave", () => {
 	const tabValue = ref<string>("calendar")
 	const typeLeave = ref<string | undefined>("")
@@ -113,11 +114,13 @@ export const useLeaveStore = defineStore("Leave", () => {
 	function filterOption(val: any, update: Function, refData: string) {
 		switch (refData) {
 			case "LeaveTypeOption":
+				type.value = ''
 				update(() => {
 					typeOptions.value = typeOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
 				})
 				break
 			case "LeaveStatusOption":
+				status.value = ''
 				update(() => {
 					statusOptions.value = statusOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
 				})
@@ -389,5 +392,9 @@ export const useLeaveStore = defineStore("Leave", () => {
 		convertStatud,
 		resetForm2,
 		fetchProfileOld,
+		type,
+		typeOptionsMain,
+		status,
+		statusOptionsMain
 	}
 })

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

@@ -79,6 +79,20 @@ function onSubmit(postData: FormData, isLeave: boolean = true) {
   }
 }
 
+const option = ref<any[]>(dataStore.options);
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = dataStore.options.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 onMounted(async () => {
   if (dataStore.options.length == 0) {
     await fectOptionType();
@@ -103,7 +117,7 @@ onMounted(async () => {
         <div>สร้างใบลา</div>
       </div>
 
-      <q-form ref="myform" >
+      <q-form ref="myform">
         <q-card bordered>
           <div class="row q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-sm-12">
@@ -124,7 +138,7 @@ onMounted(async () => {
                     class="col-12 col-sm-6 col-md-4 inputgreen"
                     outlined
                     v-model="model"
-                    :options="dataStore.options"
+                    :options="option"
                     option-value="code"
                     option-label="name"
                     emit-value
@@ -135,7 +149,16 @@ onMounted(async () => {
                         (modelSpecific = ''),
                         dataStore.fetchProfile()
                     "
-                  />
+                    use-input
+                    @filter="filterOptionFn"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template></q-select>
                 </div>
 
                 <div class="row q-mt-sm">