ฟิลเตอร์ วินัย/การลา

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -10,7 +10,7 @@ const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const currentPage = ref<number>(1);
 const statusFilter = ref<string>("NEW");
-
+const option = ref<any[]>(dataInvestigateDis.statusOptions);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -128,6 +128,20 @@ function dataUpdate() {
 function filterFn() {
   props.fetchListDisciplinary?.();
 }
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  statusFilter.value = "";
+  update(() => {
+    option.value = dataInvestigateDis.statusOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
 </script>
 
 <template>
@@ -142,16 +156,24 @@ function filterFn() {
         map-options
         option-label="name"
         option-value="id"
-        :options="dataInvestigateDis.statusOptions"
+        :options="option"
         @update:model-value="dataUpdate"
+        use-input
+        @filter="filterOptionFn"
       >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
         <template v-if="statusFilter !== 'ALL'" v-slot:append>
           <q-icon
             name="cancel"
-            @click.stop.prevent="(statusFilter = 'ALL'), dataUpdate()"
+            @click.stop.prevent="(option = dataInvestigateDis.statusOptions),(statusFilter = 'ALL'), dataUpdate()"
             class="cursor-pointer"
           />
         </template>
+
       </q-select>
     </div>
     <q-space />