แก้ฟิลเตอร์

src/modules/10_registry/03_Salary/02_Nopaid.vue

@@ -15,12 +15,14 @@ const link = ref<string>("");
 const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<NopaidFormType[]>([]);
+const rowsData = ref<NopaidFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<NopaidFormType[]>([]);
+const rowsHistoryData = ref<NopaidFormType[]>([]);
 const $q = useQuasar();
 const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -200,6 +202,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -219,6 +222,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -228,6 +232,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -249,20 +261,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
       <q-select
@@ -289,7 +291,6 @@ onMounted(async () => {
       :rows="rows.length !== 0 ? rows : []"
       :columns="columns"
       :grid="!mode"
-      :filter="filter"
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
@@ -372,6 +373,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />