From 3e42ecbcb6521f5a2e26a648afc4e0d023bc7c2c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 27 Sep 2023 16:58:49 +0700
Subject: [PATCH 1/9] =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=87=E0=B9=80=E0=B8=95=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/2_Manage/Tab1.vue  | 47 +++++++++++--------
 src/modules/07_insignia/store.ts              |  9 +++-
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index eb88cffc5..267a74fb4 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -42,19 +42,7 @@ const dialogDesc = ref<string>("");
 
 // แจ้งเตือน
 const dialogWarn = ref<boolean>(false);
-const checkboxData = ref<any>([
-  { id: 1, name: "มีโทษทางวินัย", val: true },
-  {
-    id: 2,
-    name: "ไม่ได้เลื่อนเงินเดือน/ไม่ได้เลื่อนขั้น เนื่องจากลาเกิน",
-    val: false,
-  },
-  {
-    id: 3,
-    name: "ผลการประเมินการปฏิบัติราชการในรอบ 5 ปี ต่ำกว่าระดับดี (น้อยกว่าร้อยละ 70)",
-    val: false,
-  },
-]);
+const checkboxData = ref<any>([]);
 
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
@@ -641,7 +629,24 @@ const clickShowreson = (name: string, requestNote: string) => {
 const clickCloseReson = () => {
   dialogNote.value = false;
 };
-const clickShowWarn = () => {
+const clickShowWarn = (
+  markDiscipline: boolean,
+  markLeave: boolean,
+  markRate: boolean
+) => {
+  checkboxData.value = [
+    { id: 1, name: "มีโทษทางวินัย", val: markDiscipline },
+    {
+      id: 2,
+      name: "ไม่ได้เลื่อนเงินเดือน/ไม่ได้เลื่อนขั้น เนื่องจากลาเกิน",
+      val: markLeave,
+    },
+    {
+      id: 3,
+      name: "ผลการประเมินการปฏิบัติราชการในรอบ 5 ปี ต่ำกว่าระดับดี (น้อยกว่าร้อยละ 70)",
+      val: markRate,
+    },
+  ];
   dialogWarn.value = true;
 };
 </script>
@@ -805,7 +810,6 @@ const clickShowWarn = () => {
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th></q-th>
-
               <q-th
                 auto-width
                 v-if="
@@ -870,20 +874,26 @@ const clickShowWarn = () => {
                   <q-tooltip>หมายเหตุ</q-tooltip>
                 </q-btn>
               </q-td>
-              <q-td key="warn" class="text-center">
+              <q-td key="warn" class="text-center" v-if="props.row.statusMark">
                 <q-btn
-                  v-if="props.rowIndex == 1"
                   icon="mdi-information-outline"
                   size="12px"
                   color="red"
                   flat
                   round
                   dense
-                  @click.stop="clickShowWarn"
+                  @click.stop="
+                    clickShowWarn(
+                      props.row.markDiscipline,
+                      props.row.markLeave,
+                      props.row.markRate
+                    )
+                  "
                 >
                   <q-tooltip>แจ้งเตือน</q-tooltip></q-btn
                 >
               </q-td>
+              <q-td v-else auto-width></q-td>
 
               <q-td
                 v-close-popup
@@ -996,7 +1006,6 @@ const clickShowWarn = () => {
       </div>
     </div>
   </div>
-
   <!-- add -->
   <q-dialog v-model="modalAdd">
     <q-card style="width: 800px; max-width: 80vw">
diff --git a/src/modules/07_insignia/store.ts b/src/modules/07_insignia/store.ts
index da03624e6..19cb607f8 100644
--- a/src/modules/07_insignia/store.ts
+++ b/src/modules/07_insignia/store.ts
@@ -55,8 +55,12 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
         dateSend: date2Thai(e.requestDate),
         requestNote: e.requestNote,
         employeeType: profileType(e.profileType),
-        reason: e.reason
-
+        reason: e.reason,
+        markDiscipline: e.markDiscipline,
+        markLeave: e.markLeave,
+        markRate: e.markRate,
+        isApprove: e.isApprove,
+        statusMark: e.markDiscipline === true || e.markLeave === true || e.markRate === true ? true : false
       }));
       rows.value = await datalist;
       listinsignia.value = await datalist;
@@ -146,6 +150,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     }
   }
 
+
   return {
     roundId,
     optionRound,

From e8e4b001f56f1f47bda5e6e09019e72d1584e52a Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 28 Sep 2023 09:29:44 +0700
Subject: [PATCH 2/9] =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=B2=20=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=84=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=94=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=20?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=93=E0=B8=B5=E0=B8=84=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=98=E0=B8=A3=E0=B8=A3=E0=B8=A1=E0=B9=80=E0=B8=99=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=A1=200=20=E0=B8=A7=E0=B8=B1=E0=B8=99=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=8A=E0=B8=B3=E0=B8=A3=E0=B8=B0,=20?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B4=E0=B8=98=E0=B8=B5=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B3=E0=B8=A3=E0=B8=B0=20=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=95=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/views/02_qualify/PeriodAdd.vue   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 715925b76..855df240e 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -11,10 +11,10 @@
       class="q-mr-sm"
       @click="clickBack"
     />
-    {{ edit ? `แก้ไขรอบคัดเลือก` : "เพิ่มรอบคัดเลือก" }}
+    {{ edit ? `แก้ไขรอบ` : "เพิ่มรอบคัดเลือก" }}
     {{
       edit && announcementExam
-        ? `ครั้งที่ ${roundRaw}/${yearlyRaw == null ? "" : yearlyRaw + 543}`
+        ? `${name} ครั้งที่ ${roundRaw}/${yearlyRaw == null ? "" : yearlyRaw + 543}`
         : ""
     }}
   </div>
@@ -92,14 +92,14 @@
                   :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                   :label="`${'ปีงบประมาณ'}`"
                 >
-                  <template v-slot:prepend>
+                  <!-- <template v-slot:prepend>
                     <q-icon
                       name="event"
                       class="cursor-pointer"
                       style="color: var(--q-primary)"
                     >
                     </q-icon>
-                  </template>
+                  </template> -->
                 </q-input>
               </template>
             </datepicker>
@@ -220,7 +220,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam && fee != 0">
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"
@@ -464,10 +464,10 @@
               </ProfileTable>
             </q-form>
           </div>
-          <div class="col-12" v-if="announcementExam">
+          <div class="col-12" v-if="announcementExam && fee != 0">
             <q-separator size="5px" color="grey-2" class="q-mt-lg" />
           </div>
-          <div class="col-12 q-mt-lg" v-if="announcementExam">
+          <div class="col-12 q-mt-lg" v-if="announcementExam && fee != 0">
             <div class="text-bold text-subtitle2 q-pb-md">
               เลือกวิธีการชำระเงิน
             </div>

From 2175c11ad4d39d6707c2f3a4ba9b0e3dc99ccbbd Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 28 Sep 2023 14:16:57 +0700
Subject: [PATCH 3/9] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20filter=20=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=84=E0=B8=AD=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=A1=E0=B8=99=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_registryEmployee/views/Main.vue        | 361 ++++++++++++++----
 1 file changed, 291 insertions(+), 70 deletions(-)

diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 2f44fd188..f80d1d0e3 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -35,7 +35,7 @@ const {
 } = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
 
 const router = useRouter();
-const filterRef = ref<QInput>();
+const filterRef = ref<any>(null);
 const filter = ref<string>("");
 const id = ref<string>("");
 
@@ -241,8 +241,8 @@ const checkNull = (text: string) =>
   text == null
     ? ""
     : text == "00000000-0000-0000-0000-000000000000"
-      ? ""
-      : text;
+    ? ""
+    : text;
 
 // คลิก icon ส่งไปออกคำสั่ง (เปิด dialog)
 const modaladdOrder = ref<boolean>(false); // dialog ส่งไปออกคำสั่ง
@@ -255,10 +255,22 @@ const clickCloseSendModal = () => {
   modaladdOrder.value = false;
 };
 
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   filter.value = "";
   filterRef.value!.focus();
+  filterKeyword2.value = "";
 };
 
 // เพิ่มข้อมูลลูกจ้าง
@@ -298,6 +310,7 @@ const deleteData = async (id: string) => {
 // **** เริ่มในส่วนของการเลือกตำแหน่ง ***//
 const rowsPosition = ref<any>([]); // รายการข้อมูลในตารางกำหนดตำแหน่ง
 const filters = ref<FormRegistryEmployee[]>([]);
+const filterKeyword2 = ref<string>("");
 const modal = ref<boolean>(false); // เปิด-ปิด dialod กำหนดตำแหน่ง
 const selectedPosition = ref<any>([]); // เก็บตำแหน่งที่เลือก
 
@@ -425,10 +438,7 @@ const checkSave = () => {
 // เช็คข้อมูลก่อนบันทึกการกำหนดตำแหน่ง
 const saveData = async () => {
   if (selectedPosition.value.length == 0) {
-    dialogMessageNotify(
-      $q,
-      "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง"
-    );
+    dialogMessageNotify($q, "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง");
     return;
   } else {
     await savePosition();
@@ -550,7 +560,7 @@ const getPosition = async (id: string) => {
     });
 };
 
-// ดึงข้อมูลตำแหน่ง (root tree) 
+// ดึงข้อมูลตำแหน่ง (root tree)
 const selected = ref([]);
 const nodeTree = async () => {
   showLoader();
@@ -577,14 +587,16 @@ const rows = ref<FormRegistryEmployee[]>([]);
 const showEmployeeTemp = async () => {
   showLoader();
 
-  let cirteria = [{
-    criteriaType: "employee_class",
-    criteriaValue: "temp",
-  },
-  {
-    criteriaType: "is_retire",
-    criteriaValue: "false",
-  }];
+  let cirteria = [
+    {
+      criteriaType: "employee_class",
+      criteriaValue: "temp",
+    },
+    {
+      criteriaType: "is_retire",
+      criteriaValue: "false",
+    },
+  ];
 
   if (selected.value == null) return;
   await http
@@ -652,28 +664,64 @@ const showEmployeeTemp = async () => {
       <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="clickAddOrder">
+      <q-btn
+        flat
+        round
+        color="primary"
+        icon="mdi-account-arrow-right"
+        @click="clickAddOrder"
+      >
         <q-tooltip>ส่งรายชื่อไปออกคำสั่ง</q-tooltip>
       </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
-        <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-          style="max-width: 200px" class="q-ml-sm">
+        <q-input
+          standout
+          dense
+          v-model="filter"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
           <template v-slot:append>
             <q-icon v-if="filter == ''" name="search" />
-            <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
-        <q-select v-model="visibleColumnsEmployeeTemp" :display-value="$q.lang.table.columns" multiple outlined dense
-          :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-          class="gt-xs q-ml-sm" />
+        <q-select
+          v-model="visibleColumnsEmployeeTemp"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
       </div>
     </div>
     <div class="col-12 q-pt-sm">
-      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumnsEmployeeTemp" :filter="filter"
-        row-key="id">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumnsEmployeeTemp"
+        :filter="filter"
+        row-key="id"
+      >
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -684,16 +732,32 @@ const showEmployeeTemp = async () => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="no"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.rowIndex + 1 }}
             </q-td>
-            <q-td key="fullname" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="fullname"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.fullname }}
             </q-td>
-            <q-td key="newAgency" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
-              <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
-                props.row.draftPositionEmployee == null
-                ">
+            <q-td
+              key="newAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="
+                  props.row.draftOrganizationOrganization == null &&
+                  props.row.draftPositionEmployee == null
+                "
+              >
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -707,8 +771,15 @@ const showEmployeeTemp = async () => {
                 </div>
               </div>
             </q-td>
-            <q-td key="currentAgency" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
-              <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
+            <q-td
+              key="currentAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="props.row.oc == null && props.row.position == null"
+              >
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -722,69 +793,154 @@ const showEmployeeTemp = async () => {
                 </div>
               </div>
             </q-td>
-            <q-td key="amount" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="amount"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.amount }}
             </q-td>
-            <q-td key="govAge" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="govAge"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.govAge }}
             </q-td>
-            <q-td key="dateAppoint" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="dateAppoint"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.dateAppoint }}
             </q-td>
-            <q-td key="dateStart" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="dateStart"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.dateStart }}
             </q-td>
-            <q-td key="salaryDate" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="salaryDate"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.salaryDate }}
             </q-td>
-            <q-td key="refSalary" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="refSalary"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.refSalary }}
             </q-td>
-            <q-td key="age" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="age"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.age }}
             </q-td>
-            <q-td key="fullnameOld" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="fullnameOld"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.fullnameOld }}
             </q-td>
-            <q-td key="createdAt" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="createdAt"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.createdAt }}
             </q-td>
-            <q-td key="isLeave" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="isLeave"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.isLeave }}
             </q-td>
 
-            <q-td key="leaveDateOrder" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="leaveDateOrder"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.leaveDateOrder }}
             </q-td>
-            <q-td key="statustext" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="statustext"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.statustext }}
             </q-td>
             <q-td auto-width>
-              <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+              <q-btn
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
+                flat
+                round
+                dense
+              >
                 <q-menu transition-show="jump-down" transition-hide="jump-up">
                   <q-list dense style="min-width: 160px">
-                    <q-item clickable v-close-popup @click="editDetail(props.row)" :disable="props.row.status == 'REPORT' ||
-                      props.row.status == 'DONE'
-                      ">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon :color="props.row.status == 'REPORT' ||
-                          props.row.status == 'DONE'
-                          ? 'grey'
-                          : 'blue'
-                          " size="xs" name="mdi-account-settings" />
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row)"
+                      :disable="
+                        props.row.status == 'REPORT' ||
+                        props.row.status == 'DONE'
+                      "
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : 'blue'
+                          "
+                          size="xs"
+                          name="mdi-account-settings"
+                        />
                       </q-item-section>
                       <q-item-section>กำหนดตำแหน่ง</q-item-section>
                     </q-item>
                     <q-separator />
-                    <q-item clickable v-close-popup @click="clickDelete(props.row.id)" :disable="props.row.status == 'REPORT' ||
-                      props.row.status == 'DONE'
-                      ">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon :color="props.row.status == 'REPORT' ||
-                          props.row.status == 'DONE'
-                          ? 'grey'
-                          : 'red-7'
-                          " size="xs" name="mdi-delete" />
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="clickDelete(props.row.id)"
+                      :disable="
+                        props.row.status == 'REPORT' ||
+                        props.row.status == 'DONE'
+                      "
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : 'red-7'
+                          "
+                          size="xs"
+                          name="mdi-delete"
+                        />
                       </q-item-section>
                       <q-item-section>ลบ</q-item-section>
                     </q-item>
@@ -805,20 +961,85 @@ const showEmployeeTemp = async () => {
       <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
       <q-separator />
       <q-card-section class="q-pa-sm">
-        <d-table :rows="rowsPosition" :columns="columnsPosition" row-key="id" selection="single"
-          v-model:selected="selectedPosition" :visible-columns="visibleColumnsPosition">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                ref="filterRef"
+                debounce="300"
+                :model-value="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumnsPosition"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columnsPosition"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+        <d-table
+          :rows="rowsPosition"
+          :columns="columnsPosition"
+          :filter="filterKeyword2"
+          row-key="id"
+          selection="single"
+          v-model:selected="selectedPosition"
+          :visible-columns="visibleColumnsPosition"
+        >
           <template v-slot:body-selection="scope">
-            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
           </template>
         </d-table>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn dense unelevated label="บันทึก" color="public" @click="checkSave" class="q-px-md">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="checkSave"
+          class="q-px-md"
+        >
         </q-btn>
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogSendToCommand :modal="modaladdOrder" :closeDialog="clickCloseSendModal" :rows="rows" :fetch-new-list="showEmployeeTemp"/>
-</template>
\ No newline at end of file
+  <DialogSendToCommand
+    :modal="modaladdOrder"
+    :closeDialog="clickCloseSendModal"
+    :rows="rows"
+    :fetch-new-list="showEmployeeTemp"
+  />
+</template>

From 2b99a1459e3aee9b39fa9c5bee466469c130f69d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 28 Sep 2023 14:22:25 +0700
Subject: [PATCH 4/9] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20drop?=
 =?UTF-8?q?down=20=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/Main.vue  |   70 +-
 .../components/Receive/receiveDetail2.vue     |   10 +-
 .../components/Repatriate/RepatriatebyId.vue  |  271 ++-
 .../components/probation/FormAssign.vue       | 1508 ++++++++++++++---
 .../probation/FormEvaluation/FormReport.vue   |  394 ++++-
 .../components/probation/MainProbation.vue    |  241 ++-
 .../interface/response/officer.ts             |    7 +-
 src/modules/05_placement/store.ts             |    3 +-
 8 files changed, 2048 insertions(+), 456 deletions(-)

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 6fbca2201..27332bb0d 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -150,8 +150,8 @@ const fetchPlacementData = async (val: number) => {
     })
     .finally(() => {
       filterKeyword.value = "";
-      examTime.value = "all";
-      examType.value = "all";
+      examTime.value = "ทั้งหมด";
+      examType.value = "ทั้งหมด";
       expiredAccount.value = false;
       hideLoader();
     });
@@ -233,11 +233,10 @@ const searchFilterTable = async () => {
   rows.value = [];
   if (examType.value !== undefined && examType.value !== null) {
     await DataStore.DataUpdateMain(
-      examTime.value,
-      examType.value,
+      examTime.value == "ทั้งหมด" ? "all" : examTime.value,
+      examType.value == "ทั้งหมด" ? "all" : examType.value,
       expiredAccount.value
     );
-
     const dataArr: any = [];
     await DataStore.DataMainUpdate.map((e: any) => {
       dataArr.push({
@@ -278,6 +277,37 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+// filter ใน dropdown ครั้งที่
+const examTimeOP2 = ref<any[]>([]);
+function filterFnexamTime(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      examTimeOP2.value = examTimeOP;
+      examTime.value = "";
+    });
+  } else {
+    update(() => {
+      examTimeOP2.value = examTimeOP.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+const examTypeOP2 = ref<any[]>([]);
+function filterFnExamtype(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      examTypeOP2.value = examTypeOP.value;
+      examType.value = "";
+    });
+  } else {
+    update(() => {
+      examTypeOP2.value = examTypeOP.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
 </script>
 
 <template>
@@ -351,7 +381,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               dense
               emit-value
               map-options
-              :options="examTimeOP"
+              :options="examTimeOP2"
               option-value="id"
               option-label="name"
               lazy-rules
@@ -361,7 +391,18 @@ const paginationLabel = (start: number, end: number, total: number) => {
               :outlined="true"
               :hide-dropdown-icon="false"
               @update:model-value="searchFilterTable"
-            />
+              @filter="filterFnexamTime"
+              use-input
+              input-debounce="0"
+              behavior="menu"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
             <q-select
               class="col-xs-12 col-sm-3 col-md-2"
               v-model="examType"
@@ -370,7 +411,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               emit-value
               map-options
               option-label="name"
-              :options="examTypeOP"
+              :options="examTypeOP2"
               option-value="id"
               lazy-rules
               hide-bottom-space
@@ -379,7 +420,18 @@ const paginationLabel = (start: number, end: number, total: number) => {
               :outlined="true"
               :hide-dropdown-icon="false"
               @update:model-value="searchFilterTable"
-            />
+              @filter="filterFnExamtype"
+              use-input
+              behavior="menu"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
             <q-toggle
               class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
               v-model="expiredAccount"
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index 5e1fed1b8..150521964 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -12,7 +12,7 @@ import type {
   Information,
   DataOption,
   DataOptioninfo,
-  docList
+  docList,
 } from "@/modules/04_registry/components/profileType";
 
 import { defaultInformation } from "@/modules/04_registry/components/profileType";
@@ -272,7 +272,7 @@ const cancel = async () => {
   edit.value = !edit.value;
   if (myForm.value !== null) {
     await getData();
-    myForm.value?.resetValidation()
+    myForm.value?.resetValidation();
   }
 };
 
@@ -871,7 +871,8 @@ onMounted(async () => {
                 :label="`${'ประเภทการจ้าง'}`"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps' ) " />
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps' ) "
+              />
             </div>
             <div
               class="col-xs-6 col-sm-3 col-md-3"
@@ -896,7 +897,8 @@ onMounted(async () => {
                 :label="`${'ประเภทลูกจ้าง'}`"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) " />
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) "
+              />
             </div>
             <div class="col-xs-12">
               <div class="text-weight-bold text-grey">
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 0c4e99784..046338d4f 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -1,4 +1,5 @@
-div<script setup lang="ts">
+div
+<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
@@ -9,7 +10,7 @@ import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type {  QForm } from "quasar";
+import type { QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/officer";
 const $q = useQuasar();
 const route = useRoute();
@@ -48,6 +49,7 @@ const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const avatar = ref<string>("");
+const dateRepatriation = ref<Date | null>(null);
 
 const getData = async () => {
   showLoader();
@@ -75,6 +77,7 @@ const getData = async () => {
       positionLevelOld.value = data.positionLevelOld;
       positionNumberOld.value = data.positionNumberOld;
       organizationPositionOld.value = data.organizationPositionOld;
+      dateRepatriation.value = data.dateRepatriation;
     })
     .catch((e) => {
       messageError($q, e);
@@ -108,7 +111,7 @@ const conditionSave = async () => {
 const cancelBtn = () => {
   edit.value = !edit;
   getData();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
 };
 const saveData = async () => {
   const body = {
@@ -120,11 +123,12 @@ const saveData = async () => {
     positionLevelOld: positionLevelOld.value,
     positionNumberOld: posNo.value,
     amountOld: salary.value,
+    dateRepatriation: dateRepatriation.value,
   };
   showLoader();
   await http
     .put(config.API.repatriationMainEdit(dataId), body)
-    .then((res: any) => {
+    .then(() => {
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -144,8 +148,16 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat 
-      color="primary" class="q-mr-sm" @click="router.push(`/repatriate`)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/repatriate`)"
+    />
     รายละเอียดการส่งตัวกลับ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -154,8 +166,15 @@ onMounted(async () => {
         {{ fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
-        label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${personId}`)" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -199,14 +218,37 @@ onMounted(async () => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
-          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" 
-          v-if="!(status == 'REPORT' || status == 'DONE')"/>
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+          v-if="!(status == 'REPORT' || status == 'DONE')"
+        />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" 
-          style="width: 80px" @click="conditionSave" />
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancelBtn" />
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="cancelBtn"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -220,62 +262,187 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]" 
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space 
-                :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
-                :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
-                :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <CurrencyInput v-model="salary" :edit="edit" :options="{ currency: 'THB', }" :label="`${'เงินเดือน'}`" />
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{ currency: 'THB' }"
+                :label="`${'เงินเดือน'}`"
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
                 v-model="organization"
-                :rules="[ (val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`, ]" hide-bottom-space
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" 
-                autoApply :enableTimePicker="false" week-start="0" >
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                    :borderless="!edit" :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
-                    :label="`${'ตั้งแต่วัน'}`" >
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" :style="
-                          edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'" >
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-4 row">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateRepatriation"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      dateRepatriation !== null
+                        ? date2Thai(dateRepatriation)
+                        : null
+                    "
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่ส่งตัวกลับ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่ส่งตัวกลับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -284,9 +451,19 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 1e9d564ef..4202eb376 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -70,16 +70,66 @@ const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const checkRule = ref<CheckboxItem[]>([]);
 
-const OPmain = ref<Array<{ id: number; title: string; description: string; level: number; }>>([]);
-const OPgroup = ref<Array<{ id: number; title: string; description: string; level: number; }>>([]);
-const OPcomputer = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
-const OPenglish = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
-const OPinfomation = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
-const OPresourse = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
-const OPknowledge = ref<Array<{ id: number; title: number; description: string; level: string; }>>([]);
-const OPcaretaker = ref<Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; position: string; positionLevel: string }>[]>([]);
-const OPcommander = ref<Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; position: string; positionLevel: string }>[]>([]);
-const OPchairman = ref<Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; position: string; positionLevel: string }>[]>([]);
+const OPmain = ref<
+  Array<{ id: number; title: string; description: string; level: number }>
+>([]);
+const OPgroup = ref<
+  Array<{ id: number; title: string; description: string; level: number }>
+>([]);
+const OPcomputer = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPenglish = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPinfomation = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPresourse = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPknowledge = ref<
+  Array<{ id: number; title: number; description: string; level: string }>
+>([]);
+const OPcaretaker = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
+const OPcommander = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
+const OPchairman = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
 
 const dataEdit = async (id: string) => {
   await myForm.value.validate().then((result: boolean) => {
@@ -88,8 +138,8 @@ const dataEdit = async (id: string) => {
       const data = putDataEdit(id);
       http
         .put(config.API.saveEditAssign(id), data)
-        .then(() => { })
-        .catch(() => { })
+        .then(() => {})
+        .catch(() => {})
         .finally(async () => {
           status.value = false;
           getAssign();
@@ -108,7 +158,7 @@ const edit = () => {
 };
 const cancel = () => {
   status.value = false;
-  getAssign()
+  getAssign();
 };
 
 const filterData = (options: any[], excludedGroups: any[]) => {
@@ -206,11 +256,17 @@ const getUser = async () => {
       prefix: item.prefix,
       firstName: item.firstName,
       lastName: item.lastName,
-      name: `${item.prefix} ${item.firstName} ${item.lastName} (${item.position} ${item.positionLevel && item.positionLevel != '' ? ', ' + item.positionLevel : ''})`,
+      name: `${item.prefix} ${item.firstName} ${item.lastName} (${
+        item.position
+      } ${
+        item.positionLevel && item.positionLevel != ""
+          ? ", " + item.positionLevel
+          : ""
+      })`,
       citizenId: item.citizenId,
       isDirector: item.isDirector,
       positionLevel: item.positionLevel,
-      position: item.position
+      position: item.position,
     }));
 
     OPcommander.value = data.commander.map((item: any) => ({
@@ -218,11 +274,17 @@ const getUser = async () => {
       prefix: item.prefix,
       firstName: item.firstName,
       lastName: item.lastName,
-      name: `${item.prefix} ${item.firstName} ${item.lastName} (${item.position} ${item.positionLevel && item.positionLevel != '' ? ', ' + item.positionLevel : ''})`,
+      name: `${item.prefix} ${item.firstName} ${item.lastName} (${
+        item.position
+      } ${
+        item.positionLevel && item.positionLevel != ""
+          ? ", " + item.positionLevel
+          : ""
+      })`,
       citizenId: item.citizenId,
       isDirector: item.isDirector,
       positionLevel: item.positionLevel,
-      position: item.position
+      position: item.position,
     }));
 
     OPchairman.value = data.chairman.map((item: any) => ({
@@ -230,11 +292,17 @@ const getUser = async () => {
       prefix: item.prefix,
       firstName: item.firstName,
       lastName: item.lastName,
-      name: `${item.prefix} ${item.firstName} ${item.lastName} (${item.position} ${item.positionLevel && item.positionLevel != '' ? ', ' + item.positionLevel : ''})`,
+      name: `${item.prefix} ${item.firstName} ${item.lastName} (${
+        item.position
+      } ${
+        item.positionLevel && item.positionLevel != ""
+          ? ", " + item.positionLevel
+          : ""
+      })`,
       citizenId: item.citizenId,
       isDirector: item.isDirector,
       positionLevel: item.positionLevel,
-      position: item.position
+      position: item.position,
     }));
   });
 };
@@ -304,7 +372,7 @@ const postDateTime = async () => {
       const result = res.data;
       date_finish.value = result.finish_date;
     })
-    .catch((e) => { })
+    .catch((e) => {})
     .finally(async () => {
       hideLoader();
     });
@@ -706,30 +774,117 @@ onMounted(async () => {
     await getAssign();
   }
 });
+const optionCaretaker = ref<any>([]);
+function filterFnCaretaker(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionCaretaker.value = filtermantor(OPcaretaker.value, [
+        caretaker2.value,
+      ]);
+    });
+  } else {
+    update(() => {
+      optionCaretaker.value = filtermantor(OPcaretaker.value, [
+        caretaker2.value,
+      ]).filter((e: any) => e.name.search(val) !== -1);
+    });
+  }
+}
+const optionCaretaker2 = ref<any>([]);
+function filterFnCaretaker2(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionCaretaker2.value = filtermantor(OPcaretaker.value, [
+        caretaker1.value,
+      ]);
+    });
+  } else {
+    update(() => {
+      optionCaretaker2.value = filtermantor(OPcaretaker.value, [
+        caretaker1.value,
+      ]).filter((e: any) => e.name.search(val) !== -1);
+    });
+  }
+}
+const OPcommanderFn = ref<any>([]);
+function filterFnCommander(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      OPcommanderFn.value = OPcommander.value;
+    });
+  } else {
+    update(() => {
+      OPcommanderFn.value = OPcommander.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+const OPchairmanFn = ref<any>([]);
+function filterFnChairman(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      OPchairmanFn.value = OPchairman.value;
+    });
+  } else {
+    update(() => {
+      OPchairmanFn.value = OPchairman.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
 </script>
 
 <template>
   <q-form ref="myForm">
     <div class="q-pa-sm">
       <div class="toptitle text-dark col-12 row items-center">
-        <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)"
-          v-if="routeName == 'probationWorkAdd'" />
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+          v-if="routeName == 'probationWorkAdd'"
+        />
         <div v-if="routeName == 'probationWorkAdd'">
           เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
         </div>
         <div v-else class="col-12 row q-gutter-md">
           <div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
-          <q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
+          <q-btn
+            v-if="!status"
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            color="primary"
+          >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
             <q-menu>
               <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
-                  <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" />
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="clickdownloadFile('pdf')"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf" />
                   </q-item-section>
                   <q-item-section>ไฟล์ .PDF</q-item-section>
                 </q-item>
-                <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
-                  <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="clickdownloadFile('docx')"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
                   <q-item-section>ไฟล์ .docx</q-item-section>
                 </q-item>
               </q-list>
@@ -737,16 +892,37 @@ onMounted(async () => {
           </q-btn>
 
           <div v-if="!status">
-            <q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
+            <q-btn
+              dense
+              flat
+              round
+              color="primary"
+              @click="edit()"
+              icon="mdi-pencil-outline"
+            >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
           </div>
           <div v-else>
-            <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
+            <q-btn
+              dense
+              flat
+              round
+              color="red"
+              @click="cancel()"
+              icon="mdi-undo"
+            >
               <q-tooltip>ยกเลิก</q-tooltip>
             </q-btn>
-            <q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)"
-              icon="mdi-content-save-outline">
+            <q-btn
+              dense
+              flat
+              class="q-ml-md"
+              round
+              color="public"
+              @click="saveEdit(assignId)"
+              icon="mdi-content-save-outline"
+            >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
           </div>
@@ -762,12 +938,28 @@ onMounted(async () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-6">
-                  <q-input :rules="[(val) => !!val || 'กรุณากรอกชื่อ']" hide-bottom-space readonly dense borderless
-                    outlined v-model="fullname" label="ชื่อ-สกุล" />
+                  <q-input
+                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                    hide-bottom-space
+                    readonly
+                    dense
+                    borderless
+                    outlined
+                    v-model="fullname"
+                    label="ชื่อ-สกุล"
+                  />
                 </div>
                 <div class="col-xs-12 col-sm-6">
-                  <q-input :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']" hide-bottom-space readonly dense borderless
-                    outlined v-model="position" label="ตำแหน่ง" />
+                  <q-input
+                    :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
+                    hide-bottom-space
+                    readonly
+                    dense
+                    borderless
+                    outlined
+                    v-model="position"
+                    label="ตำแหน่ง"
+                  />
                 </div>
                 <div class="col-12 row">
                   <div class="col-12 text-top0 items-center">
@@ -775,14 +967,32 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 row q-col-gutter-md">
                     <div class="col-xs-12 col-sm-4">
-                      <q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
-                        class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
-                        option-value="value" :outlined="status == true" v-model="monthSelect"
-                        :label="`ระยะเวลา (เดือน)`" />
+                      <q-select
+                        :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
+                        hide-bottom-space
+                        :options="monthOp"
+                        class="col-xs-12 col-sm-6"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        option-label="label"
+                        option-value="value"
+                        :outlined="status == true"
+                        v-model="monthSelect"
+                        :label="`ระยะเวลา (เดือน)`"
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-4">
-                      <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-                        :enableTimePicker="false" week-start="0" :readonly="status != true">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="date_start"
+                        :locale="'th'"
+                        autoApply
+                        borderless
+                        :enableTimePicker="false"
+                        week-start="0"
+                        :readonly="status != true"
+                      >
                         <template #year="{ year }">
                           {{ year + 543 }}
                         </template>
@@ -790,19 +1000,38 @@ onMounted(async () => {
                           {{ parseInt(value + 543) }}
                         </template>
                         <template #trigger>
-                          <q-input dense borderless :readonly="status != true" :outlined="status == true"
-                            :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
-                            class="full-width datepicker" :model-value="date_start != null
+                          <q-input
+                            dense
+                            borderless
+                            :readonly="status != true"
+                            :outlined="status == true"
+                            :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                            hide-bottom-space
+                            class="full-width datepicker"
+                            :model-value="
+                              date_start != null
                                 ? date2Thai(date_start)
                                 : undefined
-                              " :label="`${'ตั้งเเต่วันที่'}`" clearable @clear="clearDateExam">
+                            "
+                            :label="`${'ตั้งเเต่วันที่'}`"
+                            clearable
+                            @clear="clearDateExam"
+                          >
                           </q-input>
                         </template>
                       </datepicker>
                     </div>
                     <div class="col-xs-12 col-sm-4">
-                      <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
-                        :readonly="isDatePicker2Readonly || status != true" :enableTimePicker="false" week-start="0">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="date_finish"
+                        :locale="'th'"
+                        autoApply
+                        borderless
+                        :readonly="isDatePicker2Readonly || status != true"
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
                         <template #year="{ year }">
                           {{ year + 543 }}
                         </template>
@@ -810,11 +1039,22 @@ onMounted(async () => {
                           {{ parseInt(value + 543) }}
                         </template>
                         <template #trigger>
-                          <q-input hide-bottom-space dense borderless :outlined="status == true" readonly
-                            class="full-width datepicker" :model-value="date_finish != null
+                          <q-input
+                            hide-bottom-space
+                            dense
+                            borderless
+                            :outlined="status == true"
+                            readonly
+                            class="full-width datepicker"
+                            :model-value="
+                              date_finish != null
                                 ? date2Thai(date_finish)
                                 : undefined
-                              " :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
+                            "
+                            :label="`${'ถึงวันที่'}`"
+                            clearable
+                            @clear="clearDateExam2"
+                          >
                           </q-input>
                         </template>
                       </datepicker>
@@ -832,22 +1072,86 @@ onMounted(async () => {
                 ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
               </div>
               <div v-if="status == true" class="col-12 row q-col-gutter-md">
-                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
-                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
-                  dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
-                  :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
-                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
-                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
-                  borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
+                <q-select
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="id"
+                  :options="optionCaretaker"
+                  class="col-xs-12 col-sm-6"
+                  :readonly="status != true"
+                  dense
+                  hide-bottom-space
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker1"
+                  :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name"
+                  @filter="filterFnCaretaker"
+                  use-input
+                  behavior="menu"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template></q-select
+                >
+                <q-select
+                  clearable
+                  :options="optionCaretaker2"
+                  option-value="id"
+                  option-label="name"
+                  hide-bottom-space
+                  class="col-xs-12 col-sm-6"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker2"
+                  :label="`ผู้ดูแลคนที่ 2`"
+                  @filter="filterFnCaretaker2"
+                  use-input
+                  behavior="menu"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
               </div>
               <div v-else class="col-12 row q-col-gutter-md">
-                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
-                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="!status" dense
-                  hide-bottom-space borderless :outlined="status" v-model="caretaker1" :label="`ผู้ดูแลคนที่ 1`"
-                  option-label="name" />
-                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
-                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="!status" dense borderless
-                  :outlined="status" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
+                <q-select
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="id"
+                  :options="filtermantor(OPcaretaker, [caretaker2])"
+                  class="col-xs-12 col-sm-6"
+                  :readonly="!status"
+                  dense
+                  hide-bottom-space
+                  borderless
+                  :outlined="status"
+                  v-model="caretaker1"
+                  :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name"
+                />
+                <q-select
+                  clearable
+                  :options="filtermantor(OPcaretaker, [caretaker1])"
+                  option-value="id"
+                  option-label="name"
+                  hide-bottom-space
+                  class="col-xs-12 col-sm-6"
+                  :readonly="!status"
+                  dense
+                  borderless
+                  :outlined="status"
+                  v-model="caretaker2"
+                  :label="`ผู้ดูแลคนที่ 2`"
+                />
               </div>
             </div>
             <div class="col-12">
@@ -862,29 +1166,71 @@ onMounted(async () => {
               <div class="col-12 text-top2 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
-                <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
-                  @click="addActivity" />
+                <q-btn
+                  v-if="status == true"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addActivity"
+                />
               </div>
               <div class="col-12 row q-gutter-sm">
-                <q-card v-for="(item, index) in activityArray" :key="index" flat bordered
-                  class="col-12 q-pa-sm bg-grey-1">
+                <q-card
+                  v-for="(item, index) in activityArray"
+                  :key="index"
+                  flat
+                  bordered
+                  class="col-12 q-pa-sm bg-grey-1"
+                >
                   <div class="col-12 row q-col-gutter-sm">
                     <div class="col-xs-12 col-sm-6">
-                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
-                        class="bg-white" type="textarea" v-model="activity_desc[index]"
-                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                      <q-input
+                        :rules="
+                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="bg-white"
+                        type="textarea"
+                        v-model="activity_desc[index]"
+                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-5">
-                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
-                        class="bg-white" type="textarea" v-model="goal_desc[index]"
-                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                      <q-input
+                        :rules="
+                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="bg-white"
+                        type="textarea"
+                        v-model="goal_desc[index]"
+                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+                      />
                     </div>
                     <!-- delete -->
-                    <div v-if="index > 1" class="col-xs-12 col-sm-1 flex justify-center items-center">
-                      <q-btn flat round color="red" icon="mdi-trash-can-outline" @click="deleteactivity(index)"
-                        v-if="status == true" />
+                    <div
+                      v-if="index > 1"
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteactivity(index)"
+                        v-if="status == true"
+                      />
                     </div>
                   </div>
                 </q-card>
@@ -901,22 +1247,59 @@ onMounted(async () => {
                   <div class="col-12 row">
                     <div class="col-12 text-top2 row items-center">
                       ความรู้ความสามารถในการปฏิบัติงาน
-                      <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
-                        @click="addKnowledge" />
+                      <q-btn
+                        v-if="status == true"
+                        round
+                        color="primary"
+                        dense
+                        icon="mdi-plus"
+                        flat
+                        class="q-ml-sm"
+                        @click="addKnowledge"
+                      />
                     </div>
-                    <div v-for="(item, index) in knowledgeArray" :key="index" class="col-12 row q-col-gutter-sm">
+                    <div
+                      v-for="(item, index) in knowledgeArray"
+                      :key="index"
+                      class="col-12 row q-col-gutter-sm"
+                    >
                       <div class="col-11 q-my-xs">
-                        <q-select :option-label="(item) => `${item.title}-${item.description}`
-                          " option-value="id" map-options :rules="index < 3
-      ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
-      : []
-    " hide-bottom-space :options="OPknowledge" class="bg-white" :readonly="status != true" dense
-                          borderless :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
-                            }`" />
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title}-${item.description}`
+                          "
+                          option-value="id"
+                          map-options
+                          :rules="
+                            index < 3
+                              ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
+                              : []
+                          "
+                          hide-bottom-space
+                          :options="OPknowledge"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="knowledge[index]"
+                          :label="`ความรู้ความสามารถในการปฏิบัติงาน ${
+                            index + 1
+                          }`"
+                        />
                       </div>
-                      <div v-if="index > 2" class="col-xs-12 col-sm-1 flex justify-center items-center">
-                        <q-btn v-if="status == true" flat round color="red" icon="mdi-trash-can-outline"
-                          @click="deleteknowledge(index)" />
+                      <div
+                        v-if="index > 2"
+                        class="col-xs-12 col-sm-1 flex justify-center items-center"
+                      >
+                        <q-btn
+                          v-if="status == true"
+                          flat
+                          round
+                          color="red"
+                          icon="mdi-trash-can-outline"
+                          @click="deleteknowledge(index)"
+                        />
                       </div>
                     </div>
                   </div>
@@ -924,13 +1307,28 @@ onMounted(async () => {
                     <div class="col-12 text-top2 row items-center">
                       ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
                     </div>
-                    <q-card flat bordered class="col-12 q-pa-md q-mt-sm" style="max-height: 500px; overflow-y: scroll">
+                    <q-card
+                      flat
+                      bordered
+                      class="col-12 q-pa-md q-mt-sm"
+                      style="max-height: 500px; overflow-y: scroll"
+                    >
                       <div class="example-row-column-width">
                         <div class="bg-grey-3 q-py-xs">
-                          <div class="row" v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            class="row"
+                            v-for="(item, index) in checkRule"
+                            :key="item.id"
+                          >
                             <div v-if="index === 0" class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-if="item.status_select === 1"
-                                v-model="item.checked" dense :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-if="item.status_select === 1"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div v-if="index === 0" class="col-11">
                               {{ item.description }}
@@ -938,7 +1336,10 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 1" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 1"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10">
                               {{ item.description }}
@@ -946,16 +1347,27 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 2" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 2"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 2 && index < 9" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 2 && index < 9"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
 
                             <div class="col-9 q-pl-xl">
@@ -964,16 +1376,27 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 9" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 9"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 9 && index < 16" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 9 && index < 16"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -981,16 +1404,27 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 16" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 16"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 16 && index < 19" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 16 && index < 19"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -998,16 +1432,27 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 19" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 19"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 19 && index < 30" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 19 && index < 30"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1023,8 +1468,15 @@ onMounted(async () => {
                     </div>
                     <div class="col-12 row q-col-gutter-md">
                       <div class="col-12">
-                        <q-input class="bg-white" :readonly="status != true" dense borderless :outlined="status == true"
-                          v-model="OtherLaw" type="textarea" />
+                        <q-input
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="OtherLaw"
+                          type="textarea"
+                        />
                       </div>
                     </div>
                   </div>
@@ -1032,60 +1484,121 @@ onMounted(async () => {
                     <div class="col-12 text-top2">ทักษะ</div>
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) =>
-                            `${item.title} - ${item.level_description}`
-                          " option-value="id" hide-bottom-space :rules="[
-    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-  ]" :options="OPcomputer" class="bg-white" :readonly="status != true" dense borderless
-                          map-options :outlined="status == true" v-model="skill" label="ด้านที่ 1">
+                        <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPcomputer"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="skill"
+                          label="ด้านที่ 1"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select ellipsis-2-lines :option-label="(item) =>
-                            `${item.title} - ${item.level_description}`
-                          " option-value="id" map-options hide-bottom-space :rules="[
-    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-  ]" :options="OPenglish" class="bg-white" :readonly="status != true" dense borderless
-                          :outlined="status == true" v-model="skill2" label="ด้านที่ 2">
+                        <q-select
+                          ellipsis-2-lines
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          map-options
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPenglish"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="skill2"
+                          label="ด้านที่ 2"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) =>
-                            `${item.title} - ${item.level_description}`
-                          " option-value="id" hide-bottom-space :rules="[
-    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-  ]" :options="OPinfomation" class="bg-white" :readonly="status != true" dense map-options
-                          borderless :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
+                        <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPinfomation"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="skill3"
+                          label="ด้านที่ 3"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) =>
-                            `${item.title} - ${item.level_description}`
-                          " option-value="id" hide-bottom-space :rules="[
-    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-  ]" :options="OPresourse" class="bg-white" :readonly="status != true" dense map-options
-                          borderless :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
+                        <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPresourse"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="skill4"
+                          label="ด้านที่ 4"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1104,69 +1617,145 @@ onMounted(async () => {
                     <div class="col-12 text-top2">สมรรถนะหลัก</div>
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main2, main3, main4, main5])
-                            " class="bg-white" :readonly="status != true" dense borderless map-options
-                          :outlined="status == true" v-model="main" label="ตัวที่ 1">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main2, main3, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="main"
+                          label="ตัวที่ 1"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main, main3, main4, main5])
-                            " class="bg-white" :readonly="status != true" dense borderless map-options
-                          :outlined="status == true" v-model="main2" label="ตัวที่ 2">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main3, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="main2"
+                          label="ตัวที่ 2"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main, main2, main4, main5])
-                            " class="bg-white" :readonly="status != true" dense map-options borderless
-                          :outlined="status == true" v-model="main3" label="ตัวที่ 3">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="main3"
+                          label="ตัวที่ 3"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main, main2, main3, main5])
-                            " class="bg-white" :readonly="status != true" dense borderless map-options
-                          :outlined="status == true" v-model="main4" label="ตัวที่ 4">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="main4"
+                          label="ตัวที่ 4"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
 
                       <div class="col-xs-12 col-sm-6">
-                        <q-select hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']" :options="filterMain(OPmain, [main, main2, main3, main4])
-                          " :option-label="(item) => `${item.title} - ${item.description}`
-    " option-value="id" class="bg-white" :readonly="status != true" dense map-options borderless
-                          :outlined="status == true" v-model="main5" label="ตัวที่ 5">
+                        <q-select
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main4])
+                          "
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="main5"
+                          label="ตัวที่ 5"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1174,46 +1763,88 @@ onMounted(async () => {
                     <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[
-    (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
-  ]" :options="filterData(OPgroup, [group2, group3])" class="bg-white"
-                          :readonly="status != true" dense borderless map-options :outlined="status == true"
-                          v-model="group" label="ตัวที่ 1">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group2, group3])"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="group"
+                          label="ตัวที่ 1"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[
-    (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
-  ]" :options="filterData(OPgroup, [group, group3])" class="bg-white"
-                          :readonly="status != true" dense borderless map-options :outlined="status == true"
-                          v-model="group2" label="ตัวที่ 2">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group, group3])"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="group2"
+                          label="ตัวที่ 2"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" map-options hide-bottom-space :rules="[
-    (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
-  ]" :options="filterData(OPgroup, [group, group2])" class="bg-white"
-                          :readonly="status != true" dense borderless :outlined="status == true" v-model="group3"
-                          label="ตัวที่ 3">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          map-options
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group, group2])"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="group3"
+                          label="ตัวที่ 3"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1224,9 +1855,12 @@ onMounted(async () => {
             <div class="col-12 row">
               <div class="col-12 text-top2 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span class="text-weight-regular q-pl-sm">
+                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
+                  class="text-weight-regular q-pl-sm"
+                >
                   ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย
-                  )</span>
+                  )</span
+                >
               </div>
               <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                 <div class="row col-12 q-gutter-lg">
@@ -1300,7 +1934,13 @@ onMounted(async () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-12">
-                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other" />
+                  <q-input
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="Other"
+                  />
                 </div>
               </div>
             </div>
@@ -1308,28 +1948,70 @@ onMounted(async () => {
               <div class="col-12 text-top2 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
-                <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
-                  @click="addProductivity" />
+                <q-btn
+                  v-if="status == true"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addProductivity"
+                />
               </div>
               <div class="col-12 row q-gutter-md">
-                <q-card v-for="(item, index) in ProductivityArray" :key="index" flat bordered
-                  class="col-12 q-pa-sm bg-grey-1">
+                <q-card
+                  v-for="(item, index) in ProductivityArray"
+                  :key="index"
+                  flat
+                  bordered
+                  class="col-12 q-pa-sm bg-grey-1"
+                >
                   <div class="col-12 row q-col-gutter-sm">
                     <div class="col-xs-12 col-sm-6">
-                      <q-input hide-bottom-space :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " class="bg-white" type="textarea" :readonly="status != true" dense borderless
-                        :outlined="status == true" v-model="output_desc[index]"
-                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)" />
+                      <q-input
+                        hide-bottom-space
+                        :rules="
+                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        class="bg-white"
+                        type="textarea"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        v-model="output_desc[index]"
+                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-5">
-                      <q-input :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " hide-bottom-space class="bg-white" type="textarea" :readonly="status != true" dense
-                        borderless :outlined="status == true" v-model="indicator_desc[index]"
-                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
+                      <q-input
+                        :rules="
+                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        class="bg-white"
+                        type="textarea"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        v-model="indicator_desc[index]"
+                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
+                      />
                     </div>
-                    <div v-if="index > 0" class="col-xs-12 col-sm-1 flex justify-center items-center">
-                      <q-btn flat v-if="status == true" round color="red" icon="mdi-trash-can-outline"
-                        @click="deleteProductivitys(index)" />
+                    <div
+                      v-if="index > 0"
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        flat
+                        v-if="status == true"
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteProductivitys(index)"
+                      />
                     </div>
                   </div>
                 </q-card>
@@ -1398,8 +2080,14 @@ onMounted(async () => {
                       <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                       <li>
                         อื่นๆ (ถ้ามี)
-                        <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other5"
-                          label="กรอกอื่นๆ" />
+                        <q-input
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="Other5"
+                          label="กรอกอื่นๆ"
+                        />
                       </li>
                     </div>
                   </div>
@@ -1482,16 +2170,36 @@ onMounted(async () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-4">
-                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="fullname"
-                    label="ชื่อ-สกุล" />
+                  <q-input
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="fullname"
+                    label="ชื่อ-สกุล"
+                  />
                 </div>
                 <div class="col-xs-12 col-sm-4">
-                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="position"
-                    label="ตำแหน่ง" />
+                  <q-input
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="position"
+                    label="ตำแหน่ง"
+                  />
                 </div>
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date1" :locale="'th'" autoApply
-                    :readonly="status != true" borderless :enableTimePicker="false" week-start="0">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date1"
+                    :locale="'th'"
+                    autoApply
+                    :readonly="status != true"
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1499,12 +2207,23 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true" dense borderless :outlined="status == true"
-                        class="full-width datepicker" :model-value="date1 != null ? date2Thai(date1) : null"
-                        label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="date1 != null ? date2Thai(date1) : null"
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
@@ -1519,15 +2238,65 @@ onMounted(async () => {
                 ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id"
-                  option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
-                  :outlined="status == true" v-model="caretaker1" label="ผู้ดูแลคนที่ 1" />
-                <q-select v-else :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="!status" dense borderless :outlined="status" v-model="caretaker1"
-                  label="ผู้ดูแลคนที่ 1" />
+                <q-select
+                  v-if="status == true"
+                  :options="optionCaretaker"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker1"
+                  label="ผู้ดูแลคนที่ 1"
+                  @filter="filterFnCaretaker"
+                  use-input
+                  behavior="menu"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+                <q-select
+                  v-else
+                  :options="optionCaretaker"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="!status"
+                  dense
+                  borderless
+                  :outlined="status"
+                  v-model="caretaker1"
+                  label="ผู้ดูแลคนที่ 1"
+                  @filter="filterFnCaretaker"
+                  use-input
+                  behavior="menu"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date2" :locale="'th'" autoApply borderless
-                    :enableTimePicker="false" :readonly="status != true" week-start="0">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date2"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    :readonly="status != true"
+                    week-start="0"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1535,27 +2304,89 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true" dense borderless :outlined="status == true"
-                        class="full-width datepicker" :model-value="date2 != null ? date2Thai(date2) : null"
-                        label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="date2 != null ? date2Thai(date2) : null"
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
                     </template>
                   </datepicker>
                 </div>
-                <q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])"
-                  option-value="id" option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense
-                  borderless :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
-                <q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
-                  option-label="name" class="col-xs-12 col-sm-8" :readonly="!status" dense borderless :outlined="status"
-                  v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
+                <q-select
+                  clearable
+                  v-if="status == true"
+                  :options="optionCaretaker2"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker2"
+                  label="ผู้ดูแลคนที่ 2"
+                  @filter="filterFnCaretaker2"
+                  use-input
+                  behavior="menu"
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+                <q-select
+                  clearable
+                  v-else
+                  :options="optionCaretaker2"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="!status"
+                  dense
+                  borderless
+                  :outlined="status"
+                  v-model="caretaker2"
+                  label="ผู้ดูแลคนที่ 2"
+                  @filter="filterFnCaretaker2"
+                  use-input
+                  behavior="menu"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date3" :locale="'th'" autoApply borderless
-                    :enableTimePicker="false" week-start="0" :readonly="status != true || !caretaker2">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date3"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :readonly="status != true || !caretaker2"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1563,13 +2394,30 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :disable="!caretaker2" :readonly="status != true" dense :rules="caretaker2
-                          ? [(val) => !!val || 'กรุณาเลือกวันที่']
-                          : []
-                        " borderless :outlined="status == true" class="full-width datepicker" :model-value="caretaker2 != null ? date2Thai(date3) : null
-    " label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :disable="!caretaker2"
+                        :readonly="status != true"
+                        dense
+                        :rules="
+                          caretaker2
+                            ? [(val) => !!val || 'กรุณาเลือกวันที่']
+                            : []
+                        "
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="
+                          caretaker2 != null ? date2Thai(date3) : null
+                        "
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
@@ -1584,16 +2432,67 @@ onMounted(async () => {
                 ผู้บังคับบัญชาผู้มอบหมายงาน
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select v-if="status == true" :options="OPcommander" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
-                  :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']" :outlined="status == true" v-model="commander"
-                  label="ผู้บังคับบัญชา" />
-                <q-select v-else :options="OPcommander" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
-                  :readonly="!status" dense :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']" borderless
-                  :outlined="status" v-model="commander" label="ผู้บังคับบัญชา" />
+                <q-select
+                  v-if="status == true"
+                  :options="OPcommanderFn"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
+                  :outlined="status == true"
+                  v-model="commander"
+                  label="ผู้บังคับบัญชา"
+                  use-input
+                  behavior="menu"
+                  @filter="filterFnCommander"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+                <q-select
+                  v-else
+                  :options="OPcommanderFn"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="!status"
+                  dense
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
+                  borderless
+                  :outlined="status"
+                  v-model="commander"
+                  label="ผู้บังคับบัญชา"
+                  use-input
+                  behavior="menu"
+                  @filter="filterFnCommander"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date4" :locale="'th'" autoApply borderless
-                    :readonly="status != true" :enableTimePicker="false" week-start="0">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date4"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :readonly="status != true"
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1601,12 +2500,23 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true" dense borderless :outlined="status == true"
-                        class="full-width datepicker" :model-value="date4 != null ? date2Thai(date4) : null"
-                        label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="date4 != null ? date2Thai(date4) : null"
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
@@ -1621,19 +2531,71 @@ onMounted(async () => {
                 ประธานกรรมการ
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select v-if="status == true" :options="OPchairman" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
-                  v-model="chairman" label="ประธานกรรมการ" :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']" />
-                <q-select v-else :options="OPchairman" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
-                  :readonly="!status" dense borderless :outlined="status" v-model="chairman"
-                  :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']" label="ประธานกรรมการ" />
+                <q-select
+                  v-if="status == true"
+                  :options="OPchairmanFn"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="chairman"
+                  label="ประธานกรรมการ"
+                  :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
+                  use-input
+                  behavior="menu"
+                  @filter="filterFnChairman"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+                <q-select
+                  v-else
+                  :options="OPchairmanFn"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="!status"
+                  dense
+                  borderless
+                  :outlined="status"
+                  v-model="chairman"
+                  :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
+                  label="ประธานกรรมการ"
+                  use-input
+                  behavior="menu"
+                  @filter="filterFnChairman"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
               </div>
             </div>
           </div>
         </div>
         <q-separator v-show="routeName == 'probationWorkAdd'" />
-        <div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
-          <q-btn unelevated label="บันทึก" color="public" @click="saveData(personalId)" />
+        <div
+          v-show="routeName == 'probationWorkAdd'"
+          class="flex justify-end q-pa-sm q-gutter-sm"
+        >
+          <q-btn
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveData(personalId)"
+          />
         </div>
       </div>
     </div>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index e938f61a0..dea6b317a 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -17,7 +17,7 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
-  dialogMessageNotify
+  dialogMessageNotify,
 } = mixin;
 const route = useRoute();
 const assignId = ref<string>(route.params.form.toString());
@@ -27,7 +27,7 @@ const assign = ref<any>([]);
 const mentors = ref<any>([]);
 const commander = ref<any>([]);
 const status = ref<boolean>(true);
-const ID = ref<string>('')
+const ID = ref<string>("");
 const date_start = ref<Date>(new Date());
 const date_finish = ref<Date>();
 const develop = ref<number>();
@@ -61,13 +61,16 @@ const fecthAssign = async (id: string) => {
   await http
     .get(config.API.evaluateReportcreate(id))
     .then((res) => {
-      assign.value = res.data.data.assign
-      person.value = res.data.data.person
+      assign.value = res.data.data.assign;
+      person.value = res.data.data.person;
       mentors.value = res.data.data.mentors;
       date_start.value = res.data.data.assign.date_start;
       date_finish.value = res.data.data.assign.date_finish;
 
-      if (res.data.data.result.develop_complete != null && res.data.data.result.evaluate_result != null) {
+      if (
+        res.data.data.result.develop_complete != null &&
+        res.data.data.result.evaluate_result != null
+      ) {
         develop.value = res.data.data.result.develop_complete;
         result.value = res.data.data.result.evaluate_result;
       }
@@ -94,7 +97,7 @@ const fecthResult = async (id: string) => {
     .then(async (res: any) => {
       if (res.data.data != null) {
         const data = await res.data.data.evaluate;
-        ID.value = data.id
+        ID.value = data.id;
         date_start.value = data.date_start;
         date_finish.value = data.date_finish;
         develop.value = await Number(data.develop_complete);
@@ -106,10 +109,10 @@ const fecthResult = async (id: string) => {
         status.value = false;
         action.value = "edit";
         expand_month.value = data.expand_month;
-        changeReson52(Number(data.pass_result))
+        changeReson52(Number(data.pass_result));
       }
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
 
 // part new
@@ -127,8 +130,6 @@ const optionsResult = [
   },
 ];
 
-
-
 const savaForm = async () => {
   await myForm.value.validate().then((result: boolean) => {
     if (result) {
@@ -185,7 +186,8 @@ const postData = async (action: string) => {
       })
       .catch((e: any) => {
         messageError($q, e);
-      }).finally(() => {
+      })
+      .finally(() => {
         status.value = false;
         fecthResult(assignId.value);
       });
@@ -210,19 +212,19 @@ const selectRuslt = () => {
     expand_month.value = "";
   }
 
-  changeReson52(Number(result.value))
+  changeReson52(Number(result.value));
 };
 
 function changeReson52(val: number) {
   switch (val) {
     case 1:
-      reson52.value = "เห็นควรให้รับราชการต่อไป"
+      reson52.value = "เห็นควรให้รับราชการต่อไป";
       break;
     case 2:
-      reson52.value = "เห็นควรให้ออกจากราชการ"
+      reson52.value = "เห็นควรให้ออกจากราชการ";
       break;
     case 3:
-      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`
+      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`;
       break;
 
     default:
@@ -234,22 +236,57 @@ onMounted(() => {
   fecthAssign(assignId.value);
   fecthResult(assignId.value);
 });
+const optionsFn = ref<any>([]);
+function filterFnOptions(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionsFn.value = options;
+    });
+  } else {
+    update(() => {
+      optionsFn.value = options.filter((e: any) => e.label.search(val) !== -1);
+    });
+  }
+}
+const optionsResultFn = ref<any>([])
+function filterFnOptionsResult(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionsResultFn.value = optionsResult;
+    });
+  } else {
+    update(() => {
+      optionsResultFn.value = optionsResult.filter((e: any) => e.label.search(val) !== -1);
+    });
+  }
+}
 </script>
 
 <template>
   <div class="row col-12">
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบรายงานการประเมินฯ</div>
-      <q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
+      <q-btn
+        v-if="!status"
+        size="12px"
+        flat
+        dense
+        icon="mdi-download"
+        color="primary"
+      >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
         <q-menu>
           <q-list style="min-width: 150px">
             <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
-              <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+              <q-item-section avatar
+                ><q-icon color="red" name="mdi-file-pdf"
+              /></q-item-section>
               <q-item-section>ไฟล์ .PDF</q-item-section>
             </q-item>
             <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
-              <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+              <q-item-section avatar
+                ><q-icon color="blue" name="mdi-file-word"
+              /></q-item-section>
               <q-item-section>ไฟล์ .docx</q-item-section>
             </q-item>
           </q-list>
@@ -282,9 +319,7 @@ onMounted(() => {
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         ประเมินผล
-        <span class="text-primary q-pr-sm">
-          ครั้งที่ 1
-        </span>
+        <span class="text-primary q-pr-sm"> ครั้งที่ 1 </span>
       </div>
 
       <div class="col-12 text-top0 row items-center">
@@ -299,8 +334,16 @@ onMounted(() => {
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              :readonly="!status" :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :readonly="!status"
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -308,10 +351,23 @@ onMounted(() => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -319,8 +375,16 @@ onMounted(() => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply :readonly="!status"
-              borderless :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              :readonly="!status"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -328,10 +392,23 @@ onMounted(() => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  " :label="`${'ถึงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -344,27 +421,78 @@ onMounted(() => {
       <div class="col-12 row q-mt-xs">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <q-select :rules="[
-              (val) =>
-                !!val ||
-                'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
-            ]" hide-bottom-space :options="options" class="col-xs-12 col-sm-6" dense borderless :disable="!status"
-              emit-value map-options option-label="label" option-value="value" outlined v-model="develop"
-              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+            <q-select
+              :rules="[
+                (val) =>
+                  !!val ||
+                  'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+              ]"
+              hide-bottom-space
+              :options="optionsFn"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              :disable="!status"
+              emit-value
+              map-options
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="develop"
+              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+              @filter="filterFnOptions"
+              use-input
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
           </div>
           <div class="col-xs-12 col-sm-6">
             <div class="row">
-              <q-select class="col-sm-12" :rules="[
-                (val) =>
-                  !!val ||
-                  'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
-              ]" hide-bottom-space :options="optionsResult" :disable="!status" dense borderless emit-value map-options
-                option-label="label" option-value="value" outlined v-model="result"
-                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" @update:model-value="selectRuslt" />
+              <q-select
+                class="col-sm-12"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+                ]"
+                hide-bottom-space
+                :options="optionsResultFn"
+                :disable="!status"
+                dense
+                borderless
+                emit-value
+                map-options
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="result"
+                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+                @update:model-value="selectRuslt"
+                use-input
+                @filter="filterFnOptionsResult"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
             <div class="row q-mt-xs" v-if="result === 3">
-              <q-input outlined dense v-model="expand_month" label="จำนวนเดือน"
-                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']" type="number" />
+              <q-input
+                outlined
+                dense
+                v-model="expand_month"
+                label="จำนวนเดือน"
+                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
+                type="number"
+              />
             </div>
           </div>
         </div>
@@ -373,14 +501,34 @@ onMounted(() => {
       <div class="col-12 row q-mt-md">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <q-input hide-bottom-space dense borderless outlined :disable="!status" class="bg-white" type="textarea"
-              v-model="reson" lazy-rules label="เหตุผล"
-              :rules="[(val) => !!val && val.length > 0 || 'กรุณาระบุเหตุผล']" />
+            <q-input
+              hide-bottom-space
+              dense
+              borderless
+              outlined
+              :disable="!status"
+              class="bg-white"
+              type="textarea"
+              v-model="reson"
+              lazy-rules
+              label="เหตุผล"
+              :rules="[(val) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
+            />
           </div>
           <div class="col-xs-12 col-sm-6">
-            <q-input hide-bottom-space dense borderless outlined disable class="bg-white" type="textarea"
-              v-model="reson52" lazy-rules label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
-              :rules="[(val) => !!val && val.length > 0 || 'กรุณาระบุเหตุผล']" />
+            <q-input
+              hide-bottom-space
+              dense
+              borderless
+              outlined
+              disable
+              class="bg-white"
+              type="textarea"
+              v-model="reson52"
+              lazy-rules
+              label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
+              :rules="[(val) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
+            />
           </div>
         </div>
       </div>
@@ -392,14 +540,31 @@ onMounted(() => {
       <div class="row col-12 q-gutter-lg q-mt-none">
         <div class="col-12 row">
           <div class="col-12 text-top2 row items-center">
-            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา 52
+            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา
+            52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="commander"
-              label="ชื่อ-นามสกุล" option-label="name" disable />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label="ชื่อ-นามสกุล"
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="chairman_dated" :locale="'th'" :readonly="!status" autoApply
-                borderless :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                :readonly="!status"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -407,10 +572,23 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="chairman_dated != null ? date2Thai(chairman_dated) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -426,11 +604,27 @@ onMounted(() => {
             <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined label="ชื่อ-นามสกุล" disable
-              :options="optionDirector" option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              label="ชื่อ-นามสกุล"
+              disable
+              :options="optionDirector"
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
-                :readonly="!status" :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :readonly="!status"
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -438,12 +632,25 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director1_dated != null
-                    ? date2Thai(director1_dated)
-                    : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -459,11 +666,27 @@ onMounted(() => {
             <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined label="ชื่อ-นามสกุล"
-              :options="optionDirector" disable option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              label="ชื่อ-นามสกุล"
+              :options="optionDirector"
+              disable
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply
-                :readonly="!status" borderless :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -471,12 +694,25 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director2_dated != null
-                    ? date2Thai(director2_dated)
-                    : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 32f98067f..33367fe6a 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -2,9 +2,15 @@
 import { ref, useAttrs, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useTransferDataStore } from "@/modules/05_placement/store"
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
-import type { FormMainProbation, FormMainProbation2,mapData,OpfillterType,CriteriaType } from "@/modules/05_placement/interface/request/Main";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+  mapData,
+  OpfillterType,
+  CriteriaType,
+} from "@/modules/05_placement/interface/request/Main";
 
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import router from "@/router";
@@ -18,7 +24,7 @@ const rows2 = ref<FormMainProbation2[]>([]);
 const modal = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
-const fillter = ref<number>(0);
+const fillter = ref<number | null>(0);
 const paging2 = ref<boolean>(true);
 const Opfillter = ref<OpfillterType[]>([{ id: 0, value: "ทั้งหมด" }]);
 const filterRef = ref<any>(null);
@@ -28,10 +34,10 @@ const probationlist = ref<any>([]);
 const filterKeyword = ref<string>("");
 const fillterStatus = ref<any>([]);
 const filterKeyword2 = ref<string>("");
-  
-const storeFn = useTransferDataStore()
+
+const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
-const { statusProbationMain } = storeFn
+const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 
 const pagination = ref({
@@ -205,6 +211,7 @@ const ProbationMainFilter = () => {
     }
   });
   Opfillter.value.sort((a: any, b: any) => a.id - b.id);
+  Opfillter2.value = Opfillter.value;
 };
 
 const updateRows = (body: any) => {
@@ -240,7 +247,7 @@ const getpersonalList = async () => {
       dataUpdate.value = rows.value;
       ProbationMainFilter();
     })
-    .catch(() => { })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -259,7 +266,7 @@ const fecthlistPersonal = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => { });
+    .finally(() => {});
 };
 const fecthlistProbation = async (id: string, data: any) => {
   try {
@@ -279,11 +286,11 @@ const fecthlistProbation = async (id: string, data: any) => {
 };
 
 const findlist = async (id: string) => {
-  let data:CriteriaType[] = [
+  let data: CriteriaType[] = [
     { criteriaType: "is_retire", criteriaValue: "false" },
     { criteriaType: "is_probation", criteriaValue: "true" },
   ];
-  let data2:CriteriaType[] = [
+  let data2: CriteriaType[] = [
     { criteriaType: "is_retire", criteriaValue: "false" },
     { criteriaType: "is_probation", criteriaValue: "false" },
   ];
@@ -336,7 +343,6 @@ const clickClose = async () => {
   modal.value = false;
 };
 
-
 const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
@@ -359,6 +365,22 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
 onMounted(async () => {
   getpersonalList();
 });
+
+const Opfillter2 = ref<any[]>([]);
+function filterFn(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      Opfillter2.value = Opfillter.value;
+      fillter.value = null;
+    });
+  } else {
+    update(() => {
+      Opfillter2.value = Opfillter.value.filter(
+        (e: any) => e.value.search(val) !== -1
+      );
+    });
+  }
+}
 </script>
 
 <template>
@@ -370,33 +392,103 @@ onMounted(async () => {
       <div class="row col-12 q-col-gutter-sm">
         <div class="col-6">
           <div class="row">
-            <q-select class="col-5 q-mr-sm" v-model="fillter" label="สถานะ" dense map-options option-label="value"
-              :options="Opfillter" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-              :outlined="true" :hide-dropdown-icon="false" @update:model-value="updateRows(fillter)" />
+            <q-select
+              class="col-5 q-mr-sm"
+              v-model="fillter"
+              label="สถานะ"
+              dense
+              map-options
+              option-label="value"
+              :options="Opfillter2"
+              option-value="id"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="updateRows(fillter)"
+              @filter="filterFn"
+              use-input
+              behavior="menu"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
             <div>
-              <q-btn @click="fecthlistPersonal" size="12px" flat round color="add" icon="mdi-plus">
+              <q-btn
+                @click="fecthlistPersonal"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
                 <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
               </q-btn>
             </div>
           </div>
         </div>
         <q-space />
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-          debounce="300" placeholder="ค้นหา">
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </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" options-cover style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2" />
+        <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"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
       </div>
       <div class="col-12">
-        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
-          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -405,8 +497,11 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
+            >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
@@ -418,8 +513,16 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -429,23 +532,55 @@ onMounted(async () => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
-            placeholder="ค้นหา">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
-              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel2"
-              v-model:pagination="pagination2">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel2"
+              v-model:pagination="pagination2"
+            >
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <span class="text-weight-medium">{{ col.label }}</span>
                   </q-th>
                   <q-th auto-width />
@@ -453,26 +588,50 @@ onMounted(async () => {
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
                     <div v-else-if="col.name == 'status'" class="text-center">
-                      <q-icon v-if="col.value === true" name="mdi-check" color="positive" size="sm" />
+                      <q-icon
+                        v-if="col.value === true"
+                        name="mdi-check"
+                        color="positive"
+                        size="sm"
+                      />
                     </div>
                     <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination v-model="pagination2.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+                <q-pagination
+                  v-model="pagination2.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
               </template>
             </q-table>
           </div>
diff --git a/src/modules/05_placement/interface/response/officer.ts b/src/modules/05_placement/interface/response/officer.ts
index 6118d4bd7..f48654670 100644
--- a/src/modules/05_placement/interface/response/officer.ts
+++ b/src/modules/05_placement/interface/response/officer.ts
@@ -19,6 +19,8 @@ interface officerType {
   isActive: boolean;
   dateEnd: string;
   dateStart: string;
+
+
 }
 interface ResponseData {
   data: {
@@ -43,6 +45,7 @@ interface ResponseData {
       positionNumberOld: string;
       organizationPositionOld: string;
       isActive: boolean;
+      dateRepatriation: Date
     };
   };
 }
@@ -72,8 +75,8 @@ interface resHelpDetail {
     };
   };
 }
-export type { 
+export type {
   officerType,
   ResponseData,
-  resHelpDetail 
+  resHelpDetail
 };
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 4241e1636..c303aa17e 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -109,6 +109,7 @@ export const usePlacementDataStore = defineStore("placement", () => {
     filter_3: boolean
   ) => {
     DataMainUpdate.value = [];
+
     if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1');
       // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
@@ -330,6 +331,6 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
     }
   };
   return {
-    statusText,statusProbationMain
+    statusText, statusProbationMain
   };
 });

From 0875ee189bac962f145bfa3532e5df3e6507d1b8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 28 Sep 2023 15:23:22 +0700
Subject: [PATCH 5/9] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20text?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20validate=20=E0=B8=9A=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AppointMent/Detail.vue         | 232 ++++++++++++++----
 .../05_placement/components/Other/Detail.vue  | 205 ++++++++++++----
 .../components/Receive/receiveDetail2.vue     |   5 +-
 .../components/Repatriate/RepatriatebyId.vue  |   6 +-
 .../components/Transfer/transferRegistry.vue  |  17 +-
 .../helpgovernment/governmentDetail.vue       | 197 +++++++++++----
 6 files changed, 503 insertions(+), 159 deletions(-)

diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index d17576708..79d39033d 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -1,11 +1,15 @@
-divdivdiv<script setup lang="ts">
+divdivdiv
+<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
-import type { appointmentData,ResponseData } from "@/modules/05_placement/interface/response/AppointMent";
+import type {
+  appointmentData,
+  ResponseData,
+} from "@/modules/05_placement/interface/response/AppointMent";
 import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,10 +20,10 @@ const router = useRouter();
 const mixin = useCounterMixin();
 
 const appointment = ref<appointmentData>({
-citizenId:"",
-prefixId:"",
-firstname:"",
-lastname:""
+  citizenId: "",
+  prefixId: "",
+  firstname: "",
+  lastname: "",
 });
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -52,7 +56,6 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 
-
 //เรียกข้อมูลตาม id
 const fecthappointmentByid = async () => {
   showLoader();
@@ -62,12 +65,14 @@ const fecthappointmentByid = async () => {
       const data = res.data.result;
       appointment.value = data;
       profileId.value = data.profileId;
-      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
+        data.lastname ?? "-"
+      }`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
       (status.value = data.status),
-      educationOld.value = data.educationOld ?? "-";
+        (educationOld.value = data.educationOld ?? "-");
       organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
@@ -131,10 +136,10 @@ const putAppointment = async () => {
     });
 };
 const cancel = () => {
-  edit.value = false
-  fecthappointmentByid()
-  myForm.value?.resetValidation()
-}
+  edit.value = false;
+  fecthappointmentByid();
+  myForm.value?.resetValidation();
+};
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -148,8 +153,16 @@ onMounted(async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" 
-      class="q-mr-sm" @click="router.push(`/appoint-promote`)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/appoint-promote`)"
+    />
     รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -158,8 +171,15 @@ onMounted(async () => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -204,14 +224,36 @@ onMounted(async () => {
       <q-space />
       <div v-if="status !== 'DONE' && status !== 'REPORT'">
         <div class="q-gutter-sm" v-if="!edit">
-          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
-          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
         </div>
         <div class="q-gutter-sm" v-else>
-          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
-            style="width: 80px" @click="clickSave" />
-          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px"
-            @click="cancel()" />
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="clickSave"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancel()"
+          />
         </div>
       </div>
     </div>
@@ -219,74 +261,146 @@ onMounted(async () => {
     <q-form ref="myForm">
       <div class="row col-12 q-pa-md">
         <div class="col-12">
-          <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
+          <div class="text-weight-bold">วุฒิการศึกษา</div>
         </div>
         <div class="col-12">
-          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
-          :borderless="!edit" v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
-          :label="`${'วุฒิการศึกษา'}`" type="text" />
+          <q-input
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="educationOld"
+            :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+            hide-bottom-space
+            :label="`${'วุฒิการศึกษา'}`"
+            type="text"
+          />
         </div>
       </div>
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row q-pa-md items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
 
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
 
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <CurrencyInput v-model="salary" label="เงินเดือน" :edit="edit" 
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
+              <CurrencyInput
+                v-model="salary"
+                label="เงินเดือน"
+                :edit="edit"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'"
-                autoApply :enableTimePicker="false" week-start="0" >
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
-                    :readonly="!edit" :model-value="date !== null ? date2Thai(date) : null" 
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :readonly="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`" >
+                    hide-bottom-space
+                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
-                        :style="edit? 'color: var(--q-primary)': 'color: var(--q-grey)' ">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -295,9 +409,19 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+             
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index 9a01409d2..3a50ad8d6 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -6,7 +6,10 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { ResponseDataDetail } from "@/modules/05_placement/interface/response/Transfer";
-import type { OtherdataInterface,resApiData } from "@/modules/05_placement/interface/response/OhterMain";
+import type {
+  OtherdataInterface,
+  resApiData,
+} from "@/modules/05_placement/interface/response/OhterMain";
 import type { QForm } from "quasar";
 
 import http from "@/plugins/http";
@@ -76,7 +79,7 @@ const fecthOther = async () => {
     .get(config.API.otherByid(paramsId.toString()))
     .then((res: resApiData) => {
       const data = res.data.result;
-      Otherdata.value = data
+      Otherdata.value = data;
       avatar.value = data.avatar ?? "";
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
@@ -85,19 +88,23 @@ const fecthOther = async () => {
       responseData.value.profileId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.id = data.id ?? "";
-      responseData.value.organizationPositionOld = data.organizationPositionOld ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
       responseData.value.positionLevelOld = data.positionLevelOld ?? "";
       responseData.value.positionNumberOld = data.positionNumberOld ?? "";
       responseData.value.positionTypeOld = data.positionTypeOld ?? "";
       responseData.value.reason = data.reason ?? "";
       responseData.value.status = data.status ?? "";
-      responseData.value.fullname = `${data.prefix ?? "-"}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      responseData.value.fullname = `${data.prefix ?? "-"}${
+        data.firstname ?? "-"
+      } ${data.lastname ?? "-"}`;
       organizationPositionOld.value = data.organizationPositionOld ?? "";
       positionTypeOld.value = data.positionTypeOld ?? "";
       positionLevelOld.value = data.positionLevelOld ?? "";
       posNo.value = data.positionNumberOld ?? "";
       salary.value = data.amountOld ?? "";
-      date.value = data.positionDate !== null ? new Date(data.positionDate) : null;
+      date.value =
+        data.positionDate !== null ? new Date(data.positionDate) : null;
       reason.value = data.reason ?? "";
     })
     .catch((e) => {
@@ -124,7 +131,7 @@ const clickEdit = async () => {
     });
   }
 };
- 
+
 //-----(update)-----//
 const saveOther = async () => {
   let data = {
@@ -155,7 +162,7 @@ const saveOther = async () => {
 const cancel = () => {
   edit.value = false;
   fecthOther();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
 };
 const getClass = (val: boolean) => {
   return {
@@ -172,8 +179,16 @@ onMounted(async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat 
-    color="primary" class="q-mr-sm" @click="router.push(`/other`)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/other`)"
+    />
     รายละเอียดรายการอื่นๆ {{ responseData.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -182,8 +197,15 @@ onMounted(async () => {
         {{ responseData.fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
-      label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${responseData.profileId}`)" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${responseData.profileId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -232,14 +254,36 @@ onMounted(async () => {
         "
       >
         <div class="q-gutter-sm" v-if="!edit">
-          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline"
-            class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
         </div>
         <div class="q-gutter-sm" v-else>
-          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
-            style="width: 80px" @click="clickEdit" />
-          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
-            style="width: 80px" @click="cancel()" />
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="clickEdit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancel()"
+          />
         </div>
       </div>
     </div>
@@ -249,60 +293,122 @@ onMounted(async () => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <CurruncyInput v-model="salary" label="เงินเดือน" :edit="edit"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
+              <CurruncyInput
+                v-model="salary"
+                label="เงินเดือน"
+                :edit="edit"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'"
-                autoApply :enableTimePicker="false" week-start="0" >
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input  :class="getClass(edit)" :outlined="edit" dense  lazy-rules  :readonly="!edit"
-                    :borderless="!edit" :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"  hide-bottom-space
-                    :label="`${'ตั้งแต่วัน'}`" >
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
-                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -311,9 +417,18 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index 150521964..46b86e0ea 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -901,7 +901,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-12">
-              <div class="text-weight-bold text-grey">
+              <div class="text-weight-bold">
                 ตำแหน่งและหน่วยงานเดิม
               </div>
             </div>
@@ -986,6 +986,8 @@ onMounted(async () => {
                   currency: 'THB',
                 }"
                 :label="`${'เงินเดือน'}`"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
               />
             </div>
             <div class="col-xs-12">
@@ -997,7 +999,6 @@ onMounted(async () => {
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="reason"
-                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
                 hide-bottom-space
                 :label="`${'หมายเหตุ '}`"
                 type="textarea"
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 046338d4f..bcc6e965a 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -257,9 +257,7 @@ onMounted(async () => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
             <div class="col-12">
               <q-input
@@ -332,6 +330,7 @@ onMounted(async () => {
                 :edit="edit"
                 :options="{ currency: 'THB' }"
                 :label="`${'เงินเดือน'}`"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
               />
             </div>
           </div>
@@ -459,7 +458,6 @@ onMounted(async () => {
               :readonly="!edit"
               :borderless="!edit"
               v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
               hide-bottom-space
               :label="`${'หมายเหตุ '}`"
               type="textarea"
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index d8a04f6f9..edad29719 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -13,7 +13,7 @@ import type { QTableProps, QForm } from "quasar";
 import type {
   TypeFile,
   ResponseDataDetail,
-  rowFile
+  rowFile,
 } from "@/modules/05_placement/interface/response/Transfer";
 
 const $q = useQuasar();
@@ -275,10 +275,10 @@ const saveData = async () => {
     });
 };
 const cancel = () => {
-  edit.value = false
-  getData()
-  myForm.value?.resetValidation()
-}
+  edit.value = false;
+  getData();
+  myForm.value?.resetValidation();
+};
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -537,9 +537,7 @@ onMounted(async () => {
           <div class="row bg-white q-col-gutter-y-md">
             <div class="col-xs-12 row items-center">
               <div class="col-12">
-                <div class="text-weight-bold text-grey">
-                  ตำแหน่งและหน่วยงานเดิม
-                </div>
+                <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
               </div>
               <div class="col-12">
                 <q-input
@@ -609,6 +607,8 @@ onMounted(async () => {
                       currency: 'THB',
                     }"
                     :label="`${'เงินเดือน'}`"
+                    :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    lazy-rules
                   />
                 </div>
               </div>
@@ -687,7 +687,6 @@ onMounted(async () => {
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="reason"
-                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
                 hide-bottom-space
                 :label="`${'หมายเหตุ '}`"
                 type="textarea"
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 22546fcf8..b58e63ee5 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -23,7 +23,6 @@ const {
   success,
 } = mixin;
 
-
 const myForm = ref<QForm | null>(null);
 const fullname = ref<string>("");
 const id = ref<string>("");
@@ -75,8 +74,7 @@ const getData = async () => {
       positionNumberOld.value = data.positionNumberOld;
       organizationPositionOld.value = data.organizationPositionOld;
     })
-    .catch((e) => {
-    })
+    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -106,7 +104,7 @@ const conditionSave = async () => {
 const cancelBtn = () => {
   edit.value = !edit;
   getData();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
 };
 const saveData = async () => {
   const body = {
@@ -143,16 +141,31 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary"
-      class="q-mr-sm" @click="router.push(`/help-government`)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/help-government`)"
+    />
     รายละเอียดการช่วยราชการ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
-      label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -196,15 +209,37 @@ onMounted(async () => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
-          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit"
-          v-if="!(status == 'REPORT' || status == 'DONE')" />
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+          v-if="!(status == 'REPORT' || status == 'DONE')"
+        />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px"
-          @click="conditionSave" />
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
-          style="width: 80px" @click="cancelBtn" />
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="cancelBtn"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -213,40 +248,81 @@ onMounted(async () => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
-              :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-              hide-bottom-space :label="`${'ตำแหน่ง'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง'}`"
+                type="textarea"
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-4 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-4 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateStart" :locale="'th'"
-                autoApply :enableTimePicker="false" week-start="0" >
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :class="getClass(edit)" :outlined="edit" dense :readonly="!edit"
-                    lazy-rules :borderless="!edit" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    :model-value=" dateStart !== null ? date2Thai(dateStart) : null "
-                    hide-bottom-space :label="`${'ตั้งแต่วัน'}`" >
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    :readonly="!edit"
+                    lazy-rules
+                    :borderless="!edit"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    :model-value="
+                      dateStart !== null ? date2Thai(dateStart) : null
+                    "
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
-                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -254,21 +330,43 @@ onMounted(async () => {
               </datepicker>
             </div>
           </div>
-          <div class="col-xs-6 col-sm-4 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateEnd" :locale="'th'"
-                autoApply :enableTimePicker="false" week-start="0" >
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :readonly="!edit" :class="getClass(edit)" :outlined="edit" dense
-                    lazy-rules :borderless="!edit" :model-value="dateEnd !== null ? date2Thai(dateEnd) : null" 
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ถึงวันที่'}`" >
+                  <q-input
+                    :readonly="!edit"
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ถึงวันที่'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
-                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' "
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
                       >
                       </q-icon>
                     </template>
@@ -278,9 +376,18 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
-              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>

From e874861a25cff41b09598701613cb6b29fa13085 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 28 Sep 2023 15:54:11 +0700
Subject: [PATCH 6/9] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20filter=20=E0=B9=83=E0=B8=99=20selecter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-พ้นราชการ
-ออกคำสั่ง
---
 src/modules/06_retirement/views/Main.vue | 26 ++++++-
 src/modules/10_order/views/Main.vue      | 95 ++++++++++++++++++++++--
 2 files changed, 111 insertions(+), 10 deletions(-)

diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 9389811b0..435fffc7f 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -21,6 +21,9 @@ const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 
 const fiscalyear = ref<number>();
+const yearOptionsFilter = ref<any>({
+  yearOptions: [],
+});
 const actionOption = ref<resMain[]>([]);
 
 const visibleColumns = ref<string[]>([
@@ -69,15 +72,19 @@ const columns = ref<QTableProps["columns"]>([
 // ข้อมูลตาราง (จำลอง)
 const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
-const yearOptions = reactive<any[]>([]);
+const yearOptions = ref<any[]>([]);
 
 onMounted(() => {
   filteryear();
 });
 // หาปีปัจจุบัน
 const filteryear = () => {
-  yearOptions.push({ id: currentYear, name: currentYear + 543 });
-  fiscalyear.value = yearOptions[0].id;
+  yearOptions.value = [{ id: currentYear, name: currentYear + 543 }];
+  yearOptions.value.push({ id: currentYear, name: currentYear + 543 });
+  //   fiscalyear.value = yearOptions[0].id;
+
+  yearOptionsFilter.value = [{ id: currentYear, name: currentYear + 543 }];
+  yearOptionsFilter.value.push({ id: currentYear, name: currentYear + 543 });
   fetchRetirement(type.value, currentYear);
 };
 // ประกาศเกษียณอายุราชการ
@@ -136,6 +143,15 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+const filterSelector = (val: any, update: Function, year: any) => {
+  update(() => {
+    yearOptions.value = yearOptionsFilter.value.filter(
+      (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+    );
+  });
+};
+
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -209,8 +225,12 @@ const typeReportChangeName = (val: string) => {
                 :readonly="false"
                 :borderless="false"
                 :outlined="true"
+                use-input
                 :hide-dropdown-icon="false"
                 style="min-width: 150px"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'yearOptions'
+                      ) "
               />
               <div>
                 <popupAdd
diff --git a/src/modules/10_order/views/Main.vue b/src/modules/10_order/views/Main.vue
index 0ac1cc853..f0b9bd7ff 100644
--- a/src/modules/10_order/views/Main.vue
+++ b/src/modules/10_order/views/Main.vue
@@ -18,6 +18,15 @@ const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const DataStore = useOrderPlacementDataStore();
 
+const OpsFilterYear = ref<any>({
+  fiscalyearOP: [],
+});
+const OpsFilterOrderType = ref<any>({
+  OrderTypeOption: [],
+});
+const OpsFilterOrderStatus = ref<any>({
+  OrderStatusOption: [],
+});
 const pagination = ref({
   descending: true,
   page: 1,
@@ -144,6 +153,16 @@ const OriginalDataFetch = async () => {
         OrderType: e.orderTypeName,
         orderTypeValue: e.orderTypeValue,
       }));
+      //   OpsFilterYear.value.fiscalYear = res.data.result.map((e: any) => ({
+      //     fiscalYear: Number(e.fiscalYear),
+      //   }));
+      OpsFilterOrderStatus.value.OrderStatus = res.data.result.map(
+        (e: any) => ({
+          OrderStatus: e.orderStatusName,
+        })
+      );
+      console.log(fiscalyear.value);
+      console.log(OrderStatus.value);
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -180,26 +199,40 @@ const redirectToPage = (id?: string, status?: string) => {
 const clickAdd = () => {
   router.push({ name: "OrderAdd" });
 };
+const Ops = ref<any>({
+  fiscalyearOP: [],
+});
 
 // รายการข้อมูลปีงบประมาณ
 const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyearOP = ref<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyearFilter1 = ref<any>([]);
 const fiscalYearFilter = async () => {
   await http.get(config.API.yearOptionsOrder()).then((res) => {
     const response = res.data.result;
-    fiscalyearOP.push(...response);
+    fiscalyearOP.value = [{ id: 0, name: "ทั้งหมด" }];
+    fiscalyearOP.value.push(...response);
+
+    fiscalyearFilter1.value = [{ id: 0, name: "ทั้งหมด" }];
+    fiscalyearFilter1.value.push(...response);
   });
 };
 
 // รายการข้อมูลประเภทคำสั่ง
 const OrderType = ref<string>("");
-const OrderTypeOption = reactive<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
+const OrderTypeFilter1 = ref<any>([]);
+const OrderTypeOption = ref<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
+
 const OrderTypeFilter = async () => {
   await http
     .get(config.API.typeOrder())
     .then((res) => {
       const response = res.data.result;
-      OrderTypeOption.push(...response);
+      OrderTypeOption.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeOption.value.push(...response);
+
+      OrderTypeFilter1.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeFilter1.value.push(...response);
     })
     .catch((e) => {
       messageError($q, e);
@@ -208,9 +241,10 @@ const OrderTypeFilter = async () => {
 
 // รายการข้อมูลสถานะคำสั่ง
 const OrderStatus = ref<string>("ทั้งหมด");
-const OrderStatusOption = reactive<DataOption1[]>([
+const OrderStatusOption = ref<DataOption1[]>([
   { id: "ทั้งหมด", name: "ทั้งหมด" },
 ]);
+const OrderStatusFilter1 = ref<any>([]);
 const addedOrderStatusValues: string[] = [];
 const OrderStatusFilter = async () => {
   for (let data of OriginalData.value) {
@@ -224,9 +258,16 @@ const OrderStatusFilter = async () => {
     }
 
     if (!addedOrderStatusValues.includes(OrderStatusValue)) {
-      OrderStatusOption.push({
+      OrderStatusOption.value = [{ id: "ทั้งหมด", name: "ทั้งหมด" }];
+      OrderStatusOption.value.push({
         // id: OrderStatusValue,
-        id: OrderStatusOption.length.toString(),
+        id: OrderStatusOption.value.length.toString(),
+        name: OrderStatusValue,
+      });
+      OrderStatusFilter1.value = [{ id: "ทั้งหมด", name: "ทั้งหมด" }];
+      OrderStatusFilter1.value.push({
+        // id: OrderStatusValue,
+        id: OrderStatusFilter1.value.length.toString(),
         name: OrderStatusValue,
       });
       addedOrderStatusValues.push(OrderStatusValue);
@@ -254,6 +295,34 @@ const searchFilterTable = async () => {
   UpdataData.value = DataStore.DataMainUpdateOrder;
 };
 
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "fiscalyearOP":
+      update(() => {
+        fiscalyearOP.value = fiscalyearFilter1.value.filter(
+          (v: any) => v.name.valueOf(val) > -1
+        );
+      });
+      break;
+    case "OrderTypeOption":
+      update(() => {
+        OrderTypeOption.value = OrderTypeFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "OrderStatusOption":
+      update(() => {
+        OrderStatusOption.value = OrderStatusFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
 const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
@@ -278,12 +347,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
             option-value="id"
             option-label="name"
             lazy-rules
+            use-input
             hide-bottom-space
             :readonly="false"
             :borderless="false"
             :outlined="true"
             :hide-dropdown-icon="false"
             @update:model-value="searchFilterTable"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
+                      ) "
           />
           <div>
             <q-btn
@@ -350,12 +423,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   :options="OrderTypeOption"
                   option-value="id"
                   lazy-rules
+                  use-input
                   hide-bottom-space
                   :readonly="false"
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
                   @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
+                    ) "
                 />
               </div>
               <div class="col-xs-12 col-sm-3 col-md-3">
@@ -369,12 +446,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   :options="OrderStatusOption"
                   option-value="name"
                   lazy-rules
+                  use-input
                   hide-bottom-space
                   :readonly="false"
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
                   @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'OrderStatusOption'
+                      ) "
                 />
               </div>
               <q-space />

From bd700750865e04035a5aebca1ec4af631b9bd3e4 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 28 Sep 2023 16:01:45 +0700
Subject: [PATCH 7/9] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B4=E0=B8=A1?=
 =?UTF-8?q?=20text=20=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B9=80=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=84=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Discharged/dischargedRegistry.vue             | 5 +----
 .../06_retirement/components/DismissOrder/outRegistry.vue    | 5 +----
 .../06_retirement/components/Expulsion/expulsionRegistry.vue | 5 +----
 3 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
index 53648002f..fd6bb90be 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@@ -281,9 +281,7 @@ const getClass = (val: boolean) => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
             <div class="col-12">
               <q-input
@@ -432,7 +430,6 @@ const getClass = (val: boolean) => {
               :readonly="!edit"
               :borderless="!edit"
               v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
               hide-bottom-space
               :label="`${'หมายเหตุ '}`"
               type="textarea"
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index 04a432054..43839ae3c 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -283,9 +283,7 @@ const getClass = (val: boolean) => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
             <div class="col-12">
               <q-input
@@ -434,7 +432,6 @@ const getClass = (val: boolean) => {
               :readonly="!edit"
               :borderless="!edit"
               v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
               hide-bottom-space
               :label="`${'หมายเหตุ '}`"
               type="textarea"
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index 68da50b67..243d60ab5 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -283,9 +283,7 @@ const getClass = (val: boolean) => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
             <div class="col-12">
               <q-input
@@ -448,7 +446,6 @@ const getClass = (val: boolean) => {
               :readonly="!edit"
               :borderless="!edit"
               v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
               hide-bottom-space
               :label="`${'หมายเหตุ '}`"
               type="textarea"

From 83ceefe10bc72e25201e7b001b1bb79bd6b92385 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 28 Sep 2023 16:11:23 +0700
Subject: [PATCH 8/9] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=84=20type=20=E0=B9=84=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_retirement/views/Main.vue | 4 ++--
 src/modules/10_order/views/Main.vue      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 435fffc7f..ee3a43109 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -147,7 +147,7 @@ const pagination = ref({
 const filterSelector = (val: any, update: Function, year: any) => {
   update(() => {
     yearOptions.value = yearOptionsFilter.value.filter(
-      (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+      (v: any) => v.name.valueOf(val.toLowerCase()) > -1
     );
   });
 };
@@ -225,13 +225,13 @@ const typeReportChangeName = (val: string) => {
                 :readonly="false"
                 :borderless="false"
                 :outlined="true"
-                use-input
                 :hide-dropdown-icon="false"
                 style="min-width: 150px"
                 @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'yearOptions'
                       ) "
               />
+              <!-- use-input -->
               <div>
                 <popupAdd
                   :type="useStoreRetire.type"
diff --git a/src/modules/10_order/views/Main.vue b/src/modules/10_order/views/Main.vue
index f0b9bd7ff..275398d09 100644
--- a/src/modules/10_order/views/Main.vue
+++ b/src/modules/10_order/views/Main.vue
@@ -347,7 +347,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
             option-value="id"
             option-label="name"
             lazy-rules
-            use-input
             hide-bottom-space
             :readonly="false"
             :borderless="false"
@@ -358,6 +357,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                       doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
                       ) "
           />
+          <!-- use-input -->
           <div>
             <q-btn
               size="12px"

From 034ed279e4260964879bd158704f884c47c5a764 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 28 Sep 2023 16:27:03 +0700
Subject: [PATCH 9/9] =?UTF-8?q?filter=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B9=81?=
 =?UTF-8?q?=E0=B8=82=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=B1=E0=B8=99=20/=20?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B1=E0=B8=94=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/Main.vue | 34 ++++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 27332bb0d..af79afc85 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -168,6 +168,7 @@ const fetchYearOptions = async () => {
       }, "");
       searchYear.value = maxNumber;
       DataStore.DataMainYearSet(searchYear.value);
+      yearOptionsFn.value = yearOptions;
       searchYear.value && fetchPlacementData(searchYear.value);
     })
     .catch((e) => {
@@ -175,7 +176,9 @@ const fetchYearOptions = async () => {
     });
 };
 const filterYear = () => {
-  fetchPlacementData(searchYear.value);
+  if (searchYear.value !== null) {
+    fetchPlacementData(searchYear.value);
+  }
 };
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
@@ -283,7 +286,6 @@ function filterFnexamTime(val: string, update: any) {
   if (val === "") {
     update(() => {
       examTimeOP2.value = examTimeOP;
-      examTime.value = "";
     });
   } else {
     update(() => {
@@ -298,7 +300,6 @@ function filterFnExamtype(val: string, update: any) {
   if (val === "") {
     update(() => {
       examTypeOP2.value = examTypeOP.value;
-      examType.value = "";
     });
   } else {
     update(() => {
@@ -308,6 +309,20 @@ function filterFnExamtype(val: string, update: any) {
     });
   }
 }
+const yearOptionsFn = ref<any>([]);
+function filterFnYear(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      yearOptionsFn.value = yearOptions;
+    });
+  } else {
+    update(() => {
+      yearOptionsFn.value = yearOptions.filter(
+        (e: any) => e.name.toString().search(val) !== -1
+      );
+    });
+  }
+}
 </script>
 
 <template>
@@ -324,7 +339,7 @@ function filterFnExamtype(val: string, update: any) {
           dense
           emit-value
           map-options
-          :options="yearOptions"
+          :options="yearOptionsFn"
           option-value="id"
           option-label="name"
           lazy-rules
@@ -334,7 +349,14 @@ function filterFnExamtype(val: string, update: any) {
           :outlined="true"
           :hide-dropdown-icon="false"
           @update:model-value="filterYear"
-        />
+          use-input
+          @filter="filterFnYear"
+          ><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
           class="col-xs-12 col-sm-3 col-md-2"
@@ -394,7 +416,6 @@ function filterFnExamtype(val: string, update: any) {
               @filter="filterFnexamTime"
               use-input
               input-debounce="0"
-              behavior="menu"
               ><template v-slot:no-option>
                 <q-item>
                   <q-item-section class="text-grey">
@@ -422,7 +443,6 @@ function filterFnExamtype(val: string, update: any) {
               @update:model-value="searchFilterTable"
               @filter="filterFnExamtype"
               use-input
-              behavior="menu"
             >
               <template v-slot:no-option>
                 <q-item>