From fba93a9fc7b3ce05d80198d4f9c89250569cb728 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 10 Jul 2024 15:11:22 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80=E0=B8=95?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A3=E0=B9=8C=20=E0=B8=A7=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=A2/=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../09_leave/components/1_Work/ToolBar.vue    | 13 +++-
 .../components/2_Leave/ToolBarLeave.vue       | 25 +++++++-
 .../4_specialTime/DialogApprove.vue           | 26 +++++++-
 .../components/1_Complaint/Form.vue           | 60 +++++++++++++++---
 .../components/1_Complaint/MainPage.vue       | 27 +++++++-
 .../2_InvestigateFacts/MainPage.vue           | 31 +++++++--
 .../3_InvestigateDisciplinary/Form.vue        | 33 +++++++---
 .../3_InvestigateDisciplinary/Table.vue       | 28 ++++++++-
 .../components/4_Result/Table.vue             | 28 ++++++++-
 .../components/8_AppealComplain/MainPage.vue  | 63 ++++++++++++++++---
 10 files changed, 289 insertions(+), 45 deletions(-)

diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
index 6f9ed5b28..999a3c2ed 100644
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -131,8 +131,17 @@ function calculateMaxDate() {
           <q-item>
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
-        </template></q-select
-      >
+        </template>
+        <template v-if="filetStatus !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (option = optionMain), (filetStatus = 'ALL'), filterFn()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
     </div>
     <q-space />
     <div class="col-xs-12 col-sm-3 col-md-2">
diff --git a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
index b43173c28..2c783866e 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
@@ -209,8 +209,17 @@ onMounted(async () => {
           <q-item>
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
-        </template></q-select
-      >
+        </template>
+        <template v-if="leaveStore.filter.type !== '00000000-0000-0000-0000-000000000000'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (optionType = optionTypeMain), (leaveStore.filter.type = '00000000-0000-0000-0000-000000000000'), filterListLeave()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select
@@ -235,7 +244,17 @@ onMounted(async () => {
           <q-item>
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
-        </template></q-select
+        </template>
+        <template v-if="leaveStore.filter.status !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (optionStatus = optionStatusMain), (leaveStore.filter.status = 'ALL'), filterListLeave()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+        </q-select
       >
     </div>
     <q-space />
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index 90f499b26..8bb3357e2 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -19,7 +19,7 @@ import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore"
 const SpecialTimeStore = useSpecialTimeStore();
 const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
-
+const option = ref<any[]>(SpecialTimeStore.optionStatus);
 const $q = useQuasar();
 
 /** props*/
@@ -159,6 +159,20 @@ watch(
     }
   }
 );
+
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+ function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = SpecialTimeStore.optionStatus.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
 </script>
 
 <template>
@@ -252,12 +266,20 @@ watch(
                 full-width
                 dense
                 v-model="formData.checkInStatus"
-                :options="SpecialTimeStore.optionStatus"
+                :options="option"
                 option-value="id"
                 option-label="name"
                 label="สถานะ"
                 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>
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 2c1ef1be4..2cf3b550a 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/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 }}
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 27b8ed54c..5cedd0ea0 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/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>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 244b8fea5..553c21519 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/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 />
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 339684b8e..44458dfd5 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -40,7 +40,7 @@ import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
-const isSaveInfo = defineModel<boolean>('isSaveInfo')
+const isSaveInfo = defineModel<boolean>("isSaveInfo");
 const calendarModal = ref<boolean>(false);
 const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
 const modalPopup = ref<boolean>(false);
@@ -211,7 +211,7 @@ function onSubmit() {
 
     emit("submit:disciplinary", formData);
     isSave.value = false;
-    isSaveInfo.value = false
+    isSaveInfo.value = false;
     extendStatus.value = false;
   });
 }
@@ -233,7 +233,7 @@ async function fetchDatadetail() {
     if (countNum.value === 1) {
       isReadonly.value = props.data.status != "NEW" ?? true;
       isSave.value = false;
-      isSaveInfo.value = false
+      isSaveInfo.value = false;
       formData.respondentType = props.data.respondentType;
       formData.organizationId = props.data.organizationId;
       formData.organization = props.data.organization;
@@ -525,7 +525,7 @@ async function selectComplainant(val: string) {
 /** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
 function changeFormData() {
   isSave.value = true;
-  isSaveInfo.value = true
+  isSaveInfo.value = true;
   if (formData.disciplinaryFaultLevel !== "อื่นๆ") {
     formData.disciplinaryFaultLevelOther = "";
   }
@@ -539,7 +539,7 @@ function changeFormData() {
 /** เช็ควันที่สิ้นสุดต้องมากกว่า หรือเท่ากับวันเริ่ม */
 function changeFormDataDate() {
   isSave.value = true;
-  isSaveInfo.value = true
+  isSaveInfo.value = true;
   const startDate = new Date(formData.disciplinaryDateStart as Date);
   const endDate = new Date(formData.disciplinaryDateEnd as Date);
 
@@ -678,6 +678,21 @@ function deletePerson(id: string) {
   mainStore.rowsAdd = updatedRows;
 }
 
+
+const option = ref<any[]>(mainStore.statusResultOptions);
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+ function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = mainStore.statusResultOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 /** Hook */
 onMounted(async () => {
   mainStore.rowsAdd = [];
@@ -1468,7 +1483,7 @@ onMounted(async () => {
                               {{ props.rowIndex + 1 }}
                             </div>
                             <div v-else class="table_ellipsis2">
-                              {{ col.value?col.value:'-' }}
+                              {{ col.value ? col.value : "-" }}
                             </div>
                           </q-td>
                           <q-td class="text-right">
@@ -1675,7 +1690,7 @@ onMounted(async () => {
                         :readonly="isReadonly"
                         ref="disciplinaryStatusResultRef"
                         v-model="formData.disciplinaryStatusResult"
-                        :options="mainStore.statusResultOptions"
+                        :options="option"
                         label="ผลการสอบสวน"
                         emit-value
                         hide-bottom-space
@@ -1683,9 +1698,7 @@ onMounted(async () => {
                         option-label="name"
                         option-value="id"
                         use-input
-                        @filter="(inputValue: any,
-                doneFn: Function) => investigateDis.filterFnOptionsType(inputValue, doneFn, 'offenseDetailsOps'
-                )"
+                        @filter="filterOptionFn"
                         @update:model-value="changeFormData()"
                         ><template v-slot:no-option>
                           <q-item>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 949985092..711f591b1 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/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 />
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index 71a17e97a..103c18796 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -8,6 +8,9 @@ const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const statusFilter = ref<string>("DONE");
+
+const option = ref<any[]>(store.statusOptions);
+
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -110,6 +113,20 @@ function updateInput(value: string | number | null) {
 function filterFn() {
   props.fetchListResult?.();
 }
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  statusFilter.value = "";
+  update(() => {
+    option.value = store.statusOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
 </script>
 
 <template>
@@ -125,13 +142,20 @@ function filterFn() {
         map-options
         option-label="name"
         option-value="id"
-        :options="store.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 = store.statusOptions),(statusFilter = 'ALL'), dataUpdate()"
             class="cursor-pointer"
           />
         </template>
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index 16e0b0cca..dad98cced 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/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>