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

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