ฟิลเตอร์วินัย ออกคำสั่ง

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

@@ -91,6 +91,9 @@ const objectAppeal: MyObjectAppealRef = {
   caseNumberRef: caseNumberRef,
 };
 
+const option = ref<any[]>(dataStore.typeOptions);
+const optionStatus = ref<any[]>(dataStore.statusOptionsEdit);
+
 /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
 const visibleColumns = ref<string[]>([
   "no",
@@ -329,6 +332,32 @@ function onSubmit() {
   });
 }
 
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = dataStore.typeOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFnStatus(val: string, update: Function) {
+  update(() => {
+    optionStatus.value = dataStore.statusOptionsEdit.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 onMounted(() => {
   dataStore.columns = columns.value;
   dataStore.visibleColumns = visibleColumns.value;
@@ -360,10 +389,19 @@ onMounted(() => {
                       lazy-rules
                       option-label="name"
                       option-value="id"
-                      :options="dataStore.typeOptions"
+                      :options="option"
                       :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
                       hide-bottom-space
-                    />
+                      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="col-3" v-if="isReadonly">
                     <q-select
@@ -381,8 +419,17 @@ onMounted(() => {
                       hide-bottom-space
                       option-label="name"
                       option-value="id"
-                      :options="dataStore.statusOptionsEdit"
-                    />
+                      :options="optionStatus"
+                      use-input
+                      @filter="filterOptionFnStatus"
+                      ><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-2 self-center" v-if="isReadonly">
                     <q-btn