แก้ฟิลเตอร์ สรรหา

src/modules/03_recruiting/components/Career.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, modalDelete, modalConfirm, dateToISO, success } = mixin;
+const { date2Thai, modalDelete, modalConfirm, dateToISO, success,onSearchDataTable } = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 const id = ref<string>("");
@@ -58,6 +58,7 @@ const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
 const total = ref<string>("-");
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const filter = ref<string>(""); //search data table
 const { messageError, showLoader, hideLoader } = mixin;
 
@@ -260,6 +261,11 @@ const fetchData = async () => {
           startDate: new Date(r.durationStart),
           endDate: new Date(r.durationEnd),
         });
+        rowsData.value.push({
+          ...r,
+          startDate: new Date(r.durationStart),
+          endDate: new Date(r.durationEnd),
+        });
         calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
           (d) => {
             yearDiff = yearDiff + d.yearDiff;
@@ -554,6 +560,14 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
 </script>
 
 <template>
@@ -561,7 +575,8 @@ const getClass = (val: boolean) => {
     <Table
       :rows="rows"
       :columns="columns"
-      :filter="filter"
+      v-model:filter="filter"
+      :onSearch="onSearch"
       :visible-columns="visibleColumns"
       v-model:inputfilter="filter"
       v-model:inputvisible="visibleColumns"

src/modules/03_recruiting/components/Table.vue

@@ -9,8 +9,9 @@ const filterRef = ref<any>(null);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
-
+const filter = defineModel<string>("filter", { required: true });
 const props = defineProps({
+  onSearch: Function,
   count: Number,
   pass: Number,
   notpass: Number,
@@ -133,21 +134,15 @@ function resetFilter() {
       <q-input
         standout
         dense
-        :model-value="inputfilter"
+        v-model="filter"
         ref="filterRef"
-        @update:model-value="updateInput"
         outlined
         placeholder="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="props.onSearch?.()"
       >
         <template v-slot:append>
-          <q-icon v-if="inputfilter == ''" name="search" />
-          <q-icon
-            v-if="inputfilter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
       <!-- แสดงคอลัมน์ใน table -->

src/modules/03_recruiting/components/Table1.vue

@@ -5,6 +5,7 @@ import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
 const attrs = ref<any>(useAttrs());
+const filter = defineModel<string>("filter", { required: true });
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const editBtn = ref<boolean>(false);
@@ -13,6 +14,7 @@ const initialPagination = ref<Pagination>({
 });
 
 const props = defineProps({
+  onSearch: Function,
   inputfilter: String,
   name: String,
   icon: String,
@@ -61,9 +63,6 @@ const emit = defineEmits([
   "update:editvisible",
 ]);
 
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
 const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
@@ -106,22 +105,15 @@ const resetFilter = () => {
       <q-input
         standout
         dense
-        :model-value="inputfilter"
-        ref="filterRef"
-        @update:model-value="updateInput"
+        v-model="filter"
         outlined
         placeholder="ค้นหา"
         style="max-width: 200px"
         class="q-ml-sm"
+        @keydown.enter="props.onSearch?.(name)"
       >
         <template v-slot:append>
-          <q-icon v-if="inputfilter == ''" name="search" />
-          <q-icon
-            v-if="inputfilter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
       <!-- แสดงคอลัมน์ใน table -->

src/modules/03_recruiting/components/TableCan.vue

@@ -3,6 +3,8 @@ import { ref, useAttrs, watch } from "vue";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
+const filter = defineModel<string>("filter", { required: true });
+
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -12,6 +14,7 @@ const initialPagination = ref<Pagination>({
 });
 
 const props = defineProps({
+  onSearch: Function,
   inputfilter: String,
   iconLeft: Boolean,
   name: String,
@@ -110,21 +113,15 @@ function resetFilter() {
       <q-input
         standout
         dense
-        :model-value="inputfilter"
+        v-model="filter"
         ref="filterRef"
-        @update:model-value="updateInput"
+        @keydown.enter="onSearch"
         outlined
         placeholder="ค้นหา"
         style="max-width: 200px"
       >
         <template v-slot:append>
-          <q-icon v-if="inputfilter == ''" name="search" />
-          <q-icon
-            v-if="inputfilter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
+          <q-icon name="search" />
         </template>
       </q-input>
       <!-- แสดงคอลัมน์ใน table -->