แก้ฟิลเตอร์

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

@@ -16,7 +16,8 @@ import type { DataLeave } 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 +31,7 @@ const employeeClass = defineModel<string>("employeeClass", { required: true });
  */
 const keyword = ref<string>("");
 const rows = ref<DataLeave[]>([]);
+const rowsData = ref<DataLeave[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -108,6 +110,7 @@ function fetchListSalary() {
     .get(config.API.leaveListCard(profileId.value, employeeClass.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsData.value = res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -145,6 +148,14 @@ function convertStatus(val: string) {
   }
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   fetchListSalary();
 });
@@ -154,15 +165,9 @@ 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>
 
@@ -177,7 +182,6 @@ onMounted(() => {
         map-options
         :options="columns"
         option-value="name"
-        
         style="min-width: 140px"
       />
     </div>
@@ -188,7 +192,6 @@ onMounted(() => {
         flat
         bordered
         dense
-        :filter="keyword"
         :paging="true"
         :rows-per-page-options="[20, 50, 100]"
         :visible-columns="visibleColumns"