แก้ฟิลเตอร์

src/modules/02_transfer/views/Main.vue

@@ -20,7 +20,8 @@ const mixin = useCounterMixin();
 const transferData = useTransferDataStore();
 
 const { statusText } = transferData;
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -30,6 +31,7 @@ const pagination = ref({
 });
 
 const rows = ref<TransferMain[]>([]);
+const rowsData = ref<TransferMain[]>([]);
 const filter = ref<string>("");
 const visibleColumns = ref<String[]>([
   "no",
@@ -123,7 +125,7 @@ async function fecthListTransfer() {
     .get(config.API.listUserTransfer())
     .then((res) => {
       let data = res.data.result;
-      rows.value = data.map((e: TransferList) => ({
+      const listData = data.map((e: TransferList) => ({
         id: e.id,
         date: date2Thai(e.createdAt),
         status: e.status,
@@ -135,6 +137,8 @@ async function fecthListTransfer() {
         salary: e.salary,
         transfer: e.organization,
       }));
+      rows.value = listData;
+      rowsData.value = listData;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -158,6 +162,14 @@ function clickBack() {
   router.push(`/`);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
@@ -207,15 +219,10 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
+                @keydown.enter="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -251,7 +258,6 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               v-model:pagination="pagination"
-              :filter="filter"
             >
               <template v-slot:pagination="scope">
                 ทั้งหมด {{ rows.length }} รายการ

src/modules/08_KPI/components/Tab/02_Evaluator.vue

@@ -15,7 +15,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const route = useRoute();
-const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+const { showLoader, hideLoader, messageError, dialogConfirm, success,onSearchDataTable } =
   useCounterMixin();
 
 const evaluatorId = ref<string>(route.params.id.toString());
@@ -51,6 +51,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const rows = ref<ResEvaluator[]>([]);
+const rowsData = ref<ResEvaluator[]>([]);
 const filterKeyword = ref<string>("");
 
 const modal = ref<boolean>(false);
@@ -74,6 +75,7 @@ function fetchList() {
     .get(config.API.kpiEvaluation + `/${props.type}/${evaluatorId.value}`)
     .then((res) => {
       rows.value = res.data.result;
+      rowsData.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -139,6 +141,14 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   fetchList();
 });
@@ -165,6 +175,7 @@ onMounted(() => {
           debounce="300"
           v-model="filterKeyword"
           placeholder="ค้นหา"
+          @keydown.enter="onSearch"
         >
           <template v-slot:append>
             <q-icon name="search" />
@@ -191,7 +202,6 @@ onMounted(() => {
         ref="table"
         :columns="columns"
         :rows="rows"
-        :filter="filterKeyword"
         row-key="id"
         flat
         bordered

src/modules/10_registry/01_Information/01_Information.vue

@@ -26,6 +26,7 @@ const {
 const editPhone = ref<boolean>(false);
 const editEmail = ref<boolean>(false);
 const rowsHistory = ref<any[]>([]);
+const rowsHistoryData = ref<any[]>([]);
 const modalHistory = ref<boolean>(false);
 const phone = ref<string>("");
 const email = ref<string>("");
@@ -307,6 +308,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -666,6 +668,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขข้อมูลส่วนตัว'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/01_Information/02_ChangeName.vue

@@ -14,12 +14,14 @@ const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
 
 const rows = ref<ChangNameRows[]>([]);
+const rowsData = ref<ChangNameRows[]>([]);
 const idByrow = ref<string>("");
 const filter = ref<string>("");
 const rowsHistory = ref<ChangNameRows[]>([]);
+const rowsHistoryData = ref<ChangNameRows[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
 
 const modalHistory = ref<boolean>(false);
@@ -169,6 +171,7 @@ async function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -191,6 +194,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -200,6 +204,15 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
+
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   await getData();
@@ -221,20 +234,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -261,7 +264,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"
@@ -339,6 +341,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/01_Information/03_Address.vue

@@ -22,6 +22,7 @@ const link = ref<string>("");
 const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
 const rowsHistory = ref<any[]>([]);
+const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
@@ -272,6 +273,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -547,6 +549,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขข้อมูลที่อยู่'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/01_Information/04_Family.vue

@@ -21,6 +21,7 @@ const idFamily = ref<string>("");
 const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
 const rowsHistory = ref<any[]>([]);
+const rowsHistoryData = ref<any[]>([]);
 
 const typeForm = ref<string>("");
 const modalHistory = ref<boolean>(false);
@@ -215,7 +216,8 @@ function getHistory() {
     .get(url)
     .then((res) => {
       const data = res.data.result;
-      rowsHistory.value = data.map((e: any) => ({
+      const listData = 
+       data.map((e: any) => ({
         citizenId: e[`${typeForm.value}CitizenId`],
         prefix: e[`${typeForm.value}Prefix`],
         firstName: e[`${typeForm.value}FirstName`],
@@ -225,6 +227,8 @@ function getHistory() {
         lastNameOld:
           typeForm.value === "couple" ? e.coupleLastNameOld : undefined,
       }));
+      rowsHistory.value = listData
+      rowsHistoryData.value = listData
     })
     .catch((e) => {
       messageError($q, e);
@@ -594,6 +598,7 @@ onMounted(async () => {
     }`"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="
       typeForm === 'couple'

src/modules/10_registry/01_Information/05_Educations.vue

@@ -16,10 +16,12 @@ const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
 
 const rows = ref<EducationProfile[]>([]);
+const rowsData = ref<EducationProfile[]>([]);
 const rowsHistory = ref<EducationProfile[]>([]);
+const rowsHistoryData = ref<EducationProfile[]>([]);
 const idByRow = ref<string>("");
 const filter = ref<string>("");
 const mode = ref<boolean>($q.screen.gt.xs);
@@ -448,6 +450,7 @@ async function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -467,6 +470,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -476,6 +480,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
 
@@ -498,20 +510,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -538,7 +540,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"
@@ -619,6 +620,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขประวัติการศึกษา'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/01_Information/06_Ability.vue

@@ -13,14 +13,16 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
 const link = ref<string>("");
 const rows = ref<AbilityRows[]>([]);
+const rowsData = ref<AbilityRows[]>([]);
 const rowsHistory = ref<AbilityRows[]>([]);
+const rowsHistoryData = ref<AbilityRows[]>([]);
 const idByRow = ref<string>("");
 const filter = ref<string>("");
 const $q = useQuasar();
 const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -170,6 +172,7 @@ async function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -189,6 +192,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -198,6 +202,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   await getData();
@@ -219,20 +231,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -259,7 +261,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"
@@ -341,6 +342,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขความสามารถพิเศษ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/02_Government/01_Government.vue

@@ -25,6 +25,7 @@ const store = useRegistryInFormationStore();
 const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
 
 const rowsHistory = ref<ProfileAppointment[]>([]);
+const rowsHistoryData = ref<ProfileAppointment[]>([]);
 const modalHistory = ref<boolean>(false);
 
 /** ตัวแปรข้อมูล */
@@ -328,6 +329,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -525,6 +527,7 @@ onMounted(async() => {
     :title="'ประวัติแก้ไขข้อมูลราชการ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/02_Government/02_Discipline.vue

@@ -14,13 +14,15 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const dataStore = useDataStore()
+const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
 
 const rows = ref<DisciplineDetail[]>([]);
+const rowsData = ref<DisciplineDetail[]>([]);
 const idByRow = ref<string>("");
 const filter = ref<string>("");
 const rowsHistory = ref<DisciplineDetail[]>([]);
+const rowsHistoryData = ref<DisciplineDetail[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
 
 const modalHistory = ref<boolean>(false);
@@ -145,6 +147,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -158,10 +161,11 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserDisciplineHistoryByType(link.value,idByRow.value))
+    .get(config.API.dataUserDisciplineHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -171,7 +175,15 @@ function getHistory() {
     });
 }
 
-onMounted(async() => {
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
+onMounted(async () => {
   link.value = await dataStore.getProFileType();
   getData();
 });
@@ -192,18 +204,7 @@ onMounted(async() => {
         style="max-width: 200px"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -214,7 +215,6 @@ onMounted(async() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -223,96 +223,95 @@ onMounted(async() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
+    <d-table
-        flat
+      flat
-        dense
+      dense
-        bordered
+      bordered
-        virtual-scroll
+      virtual-scroll
-        :rows="rows.length !== 0 ? rows:[]"
+      :rows="rows.length !== 0 ? rows : []"
-        :columns="columns"
+      :columns="columns"
-        :grid="!mode"
+      :grid="!mode"
-        :filter="filter"
+      :rows-per-page-options="[10, 25, 50, 100]"
-        :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
-        :visible-columns="visibleColumns"
+      :virtual-scroll-sticky-size-start="48"
-        :virtual-scroll-sticky-size-start="48"
+    >
-      >
+      <template v-slot:header="props">
-        <template v-slot:header="props">
+        <q-tr :props="props">
-          <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
-              <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
-            </q-th>
+          <q-th auto-width />
-            <q-th auto-width />
+        </q-tr>
-          </q-tr>
+      </template>
-        </template>
 
-        <template v-if="mode" v-slot:body="props">
+      <template v-if="mode" v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
-              <div v-if="col.name == 'no'">
+            <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+              {{ props.rowIndex + 1 }}
-              </div>
+            </div>
-              <div v-else-if="col.name == 'status'">
+            <div v-else-if="col.name == 'status'">
-                {{ props.row.status ? props.row.status : "-" }}
+              {{ props.row.status ? props.row.status : "-" }}
-              </div>
+            </div>
-              <div v-else>
+            <div v-else>
-                {{ col.value ? col.value : "-" }}
+              {{ col.value ? col.value : "-" }}
-              </div>
+            </div>
-            </q-td>
+          </q-td>
-            <q-td auto-width>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
               </q-btn>
-            </q-td>
+              <q-item v-for="col in props.cols" :key="col.name">
-          </q-tr>
+                <q-item-section class="fix_top">
-        </template>
+                  <q-item-label class="text-grey-6 text-weight-medium">{{
-        <template v-else v-slot:item="props">
+                    col.label
-          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  }}</q-item-label>
-            <q-card bordered flat>
+                </q-item-section>
-              <q-list dense class="q-mt-lg relative-position">
+                <q-item-section class="fix_top">
-                <q-btn
+                  <q-item-label class="text-dark text-weight-medium">{{
-                  icon="mdi-history"
+                    col.value ? col.value : "-"
-                  color="info"
+                  }}</q-item-label>
-                  flat
+                </q-item-section>
-                  dense
+              </q-item>
-                  round
+            </q-list>
-                  size="14px"
+          </q-card>
-                  class="absolute_button"
+        </div>
-                  @click="onHistory(props.row.id)"
+      </template>
-                >
+    </d-table>
-                  <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
-                </q-btn>
-                <q-item v-for="col in props.cols" :key="col.name">
-                  <q-item-section class="fix_top">
-                    <q-item-label class="text-grey-6 text-weight-medium">{{
-                      col.label
-                    }}</q-item-label>
-                  </q-item-section>
-                  <q-item-section class="fix_top">
-                    <q-item-label class="text-dark text-weight-medium">{{
-                      col.value ? col.value : "-"
-                    }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card>
-          </div>
-        </template>
-      </d-table>
-
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขวินัย'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumns"
     :columns="columns"
   />

src/modules/10_registry/02_Government/03_Leave.vue

@@ -13,13 +13,16 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const dataStore = useDataStore()
+const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<LeaveFormType[]>([]);
+const rowsData = ref<LeaveFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<any[]>([]);
+const rowsHistoryData = ref<any[]>([]);
 
 const mode = ref<boolean>($q.screen.gt.xs);
 
@@ -220,7 +223,7 @@ function getData() {
     .get(config.API.dataUserLeaveByType(link.value))
     .then((res) => {
       const data = res.data.result;
-      rows.value = data.map((item: any) => ({
+      const listData = data.map((item: any) => ({
         id: item.id,
         typeLeave: item.leaveType.name,
         code: item.leaveType.refCommandDate,
@@ -231,6 +234,8 @@ function getData() {
         reason: item.reason,
         typeLeaveId: item.leaveTypeId,
       }));
+      rows.value = listData;
+      rowsData.value = listData;
     })
     .catch((e) => {
       messageError($q, e);
@@ -244,10 +249,10 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserLeaveHistoryByType(link.value,idByRow.value))
+    .get(config.API.dataUserLeaveHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
-      rowsHistory.value = data.map((item: any) => ({
+      const listData =  data.map((item: any) => ({
         id: item.id,
         typeLeave: item.leaveType.name,
         code: item.leaveType.refCommandDate,
@@ -260,6 +265,8 @@ function getHistory() {
         lastUpdateFullName: item.lastUpdateFullName,
         lastUpdatedAt: item.lastUpdatedAt,
       }));
+      rowsHistory.value = listData
+      rowsHistoryData.value = listData
     })
     .catch((e) => {
       messageError($q, e);
@@ -293,7 +300,15 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
-onMounted(async() => {
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
+onMounted(async () => {
   link.value = await dataStore.getProFileType();
   getData();
 });
@@ -312,20 +327,10 @@ onMounted(async() => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -336,7 +341,6 @@ onMounted(async() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -345,123 +349,122 @@ onMounted(async() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
+    <d-table
-        flat
+      flat
-        dense
+      dense
-        bordered
+      bordered
-        virtual-scroll
+      virtual-scroll
-        :rows="rows.length !== 0 ? rows:[]"
+      :rows="rows.length !== 0 ? rows : []"
-        :columns="columns"
+      :columns="columns"
-        :grid="!mode"
+      :grid="!mode"
-        :filter="filter"
+      :rows-per-page-options="[10, 25, 50, 100]"
-        :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
-        :visible-columns="visibleColumns"
+      :virtual-scroll-sticky-size-start="48"
-        :virtual-scroll-sticky-size-start="48"
+    >
-      >
+      <template v-slot:header="props">
-        <template v-slot:header="props">
+        <q-tr :props="props">
-          <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
-              <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
-            </q-th>
+          <q-th auto-width />
-            <q-th auto-width />
+        </q-tr>
-          </q-tr>
+      </template>
-        </template>
 
-        <template v-if="mode" v-slot:body="props">
+      <template v-if="mode" v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
-              <div v-if="col.name == 'no'">
+            <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+              {{ props.rowIndex + 1 }}
-              </div>
+            </div>
-              <div v-else-if="col.name == 'dateLeave'">
+            <div v-else-if="col.name == 'dateLeave'">
-                {{
+              {{
-                  dateThaiRange([
+                dateThaiRange([
-                    props.row.dateStartLeave,
+                  props.row.dateStartLeave,
-                    props.row.dateEndLeave,
+                  props.row.dateEndLeave,
-                  ])
+                ])
-                }}
+              }}
-              </div>
+            </div>
-              <div v-else-if="col.name == 'status'">
+            <div v-else-if="col.name == 'status'">
-                {{ props.row.status ? statusLeave(props.row.status) : "-" }}
+              {{ props.row.status ? statusLeave(props.row.status) : "-" }}
-              </div>
+            </div>
-              <div v-else>
+            <div v-else>
-                {{ col.value ? col.value : "-" }}
+              {{ col.value ? col.value : "-" }}
-              </div>
+            </div>
-            </q-td>
+          </q-td>
-            <q-td auto-width>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
               </q-btn>
-            </q-td>
+              <q-item v-for="col in props.cols" :key="col.name">
-          </q-tr>
+                <q-item-section class="fix_top">
-        </template>
+                  <q-item-label class="text-grey-6 text-weight-medium">{{
-        <template v-else v-slot:item="props">
+                    col.label
-          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  }}</q-item-label>
-            <q-card bordered flat>
+                </q-item-section>
-              <q-list dense class="q-mt-lg relative-position">
+                <q-item-section class="fix_top">
-                <q-btn
+                  <q-item-label
-                  icon="mdi-history"
+                    v-if="col.name == 'dateLeave'"
-                  color="info"
+                    class="text-dark text-weight-medium"
-                  flat
+                  >
-                  dense
+                    {{
-                  round
+                      dateThaiRange([
-                  size="14px"
+                        props.row.dateStartLeave,
-                  class="absolute_button"
+                        props.row.dateEndLeave,
-                  @click="onHistory(props.row.id)"
+                      ])
-                >
+                    }}</q-item-label
-                  <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
+                  >
-                </q-btn>
+                  <q-item-label
-                <q-item v-for="col in props.cols" :key="col.name">
+                    v-else-if="col.name == 'status'"
-                  <q-item-section class="fix_top">
+                    class="text-dark text-weight-medium"
-                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                  >
-                      col.label
+                    {{
-                    }}</q-item-label>
+                      props.row.status ? statusLeave(props.row.status) : "-"
-                  </q-item-section>
+                    }}</q-item-label
-                  <q-item-section class="fix_top">
+                  >
-                    <q-item-label
+                  <q-item-label v-else class="text-dark text-weight-medium">{{
-                      v-if="col.name == 'dateLeave'"
+                    col.value ? col.value : "-"
-                      class="text-dark text-weight-medium"
+                  }}</q-item-label>
-                    >
+                </q-item-section>
-                      {{
+              </q-item>
-                        dateThaiRange([
+            </q-list>
-                          props.row.dateStartLeave,
+          </q-card>
-                          props.row.dateEndLeave,
+        </div>
-                        ])
+      </template>
-                      }}</q-item-label
+    </d-table>
-                    >
-                    <q-item-label
-                      v-else-if="col.name == 'status'"
-                      class="text-dark text-weight-medium"
-                    >
-                      {{
-                        props.row.status ? statusLeave(props.row.status) : "-"
-                      }}</q-item-label
-                    >
-                    <q-item-label v-else class="text-dark text-weight-medium">{{
-                      col.value ? col.value : "-"
-                    }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card>
-          </div>
-        </template>
-      </d-table>
-
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการลา'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'Leave'"

src/modules/10_registry/02_Government/04_Duty.vue

@@ -12,15 +12,17 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
 const link = ref<string>("");
-const dataStore = useDataStore()
+const dataStore = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<DutyFormType[]>([]);
+const rowsData = ref<DutyFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<DutyFormType[]>([]);
+const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
 const mode = ref<any>($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);
 /** ตัวแปรข้อมูล */
@@ -223,6 +225,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -236,10 +239,11 @@ function getData() {
 function getHistory() {
   showLoader();
   http
-    .get(config.API.dataUserDutyHistoryByType(link.value,idByRow.value))
+    .get(config.API.dataUserDutyHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -249,7 +253,15 @@ function getHistory() {
     });
 }
 
-onMounted(async() => {
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
+onMounted(async () => {
   link.value = await dataStore.getProFileType();
   getData();
 });
@@ -270,20 +282,10 @@ onMounted(async() => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -294,7 +296,6 @@ onMounted(async() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -303,96 +304,95 @@ onMounted(async() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
+    <d-table
-        flat
+      flat
-        dense
+      dense
-        bordered
+      bordered
-        virtual-scroll
+      virtual-scroll
-        :rows="rows.length !== 0 ? rows:[]"
+      :rows="rows.length !== 0 ? rows : []"
-        :columns="columns"
+      :columns="columns"
-        :grid="!mode"
+      :grid="!mode"
-        :filter="filter"
+      :rows-per-page-options="[10, 25, 50, 100]"
-        :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
-        :visible-columns="visibleColumns"
+      :virtual-scroll-sticky-size-start="48"
-        :virtual-scroll-sticky-size-start="48"
+    >
-      >
+      <template v-slot:header="props">
-        <template v-slot:header="props">
+        <q-tr :props="props">
-          <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
-              <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
-            </q-th>
+          <q-th auto-width />
-            <q-th auto-width />
+        </q-tr>
-          </q-tr>
+      </template>
-        </template>
 
-        <template v-if="mode" v-slot:body="props">
+      <template v-if="mode" v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
-              <div v-if="col.name == 'no'">
+            <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+              {{ props.rowIndex + 1 }}
-              </div>
+            </div>
-              <div v-else-if="col.name == 'status'">
+            <div v-else-if="col.name == 'status'">
-                {{ props.row.status ? props.row.status : "-" }}
+              {{ props.row.status ? props.row.status : "-" }}
-              </div>
+            </div>
-              <div v-else>
+            <div v-else>
-                {{ col.value ? col.value : "-" }}
+              {{ col.value ? col.value : "-" }}
-              </div>
+            </div>
-            </q-td>
+          </q-td>
-            <q-td auto-width>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
               </q-btn>
-            </q-td>
+              <q-item v-for="col in props.cols" :key="col.name">
-          </q-tr>
+                <q-item-section class="fix_top">
-        </template>
+                  <q-item-label class="text-grey-6 text-weight-medium">{{
-        <template v-else v-slot:item="props">
+                    col.label
-          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  }}</q-item-label>
-            <q-card bordered flat>
+                </q-item-section>
-              <q-list dense class="q-mt-lg relative-position">
+                <q-item-section class="fix_top">
-                <q-btn
+                  <q-item-label class="text-dark text-weight-medium">{{
-                  icon="mdi-history"
+                    col.value ? col.value : "-"
-                  color="info"
+                  }}</q-item-label>
-                  flat
+                </q-item-section>
-                  dense
+              </q-item>
-                  round
+            </q-list>
-                  size="14px"
+          </q-card>
-                  class="absolute_button"
+        </div>
-                  @click="onHistory(props.row.id)"
+      </template>
-                >
+    </d-table>
-                  <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
-                </q-btn>
-                <q-item v-for="col in props.cols" :key="col.name">
-                  <q-item-section class="fix_top">
-                    <q-item-label class="text-grey-6 text-weight-medium">{{
-                      col.label
-                    }}</q-item-label>
-                  </q-item-section>
-                  <q-item-section class="fix_top">
-                    <q-item-label class="text-dark text-weight-medium">{{
-                      col.value ? col.value : "-"
-                    }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card>
-          </div>
-        </template>
-      </d-table>
-
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขปฏิบัติราชการพิเศษ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

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
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </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"
   />

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
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </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"
   />

src/modules/10_registry/04_Achievement/01_Certificate.vue

@@ -16,12 +16,14 @@ 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<CertificateDetail[]>([]);
+const rowsData = ref<CertificateDetail[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<CertificateDetail[]>([]);
+const rowsHistoryData = ref<CertificateDetail[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
 
 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);
@@ -223,6 +226,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -232,6 +236,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -253,20 +265,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -293,7 +295,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"
@@ -374,6 +375,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/04_Achievement/02_Training.vue

@@ -16,12 +16,14 @@ const link = ref<string>("");
 const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<TrainingFormType[]>([]);
+const rowsData = ref<TrainingFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<TrainingFormType[]>([]);
+const rowsHistoryData = ref<TrainingFormType[]>([]);
 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);
 /** ตัวแปรข้อมูล */
@@ -327,6 +329,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -350,6 +353,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -359,6 +363,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -380,20 +392,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -420,7 +422,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"
@@ -493,6 +494,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขการฝึกอบรม/ดูงาน'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/04_Achievement/03_Insignia.vue

@@ -16,12 +16,14 @@ const link = ref<string>("");
 const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<InsigniaFormType[]>([]);
+const rowsData = ref<InsigniaFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<InsigniaFormType[]>([]);
+const rowsHistoryData = ref<InsigniaFormType[]>([]);
 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);
 /** ตัวแปรข้อมูล */
@@ -404,6 +406,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -427,6 +430,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -436,6 +440,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -457,20 +469,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -497,7 +499,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"
@@ -591,6 +592,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขเครื่องราชอิสริยาภรณ์'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'insignia'"

src/modules/10_registry/04_Achievement/04_Honor.vue

@@ -18,12 +18,15 @@ const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const store = useRegistryInFormationStore();
 const rows = ref<HonorFormData[]>([]);
+const rowsData = ref<HonorFormData[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<HonorFormData[]>([]);
+const rowsHistoryData = ref<HonorFormData[]>([]);
 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);
 /** ตัวแปรข้อมูล */
@@ -201,6 +204,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -222,6 +226,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -231,6 +236,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -252,20 +265,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -292,7 +295,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"
@@ -373,6 +375,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขประกาศเกียรติคุณ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/04_Achievement/05_Assessments.vue

@@ -16,12 +16,14 @@ const link = ref<string>("");
 const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<AssessmentsFormType[]>([]);
+const rowsData = ref<AssessmentsFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<AssessmentsFormType[]>([]);
+const rowsHistoryData = ref<AssessmentsFormType[]>([]);
 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);
 /** ตัวแปรข้อมูล */
@@ -262,6 +264,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -285,6 +288,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -314,6 +318,14 @@ function textPoint(val: number | undefined) {
   else return "-";
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -337,18 +349,7 @@ onMounted(async () => {
         style="max-width: 200px"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -375,7 +376,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"
@@ -456,6 +456,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue

@@ -16,12 +16,14 @@ const link = ref<string>("");
 const dataPerson = useDataStore();
 const idByRow = ref<string>("");
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<any[]>([]);
+const rowsHistoryData = ref<any[]>([]);
 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 modalDevelop = ref<boolean>(false);
 const kpiDevelopmentId = ref<string>("");
 
@@ -123,6 +125,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -146,6 +149,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -164,6 +168,14 @@ function openDialogDevelop(data: any) {
   kpiDevelopmentId.value = data.kpiDevelopmentId;
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -185,20 +197,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -225,7 +227,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"

src/modules/10_registry/05_Other/01_Other.vue

@@ -16,12 +16,14 @@ const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataPerson = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<OtherFormType[]>([]);
+const rowsData = ref<OtherFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<OtherFormType[]>([]);
+const rowsHistoryData = ref<OtherFormType[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
 
 const modalHistory = ref<boolean>(false);
@@ -118,6 +120,7 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -133,6 +136,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
+      rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -142,6 +146,14 @@ function getHistory() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
@@ -161,20 +173,10 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter="onSearch"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="search" />
-            v-if="filter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
-          <q-icon
-            v-else
-            name="search"
-            class="cursor-pointer"
-            @click="filter = ''"
-          />
         </template>
       </q-input>
       <q-select
@@ -201,7 +203,6 @@ onMounted(async () => {
       :rows="rows"
       :columns="columns"
       :grid="!mode"
-      :filter="filter"
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
@@ -281,6 +282,7 @@ onMounted(async () => {
     :title="'ประวัติแก้ไขข้อมูลอื่นๆ'"
     :getData="getHistory"
     :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
   />

src/modules/10_registry/Dialog/DialogHistory.vue

@@ -7,13 +7,14 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const type = ref<string>("");
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai,onSearchDataTable } = mixin;
 const modal = defineModel<boolean>("modal", { required: true });
 const title = defineModel<string>("title", { required: true });
 
 const filter = ref<string>("");
 
 const rows = defineModel<any>("rows");
+const rowsData = defineModel<any>("rowsData");
 const columns = defineModel<QTableProps["columns"]>("columns");
 const visibleColumns = defineModel<string[]>("visibleColumns");
 
@@ -49,6 +50,14 @@ function statusLeave(val: string) {
   }
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watch(
   () => modal.value,
   (n) => {
@@ -75,20 +84,10 @@ watch(
               dense
               v-model="filter"
               label="ค้นหา"
+              @keydown.enter="onSearch"
             >
               <template v-slot:append>
-                <q-icon
+                <q-icon name="search" />
-                  v-if="filter !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="filter = ''"
-                />
-                <q-icon
-                  v-else
-                  name="search"
-                  class="cursor-pointer"
-                  @click="filter = ''"
-                />
               </template>
             </q-input>
           </div>
@@ -99,7 +98,6 @@ watch(
               outlined
               emit-value
               map-options
-              
               options-dense
               option-value="name"
               v-model="visibleColumns"
@@ -117,7 +115,6 @@ watch(
           virtual-scroll
           :rows="rows"
           :columns="columns"
-          :filter="filter"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
           :virtual-scroll-sticky-size-start="48"

src/modules/11_probation/views/main.vue

@@ -13,6 +13,7 @@ import type { ListMain } from "@/modules/11_probation/interface/index/main";
 
 const profileId = ref<string>("");
 const rows = ref<ListMain[]>([]);
+const rowsData = ref<ListMain[]>([]);
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -22,6 +23,7 @@ const {
   showLoader,
   hideLoader,
   date2Thai,
+  onSearchDataTable
 } = mixin;
 
 const filter = ref<string>("");
@@ -146,6 +148,7 @@ function getList(id: string) {
     .then((res) => {
       const data = res.data.data;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {})
     .finally(() => {});
@@ -166,6 +169,14 @@ function onDetail(id: string) {
   router.push(`/probation/detail/${profileId.value}/${id}`);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   await getMain();
 });
@@ -290,20 +301,10 @@ onMounted(async () => {
                 v-model="filter"
                 label="ค้นหา"
                 :style="mode ? `max-width: 200px` : `max-width: 150px`"
+                @keydown.enter="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon
+                  <q-icon name="search" />
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon
-                    v-else
-                    name="search"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
                 </template>
               </q-input>
               <q-select
@@ -332,7 +333,6 @@ onMounted(async () => {
                 :rows="rows"
                 :columns="columns"
                 :grid="!$q.screen.gt.xs"
-                :filter="filter"
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
                 :virtual-scroll-sticky-size-start="48"

src/modules/11_probation/views/mainDetail.vue

@@ -16,10 +16,18 @@ import type {
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { messageError, findOrgName, showLoader, hideLoader, date2Thai } = mixin;
+const {
+  messageError,
+  findOrgName,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  onSearchDataTable,
+} = mixin;
 
 const profileId = ref<string>("");
 const rows = ref<ListMain[]>([]);
+const rowsData = ref<ListMain[]>([]);
 
 const mode = ref<boolean>($q.screen.gt.xs);
 const profileImg = ref<string>("");
@@ -142,6 +150,7 @@ function getList(id: string) {
     .then((res) => {
       const data = res.data.data;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -170,6 +179,14 @@ function onDetail(id: string) {
   router.push(`/probation/detail/${profileId.value}/${id}`);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   await getMain();
 });
@@ -301,20 +318,10 @@ onMounted(async () => {
                 v-model="filter"
                 label="ค้นหา"
                 :style="mode ? `max-width: 200px` : `max-width: 150px`"
+                @keydown.enter="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon
+                  <q-icon name="search" />
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon
-                    v-else
-                    name="search"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
                 </template>
               </q-input>
               <q-select
@@ -325,7 +332,6 @@ onMounted(async () => {
                 outlined
                 emit-value
                 map-options
-                
                 options-dense
                 option-value="name"
                 style="min-width: 140px"
@@ -344,7 +350,6 @@ onMounted(async () => {
                 :rows="rows"
                 :columns="columns"
                 :grid="!$q.screen.gt.xs"
-                :filter="filter"
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
                 :virtual-scroll-sticky-size-start="48"

src/modules/13_portfolio/views/Main.vue

@@ -12,7 +12,14 @@ import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+  onSearchDataTable,
+} = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -25,6 +32,7 @@ const pagination = ref({
  */
 const filter = ref<string>("");
 const rows = ref<PortfolioRowsType[]>([]);
+const rowsData = ref<PortfolioRowsType[]>([]);
 const visibleColumns = ref<String[]>(["no", "name", "detail"]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -63,6 +71,7 @@ async function fecthList() {
     .get(config.API.portfolio)
     .then((res) => {
       rows.value = res.data.result;
+      rowsData.value = res.data.result;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -106,6 +115,14 @@ function onDelete(id: string) {
   });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
@@ -156,15 +173,10 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
+                @keydown.enter="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon name="clear" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -200,7 +212,6 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               v-model:pagination="pagination"
-              :filter="filter"
             >
               <template v-slot:pagination="scope">
                 ทั้งหมด {{ rows.length }} รายการ

src/stores/mixin.ts

@@ -1117,6 +1117,28 @@ export const useCounterMixin = defineStore("mixin", () => {
     } else {
       return "";
     }
+
+
+  }
+
+  function onSearchDataTable(keyword: string, data: any[], columns: any[]) {
+    const searchText = keyword.trim().toLowerCase();
+
+    if (!searchText) {
+      return data; // คืนค่าทั้งหมดถ้าไม่มีข้อความค้นหา
+    }
+
+    // คืนค่าข้อมูลที่กรองแล้ว
+    return data.filter((row: any) => {
+      return columns.some((col: any) => {
+        const rawValue = row[col.field];
+        const formattedValue = col.format
+          ? col.format(rawValue, row) // ใช้ `format` ถ้ามี
+          : rawValue;
+
+        return String(formattedValue).toLowerCase().includes(searchText);
+      });
+    });
   }
 
   return {
@@ -1156,5 +1178,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     findOrgName,
     findPosMasterNoOld,
     findOrgNameOld,
+
+    onSearchDataTable
   };
 });