From 2b36b70715813c81da740e4bb9ddbefa6f61ffde Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 4 Dec 2024 15:15:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20filte=20?=
 =?UTF-8?q?Table=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/01_ProfessionalLicense.vue    |  58 +++--
 .../detail/Achievement/02_Train.vue           | 110 ++++++----
 .../detail/Achievement/03_Insignia.vue        |  79 +++----
 .../Achievement/04_DeclarationHonor.vue       |  82 +++----
 .../Achievement/05_ResultsPerformance.vue     |  69 +++---
 .../detail/Employee/01_DataEmployee.vue       |  20 +-
 .../detail/Employee/02_Employment.vue         |  37 +++-
 .../detail/GovernmentInformation/01_Info.vue  |  56 ++---
 .../GovernmentInformation/02_Discipline.vue   |  41 ++--
 .../02_DisciplineHistory.vue                  |  32 ++-
 .../detail/GovernmentInformation/03_Leave.vue |  61 +++---
 .../GovernmentInformation/03_LeaveHistory.vue |  48 ++--
 .../04_PerformSpecialWork.vue                 |  38 ++--
 .../04_PerformSpecialWorkHistory.vue          |  29 ++-
 .../detail/Other/01_OtherInformation.vue      |  42 ++--
 .../Other/01_OtherInformationHistory.vue      |  32 ++-
 .../detail/PersonalInformation/01_Profile.vue |  69 +++---
 .../02_NameChangeHistory.vue                  |  55 ++---
 .../detail/PersonalInformation/03_Address.vue |  48 ++--
 .../PersonalInformation/04_FamilyNew.vue      |  70 +++---
 .../PersonalInformation/05_Education.vue      | 207 ++++++++++--------
 .../PersonalInformation/06_SpecialSkill.vue   |  65 ++++--
 .../detail/Salary/01_PositionSalary.vue       |  60 ++---
 .../Salary/01_PositionSalaryHistory.vue       |  36 +--
 .../detail/Salary/02_NotReceiveSalary.vue     |  46 ++--
 .../Salary/02_NotReceiveSalaryHistory.vue     |  33 ++-
 26 files changed, 841 insertions(+), 682 deletions(-)

diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index bd7a08a8e..aee932914 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -25,6 +25,7 @@ const {
   success,
   date2Thai,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const id = ref<string>(route.params.id.toString());
@@ -44,6 +45,7 @@ const editId = ref<string>(""); //id ที่ต้องการแก้ไ
 
 //Table Main
 const rows = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
+const rowsMain = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
 const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -118,6 +120,8 @@ const pagination = ref({
 
 //Table ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
 const historyRows = ref<ResponseObject[]>([]); //รายการประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
+const historyRowsMain = ref<ResponseObject[]>([]); //รายการประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
+
 const historyKeyword = ref<string>(""); //คำค้นหาประวัติแก้ไข
 const historyColumns = ref<QTableProps["columns"]>([
   {
@@ -224,9 +228,7 @@ const profesLicenseData = reactive<RequestItemsObject>({
   profileId: id.value,
 });
 
-/**
- * ยืนยันการบันทึกข้อมูล
- */
+/** ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -238,31 +240,26 @@ function onSubmit() {
   );
 }
 
-/**
- * ปิด form  ข้อมูลใบอนุญาตประกอบวิชาชีพ
- */
+/** ปิด form  ข้อมูลใบอนุญาตประกอบวิชาชีพ*/
 function closeDialog() {
   dialog.value = false;
 }
 
-/**
- * ปิด popup ประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
- */
+/** ปิด popup ประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ*/
 function closeHistoryDialog() {
   historyDialog.value = false;
   historyRows.value = [];
   historyKeyword.value = "";
 }
 
-/**
- * fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ
- */
+/** fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ*/
 async function fetchData(id: string) {
   showLoader();
   await http
     .get(config.API.profileNewCertificateByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -272,9 +269,7 @@ async function fetchData(id: string) {
     });
 }
 
-/**
- * เคลียร์ form ข้อมูลใบอนุญาตประกอบวิชาชีพ
- */
+/** เคลียร์ form ข้อมูลใบอนุญาตประกอบวิชาชีพ*/
 function clearForm() {
   profesLicenseData.expireDate = null;
   profesLicenseData.issueDate = new Date();
@@ -349,15 +344,14 @@ function editData(idData: string) {
     });
 }
 
-/**
- * fetch ข้อมูลประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
- */
+/** fetch ข้อมูลประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ*/
 function fetchHistoryData(id: string) {
   showLoader();
   http
     .get(config.API.profileNewCertificateHisByCertificateId(id, empType.value))
     .then(async (res) => {
       historyRows.value = res.data.result;
+      historyRowsMain.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -367,6 +361,22 @@ function fetchHistoryData(id: string) {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function serchDataTableHistory() {
+  historyRows.value = onSearchDataTable(
+    historyKeyword.value,
+    historyRowsMain.value,
+    historyColumns.value ? historyColumns.value : []
+  );
+}
+
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -394,7 +404,13 @@ onMounted(() => {
     >
 
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา">
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      @keydown.enter.pervent="serchDataTable"
+    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -456,7 +472,6 @@ onMounted(() => {
     bordered
     :paging="true"
     dense
-    :filter="keyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     class="custom-header-table"
@@ -730,6 +745,7 @@ onMounted(() => {
             bg-color="white"
             v-model="historyKeyword"
             label="ค้นหา"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -757,7 +773,6 @@ onMounted(() => {
           :rows="historyRows"
           row-key="name"
           flat
-          :filter="historyKeyword.trim()"
           v-model:pagination="historyPagination"
           bordered
           :paging="true"
@@ -771,7 +786,6 @@ onMounted(() => {
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index 16bd44c53..c6d8f9bfa 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -13,9 +13,7 @@ import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/r
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
 
 import dialogHeader from "@/components/DialogHeader.vue";
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -31,6 +29,7 @@ const {
   success,
   date2Thai,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const id = ref<string>(route.params.id.toString());
@@ -62,6 +61,7 @@ const trainData = reactive<RequestItemsObject>({
 
 //Table Main
 const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
 const keyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -91,10 +91,12 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
     sortable: true,
-    field: (v) =>
-      v.isDate
-        ? date2Thai(v.startDate)
-        : new Date(v.startDate).getFullYear() + 543,
+    field: "startDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.startDate)
+        : new Date(row.startDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -105,8 +107,12 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
     sortable: true,
-    field: (v) =>
-      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    field: "endDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.endDate)
+        : new Date(row.endDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -200,6 +206,7 @@ const pagination = ref({
 
 //Table ประวัติแก้ไข
 const historyRows = ref<ResponseObject[]>([]);
+const historyRowsMain = ref<ResponseObject[]>([]);
 const historyKeyword = ref<string>("");
 const historyColumns = ref<QTableProps["columns"]>([
   {
@@ -229,10 +236,12 @@ const historyColumns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
     sortable: true,
-    field: (v) =>
-      v.isDate
-        ? date2Thai(v.startDate)
-        : new Date(v.startDate).getFullYear() + 543,
+    field: "startDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.startDate)
+        : new Date(row.startDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -243,8 +252,12 @@ const historyColumns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
     sortable: true,
-    field: (v) =>
-      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    field: "endDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.endDate)
+        : new Date(row.endDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -361,9 +374,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * ยืนยันการบันทึกข้อมูล
- */
+/** ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -375,9 +386,7 @@ function onSubmit() {
   );
 }
 
-/**
- * เคลียร์ form ฝึกอบรม/ดูงาน
- */
+/** เคลียร์ form ฝึกอบรม/ดูงาน */
 function clearForm() {
   isDate.value = "false";
   trainData.name = "";
@@ -392,9 +401,7 @@ function clearForm() {
   trainData.endDate = new Date();
 }
 
-/**
- * เปิด popoup แก้ไขข้อมูลฝึกอบรม/ดูงาน
- */
+/** เปิด popoup แก้ไขข้อมูลฝึกอบรม/ดูงาน */
 function editForm(row: any) {
   dialogStatus.value = "edit";
   editId.value = row.id;
@@ -414,9 +421,7 @@ function editForm(row: any) {
   dialog.value = true;
 }
 
-/**
- * เพิ่มข้อมูลการฝึกอบรม/ดูงาน
- */
+/** เพิ่มข้อมูลการฝึกอบรม/ดูงาน*/
 function addData() {
   showLoader();
   http
@@ -468,32 +473,27 @@ function editData(idData: string) {
     });
 }
 
-/**
- * ปิด from การฝึกอบรม/ดูงาน
- */
+/** ปิด from การฝึกอบรม/ดูงาน*/
 function closeDialog() {
   dialog.value = false;
   clearForm();
 }
 
-/**
- * ปิด ประวัติการแก่ไขการฝึกอบรม/ดูงาน
- */
+/** ปิด ประวัติการแก่ไขการฝึกอบรม/ดูงาน */
 function closeHistoryDialog() {
   historyDialog.value = false;
   historyRows.value = [];
   historyKeyword.value = "";
 }
 
-/**
- * fetch รายการการฝึกอบรม/ดูงาน
- */
+/** fetch รายการการฝึกอบรม/ดูงาน*/
 async function fetchData(id: string) {
   showLoader();
   await http
     .get(config.API.profileNewTrainingByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -503,15 +503,14 @@ async function fetchData(id: string) {
     });
 }
 
-/**
- * fetch ประวัติรายการแก้ไขการฝึกอบรม/ดูงาน
- */
+/** fetch ประวัติรายการแก้ไขการฝึกอบรม/ดูงาน*/
 function fetchHistoryData(id: string) {
   showLoader();
   http
     .get(config.API.profileNewTrainingHisByTrainingId(id, empType.value))
     .then((res) => {
       historyRows.value = res.data.result;
+      historyRowsMain.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -521,9 +520,23 @@ function fetchHistoryData(id: string) {
     });
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function serchDataTableHistory() {
+  historyRows.value = onSearchDataTable(
+    historyKeyword.value,
+    historyRowsMain.value,
+    historyColumns.value ? historyColumns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData(id.value);
 });
@@ -550,7 +563,14 @@ onMounted(() => {
     >
 
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา">
+
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      @keydown.enter.pervent="serchDataTable"
+    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -612,7 +632,6 @@ onMounted(() => {
     bordered
     :paging="true"
     dense
-    :filter="keyword.trim()"
     :rows-per-page-options="[20, 50, 100]"
     v-model:pagination="pagination"
     class="custom-header-table"
@@ -1114,6 +1133,7 @@ onMounted(() => {
             bg-color="white"
             v-model="historyKeyword"
             label="ค้นหา"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -1141,7 +1161,6 @@ onMounted(() => {
           :rows="historyRows"
           row-key="name"
           flat
-          :filter="historyKeyword.trim()"
           v-model:pagination="historyPagination"
           bordered
           :paging="true"
@@ -1155,7 +1174,6 @@ onMounted(() => {
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index 452b1f23b..7ee5c2b07 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -33,11 +33,10 @@ const {
   messageError,
   dialogConfirm,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -82,7 +81,8 @@ const Ops = ref<InsigniaOps>({
 
 //Table Main
 const rows = ref<ResponseObject[]>([]);
-const filterSearch = ref("");
+const rowsMain = ref<ResponseObject[]>([]);
+const filterSearch = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -123,7 +123,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ลำดับชั้น",
     sortable: true,
-    field: (v) => v.insignia.insigniaType.name,
+    field: "insigniaType",
+    format(val, row) {
+      return row.insignia.insigniaType.name;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -265,6 +268,7 @@ const pagination = ref({
 
 //Table ประวัติแก้ไข
 const rowsHistory = ref<RequestItemsObject[]>([]);
+const rowsHistoryMain = ref<RequestItemsObject[]>([]);
 const filterHistory = ref<string>("");
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -306,7 +310,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
     align: "left",
     label: "ลำดับชั้น",
     sortable: true,
-    field: (v) => v.insignia.insigniaType.name,
+    field: "insigniaType",
+    format(val, row) {
+      return row.insignia.insigniaType.name;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -459,9 +466,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์
- */
+/** fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์*/
 async function fetchData() {
   if (!profileId.value) return;
   showLoader();
@@ -470,6 +475,7 @@ async function fetchData() {
       config.API.profileNewInsignByProfileId(profileId.value, empType.value)
     );
     rows.value = res.data.result;
+    rowsMain.value = res.data.result;
   } catch (error) {
     messageError($q, error);
   } finally {
@@ -477,9 +483,7 @@ async function fetchData() {
   }
 }
 
-/**
- * fetch ข้อมูลเครื่องราชอิสริยาภรณ์
- */
+/** fetch ข้อมูลเครื่องราชอิสริยาภรณ์*/
 async function fetchInsignia() {
   showLoader();
   try {
@@ -523,9 +527,7 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-/**
- * เปิด form ข้อมูลเครื่องราชอิสริยาภรณ์
- */
+/** เปิด form ข้อมูลเครื่องราชอิสริยาภรณ์*/
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -551,17 +553,13 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   }
 }
 
-/**
- * ปิด form ข้อมูลเครื่องราชอิสริยาภรณ์
- */
+/** ปิด form ข้อมูลเครื่องราชอิสริยาภรณ์*/
 function clickClose() {
   clearData();
   modal.value = false;
 }
 
-/**
- * fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลเครื่องราชอิสริยาภรณ์
- */
+/** fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลเครื่องราชอิสริยาภรณ์ */
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
@@ -571,6 +569,7 @@ async function clickHistory(row: ResponseObject) {
       config.API.profileNewInsignHisById(row.id, empType.value)
     );
     rowsHistory.value = res.data.result;
+    rowsHistoryMain.value = res.data.result;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -578,9 +577,7 @@ async function clickHistory(row: ResponseObject) {
   }
 }
 
-/**
- * ยืนยีนการบันทึกข้อมูล
- */
+/** ยืนยีนการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -612,9 +609,7 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
-/**
- * ค้นหาลำดับชั้น
- */
+/** ค้นหาลำดับชั้น*/
 function insigniaTypeSelection() {
   const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
     (r: DataOptionInsignia) => r.id === insigniaForm.insigniaId
@@ -624,9 +619,7 @@ function insigniaTypeSelection() {
   }
 }
 
-/**
- * เคลียร์ formDฟta
- */
+/** เคลียร์ formData*/
 function clearData() {
   id.value = "";
   (insigniaType.value = ""), (insigniaForm.year = 0);
@@ -644,9 +637,23 @@ function clearData() {
   insigniaForm.note = "";
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterSearch.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function serchDataTableHistory() {
+  rowsHistory.value = onSearchDataTable(
+    filterHistory.value,
+    rowsHistoryMain.value,
+    columnsHistory.value ? columnsHistory.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   await fetchData();
   store.insigniaOption.length === 0 ? await fetchInsignia() : "";
@@ -677,7 +684,7 @@ onMounted(async () => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -736,7 +743,6 @@ onMounted(async () => {
     :rows="rows"
     :paging="true"
     :columns="columns"
-    :filter="filterSearch.trim()"
     v-model:pagination="pagination"
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
@@ -1180,7 +1186,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -1211,7 +1217,6 @@ onMounted(async () => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index 62550f406..28ae68804 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -25,6 +25,7 @@ const {
   hideLoader,
   dialogConfirm,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const profileId = ref<string>(
@@ -32,9 +33,7 @@ const profileId = ref<string>(
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -57,17 +56,20 @@ const modalHistory = ref<boolean>(false); //แสดง popup ประวั
 
 //Table Main
 const rows = ref<ResponseObject[]>([]);
-const filterSearch = ref("");
+const rowsMain = ref<ResponseObject[]>([]);
+const filterSearch = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "issueDate",
     align: "left",
     label: "วันที่ได้รับ",
     sortable: true,
-    field: (v) =>
-      v.isDate
-        ? date2Thai(v.issueDate)
-        : new Date(v.issueDate).getFullYear() + 543,
+    field: "issueDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.issueDate)
+        : new Date(row.issueDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -131,6 +133,7 @@ const pagination = ref({
 
 //Table ประวัติแก้ไข
 const rowsHistory = ref<ResponseObject[]>([]);
+const rowsHistoryMain = ref<ResponseObject[]>([]);
 const filterHistory = ref<string>("");
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -138,10 +141,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันที่ได้รับ",
     sortable: true,
-    field: (v) =>
-      v.isDate
-        ? date2Thai(v.issueDate)
-        : new Date(v.issueDate).getFullYear() + 543,
+    field: "issueDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.issueDate)
+        : new Date(row.issueDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -228,9 +233,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * fetch รายการข้อมูลประกาศเกียรติคุณ
- */
+/** fetch รายการข้อมูลประกาศเกียรติคุณ*/
 async function fetchData() {
   if (!profileId.value) return;
 
@@ -240,6 +243,7 @@ async function fetchData() {
       config.API.profileNewHonorByProfileId(profileId.value, empType.value)
     );
     rows.value = res.data.result;
+    rowsMain.value = res.data.result;
   } catch (error) {
     messageError($q, error);
   } finally {
@@ -284,9 +288,7 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-/**
- * เปิด form ข้อมูลประกาศเกียรติคุณ
- */
+/** เปิด form ข้อมูลประกาศเกียรติคุณ*/
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -306,27 +308,23 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   }
 }
 
-/**
- * ปิด form ข้อมูลประกาศเกียรติคุณ
- */
+/** ปิด form ข้อมูลประกาศเกียรติคุณ*/
 async function clickClose() {
   clearData();
   modal.value = false;
 }
 
-/**
- * fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลประกาศเกียรติคุณ
- */
+/** fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลประกาศเกียรติคุณ*/
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
-
   showLoader();
   try {
     const res = await http.get(
       config.API.profileNewHonorHisById(row.id, empType.value)
     );
     rowsHistory.value = res.data.result;
+    rowsHistoryMain.value = res.data.result;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -334,9 +332,7 @@ async function clickHistory(row: ResponseObject) {
   }
 }
 
-/**
- * ยืนยีนการบันทึกข้อมูล
- */
+/** ยืนยีนการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -348,9 +344,7 @@ function onSubmit() {
   );
 }
 
-/**
- * เคลียร์ formDฟta
- */
+/** เคลียร์ formDฟta*/
 function clearData() {
   id.value = "";
   issueDateYear.value = new Date().getFullYear();
@@ -362,9 +356,23 @@ function clearData() {
   declHonorForm.isDate = "false";
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterSearch.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function serchDataTableHistory() {
+  rowsHistory.value = onSearchDataTable(
+    filterHistory.value,
+    rowsHistoryMain.value,
+    columnsHistory.value ? columnsHistory.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData();
 });
@@ -390,7 +398,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -449,7 +457,6 @@ onMounted(() => {
     :rows="rows"
     :paging="true"
     :columns="columns"
-    :filter="filterSearch.trim()"
     :grid="modeView === 'card'"
     v-model:pagination="pagination"
     :visible-columns="visibleColumns"
@@ -785,7 +792,7 @@ onMounted(() => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -816,7 +823,6 @@ onMounted(() => {
           v-model:pagination="historyPagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index cce6ecedb..cf471ff3d 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -29,6 +29,7 @@ const {
   hideLoader,
   dialogConfirm,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const profileId = ref<string>(
@@ -46,9 +47,7 @@ const modeViewPlan = ref<string>("table"); //การแสดงผล Table,C
 const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
 const kpiDevelopmentId = ref<string>(""); // id การพัฒนารายบุคคล
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -75,6 +74,7 @@ const resPerformForm = reactive<RequestItemsObject>({
 
 //Table ผลการประเมินการปฏิบัติราชการ
 const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
 const filterSearch = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -158,7 +158,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ผลประเมิน",
     sortable: true,
-    field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
+    field: "name",
+    format(val, row) {
+      return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -261,6 +264,7 @@ const visibleColumnsPlan = ref<String[]>([
 
 //Table ประวัติแก้ไข
 const rowsHistory = ref<ResponseObject[]>([]);
+const rowsHistoryMain = ref<ResponseObject[]>([]);
 const filterHistory = ref<string>("");
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -342,7 +346,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
     align: "left",
     label: "ผลประเมิน",
     sortable: true,
-    field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
+    field: "name",
+    format(val, row) {
+      return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -389,9 +396,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * fetch รายการข้อมูลผลการประเมินการปฏิบัติราชการ
- */
+/** fetch รายการข้อมูลผลการประเมินการปฏิบัติราชการ*/
 async function fetchData() {
   if (!profileId.value) return;
   showLoader();
@@ -403,6 +408,7 @@ async function fetchData() {
       )
     );
     rows.value = res.data.result;
+    rowsMain.value = res.data.result;
   } catch (error) {
     messageError($q, error);
     hideLoader();
@@ -410,9 +416,7 @@ async function fetchData() {
   }
 }
 
-/**
- * fetch รายการการพัฒนารายบุคคล (Individual Development Plan)
- */
+/** fetch รายการการพัฒนารายบุคคล (Individual Development Plan)*/
 async function getDevelop(isLoad?: boolean) {
   if (!profileId.value) return;
   isLoad && showLoader();
@@ -473,9 +477,7 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-/**
- * เปิด form ข้อมูลผลการประเมินการปฏิบัติราชการ
- */
+/** เปิด form ข้อมูลผลการประเมินการปฏิบัติราชการ*/
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -494,17 +496,13 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   }
 }
 
-/**
- * ปิด form ข้อมูลผลการประเมินการปฏิบัติราชการ
- */
+/** ปิด form ข้อมูลผลการประเมินการปฏิบัติราชการ*/
 async function clickClose() {
   clearData();
   modal.value = false;
 }
 
-/**
- * fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลผลการประเมินการปฏิบัติราชการ
- */
+/** fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลผลการประเมินการปฏิบัติราชการ*/
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
@@ -515,6 +513,7 @@ async function clickHistory(row: ResponseObject) {
     );
 
     rowsHistory.value = res.data.result;
+    rowsHistoryMain.value = res.data.result;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -522,9 +521,7 @@ async function clickHistory(row: ResponseObject) {
   }
 }
 
-/**
- * ยืนยีนการบันทึกข้อมูล
- */
+/** ยืนยีนการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -536,9 +533,7 @@ function onSubmit() {
   );
 }
 
-/**
- * เคลียร์ formDฟta
- */
+/** เคลียร์ formDฟta */
 function clearData() {
   (id.value = ""),
     (resPerformForm.name = ""),
@@ -565,6 +560,22 @@ function updatePaginationIdp(newPagination: any) {
   paginationIdp.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterSearch.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function serchDataTableHistory() {
+  rowsHistory.value = onSearchDataTable(
+    filterHistory.value,
+    rowsHistoryMain.value,
+    columnsHistory.value ? columnsHistory.value : []
+  );
+}
+
 watch(
   () => paginationIdp.value.rowsPerPage,
   async () => {
@@ -608,7 +619,7 @@ onMounted(async () => {
               ref="filterRef"
               outlined
               placeholder="ค้นหา"
-              debounce="300"
+              @keydown.enter.pervent="serchDataTable"
             >
               <template v-slot:append>
                 <q-icon name="search" />
@@ -669,7 +680,6 @@ onMounted(async () => {
             :rows="rows"
             :paging="true"
             :columns="columns"
-            :filter="filterSearch.trim()"
             v-model:pagination="pagination"
             :grid="modeView === 'card'"
             :visible-columns="visibleColumns"
@@ -1208,7 +1218,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -1239,7 +1249,6 @@ onMounted(async () => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index 828e42508..d07dd9284 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -27,15 +27,14 @@ const {
   date2Thai,
   messageError,
   dialogConfirm,
+  onSearchDataTable,
 } = useCounterMixin();
 
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -69,7 +68,7 @@ const formData = reactive<FormEmployee>({
 });
 
 /** function fetch ข้อมูลลูกจ้างชั่วคราว*/
-function fetchData() {
+async function fetchData() {
   showLoader();
   http
     .get(config.API.informationEmployee(profileId.value))
@@ -148,6 +147,7 @@ function onSubmit() {
 const modalHistory = ref<boolean>(false);
 const filter = ref<string>("");
 const rows = ref<EmployeeHistory[]>([]);
+const rowsMain = ref<EmployeeHistory[]>([]);
 const columns = ref<QTableColumn[]>([
   {
     name: "positionEmployeeGroupId",
@@ -286,6 +286,7 @@ function onClickHistory() {
           new Date(b.lastUpdatedAt).getTime() -
           new Date(a.lastUpdatedAt).getTime()
       );
+      rowsMain.value = rows.value;
     })
     .catch((err) => {
       messageError($q, err);
@@ -295,6 +296,14 @@ function onClickHistory() {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   profileId.value && fetchData();
 });
@@ -593,7 +602,7 @@ onMounted(() => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -623,7 +632,6 @@ onMounted(() => {
           :rows="rows"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filter.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
index 02192e6a6..45e68b839 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
@@ -27,19 +27,19 @@ const {
   messageError,
   hideLoader,
   showLoader,
+  onSearchDataTable,
 } = useCounterMixin();
 
 const profileId = ref<string>(route.params.id.toString());
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
 /** ข้อมูลการจ้าง*/
 const rows = ref<Employment[]>([]);
+const rowsMain = ref<Employment[]>([]);
 const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -103,6 +103,7 @@ async function fetchListEmployment() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -201,6 +202,7 @@ function onDeleteEmployment(id: string) {
 /** ประวัติข้อมูลการจ้าง*/
 const modalHistory = ref<boolean>(false);
 const rowsHistory = ref<EmploymentHistory[]>([]);
+const rowsHistoryMain = ref<EmploymentHistory[]>([]);
 const filterHistory = ref<string>("");
 
 /**
@@ -215,6 +217,7 @@ function onClickHistory(id: string) {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryMain.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -224,6 +227,22 @@ function onClickHistory(id: string) {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value.slice(0, 2) : []
+  );
+}
+
+function serchDataTableHistory() {
+  rowsHistory.value = onSearchDataTable(
+    filterHistory.value,
+    rowsHistoryMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   profileId.value && fetchListEmployment();
 });
@@ -247,7 +266,13 @@ onMounted(() => {
 
     <q-space />
     <div class="q-gutter-sm" style="display: flex">
-      <q-input outlined dense v-model="filter" label="ค้นหา" debounce="300">
+      <q-input
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        @keydown.enter.pervent="serchDataTable"
+      >
         <template v-slot:append> <q-icon name="search" /> </template
       ></q-input>
 
@@ -275,7 +300,6 @@ onMounted(() => {
       ref="table"
       :columns="columns?.slice(0, 2)"
       :rows="rows"
-      :filter="filter.trim()"
       row-key="dateEmployment"
       :paging="true"
       dense
@@ -436,7 +460,7 @@ onMounted(() => {
             v-model="filterHistory"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -466,7 +490,6 @@ onMounted(() => {
           :rows="rowsHistory"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
index 773778ec1..f06769e6f 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
@@ -28,11 +28,10 @@ const {
   hideLoader,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -73,7 +72,9 @@ const reasonSameDateRef = ref<object | null>(null);
 //ประวัติแก้ไขข้อมูลราชการ
 const filterKeyword = ref<string>(""); //คำค้นหา
 const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขข้อมูลราชการ;
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลราชการ
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+const rowsHistoryMain = ref<RequestItemsHistoryObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลราชการ
+//ข้อมูลรายการประวัติแก้ไขข้อมูลราชการ
 const visibleColumnsHistory = ref<String[]>([
   "dateAppoint",
   "dateStart",
@@ -142,9 +143,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * เปิด dialog *
- */
+/** เปิด dialog */
 function openDialogEdit() {
   modalEdit.value = true;
   containDate.value = formMain.containDate ? formMain.containDate : null;
@@ -154,18 +153,14 @@ function openDialogEdit() {
     : null;
 }
 
-/**
- * เปิด dialog  ประวัติแก้ไขข้อมูลราชการ
- */
+/** เปิด dialog  ประวัติแก้ไขข้อมูลราชการ*/
 function openDialogHistory() {
   modalHistory.value = true;
   filterKeyword.value = "";
   getDataHistory();
 }
 
-/**
- * ปิด dialog
- */
+/** ปิด dialog*/
 function closeDialog() {
   modalEdit.value = false;
   containDate.value = null;
@@ -173,9 +168,7 @@ function closeDialog() {
   reasonSameDate.value = null;
 }
 
-/**
- * function ยืนยันการบันทึกข้อมูลราชการ
- */
+/** function ยืนยันการบันทึกข้อมูลราชการ*/
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -206,16 +199,13 @@ function onSubmit() {
   });
 }
 
-/**
- * ดึงข้อมูลราชการ
- */
+/** ดึงข้อมูลราชการ*/
 async function getData() {
   showLoader();
   await http
     .get(config.API.profileNewGovernmentById(profileId.value, empType.value))
     .then(async (res) => {
       const data = await res.data.result;
-      console.log(data);
 
       formMain.ocId = data.org ?? "-"; //สังกัด
       formMain.positionId = data.position ?? "-"; //ตำแหน่ง
@@ -244,9 +234,7 @@ async function getData() {
     });
 }
 
-/**
- * ดึงข้อมูลประวัติ
- */
+/** ดึงข้อมูลประวัติ */
 async function getDataHistory() {
   showLoader();
   await http
@@ -279,6 +267,7 @@ async function getDataHistory() {
           lastUpdateFullName: e.lastUpdateFullName,
         });
       });
+      rowsHistoryMain.value = rowsHistory.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -288,9 +277,16 @@ async function getDataHistory() {
     });
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ฟังก์ค้นหาข้อมูลรายการประวัติข้อมูลราชการ */
+function serchDataTableHistory() {
+  rowsHistory.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsHistoryMain.value,
+    columnsHistory.value ? columnsHistory.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   getData();
 });
@@ -656,7 +652,7 @@ onMounted(() => {
         tittle="ประวัติแก้ไขข้อมูลราชการ"
         :close="() => (modalHistory = !modalHistory)"
       />
-      <q-separator color="grey-4" />
+      <q-separator />
 
       <q-card-section style="max-height: 50vh" class="scroll">
         <div class="row q-pb-sm q-gutter-x-sm">
@@ -668,8 +664,7 @@ onMounted(() => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            class="col-2"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -697,8 +692,6 @@ onMounted(() => {
           bordered
           :paging="true"
           dense
-          class="custom-header-table"
-          :filter="filterKeyword.trim()"
           :visible-columns="visibleColumnsHistory"
         >
           <template v-slot:header="props">
@@ -711,7 +704,6 @@ onMounted(() => {
               >
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width></q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
index 7ef3bee27..135eb32c8 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
@@ -29,6 +29,7 @@ const {
   messageError,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const profileId = ref<string>(
@@ -36,9 +37,7 @@ const profileId = ref<string>(
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -55,6 +54,7 @@ const disciplineData = reactive<RequestItemsObject>({
 });
 
 const rows = ref<RequestItemsObject[]>([]); //รายการวินัย
+const rowsMain = ref<RequestItemsObject[]>([]); //รายการวินัย
 const mode = ref<string>("table"); //การแสดงผล Table card
 const filterKeyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
@@ -206,9 +206,7 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
-/**
- * ปิด dialog ข้อมูลวินัย
- */
+/** ปิด dialog ข้อมูลวินัย*/
 function closeDialog() {
   modal.value = false;
   edit.value = false;
@@ -220,15 +218,14 @@ function closeDialog() {
   disciplineData.refCommandDate = null;
 }
 
-/**
- * เปิด dialog ข้อมูลวินัย
- */
+/** เปิด dialog ข้อมูลวินัย*/
 function openDialogAdd() {
   modal.value = true;
 }
 
 /**
  * function fetch ข้อมูลรายการวินัย
+ * @param id id Profile
  */
 async function fetchData(id: string) {
   showLoader();
@@ -236,6 +233,7 @@ async function fetchData(id: string) {
     .get(config.API.profileNewDisciplineByProfileId(id, empType.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsMain.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -245,9 +243,7 @@ async function fetchData(id: string) {
     });
 }
 
-/**
- * funciton เพิ่มช้อมูลวินัย
- */
+/** funciton เพิ่มช้อมูลวินัย*/
 function addData() {
   showLoader();
   const body = {
@@ -278,6 +274,7 @@ function addData() {
 
 /**
  * funciton บันทึกแก่ไขช้อมูลวินัย
+ * @param idData  id ที่ต้องการแก้ไข
  */
 function editData(idData: string) {
   showLoader();
@@ -327,9 +324,7 @@ function openDialogHistory(idOrder: string) {
   id.value = idOrder;
 }
 
-/**
- * function ยืนยันการบันทึกข้อมูล
- */
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -341,9 +336,16 @@ function onSubmit() {
   );
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ฟังก์ค้นหาข้อมูลรายการวินัย */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData(profileId.value);
 });
@@ -369,7 +371,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -432,7 +434,6 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="filterKeyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index c02e418b2..1505bbebb 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -14,8 +14,14 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = mixin;
 
 /**
  * props
@@ -24,12 +30,10 @@ const modal = defineModel<boolean>("modal", { required: true }); //แสดง
 const id = defineModel<string>("id", { required: true }); //id วินัยที่ต้องการดูประวัติแก้ไขวินัย
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-/**
- * props
- */
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const rows = ref<RequestItemsObject[]>([]); //รายการประวัติแก้ไขวินัย
+const rowsMain = ref<RequestItemsObject[]>([]); //รายการประวัติแก้ไขวินัย
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -140,9 +144,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย
- */
+/** fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย*/
 async function getHistory() {
   showLoader();
   await http
@@ -164,6 +166,7 @@ async function getHistory() {
             e.refCommandDate == null ? null : new Date(e.refCommandDate),
         });
       });
+      rowsMain.value = rows.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -173,9 +176,17 @@ async function getHistory() {
     });
 }
 
+/** ฟังก์ค้นหาข้อมูลรายการวินัย */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไขวินัย
  */
 watch(modal, (status) => {
@@ -207,7 +218,7 @@ watch(modal, (status) => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -238,7 +249,6 @@ watch(modal, (status) => {
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
           v-model:pagination="historyPagination"
-          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
index 3f3e18319..ffd5bf4a4 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
@@ -22,9 +22,7 @@ import type {
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue";
 
-/**
- * props
- */
+/**props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -41,6 +39,7 @@ const {
   date2Thai,
   dateToISO,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const profileId = ref<string>(
@@ -83,6 +82,7 @@ const statLeaveOptionFilter = ref<DataOption[]>([
 
 //Table
 const rows = ref<DetailData[]>([]);
+const rowsMain = ref<DetailData[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -112,6 +112,9 @@ const columns = ref<QTableProps["columns"]>([
     label: "วัน เดือน ปี ที่ลา",
     sortable: true,
     field: "dateLeave",
+    format(val, row) {
+      return dateThaiRange([row.dateStartLeave, row.dateEndLeave]);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -134,6 +137,9 @@ const columns = ref<QTableProps["columns"]>([
     label: "สถานะ",
     sortable: true,
     field: "status",
+    format(val, row) {
+      return statusLeave(val);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -184,9 +190,7 @@ const clickEditRowType = () => {
   }
 };
 
-/**
- * function เปิด dialog ข้อมูลการลา
- */
+/** function เปิด dialog ข้อมูลการลา*/
 function openDialogAdd() {
   modal.value = true;
   edit.value = false;
@@ -239,6 +243,7 @@ function clickTotal() {
 
 /**
  * function เปิด dialog แก้ไขข้อมูลการลา
+ * @param props ข้อมูลที่ต้องการแก้ไข
  */
 function openDialogEdit(props: DetailData) {
   edit.value = true;
@@ -271,9 +276,7 @@ function openDialogEdit(props: DetailData) {
   }
 }
 
-/**
- * ปิด dialog ข้อมูลการลา
- */
+/** ปิด dialog ข้อมูลการลา*/
 function closeDialog() {
   modal.value = false;
   edit.value = false;
@@ -330,16 +333,14 @@ function dateThaiRange(val: [Date, Date]) {
 
 /**
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ * @param id id รายการ
  */
 function openDialogHistory(idOrder: string) {
   modalHistory.value = true;
   id.value = idOrder;
 }
 
-/**
- * function ยืนยันการบันทึกข้อมูล
- */
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm($q, async () => {
     if (edit.value == false) {
@@ -350,9 +351,7 @@ function onSubmit() {
   });
 }
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
+/** บันทึกเพิ่มข้อมูล*/
 function saveData() {
   showLoader();
   http
@@ -381,9 +380,7 @@ function saveData() {
     });
 }
 
-/**
- * บันทึกแก้ไขข้อมูล
- */
+/** บันทึกแก้ไขข้อมูล*/
 async function editData() {
   showLoader();
   http
@@ -410,9 +407,7 @@ async function editData() {
     });
 }
 
-/**
- * function fetch ข้อมูลรายการลา
- */
+/** function fetch ข้อมูลรายการลา*/
 async function getData() {
   showLoader();
   await http
@@ -430,6 +425,7 @@ async function getData() {
         reason: item.reason,
         typeLeaveId: item.leaveTypeId,
       }));
+      rowsMain.value = rows.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -439,6 +435,15 @@ async function getData() {
     });
 }
 
+/** ฟังก์ค้นหาข้อมูลรายการวินัย */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -467,7 +472,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -532,7 +537,6 @@ onMounted(() => {
     v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword.trim()"
   >
     >
     <template v-slot:header="props">
@@ -573,14 +577,7 @@ onMounted(() => {
           <div v-if="col.name === 'no'">
             {{ props.rowIndex + 1 }}
           </div>
-          <div v-else-if="col.name == 'dateLeave'">
-            {{
-              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
-            }}
-          </div>
-          <div v-else-if="col.name == 'status'">
-            {{ statusLeave(col.value) }}
-          </div>
+
           <div v-else>
             {{ col.value ? col.value : "-" }}
           </div>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
index 612a699a0..d5d31d5c4 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -21,13 +21,21 @@ const id = defineModel<string>("id", { required: true });
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = mixin;
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const filterKeyword = ref<string>("");
 const rows = ref<DetailData[]>([]); //data history
+const rowsMain = ref<DetailData[]>([]); //data history
+
 const formFilter = reactive<FormFilter>({
   page: 1,
   pageSize: 12,
@@ -71,6 +79,9 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "dateLeave",
     headerStyle: "font-size: 14px",
+    format(val, row) {
+      return dateThaiRange([row.dateStartLeave, row.dateEndLeave]);
+    },
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
@@ -94,6 +105,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return statusLeave(val);
+    },
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -149,9 +163,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * function fetch ข้อมูลประวัติการแก้ไขการลา
- */
+/** function fetch ข้อมูลประวัติการแก้ไขการลา */
 async function getHistory() {
   showLoader();
   await http
@@ -176,6 +188,7 @@ async function getHistory() {
               : "",
         });
       });
+      rowsMain.value = rows.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -217,9 +230,17 @@ function statusLeave(val: string) {
   }
 }
 
+/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขการลา */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
  */
 watch(modal, (status) => {
@@ -250,7 +271,7 @@ watch(modal, (status) => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -281,7 +302,6 @@ watch(modal, (status) => {
           v-model:pagination="historyPagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
@@ -301,17 +321,7 @@ watch(modal, (status) => {
                     1
                   }}
                 </div>
-                <div v-else-if="col.name == 'dateLeave'">
-                  {{
-                    dateThaiRange([
-                      props.row.dateStartLeave,
-                      props.row.dateEndLeave,
-                    ])
-                  }}
-                </div>
-                <div v-else-if="col.name == 'status'">
-                  {{ statusLeave(col.value) }}
-                </div>
+
                 <div v-else>
                   {{ col.value ? col.value : "-" }}
                 </div>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index 6fc3d271d..e6ee577f3 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -25,6 +25,7 @@ const {
   hideLoader,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const profileId = ref<string>(
@@ -32,9 +33,7 @@ const profileId = ref<string>(
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -56,6 +55,7 @@ const dutyData = reactive<RequestItemsObject>({
 const mode = ref<string>("table"); //การแสดงผล Table card
 const filterKeyword = ref<string>(""); //คำค้นหา
 const rows = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
+const rowsMain = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
@@ -179,15 +179,14 @@ function closeDialog() {
   dutyData.refCommandDate = null;
 }
 
-/**
- * fetch ข้อมูลรายการพิเศษ
- */
+/** fetch ข้อมูลรายการพิเศษ*/
 async function fetchData(id: string) {
   showLoader();
   await http
     .get(config.API.profileNewDutyByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -197,9 +196,7 @@ async function fetchData(id: string) {
     });
 }
 
-/**
- * functoin บันทึกการเพิ่มข้อมูล
- */
+/** functoin บันทึกการเพิ่มข้อมูล*/
 function addData() {
   showLoader();
   const body = {
@@ -227,9 +224,7 @@ function addData() {
     });
 }
 
-/**
- * functoin บันทึกการแก้ไขข้อมูล
- */
+/** functoin บันทึกการแก้ไขข้อมูล*/
 function editData(idData: string) {
   showLoader();
   http
@@ -250,9 +245,7 @@ function editData(idData: string) {
     });
 }
 
-/**
- * ยืนยันการบันทึกข้อมูล
- */
+/** ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -264,9 +257,15 @@ function onSubmit() {
   );
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งา*/
 onMounted(() => {
   fetchData(profileId.value);
 });
@@ -292,7 +291,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -356,7 +355,6 @@ onMounted(() => {
     :paging="true"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword.trim()"
     v-model:pagination="pagination"
   >
     >
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index fbd4916b5..2219e213e 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -16,13 +16,20 @@ const id = defineModel<string>("id", { required: true });
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = mixin;
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const rows = ref<ResponseObject[]>([]); //data history
+const rowsMain = ref<ResponseObject[]>([]); //data history
 const columns = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
@@ -132,9 +139,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * function fetch ข้อมูลประวติการแก้ไขข้อมูล
- */
+/** function fetch ข้อมูลประวติการแก้ไขข้อมูล*/
 function getHistory() {
   showLoader();
   http
@@ -158,6 +163,7 @@ function getHistory() {
           lastUpdatedAt: e.lastUpdatedAt,
         });
       });
+      rowsMain.value = rows.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -167,9 +173,16 @@ function getHistory() {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
  */
 watch(modal, (status) => {
@@ -189,6 +202,7 @@ watch(modal, (status) => {
         tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
         :close="() => ((modal = false), (rows = []))"
       />
+      <q-separator />
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
@@ -199,7 +213,7 @@ watch(modal, (status) => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -230,7 +244,6 @@ watch(modal, (status) => {
           v-model:pagination="historyPagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index 8d3564464..969282d7d 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -24,13 +24,12 @@ const {
   messageError,
   dialogConfirm,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const id = ref<string>("");
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -50,6 +49,7 @@ const detail = ref<string>(""); //รายละเอียด
 
 //Table
 const rows = ref<RowList[]>([]);
+const rowsMain = ref<RowList[]>([]);
 const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -80,15 +80,14 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * fetch รายการข้อมูลอื่นๆ
- */
+/** fetch รายการข้อมูลอื่นๆ*/
 async function getData() {
   showLoader();
   await http
     .get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsMain.value = res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -98,9 +97,7 @@ async function getData() {
     });
 }
 
-/**
- * เปิด dialog ข้อมูลอื่นๆ
- */
+/** เปิด dialog ข้อมูลอื่นๆ*/
 function openDialogAdd() {
   modal.value = true;
 }
@@ -126,9 +123,7 @@ function openDialogHistory(idOrder: string) {
   modalHistory.value = true;
 }
 
-/**
- * ปิด dialog
- */
+/** ปิด dialog */
 function closeDialog() {
   modal.value = false;
   edit.value = false;
@@ -136,9 +131,7 @@ function closeDialog() {
   detail.value = "";
 }
 
-/**
- * validate check
- */
+/** validate check*/
 function validateForm() {
   dialogConfirm(
     $q,
@@ -154,9 +147,7 @@ function validateForm() {
   );
 }
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
+/** บันทึกเพิ่มข้อมูล*/
 function saveData() {
   showLoader();
   http
@@ -179,9 +170,7 @@ function saveData() {
     });
 }
 
-/**
- * บันทึกแก้ไขข้อมูล
- */
+/** บันทึกแก้ไขข้อมูล*/
 function editData() {
   showLoader();
   http
@@ -202,6 +191,14 @@ function editData() {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   getData();
 });
@@ -227,7 +224,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -290,7 +287,6 @@ onMounted(() => {
     :grid="mode === 'card'"
     :paging="true"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword.trim()"
     :rows-per-page-options="[10, 25, 50, 100]"
   >
     <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
index 7871612da..529454365 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
@@ -14,18 +14,23 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = mixin;
 
-/**
- * props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const rows = ref<RowList[]>([]); // data history
+const rowsMain = ref<RowList[]>([]); // data history
 const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -80,9 +85,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdatedAt",
 ]);
 
-/**
- * ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล
- */
+/** ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล*/
 function getHistory() {
   showLoader();
   http
@@ -99,6 +102,7 @@ function getHistory() {
           lastUpdatedAt: new Date(e.lastUpdatedAt),
         });
       });
+      rowsMain.value = rows.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -108,9 +112,16 @@ function getHistory() {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
  */
 watch(modal, (status) => {
@@ -141,7 +152,7 @@ watch(modal, (status) => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -171,7 +182,6 @@ watch(modal, (status) => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 953c23efb..04eadbed8 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -9,21 +9,15 @@ import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile"
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
- * importType
- */
+/** importType*/
 import type { QTableColumn } from "quasar";
 import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const store = useProfileDataStore();
@@ -36,11 +30,10 @@ const {
   messageError,
   dialogConfirm,
   dialogMessageNotify,
+  onSearchDataTable,
 } = useCounterMixin();
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -63,6 +56,7 @@ const id = ref<string>("");
 const modal = ref<boolean>(false); // แสดงฟอร์มแก้ไขประวัติส่วนตัว
 const informaData = ref<ResponseObject>(); // ข้อมูลส่วนคัว
 const rowsHistory = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
+const rowsHistoryMain = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
 const filterHistory = ref<string>(""); //คำค้นหาช้อมูลรายการประวัติการแก้ไข
 const modalHistory = ref<boolean>(false); // แสดงช้อมูลรายการประวัติการแก้ไข
 const age = ref<string | null>(""); //อายุ
@@ -285,10 +279,7 @@ const pagination = ref({
   descending: true,
 });
 
-/**
- * function เรียกข้อมูลข้อมูลส่วนตัว
- *
- */
+/** function เรียกข้อมูลข้อมูลส่วนตัว*/
 async function getData() {
   showLoader();
   await http
@@ -310,9 +301,7 @@ async function getData() {
     });
 }
 
-/**
- * function แก้ไขข้อมูลประวัติส่วนตัว
- */
+/** function แก้ไขข้อมูลประวัติส่วนตัว*/
 function onClickOpenDialog() {
   if (!informaData.value) return;
   modal.value = true;
@@ -334,9 +323,7 @@ function onClickOpenDialog() {
   formData.phone = informaData.value.phone;
 }
 
-/**
- * function ยืนยันการบันทึกข้อมูล
- */
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -366,9 +353,7 @@ function onSubmit() {
   );
 }
 
-/**
- * function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว
- */
+/** function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว*/
 async function clickHistory() {
   showLoader();
   modalHistory.value = true;
@@ -377,6 +362,7 @@ async function clickHistory() {
     .get(config.API.profileNewProfileHisById(id.value, empType.value))
     .then(async (res) => {
       rowsHistory.value = await res.data.result;
+      rowsHistoryMain.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -409,18 +395,14 @@ function changeCardID(citizenId: string | number | null) {
   }
 }
 
-/**
- * function เช็คอายุไม่เกิน 18 ปี
- */
+/** function เช็คอายุไม่เกิน 18 ปี*/
 function calculateMaxDate() {
   const today = new Date();
   today.setFullYear(today.getFullYear() - 18);
   return today;
 }
 
-/**
- * ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่
- */
+/** ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่*/
 watch(
   () => formData.birthDate,
   (v) => {
@@ -430,9 +412,16 @@ watch(
   }
 );
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลส่วนตัว */
+function serchDataTable() {
+  rowsHistory.value = onSearchDataTable(
+    filterHistory.value,
+    rowsHistoryMain.value,
+    columnsHistory.value
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   const promises = [];
 
@@ -556,7 +545,7 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <!-- Edit Dialog -->
+  <!-- แก้ไขประวัติส่วนตัว -->
   <q-dialog v-model="modal" persistent>
     <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -866,11 +855,16 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <!-- ประวัติแก้ไขข้อมูลส่วนตัว -->
   <q-dialog v-model="modalHistory" persistent>
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="() => ((modalHistory = false), (rowsHistory = []))"
+        :close="
+          () => (
+            (modalHistory = false), ((rowsHistory = []), (filterHistory = ''))
+          )
+        "
       />
       <q-separator />
 
@@ -883,7 +877,7 @@ onMounted(() => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -915,7 +909,6 @@ onMounted(() => {
           v-model:pagination="pagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 9e6a32057..3b42fcf2c 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -10,22 +10,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
- * importType
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type { ResponseObject } from "@/components/information/interface/response/OldName";
 import type { DataProfile } from "@/modules/04_registryPerson/interface/response/Main";
 import type { FormChangeName } from "@/modules/04_registryPerson/interface/request/Main";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import dialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const store = useProfileDataStore();
@@ -39,11 +33,10 @@ const {
   showLoader,
   hideLoader,
   pathRegistryEmp,
+  onSearchDataTable,
 } = useCounterMixin();
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -99,6 +92,7 @@ const alertUpload = ref<boolean>(false);
 
 // Table
 const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -173,9 +167,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * ฟังก์ชันดึงข้อมูลส่วนตัว
- */
+/** ฟังก์ชันดึงข้อมูลส่วนตัว*/
 async function fetchDataPersonal() {
   showLoader();
   await http
@@ -194,7 +186,6 @@ async function fetchDataPersonal() {
 
 /**
  * ฟังก์ชันดึงข้อมูลรายการประวัติการเปลี่ยนชื่อ-นามสกุล
- *
  * @param id id profile
  */
 async function fetchData(id: string) {
@@ -203,6 +194,7 @@ async function fetchData(id: string) {
     .get(config.API.profileNewChangeNameByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -212,9 +204,7 @@ async function fetchData(id: string) {
     });
 }
 
-/**
- * ฟังก์ชันยืนยันการบันทึกข้อมูล
- */
+/** ฟังก์ชันยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   if (!!fileUpload.value || dialogStatus.value === "edit") {
     dialogConfirm(
@@ -307,9 +297,7 @@ async function onDownloadFile(id: string) {
     });
 }
 
-/**
- * ฟังกชันเพิ่มการเปลี่ยนชื่อ - นามสกุล
- */
+/** ฟังกชันเพิ่มการเปลี่ยนชื่อ - นามสกุล */
 async function addData() {
   showLoader();
   await http
@@ -397,18 +385,23 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
-/**
- * ฟังก์ชันปิด popup เปลี่ยนชื่อ-นามสกุล
- */
+/** ฟังก์ชันปิด popup เปลี่ยนชื่อ-นามสกุล*/
 function closeDialog() {
   selection.value = [];
   alertUpload.value = false;
   dialog.value = false;
 }
 
-/**
- * ดูการเปลี่ยนแปลงของข้อมูลฟอร์ท เปลี่ยนชื่อ-นามสกุล
- */
+/** ฟังก์ค้นหาข้อมูลรายการประวัติการเปลีียนชื่อ-นามสกุล*/
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterSearch.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ดูการเปลี่ยนแปลงของข้อมูลฟอร์ท เปลี่ยนชื่อ-นามสกุล*/
 watch(
   () => [
     changeNameData.prefix,
@@ -423,9 +416,7 @@ watch(
   }
 );
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   // เช็ค ตัวเลือก ถ้าไม่มีให้ ดึงข้อมูลใหท่
   if (
@@ -476,6 +467,7 @@ onMounted(async () => {
       label="ค้นหา"
       class="q-mr-sm"
       v-model="filterSearch"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -507,7 +499,6 @@ onMounted(async () => {
     v-model:pagination="pagination"
     :rows="rows"
     :columns="columns"
-    :filter="filterSearch.trim()"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
     :virtual-scroll-sticky-size-start="48"
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
index 07d51b2e5..7d6f48a19 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
@@ -35,6 +35,7 @@ const {
   hideLoader,
   dialogConfirm,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 /**
@@ -80,16 +81,19 @@ const dataLabel = {
 
 const modalHistory = ref<boolean>(false); //แสดง Popup ประวัติแก้ไขข้อมูลที่อยู่
 const rowsHistory = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
+const rowsHistoryMain = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
 const filterHistory = ref<string>(""); //คำค้นหา
 const visibleColumnsHistory = ref<String[]>([
   "currentAddress",
   "currentDistrict",
   "currentSubDistrict",
   "currentZipCode",
+  "currentProvince",
   "registrationAddress",
   "registrationDistrict",
   "registrationProvince",
   "registrationSame",
+
   "registrationSubDistrict",
   "registrationZipCode",
   "lastUpdateFullName",
@@ -251,7 +255,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
 
 /**
  * ฟังก์ชันดึงข้อมูลที่อยู่
- *
  * ดึงข้อมูลที่อยู่ ข้อมูลจังหวัด ข้อมูล เขต / อำเภอ และข้อมูล แขวง/ตำบล
  */
 async function getData() {
@@ -354,11 +357,7 @@ function selectSubDistrict(e: string | null, name: string) {
   }
 }
 
-/**
- * ฟังก์ชันดึงข่้อมูลทั่งหมด
- *
- *
- */
+/** ฟังก์ชันดึงข่้อมูลทั่งหมด*/
 async function fetchAll() {
   await getData();
   if (!store.profileIdBefore) {
@@ -392,9 +391,7 @@ async function fetchAll() {
   ).name;
 }
 
-/**
- * ฟังก์ชันบันทึกข้อมูลข้อมูลที่อยู่
- */
+/** ฟังก์ชันบันทึกข้อมูลข้อมูลที่อยู่*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -434,9 +431,7 @@ function onSubmit() {
   );
 }
 
-/**
- * ฟังก์ชันเปิด popup การแก้ไขข้อมูลข้อมูลที่อยู่
- */
+/** ฟังก์ชันเปิด popup การแก้ไขข้อมูลข้อมูลที่อยู่*/
 async function onClickOpenDialog() {
   if (!addressData) return;
   Object.assign(formData, addressData);
@@ -466,9 +461,7 @@ async function onClickOpenDialog() {
   }
 }
 
-/**
- * ฟังก์ชันปิด Popup การแก้ไขข้อมูลที่อยู่
- */
+/** ฟังก์ชันปิด Popup การแก้ไขข้อมูลที่อยู่ */
 function clickClose() {
   Object.assign(formData, store.defaultAddressForm);
   modal.value = false;
@@ -476,7 +469,6 @@ function clickClose() {
 
 /**
  * ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่
- *
  * และดึงข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
  */
 async function clickHistory() {
@@ -487,6 +479,7 @@ async function clickHistory() {
     .get(config.API.profileNewAddressHisById(profileId.value, empType.value))
     .then(async (res) => {
       rowsHistory.value = await res.data.result;
+      rowsHistoryMain.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -512,9 +505,16 @@ function sameAddressToggle(v: string) {
   }
 }
 
-/**
- * ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
- */
+/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่ */
+function serchDataTable() {
+  rowsHistory.value = onSearchDataTable(
+    filterHistory.value,
+    rowsHistoryMain.value,
+    columnsHistory.value ? columnsHistory.value : []
+  );
+}
+
+/** ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้า*/
 watch(
   () => sameAddress.value,
   (v) => {
@@ -522,9 +522,7 @@ watch(
   }
 );
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   await fetchAll();
 });
@@ -661,7 +659,7 @@ onMounted(async () => {
     </div>
   </div>
 
-  <!-- Edit Dialog -->
+  <!-- แก้ไขข้อมูลที่อยู่ -->
   <q-dialog v-model="modal" persistent>
     <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -902,6 +900,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <!-- ประวัติแก้ไขข้อมูลที่อยู่ -->
   <q-dialog v-model="modalHistory" persistent>
     <q-card style="min-width: 80%">
       <DialogHeader
@@ -919,7 +918,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -949,7 +948,6 @@ onMounted(async () => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index ff85ed0fb..dd2234080 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -30,11 +30,10 @@ const {
   messageError,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = useCounterMixin();
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -147,10 +146,11 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val) => date2Thai(val),
+    format: (val) => date2Thai(val, false, true),
   },
 ]);
 const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
 
 /** ข้อมูล*/
 const fatherData = reactive<FormPerson>({
@@ -204,9 +204,7 @@ const fromData = reactive({
   statusMarital: "",
 });
 
-/**
- * function fetch ข้อมูลบิดา
- */
+/** function fetch ข้อมูลบิดา*/
 async function fetchDataFather() {
   await http
     .get(
@@ -229,9 +227,7 @@ async function fetchDataFather() {
     });
 }
 
-/**
- * function fetch ข้อมูลมารดา
- */
+/** function fetch ข้อมูลมารดา*/
 async function fetchDataMother() {
   await http
     .get(
@@ -254,9 +250,7 @@ async function fetchDataMother() {
     });
 }
 
-/**
- * function fetch ข้อมูลคู่สมรส
- */
+/** function fetch ข้อมูลคู่สมรส*/
 async function fetchDataCouple() {
   await http
     .get(
@@ -280,9 +274,7 @@ async function fetchDataCouple() {
     });
 }
 
-/**
- * function fetch ข้อมูลบุตร
- */
+/** function fetch ข้อมูลบุตร*/
 async function fetchDataChildren() {
   await http
     .get(
@@ -345,9 +337,7 @@ function onSubmit(type: string) {
   });
 }
 
-/**
- * function ปิด popup
- */
+/** function ปิด popup*/
 function closeDialog() {
   modal.value = false;
   modalHistory.value = false;
@@ -431,9 +421,7 @@ async function onOpenDialogHistory(type: string, id: string = "") {
   await fetchHistory(historyId, type);
 }
 
-/**
- * function fetch ข้อมูลความสัมพันธ์
- */
+/** function fetch ข้อมูลความสัมพันธ์ */
 function fetchDataRelationship() {
   http
     .get(config.API.orgRelationship)
@@ -454,10 +442,10 @@ function fetchDataRelationship() {
  * @param val  คำค้นหา
  * @param update  function
  */
-function filterSelectorRelation(val: any, update: Function) {
+function filterSelectorRelation(val: string, update: Function) {
   update(() => {
     optionRelationship.value = optionRelationshipMain.value.filter(
-      (v: any) => v.name.indexOf(val) > -1
+      (v: DataOption) => v.name.indexOf(val) > -1
     );
   });
 }
@@ -490,6 +478,7 @@ async function fetchHistory(id: string, type: string) {
         lastUpdatedAt: e.lastUpdatedAt,
         statusMarital: type === "couple" ? e.relationship : undefined,
       }));
+      rowsMain.value = rows.value;
     })
     .catch((err) => {
       messageError($q, err);
@@ -499,9 +488,24 @@ async function fetchHistory(id: string, type: string) {
     });
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขข้อมูล */
+function serchDataTable() {
+  const baseColumns =
+    typeForm.value === "couple"
+      ? columns.value
+      : typeForm.value === "mother"
+      ? columns.value?.filter((e) => e.name !== "statusMarital")
+      : columns.value?.filter(
+          (e) => e.name !== "lastNameOld" && e.name !== "statusMarital"
+        );
+  rows.value = onSearchDataTable(
+    filterHistory.value,
+    rowsMain.value,
+    baseColumns ? baseColumns : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   showLoader();
   await Promise.all([
@@ -875,6 +879,7 @@ onMounted(async () => {
     </div>
   </div>
 
+  <!-- แก้ไขข้อมูล -->
   <q-dialog v-model="modal" class="dialog" persistent>
     <q-card style="min-width: 80%">
       <q-form @submit.prevent greedy @validation-success="onSubmit(typeForm)">
@@ -1063,6 +1068,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <!-- ประวัติการแก้ไขข้อมูล -->
   <q-dialog v-model="modalHistory" class="dialog" persistent>
     <q-card style="min-width: 80%">
       <DialogHeader
@@ -1087,7 +1093,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -1105,7 +1111,12 @@ onMounted(async () => {
             :options="
               typeForm === 'couple'
                 ? columns
-                : columns?.filter((e) => e.name !== 'lastNameOld')
+                : typeForm === 'mother'
+                ? columns?.filter((e) => e.name !== 'statusMarital')
+                : columns?.filter(
+                    (e) =>
+                      e.name !== 'lastNameOld' && e.name !== 'statusMarital'
+                  )
             "
             option-value="name"
             style="min-width: 140px"
@@ -1130,7 +1141,6 @@ onMounted(async () => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
index 8ed9a1e83..33b700994 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -32,6 +32,7 @@ const {
   success,
   date2Thai,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const id = ref<string>(route.params.id.toString()); //id profile
@@ -39,14 +40,15 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 const dialog = ref<boolean>(false); //แสดง popup ข้อมูลประวัติการศึกษา
 const dialogStatus = ref<string>("create"); //สถานะข้อมูลประวัติการศึกษา
 const mode = ref<string>("table"); //การแสดงของ Table card
-/**
- * props
- */
+
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
-//Table
+/** Table*/
+const keyword = ref<string>("");
 const rows = ref<ResponseObject[]>([]);
+const rowsMain = ref<ResponseObject[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -75,10 +77,12 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ตั้งแต่",
     sortable: true,
-    field: (v) =>
-      v.isDate
-        ? date2Thai(v.startDate)
-        : new Date(v.startDate).getFullYear() + 543,
+    field: "startDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.startDate)
+        : new Date(row.startDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -89,8 +93,13 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ถึง",
     sortable: true,
-    field: (v) =>
-      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    field: "endDate",
+
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.endDate)
+        : new Date(row.endDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -220,9 +229,32 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "educationLevel",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
-//Table ประวัติแก้ไขประวัติการศึกษา
+/** Table ประวัติแก้ไขประวัติการศึกษา*/
+const historyKeyword = ref<string>("");
 const historyRows = ref<ResponseObject[]>([]);
+const historyRowsMain = ref<ResponseObject[]>([]);
 const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -251,10 +283,12 @@ const historyColumns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ตั้งแต่",
     sortable: true,
-    field: (v) =>
-      v.isDate
-        ? date2Thai(v.startDate)
-        : new Date(v.startDate).getFullYear() + 543,
+    field: "startDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.startDate)
+        : new Date(row.startDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -265,8 +299,12 @@ const historyColumns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ถึง",
     sortable: true,
-    field: (v) =>
-      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    field: "endDate",
+    format(val, row) {
+      row.isDate
+        ? date2Thai(row.endDate)
+        : new Date(row.endDate).getFullYear() + 543;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -420,6 +458,30 @@ const historyColumns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const historyVisibleColumns = ref<string[]>([
+  "educationLevel",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const editId = ref<string>(""); //id ที่ต้องการแก้ไข
 const isDate = ref<string>("false");
 
@@ -461,59 +523,7 @@ const educationData = reactive<RequestItemsObject>({
   positionPathId: "",
 });
 
-const keyword = ref<string>("");
-const historyKeyword = ref<string>("");
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const visibleColumns = ref<string[]>([
-  "educationLevel",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "fundName",
-  "isEducation",
-  "endDate",
-  "startDate",
-  "finishDate",
-  "note",
-]);
-const historyVisibleColumns = ref<string[]>([
-  "educationLevel",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "fundName",
-  "isEducation",
-  "endDate",
-  "startDate",
-  "finishDate",
-  "note",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-
-/**
- * function ยืนยันการบันทึกข้อมูล
- */
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -552,9 +562,7 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
-/**
- * function เคลียร์ formData
- */
+/** function เคลียร์ formData*/
 function clearForm() {
   isDate.value = "false";
   educationData.educationLevel = "";
@@ -610,17 +618,13 @@ function editForm(row: any) {
   dialog.value = true;
 }
 
-/**
- * function ปิด popup มูลประวัติการศึกษา
- */
+/** function ปิด popup มูลประวัติการศึกษา*/
 function closeDialog() {
   clearForm();
   dialog.value = false;
 }
 
-/**
- * funcitob ปิด popup ประวัติการศึกษา
- */
+/** funcitob ปิด popup ประวัติการศึกษา*/
 function closeHistoryDialog() {
   historyDialog.value = false;
   historyKeyword.value = "";
@@ -637,6 +641,7 @@ async function fetchData(id: string) {
     .get(config.API.profileNewEducationByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -646,9 +651,7 @@ async function fetchData(id: string) {
     });
 }
 
-/**
- * function fetch ข้อมูลระดับการศึกษา
- */
+/** function fetch ข้อมูลระดับการศึกษา*/
 function fetchEducationLevel() {
   http
     .get(config.API.orgEducationLevel)
@@ -676,6 +679,7 @@ function fetchHistoryData(id: string) {
     .get(config.API.profileNewEducationHisByEducationId(id, empType.value))
     .then(async (res) => {
       historyRows.value = await res.data.result;
+      historyRowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -685,9 +689,7 @@ function fetchHistoryData(id: string) {
     });
 }
 
-/**
- * function เพิ่มข้อมูลประวัติการศึกษา
- */
+/** function เพิ่มข้อมูลประวัติการศึกษา*/
 function addData() {
   showLoader();
   http
@@ -741,9 +743,25 @@ function editData(idData: string) {
     });
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ฟังก์ค้นหาข้อมูลรายการประวัติการศึกษา */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ฟังก์ค้นหาข้อมูลรายการประวัติการศึกษา */
+function serchDataTableHistory() {
+  historyRows.value = onSearchDataTable(
+    historyKeyword.value,
+    historyRowsMain.value,
+    historyColumns.value ? historyColumns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(async () => {
   await fetchData(id.value);
   fetchEducationLevel();
@@ -771,7 +789,13 @@ onMounted(async () => {
     >
 
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา">
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      @keydown.enter.pervent="serchDataTable"
+    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -832,7 +856,6 @@ onMounted(async () => {
     flat
     bordered
     :paging="true"
-    :filter="keyword.trim()"
     dense
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
@@ -998,6 +1021,7 @@ onMounted(async () => {
     </template>
   </d-table>
 
+  <!-- แก้ไขข้อมูลประวัติการศึกษา -->
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
@@ -1433,6 +1457,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <!-- ประวัติแก้ไขประวัติการศึกษา -->
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 80%">
       <dialog-header
@@ -1451,6 +1476,7 @@ onMounted(async () => {
             v-model="historyKeyword"
             label="ค้นหา"
             class="q-mr-sm"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -1481,7 +1507,6 @@ onMounted(async () => {
           bordered
           :paging="true"
           dense
-          :filter="historyKeyword.trim()"
           v-model:pagination="historyPagination"
           :rows-per-page-options="[20, 50, 100]"
           class="custom-header-table"
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
index be4b7725e..dc07a2f88 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -26,6 +26,7 @@ const {
   success,
   date2Thai,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const id = ref<string>(route.params.id.toString()); //id profile
@@ -41,6 +42,7 @@ const isLeave = defineModel<boolean>("isLeave", {
 //Table
 const keyword = ref<string>(""); //คำต้นหา
 const rows = ref<ResponseObject[]>([]); //รายการความสามารถ
+const rowsMain = ref<ResponseObject[]>([]); //รายการความสามารถ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "field",
@@ -100,6 +102,7 @@ const editId = ref<string>(""); //idที่ต้องการแก้ไ
 
 const historyDialog = ref<boolean>(false); //แสดง popup รายการประวัติ
 const historyRows = ref<ResponseObject[]>([]); //รายการประวัติ
+const historyRowsMain = ref<ResponseObject[]>([]); //รายการประวัติ
 const historyKeyword = ref<string>(""); //คำต้นหาประวัติ
 const historyColumns = ref<QTableProps["columns"]>([
   {
@@ -200,9 +203,7 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * function ยืนยันการบันทึกข้อมูล
- */
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -214,9 +215,7 @@ function onSubmit() {
   );
 }
 
-/**
- * function เคลียร์ formData
- */
+/** function เคลียร์ formData*/
 function clearForm() {
   specialSkill.detail = "";
   specialSkill.field = "";
@@ -238,15 +237,14 @@ function editForm(row: any) {
   dialog.value = true;
 }
 
-/**
- * function fetch ข้อมูลความสามรรถพิเศษ
- */
+/** function fetch ข้อมูลความสามรรถพิเศษ*/
 async function fetchData(id: string) {
   showLoader();
   await http
     .get(config.API.profileNewAbilityByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -266,6 +264,7 @@ async function fetchHistoryData(id: string) {
     .get(config.API.profileNewAbilityHisByAbilityId(id, empType.value))
     .then(async (res) => {
       historyRows.value = await res.data.result;
+      historyRowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -275,9 +274,7 @@ async function fetchHistoryData(id: string) {
     });
 }
 
-/**
- * function เพิ่มข้อมูลความสามรรถพิเศษ
- */
+/** function เพิ่มข้อมูลความสามรรถพิเศษ*/
 async function addData() {
   showLoader();
   await http
@@ -327,29 +324,42 @@ async function editData(idData: string) {
     });
 }
 
-/**
- * function ปิด popup  ข้อมูลความสามารถพิเศษ
- */
+/** function ปิด popup  ข้อมูลความสามารถพิเศษ*/
 function closeDialog() {
   dialog.value = false;
 }
 
-/**
- * function ปิด popup  รายการประวัติ
- */
+/** function ปิด popup  รายการประวัติ*/
 function closeHistoryDialog() {
   historyDialog.value = false;
   historyKeyword.value = "";
   historyRows.value = [];
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+/** ฟังก์ค้นหาข้อมูลรายการความสามาพิเศษ */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ฟังก์ค้นหาข้อมูลรายการประวัติแก้ไขความสามารถพิเศษ */
+function serchDataTableHistory() {
+  historyRows.value = onSearchDataTable(
+    historyKeyword.value,
+    historyRowsMain.value,
+    historyColumns.value ? historyColumns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData(id.value);
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
@@ -364,7 +374,13 @@ onMounted(() => {
       <q-tooltip>เพิ่มข้อมูล</q-tooltip>
     </q-btn>
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา">
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      @keydown.enter.pervent="serchDataTable"
+    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -426,7 +442,6 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="keyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
@@ -530,6 +545,7 @@ onMounted(() => {
     </template>
   </d-table>
 
+  <!-- แก้ไขข้อมูลความสามารถพิเศษ -->
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
@@ -602,6 +618,7 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <!-- ประวัติแก้ไขความสามารถพิเศษ -->
   <q-dialog v-model="historyDialog" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <dialog-header
@@ -619,6 +636,7 @@ onMounted(() => {
             v-model="historyKeyword"
             label="ค้นหา"
             class="q-mr-sm"
+            @keydown.enter.pervent="serchDataTableHistory"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -649,7 +667,6 @@ onMounted(() => {
           bordered
           :paging="true"
           dense
-          :filter="historyKeyword.trim()"
           v-model:pagination="historyPagination"
           :rows-per-page-options="[20, 50, 100]"
           class="custom-header-table"
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index ff4aceb0c..71be17a68 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -32,9 +32,7 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -48,12 +46,14 @@ const {
   messageError,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = useCounterMixin();
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 //Table
 const rows = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
+const rowsMain = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
 const keyword = ref<string>(""); //คำค้นหา
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
@@ -214,15 +214,14 @@ const posExecutiveOptionMain = ref<DataOption[]>([]);
 
 const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
 
-/**
- * function fetch รายการ ตำแหน่งเงินเดือน
- */
+/** function fetch รายการ ตำแหน่งเงินเดือน*/
 async function fetchListSalary() {
   showLoader();
   await http
     .get(config.API.profileListSalaryNew(profileId.value, empType.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsMain.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -232,9 +231,7 @@ async function fetchListSalary() {
     });
 }
 
-/**
- * function fetch รายการ ตำแหน่งเงินเดือน
- */
+/** function fetch รายการ ตำแหน่งเงินเดือน*/
 function fetchType() {
   http
     .get(config.API.orgPosType)
@@ -316,9 +313,7 @@ function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
   formDataSalary.doc = statusEdit ? data.templateDoc : "";
 }
 
-/**
- * function  ปิด dialog ตำแหน่งเงินเดือน
- */
+/** function  ปิด dialog ตำแหน่งเงินเดือน*/
 function onClickCloseDialog() {
   modalDialogSalary.value = false;
 }
@@ -403,9 +398,7 @@ function updateDoc(val: string) {
   formDataSalary.doc = val;
 }
 
-/**
- * function ยืนยันการบันทึกข้อมูล
- */
+/** function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -511,9 +504,7 @@ function onClikcHistory(id: string) {
   modalHistory.value = true;
 }
 
-/**
- * function fetch ข้อมูลสายงาน
- */
+/** function fetch ข้อมูลสายงาน*/
 function fetchDataOption() {
   showLoader();
   http
@@ -563,9 +554,7 @@ function fetchDataOption() {
     });
 }
 
-/**
- * function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร
- */
+/** function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร*/
 function fetchDataOptionExecutive() {
   showLoader();
   http
@@ -585,9 +574,7 @@ function fetchDataOptionExecutive() {
     });
 }
 
-/**
- * function fetch ข้อมูลปรเภทตำแหน่ง
- */
+/** function fetch ข้อมูลปรเภทตำแหน่ง*/
 function fetchOptionGroup() {
   showLoader();
   http
@@ -621,9 +608,16 @@ function onRefCommand(data: ResListSalary) {
   commandId.value = data.commandId;
   // commandId.value = 'bdf9da91-ba45-497a-a2b7-cc49e2446d97'; //จำลอง
 }
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchListSalary();
 });
@@ -642,7 +636,14 @@ onMounted(() => {
       <q-tooltip>เพิ่มข้อมูล</q-tooltip>
     </q-btn>
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+      @keydown.enter.pervent="serchDataTable"
+    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -668,12 +669,11 @@ onMounted(() => {
     flat
     bordered
     dense
-    :filter="keyword.trim()"
     :columns="columns"
     :rows="rows"
     :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100]"
+    :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
   >
     <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
index 14284f7a9..0e118bff4 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -14,18 +14,23 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const route = useRoute();
-const { date2Thai, showLoader, hideLoader, messageError, pathRegistryEmp } =
-  useCounterMixin();
+const {
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = useCounterMixin();
 
-/**
- * props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const salaryId = defineModel<string>("salaryId", { required: true });
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const rowsMain = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
 const keyword = ref<string>(""); //คำค้นหา
 const baseColumns = ref<QTableProps["columns"]>([
   {
@@ -233,15 +238,14 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * function fetch ข้อมูลประวัติการแก้ไข
- */
+/** function fetch ข้อมูลประวัติการแก้ไข*/
 function fetchListHistory() {
   showLoader();
   http
     .get(config.API.profileListSalaryHistoryNew(salaryId.value, empType.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsMain.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -251,18 +255,24 @@ function fetchListHistory() {
     });
 }
 
-/**
- * ฟังก์ชันปิด Popup
- */
+/** ฟังก์ชันปิด Popup*/
 function closeDialog() {
   modal.value = false;
   keyword.value = "";
   rows.value = [];
 }
 
+/** ฟังก์ค้นหาข้อมูลรายการวินัย */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
  */
 watch(
@@ -289,6 +299,7 @@ watch(
             v-model="keyword"
             label="ค้นหา"
             class="q-mr-sm"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -315,7 +326,6 @@ watch(
           flat
           bordered
           dense
-          :filter="keyword.trim()"
           :columns="columns"
           :rows="rows"
           :paging="true"
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
index 7a637fd0f..7b4ccb5f7 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
@@ -25,6 +25,7 @@ const {
   messageError,
   success,
   pathRegistryEmp,
+  onSearchDataTable,
 } = useCounterMixin();
 
 const id = ref<string>("");
@@ -33,9 +34,7 @@ const profileId = ref<string>(
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -55,6 +54,7 @@ const formData = reactive<RequestNoPaidObject>({
 
 //Table
 const rows = ref<RowList[]>([]); //รายการ
+const rowsMain = ref<RowList[]>([]); //รายการ
 const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -128,9 +128,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * funciton ยืนยันการบันทึกข้อมูล
- */
+/** funciton ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm($q, () => {
     isStatusEdit.value ? editData() : saveData();
@@ -153,23 +151,20 @@ function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
   modalDialog.value = true;
 }
 
-/**
- * function ปิด Didalig  บันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function ปิด Didalig  บันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 function onClickCloseDialog() {
   modalDialog.value = false;
   isStatusEdit.value = false;
 }
 
-/**
- * function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 async function getData() {
   showLoader();
   await http
     .get(config.API.profileNewNoPaidByProfileId(profileId.value, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -179,9 +174,7 @@ async function getData() {
     });
 }
 
-/**
- * function เพิ่มข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function เพิ่มข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 function saveData() {
   showLoader();
   http
@@ -203,9 +196,7 @@ function saveData() {
     });
 }
 
-/**
- * function แก้ไขข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
- */
+/** function แก้ไขข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
 function editData() {
   showLoader();
   http
@@ -226,17 +217,21 @@ function editData() {
     });
 }
 
-/**
- * function เปิดข้อมูลประวัติการแก้ไช
- */
+/** function เปิดข้อมูลประวัติการแก้ไช*/
 function onClickHistory(rowId: string) {
   id.value = rowId;
   modalHistory.value = true;
 }
 
-/**
- * ทำงานเมื่อ Components ถูกเรียกใช้งาน
- */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน */
 onMounted(() => {
   getData();
 });
@@ -262,7 +257,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -323,7 +318,6 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="keyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index 298c6383a..d557faba4 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -14,8 +14,14 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = mixin;
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
@@ -25,6 +31,7 @@ const id = defineModel<string>("id", { required: true });
 //Table
 const filter = ref<string>(""); //คำค้นหา
 const rows = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const rowsMain = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -121,15 +128,14 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * fetch รายการข้อมูลประวัติการแก้ไช
- */
+/** fetch รายการข้อมูลประวัติการแก้ไช*/
 async function getHistory() {
   showLoader();
   await http
     .get(config.API.profileNewNoPaidHisById(id.value, empType.value))
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -139,17 +145,22 @@ async function getHistory() {
     });
 }
 
-/**
- * ฟังก์ชันปิด Popup
- */
+/** ฟังก์ชันปิด Popup*/
 function closeDialog() {
   modal.value = false;
   rows.value = [];
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
  */
 watch(modal, (status) => {
@@ -162,7 +173,7 @@ watch(modal, (status) => {
 });
 </script>
 <template>
-  <q-dialog v-model="modal" persistent full-width>
+  <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 80%">
       <DialogHeader
         :tittle="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
@@ -179,6 +190,7 @@ watch(modal, (status) => {
             v-model="filter"
             label="ค้นหา"
             class="q-mr-sm"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -205,7 +217,6 @@ watch(modal, (status) => {
           flat
           bordered
           dense
-          :filter="filter.trim()"
           :columns="columns"
           :rows="rows"
           :paging="true"