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

src/modules/11_discipline/components/8_AppealComplain/MainPage.vue

@@ -265,6 +265,31 @@ function resetFilter() {
   filterKeyword.value = "";
   getData();
 }
+const option = ref<any[]>(dataStore.statusOptions);
+const optionType = ref<any[]>(type.value);
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = dataStore.statusOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFnType(val: string, update: Function) {
+  update(() => {
+    optionType.value = type.value.filter((e: any) => e.name.search(val) !== -1);
+  });
+}
 
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
@@ -390,16 +415,27 @@ onMounted(async () => {
               map-options
               option-label="name"
               option-value="id"
-              :options="type"
+              :options="optionType"
               @update:model-value="dataUpdate"
+              use-input
+              @filter="filterOptionFnType"
             >
               <template v-if="formData.type !== 'ALL'" v-slot:append>
                 <q-icon
                   name="cancel"
-                  @click.stop.prevent="(formData.type = 'ALL'), dataUpdate()"
+                  @click.stop.prevent="
+                    (optionType = type),((formData.type = 'ALL')), dataUpdate()
+                  "
                   class="cursor-pointer"
                 />
               </template>
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
             </q-select>
           </div>
           <div class="col-3">
@@ -412,17 +448,30 @@ onMounted(async () => {
               map-options
               option-label="name"
               option-value="id"
-              :options="dataStore.statusOptions"
+              :options="option"
               @update:model-value="dataUpdate"
-              class="select_ellipsis2"
+              use-input
+              @filter="filterOptionFn"
             >
               <template v-if="formData.status !== 'ALL'" v-slot:append>
                 <q-icon
                   name="cancel"
-                  @click.stop.prevent="(formData.status = 'ALL'), dataUpdate()"
+                  @click.stop.prevent="
+                    (option = dataStore.statusOptions),
+                      (formData.status = 'ALL'),
+                      dataUpdate()
+                  "
                   class="cursor-pointer"
-                /> </template
-            ></q-select>
+                />
+              </template>
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
           </div>
         </div>
       </q-card>