ปรับ filter KPI Devalopment

src/modules/15_development/components/Record.vue

@@ -9,7 +9,7 @@ import type { QTableProps } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";
 
 const $q = useQuasar();
-const { date2Thai } = useCounterMixin();
+const { date2Thai, onSearchDataTable } = useCounterMixin();
 
 //prosp
 const isProfile = defineModel<boolean>("isProfile", { required: true });
@@ -18,6 +18,8 @@ const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
 //ข้อมุล Table
 const keyword = ref<string>("");
 const rows = ref<ResRecord[]>([]);
+const rowsMain = ref<ResRecord[]>([]);
+
 // baseColumns
 const baseColumns = ref<QTableProps["columns"]>([
   {
@@ -67,6 +69,11 @@ const baseColumns = ref<QTableProps["columns"]>([
     label: "ชื่อ-นามสกุล",
     sortable: true,
     field: "fullName",
+    format(val, row) {
+      return row.firstName
+        ? `${row.prefix}${row.firstName} ${row.lastName}`
+        : "-";
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -239,6 +246,15 @@ function fetchDataProject() {
   rows.value = listPerson.value.filter(
     (e: ResRecord) => e.isProfile === isProfile.value
   );
+  rowsMain.value = rows.value;
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
 }
 
 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
@@ -250,7 +266,14 @@ onMounted(() => {
 <template>
   <q-toolbar style="padding: 0px" class="q-mb-xs">
     <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>
@@ -281,7 +304,6 @@ onMounted(() => {
       :columns="columns"
       :rows="rows"
       :paging="true"
-      :filter="keyword"
       v-model:pagination="pagination"
       :rows-per-page-options="[20, 50, 100]"
       :visible-columns="visibleColumns"
@@ -318,13 +340,6 @@ onMounted(() => {
               </q-icon>
             </div>
 
-            <div v-else-if="col.name == 'fullName'">
-              {{
-                props.row.firstName
-                  ? `${props.row.prefix}${props.row.firstName}${props.row.lastName}`
-                  : "-"
-              }}
-            </div>
             <div v-else-if="col.name === 'org'" class="table_ellipsis">
               {{ col.value ? col.value : "-" }}
             </div>