diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 4202eb376..eeebdbda2 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -60,6 +60,10 @@ const position = ref<string>("");
 
 const monthSelect = ref<any>();
 
+const optionCaretaker2 = ref<any>([]);
+const OPcommanderFn = ref<any>([]);
+const OPchairmanFn = ref<any>([]);
+const optionCaretaker = ref<any>([]);
 const caretaker1 = ref<any>("");
 const caretaker2 = ref<any>("");
 const productivityCount = ref<number>(1);
@@ -70,6 +74,18 @@ const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const checkRule = ref<CheckboxItem[]>([]);
 
+const isDatePicker2Readonly = computed(() => {
+  return date_start.value === undefined;
+});
+const activityArray = computed(() => {
+  return Array(activityCount.value).fill("");
+});
+const knowledgeArray = computed(() => {
+  return Array(knowledgeCount.value).fill("");
+});
+const ProductivityArray = computed(() => {
+  return Array(productivityCount.value).fill("");
+});
 const OPmain = ref<
   Array<{ id: number; title: string; description: string; level: number }>
 >([]);
@@ -131,7 +147,22 @@ const OPchairman = ref<
   }>[]
 >([]);
 
-const dataEdit = async (id: string) => {
+interface MonthOption {
+  value: number;
+  label: string;
+}
+interface CheckboxItem {
+  id: number;
+  parent_id: number;
+  description: string;
+  status_select: number;
+  checked: number;
+}
+/**
+ * update edit
+ * @param id personal id
+ */
+async function dataEdit(id: string) {
   await myForm.value.validate().then((result: boolean) => {
     if (result) {
       showLoader();
@@ -149,106 +180,127 @@ const dataEdit = async (id: string) => {
       dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
-};
-const saveEdit = (id: string) => {
-  dialogConfirm($q, async () => await dataEdit(id));
-};
-const edit = () => {
-  status.value = true;
-};
-const cancel = () => {
-  status.value = false;
-  getAssign();
-};
-
-const filterData = (options: any[], excludedGroups: any[]) => {
-  return options.filter(
-    (item) => !excludedGroups.some((group) => group && group.id === item.id)
-  );
-};
-const filtermantor = (options: any[], excludedGroups: any[]) => {
-  return options.filter(
-    (item) => !excludedGroups.some((group) => group && group.id === item.id)
-  );
-};
-const filterMain = (options: any[], excludedGroups: any[]) => {
-  return options.filter(
-    (item) => !excludedGroups.some((group) => group && group.id === item.id)
-  );
-};
-
-const clearDateExam = () => {
-  date_start.value = undefined;
-};
-const clearDateExam2 = () => {
-  date_finish.value = undefined;
-};
-const isDatePicker2Readonly = computed(() => {
-  return date_start.value === undefined;
-});
-
-interface MonthOption {
-  value: number;
-  label: string;
 }
 
-//-----------------(3.1)-----------//
+/**
+ * pop up confirm
+ * @param id personal id
+ */
+function saveEdit(id: string) {
+  dialogConfirm($q, async () => await dataEdit(id));
+}
 
-const addActivity = () => {
+/** open dialog */
+function edit() {
+  status.value = true;
+}
+
+/** close dialog */
+function cancel() {
+  status.value = false;
+  getAssign();
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filterData(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filtermantor(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filterMain(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/** reset ค่าวันที่เริ่ม */
+function clearDateExam() {
+  date_start.value = undefined;
+}
+
+/** reset ค่าวันที่สิ้นสุด */
+function clearDateExam2() {
+  date_finish.value = undefined;
+}
+
+/** เพิ่ม ผลการปฏิบัติงาน*/
+function addActivity() {
   activityCount.value++;
-};
-const deleteactivity = (item: number) => {
+}
+
+/**
+ * ลบ ผลการปฏิบัติงาน
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteactivity(item: number) {
   activity_desc.value.splice(item, 1);
   goal_desc.value.splice(item, 1);
   if (activityCount.value > 2) {
     activityCount.value--;
   }
-};
-const activityArray = computed(() => {
-  return Array(activityCount.value).fill("");
-});
+}
 
-//-----------------(3.2)-----------//
-
-const addKnowledge = () => {
+/** เพิ่มความรู้ความสามารถ โดย สูงสุดที่ 6 item */
+function addKnowledge() {
   if (knowledgeCount.value < 6) {
     knowledgeCount.value++;
   }
-};
+}
 
-const knowledgeArray = computed(() => {
-  return Array(knowledgeCount.value).fill("");
-});
-
-const deleteknowledge = (item: number) => {
+/**
+ * ลบ ความรู้ความสามารถ
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteknowledge(item: number) {
   knowledge.value.splice(item, 1);
   if (knowledgeCount.value > 3) {
     knowledgeCount.value--;
   }
-};
+}
 
-const deleteProductivitys = (item: number) => {
+/** เพิ่ม ผลผลิตของงาน*/
+function addProductivity() {
+  productivityCount.value++;
+}
+
+/**
+ * ลบ ผลผลิตของงาน
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteProductivitys(item: number) {
   output_desc.value.splice(item, 1);
   indicator_desc.value.splice(item, 1);
   if (productivityCount.value > 1) {
     productivityCount.value--;
   }
-};
-const addProductivity = () => {
-  productivityCount.value++;
-};
-const ProductivityArray = computed(() => {
-  return Array(productivityCount.value).fill("");
-});
-interface CheckboxItem {
-  id: number;
-  parent_id: number;
-  description: string;
-  status_select: number;
-  checked: number;
 }
 
-const getUser = async () => {
+/** get ข้อมูล */
+async function getUser() {
   await http.get(config.API.userPlacement(personalId)).then((res: any) => {
     const data = res.data.result;
     OPcaretaker.value = data.caregiver.map((item: any) => ({
@@ -305,8 +357,13 @@ const getUser = async () => {
       position: item.position,
     }));
   });
-};
-const getAssignNew = async (id: string) => {
+}
+
+/**
+ *ดึงข้อมูลที่ได้รับมอบหมาย
+ * @param id personal id
+ */
+async function getAssignNew(id: string) {
   await http.get(config.API.newAssign(id)).then((res: any) => {
     const data = res.data.data;
     const monthOption = {
@@ -318,8 +375,13 @@ const getAssignNew = async (id: string) => {
     fullname.value = data.person.name;
     position.value = data.person.Position;
   });
-};
-const getcompetency = async (id: string) => {
+}
+
+/**
+ * get ข้อมูล สมรรถนะหลัก
+ * @param id personal id
+ */
+async function getcompetency(id: string) {
   await http.get(config.API.competencyOptions(id)).then((res: any) => {
     const data = res.data.data;
     OPmain.value = data;
@@ -329,8 +391,13 @@ const getcompetency = async (id: string) => {
     main4.value = data[3];
     main5.value = data[4];
   });
-};
-const getCompetencyGroup = async (id: string) => {
+}
+
+/**
+ * get ข้อมูล สมรรถนะประจํากลุ่มงาน
+ * @param id personal id
+ */
+async function getCompetencyGroup(id: string) {
   await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
     const data = res.data.data;
     OPgroup.value = data;
@@ -338,13 +405,23 @@ const getCompetencyGroup = async (id: string) => {
     group2.value = data[1];
     group3.value = data[2];
   });
-};
-const getKnowledge = async (id: string) => {
+}
+
+/**
+ * get ข้อมูล ความรู้ความสามารถในการปฏิบัติงาน
+ * @param id personal id
+ */
+async function getKnowledge(id: string) {
   await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
     OPknowledge.value = res.data.data;
   });
-};
-const getSkill = async (id: string) => {
+}
+
+/**
+ * get ข้อมูล ทักษะ
+ * @param id personal id
+ */
+async function getSkill(id: string) {
   await http.get(config.API.skillOptions(id)).then((res: any) => {
     const skillData = res.data.data;
     OPcomputer.value = [skillData.computer];
@@ -356,13 +433,20 @@ const getSkill = async (id: string) => {
     skill3.value = skillData.information;
     skill4.value = skillData.resourse;
   });
-};
-const getLaw = async (id: string) => {
+}
+
+/**
+ * get ข้อมูล ความรู้เรื่องกฎหมายและกฎระเบียบ
+ * @param id personal id
+ */
+async function getLaw(id: string) {
   await http.get(config.API.lawOptions(id)).then((res: any) => {
     checkRule.value = res.data.data;
   });
-};
-const postDateTime = async () => {
+}
+
+/** ฟังชั่นส่ง วันที่ไปคำนวณ */
+async function postDateTime() {
   await http
     .post(config.API.calculateDate(), {
       month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
@@ -376,8 +460,12 @@ const postDateTime = async () => {
     .finally(async () => {
       hideLoader();
     });
-};
-const putDataEdit = (id: string) => {
+}
+
+/** ฟังชั่น อัพเดต ข้อมูลที่จะส่ง
+ * @param id personal
+ */
+function putDataEdit(id: string) {
   const GUID = personalId;
   const assign_job = activityArray.value.map((item, index) => {
     const activityDesc = activity_desc.value[index]?.trim();
@@ -506,9 +594,12 @@ const putDataEdit = (id: string) => {
       })),
   };
   return data;
-};
+}
 
-const putData = (id: string) => {
+/** ฟังชั่น สร้างข้อมูลที่จะส่ง
+ * @param id personal
+ */
+function putData(id: string) {
   const GUID = personalId;
   const assign_job = activityArray.value.map((item, index) => {
     const activityDesc = activity_desc.value[index]?.trim();
@@ -628,9 +719,13 @@ const putData = (id: string) => {
       })),
   };
   return data;
-};
+}
 
-const saveData = async (id: string) => {
+/**
+ * เช็คข้อมูลก่อนบันทึก
+ * @param id personal id
+ */
+async function saveData(id: string) {
   await myForm.value.validate().then((result: boolean) => {
     if (result) {
       dialogConfirm($q, async () => await DataSave(id));
@@ -638,9 +733,13 @@ const saveData = async (id: string) => {
       dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
-};
+}
 
-const DataSave = async (id: string) => {
+/**
+ * บันทึก
+ * @param id personal id
+ */
+async function DataSave(id: string) {
   const data = putData(id);
   await http
     .post(config.API.saveFinish(id), data)
@@ -654,9 +753,10 @@ const DataSave = async (id: string) => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const getAssign = async () => {
+/** get ข้อมูลรายการมอบหมาย */
+async function getAssign() {
   await http.get(config.API.probationsGetAssign(assignId.value)).then((res) => {
     status.value = false;
     const data = res.data.data;
@@ -718,8 +818,14 @@ const getAssign = async () => {
       status_select: law.status_select,
     }));
   });
-};
-const downloadFile = (response: any, filename: string) => {
+}
+
+/**
+ * download file
+ * @param response ไฟล์
+ * @param filename ชื่อไฟล์
+ */
+function downloadFile(response: any, filename: string) {
   const link = document.createElement("a");
   var fileName = filename;
   link.href = window.URL.createObjectURL(new Blob([response.data]));
@@ -727,9 +833,13 @@ const downloadFile = (response: any, filename: string) => {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-};
+}
 
-const clickdownloadFile = async (type: string) => {
+/**
+ * download file
+ * @param type type file
+ */
+async function clickdownloadFile(type: string) {
   showLoader();
   await http
     .get(config.API.reportAssign(type, assignId.value), {
@@ -747,8 +857,9 @@ const clickdownloadFile = async (type: string) => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
+/** เช็ค จำนวนเดือน เเละ วันที่เริ่ม ไม่เท่ากับ undefined*/
 watch(
   () => [monthSelect.value, date_start.value],
   () => {
@@ -757,24 +868,19 @@ watch(
     }
   }
 );
+
+/** เช็ค ความรู้ทักษะ ไม่สามารถเลือก หัวข้อซ้ำ */
 watch(knowledge.value, () => {
   knowledge.value.forEach((item) => {
     OPknowledge.value = OPknowledge.value.filter((e) => e.id != item.id);
   });
 });
-onMounted(async () => {
-  await getUser();
-  await getLaw(personalId);
-  await getcompetency(personalId);
-  await getCompetencyGroup(personalId);
-  await getSkill(personalId);
-  await getKnowledge(personalId);
-  await getAssignNew(personalId);
-  if (assignId.value !== undefined) {
-    await getAssign();
-  }
-});
-const optionCaretaker = ref<any>([]);
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
 function filterFnCaretaker(val: string, update: any) {
   if (val == "") {
     update(() => {
@@ -790,7 +896,13 @@ function filterFnCaretaker(val: string, update: any) {
     });
   }
 }
-const optionCaretaker2 = ref<any>([]);
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
 function filterFnCaretaker2(val: string, update: any) {
   if (val == "") {
     update(() => {
@@ -806,7 +918,13 @@ function filterFnCaretaker2(val: string, update: any) {
     });
   }
 }
-const OPcommanderFn = ref<any>([]);
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
 function filterFnCommander(val: string, update: any) {
   if (val == "") {
     update(() => {
@@ -820,7 +938,13 @@ function filterFnCommander(val: string, update: any) {
     });
   }
 }
-const OPchairmanFn = ref<any>([]);
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
 function filterFnChairman(val: string, update: any) {
   if (val == "") {
     update(() => {
@@ -834,6 +958,20 @@ function filterFnChairman(val: string, update: any) {
     });
   }
 }
+
+/** เมื่อโหลดหน้า เรียกใช้งานฟังชั่น */
+onMounted(async () => {
+  await getUser();
+  await getLaw(personalId);
+  await getcompetency(personalId);
+  await getCompetencyGroup(personalId);
+  await getSkill(personalId);
+  await getKnowledge(personalId);
+  await getAssignNew(personalId);
+  if (assignId.value !== undefined) {
+    await getAssign();
+  }
+});
 </script>
 
 <template>
@@ -851,6 +989,7 @@ function filterFnChairman(val: string, update: any) {
           @click="router.go(-1)"
           v-if="routeName == 'probationWorkAdd'"
         />
+
         <div v-if="routeName == 'probationWorkAdd'">
           เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
         </div>
@@ -903,6 +1042,7 @@ function filterFnChairman(val: string, update: any) {
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
           </div>
+
           <div v-else>
             <q-btn
               dense
@@ -914,6 +1054,7 @@ function filterFnChairman(val: string, update: any) {
             >
               <q-tooltip>ยกเลิก</q-tooltip>
             </q-btn>
+
             <q-btn
               dense
               flat
@@ -928,6 +1069,7 @@ function filterFnChairman(val: string, update: any) {
           </div>
         </div>
       </div>
+
       <div class="col-12 text-dark">
         <div class="row col-12">
           <div class="row col-12 q-gutter-lg">
@@ -938,6 +1080,7 @@ function filterFnChairman(val: string, update: any) {
               </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
@@ -948,8 +1091,10 @@ function filterFnChairman(val: string, update: any) {
                     v-model="fullname"
                     label="ชื่อ-สกุล"
                   />
+
                 </div>
                 <div class="col-xs-12 col-sm-6">
+
                   <q-input
                     :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
                     hide-bottom-space
@@ -960,6 +1105,7 @@ function filterFnChairman(val: string, update: any) {
                     v-model="position"
                     label="ตำแหน่ง"
                   />
+
                 </div>
                 <div class="col-12 row">
                   <div class="col-12 text-top0 items-center">
@@ -981,6 +1127,7 @@ function filterFnChairman(val: string, update: any) {
                         v-model="monthSelect"
                         :label="`ระยะเวลา (เดือน)`"
                       />
+
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
@@ -1020,6 +1167,7 @@ function filterFnChairman(val: string, update: any) {
                           </q-input>
                         </template>
                       </datepicker>
+
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
@@ -1058,6 +1206,7 @@ function filterFnChairman(val: string, update: any) {
                           </q-input>
                         </template>
                       </datepicker>
+
                     </div>
                   </div>
                 </div>
@@ -1095,8 +1244,9 @@ function filterFnChairman(val: string, update: any) {
                         ไม่มีข้อมูล
                       </q-item-section>
                     </q-item>
-                  </template></q-select
-                >
+                  </template>
+                  </q-select>
+
                 <q-select
                   clearable
                   :options="optionCaretaker2"
@@ -1123,6 +1273,7 @@ function filterFnChairman(val: string, update: any) {
                   </template>
                 </q-select>
               </div>
+
               <div v-else class="col-12 row q-col-gutter-md">
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
@@ -1138,6 +1289,7 @@ function filterFnChairman(val: string, update: any) {
                   :label="`ผู้ดูแลคนที่ 1`"
                   option-label="name"
                 />
+
                 <q-select
                   clearable
                   :options="filtermantor(OPcaretaker, [caretaker1])"
@@ -1152,6 +1304,7 @@ function filterFnChairman(val: string, update: any) {
                   v-model="caretaker2"
                   :label="`ผู้ดูแลคนที่ 2`"
                 />
+
               </div>
             </div>
             <div class="col-12">
@@ -1176,6 +1329,7 @@ function filterFnChairman(val: string, update: any) {
                   class="q-ml-sm"
                   @click="addActivity"
                 />
+
               </div>
               <div class="col-12 row q-gutter-sm">
                 <q-card
@@ -1187,6 +1341,7 @@ function filterFnChairman(val: string, update: any) {
                 >
                   <div class="col-12 row q-col-gutter-sm">
                     <div class="col-xs-12 col-sm-6">
+
                       <q-input
                         :rules="
                           index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
@@ -1201,8 +1356,10 @@ function filterFnChairman(val: string, update: any) {
                         v-model="activity_desc[index]"
                         label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                       />
+
                     </div>
                     <div class="col-xs-12 col-sm-5">
+
                       <q-input
                         :rules="
                           index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
@@ -1217,12 +1374,14 @@ function filterFnChairman(val: string, update: any) {
                         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
@@ -1231,6 +1390,7 @@ function filterFnChairman(val: string, update: any) {
                         @click="deleteactivity(index)"
                         v-if="status == true"
                       />
+
                     </div>
                   </div>
                 </q-card>
@@ -1257,6 +1417,7 @@ function filterFnChairman(val: string, update: any) {
                         class="q-ml-sm"
                         @click="addKnowledge"
                       />
+
                     </div>
                     <div
                       v-for="(item, index) in knowledgeArray"
@@ -1264,6 +1425,7 @@ function filterFnChairman(val: string, update: any) {
                       class="col-12 row q-col-gutter-sm"
                     >
                       <div class="col-11 q-my-xs">
+
                         <q-select
                           :option-label="
                             (item) => `${item.title}-${item.description}`
@@ -1287,11 +1449,13 @@ function filterFnChairman(val: string, update: any) {
                             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
@@ -1300,6 +1464,7 @@ function filterFnChairman(val: string, update: any) {
                           icon="mdi-trash-can-outline"
                           @click="deleteknowledge(index)"
                         />
+                        
                       </div>
                     </div>
                   </div>
@@ -1403,6 +1568,7 @@ function filterFnChairman(val: string, update: any) {
                             </div>
                           </div>
                         </div>
+
                         <div v-for="(item, index) in checkRule" :key="item.id">
                           <div
                             v-if="index === 16"
@@ -1413,6 +1579,7 @@ function filterFnChairman(val: string, update: any) {
                               {{ item.description }}
                             </div>
                           </div>
+
                           <div
                             v-else-if="index > 16 && index < 19"
                             class="row borderCheck border_y q-py-xs"
@@ -1431,6 +1598,7 @@ function filterFnChairman(val: string, update: any) {
                             </div>
                           </div>
                         </div>
+
                         <div v-for="(item, index) in checkRule" :key="item.id">
                           <div
                             v-if="index === 19"
@@ -1462,6 +1630,7 @@ function filterFnChairman(val: string, update: any) {
                       </div>
                     </q-card>
                   </div>
+
                   <div class="col-12 row">
                     <div class="col-12 text-top2">
                       กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
@@ -1480,6 +1649,7 @@ function filterFnChairman(val: string, update: any) {
                       </div>
                     </div>
                   </div>
+
                   <div class="col-12 row">
                     <div class="col-12 text-top2">ทักษะ</div>
                     <div class="col-12 row q-col-gutter-sm">
@@ -1512,6 +1682,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           ellipsis-2-lines
@@ -1542,6 +1713,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           :option-label="
@@ -1571,6 +1743,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           :option-label="
@@ -1644,6 +1817,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           :option-label="
@@ -1672,6 +1846,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           :option-label="
@@ -1700,6 +1875,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           :option-label="
@@ -1759,6 +1935,7 @@ function filterFnChairman(val: string, update: any) {
                       </div>
                     </div>
                   </div>
+
                   <div class="col-12 row">
                     <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
                     <div class="col-12 row q-col-gutter-sm">
@@ -1790,6 +1967,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           :option-label="
@@ -1818,6 +1996,7 @@ function filterFnChairman(val: string, update: any) {
                           </template></q-select
                         >
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           :option-label="
@@ -1984,6 +2163,7 @@ function filterFnChairman(val: string, update: any) {
                         label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                       />
                     </div>
+
                     <div class="col-xs-12 col-sm-5">
                       <q-input
                         :rules="
@@ -2000,6 +2180,7 @@ function filterFnChairman(val: string, update: any) {
                         label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                       />
                     </div>
+
                     <div
                       v-if="index > 0"
                       class="col-xs-12 col-sm-1 flex justify-center items-center"
@@ -2017,6 +2198,7 @@ function filterFnChairman(val: string, update: any) {
                 </q-card>
               </div>
             </div>
+
             <div class="col-12">
               <q-separator size="3px" color="grey-2" />
             </div>
@@ -2169,6 +2351,7 @@ function filterFnChairman(val: string, update: any) {
                 </div>
               </div>
               <div class="col-12 row q-col-gutter-md">
+
                 <div class="col-xs-12 col-sm-4">
                   <q-input
                     :readonly="status != true"
@@ -2179,6 +2362,7 @@ function filterFnChairman(val: string, update: any) {
                     label="ชื่อ-สกุล"
                   />
                 </div>
+
                 <div class="col-xs-12 col-sm-4">
                   <q-input
                     :readonly="status != true"
@@ -2189,6 +2373,7 @@ function filterFnChairman(val: string, update: any) {
                     label="ตำแหน่ง"
                   />
                 </div>
+
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
                     menu-class-name="modalfix"
@@ -2232,11 +2417,13 @@ function filterFnChairman(val: string, update: any) {
                 </div>
               </div>
             </div>
+
             <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" />
                 ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
               </div>
+
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   v-if="status == true"
@@ -2262,6 +2449,7 @@ function filterFnChairman(val: string, update: any) {
                     </q-item>
                   </template>
                 </q-select>
+
                 <q-select
                   v-else
                   :options="optionCaretaker"
@@ -2286,6 +2474,7 @@ function filterFnChairman(val: string, update: any) {
                     </q-item>
                   </template>
                 </q-select>
+
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
                     menu-class-name="modalfix"
@@ -2327,6 +2516,7 @@ function filterFnChairman(val: string, update: any) {
                     </template>
                   </datepicker>
                 </div>
+
                 <q-select
                   clearable
                   v-if="status == true"
@@ -2351,6 +2541,7 @@ function filterFnChairman(val: string, update: any) {
                     </q-item>
                   </template>
                 </q-select>
+
                 <q-select
                   clearable
                   v-else
@@ -2376,6 +2567,7 @@ function filterFnChairman(val: string, update: any) {
                     </q-item>
                   </template>
                 </q-select>
+
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
                     menu-class-name="modalfix"
@@ -2431,6 +2623,7 @@ function filterFnChairman(val: string, update: any) {
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 ผู้บังคับบัญชาผู้มอบหมายงาน
               </div>
+
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   v-if="status == true"
@@ -2457,6 +2650,7 @@ function filterFnChairman(val: string, update: any) {
                     </q-item>
                   </template>
                 </q-select>
+
                 <q-select
                   v-else
                   :options="OPcommanderFn"
@@ -2482,6 +2676,7 @@ function filterFnChairman(val: string, update: any) {
                     </q-item>
                   </template>
                 </q-select>
+
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
                     menu-class-name="modalfix"
@@ -2525,6 +2720,7 @@ function filterFnChairman(val: string, update: any) {
                 </div>
               </div>
             </div>
+
             <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" />
@@ -2556,6 +2752,7 @@ function filterFnChairman(val: string, update: any) {
                     </q-item>
                   </template>
                 </q-select>
+                
                 <q-select
                   v-else
                   :options="OPchairmanFn"
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 2ba1781b1..7ac2bdeda 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -89,7 +89,8 @@ const list2_1 = probationStore.behavior_no1;
 const list2_2 = probationStore.behavior_no2;
 const list2_3 = probationStore.behavior_no3;
 
-const fecthAssign = async () => {
+/** get ข้อมูลมอบหมายงาน */
+async function fecthAssign(){
   showLoader();
   await http
     .get(config.API.evaluateCreate(assignId.value))
@@ -117,7 +118,9 @@ const fecthAssign = async () => {
       hideLoader();
     });
 };
-const fetchEvaluate = async () => {
+
+/** get ข้อมูล แบบ ประเมิน*/
+async function fetchEvaluate(){
   try {
     let data = await dataArr.value;
     evaluate_id.value = data.id;
@@ -168,7 +171,8 @@ const fetchEvaluate = async () => {
   }
 };
 
-const savaForm = () => {
+/** ตรวจเช็คข้อมูล */
+function savaForm(){
   let hasError = false;
   behavio_strengthRef.value.validate();
   if (
@@ -206,7 +210,9 @@ const savaForm = () => {
     notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
   }
 };
-const save = () => {
+
+/** อับเดต ข้อมูล*/
+function save(){
   const data = {
     evaluate_no: evaluate_no.value,
     start_date: start_date.value,
@@ -255,6 +261,7 @@ const save = () => {
       });
   });
 };
+
 watch(props, async () => {
   if (props.tab && props.action == "edit") {
     evaluate_no.value = Number(props.tab.charAt(4));
@@ -263,6 +270,7 @@ watch(props, async () => {
     fetchEvaluate();
   }
 });
+
 onMounted(async () => {
   if (props.tab && props.action == "edit") {
     evaluate_no.value = Number(props.tab.charAt(4));
@@ -277,6 +285,7 @@ onMounted(async () => {
   <div class="row col-12 no-margin q-pa-sm">
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+
       <div v-if="status == false">
         <q-btn
           dense
@@ -289,6 +298,7 @@ onMounted(async () => {
           <q-tooltip>แก้ไขข้อมูล</q-tooltip>
         </q-btn>
       </div>
+
       <div v-else>
         <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
           <q-tooltip>ยกเลิก</q-tooltip>
@@ -306,23 +316,27 @@ onMounted(async () => {
         </q-btn>
       </div>
     </div>
+
     <div class="row col-12 q-gutter-lg">
       <div class="col-12 row">
         <div class="col-12 text-top0 row items-center">
+
           <div class="col-12 row text-top0">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ probationStore.person.name }}
           </div>
           <div class="col-12 q-pl-md q-pb-md">
-            <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+
             <div class="col-12">
               <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
               {{ probationStore.person.PositionLineName }}
             </div>
+
             <div class="col-12">
               <span class="text-top0 q-pl-sm">ระดับ</span>
               {{ probationStore.person.PositionLevelName }}
             </div>
+
             <div class="col-12">
               <span class="text-top0 q-pl-sm">สังกัด</span>
               {{ probationStore.person.Oc }}
@@ -360,12 +374,14 @@ onMounted(async () => {
           <q-separator size="3px" color="grey-2" />
         </div>
       </div>
+
       <div class="col-12 row">
         <div class="col-12 text-top0 items-center">
           <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
           ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
         </div>
       </div>
+
       <div class="col-12 row no-margin">
         <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
           <q-list dense>
@@ -741,6 +757,7 @@ onMounted(async () => {
             </q-list>
           </q-card>
         </div>
+
         <div class="col-12 row">
           <div class="col-12 text-top0 row items-center q-pl-lg">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -789,6 +806,7 @@ onMounted(async () => {
             </q-list>
           </q-card>
         </div>
+
         <div class="col-12 row">
           <div class="col-12 text-top0 row items-center q-pl-lg">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -837,6 +855,7 @@ onMounted(async () => {
             </q-list>
           </q-card>
         </div>
+
         <div class="col-12 row">
           <div class="col-12 text-top0 row items-center q-pl-lg">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -907,6 +926,7 @@ onMounted(async () => {
           </q-card>
         </div>
         <!-- <FormComment /> -->
+
         <div class="row col-12 q-gutter-lg no-margin">
           <div class="col-12 row">
             <div class="col-12 text-top0 row items-center q-pl-lg">
@@ -970,6 +990,7 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
+
                     <q-radio
                       checked-icon="task_alt"
                       unchecked-icon="panorama_fish_eye"
@@ -986,6 +1007,7 @@ onMounted(async () => {
                       val="0"
                       label=" ยังไม่ได้ดำเนินการ"
                     />
+
                   </div>
                 </q-item-section>
               </q-item>
@@ -996,6 +1018,7 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
+
                     <q-radio
                       checked-icon="task_alt"
                       unchecked-icon="panorama_fish_eye"
@@ -1012,6 +1035,7 @@ onMounted(async () => {
                       val="0"
                       label=" ยังไม่ได้ดำเนินการ"
                     />
+
                   </div>
                 </q-item-section>
               </q-item>
@@ -1022,6 +1046,7 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
+
                     <q-radio
                       checked-icon="task_alt"
                       :disable="!status"
@@ -1038,6 +1063,7 @@ onMounted(async () => {
                       val="0"
                       label=" ยังไม่ได้ดำเนินการ"
                     />
+
                   </div>
                 </q-item-section>
               </q-item>
@@ -1050,6 +1076,7 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
+
                     <q-radio
                       checked-icon="task_alt"
                       unchecked-icon="panorama_fish_eye"
@@ -1066,6 +1093,7 @@ onMounted(async () => {
                       val="0"
                       label=" ยังไม่ได้ดำเนินการ"
                     />
+
                   </div>
                 </q-item-section>
               </q-item>
@@ -1079,6 +1107,7 @@ onMounted(async () => {
         <div class="col-xs-12 col-sm-11 row">
           <div class="col-12 text-top2 row items-center">ผู้บังคับบัญชา</div>
           <div class="col-12 row q-col-gutter-md">
+
             <q-select
               class="col-xs-12 col-sm-8"
               dense
@@ -1088,6 +1117,7 @@ onMounted(async () => {
               label="ผู้บังคับบัญชา"
               disable
             />
+            
             <div class="col-xs-12 col-sm-4">
               <datepicker
                 menu-class-name="modalfix"
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index b12630e56..ddfc5ab37 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -51,23 +51,30 @@ const drawer = ref<boolean>(true);
 const activeTab = ref<string>("");
 const personalId = ref<string>(route.params.personalId.toString());
 
+/**
+ * เปลี่ยน tab เมนู
+ * @param tab กำหนด tab
+ */
+function changeTab(tab: string){
+  DataStore.mainTab = tab;
+  activeTab.value = DataStore.mainTab;
+};
+
+/** ปุ่มกลับ */
+function clickBack(){
+  router.push(`/probation/detail/${personalId.value}`);
+  DataStore.mainTab = "tab1";
+};
+
+/** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
 onMounted(() => {
   if (DataStore.mainTab) {
     activeTab.value = DataStore.mainTab;
   } else activeTab.value = "tab1";
 });
-const changeTab = (tab: string) => {
-  DataStore.mainTab = tab;
-  activeTab.value = DataStore.mainTab;
-};
-const clickBack = () => {
-  router.push(`/probation/detail/${personalId.value}`);
-  DataStore.mainTab = "tab1";
-};
 </script>
 
 <template>
-  <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
   <q-card flat bordered class="col-12">
     <q-layout
       view="hHh Lpr lff"
@@ -114,10 +121,6 @@ const clickBack = () => {
               :active="activeTab == 'tab1'"
               @click="changeTab('tab1')"
             >
-              <!-- <q-item-section avatar style="min-width: 40px">
-                <q-icon size="18px" name="mdi-file" />
-              </q-item-section> -->
-
               <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
             </q-item>
 
@@ -130,10 +133,6 @@ const clickBack = () => {
               :active="activeTab == 'tab2'"
               @click="changeTab('tab2')"
             >
-              <!-- <q-item-section avatar style="min-width: 40px">
-                <q-icon size="18px" name="mdi-file-edit" />
-              </q-item-section> -->
-
               <q-item-section>
                 แบบบันทึกผล
                 <br />
@@ -149,10 +148,6 @@ const clickBack = () => {
               :active="activeTab == 'tab8'"
               @click="changeTab('tab8')"
             >
-              <!-- <q-item-section avatar style="min-width: 40px">
-              <q-icon size="18px" name="mdi-file-edit" />
-            </q-item-section> -->
-
               <q-item-section>
                 แบบบันทึกผล
                 <br />
@@ -169,10 +164,6 @@ const clickBack = () => {
               :active="activeTab == 'tab3'"
               @click="changeTab('tab3')"
             >
-              <!-- <q-item-section avatar style="min-width: 40px">
-                <q-icon size="18px" name="mdi-file-star" />
-              </q-item-section> -->
-
               <q-item-section>
                 แบบประเมินผล<br />
                 <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
@@ -188,10 +179,6 @@ const clickBack = () => {
               :active="activeTab == 'tab4'"
               @click="changeTab('tab4')"
             >
-              <!-- <q-item-section avatar style="min-width: 40px">
-                <q-icon size="18px" name="mdi-file-star" />
-              </q-item-section> -->
-
               <q-item-section>
                 แบบประเมินผล<br />
                 <div class="text-caption text-grey-7">(คณะกรรมการ)</div>
@@ -207,12 +194,9 @@ const clickBack = () => {
               :active="activeTab == 'tab5'"
               @click="changeTab('tab5')"
             >
-              <!-- <q-item-section avatar style="min-width: 40px">
-                <q-icon size="18px" name="mdi-file-chart" />
-              </q-item-section> -->
-
               <q-item-section> แบบรายงาน<br />การประเมินฯ </q-item-section>
             </q-item>
+            
             <q-item
               active-class="text-primary bg-teal-1 text-weight-medium"
               clickable
@@ -224,6 +208,7 @@ const clickBack = () => {
             >
               <q-item-section> ผลการประเมินการ ฯ </q-item-section>
             </q-item>
+
             <q-item
               active-class="text-primary bg-teal-1 text-weight-medium"
               clickable
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 2d5e4e7af..e8dcc6e51 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -34,12 +34,12 @@ const probationlist = ref<any>([]);
 const filterKeyword = ref<string>("");
 const fillterStatus = ref<any>([]);
 const filterKeyword2 = ref<string>("");
+const Opfillter2 = ref<any[]>([]);
 
 const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
-
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -52,6 +52,8 @@ const pagination2 = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+/** ข้อมูลที่เเสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -63,7 +65,7 @@ const visibleColumns = ref<string[]>([
   "probation_status",
 ]);
 
-// หัวตาราง
+/** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -139,7 +141,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-// หัวตาราง2
+/** หัวตาราง2 */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -197,7 +199,8 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
-const ProbationMainFilter = () => {
+/** ฟังชั่น ฟิลเตอร์ หา status */
+function ProbationMainFilter() {
   const useStatus = new Set();
   fillterStatus.value.forEach((item: any) => {
     const ID = item.probation_status;
@@ -212,9 +215,13 @@ const ProbationMainFilter = () => {
   });
   Opfillter.value.sort((a: any, b: any) => a.id - b.id);
   Opfillter2.value = Opfillter.value;
-};
+}
 
-const updateRows = (body: any) => {
+/**
+ * อัพเดท rows ตาม status 
+ * @param body {id:? , value: ?}
+ */
+function updateRows(body: any) {
   if (body.value !== "ทั้งหมด") {
     const filteredRows = dataUpdate.value.filter(
       (item: FormMainProbation) => item.probation_status === body.value
@@ -223,9 +230,10 @@ const updateRows = (body: any) => {
   } else {
     rows.value = dataUpdate.value;
   }
-};
+}
 
-const getpersonalList = async () => {
+/** get ข้อมูล */
+async function getpersonalList() {
   showLoader();
   await http
     .get(config.API.probationPersonalList())
@@ -251,9 +259,10 @@ const getpersonalList = async () => {
     .finally(() => {
       hideLoader();
     });
-};
-// fecth profile
-const fecthlistPersonal = async () => {
+}
+
+/** fecth profile */
+async function fecthlistPersonal() {
   showLoader();
   await http
     .get(config.API.profileOrganizRoot)
@@ -267,8 +276,14 @@ const fecthlistPersonal = async () => {
       messageError($q, e);
     })
     .finally(() => {});
-};
-const fecthlistProbation = async (id: string, data: any) => {
+}
+
+/**
+ * ส่งข้อมูลเพื่อ รับ res
+ * @param id string
+ * @param data type
+ */
+async function fecthlistProbation(id: string, data: any) {
   try {
     probationlist.value = [];
     const res = await http.post(
@@ -283,9 +298,13 @@ const fecthlistProbation = async (id: string, data: any) => {
   } finally {
     hideLoader();
   }
-};
+}
 
-const findlist = async (id: string) => {
+/**
+ * ค้นหาข้อมูลตามไอดี
+ * @param id string
+ */
+async function findlist(id: string) {
   let data: CriteriaType[] = [
     { criteriaType: "is_retire", criteriaValue: "false" },
     { criteriaType: "is_probation", criteriaValue: "true" },
@@ -312,8 +331,13 @@ const findlist = async (id: string) => {
     status: e.probation,
   }));
   modal.value = true;
-};
-const clickAdd = (id: string) => {
+}
+
+/**
+ * เพิ่มข้อมูล ผู้ทดลองปฏิบัติหน้าที่ราชการ
+ * @param id personal id 
+ */
+function clickAdd(id: string) {
   dialogConfirm(
     $q,
     async () => {
@@ -338,35 +362,39 @@ const clickAdd = (id: string) => {
     "ยันยันการเพิ่มข้อมูล",
     "ต้องการเพิ่มข้อมูลนี้หรือไม่ ?"
   );
-};
-const clickClose = async () => {
+}
+/** ปิด dialog */
+async function clickClose() {
   modal.value = false;
-};
+}
 
-const resetFilter = () => {
+/** reset ฟิลเตอร์ */
+function resetFilter() {
   filterKeyword.value = "";
   filterRef.value.focus();
-};
+}
 
-const resetFilter2 = () => {
+/** reset ฟิลเตอร์ ใน dialog */
+function resetFilter2() {
   filterKeyword2.value = "";
   filterRef2.value.focus();
-};
+}
 
-const paginationLabel = (start: string, end: string, total: string) => {
+function paginationLabel(start: string, end: string, total: string) {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
-};
+}
 
-const paginationLabel2 = (start: string, end: string, total: string) => {
+function paginationLabel2(start: string, end: string, total: string) {
   if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
-};
-onMounted(async () => {
-  getpersonalList();
-});
+}
 
-const Opfillter2 = ref<any[]>([]);
+/**
+ * ค้นหาตาม text
+ * @param val ค่าที่ค้นหา
+ * @param update fn
+ */
 function filterFn(val: string, update: any) {
   if (val == "") {
     update(() => {
@@ -381,6 +409,11 @@ function filterFn(val: string, update: any) {
     });
   }
 }
+
+/** get ค่า เมื่อโหลดหน้า */
+onMounted(async () => {
+  getpersonalList();
+});
 </script>
 
 <template>
@@ -420,6 +453,7 @@ function filterFn(val: string, update: any) {
                 </q-item>
               </template>
             </q-select>
+
             <div>
               <q-btn
                 @click="fecthlistPersonal"
@@ -435,6 +469,7 @@ function filterFn(val: string, update: any) {
           </div>
         </div>
         <q-space />
+        
         <q-input
           class="col-xs-12 col-sm-3 col-md-2"
           standout
@@ -639,4 +674,4 @@ function filterFn(val: string, update: any) {
       </q-form>
     </q-card>
   </q-dialog>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 413ea32b1..09434854d 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -8,7 +8,6 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-
 const router = useRouter();
 const route = useRoute();
 const personalId = ref<string>(route.params.id as string);
@@ -26,7 +25,12 @@ const position_line = ref<string>("");
 const position_level = ref<string>("");
 const probation_status = ref<any>();
 const probation_statusold = ref<string>("");
-
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 const mixin = useCounterMixin();
 const {
   messageError,
@@ -36,6 +40,8 @@ const {
   date2Thai,
   dialogConfirm,
 } = mixin;
+
+/** ข้อมูลที่เเสดงในตาราง */
 const visibleColumns = ref<string[]>([
   "no",
   "date_start",
@@ -43,6 +49,8 @@ const visibleColumns = ref<string[]>([
   "mentors",
   "commander",
 ]);
+
+/** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -91,6 +99,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** option */
 const probation_statusOP = ref<any>([
   {
     id: 1,
@@ -99,12 +108,12 @@ const probation_statusOP = ref<any>([
   {
     id: 2,
     label: "พ้นการทดลองปฏิบัติหน้าที่ราชการ",
-    disable: true
+    disable: true,
   },
   {
     id: 3,
     label: "ไม่พ้นการทดลองปฏิบัติหน้าที่ราชการ",
-    disable: true
+    disable: true,
   },
   {
     id: 4,
@@ -121,17 +130,17 @@ const probation_statusOP = ref<any>([
   {
     id: 7,
     label: "ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการ",
-    disable: true
+    disable: true,
   },
   {
     id: 8,
     label: "ดึงรายชื่อไปออกคำสั่งแล้ว",
-    disable: true
+    disable: true,
   },
 ]);
 
-
-const getAssignList = async () => {
+/** get ข้อมูล งานที่ได้รับมอบหมาย */
+async function getAssignList() {
   showLoader();
   await http
     .get(config.API.probationGetAssignList(personalId.value))
@@ -151,8 +160,10 @@ const getAssignList = async () => {
     .finally(() => {
       hideLoader();
     });
-};
-const getpersonalList = async () => {
+}
+
+/** รายละเอียด ตาม id */
+async function getpersonalList() {
   showLoader();
   await http
     .get(config.API.personal(personalId.value))
@@ -170,8 +181,10 @@ const getpersonalList = async () => {
     .finally(() => {
       hideLoader();
     });
-};
-const selectStatus = async () => {
+}
+
+/** เปลี่ยนสถานะ */
+async function selectStatus() {
   dialogConfirm(
     $q,
     async () => {
@@ -198,29 +211,28 @@ const selectStatus = async () => {
       probation_status.value = probation_statusold.value;
     }
   );
-};
-// เปิดหน้ารายละเอียด
-const clickSelect = (id: string) => {
-  router.push(`${route.fullPath}/${id}`);
-};
+}
 
-// รีเซ็ตค่าในช่อง input 
-const resetFilter = () => {
+/**
+ * เปิดหน้ารายละเอียด
+ * @param id personal id
+ */
+function clickSelect(id: string) {
+  router.push(`${route.fullPath}/${id}`);
+}
+
+/** รีเซ็ตค่าในช่อง input */
+function resetFilter() {
   filterKeyword.value = "";
   filterRef.value.focus();
-};
+}
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const paginationLabel = (start: string, end: string, total: string) => {
+function paginationLabel(start: string, end: string, total: string){
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+
+/** get ค่า เมื่อโหลดหน้า */
 onMounted(async () => {
   await getpersonalList();
   await getAssignList();
@@ -262,30 +274,39 @@ onMounted(async () => {
           <q-img :src="avatarprofile" v-if="avatarprofile !== null" />
           <q-img src="@/assets/avatar_user.jpg" v-else />
         </div>
+
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
             <div class="col-12 text-detail">{{ position_line }}</div>
           </div>
         </div>
+
         <div class="col-xs-6 col-sm-2 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
             <div class="col-12 text-detail">{{ position_level }}</div>
           </div>
         </div>
+
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
             <div class="col-12 text-detail">{{ organization }}</div>
           </div>
         </div>
+
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สถานะการทดลองปฏิบัติหน้าที่ราชการ</div>
             <div class="col-12 text-detail">
               <q-select
-                :disable="probation_status==2 || probation_status==3 || probation_status==7 || probation_status==8"
+                :disable="
+                  probation_status == 2 ||
+                  probation_status == 3 ||
+                  probation_status == 7 ||
+                  probation_status == 8
+                "
                 dense
                 borderless
                 v-model="probation_status"
@@ -316,6 +337,7 @@ onMounted(async () => {
           >
             <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
           </q-btn>
+          
         </div>
         <q-space />
         <q-input
@@ -394,8 +416,7 @@ onMounted(async () => {
                   {{ col.value }}
                 </div>
               </q-td>
-              <q-td auto-width>
-							</q-td>
+              <q-td auto-width> </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
diff --git a/src/modules/05_placement/components/probation/SummaryScore.vue b/src/modules/05_placement/components/probation/SummaryScore.vue
index 4b66df7ad..668081629 100644
--- a/src/modules/05_placement/components/probation/SummaryScore.vue
+++ b/src/modules/05_placement/components/probation/SummaryScore.vue
@@ -67,13 +67,18 @@ const result_option = reactive([
 const note = ref<string>("");
 const date = ref<Date>(new Date());
 
-const edit = () => {
+/** เปิด dialog */
+function edit() {
   status.value = true;
-};
-const cancel = () => {
+}
+
+/** ปิด dialog */
+function cancel() {
   status.value = false;
-};
-const getReportScore = async () => {
+}
+
+/** get คะแนน */
+async function getReportScore() {
   await http.get(config.API.summaryReportDetail(assignId.value)).then((res) => {
     const data = res.data.data;
     develop_orientation_score.value = data.develop_orientation_score;
@@ -106,7 +111,9 @@ const getReportScore = async () => {
     pass_result.value = data.pass_result;
     evaluate_date.value = data.evaluate_date;
   });
-};
+}
+
+/** get ค่า เมื่อโหลดหน้า */
 onMounted(() => {
   getReportScore();
 });
@@ -130,7 +137,8 @@ onMounted(() => {
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label>
+                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+              >
             </q-item-section>
             <q-item-section>
               <q-item-label style="color: gray">
@@ -139,6 +147,7 @@ onMounted(() => {
                   <div class="col">ร้อยละ</div>
                 </div>
               </q-item-label>
+
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
                   <div class="col">{{ achievement_score }}</div>
@@ -162,22 +171,28 @@ onMounted(() => {
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label>
+                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
+              >
             </q-item-section>
             <q-item-section>
               <q-item-label style="color: gray">
                 <div class="row text-weight-light">
+
                   <div class="col">คะแนน</div>
                   <div class="col">ร้อยละ</div>
+
                 </div>
               </q-item-label>
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
+
                   <div class="col">{{ behavior_score }}</div>
                   <div class="col">{{ behavior_percent }}</div>
+
                 </div>
               </q-item-label>
             </q-item-section>
+
             <q-item-section side v-if="behavior_result == 1">
               ผ่าน (สูงกว่าร้อยละ 60)
             </q-item-section>
@@ -192,19 +207,25 @@ onMounted(() => {
         <q-list dense>
           <q-item dense tag="label" v-ripple>
             <q-item-section>
-              <q-item-label class="text-black">ผลคะแนนรวมการประเมินการทดลอง</q-item-label>
+              <q-item-label class="text-black"
+                >ผลคะแนนรวมการประเมินการทดลอง</q-item-label
+              >
             </q-item-section>
             <q-item-section>
               <q-item-label style="color: gray">
                 <div class="row text-weight-light">
+
                   <div class="col">คะแนน</div>
                   <div class="col">ร้อยละ</div>
+
                 </div>
               </q-item-label>
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
+
                   <div class="col">{{ sum_score }}</div>
                   <div class="col">{{ sum_percent }}</div>
+
                 </div>
               </q-item-label>
             </q-item-section>
@@ -225,7 +246,11 @@ onMounted(() => {
           <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
           การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
         </div>
-        <q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
           <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
             <div class="row q-gutter-md q-pl-md">
               <div class="col-8 text-weight-medium">หัวข้อ</div>
@@ -237,30 +262,71 @@ onMounted(() => {
           <div class="row q-gutter-md align-center q-pl-md">
             <div class="col-8">1. การปฐมนิเทศ</div>
             <div class="col">
-              <q-input outlined dense type="number" :disable="!status" v-model="develop_orientation_score" />
+              <q-input
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_orientation_score"
+              />
             </div>
+
             <div class="col">
-              <q-input outlined dense type="number" :disable="!status" v-model="develop_orientation_percent" />
+              <q-input
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_orientation_percent"
+              />
             </div>
           </div>
+
           <q-separator class="q-my-xs" />
           <div class="row q-gutter-md align-center q-pl-md">
             <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
             <div class="col">
-              <q-input dense outlined type="number" :disable="!status" v-model="develop_self_learning_score" />
+              <q-input
+                dense
+                outlined
+                type="number"
+                :disable="!status"
+                v-model="develop_self_learning_score"
+              />
             </div>
+
             <div class="col">
-              <q-input outlined dense type="number" :disable="!status" v-model="develop_self_learning_percent" />
+              <q-input
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_self_learning_percent"
+              />
             </div>
           </div>
+
           <q-separator class="q-my-xs" />
           <div class="row q-gutter-md align-center q-pl-md">
             <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
             <div class="col">
-              <q-input outlined dense type="number" :disable="!status" v-model="develop_training_seminar_score" />
+              <q-input
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_training_seminar_score"
+              />
             </div>
+
             <div class="col">
-              <q-input outlined dense type="number" :disable="!status" v-model="develop_training_seminar_percent" />
+              <q-input
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_training_seminar_percent"
+              />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -269,10 +335,23 @@ onMounted(() => {
               4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
             </div>
             <div class="col">
-              <q-input outlined dense type="number" :disable="!status" v-model="develop_other_training_score" />
+              <q-input
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_other_training_score"
+              />
             </div>
+            
             <div class="col">
-              <q-input outlined dense type="number" :disable="!status" v-model="develop_other_training_percent" />
+              <q-input
+                outlined
+                dense
+                type="number"
+                :disable="!status"
+                v-model="develop_other_training_percent"
+              />
             </div>
           </div>
 
@@ -280,7 +359,9 @@ onMounted(() => {
           <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
             <div class="row q-gutter-md q-pl-sm">
               <div class="col-8 text-weight-medium">
-                <q-item-label>คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label>
+                <q-item-label
+                  >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+                >
               </div>
               <div class="col q-pl-md">{{ develop_total_score }}</div>
               <div class="col q-pl-md">{{ develop_total_percent }}</div>
@@ -295,8 +376,18 @@ onMounted(() => {
           ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
         </div>
         <div class="col-12">
-          <q-select class="col-12" dense v-model="develop_result" outlined :options="dev_options" option-label="label"
-                option-value="value" map-options emit-value :disable="!status" />
+          <q-select
+            class="col-12"
+            dense
+            v-model="develop_result"
+            outlined
+            :options="dev_options"
+            option-label="label"
+            option-value="value"
+            map-options
+            emit-value
+            :disable="!status"
+          />
         </div>
       </div>
 
@@ -304,8 +395,18 @@ onMounted(() => {
         <div class="col-12 text-top0 row items-center">
           เหตุผลอื่น ๆ ในการพิจารณา
         </div>
-        <q-input type="textarea" outlined dense class="col-12" v-model="reason" lazy-rules autogrow hide-bottom-space
-          :row="3" :disable="!status" />
+        <q-input
+          type="textarea"
+          outlined
+          dense
+          class="col-12"
+          v-model="reason"
+          lazy-rules
+          autogrow
+          hide-bottom-space
+          :row="3"
+          :disable="!status"
+        />
       </div>
 
       <div class="col-xs-12 col-sm-11">
@@ -315,8 +416,18 @@ onMounted(() => {
               ผลการทดลองปฏิบัติหน้าที่ราชการ
             </div>
             <div class="col-12">
-              <q-select class="col-12" dense v-model="pass_result" outlined :options="result_option" option-label="name"
-                option-value="value" map-options emit-value :disable="!status" />
+              <q-select
+                class="col-12"
+                dense
+                v-model="pass_result"
+                outlined
+                :options="result_option"
+                option-label="name"
+                option-value="value"
+                map-options
+                emit-value
+                :disable="!status"
+              />
             </div>
           </div>
           <div class="col-xs-12 col-sm-6">
@@ -324,8 +435,16 @@ onMounted(() => {
               วัน เดือน ปี ที่ประเมิน
             </div>
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" v-model="evaluate_date" :locale="'th'" autoApply :readonly="!status"
-                borderless :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="evaluate_date"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -333,10 +452,22 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="evaluate_date != null ? date2Thai(evaluate_date) : null
-                    " :rules="[(val) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker"
+                    :model-value="
+                      evaluate_date != null ? date2Thai(evaluate_date) : null
+                    "
+                    :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/SummarySurvey.vue b/src/modules/05_placement/components/probation/SummarySurvey.vue
index 54405ecd9..7d8cae806 100644
--- a/src/modules/05_placement/components/probation/SummarySurvey.vue
+++ b/src/modules/05_placement/components/probation/SummarySurvey.vue
@@ -6,7 +6,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import criterion from "@/modules/05_placement/components/Other/Criterion.vue"
+import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
 const $q = useQuasar();
@@ -45,12 +45,10 @@ const result_option = ref<any>([
 
 const note = ref<string>("");
 const date = ref<Date>(new Date());
+const classBordered = ref<string>("");
 
-onMounted(() => {
-  getSurveyData();
-});
-
-const getSurveyData = async () => {
+/** ดึง ข้อมูลแบบสำรวจ */
+async function getSurveyData() {
   await http
     .get(config.API.summarySurveyDetail(assignId.value))
     .then((res: any) => {
@@ -63,11 +61,12 @@ const getSurveyData = async () => {
       }
     })
     .catch((e) => {
-      messageError($q,e)
+      messageError($q, e);
     });
-};
-const classBordered = ref<string>("");
-const save = async () => {
+}
+
+/** save ข้อมูล */
+async function save(){
   await myForm.value!.validate().then((result: boolean) => {
     if (result && answer3.value !== 0) {
       const data = {
@@ -93,11 +92,17 @@ const save = async () => {
     }
   });
 };
+/** ถ้าเป็น 0 ใส่ class */
 watch(answer3, () => {
   if (answer3.value == 0) {
     classBordered.value = "border_custom";
   } else classBordered.value = "";
 });
+
+/** get ค่า เมื่อโหลดหน้า */
+onMounted(() => {
+  getSurveyData();
+});
 </script>
 
 <template>
@@ -124,6 +129,7 @@ watch(answer3, () => {
         />
       </div>
     </div>
+
     <div class="col-12 row q-mt-md">
       <div class="col-12 text-top0 items-center">
         <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
@@ -150,6 +156,7 @@ watch(answer3, () => {
         ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
       </div>
       <q-space />
+      
       <q-rating
         :disable="!status"
         v-model="answer3"