แก้ฟิลเตอร์

src/modules/10_registry/03_Salary/01_Salary.vue

@@ -16,12 +16,15 @@ const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<SalaryFormType[]>([]);
+const rowsData = ref<SalaryFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<SalaryFormType[]>([]);
+const rowsHistoryData = ref<SalaryFormType[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
 const checkType = ref<boolean>(
   dataPerson.officerType == "OFFICER" ? true : false
@@ -363,6 +366,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -380,6 +384,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -389,6 +394,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -410,20 +423,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
@@ -450,7 +453,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"
@@ -531,6 +533,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />