Merge branch 'develop' of github.com:Frappet/hrms-mgt into develop

* 'develop' of github.com:Frappet/hrms-mgt: ปรับ filter KPI Devalopment แก้ฟิลเตอร์ ปรับ วินัย trim() Tree
2024-12-10 12:13:29 +07:00 · 2024-12-10 12:13:29 +07:00 · 58935b9898
commit 58935b9898
parent 1efad82436 ecd25002a4
41 changed files with 656 additions and 502 deletions
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@ -5,7 +5,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";

 import { useCounterMixin } from "@/stores/mixin";
-import type { ResponsePreson } from "@/interface/response/listPerson";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";

 const mainStore = useDisciplineMainStore();
@ -255,7 +254,6 @@ watch(
              ref="searchRef"
              v-model="search"
              outlined
-              clearable
              dense
              label="คำค้น"
            >
--- a/src/modules/04_registryPerson/views/listView.vue
+++ b/src/modules/04_registryPerson/views/listView.vue
@ -638,7 +638,7 @@ onMounted(async () => {
              node-key="orgTreeName"
              label-key="labelName"
              v-model:expanded="expanded"
-              :filter="filterMain"
+              :filter="filterMain.trim()"
              no-results-label="ไม่พบข้อมูลที่ค้นหา"
              no-nodes-label="ไม่มีข้อมูล"
              v-model:selected="nodeData.nodeId"
--- a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
@ -406,7 +406,7 @@ onMounted(() => {
              :nodes="lazy"
              node-key="orgTreeId"
              label-key="labelName"
-              :filter="filterTree"
+              :filter="filterTree.trim()"
              no-results-label="ไม่พบข้อมูลที่ค้นหา"
              no-nodes-label="ไม่มีข้อมูล"
              v-model:expanded="expanded"
--- a/src/modules/08_registryEmployee/components/DialogSelectPos.vue
+++ b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
@ -504,7 +504,7 @@ onBeforeMount(async () => {
              :nodes="lazy"
              node-key="orgTreeId"
              label-key="orgTreeName"
-              :filter="filterTree"
+              :filter="filterTree.trim()"
              no-results-label="ไม่พบข้อมูลที่ค้นหา"
              no-nodes-label="ไม่มีข้อมูล"
              v-model:expanded="expanded"
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@ -15,20 +15,21 @@ const { showLoader, hideLoader, success, messageError } = mixin;

 /** บันทึกข้อมูล */
 async function onSubmit(data: any) {
-  /** post */
-  showLoader();
-  http
-    .post(config.API.complaintAdd(), data)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      router.push(`/discipline/complaints/${res.data.result}`);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
+  console.log(data);
+
+  // showLoader();
+  // http
+  //   .post(config.API.complaintAdd(), data)
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //     router.push(`/discipline/complaints/${res.data.result}`);
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //   });
 }
 </script>

--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, computed } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";

@ -137,6 +137,9 @@ const columns = ref<QTableProps["columns"]>([
    label: "เงินเดือน",
    sortable: true,
    field: "salary",
+    format(val, row) {
+      return val.toLocaleString();
+    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -211,7 +214,6 @@ async function getData() {
 */
 async function onSubmit(data: any) {
  showLoader();
-
  http
    .put(config.API.complaintbyId(id.value), data)
    .then(async () => {
@ -221,7 +223,7 @@ async function onSubmit(data: any) {
    .catch((e) => {
      messageError($q, e);
    })
-    .finally(async () => {
+    .finally(() => {
      hideLoader();
    });
 }
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@ -224,8 +224,6 @@ async function getActive() {
      .finally(() => {
        hideLoader();
      });
-  } else {
-    await getOc(formData.activeId);
  }
 }

--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@ -7,6 +7,8 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";

+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
 // impoet Components
 import TableComplaint from "@/modules/11_discipline/components/1_Complaint/TableComplaint.vue";

@ -15,21 +17,19 @@ import http from "@/plugins/http";
 import { checkPermission } from "@/utils/permissions";

 const $q = useQuasar();
-const mixin = useCounterMixin();
-
-const { showLoader, messageError, hideLoader } = mixin;
 const router = useRouter();
-
-/** stoer */
+const mixin = useCounterMixin();
 const complainstStore = useComplainstDataStore();
 const { fetchComplainst } = complainstStore;
+const { showLoader, messageError, hideLoader } = mixin;
+
 const filterRef = ref<HTMLInputElement | null>(null);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");

 const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
-const option = ref<any[]>(complainstStore.statusOptions);
+const option = ref<DataOption[]>(complainstStore.statusOptions);

 const total = ref<number>(0);
 const totalList = ref<number>(1);
@ -53,14 +53,14 @@ async function getList() {
      )
    )
    //
-    .then((res) => {
+    .then(async (res) => {
      totalList.value = Math.ceil(
        res.data.result.total / pagination.value.rowsPerPage
      );
      total.value = res.data.result.total;
      toptitle.value = res.data.result.total;
      const data = res.data.result.data;
-      fetchComplainst(data);
+      await fetchComplainst(data);
    })
    .catch((e) => {
      messageError($q, e);
@ -75,16 +75,6 @@ function redirectToPageadd() {
  router.push(`/discipline/complaints/add`);
 }

-/** ล้างค่าใน input */
-function resetFilter() {
-  filterKeyword.value = "";
-  pagination.value.page = 1;
-  if (filterRef.value) {
-    filterRef.value.focus();
-    getList();
-  }
-}
-
 /**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
@ -93,7 +83,7 @@ function resetFilter() {
 function filterOptionFn(val: string, update: Function) {
  update(() => {
    option.value = complainstStore.statusOptions.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
    );
  });
 }
@ -106,7 +96,7 @@ function getSearch() {
 watch(
  () => pagination.value.rowsPerPage,
  async () => {
-    await getSearch();
+    getSearch();
  }
 );

@ -122,41 +112,40 @@ onMounted(async () => {
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
-      <div class="col-4">
-        <q-select
-          v-model="statusFilter"
-          label="สถานะ"
-          dense
-          outlined
-          emit-value
-          map-options
-          option-label="name"
-          option-value="id"
-          hide-selected
-          fill-input
-          :options="option"
-          @update:model-value="getSearch()"
-          use-input
-          @filter="filterOptionFn"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-          <template v-if="statusFilter !== 'ALL'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                (option = complainstStore.statusOptions),
-                  (statusFilter = 'ALL'),
-                  getSearch()
-              "
-              class="cursor-pointer"
-            />
-          </template>
-        </q-select>
-      </div>
+      <q-select
+        v-model="statusFilter"
+        label="สถานะ"
+        dense
+        outlined
+        emit-value
+        map-options
+        option-label="name"
+        option-value="id"
+        hide-selected
+        fill-input
+        :options="option"
+        @update:model-value="getSearch()"
+        use-input
+        @filter="filterOptionFn"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+        <template v-if="statusFilter !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (option = complainstStore.statusOptions),
+                (statusFilter = 'ALL'),
+                getSearch()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
+
      <div>
        <q-btn
          v-if="checkPermission($route)?.attrIsCreate"
@ -175,7 +164,6 @@ onMounted(async () => {

      <q-input
        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
        standout
        dense
        v-model="filterKeyword"
@ -203,7 +191,6 @@ onMounted(async () => {
        :options="complainstStore.columns"
        option-value="name"
        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
      />
    </div>

--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@ -10,7 +10,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";

 import type { ArrayPersonAdd } from "@/modules/11_discipline/interface/response/investigate";
-import type { FormData } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
 import type {
  FormData as FormDataComplaint,
  ArrayPerson,
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@ -11,7 +11,7 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";

-import type { FormData } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
 import type { OptionData } from "@/modules/07_insignia/interface/index/Main";

 import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
@ -70,7 +70,6 @@ const pagination = ref({
  rowsPerPage: 10,
 });

-const filter = ref<string>("");
 const isUpdate = ref<boolean>(false);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
@ -226,9 +225,9 @@ function uploadFileRelevant() {
  showLoader();
  http
    .put(config.API.investigateRelevantUploadFile(formData.id), Data)
-    .then((res) => {
+    .then(async (res) => {
      countNum.value = 2;
-      props.getData();
+      await props.getData();
      success($q, "อัปโหลดไฟล์สำเร็จ");
    })
    .catch((e) => {
@ -1326,9 +1325,7 @@ onMounted(async () => {
                      style="max-height: 80vh"
                      :rows="rows"
                      :columns="investigateDis.columnsDirector"
-                      :filter="filter"
                      :visible-columns="investigateDis.visibleColumnsDirector"
-                      v-model:inputfilter="filter"
                      v-model:inputvisible="
                        investigateDis.visibleColumnsDirector
                      "
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@ -33,15 +33,6 @@ const pagination = ref({

 const attrs = ref<any>(useAttrs());

-/** ล้างค่า Input  */
-function resetFilter() {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-    getList();
-  }
-}
-
 /** ดึงข้อมูลบสวน */
 async function getList() {
  showLoader();
@ -54,7 +45,7 @@ async function getList() {
        statusFilter.value
      )
    )
-    .then((res) => {
+    .then(async (res) => {
      totalList.value = Math.ceil(
        res.data.result.total / pagination.value.rowsPerPage
      );
@ -62,7 +53,7 @@ async function getList() {
      toptitle.value = res.data.result.total;

      const data = res.data.result.data;
-      dataInvestigate.fecthList(data);
+      await dataInvestigate.fecthList(data);
    })
    .catch((e) => {
      messageError($q, e);
@ -95,7 +86,6 @@ async function detailPage(id: string) {
 * @param update function
 */
 function filterOptionFn(val: string, update: Function) {
-  statusFilter.value = "";
  update(() => {
    option.value = dataInvestigate.statusOptions.filter(
      (e: any) => e.name.search(val) !== -1
@ -127,52 +117,51 @@ onMounted(async () => {
  getList();
 });
 </script>
+
 <template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการสืบสวนข้อเท็จจริง
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div class="col-xs-12 col-sm-4 col-md-3">
-        <q-select
-          v-model="statusFilter"
-          label="สถานะ"
-          dense
-          outlined
-          emit-value
-          map-options
-          hide-selected
-          fill-input
-          option-label="name"
-          option-value="id"
-          :options="option"
-          @update:model-value="getSerach()"
-          use-input
-          @filter="filterOptionFn"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-          <template v-if="statusFilter !== 'ALL'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                (option = dataInvestigate.statusOptions),
-                  (statusFilter = 'ALL'),
-                  getSerach()
-              "
-              class="cursor-pointer"
-            />
-          </template>
-        </q-select>
-      </div>
+      <q-select
+        v-model="statusFilter"
+        label="สถานะ"
+        dense
+        outlined
+        emit-value
+        map-options
+        hide-selected
+        fill-input
+        option-label="name"
+        option-value="id"
+        :options="option"
+        @update:model-value="getSerach()"
+        use-input
+        @filter="filterOptionFn"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+        <template v-if="statusFilter !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (option = dataInvestigate.statusOptions),
+                (statusFilter = 'ALL'),
+                getSerach()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
+
      <q-space />

      <q-input
        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
        standout
        dense
        v-model="filterKeyword"
@ -182,7 +171,7 @@ onMounted(async () => {
        @keydown.enter.prevent="getSerach()"
      >
        <template v-slot:append>
-          <q-icon  name="search" />
+          <q-icon name="search" />
        </template>
      </q-input>

@ -199,7 +188,6 @@ onMounted(async () => {
        :options="dataInvestigate.columns"
        option-value="name"
        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
      />
    </div>

--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@ -18,7 +18,7 @@ import type {
  ArrayPerson,
  ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
-import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/investigateFact";

 import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@ -75,7 +75,6 @@ const modal = ref<boolean>(false);
 const rows = ref<Director[]>([]);
 const modalPerson = ref<boolean>(false);
 /**  search data table*/
-const filter = ref<string>("");

 const total = ref<number>(0);
 const totalList = ref<number>(1);
@ -1527,9 +1526,7 @@ onMounted(async () => {
                      style="max-height: 80vh"
                      :rows="rows"
                      :columns="investigateDis.columnsDirector"
-                      :filter="filter"
                      :visible-columns="investigateDis.visibleColumnsDirector"
-                      v-model:inputfilter="filter"
                      v-model:inputvisible="
                        investigateDis.visibleColumnsDirector
                      "
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";

-import http from "@/plugins/http";
-import config from "@/app.config";
+import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import http from "@/plugins/http";
+import config from "@/app.config";

 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";

@ -19,10 +19,11 @@ const pagination = ref({
  rowsPerPage: 10,
 });

+const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
-const { showLoader, hideLoader } = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 const { fetchList } = dataInvestigateDis;

 const filter = ref<string>(""); //search data table
@ -33,17 +34,21 @@ async function fetchListDisciplinary() {
  await http
    .get(
      config.API.disciplineDisciplinary() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value.trim()}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${
+          pagination.value.rowsPerPage
+        }&keyword=${filter.value.trim()}&status=${status.value}`
    )
-    .then((res) => {
+    .then(async (res) => {
      const data = res.data.result.data;
      totalList.value = Math.ceil(
        res.data.result.total / pagination.value.rowsPerPage
      );
      total.value = res.data.result.total;
-      fetchList(data);
+      await fetchList(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
    })
-    .catch((err) => {})
    .finally(() => {
      hideLoader();
    });
@ -66,7 +71,7 @@ function openDetail(id: string) {

 function filterStatus(statusReturn: string) {
  status.value = statusReturn;
-  getSearch()
+  getSearch();
 }

 function getSearch() {
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@ -84,11 +84,6 @@ const emit = defineEmits([
  "update:pagination",
 ]);

-function paginationLabel(start: string, end: string, total: string) {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-}
-
 function updateInput(value: string | number | null) {
  emit("update:inputfilter", value);
 }
@ -138,41 +133,40 @@ function updatePagination(newPagination: any) {

 <template>
  <div class="q-pb-sm row q-col-gutter-sm">
-    <div class="col-xs-12 col-sm-4 col-md-4">
-      <q-select
-        v-model="statusFilter"
-        label="สถานะ"
-        dense
-        outlined
-        emit-value
-        hide-selected
-        fill-input
-        map-options
-        option-label="name"
-        option-value="id"
-        :options="option"
-        @update:model-value="dataUpdate"
-        use-input
-        @filter="filterOptionFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-        <template v-if="statusFilter !== 'ALL'" v-slot:append>
-          <q-icon
-            name="cancel"
-            @click.stop.prevent="
-              (option = dataInvestigateDis.statusOptions),
-                (statusFilter = 'ALL'),
-                dataUpdate()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
-    </div>
+    <q-select
+      v-model="statusFilter"
+      label="สถานะ"
+      dense
+      outlined
+      emit-value
+      hide-selected
+      fill-input
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="option"
+      @update:model-value="dataUpdate"
+      use-input
+      @filter="filterOptionFn"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+        </q-item>
+      </template>
+      <template v-if="statusFilter !== 'ALL'" v-slot:append>
+        <q-icon
+          name="cancel"
+          @click.stop.prevent="
+            (option = dataInvestigateDis.statusOptions),
+              (statusFilter = 'ALL'),
+              dataUpdate()
+          "
+          class="cursor-pointer"
+        />
+      </template>
+    </q-select>
+
    <q-space />
    <!-- ค้นหาข้อความใน table -->
    <q-input
@ -184,7 +178,6 @@ function updatePagination(newPagination: any) {
      outlined
      placeholder="ค้นหา"
      style="max-width: 200px"
-      class="col-xs-12 col-sm-3 col-md-2"
      @keydown.enter.prevent="filterFn"
    >
      <template v-slot:append>
@ -204,7 +197,6 @@ function updatePagination(newPagination: any) {
      option-value="name"
      map-options
      emit-value
-      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
      style="min-width: 140px"
    >
    </q-select>
--- a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
@ -26,7 +26,7 @@ const {
  messageError,
  dialogConfirm,
  hideLoader,
-  dialogMessageNotify,
+  onSearchDataTable,
 } = mixin;

 const commandType = ref<string>(""); //ตัวแปรเก็บคำสั่งที่เลือก
@ -34,10 +34,10 @@ const commandOp = ref<ListCommand[]>([]);
 const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด

 const modalCommand = ref<boolean>(false);
-const optionsType = ref<[]>([]);
 const idPath = ref<string>(route.params.id as string);
 const type = ref<string>("");
 const rows = ref<DataPerson[]>([]);
+const rowsMain = ref<DataPerson[]>([]);
 const selected = ref<ResponseData[]>([]);
 const dataMapToSend = computed(() => {
  return selected.value.map((i: any) => ({
@ -72,12 +72,6 @@ const props = defineProps({
  title: String,
 });

-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 //popup ยืนยันส่งัว
 function saveOrder() {
  dialogConfirm(
@ -136,13 +130,20 @@ function Reset() {
 */
 function filterSelector(val: string, update: Function) {
  update(() => {
-    commandType.value = val ? "" : commandType.value;
    commandOp.value = listCommand.value.filter(
      (v: any) => v.name.indexOf(val) > -1
    );
  });
 }

+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    props?.filterKeyword2 ? props?.filterKeyword2 : "",
+    rowsMain.value,
+    props.columns ? props.columns : []
+  );
+}
+
 /**
 * เมื่อ props.modal เป็น true
 * กำหนดให้  selected เป็นค่าว่างและกำหนด filter ประเภทตำแหน่งตามประเภทการสอบ
@ -157,6 +158,8 @@ watch(
        ? props.data.persons.filter((item: any) => item.status == "NEW")
        : [];

+      rowsMain.value = rows.value;
+
      const data = await storeCommand.getCommandTypes();
      listCommand.value = data.filter(
        (v: any) =>
@ -178,78 +181,65 @@ watch(
    <q-card style="width: 1200px; max-width: 80vw">
      <DialogHeader :tittle="props.title" :close="closeModal" />
      <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-between">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-select
-                v-model="commandType"
-                dense
-                outlined
-                label="ประเภทคำสั่ง"
-                :options="commandOp"
-                option-label="name"
-                option-value="code"
-                emit-value
-                map-options
-                hide-selected
-                fill-input
-                use-input
-                style="width: 350px; max-width: auto"
-                @update:model-value="selected = []"
-                @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn
-                    ) "
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template></q-select
-              >
-            </q-toolbar>
-          </div>
-
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-              <q-select
-                v-model="props.visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="props.columns"
-                option-value="name"
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
+      <q-card-section>
+        <div class="q-pb-sm row q-col-gutter-sm">
+          <q-select
+            v-model="commandType"
+            dense
+            outlined
+            label="ประเภทคำสั่ง"
+            :options="commandOp"
+            option-label="name"
+            option-value="code"
+            emit-value
+            map-options
+            hide-selected
+            fill-input
+            use-input
+            style="width: 350px; max-width: auto"
+            @update:model-value="selected = []"
+            @filter="(inputValue:any,
+              doneFn:Function) => filterSelector(inputValue, doneFn
+              ) "
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template></q-select
+          >
+          <q-space />
+          <q-input
+            borderless
+            outlined
+            dense
+            :model-value="filterKeyword2"
+            @update:model-value="updateInput"
+            placeholder="ค้นหา"
+            @keydown.enter.pervent="serchDataTable"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="props.visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="props.columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
        </div>

        <d-table
          :columns="props.columns"
          :rows="rows"
-          :filter="filterKeyword2?.trim()"
          row-key="id"
          :visible-columns="props.visibleColumns"
          selection="multiple"
@ -288,8 +278,9 @@ watch(
                <div v-else-if="col.name === 'salary'">
                  {{ props.row.salary.toLocaleString() }}
                </div>
+
                <div v-else>
-                  {{ col.value }}
+                  {{ col.value ?? "-" }}
                </div>
              </q-td>
            </q-tr>
--- a/src/modules/11_discipline/components/4_Result/EditPage.vue
+++ b/src/modules/11_discipline/components/4_Result/EditPage.vue
@ -9,13 +9,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";

-import type { DataListRow } from "@/modules/11_discipline/interface/request/Result";
+import type { DataListRow } from "@/modules/11_discipline/interface/request/result";
 import type {
  FormData as FormDataComplaint,
  ArrayPerson,
  ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
-import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/investigateFact";

 import DialogSendToCommand from "@/modules/11_discipline/components/4_Result/DialogSendToCommand.vue";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
--- a/src/modules/11_discipline/components/4_Result/Form.vue
+++ b/src/modules/11_discipline/components/4_Result/Form.vue
@ -13,7 +13,7 @@ import type {
  FormData,
  FormRef,
  DataOption,
-} from "@/modules/11_discipline/interface/request/Result";
+} from "@/modules/11_discipline/interface/request/result";

 import DialogHistory from "@/modules/11_discipline/components/4_Result/DialogHistory.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
@ -175,8 +175,8 @@ function uploadFile() {
  showLoader();
  http
    .put(config.API.upLoadFileResult(id.value), Data)
-    .then((res) => {
-      props.fetchData();
+    .then(async (res) => {
+      await props.fetchData();
      countNum.value = 2;
      success($q, "อัปโหลดไฟล์สำเร็จ");
    })
@ -202,14 +202,15 @@ function confirmDelete(docid: string) {
  showLoader();
  http
    .delete(config.API.deleteFileResult(id.value, docid))
-    .then((res) => {
+    .then(async (res) => {
+      await props.fetchData();
      success($q, `ลบไฟล์สำเร็จ`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
-      props.fetchData();
+      hideLoader();
    });
 }

--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@ -113,41 +113,39 @@ function updatePagination(newPagination: any) {
 <template>
  <div class="q-pb-sm row q-col-gutter-sm">
    <div class="q-gutter-sm" v-if="nornmalData == true"></div>
-    <div class="col-xs-12 col-sm-4 col-md-4">
-      <q-select
-        v-model="statusFilter"
-        label="สถานะ"
-        dense
-        outlined
-        emit-value
-        map-options
-        hide-selected
-        fill-input
-        option-label="name"
-        option-value="id"
-        :options="option"
-        @update:model-value="dataUpdate"
-        use-input
-        @filter="filterOptionFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-        <template v-if="statusFilter !== 'ALL'" v-slot:append>
-          <q-icon
-            name="cancel"
-            @click.stop.prevent="
-              (option = store.statusOptions),
-                (statusFilter = 'ALL'),
-                dataUpdate()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
-    </div>
+
+    <q-select
+      v-model="statusFilter"
+      label="สถานะ"
+      dense
+      outlined
+      emit-value
+      map-options
+      hide-selected
+      fill-input
+      option-label="name"
+      option-value="id"
+      :options="option"
+      @update:model-value="dataUpdate"
+      use-input
+      @filter="filterOptionFn"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+        </q-item>
+      </template>
+      <template v-if="statusFilter !== 'ALL'" v-slot:append>
+        <q-icon
+          name="cancel"
+          @click.stop.prevent="
+            (option = store.statusOptions), (statusFilter = 'ALL'), dataUpdate()
+          "
+          class="cursor-pointer"
+        />
+      </template>
+    </q-select>
+
    <q-space />
    <q-input
      standout
@ -159,7 +157,6 @@ function updatePagination(newPagination: any) {
      outlined
      placeholder="ค้นหา"
      style="max-width: 200px"
-      class="col-xs-12 col-sm-3 col-md-2"
    >
      <template v-slot:append>
        <q-icon name="search" />
@ -177,7 +174,6 @@ function updatePagination(newPagination: any) {
      option-value="name"
      map-options
      emit-value
-      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
      style="min-width: 140px"
    >
    </q-select>
--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@ -2,8 +2,6 @@
 import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";

-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";

@ -18,12 +16,13 @@ import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCom
 const $q = useQuasar();
 const storeCommand = useCommandMainStore();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm, onSearchDataTable } = mixin;

 const modal = defineModel<boolean>("modal", { required: true });
 const modalCommand = ref<boolean>(false); // ตัวแปร popup สร้างคำสั่ง

 const rows = ref<dataType[]>([]);
+const rowsMain = ref<dataType[]>([]);
 const selected = ref<dataType[]>([]);
 const dataMapToSend = computed(() => {
  return selected.value.map((i: any) => ({
@ -128,7 +127,6 @@ function closeModal() {
 */
 function filterSelector(val: string, update: Function) {
  update(() => {
-    commandType.value = val ? "" : commandType.value;
    commandOp.value = listCommand.value.filter(
      (v: any) => v.name.indexOf(val) > -1
    );
@ -148,6 +146,14 @@ function saveOrder() {
  );
 }

+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
 * เมื่อ props.modal เป็น true
 * กำหนดให้  selected เป็นค่าว่างและกำหนด filter ประเภทตำแหน่งตามประเภทการสอบ
@ -157,6 +163,7 @@ watch(
  async () => {
    if (modal.value === true) {
      rows.value = props.rows ? props.rows : [];
+      rowsMain.value = props.rows ? props.rows : [];
      selected.value = [];
      const data = await storeCommand.getCommandTypes();
      listCommand.value = data.filter(
@ -189,7 +196,7 @@ watch(
            use-input
            style="width: 350px; max-width: auto"
            @update:model-value="selected = []"
-            @filter="(inputValue:any,
+            @filter="(inputValue:string,
                    doneFn:Function) => filterSelector(inputValue, doneFn
                    ) "
          >
@ -205,10 +212,10 @@ watch(
            borderless
            outlined
            dense
-            debounce="300"
            v-model="filterKeyword"
            placeholder="ค้นหา"
            style="width: 200px; max-width: auto"
+            @keydown.enter.pervent="serchDataTable"
          >
            <template v-slot:append>
              <q-icon name="search" />
@ -234,7 +241,6 @@ watch(
        <d-table
          :columns="columns"
          :rows="rows"
-          :filter="filterKeyword.trim()"
          row-key="id"
          :visible-columns="visibleColumns"
          selection="multiple"
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@ -175,13 +175,13 @@ async function getList() {
      );
      total.value = res.data.result.total;
      await dataStore.getData(data);
-      hideLoader();
    })
    .catch((e) => {
      messageError($q, e);
-      hideLoader();
    })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }

 function filterFn() {
@ -221,23 +221,24 @@ onMounted(async () => {
    <q-separator />
    <div class="row q-pa-md">
      <div class="col-12">
-        <div class="row col-12">
-          <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            @click="openModalOrder"
-            flat
-            round
-            dense
-            color="primary"
-            icon="mdi-account-arrow-right"
-          >
-            <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-          </q-btn>
+        <div class="row col-12 q-col-gutter-sm">
+          <div>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              @click="openModalOrder"
+              flat
+              round
+              dense
+              color="primary"
+              icon="mdi-account-arrow-right"
+            >
+              <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+            </q-btn>
+          </div>
          <q-space />

          <q-input
            for="#search"
-            class="col-xs-12 col-sm-3 col-md-2"
            standout
            dense
            v-model="filterKeyword"
@ -263,7 +264,6 @@ onMounted(async () => {
            :options="columns"
            option-value="name"
            style="min-width: 140px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
          />
        </div>

--- a/src/modules/11_discipline/components/DialogDirector.vue
+++ b/src/modules/11_discipline/components/DialogDirector.vue
@ -171,78 +171,104 @@ watch(
      <DialogHeader tittle="เลือกรายชื่อกรรมการ" :close="clickClose" />
      <q-separator />
      <q-card-section>
-        <q-input
-          borderless
-          outlined
-          dense
-          v-model="filterKeyword2"
-          @keydown.enter.prevent="updateInput"
-          placeholder="ค้นหารายชื่อ"
-          style="max-width: 100%"
-        >
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
+        <div class="row q-col-gutter-sm">
+          <div class="row col-12">
+            <q-space />
+            <div class="row q-col-gutter-sm">
+              <q-input
+                borderless
+                outlined
+                dense
+                v-model="filterKeyword2"
+                @keydown.enter.prevent="updateInput"
+                placeholder="ค้นหารายชื่อ"
+                style="max-width: 100%"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>

-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          row-key="id"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePagination"
-        >
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total }} รายการ
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(totalList)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="props.getList?.()"
-            ></q-pagination>
-          </template>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <d-table
+              :columns="columns2"
+              :rows="rows2"
+              row-key="id"
+              :visible-columns="visibleColumns2"
+              selection="multiple"
+              v-model:selected="selected"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePagination"
+            >
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ total }} รายการ
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(totalList)"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  :max-pages="5"
+                  @update:model-value="props.getList?.()"
+                ></q-pagination>
+              </template>

-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
+              <template v-slot:header-selection="scope">
                <q-checkbox
                  keep-color
                  color="primary"
                  dense
-                  v-model="props.selected"
+                  v-model="scope.selected"
                />
-              </q-td>
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name == 'no'">
-                  {{
-                    (pagination.page - 1) * pagination.rowsPerPage +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div v-else>
-                  {{ col.value }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{
+                        (pagination.page - 1) * pagination.rowsPerPage +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
      </q-card-section>

      <q-separator />
--- a/src/modules/11_discipline/components/PopupSendToNext.vue
+++ b/src/modules/11_discipline/components/PopupSendToNext.vue
@ -6,12 +6,11 @@ import { useCounterMixin } from "@/stores/mixin";

 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
-import { title } from "process";

 const modal = defineModel<boolean>("modal", { required: true });
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { dialogConfirm, dialogMessageNotify } = mixin;
+const { dialogConfirm, dialogMessageNotify, onSearchDataTable } = mixin;

 const dataMapToSend = computed(() => {
  return selected.value.map((i: any) => ({
@ -24,6 +23,7 @@ const dataMapToSend = computed(() => {
  }));
 });

+const rowsMain = ref<any[]>([]);
 const rows = ref<any[]>([]);
 const props = defineProps({
  title: {
@ -114,11 +114,21 @@ function onClickClose() {
  selected.value = [];
 }

+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    props.columns ? props.columns : []
+  );
+}
+
 watch(
  () => modal.value,
  () => {
    if (modal.value) {
      inspectionResults.value = modal ? "" : "";
+      rows.value = props.rows;
+      rowsMain.value = props.rows;
      selected.value = [];
    }
  }
@ -126,7 +136,7 @@ watch(
 </script>
 <template>
  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 820px; max-width: 80vw">
+    <q-card style="min-width: 70%">
      <DialogHeader :tittle="props.title" :close="onClickClose" />
      <q-separator />
      <q-card-section class="q-pt-none q-mt-md">
@ -140,10 +150,10 @@ watch(
              dense
              v-model="filter"
              outlined
-              debounce="300"
              placeholder="ค้นหา"
              style="max-width: 200px"
              class="q-ml-sm"
+              @keydown.enter.pervent="serchDataTable"
            >
              <template v-slot:append>
                <q-icon name="search" />
@ -170,8 +180,7 @@ watch(
        <d-table
          ref="table"
          :columns="props.columns"
-          :rows="props.rows"
-          :filter="filter.trim()"
+          :rows="rows"
          row-key="personId"
          flat
          bordered
@ -205,9 +214,7 @@ watch(
                <div v-if="col.name == 'no'">
                  {{ props.rowIndex + 1 }}
                </div>
-                <div v-else-if="col.name === 'salary'">
-                  {{ props.row.salary.toLocaleString() }}
-                </div>
+
                <div v-else>
                  {{ col.value }}
                </div>
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@ -9,7 +9,7 @@ import type {
  DataList,
  DataListRow,
  ocListType,
-} from "@/modules/11_discipline/interface/response/Complaint";
+} from "@/modules/11_discipline/interface/response/complaint";

 import type { QTableProps } from "quasar";

@ -25,7 +25,7 @@ export const useComplainstDataStore = defineStore(
    const visibleColumns = ref<string[]>([]);
    const columns = ref<QTableProps["columns"]>([]);

-    function fetchComplainst(data: DataList[]) {
+    async function fetchComplainst(data: DataList[]) {
      let dataList: DataListRow[] = data.map((e: DataList) => ({
        id: e.id,
        personId: e.personId,
--- a/src/modules/11_discipline/store/Main.ts
+++ b/src/modules/11_discipline/store/Main.ts
@ -97,6 +97,9 @@ export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
      field: "salary",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
+      format(val, row) {
+        return val.toLocaleString();
+      },
    },
    {
      name: "organization",
@ -185,6 +188,13 @@ export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
      field: "positionLevel",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
+      format(val, row) {
+        return row.positionLevel
+          ? row.positionLevel
+          : row.posLevelName
+          ? row.posLevelName
+          : "-";
+      },
    },
    {
      name: "salary",
@ -192,6 +202,9 @@ export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
      label: "เงินเดือน",
      sortable: true,
      field: "salary",
+      format(val, row) {
+        return val.toLocaleString();
+      },
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
+++ b/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"
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
+++ b/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:filterKeyword2="filter"
+    v-model:filterKeyword="filter"
+    v-model:rows="listMeet"
+    v-model:rowsData="listMeetData"
    :rowsPerPage="rowsPerPage"
    :page="page"
    :maxPage="maxPage"
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue
+++ b/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"
-          :filter="filterKeyword2?.trim()"
+          :rows="rows"
          row-key="id"
          :visible-columns="visibleColumns2"
          selection="multiple"
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue
+++ b/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"
-          @update:model-value="updateInput"
+          :model-value="filterKeyword"
          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"
-          :filter="filterKeyword2?.trim()"
+          :rows="rows"
          row-key="id"
          selection="multiple"
          v-model:selected="selected"
--- a/src/modules/13_salary/components/04_salaryLists/Dashboard.vue
+++ b/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">
--- a/src/modules/13_salary/components/05_salaryListsEmployee/Dashboard.vue
+++ b/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>
--- a/src/modules/13_salary/components/InfoDiscipline.vue
+++ b/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
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="keyword = ''"
-          />
+          <q-icon name="search" />
        </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"
--- a/src/modules/13_salary/components/InfoLeave.vue
+++ b/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
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="keyword = ''"
-          />
+          <q-icon name="search" />
        </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"
--- a/src/modules/13_salary/components/InfoSalary.vue
+++ b/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
-            v-else
-            name="clear"
-            class="cursor-pointer"
-            @click="keyword = ''"
-          />
+          <q-icon name="search" />
        </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"
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
@ -20,11 +20,13 @@ const {
  findPosMasterNoOld,
  findOrgNameOld,
  date2Thai,
+  onSearchDataTable,
 } = mixin;

 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);

 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@ -210,6 +212,7 @@ function getData() {
    .then((res) => {
      const data = res.data.result;
      rows.value = data;
+      rowsMain.value = data;
    })
    .catch((e) => {
      messageError($q, e);
@ -218,12 +221,24 @@ function getData() {
      hideLoader();
    });
 }
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watch(
  () => modal.value,
  (n) => {
    if (n == true) {
      getData();
-    } else rows.value = [];
+    } else {
+      rows.value = [];
+      rowsMain.value = [];
+    }
  }
 );
 </script>
@ -233,13 +248,43 @@ watch(
      <DialogHeader tittle="ข้อมูลการช่วยราชการ" :close="close" />
      <q-separator />
      <q-card-section>
-        <div class="row">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12 row">
+            <q-space />
+            <div class="row q-col-gutter-sm">
+              <q-input
+                dense
+                outlined
+                v-model="filterKeyword"
+                label="ค้นหา"
+                @keydown.enter.pervent="serchDataTable"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
+          </div>
+
          <div class="col-12">
            <d-table
              ref="table"
              :columns="columns"
              :rows="rows"
-              :filter="filterKeyword"
              row-key="id"
              flat
              bordered
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@ -112,7 +112,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);

 const kpiUserPlannedId = ref<string>("");
-const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const modalEvaluate = ref<boolean>(false);
@ -257,7 +256,6 @@ watch(
        ref="table"
        :columns="columns"
        :rows="rows"
-        :filter="filterKeyword"
        row-key="id"
        flat
        bordered
--- a/src/modules/14_KPI/views/mainDetail.vue
+++ b/src/modules/14_KPI/views/mainDetail.vue
@ -20,7 +20,14 @@ interface ListMain {
 const profileId = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { messageError, findOrgName, showLoader, hideLoader, date2Thai } = mixin;
+const {
+  messageError,
+  findOrgName,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  onSearchDataTable,
+} = mixin;

 const mode = ref<any>($q.screen.gt.xs);
 const profileImg = ref<string>("");
@ -41,6 +48,7 @@ const sizeImg = ref<string>("");

 /** Table */
 const rows = ref<ListMain[]>([]);
+const rowsMain = ref<ListMain[]>([]);
 const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
  {
@ -150,6 +158,7 @@ async function getList(id: string) {
    .then(async (res) => {
      const data = await res.data.result;
      rows.value = data;
+      rowsMain.value = data;
    })
    .catch((e) => {
      messageError($q, e);
@ -208,6 +217,14 @@ function onDetail(id: string) {
  router.push(`/probation/detail/${profileId.value}/${id}`);
 }

+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
  await getMain();
 });
@ -225,6 +242,11 @@ onMounted(async () => {
      @click="router.go(-1)"
    />
    รายละเอียดงานที่ได้รับมอบหมาย
+    {{
+      formData.firstName
+        ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+        : ""
+    }}
  </div>
  <div class="row q-col-gutter-md">
    <div v-if="$q.screen.gt.xs" class="col-12">
@ -236,6 +258,7 @@ onMounted(async () => {
              : "-"
          }}</span>
        </div>
+        <q-separator />
        <q-resize-observer @resize="onResize" />
        <q-card-section class="q-pa-md">
          <div class="row">
@ -324,31 +347,21 @@ onMounted(async () => {
        </q-list>
      </q-card>
    </div>
+
    <div class="col-12 row">
      <q-card bordered class="col-12 q-pa-md">
        <div class="row">
          <q-space />
          <q-input
-            class="inputgreen"
            outlined
            dense
            v-model="filter"
            label="ค้นหา"
            :style="mode ? `max-width: 200px` : `max-width: 150px`"
+            @keydown.enter.pervent="serchDataTable"
          >
            <template v-slot:append>
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
-              <q-icon
-                v-else
-                name="search"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
+              <q-icon name="search" />
            </template>
          </q-input>
          <q-select
@ -359,7 +372,6 @@ onMounted(async () => {
            outlined
            emit-value
            map-options
-            
            options-dense
            option-value="name"
            style="min-width: 140px"
@ -378,7 +390,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"
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@ -9,7 +9,7 @@ import type { QTableProps } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";

 const $q = useQuasar();
-const { date2Thai } = useCounterMixin();
+const { date2Thai, onSearchDataTable } = useCounterMixin();

 //prosp
 const isProfile = defineModel<boolean>("isProfile", { required: true });
@ -18,6 +18,8 @@ const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
 //ข้อมุล Table
 const keyword = ref<string>("");
 const rows = ref<ResRecord[]>([]);
+const rowsMain = ref<ResRecord[]>([]);
+
 // baseColumns
 const baseColumns = ref<QTableProps["columns"]>([
  {
@ -67,6 +69,11 @@ const baseColumns = ref<QTableProps["columns"]>([
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
+    format(val, row) {
+      return row.firstName
+        ? `${row.prefix}${row.firstName} ${row.lastName}`
+        : "-";
+    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
@ -239,6 +246,15 @@ function fetchDataProject() {
  rows.value = listPerson.value.filter(
    (e: ResRecord) => e.isProfile === isProfile.value
  );
+  rowsMain.value = rows.value;
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
 }

 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
@ -250,7 +266,14 @@ onMounted(() => {
 <template>
  <q-toolbar style="padding: 0px" class="q-mb-xs">
    <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.pervent="serchDataTable"
+    >
      <template v-slot:append>
        <q-icon name="search" />
      </template>
@ -281,7 +304,6 @@ onMounted(() => {
      :columns="columns"
      :rows="rows"
      :paging="true"
-      :filter="keyword"
      v-model:pagination="pagination"
      :rows-per-page-options="[20, 50, 100]"
      :visible-columns="visibleColumns"
@ -318,13 +340,6 @@ onMounted(() => {
              </q-icon>
            </div>

-            <div v-else-if="col.name == 'fullName'">
-              {{
-                props.row.firstName
-                  ? `${props.row.prefix}${props.row.firstName}${props.row.lastName}`
-                  : "-"
-              }}
-            </div>
            <div v-else-if="col.name === 'org'" class="table_ellipsis">
              {{ col.value ? col.value : "-" }}
            </div>
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@ -587,7 +587,7 @@ onMounted(() => {
                    node-key="orgTreeName"
                    label-key="labelName"
                    v-model:expanded="expandedDialog"
-                    :filter="filter"
+                    :filter="filter.trim()"
                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
                    no-nodes-label="ไม่มีข้อมูล"
                  >
--- a/src/modules/16_positionEmployee/components/DialogMovePos.vue
+++ b/src/modules/16_positionEmployee/components/DialogMovePos.vue
@ -322,7 +322,7 @@ watch(
                :nodes="nodeTree"
                node-key="orgTreeId"
                label-key="labelName"
-                :filter="filterTree"
+                :filter="filterTree.trim()"
                no-results-label="ไม่พบข้อมูลที่ค้นหา"
                no-nodes-label="ไม่มีข้อมูล"
              >
--- a/src/modules/16_positionEmployee/components/DialogSuccession.vue
+++ b/src/modules/16_positionEmployee/components/DialogSuccession.vue
@ -282,7 +282,7 @@ function clearForm() {
              :nodes="nodeTree"
              node-key="orgTreeId"
              label-key="labelName"
-              :filter="filterTree"
+              :filter="filterTree.trim()"
              no-results-label="ไม่พบข้อมูลที่ค้นหา"
              no-nodes-label="ไม่มีข้อมูล"
            >