แก้ฟิลเตอร์

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue

@@ -9,7 +9,7 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { Director } from "@/modules/11_discipline/interface/request/disciplinary";
+import type { Director } from "@/modules/11_discipline/interface/request/Disciplinary";
 import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";
 
 /** importComponents*/
@@ -91,6 +91,7 @@ const page = ref<number>(1); //หน้า
 const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
 const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
 const listDirector = ref<Directors[]>([]); //รายชื่อกรรมการ
+const listDirectorData = ref<Directors[]>([]); //รายชื่อกรรมการ
 
 /**
  * ฟังก์เปิด popup เพิ่มรายชื่อกรรมการ
@@ -152,7 +153,7 @@ async function getList() {
     .get(config.API.evaluateDirectorMain() + `/admin`)
     .then(async (res) => {
       const data = await res.data.result;
-      listDirector.value = data.map((item: Directors) => ({
+      const listData = data.map((item: Directors) => ({
         id: item.id,
         name: `${item.prefix}${item.firstName} ${item.lastName}`,
         createdAt: item.createdAt,
@@ -168,6 +169,8 @@ async function getList() {
         email: item.email == "" ? "-" : item.email,
         position: item.position == "" ? "-" : item.position,
       }));
+      listDirector.value = listData;
+      listDirectorData.value = listData;
     })
     .catch((e) => {
       messageError($q, e);
@@ -262,7 +265,8 @@ watch(
     v-model:Modal="modalAddDirector"
     v-model:filter-keyword2="filter"
     :click-close="onClickClose"
-    :rows2="listDirector"
+    v-model:rows="listDirector"
+    v-model:rows-data="listDirectorData"
     :rows-per-page="rowsPerPage"
     :page="page"
     :max-page="maxPage"

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue

@@ -120,6 +120,7 @@ const page = ref<number>(1); //หน้า
 const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
 const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
 const listMeet = ref<Meetings[]>([]); //รายชื่อประชุม
+const listMeetData = ref<Meetings[]>([]); //รายชื่อประชุม
 
 /**
  * ฟังก์เปิด popup เพิ่มการประชุม
@@ -178,7 +179,7 @@ async function getList() {
     .get(config.API.meeting() + `/admin`)
     .then((res) => {
       const data = res.data.result;
-      listMeet.value = data.map((item: Meetings) => ({
+      const listData = data.map((item: Meetings) => ({
         id: item.id,
         createdAt: item.createdAt,
         createdUserId: item.createdUserId,
@@ -196,6 +197,8 @@ async function getList() {
         result: item.result,
         timePeriod: item.duration,
       }));
+      listMeet.value = listData;
+      listMeetData.value = listData;
     })
     .catch((e) => {
       messageError($q, e);
@@ -286,8 +289,9 @@ watch(
   <DialogMeet
     v-model:Modal="modalAdd"
     :clickClose="onClickClose"
-    :rows2="listMeet"
+    v-model:filterKeyword="filter"
-    v-model:filterKeyword2="filter"
+    v-model:rows="listMeet"
+    v-model:rowsData="listMeetData"
     :rowsPerPage="rowsPerPage"
     :page="page"
     :maxPage="maxPage"

src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue

@@ -1,22 +1,30 @@
 <script setup lang="ts">
 import { ref, watchEffect, watch, type PropType } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { directorType } from "@/modules/11_discipline/interface/index/Main";
+import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
+const mixin = useCounterMixin();
+const { onSearchDataTable } = mixin;
 const selected = ref<directorType[]>([]);
 
+const rows = defineModel<Directors[]>("rows", { required: true });
+const rowsData = defineModel<Directors[]>("rowsData", { required: true });
+const filterKeyword2 = defineModel<string>("filterKeyword2", {
+  required: true,
+});
+
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
   clickClose: Function,
   getData: Function,
-  rows2: Array,
-  filterKeyword2: String,
   filterTable: {
     type: String,
     default: "",
@@ -145,6 +153,14 @@ function updateProp(newPagination: number, page: number) {
   emit("update:pagination", newPagination, page);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword2.value,
+    rowsData.value,
+    columns2.value ? columns2.value : []
+  );
+}
+
 /**
  * เช็คค่า props.Modal === true
  */
@@ -187,9 +203,9 @@ watch(
           class="col-12 q-mb-sm"
           debounce="300"
           :model-value="filterKeyword2"
-          @update:model-value="updateInput"
           placeholder="ค้นหารายชื่อ"
           style="max-width: 100%"
+          @keydown.enter="onSearch"
         >
           <template v-slot:append>
             <q-icon name="search" />
@@ -198,8 +214,7 @@ watch(
 
         <d-table
           :columns="columns2"
-          :rows="rows2"
+          :rows="rows"
-          :filter="filterKeyword2?.trim()"
           row-key="id"
           :visible-columns="visibleColumns2"
           selection="multiple"

src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
 import { ref, watchEffect, watch, type PropType } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { Meeting } from "@/modules/12_evaluatePersonal/interface/index/Main";
+import type { Meetings } from "@/modules/12_evaluatePersonal/interface/response/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
+const mixin = useCounterMixin();
+const { onSearchDataTable } = mixin;
+const filterKeyword = defineModel<string>("filterKeyword", { required: true });
+const rows = defineModel<Meetings[]>("rows", { required: true });
+const rowsData = defineModel<Meetings[]>("rowsData", { required: true });
+
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
   clickClose: Function,
   getData: Function,
-  rows2: Array,
-  filterKeyword2: String,
   filterTable: {
     type: String,
     default: "",
@@ -149,6 +155,14 @@ function updateProp(newPagination: number, page: number) {
   emit("update:pagination", newPagination, page);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** เช็คค่า props.Modal === true */
 watchEffect(() => {
   if (props.Modal === true) {
@@ -188,10 +202,10 @@ watch(
           dense
           class="col-12 q-mb-sm"
           debounce="300"
-          :model-value="filterKeyword2"
+          :model-value="filterKeyword"
-          @update:model-value="updateInput"
           placeholder="ค้นหารายการประชุม"
           style="max-width: 100%"
+          @keydown.enter="onSearch"
         >
           <template v-slot:append>
             <q-icon name="search" />
@@ -200,8 +214,7 @@ watch(
 
         <d-table
           :columns="columns"
-          :rows="rows2"
+          :rows="rows"
-          :filter="filterKeyword2?.trim()"
           row-key="id"
           selection="multiple"
           v-model:selected="selected"

src/modules/13_salary/components/04_salaryLists/Dashboard.vue

@@ -20,7 +20,7 @@ import type { ResSalaryOrg } from "@/modules/13_salary/interface/response/Salary
 /** use*/
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
-const { messageError, showLoader, hideLoader } = useCounterMixin();
+const { messageError, showLoader, hideLoader,onSearchDataTable } = useCounterMixin();
 
 /** props*/
 const props = defineProps({
@@ -146,6 +146,7 @@ const itemsCard = computed(() => {
 
 /** ข้อมูล Table*/
 const rows = ref<ResSalaryOrg[]>([]);
+const rowsData = ref<ResSalaryOrg[]>([]);
 const filter = ref<string>("");
 const columnsAPR = ref<QTableProps["columns"]>([
   {
@@ -450,6 +451,7 @@ async function fetchDataDashboard() {
       console.log(res.data.result.salaryOrg);
 
       rows.value = res.data.result.salaryOrg;
+      rowsData.value = res.data.result.salaryOrg;
     })
     .catch((err) => {
       messageError($q, err);
@@ -459,6 +461,14 @@ async function fetchDataDashboard() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** HookLifecycle*/
 onMounted(() => {
   fetchDataDashboard();
@@ -535,6 +545,7 @@ watch([() => props?.snapShot, () => props.roundFilter], () => {
             v-model="filter"
             placeholder="ค้นหา"
             outlined
+            @keydown.enter="onSearch"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -567,7 +578,6 @@ watch([() => props?.snapShot, () => props.roundFilter], () => {
         flat
         bordered
         dense
-        :filter="filter"
         :visible-columns="visibleColumns"
       >
         <template v-slot:header="props">

src/modules/13_salary/components/05_salaryListsEmployee/Dashboard.vue

@@ -12,7 +12,8 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
-const { messageError, showLoader, hideLoader } = useCounterMixin();
+const { messageError, showLoader, hideLoader, onSearchDataTable } =
+  useCounterMixin();
 
 const props = defineProps({
   year: Number,
@@ -131,6 +132,7 @@ const itemsCard = computed(() => {
 });
 
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const columnsAPR = ref<QTableProps["columns"]>([
   {
     name: "org",
@@ -410,6 +412,7 @@ function fetchDataDashboard() {
       itemsCardSpeciel.value[2].total = quota.totalBackup;
 
       rows.value = res.data.result.salaryOrg;
+      rowsData.value = res.data.result.salaryOrg;
     })
     .catch((err) => {
       messageError($q, err);
@@ -418,6 +421,15 @@ function fetchDataDashboard() {
       hideLoader();
     });
 }
+
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   fetchDataDashboard();
 });
@@ -479,6 +491,7 @@ watch([() => props?.snapShot, () => props.roundFilter], () => {
             v-model="filter"
             placeholder="ค้นหา"
             outlined
+            @keydown.enter="onSearch"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -495,7 +508,6 @@ watch([() => props?.snapShot, () => props.roundFilter], () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>

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

@@ -16,7 +16,7 @@ import type { DataDiscipline } 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 +30,7 @@ const employeeClass = defineModel<string>("employeeClass", { required: true });
  */
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
+const rowsData = ref<DataDiscipline[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -106,6 +107,7 @@ function fetchListDiscipline() {
     .get(config.API.disciplineListCard(profileId.value, employeeClass.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsData.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -115,6 +117,14 @@ function fetchListDiscipline() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   fetchListDiscipline();
 });
@@ -124,15 +134,16 @@ 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 name="search" />
-          <q-icon
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="keyword = ''"
-          />
         </template>
       </q-input>
 
@@ -147,7 +158,6 @@ onMounted(() => {
         map-options
         :options="columns"
         option-value="name"
-        
         style="min-width: 140px"
       />
     </div>
@@ -158,7 +168,6 @@ onMounted(() => {
         flat
         bordered
         dense
-        :filter="keyword"
         :paging="true"
         :rows-per-page-options="[20, 50, 100]"
         :visible-columns="visibleColumns"

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

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

@@ -16,7 +16,8 @@ import type { DataPosSalary } 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<DataPosSalary[]>([]);
+const rowsData = ref<DataPosSalary[]>([]);
 const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -154,6 +156,7 @@ function fetchListSalary() {
     .get(config.API.salaryListCard(profileId.value, employeeClass.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsData.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -163,6 +166,14 @@ function fetchListSalary() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   fetchListSalary();
 });
@@ -172,15 +183,16 @@ 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 name="search" />
-          <q-icon
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="keyword = ''"
-          />
         </template>
       </q-input>
 
@@ -195,7 +207,6 @@ onMounted(() => {
         map-options
         :options="columns"
         option-value="name"
-        
         style="min-width: 140px"
       />
     </div>
@@ -206,7 +217,6 @@ onMounted(() => {
         flat
         bordered
         dense
-        :filter="keyword"
         :paging="true"
         :rows-per-page-options="[20, 50, 100]"
         :visible-columns="visibleColumns"