แก้ฟิลเตอร์

src/modules/13_salary/components/InfoDiscipline.vue

@@ -16,7 +16,7 @@ import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const { date2Thai, showLoader, hideLoader, messageError } = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError,onSearchDataTable } = useCounterMixin();
 
 /**
  *  props
@@ -30,6 +30,7 @@ const employeeClass = defineModel<string>("employeeClass", { required: true });
  */
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
+const rowsData = ref<DataDiscipline[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -106,6 +107,7 @@ function fetchListDiscipline() {
     .get(config.API.disciplineListCard(profileId.value, employeeClass.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsData.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -115,6 +117,14 @@ function fetchListDiscipline() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   fetchListDiscipline();
 });
@@ -124,15 +134,16 @@ onMounted(() => {
   <q-card-section class="q-pt-none">
     <div class="row items-center q-gutter-x-sm q-pb-sm">
       <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="onSearch"
+      >
         <template v-slot:append>
-          <q-icon v-if="keyword == ''" name="search" />
-          <q-icon
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="keyword = ''"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
 
@@ -147,7 +158,6 @@ onMounted(() => {
         map-options
         :options="columns"
         option-value="name"
-        
         style="min-width: 140px"
       />
     </div>
@@ -158,7 +168,6 @@ onMounted(() => {
         flat
         bordered
         dense
-        :filter="keyword"
         :paging="true"
         :rows-per-page-options="[20, 50, 100]"
         :visible-columns="visibleColumns"