From 50e5652b4361947e00e4be74223dea379dffa039 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 26 Feb 2025 16:04:28 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=80=E0=B8=95=E0=B8=AD=E0=B8=A3=E0=B9=8C=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableView.vue                  |  16 +--
 .../03_recruiting/components/Career.vue       |  19 +++-
 .../03_recruiting/components/Table.vue        |  15 +--
 .../03_recruiting/components/Table1.vue       |  18 +--
 .../03_recruiting/components/TableCan.vue     |  15 +--
 .../03_recruiting/views/01_compete/Detail.vue |  16 ++-
 .../views/01_compete/ImportData.vue           |  18 ++-
 .../03_recruiting/views/01_compete/Period.vue |  15 ++-
 .../views/02_qualify/DisableDetail.vue        |  16 ++-
 .../views/02_qualify/DisablePeriod.vue        |  24 +++-
 .../03_recruiting/views/02_qualify/Manage.vue | 105 ++++++++++--------
 .../03_recruiting/views/02_qualify/Period.vue |  14 ++-
 .../03_recruiting/views/03_editor/index.vue   |  29 ++++-
 13 files changed, 216 insertions(+), 104 deletions(-)

diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index 6091126c5..0487ac38c 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -181,23 +181,16 @@
         <q-input
           standout
           dense
-          :model-value="inputfilter"
+          v-model="filter"
           ref="filterRef"
-          @update:model-value="updateInput"
+          @keydown.enter="onSearch"
           outlined
-          debounce="300"
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
         >
           <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 -->
@@ -331,6 +324,8 @@ import { ref, useAttrs, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
+const filter = defineModel<string>("filter", { required: true });
+
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogMessage } = mixin;
@@ -359,6 +354,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 };
 
 const props = defineProps({
+  onSearch: Function,
   inputfilter: String,
   inputvisible: Array,
   inputvisibleFilter: String,
diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index 8e2f69356..b36950613 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -25,7 +25,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, modalDelete, modalConfirm, dateToISO, success } = mixin;
+const { date2Thai, modalDelete, modalConfirm, dateToISO, success,onSearchDataTable } = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 const id = ref<string>("");
@@ -58,6 +58,7 @@ const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
 const total = ref<string>("-");
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const filter = ref<string>(""); //search data table
 const { messageError, showLoader, hideLoader } = mixin;
 
@@ -260,6 +261,11 @@ const fetchData = async () => {
           startDate: new Date(r.durationStart),
           endDate: new Date(r.durationEnd),
         });
+        rowsData.value.push({
+          ...r,
+          startDate: new Date(r.durationStart),
+          endDate: new Date(r.durationEnd),
+        });
         calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
           (d) => {
             yearDiff = yearDiff + d.yearDiff;
@@ -554,6 +560,14 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
 </script>
 
 <template>
@@ -561,7 +575,8 @@ const getClass = (val: boolean) => {
     <Table
       :rows="rows"
       :columns="columns"
-      :filter="filter"
+      v-model:filter="filter"
+      :onSearch="onSearch"
       :visible-columns="visibleColumns"
       v-model:inputfilter="filter"
       v-model:inputvisible="visibleColumns"
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index a696ea11a..da6b6afa1 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -9,8 +9,9 @@ const filterRef = ref<any>(null);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
-
+const filter = defineModel<string>("filter", { required: true });
 const props = defineProps({
+  onSearch: Function,
   count: Number,
   pass: Number,
   notpass: Number,
@@ -133,21 +134,15 @@ function resetFilter() {
       <q-input
         standout
         dense
-        :model-value="inputfilter"
+        v-model="filter"
         ref="filterRef"
-        @update:model-value="updateInput"
         outlined
         placeholder="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="props.onSearch?.()"
       >
         <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/03_recruiting/components/Table1.vue b/src/modules/03_recruiting/components/Table1.vue
index 3f2ca55b4..042beba5f 100644
--- a/src/modules/03_recruiting/components/Table1.vue
+++ b/src/modules/03_recruiting/components/Table1.vue
@@ -5,6 +5,7 @@ import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
 const attrs = ref<any>(useAttrs());
+const filter = defineModel<string>("filter", { required: true });
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const editBtn = ref<boolean>(false);
@@ -13,6 +14,7 @@ const initialPagination = ref<Pagination>({
 });
 
 const props = defineProps({
+  onSearch: Function,
   inputfilter: String,
   name: String,
   icon: String,
@@ -61,9 +63,6 @@ const emit = defineEmits([
   "update:editvisible",
 ]);
 
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
 const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
@@ -106,22 +105,15 @@ const resetFilter = () => {
       <q-input
         standout
         dense
-        :model-value="inputfilter"
-        ref="filterRef"
-        @update:model-value="updateInput"
+        v-model="filter"
         outlined
         placeholder="ค้นหา"
         style="max-width: 200px"
         class="q-ml-sm"
+        @keydown.enter="props.onSearch?.(name)"
       >
         <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/03_recruiting/components/TableCan.vue b/src/modules/03_recruiting/components/TableCan.vue
index a80691850..d6c7067b4 100644
--- a/src/modules/03_recruiting/components/TableCan.vue
+++ b/src/modules/03_recruiting/components/TableCan.vue
@@ -3,6 +3,8 @@ import { ref, useAttrs, watch } from "vue";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
+const filter = defineModel<string>("filter", { required: true });
+
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -12,6 +14,7 @@ const initialPagination = ref<Pagination>({
 });
 
 const props = defineProps({
+  onSearch: Function,
   inputfilter: String,
   iconLeft: Boolean,
   name: String,
@@ -110,21 +113,15 @@ function resetFilter() {
       <q-input
         standout
         dense
-        :model-value="inputfilter"
+        v-model="filter"
         ref="filterRef"
-        @update:model-value="updateInput"
+        @keydown.enter="onSearch"
         outlined
         placeholder="ค้นหา"
         style="max-width: 200px"
       >
         <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/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index f6d0667a3..8a018f3a1 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -17,7 +17,8 @@ const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader } = mixin;
+const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 
 const year = ref<string>("");
 const round = ref<string>("");
@@ -26,6 +27,7 @@ const count = ref<number>(0);
 const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const importId = ref<string>(route.params.id as string); // Period Import Id
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([
@@ -359,6 +361,7 @@ async function fetchData() {
           });
         }
         rows.value = result;
+        rowsData.value = result;
       }
     })
     .catch((e) => {
@@ -398,6 +401,14 @@ async function candidateToPlacement() {
     .onDismiss(() => {});
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -459,7 +470,8 @@ onMounted(async () => {
         :notpass="notpass"
         :rows="rows"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
diff --git a/src/modules/03_recruiting/views/01_compete/ImportData.vue b/src/modules/03_recruiting/views/01_compete/ImportData.vue
index 2c228b5d1..8c5b77d84 100644
--- a/src/modules/03_recruiting/views/01_compete/ImportData.vue
+++ b/src/modules/03_recruiting/views/01_compete/ImportData.vue
@@ -4,8 +4,13 @@ import type { QTableProps } from "quasar";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
 import Table from "@/modules/03_recruiting/components/Table.vue";
 
+const mixin = useCounterMixin();
+const { onSearchDataTable } = mixin;
 const $q = useQuasar(); // show dialog
 const router = useRouter();
 const file = ref<boolean>(true);
@@ -104,6 +109,7 @@ const columns = ref<QTableProps["columns"]>([
  * @param id
  */
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 
 function clickEdit(id: string) {
   router.push(`/compete/import/${id}`);
@@ -127,6 +133,14 @@ function remove() {
     })
     .onDismiss(() => {});
 }
+
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -137,7 +151,8 @@ function remove() {
       <Table
         :rows="rows"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
@@ -208,5 +223,4 @@ function remove() {
   </q-card>
 </template>
 
-
 <style></style>
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index f09ab5570..1bc6c7ec3 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -23,7 +23,7 @@ import HistoryTable from "@/components/TableHistory.vue";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const { success, dateText, showLoader, hideLoader, messageError } = mixin;
+const { success, dateText, showLoader, hideLoader, messageError,onSearchDataTable } = mixin;
 
 const router = useRouter();
 const name = ref<string>("");
@@ -50,6 +50,7 @@ const textTittle = ref<string>("");
 const textTittleScore = ref<string>("");
 const textTittleCandidate = ref<string>("");
 const rows = ref<ResponseRecruitPeriod[]>([]);
+const rowsData = ref<ResponseRecruitPeriod[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
@@ -182,6 +183,7 @@ async function fetchData() {
       }
 
       rows.value = result;
+      rowsData.value = result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -432,6 +434,14 @@ async function checkSave() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** ดึงข้อมูล เมื่อโหลดหน้า component */
 onMounted(async () => {
   hideLoader();
@@ -449,7 +459,8 @@ onMounted(async () => {
         style="max-height: 80vh"
         :rows="rows"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 59473d064..7def96c89 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -17,7 +17,8 @@ const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader } = mixin;
+const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 
 const year = ref<string>("2566");
 const round = ref<string>("1");
@@ -208,6 +209,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const rows = ref<RecruitDetailResponse[]>([]);
+const rowsData = ref<RecruitDetailResponse[]>([]);
 
 /**
  * ไปหน้ารายละเอียด จัดการรอบคัดเลือกคนพิการ
@@ -293,6 +295,7 @@ async function fetchData() {
       }
 
       rows.value = result;
+      rowsData.value = result;
       if (result.length > 0) name.value = result[0].exam_name as string;
       round.value = _data.round;
       year.value = _data.year;
@@ -335,6 +338,14 @@ async function candidateToPlacement() {
     .onDismiss(() => {});
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -397,7 +408,8 @@ onMounted(async () => {
         :notpass="notpass"
         :rows="rows"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index b12dc148d..4c6650a87 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -24,8 +24,15 @@ import HistoryTable from "@/components/TableHistory.vue";
 const $q = useQuasar(); // show dialog
 const router = useRouter();
 const mixin = useCounterMixin();
-const { success, dateText, messageError, showLoader, hideLoader, date2Thai } =
-  mixin;
+const {
+  success,
+  dateText,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  onSearchDataTable,
+} = mixin;
 
 const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
@@ -41,6 +48,7 @@ const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
 const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const filter = ref<string>(""); //search data table
 const filterHistory = ref<string>(""); //search data table
 const textTittle = ref<string>("");
@@ -218,6 +226,7 @@ async function fetchData() {
       }
 
       rows.value = result;
+      rowsData.value = result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -405,6 +414,14 @@ async function checkSave() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -420,7 +437,8 @@ onMounted(async () => {
         style="max-height: 80vh"
         :rows="rows"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
diff --git a/src/modules/03_recruiting/views/02_qualify/Manage.vue b/src/modules/03_recruiting/views/02_qualify/Manage.vue
index 7cf1b9d20..b00833943 100644
--- a/src/modules/03_recruiting/views/02_qualify/Manage.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Manage.vue
@@ -17,9 +17,11 @@ import type { ResponsePeriodExam } from "@/modules/03_recruiting/interface/respo
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 
 const rows = ref<ResponsePeriodExam[]>([]);
+const rowsData = ref<ResponsePeriodExam[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
@@ -123,50 +125,52 @@ async function fetchData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = [];
-      data.map((r: RequestPeriodExam) => {
-        rows.value.push({
-          id: r.id,
-          name: r.name,
-          checkDocument: r.checkDocument,
-          checkDisability: r.checkDisability,
-          round: r.round,
-          yearly: r.year,
-          fee: r.fee,
-          announcementExam: r.announcementExam,
-          dateAnnounce:
-            r.announcementDate !== null ? new Date(r.announcementDate) : null,
-          dateAnnouncement:
-            r.announcementStartDate !== null && r.announcementEndDate !== null
-              ? [
-                  new Date(r.announcementStartDate),
-                  new Date(r.announcementEndDate),
-                ]
-              : null,
-          dateRegister:
-            r.registerStartDate !== null && r.registerEndDate !== null
-              ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
-              : null,
-          dateExam: r.examDate !== null ? new Date(r.examDate) : null,
-          datePayment:
-            r.paymentStartDate !== null && r.paymentEndDate !== null
-              ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
-              : null,
-          organizationName: {
-            id: r.organizationId,
-            name: r.organizationName,
-          },
-          organizationShortName: {
-            id: r.organizationCodeId,
-            name: r.organizationCodeName,
-          },
-          positionExam: [],
-          pay: r.bankExam.length > 0 ? "payment2" : "payment1",
-          bankExam: [],
-          editor: r.detail,
-          note: r.note,
-          category: r.category,
-        });
-      });
+      rowsData.value = [];
+      const list = data.map((r: RequestPeriodExam) => ({
+        id: r.id,
+        name: r.name,
+        checkDocument: r.checkDocument,
+        checkDisability: r.checkDisability,
+        round: r.round,
+        yearly: r.year,
+        fee: r.fee,
+        announcementExam: r.announcementExam,
+        dateAnnounce:
+          r.announcementDate !== null ? new Date(r.announcementDate) : null,
+        dateAnnouncement:
+          r.announcementStartDate !== null && r.announcementEndDate !== null
+            ? [
+                new Date(r.announcementStartDate),
+                new Date(r.announcementEndDate),
+              ]
+            : null,
+        dateRegister:
+          r.registerStartDate !== null && r.registerEndDate !== null
+            ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
+            : null,
+        dateExam: r.examDate !== null ? new Date(r.examDate) : null,
+        datePayment:
+          r.paymentStartDate !== null && r.paymentEndDate !== null
+            ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
+            : null,
+        organizationName: {
+          id: r.organizationId,
+          name: r.organizationName,
+        },
+        organizationShortName: {
+          id: r.organizationCodeId,
+          name: r.organizationCodeName,
+        },
+        positionExam: [],
+        pay: r.bankExam.length > 0 ? "payment2" : "payment1",
+        bankExam: [],
+        editor: r.detail,
+        note: r.note,
+        category: r.category,
+      }));
+
+      rows.value = list;
+      rowsData.value = list;
     })
     .catch((e) => {
       messageError($q, e);
@@ -195,6 +199,14 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -208,7 +220,8 @@ onMounted(async () => {
     <data-table
       :rows="rows"
       :columns="columns"
-      :filter="filter"
+      v-model:filter="filter"
+      :onSearch="onSearch"
       :visible-columns="visibleColumns"
       v-model:inputfilter="filter"
       v-model:inputvisible="visibleColumns"
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index f41697905..7e5105c66 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -33,12 +33,14 @@ const {
   messageError,
   showLoader,
   hideLoader,
+  onSearchDataTable
 } = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 const examData = ref<ResponsePeriodExam[]>([]);
+const examDataData = ref<ResponsePeriodExam[]>([]);
 const visibleColumns = ref<String[]>([
   "no",
   "announcementExam",
@@ -215,6 +217,7 @@ async function fetchData() {
         });
       }
       examData.value = result;
+      examDataData.value = result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -283,6 +286,14 @@ function openDetail(col: ResponsePeriodExam) {
   router.push(`/qualify/period-detail/${col.id}`);
 }
 
+function onSearch() {
+  examData.value = onSearchDataTable(
+    filter.value,
+    examDataData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -298,7 +309,8 @@ onMounted(async () => {
         style="max-height: 80vh"
         :rows="examData"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index bfe9a11b6..d39c696a8 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -33,6 +33,7 @@ const {
   hideLoader,
   dialogConfirm,
   dialogRemove,
+  onSearchDataTable,
 } = mixin;
 
 const previous = ref<boolean>(false);
@@ -66,7 +67,9 @@ const districtOptions = ref<DataOption[]>([]);
 const subdistrictOptionsMain = ref<zipCodeOption[]>([]);
 const subdistrictOptions = ref<zipCodeOption[]>([]);
 const cmsGoverment = ref<CmsTable[]>([]);
+const cmsGovermentData = ref<CmsTable[]>([]);
 const cmsAgency = ref<CmsTable[]>([]);
+const cmsAgencyData = ref<CmsTable[]>([]);
 const web = ref<WebType>({
   by: "",
   thai: "",
@@ -435,6 +438,7 @@ async function fetchData() {
       address.value.districtId = data.districtId;
       address.value.subdistrictId = data.subDistrictId;
       cmsGoverment.value = [];
+      cmsGovermentData.value = [];
       if (data.cmsGovernments.length > 0) {
         let setData: CmsTable[] = [];
         data.cmsGovernments.map((r: CmsTable) => {
@@ -447,9 +451,11 @@ async function fetchData() {
           });
         });
         cmsGoverment.value = setData;
+        cmsGovermentData.value = setData;
       }
 
       cmsAgency.value = [];
+      cmsAgencyData.value = [];
       if (data.cmsAgencys.length > 0) {
         let setData: CmsTable[] = [];
         data.cmsAgencys.map((r: CmsTable) => {
@@ -462,6 +468,7 @@ async function fetchData() {
           });
         });
         cmsAgency.value = setData;
+        cmsAgencyData.value = setData;
       }
     })
     .catch((e: any) => {
@@ -770,6 +777,22 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
+function onSearch(type: string) {
+  if (type == "ส่วนราชการ") {
+    cmsGoverment.value = onSearchDataTable(
+      filter.value,
+      cmsGovermentData.value,
+      columns.value ? columns.value : []
+    );
+  } else if (type == "หน่วยงาน") {
+    cmsAgency.value = onSearchDataTable(
+      filterAgency.value,
+      cmsAgencyData.value,
+      columns.value ? columns.value : []
+    );
+  }
+}
+
 onMounted(async () => {
   await fetchData();
   await fetchProvince();
@@ -1176,7 +1199,8 @@ onMounted(async () => {
           <ProfileTable
             :rows="cmsGoverment"
             :columns="columns"
-            :filter="filter"
+            v-model:filter="filter"
+            :onSearch="onSearch"
             :visible-columns="visibleColumns"
             v-model:inputfilter="filter"
             v-model:inputvisible="visibleColumns"
@@ -1221,8 +1245,9 @@ onMounted(async () => {
         <div class="col-12 rounded-borders bg-white q-mt-md">
           <ProfileTable
             :rows="cmsAgency"
+            :onSearch="onSearch"
             :columns="columns"
-            :filter="filterAgency"
+            v-model:filter="filterAgency"
             :visible-columns="visibleColumnsAgency"
             v-model:inputfilter="filterAgency"
             v-model:inputvisible="visibleColumnsAgency"