From 299a5e0a865bbbd0d8bd49a4fbd80e9d1cca9779 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 26 Mar 2024 14:23:39 +0700
Subject: [PATCH 1/5] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=8A=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B9=82?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B9=84=E0=B8=9F=E0=B8=A5=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registryNew/views/detailView.vue        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 0e6316417..39cf1c172 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -11,6 +11,7 @@ import type { DataPerson } from "@/modules/04_registryNew/interface/response/Mai
 import avatar from "@/assets/avatar_user.jpg";
 import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
 import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
+import { ResponseObject } from "../interface/response/Profile";
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const router = useRouter();
@@ -26,7 +27,7 @@ const {
 } = mixin;
 
 const profileId = ref<string>(route.params.id.toString());
-const formDetail = ref<any>();
+const formDetail = ref<ResponseObject>();
 const itemsMenu = ref<DataOption[]>([
   {
     id: "1",
@@ -217,7 +218,10 @@ onMounted(async () => {
           <div class="col-sm-3 col-md-2"></div>
           <div class="col">
             <div class="col-12 text-primary">
-              <h2 class="title q-ma-none q-pa-none">
+              <h2
+                class="title q-ma-none q-pa-none"
+                v-if="formDetail && formDetail.firstName && formDetail.lastName"
+              >
                 {{
                   `${formDetail?.prefix}${formDetail?.firstName}  ${formDetail?.lastName}`
                 }}
@@ -249,19 +253,23 @@ onMounted(async () => {
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
               <div class="col text-grey-6">ตำแหน่งในสายงาน</div>
-              <div class="col">{{ formDetail?.position }}</div>
+              <div class="col">{{ formDetail?.position || "-" }}</div>
             </div>
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
               <div class="col text-grey-6">ประเภทตำแหน่ง</div>
-              <div class="col">{{ formDetail?.posType.posTypeName }}</div>
+              <div class="col">
+                {{ formDetail?.posType?.posTypeName || "-" }}
+              </div>
             </div>
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
               <div class="col text-grey-6">ระดับตำแหน่ง</div>
-              <div class="col">{{ formDetail?.posLevel.posLevelName }}</div>
+              <div class="col">
+                {{ formDetail?.posLevel?.posLevelName || "-" }}
+              </div>
             </div>
           </div>
         </div>

From 64bb5a27496bfb387a2bbd2554b645c127327835 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 26 Mar 2024 14:37:05 +0700
Subject: [PATCH 2/5] =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_organizationalNew/components/TreeMain.vue      |  2 --
 .../02_organizationalNew/components/TreeTable.vue     | 10 ++++++++--
 .../02_organizationalNew/components/TreeView.vue      | 11 ++++-------
 .../16_positionEmployee/components/TreeView.vue       |  4 ++--
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/TreeMain.vue b/src/modules/02_organizationalNew/components/TreeMain.vue
index a3fb420e8..6e45a3e90 100644
--- a/src/modules/02_organizationalNew/components/TreeMain.vue
+++ b/src/modules/02_organizationalNew/components/TreeMain.vue
@@ -285,8 +285,6 @@ function onClickDetail(id: string, level: number) {
  * @param node ข้อมูล โครงสร้าง
  */
 async function onClickEdit(node: OrgTree) {
-  console.log(node);
-
   dialogAgency.value = !dialogAgency.value;
   actionType.value = "EDIT";
   orgLevel.value = node.orgLevel;
diff --git a/src/modules/02_organizationalNew/components/TreeTable.vue b/src/modules/02_organizationalNew/components/TreeTable.vue
index 37946bc5c..f920550f6 100644
--- a/src/modules/02_organizationalNew/components/TreeTable.vue
+++ b/src/modules/02_organizationalNew/components/TreeTable.vue
@@ -433,6 +433,11 @@ async function onClickDownloadReport(val: string, name: string) {
       messageError($q, err);
     });
 }
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 
 <template>
@@ -537,14 +542,14 @@ async function onClickDownloadReport(val: string, name: string) {
       ref="table"
       :columns="columns"
       :rows="posMaster"
+      :paging="true"
       row-key="id"
       flat
       bordered
-      :paging="true"
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
       @update:pagination="updatePagination"
-      class="tableTb"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -773,6 +778,7 @@ async function onClickDownloadReport(val: string, name: string) {
           active-color="primary"
           color="dark"
           :max="totalPage"
+          :max-pages="5"
           size="sm"
           boundary-links
           direction-links
diff --git a/src/modules/02_organizationalNew/components/TreeView.vue b/src/modules/02_organizationalNew/components/TreeView.vue
index 5e3cf67bc..e0ac771d3 100644
--- a/src/modules/02_organizationalNew/components/TreeView.vue
+++ b/src/modules/02_organizationalNew/components/TreeView.vue
@@ -84,7 +84,6 @@ async function fetchDataTree(id: string) {
  */
 async function fetchDataTable(id: string, level: number, action: boolean) {
   searchAndReplaceOrgName(nodeTree.value, id);
-
   orgLevel.value = level;
   reqMaster.id = id;
   reqMaster.type = level;
@@ -103,14 +102,12 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
         : store.typeOrganizational == "current"
         ? store.activeId
         : store.historyId;
-  }
-
-  if (action === true) {
     isLoad.value = true;
   }
+
   await http
     .post(config.API.orgPosMasterList, reqMaster)
-    .then((res) => {
+    .then(async (res) => {
       posMaster.value = [];
       const dataMain: PosMaster[] = [];
       totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
@@ -123,7 +120,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
           dataMain.push(test);
         }
       });
-      posMaster.value = store.fetchPosMaster(dataMain);
+      posMaster.value = await store.fetchPosMaster(dataMain);
     })
     .catch((err) => {
       messageError($q, err);
@@ -132,7 +129,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
     .finally(() => {
       setTimeout(() => {
         isLoad.value = false;
-      }, 500);
+      }, 1000);
     });
 }
 
diff --git a/src/modules/16_positionEmployee/components/TreeView.vue b/src/modules/16_positionEmployee/components/TreeView.vue
index 52bea0652..659a8ab49 100644
--- a/src/modules/16_positionEmployee/components/TreeView.vue
+++ b/src/modules/16_positionEmployee/components/TreeView.vue
@@ -101,7 +101,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
   }
   await http
     .post(config.API.orgPosMasterListEmp, reqMaster)
-    .then((res) => {
+    .then(async (res) => {
       posMaster.value = [];
       const dataMain: PosMaster[] = [];
       totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
@@ -114,7 +114,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
           dataMain.push(test);
         }
       });
-      posMaster.value = store.fetchPosMaster(dataMain);
+      posMaster.value = await store.fetchPosMaster(dataMain);
     })
     .catch((err) => {
       messageError($q, err);

From 95935c2cbaba9633b1d6dd8b2e0d4c0779386cbc Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 26 Mar 2024 15:32:13 +0700
Subject: [PATCH 3/5] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20tab?=
 =?UTF-8?q?=20=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B9=80=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=93=E0=B9=83=E0=B8=99=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SalaryEmployeeLists/TabMain.vue           | 48 +++++++++++------
 .../components/SalaryLists/TabMain.vue        | 52 +++++++++++--------
 2 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index 1eba9574e..e67c304a0 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -60,11 +60,11 @@ const itemsTabType = computed(() => {
           name: "tab1",
           type: "PENDING",
         },
-        {
-          lable: "รายชื่อผู้เกษียณอายุราชการ",
-          name: "tab5",
-          type: "RETIRE",
-        },
+        // {
+        //   lable: "รายชื่อผู้เกษียณอายุราชการ",
+        //   name: "tab5",
+        //   type: "RETIRE",
+        // },
         {
           lable: "1 ขั้น",
           name: "tab2",
@@ -251,12 +251,12 @@ function fetchDataQuota(id: string) {
  */
 function fetchDataPeriod(id: string) {
   rows.value = [];
-  const formData = {
+  let formData = {
     page: formFilter.page.toString(),
     pageSize: formFilter.pageSize.toString(),
     keyword: formFilter.keyword,
-    type: store.tabType === "RETIRE" ? "" : store.tabType,
-    isRetire: store.tabType === "RETIRE" ? "1" : null,
+    type: store.tabType,
+    isRetire: isRetire.value === true ? "1" : "0",
   };
 
   http
@@ -354,6 +354,12 @@ onMounted(() => {
   fetchDataPeriod(store.groupId);
   splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
 });
+
+const isRetire = ref<boolean | string>(false);
+const updateIsShowRetire = async () => {
+  isRetire.value = await !isRetire.value;
+  fetchDataPeriodNew();
+};
 </script>
 
 <template>
@@ -455,7 +461,19 @@ onMounted(() => {
 
       <!-- Tab ขั้น -->
       <q-card flat bordered>
-        <q-splitter v-model="splitterModel" disable>
+        <div class="row col-12 q-pa-sm">
+          <q-toggle
+            dense
+            :model-value="isRetire"
+            color="primary"
+            @update:model-value="updateIsShowRetire"
+            class="q-pr-md"
+          >
+            เฉพาะผู้เกษียณอายุราชการ
+          </q-toggle>
+        </div>
+
+        <q-splitter v-model="splitterModel" disable class="border-top">
           <template v-slot:before>
             <q-tabs
               v-model="store.tabType"
@@ -471,13 +489,7 @@ onMounted(() => {
                 v-for="(item, index) in itemsTabType"
                 :key="index"
                 class="row"
-                :style="
-                  store.roundMainCode === 'OCT'
-                    ? index === 1
-                      ? 'border-bottom: 1px solid #c8d3db;'
-                      : ''
-                    : ''
-                "
+                :style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
               >
                 <q-tab
                   class="col-12"
@@ -536,8 +548,10 @@ onMounted(() => {
   width: 100%;
   max-width: 200px;
 }
-
 .q-tabs--vertical .q-tab {
   padding: 0 20px;
 }
+.border-top {
+  border-top: 1px solid #ededed;
+}
 </style>
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index 4f2d8d190..bd07f336e 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -65,11 +65,11 @@ const itemsTabType = computed(() => {
           name: "tab1",
           type: "PENDING",
         },
-        {
-          lable: "รายชื่อผู้เกษียณอายุราชการ",
-          name: "tab5",
-          type: "RETIRE",
-        },
+        // {
+        //   lable: "รายชื่อผู้เกษียณอายุราชการ",
+        //   name: "tab5",
+        //   type: "RETIRE",
+        // },
         {
           lable: "1 ขั้น",
           name: "tab2",
@@ -261,12 +261,12 @@ function fetchDataQuota(id: string) {
  */
 function fetchDataPeriod(id: string) {
   rows.value = [];
-  const formData = {
+  let formData = {
     page: formFilter.page.toString(),
     pageSize: formFilter.pageSize.toString(),
     keyword: formFilter.keyword,
-    type: store.tabType === "RETIRE" ? "" : store.tabType,
-    isRetire: store.tabType === "RETIRE" ? "1" : null,
+    type: store.tabType,
+    isRetire: isRetire.value === true ? "1" : "0",
   };
 
   http
@@ -336,10 +336,6 @@ function onClickDownload(data: DataOption) {
       });
   } else {
     if (props.rootId && props.periodId) {
-      console.log("id==>", data.id);
-      console.log("rootId==>", props.rootId);
-      console.log("periodId==>", props.periodId);
-
       http
         .get(
           config.API.salaryReportListsByid(
@@ -368,6 +364,12 @@ onMounted(() => {
   fetchDataPeriod(store.groupId);
   splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
 });
+
+const isRetire = ref<boolean>(false);
+const updateIsShowRetire = async () => {
+  isRetire.value = await !isRetire.value;
+  fetchDataPeriodNew();
+};
 </script>
 
 <template>
@@ -538,7 +540,19 @@ onMounted(() => {
 
       <!-- Tab ขั้น -->
       <q-card flat bordered>
-        <q-splitter v-model="splitterModel" disable>
+        <div class="row col-12 q-pa-sm">
+          <q-toggle
+            dense
+            :model-value="isRetire"
+            color="primary"
+            @update:model-value="updateIsShowRetire"
+            class="q-pr-md"
+          >
+            เฉพาะผู้เกษียณอายุราชการ
+          </q-toggle>
+        </div>
+
+        <q-splitter v-model="splitterModel" disable class="border-top">
           <template v-slot:before>
             <q-tabs
               v-model="store.tabType"
@@ -554,13 +568,7 @@ onMounted(() => {
                 v-for="(item, index) in itemsTabType"
                 :key="index"
                 class="row"
-                :style="
-                  store.roundMainCode === 'OCT'
-                    ? index === 1
-                      ? 'border-bottom: 1px solid #c8d3db;'
-                      : ''
-                    : ''
-                "
+                :style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
               >
                 <q-tab
                   class="col-12"
@@ -619,11 +627,13 @@ onMounted(() => {
   width: 100%;
   max-width: 200px;
 }
-
 .q-tabs--vertical .q-tab {
   padding: 0 20px;
 }
 .tootip-txt-normal {
   font-size: 0.8rem;
 }
+.border-top {
+  border-top: 1px solid #ededed;
+}
 </style>

From 5dacf1c73ab67ad72868d1e17aecb1361438d24f Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 26 Mar 2024 15:44:24 +0700
Subject: [PATCH 4/5] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=9C=E0=B8=B9=E0=B9=80?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A9=E0=B8=B5=E0=B8=A2=E0=B8=93=E0=B9=80=E0=B8=89?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B2=E0=B8=B0=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B8=95=E0=B8=B8=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../13_salary/components/SalaryEmployeeLists/TabMain.vue        | 2 +-
 src/modules/13_salary/components/SalaryLists/TabMain.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index e67c304a0..d9579cbc0 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -461,7 +461,7 @@ const updateIsShowRetire = async () => {
 
       <!-- Tab ขั้น -->
       <q-card flat bordered>
-        <div class="row col-12 q-pa-sm">
+        <div v-if="store.roundMainCode === 'OCT'" class="row col-12 q-pa-sm">
           <q-toggle
             dense
             :model-value="isRetire"
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index bd07f336e..0f9288ac4 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -540,7 +540,7 @@ const updateIsShowRetire = async () => {
 
       <!-- Tab ขั้น -->
       <q-card flat bordered>
-        <div class="row col-12 q-pa-sm">
+        <div v-if="store.roundMainCode === 'OCT'" class="row col-12 q-pa-sm">
           <q-toggle
             dense
             :model-value="isRetire"

From cfcb66a874ac7d78d0957698485abd55fc8cbbc0 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 26 Mar 2024 16:21:55 +0700
Subject: [PATCH 5/5] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20q-select=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1API=E0=B8=81=E0=B8=B1=E0=B8=9Afilter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GovernmentInformation/02_Discipline.vue   |  1 +
 .../PersonalInformation/05_Education.vue      | 67 ++++++++++++++++---
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
index 52eea8817..974e81f78 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
@@ -673,6 +673,7 @@ onMounted(async () => {
                 :options="Ops.levelOptions"
                 option-value="id"
                 use-input
+                clearable
                 input-debounce="0"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index 06d4d0512..63f7f0120 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -210,6 +210,13 @@ const educationOption = ref([
   { label: "ไม่ใช่", value: false },
 ]);
 
+const educationOptionFilter = ref([
+  { label: "ใช่", value: true },
+  { label: "ไม่ใช่", value: false },
+]);
+
+let educationLevelOption: any = [];
+
 const historyDialog = ref<boolean>(false);
 const educationData = reactive<RequestItemsObject>({
   isDate: isDate.value === "false" ? false : true,
@@ -291,6 +298,20 @@ async function onSubmit() {
   );
 }
 
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "options":
+      update(() => {
+        educationOption.value = educationOptionFilter.value.filter(
+          (v: any) => v.label.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
 function clearForm() {
   isDate.value = "false";
   educationData.educationLevel = "";
@@ -350,7 +371,23 @@ async function fetchData(id: string) {
     .get(config.API.profileNewEducationByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
-      console.log(rows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchEducationLevel() {
+  showLoader();
+  await http
+    .get(config.API.orgEducationLevel)
+    .then(async (res) => {
+      res.data.result.map((r: any) => {
+        educationLevelOption.push(r.name);
+      });
     })
     .catch((err) => {
       messageError($q, err);
@@ -433,6 +470,7 @@ function deleteData(idData: string) {
 
 onMounted(async () => {
   await fetchData(id.value);
+  fetchEducationLevel();
 });
 </script>
 
@@ -619,7 +657,6 @@ onMounted(async () => {
           </q-card-actions>
           <q-separator />
           <div class="row">
-            {{ console.log(props) }}
             <div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div>
             <div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div>
             <div class="col-2 q-pa-sm label-color">สถานศึกษา</div>
@@ -714,14 +751,22 @@ onMounted(async () => {
         <div class="col">
           <div class="row q-pa-md q-col-gutter-sm">
             <div class="col-6">
-              <q-input
+              <q-select
                 outlined
-                v-model="educationData.educationLevel"
-                label="ระดับการศึกษา"
-                bg-color="white"
                 dense
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
-                hide-bottom-space
+                emit-value
+                map-options
+                bg-color="white"
+                v-model="educationData.educationLevel"
+                :options="educationLevelOption"
+                input-debounce="0"
+                use-input
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'options'
+                      ) "
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                label="ระดับการศึกษา"
+                clearable
               />
             </div>
             <div class="col-6">
@@ -981,11 +1026,17 @@ onMounted(async () => {
                 dense
                 emit-value
                 map-options
+                clearable
                 bg-color="white"
                 v-model="educationData.isEducation"
                 :options="educationOption"
                 option-value="value"
                 option-label="label"
+                input-debounce="0"
+                use-input
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'options'
+                      ) "
                 :rules="[
                   (val) =>
                     val !== null || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,