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

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -12,7 +12,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
 const dataInvestigate = useInvestigateFactStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
-
+const option = ref<any[]>(dataInvestigate.statusOptions);
 const $q = useQuasar(); //ใช้ noti quasar
 
 /** ค้นหาข้อมูลในตาราง */
@@ -99,6 +99,20 @@ function filterFn() {
   getList();
 }
 
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  statusFilter.value = "";
+  update(() => {
+    option.value = dataInvestigate.statusOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -122,16 +136,25 @@ onMounted(async () => {
           map-options
           option-label="name"
           option-value="id"
-          :options="dataInvestigate.statusOptions"
+          :options="option"
           @update:model-value="getList()"
+          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'), getList()"
+              @click.stop.prevent="(option = dataInvestigate.statusOptions),(statusFilter = 'ALL'), getList()"
               class="cursor-pointer"
             /> </template
-        ></q-select>
+        >
+          </q-select
+        >
       </div>
       <q-space />