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
   };
 });