ปรับ filte Table ข้อมูลทะเบียนประวัติ

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">

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">