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

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"