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

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -375,6 +375,25 @@ onMounted(() => {
 
   getActive();
 });
+
+const optionOrganization = ref<any[]>(complainstStore.organizationIdOp);
+
+function filterOptionFnOrganization(val: string, update: Function) {
+  update(() => {
+    optionOrganization.value = complainstStore.organizationIdOp.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+const optionAgency = ref<any[]>(complainstStore.consideredAgencytoptions);
+
+function filterOptionFnAgency(val: string, update: Function) {
+  update(() => {
+    optionAgency.value = complainstStore.consideredAgencytoptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
 </script>
 
 <template>
@@ -453,13 +472,23 @@ onMounted(() => {
                   option-value="id"
                   map-options
                   v-model="organization"
-                  :options="complainstStore.organizationIdOp"
+                  :options="optionOrganization"
                   label="หน่วยงานที่ถูกร้องเรียน"
                   :rules="[
                     (val) => !!val || `${'กรุณาเลือกหน่วยงานที่ถูกร้องเรียน'}`,
                   ]"
                   @update:model-value="changeFormData()"
-                />
+                  use-input
+                  @filter="filterOptionFnOrganization"
+                >
+                  <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-xs-12 col-sm-8" id="consideredAgency">
@@ -470,7 +499,7 @@ onMounted(() => {
                   dense
                   outlined
                   v-model="consideredAgency"
-                  :options="complainstStore.consideredAgencytoptions"
+                  :options="optionAgency"
                   label="หน่วยงานที่พิจารณา"
                   option-value="id"
                   option-label="name"
@@ -478,12 +507,17 @@ onMounted(() => {
                   hide-bottom-space
                   map-options
                   :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                  use-input
-                  @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
-              )"
                   @update:model-value="changeFormData()"
+                  use-input
+                  @filter="filterOptionFnAgency"
                 >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
                 </q-select>
               </div>
 
@@ -577,10 +611,18 @@ onMounted(() => {
                               v-else-if="col.name === 'positionLevel'"
                               class="table_ellipsis"
                             >
-                              {{ props.row.positionLevel ? props.row.positionLevel:'-' }}
+                              {{
+                                props.row.positionLevel
+                                  ? props.row.positionLevel
+                                  : "-"
+                              }}
                             </div>
                             <div v-else-if="col.name === 'salary'">
-                              {{ props.row.salary ? props.row.salary.toLocaleString():'-' }}
+                              {{
+                                props.row.salary
+                                  ? props.row.salary.toLocaleString()
+                                  : "-"
+                              }}
                             </div>
                             <div v-else>
                               {{ col.value }}

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -30,7 +30,7 @@ const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
 const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
-
+const option = ref<any[]>(complainstStore.statusOptions);
 async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
   rowsPerPage.value = rowPerpage;
   page.value = pageCurrent;
@@ -80,6 +80,20 @@ function resetFilter() {
   }
 }
 
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  statusFilter.value = "";
+  update(() => {
+    option.value = complainstStore.statusOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   await getList();
@@ -102,13 +116,20 @@ onMounted(async () => {
           map-options
           option-label="name"
           option-value="id"
-          :options="complainstStore.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 = complainstStore.statusOptions),(statusFilter = 'ALL'), getList()"
               class="cursor-pointer"
             />
           </template>