From 97879802b12cfd070dc7d32b79476baa212adabb Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 2 Dec 2024 15:12:53 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20select=20/input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/AddPersonal.vue        | 13 +++-----
 .../components/probation/ProbationDetail.vue  |  2 +-
 .../components/1_Complaint/Form.vue           |  6 ++++
 .../components/1_Complaint/MainPage.vue       | 13 +++-----
 .../components/2_InvestigateFacts/Form.vue    |  8 ++++-
 .../2_InvestigateFacts/MainPage.vue           | 13 +++-----
 .../3_InvestigateDisciplinary/Form.vue        | 10 +++++-
 .../3_InvestigateDisciplinary/MainPage.vue    |  2 +-
 .../3_InvestigateDisciplinary/Table.vue       | 11 ++-----
 .../4_Result/DialogSendToCommand.vue          | 13 +++-----
 .../components/4_Result/EditPage.vue          |  2 +-
 .../components/4_Result/MainPage.vue          |  2 +-
 .../components/4_Result/Table.vue             | 12 ++-----
 .../6_BasicInformation/Channel/MainPage.vue   | 11 ++-----
 .../6_BasicInformation/Director/Form.vue      |  6 ++--
 .../6_BasicInformation/Director/MainPage.vue  | 10 ++----
 .../7_ListSuspend/DialogSendToCommand.vue     | 15 +++------
 .../components/7_ListSuspend/ListsPage.vue    | 11 ++-----
 .../components/8_AppealComplain/Form.vue      |  4 +++
 .../components/8_AppealComplain/MainPage.vue  | 14 ++++----
 .../components/DialogDirector.vue             | 10 ++----
 .../components/PopupSendToNext.vue            | 16 ++++------
 .../Detail/viewTab2/DialogDirector.vue        | 10 ++----
 .../components/Detail/viewTab2/DialogMeet.vue | 10 ++----
 .../components/Director/Form.vue              |  5 ++-
 .../components/Director/MainPage.vue          | 11 ++-----
 .../components/Meeting/MainPage.vue           | 11 ++-----
 .../12_evaluatePersonal/views/MainPage.vue    | 10 ++----
 .../02_salaryEmployee/DialogFormCriteria.vue  |  2 ++
 .../02_salaryEmployee/TabCriteria.vue         |  4 ++-
 .../02_salaryEmployee/TabStructure.vue        |  2 +-
 src/modules/13_salary/views/01_salaryMain.vue |  2 +-
 .../13_salary/views/04_salaryLists.vue        |  3 +-
 .../views/05_salaryListsEmployee.vue          |  3 +-
 .../components/results/tableIndividual.vue    | 12 ++-----
 .../components/results/tableResults.vue       | 10 ++----
 src/modules/14_KPI/views/02_kpiLists.vue      | 14 ++++----
 src/modules/14_KPI/views/03_results.vue       |  2 +-
 .../15_development/components/BasicInfo.vue   | 10 ++----
 .../15_development/components/Other.vue       |  2 ++
 .../components/ProjectDetail.vue              | 24 ++++----------
 .../15_development/views/EmployeeHistory.vue  | 12 ++-----
 src/modules/15_development/views/History.vue  | 12 ++-----
 src/modules/15_development/views/MainPage.vue | 32 +++----------------
 .../15_development/views/Scholarship.vue      | 10 ++----
 45 files changed, 138 insertions(+), 279 deletions(-)

diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
index 5d5bcb889..11b775c96 100644
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -49,8 +49,7 @@ const selected = ref<any>([]);
 
 const typeOps = ref<typeOp[]>([
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstname", name: "ชื่อ" },
-  { id: "lastname", name: "นามสกุล" },
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
 ]);
 
 /** รับค่ามาจาก หน้าหลัก */
@@ -131,12 +130,11 @@ async function getSearch() {
   showLoader();
   const body = {
     fieldName: type.value,
-    keyword: search.value,
+    keyword: search.value ? search.value.trim():'',
   };
   await http
     .post(
-      config.API.orgSearchPersonal() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
+      config.API.orgSearchPersonal(),
       body
     )
     .then((res) => {
@@ -236,7 +234,7 @@ watch(
       </q-toolbar>
       <q-separator />
       <q-card-section class="q-pa-md scroll" style="max-height: 80vh">
-        <div class="row col-12 q-col-gutter-sm items-start">
+        <div class="row col-12 q-col-gutter-sm items-start q-mb-sm">
           <div class="col-12 col-sm-5 col-md-3">
             <q-select
               label="ค้นหาจาก"
@@ -260,14 +258,13 @@ watch(
               clearable
               dense
               label="คำค้น"
-              :rules="[(val:string) => !!val || `กรุณากรอกคำค้น`]"
             >
               <template v-slot:after>
                 <q-btn
                   color="primary"
                   icon="search"
                   label="ค้นหา"
-                  outline
+                  unelevated
                   class="full-width q-py-sm q-px-md"
                   @click="searchInput()"
                 >
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index b608b742b..5dbb38a44 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -425,7 +425,7 @@ onMounted(async () => {
           ref="table"
           :columns="columns"
           :rows="rows"
-          :filter="filterKeyword"
+          :filter="filterKeyword.trim()"
           row-key="Order"
           flat
           bordered
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index aeda613a6..6cc9c304d 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -427,6 +427,8 @@ onMounted(async () => {
                   option-label="name"
                   emit-value
                   use-input
+                  hide-selected
+                  fill-input
                   map-options
                   hide-bottom-space
                   :options="complainstStore.complainantoptions"
@@ -462,6 +464,8 @@ onMounted(async () => {
                   outlined
                   option-label="name"
                   option-value="id"
+                  hide-selected
+                  fill-input
                   map-options
                   v-model="organization"
                   :options="optionOrganization"
@@ -498,6 +502,8 @@ onMounted(async () => {
                   :readonly="isReadonly || checkRoutePermisson"
                   hide-bottom-space
                   map-options
+                  hide-selected
+                  fill-input
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
                   @update:model-value="changeFormData()"
                   use-input
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 3c17b9b67..cf99083a5 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -48,7 +48,7 @@ async function getList() {
       config.API.complaintList(
         pagination.value.page,
         pagination.value.rowsPerPage,
-        filterKeyword.value,
+        filterKeyword.value.trim(),
         statusFilter.value
       )
     )
@@ -91,7 +91,6 @@ function resetFilter() {
  * @param update function
  */
 function filterOptionFn(val: string, update: Function) {
-  statusFilter.value = "";
   update(() => {
     option.value = complainstStore.statusOptions.filter(
       (e: any) => e.name.search(val) !== -1
@@ -133,6 +132,8 @@ onMounted(async () => {
           map-options
           option-label="name"
           option-value="id"
+          hide-selected
+          fill-input
           :options="option"
           @update:model-value="getSearch()"
           use-input
@@ -184,13 +185,7 @@ onMounted(async () => {
         @keydown.enter.prevent="getSearch()"
       >
         <template v-slot:append>
-          <q-icon v-if="filterKeyword == ''" name="search" />
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
 
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index f2af446c5..d8beba550 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -371,7 +371,7 @@ async function getList() {
       config.API.directorList(
         pagination.value.page,
         pagination.value.rowsPerPage,
-        filterKeyword2.value,
+        filterKeyword2.value.trim(),
         mainStore.pathDirector(route.name as string)
       )
     )
@@ -792,6 +792,8 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   emit-value
+                  hide-selected
+                  fill-input
                   use-input
                   map-options
                   hide-bottom-space
@@ -828,6 +830,8 @@ onMounted(async () => {
                   option-label="name"
                   option-value="id"
                   v-model="organization"
+                  hide-selected
+                  fill-input
                   :options="option"
                   label="หน่วยงานที่ถูกร้องเรียน"
                   clearable
@@ -871,6 +875,8 @@ onMounted(async () => {
                   label="ลักษณะการสืบสวน"
                   emit-value
                   map-options
+                  hide-selected
+                  fill-input
                   clearable
                   option-label="name"
                   option-value="id"
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 405a53e3c..d14ce7985 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -50,7 +50,7 @@ async function getList() {
       config.API.investigateMain(
         pagination.value.page,
         pagination.value.rowsPerPage,
-        filterKeyword.value,
+        filterKeyword.value.trim(),
         statusFilter.value
       )
     )
@@ -141,6 +141,8 @@ onMounted(async () => {
           outlined
           emit-value
           map-options
+          hide-selected
+          fill-input
           option-label="name"
           option-value="id"
           :options="option"
@@ -180,13 +182,7 @@ onMounted(async () => {
         @keydown.enter.prevent="getSerach()"
       >
         <template v-slot:append>
-          <q-icon v-if="filterKeyword == ''" name="search" />
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon  name="search" />
         </template>
       </q-input>
 
@@ -202,7 +198,6 @@ onMounted(async () => {
         map-options
         :options="dataInvestigate.columns"
         option-value="name"
-        
         style="min-width: 140px"
         class="col-xs-12 col-sm-3 col-md-2"
       />
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index a6ad52611..cf207ed12 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -451,7 +451,7 @@ async function fetchDListDirector() {
       config.API.directorList(
         pagination.value.page,
         pagination.value.rowsPerPage,
-        filterKeyword2.value,
+        filterKeyword2.value.trim(),
         mainStore.pathDirector(route.name as string)
       )
     )
@@ -782,6 +782,8 @@ onMounted(async () => {
                     option-label="name"
                     emit-value
                     use-input
+                    hide-selected
+                    fill-input
                     map-options
                     hide-bottom-space
                     :options="complainstStore.complainantoptions"
@@ -818,6 +820,8 @@ onMounted(async () => {
                     outlined
                     option-label="name"
                     option-value="id"
+                    hide-selected
+                    fill-input
                     map-options
                     v-model="organization"
                     :options="optionOrganization"
@@ -1768,6 +1772,8 @@ onMounted(async () => {
                         :options="option"
                         label="ผลการสอบสวน"
                         emit-value
+                        hide-selected
+                        fill-input
                         hide-bottom-space
                         map-options
                         option-label="name"
@@ -1793,6 +1799,8 @@ onMounted(async () => {
                         :readonly="isReadonly || checkRoutePermisson"
                         for="#fault"
                         outlined
+                        hide-selected
+                        fill-input
                         dense
                         ref="disciplinaryCauseTextRef"
                         v-model="formData.disciplinaryCauseText"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 716cb61e0..0c54707c0 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -33,7 +33,7 @@ async function fetchListDisciplinary() {
   await http
     .get(
       config.API.disciplineDisciplinary() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value.trim()}&status=${status.value}`
     )
     .then((res) => {
       const data = res.data.result.data;
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 4547f3294..845b08b09 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -123,7 +123,6 @@ function filterFn() {
  * @param update function
  */
 function filterOptionFn(val: string, update: Function) {
-  statusFilter.value = "";
   update(() => {
     option.value = dataInvestigateDis.statusOptions.filter(
       (e: any) => e.name.search(val) !== -1
@@ -146,6 +145,8 @@ function updatePagination(newPagination: any) {
         dense
         outlined
         emit-value
+        hide-selected
+        fill-input
         map-options
         option-label="name"
         option-value="id"
@@ -187,13 +188,7 @@ function updatePagination(newPagination: any) {
       @keydown.enter.prevent="filterFn"
     >
       <template v-slot:append>
-        <q-icon v-if="inputfilter == ''" name="search" />
-        <q-icon
-          v-if="inputfilter !== ''"
-          name="clear"
-          class="cursor-pointer"
-          @click="resetFilter"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <!-- แสดงคอลัมน์ใน table -->
diff --git a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
index b38cf8926..4edb05949 100644
--- a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
@@ -192,6 +192,8 @@ watch(
                 option-value="code"
                 emit-value
                 map-options
+                hide-selected
+                fill-input
                 use-input
                 style="width: 350px; max-width: auto"
                 @update:model-value="selected = []"
@@ -223,13 +225,7 @@ watch(
                 style="width: 850px; max-width: auto"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <q-select
@@ -243,7 +239,6 @@ watch(
                 map-options
                 :options="props.columns"
                 option-value="name"
-                
                 style="min-width: 140px"
                 class="gt-xs q-ml-sm"
               />
@@ -254,7 +249,7 @@ watch(
         <d-table
           :columns="props.columns"
           :rows="rows"
-          :filter="filterKeyword2"
+          :filter="filterKeyword2?.trim()"
           row-key="id"
           :visible-columns="props.visibleColumns"
           selection="multiple"
diff --git a/src/modules/11_discipline/components/4_Result/EditPage.vue b/src/modules/11_discipline/components/4_Result/EditPage.vue
index 4250d7a48..1efc15ace 100644
--- a/src/modules/11_discipline/components/4_Result/EditPage.vue
+++ b/src/modules/11_discipline/components/4_Result/EditPage.vue
@@ -15,7 +15,7 @@ import type {
   ArrayPerson,
   ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
-import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/investigateFact";
 
 import DialogSendToCommand from "@/modules/11_discipline/components/4_Result/DialogSendToCommand.vue";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
diff --git a/src/modules/11_discipline/components/4_Result/MainPage.vue b/src/modules/11_discipline/components/4_Result/MainPage.vue
index ae917ad4c..ad3dd77c2 100644
--- a/src/modules/11_discipline/components/4_Result/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Result/MainPage.vue
@@ -36,7 +36,7 @@ async function fetchListResult() {
   await http
     .get(
       config.API.listResult() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value.trim()}&status=${status.value}`
     )
     .then(async (res) => {
       const data = res.data.result.data;
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index 3af4384d0..79405acb0 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -80,7 +80,6 @@ function updatePaging(p: number, pS: number, key: string) {
   emit("update:queryString", p, pS, key);
 }
 
-
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
 }
@@ -98,7 +97,6 @@ function filterFn() {
  * @param update function
  */
 function filterOptionFn(val: string, update: Function) {
-  statusFilter.value = "";
   update(() => {
     option.value = store.statusOptions.filter(
       (e: any) => e.name.search(val) !== -1
@@ -123,6 +121,8 @@ function updatePagination(newPagination: any) {
         outlined
         emit-value
         map-options
+        hide-selected
+        fill-input
         option-label="name"
         option-value="id"
         :options="option"
@@ -162,13 +162,7 @@ function updatePagination(newPagination: any) {
       class="col-xs-12 col-sm-3 col-md-2"
     >
       <template v-slot:append>
-        <q-icon v-if="inputfilter == ''" name="search" />
-        <q-icon
-          v-if="inputfilter !== ''"
-          name="clear"
-          class="cursor-pointer"
-          @click="resetFilter"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
index 774c26568..4129158e0 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
@@ -198,13 +198,7 @@ onMounted(() => {
         placeholder="ค้นหา"
       >
         <template v-slot:append>
-          <q-icon v-if="filterKeyword == ''" name="search" />
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
 
@@ -220,7 +214,6 @@ onMounted(() => {
         map-options
         :options="dataStore.columns"
         option-value="name"
-        
         style="min-width: 140px"
         class="col-xs-12 col-sm-3 col-md-2"
       />
@@ -230,7 +223,7 @@ onMounted(() => {
         :columns="dataStore.columns"
         :rows="dataStore.rows"
         row-key="id"
-        :filter="filterKeyword"
+        :filter="filterKeyword.trim()"
         :visible-columns="dataStore.visibleColumns"
         v-model:pagination="pagination"
       >
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 003c2bb09..041e0e02c 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -50,8 +50,7 @@ const props = defineProps({
 const type = ref<string>("citizenId");
 const typeOps = ref<typeOp[]>([
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstname", name: "ชื่อ" },
-  { id: "lastname", name: "นามสกุล" },
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
 ]);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
@@ -321,7 +320,6 @@ watch(
                   hide-bottom-space
                   dense
                   label="คำค้น"
-                  :rules="[(val:string) => !!val || `กรุณากรอกคำค้น`]"
                 >
                   <template v-slot:after>
                     <q-btn
@@ -329,7 +327,7 @@ watch(
                       icon="search"
                       label="ค้นหา"
                       class="full-width q-py-sm q-px-md"
-                      outline
+                      unelevated
                       @click="searchInput()"
                     >
                     </q-btn>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index a4345a076..a1fa3291a 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -52,7 +52,7 @@ async function getList() {
       config.API.directorList(
         pagination.value.page,
         pagination.value.rowsPerPage,
-        filterKeyword.value,
+        filterKeyword.value.trim(),
         mainStore.pathDirector(route.name as string)
       )
     )
@@ -189,13 +189,7 @@ onMounted(() => {
         @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
-          <q-icon v-if="filterKeyword == ''" name="search" />
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
 
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
index d4dd1135a..5a63008cc 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -183,6 +183,8 @@ watch(
             option-label="name"
             option-value="code"
             emit-value
+            hide-selected
+            fill-input
             map-options
             use-input
             style="width: 350px; max-width: auto"
@@ -209,13 +211,7 @@ watch(
             style="width: 200px; max-width: auto"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filterKeyword = ''"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
 
@@ -230,7 +226,6 @@ watch(
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="gt-xs q-ml-sm"
           />
@@ -239,7 +234,7 @@ watch(
         <d-table
           :columns="columns"
           :rows="rows"
-          :filter="filterKeyword"
+          :filter="filterKeyword.trim()"
           row-key="id"
           :visible-columns="visibleColumns"
           selection="multiple"
@@ -293,6 +288,6 @@ watch(
   <DialogCreateCommand
     v-model:modal="modalCommand"
     :command-type-code="commandType"
-    :persons="selected ? dataMapToSend:[]"
+    :persons="selected ? dataMapToSend : []"
   />
 </template>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index a350ba517..1469ca651 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -165,7 +165,7 @@ async function getList() {
       config.API.suspendMain(
         pagination.value.page,
         pagination.value.rowsPerPage,
-        filterKeyword.value
+        filterKeyword.value.trim()
       )
     )
     .then(async (res) => {
@@ -247,13 +247,7 @@ onMounted(async () => {
             @keydown.enter.prevent="filterFn"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
 
@@ -268,7 +262,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />
diff --git a/src/modules/11_discipline/components/8_AppealComplain/Form.vue b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
index d93112597..ddbfeb82e 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/Form.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
@@ -389,6 +389,8 @@ onMounted(() => {
                       dense
                       outlined
                       emit-value
+                      hide-selected
+                      fill-input
                       map-options
                       lazy-rules
                       option-label="name"
@@ -417,6 +419,8 @@ onMounted(() => {
                       dense
                       bg-color="white"
                       outlined
+                      hide-selected
+                      fill-input
                       emit-value
                       lazy-rules
                       :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index 0af18a902..abc146233 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -223,7 +223,7 @@ async function getData() {
       totalList.value = Math.ceil(
         res.data.result.total / pagination.value.rowsPerPage
       );
-       total.value = res.data.result.total;
+      total.value = res.data.result.total;
       fetchAppealComplain(res.data.result.data);
     })
     .catch((e) => {
@@ -279,7 +279,6 @@ function filterOptionFnType(val: string, update: Function) {
 function updatePagination(newPagination: any) {
   pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
-
 }
 
 function getSearch() {
@@ -335,12 +334,7 @@ onMounted(async () => {
         @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
 
@@ -417,6 +411,8 @@ onMounted(async () => {
               outlined
               emit-value
               map-options
+              hide-selected
+              fill-input
               option-label="name"
               option-value="id"
               :options="optionType"
@@ -449,6 +445,8 @@ onMounted(async () => {
               dense
               outlined
               emit-value
+              hide-selected
+              fill-input
               map-options
               option-label="name"
               option-value="id"
diff --git a/src/modules/11_discipline/components/DialogDirector.vue b/src/modules/11_discipline/components/DialogDirector.vue
index 42a2b3ff6..71c644647 100644
--- a/src/modules/11_discipline/components/DialogDirector.vue
+++ b/src/modules/11_discipline/components/DialogDirector.vue
@@ -144,7 +144,7 @@ function updateInput() {
 
 /**รีเซ็ตค่าในช่องค้นหา */
 function Reset() {
-  filterKeyword2.value = ''
+  filterKeyword2.value = "";
   props.getSearch?.();
 }
 
@@ -183,13 +183,7 @@ watch(
           style="max-width: 100%"
         >
           <template v-slot:append>
-            <q-icon v-if="filterKeyword2 == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword2 !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="Reset"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>
 
diff --git a/src/modules/11_discipline/components/PopupSendToNext.vue b/src/modules/11_discipline/components/PopupSendToNext.vue
index 95488161d..035fb7355 100644
--- a/src/modules/11_discipline/components/PopupSendToNext.vue
+++ b/src/modules/11_discipline/components/PopupSendToNext.vue
@@ -72,7 +72,11 @@ const initialPagination = ref<any>({
 
 /** ฟังชั่นส่งคนไปออกคำสั่ง */
 function onclickSend() {
-  if (props.title == "ส่งไปพักราชการ" || props.title == "ส่งไปสืบสวน" || props.title == "ส่งไปสอบสวน") {
+  if (
+    props.title == "ส่งไปพักราชการ" ||
+    props.title == "ส่งไปสืบสวน" ||
+    props.title == "ส่งไปสอบสวน"
+  ) {
     if (selected.value.length === 0) {
       dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 บุคคล");
     } else {
@@ -142,13 +146,7 @@ watch(
               class="q-ml-sm"
             >
               <template v-slot:append>
-                <q-icon v-if="filter == ''" name="search" />
-                <q-icon
-                  v-if="filter !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="filter = ''"
-                />
+                <q-icon name="search" />
               </template>
             </q-input>
             <!-- แสดงคอลัมน์ใน table -->
@@ -173,7 +171,7 @@ watch(
           ref="table"
           :columns="props.columns"
           :rows="props.rows"
-          :filter="filter"
+          :filter="filter.trim()"
           row-key="personId"
           flat
           bordered
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
index a21786d04..9d32dd974 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
@@ -192,20 +192,14 @@ watch(
           style="max-width: 100%"
         >
           <template v-slot:append>
-            <q-icon v-if="filterKeyword2 == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword2 !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="Reset"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>
 
         <d-table
           :columns="columns2"
           :rows="rows2"
-          :filter="filterKeyword2"
+          :filter="filterKeyword2?.trim()"
           row-key="id"
           :visible-columns="visibleColumns2"
           selection="multiple"
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
index 41ddad637..31419acac 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
@@ -194,20 +194,14 @@ watch(
           style="max-width: 100%"
         >
           <template v-slot:append>
-            <q-icon v-if="filterKeyword2 == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword2 !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="Reset"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>
 
         <d-table
           :columns="columns"
           :rows="rows2"
-          :filter="filterKeyword2"
+          :filter="filterKeyword2?.trim()"
           row-key="id"
           selection="multiple"
           v-model:selected="selected"
diff --git a/src/modules/12_evaluatePersonal/components/Director/Form.vue b/src/modules/12_evaluatePersonal/components/Director/Form.vue
index a219a2a77..f8dcd92fd 100644
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@@ -55,8 +55,7 @@ const type = ref<string>("citizenId");
 const search = ref<string>("");
 const typeOps = ref<typeOp[]>([
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstname", name: "ชื่อ" },
-  { id: "lastname", name: "นามสกุล" },
+  { id: "fullName", name: "ชื่อ - นามสกุล" },
 ]);
 
 /**
@@ -303,9 +302,9 @@ onMounted(async () => {
                     <q-btn
                       color="primary"
                       icon="search"
+                      unelevated
                       label="ค้นหา"
                       class="full-width q-py-sm q-px-md"
-                      outline
                       @click="searchInput()"
                     >
                     </q-btn>
diff --git a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
index 038449bff..3383de097 100644
--- a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
@@ -139,13 +139,7 @@ onMounted(() => {
         placeholder="ค้นหา"
       >
         <template v-slot:append>
-          <q-icon v-if="filterKeyword == ''" name="search" />
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
 
@@ -160,7 +154,6 @@ onMounted(() => {
         map-options
         :options="dataStore.columns"
         option-value="name"
-        
         style="min-width: 140px"
         class="col-xs-12 col-sm-3 col-md-2"
       />
@@ -170,7 +163,7 @@ onMounted(() => {
       <d-table
         :columns="dataStore.columns"
         :rows="dataStore.rows"
-        :filter="filterKeyword"
+        :filter="filterKeyword.trim()"
         row-key="tb-list"
         flat
         bordered
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue b/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
index dc1a2a465..817b6250d 100644
--- a/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue
@@ -113,13 +113,7 @@ onMounted(() => {
         placeholder="ค้นหา"
       >
         <template v-slot:append>
-          <q-icon v-if="filterKeyword == ''" name="search" />
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
 
@@ -134,7 +128,6 @@ onMounted(() => {
         map-options
         :options="dataStore.columns"
         option-value="name"
-        
         style="min-width: 140px"
         class="col-xs-12 col-sm-3 col-md-2"
       />
@@ -144,7 +137,7 @@ onMounted(() => {
       <d-table
         :columns="dataStore.columns"
         :rows="dataStore.rows"
-        :filter="filterKeyword"
+        :filter="filterKeyword.trim()"
         row-key="tb-list"
         flat
         bordered
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index 1fb743321..0c3dccc9a 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -98,7 +98,7 @@ async function fetchEvaluteList() {
   const body = {
     page: currentPage.value,
     pageSize: pageSize.value,
-    keyword: filter.value,
+    keyword: filter.value.trim(),
     status: selectedStatus.value,
   };
   await http
@@ -215,13 +215,7 @@ onMounted(async () => {
         @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
-          <q-icon v-if="filter == ''" name="search" />
-          <q-icon
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon  name="search" />
         </template>
       </q-input>
 
diff --git a/src/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue b/src/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue
index 478c172d6..5914a7760 100644
--- a/src/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue
@@ -537,6 +537,8 @@ watch(
                 lazy-rules
                 :options="groupOldOp"
                 map-options
+                hide-selected
+                fill-input
                 option-label="name"
                 option-value="id"
                 emit-value
diff --git a/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue b/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
index b92c37b45..bbc40f44d 100644
--- a/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
@@ -186,7 +186,7 @@ function getData() {
   http
     .get(
       config.API.salaryFormula() +
-        `/?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}&posTypeId=${posType.value}`
+        `/?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword.trim()}&posTypeId=${posType.value}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -317,6 +317,8 @@ onMounted(async () => {
         option-value="id"
         emit-value
         map-options
+        hide-selected
+        fill-input
         use-input
         @update:model-value="filterFn"
         @filter="(inputValue: string,
diff --git a/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
index 507e500a4..f0f1951e8 100644
--- a/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
@@ -102,7 +102,7 @@ async function fetchListChart() {
   await http
     .get(
       config.API.salaryEmployeeChart +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword.trim()}`
     )
     .then((res) => {
       rows.value = res.data.result.data;
diff --git a/src/modules/13_salary/views/01_salaryMain.vue b/src/modules/13_salary/views/01_salaryMain.vue
index 8f46baeac..9a5de8e8d 100644
--- a/src/modules/13_salary/views/01_salaryMain.vue
+++ b/src/modules/13_salary/views/01_salaryMain.vue
@@ -105,7 +105,7 @@ async function fetchListSalaly() {
   showLoader();
   const page = formQuery.page.toString();
   const pageSize = formQuery.pageSize.toString();
-  const keyword = formQuery.keyword.toString();
+  const keyword = formQuery.keyword.toString().trim();
   await http
     .get(
       config.API.salaryChart +
diff --git a/src/modules/13_salary/views/04_salaryLists.vue b/src/modules/13_salary/views/04_salaryLists.vue
index 9b1f9883a..c03a5d560 100644
--- a/src/modules/13_salary/views/04_salaryLists.vue
+++ b/src/modules/13_salary/views/04_salaryLists.vue
@@ -366,7 +366,6 @@ function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "agencyFilter":
       update(() => {
-        agencyFilter.value = val === "" ? agencyFilter.value : "";
         agencyOptions.value = agencyOptionsMain.value.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
@@ -501,6 +500,8 @@ onMounted(async () => {
         outlined
         emit-value
         map-options
+        hide-selected
+        fill-input
         option-label="name"
         option-value="id"
         :options="agencyOptions"
diff --git a/src/modules/13_salary/views/05_salaryListsEmployee.vue b/src/modules/13_salary/views/05_salaryListsEmployee.vue
index bd7d5daae..a8d722dc8 100644
--- a/src/modules/13_salary/views/05_salaryListsEmployee.vue
+++ b/src/modules/13_salary/views/05_salaryListsEmployee.vue
@@ -357,7 +357,6 @@ function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "agencyFilter":
       update(() => {
-        agencyFilter.value = val === "" ? agencyFilter.value : "";
         agencyOptions.value = agencyOptionsMain.value.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
@@ -493,6 +492,8 @@ onMounted(async () => {
         map-options
         option-label="name"
         option-value="id"
+        hide-selected
+        fill-input
         :options="agencyOptions"
         lazy-rules
         hide-bottom-space
diff --git a/src/modules/14_KPI/components/results/tableIndividual.vue b/src/modules/14_KPI/components/results/tableIndividual.vue
index 8085e24a6..90f8c65e5 100644
--- a/src/modules/14_KPI/components/results/tableIndividual.vue
+++ b/src/modules/14_KPI/components/results/tableIndividual.vue
@@ -14,7 +14,7 @@ import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import type {
   ResRound,
   ResDevelopment,
-} from "@/modules/14_KPI/interface/response/index";
+} from "@/modules/14_KPI/interface/response/Index";
 
 /** importComponents*/
 import DialogIndividual from "@/modules/14_KPI/components/results/dialogIndividual.vue";
@@ -143,7 +143,7 @@ async function fetcDataList() {
     .post(config.API.achievementDev, {
       page: page.value,
       pageSize: pageSize.value,
-      keyword: keyword.value,
+      keyword: keyword.value.trim(),
       kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
     })
     .then(async (res) => {
@@ -296,13 +296,7 @@ onMounted(async () => {
         @keydown.enter="onSearchData"
       >
         <template v-slot:append>
-          <q-icon v-if="keyword === ''" name="search" />
-          <q-icon
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="(keyword = ''), onSearchData()"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
       <q-select
diff --git a/src/modules/14_KPI/components/results/tableResults.vue b/src/modules/14_KPI/components/results/tableResults.vue
index e9996e8dc..379097c81 100644
--- a/src/modules/14_KPI/components/results/tableResults.vue
+++ b/src/modules/14_KPI/components/results/tableResults.vue
@@ -332,13 +332,7 @@ onMounted(async () => {
           @keydown.enter="onSearchData"
         >
           <template v-slot:append>
-            <q-icon v-if="keyword === ''" name="search" />
-            <q-icon
-              v-else
-              name="clear"
-              class="cursor-pointer"
-              @click="(keyword = ''), onSearchData()"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>
         <q-select
@@ -385,6 +379,8 @@ onMounted(async () => {
               map-options
               :options="resultOp"
               option-value="id"
+              hide-selected
+              fill-input
               option-label="name"
               lazy-rules
               hide-bottom-space
diff --git a/src/modules/14_KPI/views/02_kpiLists.vue b/src/modules/14_KPI/views/02_kpiLists.vue
index 736d34ff0..6d2572175 100644
--- a/src/modules/14_KPI/views/02_kpiLists.vue
+++ b/src/modules/14_KPI/views/02_kpiLists.vue
@@ -143,7 +143,7 @@ async function fetchList() {
     page: formQuery.page,
     pageSize: formQuery.pageSize,
     kpiPeriodId: store.formQuery.round,
-    keyword: store.formQuery.keyword,
+    keyword: store.formQuery.keyword.trim(),
     status: formQuery.status === "" ? undefined : formQuery.status,
     results: formQuery.results === "" ? undefined : formQuery.results,
   };
@@ -322,13 +322,7 @@ onMounted(async () => {
             @keydown.enter.prevent="changRound"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="store.formQuery.keyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="(store.formQuery.keyword = ''), changRound()"
-              />
-              <q-icon v-else name="search" color="grey-5" />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -373,6 +367,8 @@ onMounted(async () => {
                 emit-value
                 map-options
                 :options="statusOp"
+                hide-selected
+                fill-input
                 option-value="id"
                 option-label="name"
                 lazy-rules
@@ -408,6 +404,8 @@ onMounted(async () => {
                 :options="resultOp"
                 option-value="id"
                 option-label="name"
+                hide-selected
+                fill-input
                 lazy-rules
                 hide-bottom-space
                 outlined
diff --git a/src/modules/14_KPI/views/03_results.vue b/src/modules/14_KPI/views/03_results.vue
index bdf1245f1..cc20b1f0a 100644
--- a/src/modules/14_KPI/views/03_results.vue
+++ b/src/modules/14_KPI/views/03_results.vue
@@ -42,7 +42,7 @@ async function fetcDataList() {
       status: tab.value,
       page: page.value,
       pageSize: pageSize.value,
-      keyword: keyword.value,
+      keyword: keyword.value.trim(),
       kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
       results: result.value === "" ? undefined : result.value,
     })
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index a867ea8e4..f9effcd94 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -164,13 +164,7 @@ onMounted(async () => {
               label="ค้นหา"
             >
               <template v-slot:append>
-                <q-icon
-                  v-if="filter !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="filter = ''"
-                />
-                <q-icon v-else name="search" color="grey-5" />
+                <q-icon name="search" />
               </template>
             </q-input>
             <q-tree
@@ -180,7 +174,7 @@ onMounted(async () => {
               node-key="orgTreeId"
               label-key="labelName"
               v-model:expanded="expanded"
-              :filter="filter"
+              :filter="filter.trim()"
               no-results-label="ไม่พบข้อมูลที่ค้นหา"
               no-nodes-label="ไม่มีข้อมูล"
               :style="
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 9c747003e..93acfef4e 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -568,6 +568,8 @@ defineExpose({
                 emit-value
                 map-options
                 hide-bottom-space
+                hide-selected
+                fill-input
                 class="inputgreen"
                 lazy-rules
                 :rules="[
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index f1c12d817..3bade272e 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -411,16 +411,9 @@ defineExpose({
                     outlined
                     v-model="filter"
                     label="ค้นหา"
-                    class="inputgreen"
                   >
                     <template v-slot:append>
-                      <q-icon
-                        v-if="filter !== ''"
-                        name="clear"
-                        class="cursor-pointer"
-                        @click="filter = ''"
-                      />
-                      <q-icon v-else name="search" color="grey-5" />
+                      <q-icon name="search" />
                     </template>
                   </q-input>
                   <q-tree
@@ -430,7 +423,7 @@ defineExpose({
                     selected-color="primary"
                     node-key="id"
                     label-key="name"
-                    :filter="filter"
+                    :filter="filter.trim()"
                     :no-results-label="notFound"
                     :no-nodes-label="noData"
                     v-model:expanded="expanded"
@@ -476,16 +469,9 @@ defineExpose({
                     outlined
                     v-model="filter2"
                     label="ค้นหา"
-                    class="inputgreen"
                   >
                     <template v-slot:append>
-                      <q-icon
-                        v-if="filter2 !== ''"
-                        name="clear"
-                        class="cursor-pointer"
-                        @click="filter2 = ''"
-                      />
-                      <q-icon v-else name="search" color="grey-5" />
+                      <q-icon name="search" />
                     </template>
                   </q-input>
                   <q-tree
@@ -494,7 +480,7 @@ defineExpose({
                     :nodes="nodes"
                     node-key="id"
                     label-key="name"
-                    :filter="filter2"
+                    :filter="filter2.trim()"
                     :no-results-label="notFound"
                     :no-nodes-label="noData"
                     v-model:expanded="expanded2"
@@ -682,6 +668,8 @@ defineExpose({
                     option-label="name"
                     option-value="id"
                     emit-value
+                    fill-input
+                    hide-selected
                     map-options
                     class="inputgreen"
                     use-input
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index 6fe514cb9..70cc85563 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -195,6 +195,7 @@ function onEdit(id: string) {
 /** ดึงข้อมูล */
 async function getData() {
   showLoader();
+  formFilter.keyword = formFilter.keyword.trim()
   await http
     .post(config.API.developmentHistoryList("employee"), formFilter)
     .then((res) => {
@@ -362,16 +363,7 @@ onMounted(async () => {
             @keydown.enter.prevent="(formFilter.page = 1), getData()"
           >
             <template v-slot:append>
-              <q-icon v-if="formFilter.keyword == ''" name="search" />
-              <q-icon
-                v-if="formFilter.keyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="
-                  formFilter.keyword = '';
-                  getData();
-                "
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
         </div>
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 5c7b84497..b65b6d413 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -182,6 +182,7 @@ function fetchListOrg() {
  */
 async function getData() {
   showLoader();
+  formFilter.keyword = formFilter.keyword.trim();
   await http
     .post(config.API.developmentHistoryList("officer"), formFilter)
     .then((res) => {
@@ -384,16 +385,7 @@ onMounted(() => {
             @keydown.enter.prevent="(formFilter.page = 1), getData()"
           >
             <template v-slot:append>
-              <q-icon v-if="formFilter.keyword == ''" name="search" />
-              <q-icon
-                v-if="formFilter.keyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="
-                  formFilter.keyword = '';
-                  getData();
-                "
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
         </div>
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 2854f062b..8a17301d8 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -120,7 +120,7 @@ async function fetchListProject() {
   await http
     .get(
       config.API.developmentMain +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}&node=${formQuery.node}&nodeId=${formQuery.nodeId}`
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword.trim()}&year=${formQuery.year}&status=${formQuery.status}&node=${formQuery.node}&nodeId=${formQuery.nodeId}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -301,13 +301,7 @@ onMounted(() => {
             <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
             <q-input dense outlined v-model="filterMain" label="ค้นหา">
               <template v-slot:append>
-                <q-icon
-                  v-if="filterMain !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="filterMain = ''"
-                />
-                <q-icon v-else name="search" color="grey-5" />
+                <q-icon name="search" />
               </template>
             </q-input>
 
@@ -318,7 +312,7 @@ onMounted(() => {
               node-key="orgTreeName"
               label-key="labelName"
               v-model:expanded="expanded"
-              :filter="filterMain"
+              :filter="filterMain.trim()"
               no-results-label="ไม่พบข้อมูลที่ค้นหา"
               no-nodes-label="ไม่มีข้อมูล"
               v-model:selected="formQuery.nodeId"
@@ -454,17 +448,7 @@ onMounted(() => {
             @keyup.enter="fetchListProjectNew"
           >
             <template v-slot:append>
-              <q-icon v-if="formQuery.keyword == ''" name="search" />
-              <q-icon
-                v-if="formQuery.keyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="
-                  (formQuery.keyword = ''),
-                    fetchListProject(),
-                    (formQuery.page = 1)
-                "
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
 
@@ -593,13 +577,7 @@ onMounted(() => {
                 <div class="q-pa-md">
                   <q-input dense outlined v-model="filter" label="ค้นหา">
                     <template v-slot:append>
-                      <q-icon
-                        v-if="filter !== ''"
-                        name="clear"
-                        class="cursor-pointer"
-                        @click="filter = ''"
-                      />
-                      <q-icon v-else name="search" color="grey-5" />
+                      <q-icon name="search" />
                     </template>
                   </q-input>
                   <q-tree
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 3ad5622ad..97c22e15a 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -138,7 +138,7 @@ function fetchList() {
   http
     .get(
       config.API.devScholarship +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&scholarshipType=${formQuery.type}`
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword.trim()}&year=${formQuery.year}&scholarshipType=${formQuery.type}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -305,13 +305,7 @@ onMounted(() => {
           @keyup.enter="fetchNewList()"
         >
           <template v-slot:append>
-            <q-icon v-if="formQuery.keyword == ''" name="search" />
-            <q-icon
-              v-if="formQuery.keyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="(formQuery.keyword = ''), fetchNewList()"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>