From 9f9879202eb8557e7ddc6812dc6c09cfbadffb6e Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 13 Nov 2023 13:32:26 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B9=82=E0=B8=84?=
 =?UTF-8?q?=E0=B9=89=E0=B8=94=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
 =?UTF-8?q?=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9C=E0=B9=88=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/Main.vue  | 195 ++++++++-----
 .../components/PersonalList/Detail.vue        |  45 +--
 .../components/PersonalList/DialogFooter.vue  |  26 +-
 .../components/PersonalList/DialogHeader.vue  |   4 +
 .../components/PersonalList/OrgTree.vue       | 229 +++++++--------
 .../components/PersonalList/StatCard.vue      |  16 +-
 .../components/PersonalList/Table.vue         | 265 +++++++++++-------
 .../components/PersonalList/TableDetail.vue   | 110 +++-----
 .../components/PersonalList/TableView.vue     |  48 ++--
 9 files changed, 527 insertions(+), 411 deletions(-)

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 66e53a378..923f153d8 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+import type { QTableProps } from "quasar";
 import type {
   DataOption,
   DataOption1,
 } from "@/modules/05_placement/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { usePlacementDataStore } from "@/modules/05_placement/store";
+
 import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -17,7 +18,59 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
-// หัวตาราง
+const searchYear = ref();
+const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const dataPlacement = ref<any>([]);
+const yearOptionsFn = ref<any>([]);
+
+/**ข้อมูลตาราง (จำลอง)*/
+const rows = ref<QTableProps["rows"]>([]);
+
+/** ค้นหาในตาราง */
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+/**ครั้งที่สอบ */
+const examTime = ref<number | string>("");
+const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
+const addedExamTimeValues: Set<number> = new Set();
+
+/** ประเภทการสอบ */
+const examType = ref<string | null>("");
+const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
+const addedExamTypeValues: Set<string> = new Set();
+
+/** บัญชีหมดอายุ */
+const expiredAccount = ref<boolean>(false);
+const examTimeOP2 = ref<any[]>([]);
+const examTypeOP2 = ref<any[]>([]);
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "accountStartDate",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/** ส่วนเเสดงผล ตาราง */
+const visibleColumns = ref([
+  "id",
+  "examRound",
+  "examOrder",
+  "examOrder",
+  "fiscalYear",
+  "numberOfCandidates",
+  "examTypeName",
+  "accountStartDate",
+  "accountExpirationDate",
+]);
+
+/**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "id",
@@ -96,28 +149,12 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<QTableProps["rows"]>([]);
-const searchYear = ref();
-const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 
-const dataPlacement = ref<any>([]);
-const visibleColumns = ref([
-  "id",
-  "examRound",
-  "examOrder",
-  "examOrder",
-  "fiscalYear",
-  "numberOfCandidates",
-  "examTypeName",
-  "accountStartDate",
-  "accountExpirationDate",
-]);
-
-onMounted(async () => {
-  await fetchYearOptions();
-});
-const fetchPlacementData = async (val: number) => {
+/**
+ * ฟังชั่น get ข้อมูลตามปี
+ * @param val ปี ค.ส. โดยที่ทั้งหมดเป็น เลข 0
+ */
+async function fetchPlacementData(val: number) {
   showLoader();
   rows.value = [];
   await http
@@ -155,9 +192,10 @@ const fetchPlacementData = async (val: number) => {
       expiredAccount.value = false;
       hideLoader();
     });
-};
+}
 
-const fetchYearOptions = async () => {
+/** ฟังชั่น get ปี ค.ส. */
+async function fetchYearOptions() {
   await http
     .get(config.API.yearOptions())
     .then((res) => {
@@ -174,32 +212,27 @@ const fetchYearOptions = async () => {
     .catch((e) => {
       messageError($q, e);
     });
-};
-const filterYear = () => {
+}
+
+/** ฟังชั่นเช็ค ค่า Null
+ * เมื่อ != null เอาค่าส่งไปฟังชั่น get data
+ */
+function filterYear() {
   if (searchYear.value !== null) {
     fetchPlacementData(searchYear.value);
   }
-};
+}
 
-// ดูรายการสอบแข่งขัน หน้าต่อไป
-const redirectToPage = (examId?: number) => {
+/**
+ * ดูรายการสอบแข่งขัน หน้าต่อไป
+ * @param examId id ระบุ รอบการสอบ
+ */
+function redirectToPage(examId?: number) {
   router.push(`/placement/personal-list/${examId}`);
-};
+}
 
-//-------------------|ค้นหาในตาราง|-----------------//
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-//-------------------|ครั้งที่สอบ|------------------------------//
-const examTime = ref<number | string>("");
-const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
-const addedExamTimeValues: Set<number> = new Set();
-
-const examTimeFilter = async () => {
+/** ฟิลเตอร์หาครั้งที่สอบ ตาม ปี */
+async function examTimeFilter() {
   for (const data of dataPlacement.value) {
     const examOrder = data.examOrder;
     if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
@@ -212,13 +245,9 @@ const examTimeFilter = async () => {
     if (b.id === "all") return 1;
     return Number(a.id) - Number(b.id);
   }); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
-};
+}
 
-// ประเภทการสอบ
-const examType = ref<string | null>("");
-const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
-const addedExamTypeValues: Set<string> = new Set();
-const examTypeFilter = () => {
+function examTypeFilter() {
   dataPlacement.value.forEach((item: any) => {
     const examTypeName = item.examTypeName;
     const examTypeValue = item.examTypeValue;
@@ -230,9 +259,10 @@ const examTypeFilter = () => {
       addedExamTypeValues.add(examTypeName);
     }
   });
-};
-//--------------|ฟิลเตอร์|--------------------------------------//
-const searchFilterTable = async () => {
+}
+
+/** ฟิลเตอร์ */
+async function searchFilterTable() {
   rows.value = [];
   if (examType.value !== undefined && examType.value !== null) {
     await DataStore.DataUpdateMain(
@@ -257,31 +287,29 @@ const searchFilterTable = async () => {
     });
     rows.value = dataArr;
   }
-};
+}
 
-//----------------|บัญชีหมดอายุ|-----------------------------//
-const expiredAccount = ref<boolean>(false);
-const expiredAccountFilter = async () => {
+/** บัญชีหมดอายุ */
+async function expiredAccountFilter() {
   const updatedRows = dataPlacement.value.map((data: any) => {
     let isExpired = data.isExpired == expiredAccount;
     return { ...data, isExpired };
   });
   await DataStore.DataMain(updatedRows);
-};
+}
 
-const paging = ref<boolean>(true);
-const pagination = ref({
-  sortBy: "accountStartDate",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: number, end: number, total: number) => {
+function 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[]>([]);
+
+/** filter ใน dropdown ครั้งที่ */
+
+/**
+ * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
+ * @param val ค่าที่กรอก
+ * @param update afterFn ของ quasar
+ */
 function filterFnexamTime(val: string, update: any) {
   if (val === "") {
     update(() => {
@@ -295,7 +323,12 @@ function filterFnexamTime(val: string, update: any) {
     });
   }
 }
-const examTypeOP2 = ref<any[]>([]);
+
+/**
+ * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
+ * @param val ค่าที่กรอก
+ * @param update afterFn ของ quasar
+ */
 function filterFnExamtype(val: string, update: any) {
   if (val === "") {
     update(() => {
@@ -309,7 +342,12 @@ function filterFnExamtype(val: string, update: any) {
     });
   }
 }
-const yearOptionsFn = ref<any>([]);
+
+/**
+ * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
+ * @param val ค่าที่กรอก
+ * @param update afterFn ของ quasar
+ */
 function filterFnYear(val: string, update: any) {
   if (val === "") {
     update(() => {
@@ -323,6 +361,11 @@ function filterFnYear(val: string, update: any) {
     });
   }
 }
+
+/** เรียกใช้ฟังชั่น เมื่อเริ่มหน้านี้ */
+onMounted(async () => {
+  await fetchYearOptions();
+});
 </script>
 
 <template>
@@ -357,7 +400,9 @@ function filterFnYear(val: string, update: any) {
             </q-item>
           </template>
         </q-select>
+
         <q-space />
+
         <q-input
           class="col-xs-12 col-sm-3 col-md-2"
           standout
@@ -378,6 +423,7 @@ function filterFnYear(val: string, update: any) {
             />
           </template>
         </q-input>
+
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
           v-model="visibleColumns"
@@ -393,6 +439,7 @@ function filterFnYear(val: string, update: any) {
           options-cover
         />
       </div>
+
       <div class="col-12">
         <q-card bordered class="col-12 filter-card q-pa-sm">
           <div class="row col-12 q-col-gutter-sm">
@@ -424,6 +471,7 @@ function filterFnYear(val: string, update: any) {
                 </q-item>
               </template>
             </q-select>
+
             <q-select
               class="col-xs-12 col-sm-3 col-md-3"
               v-model="examType"
@@ -452,6 +500,7 @@ function filterFnYear(val: string, update: any) {
                 </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/PersonalList/Detail.vue b/src/modules/05_placement/components/PersonalList/Detail.vue
index 03c2e41d4..932e0c69b 100644
--- a/src/modules/05_placement/components/PersonalList/Detail.vue
+++ b/src/modules/05_placement/components/PersonalList/Detail.vue
@@ -3,19 +3,21 @@ import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter, useRoute } from "vue-router";
 import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
+
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 
 const DataStore = usePlacementDataStore();
 
+let roleAdmin = ref<boolean>(false);
 const $q = useQuasar;
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
-let roleAdmin = ref<boolean>(false);
 const router = useRouter();
 const route = useRoute();
 const examId = route.params.examId;
@@ -33,8 +35,9 @@ const stat = ref<any>({
   contain: 0,
   disclaim: 0,
 });
-// เรียกข้อมูล Stat
-const getStat = async () => {
+
+/** เรียกข้อมูล Stat */
+async function getStat() {
   const examIdString = Array.isArray(examId) ? examId[0] : examId;
   await http
     .get(config.API.getStatCard(examIdString))
@@ -52,8 +55,27 @@ const getStat = async () => {
     .catch((e) => {
       messageError($q, e);
     });
-};
+}
 
+/** get รายละเอียด ของการสอบ */
+async function fetchPlacementData() {
+  showLoader();
+  await http
+    .get(config.API.MainDetail(0))
+    .then(async (res) => {
+      DataStore.DataMainOrig = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** เมื่อเริ่มโหลดหน้า ให้ ใช้ฟังชั่น get stat
+ * เเละหา ชื่อรอบ รอบ ปี
+ */
 onMounted(async () => {
   if (DataStore.DataMainOrig.length == 0) {
     await fetchPlacementData();
@@ -73,21 +95,6 @@ onMounted(async () => {
   round.value = examData.value == null ? null : examData.value.examOrder;
   year.value = examData.value == null ? null : examData.value.fiscalYear;
 });
-
-const fetchPlacementData = async () => {
-  showLoader();
-  await http
-    .get(config.API.MainDetail(0))
-    .then(async (res) => {
-      DataStore.DataMainOrig = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
diff --git a/src/modules/05_placement/components/PersonalList/DialogFooter.vue b/src/modules/05_placement/components/PersonalList/DialogFooter.vue
index d2358bb75..b01f5d694 100644
--- a/src/modules/05_placement/components/PersonalList/DialogFooter.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogFooter.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 
+/** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   editvisible: Boolean,
   modalEdit: Boolean,
@@ -20,23 +21,29 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
+
 const emit = defineEmits([
   "update:editvisible",
   "update:next",
   "update:previous",
 ]);
 
-const updateEdit = (value: Boolean) => {
+/**
+ * ฟังชั่น update
+ * @param value true/false
+ */
+function updateEdit(value: Boolean){
   emit("update:editvisible", value);
 };
-// const cancel = async () => {
-//   props.cancel();
-// };
-const edit = async () => {
+
+/** update edit */
+async function edit(){
   updateEdit(!props.editvisible);
   props.edit();
 };
-const checkSave = () => {
+
+/** save */
+function checkSave(){
   props.validate();
   props.save();
 
@@ -51,9 +58,9 @@ const checkSave = () => {
       :disabled="editvisible" 
       :color="editvisible ? 'grey-7' : 'primary'"
       @click="edit" 
-      ><!-- icon="mdi-pencil-outline"
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+      >
     </q-btn>
+
     <div v-else>
       <q-btn 
         unelevated
@@ -62,8 +69,7 @@ const checkSave = () => {
         :color="!editvisible ? 'grey-7' : 'public'" 
         @click="checkSave"
       >
-      </q-btn><!-- icon="mdi-content-save-outline">
-        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
     </div>
   </q-card-actions>
 </template>
diff --git a/src/modules/05_placement/components/PersonalList/DialogHeader.vue b/src/modules/05_placement/components/PersonalList/DialogHeader.vue
index a20e917b0..ae948bf19 100644
--- a/src/modules/05_placement/components/PersonalList/DialogHeader.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogHeader.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+
+/** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   title: String,
   close: {
@@ -6,6 +8,8 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
+
+/** ปิด dialog*/
 const close = async () => {
   props.close();
 };
diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index 40ab23244..8771c8632 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useQuasar, QForm } from "quasar";
 import { onMounted, reactive, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -28,8 +29,26 @@ const selectedFile = ref<string>("");
 const dataRespone = ref<any>();
 const search = ref<string>("");
 const filterRef = ref<any>(null);
+const personal = ref<any>();
+const expanded = ref<string[]>([]);
+const editDataStatus = ref<boolean>(false);
+const placementPosition = ref<any>([]);
+const treeData = ref<Array<any>>([]);
 
-// Set form field
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([{ label: "", value: "" }]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([{ label: "", value: "" }]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([{ label: "", value: "" }]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([{ label: "", value: "" }]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([{ label: "", value: "" }]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([{ label: "", value: "" }]);
+
+/** กำหนดตัวแปร เเบบ ออปเจ็ค */
 let dataForm = reactive({
   personalId: "",
   containDate: new Date(),
@@ -41,12 +60,8 @@ let dataForm = reactive({
   positionTypeId: "",
 });
 
-onMounted(async () => {
-  await fetchPublishFile();
-  await loadTreeData();
-  await fetchplacementPosition();
-});
-const fetchPublishFile = async () => {
+/** ฟังชั่น get file*/
+async function fetchPublishFile(){
   await http
     .get(config.API.getPublishFileHistory)
     .then((res) => {
@@ -61,8 +76,7 @@ const fetchPublishFile = async () => {
     });
 };
 
-// โหลดข้อมูลโครงสร้างจาก json
-const treeData = ref<Array<any>>([]);
+/** โหลดข้อมูลโครงสร้างจาก json */
 const loadTreeData = async () => {
   expanded.value = [];
   await http
@@ -83,6 +97,11 @@ const loadTreeData = async () => {
     });
 };
 
+/**
+ * ฟังก์ชันกรองข้อมูลที่ personId เป็น null
+ * @param obj ข้อมูลที่จะถูกกรอง
+ * @returns {boolean} ผลลัพธ์ของการกรองข้อมูล
+ */
 function filterByPersonIdNull(obj: any) {
   if (obj.name === null && obj.isCondition != true) {
     return true;
@@ -94,9 +113,8 @@ function filterByPersonIdNull(obj: any) {
   return false;
 }
 
-// โหลด position
-const placementPosition = ref<any>([]);
-const fetchplacementPosition = async () => {
+/**get data ตำแหน่งงาน */
+async function fetchplacementPosition() {
   await http
     .get(config.API.placementPosition())
     .then((res: any) => {
@@ -105,8 +123,9 @@ const fetchplacementPosition = async () => {
     .catch((e: any) => {
       messageError($q, e);
     });
-};
+}
 
+/** รับค่ามาจาก หน้าหลัก*/
 const props = defineProps({
   personalId: String,
   modal: Boolean,
@@ -116,8 +135,14 @@ const props = defineProps({
   },
   personal: Object,
 });
-// filter หน่วยงาน
-const myFilterMethod = (node: any, filter: string) => {
+
+/**
+ * ฟังก์ชันกรองข้อมูลหน่วยงาน
+ * @param node ข้อมูลที่จะถูกกรอง
+ * @param filter ข้อความที่ใช้ในการกรองข้อมูล
+ * @returns {boolean} ผลลัพธ์ของการกรองข้อมูล
+ */
+function myFilterMethod(node: any, filter: string) {
   const filt = filter;
   return (
     // ((node.name && node.name == null) || !node.name) &&
@@ -139,18 +164,20 @@ const myFilterMethod = (node: any, filter: string) => {
       node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
-};
+}
 
-const validateData = async () => {
+/** validate */
+async function validateData() {
   checkValidate.value = true;
   await myFormPosition.value.validate().then((result: boolean) => {
     if (result == false) {
       checkValidate.value = false;
     }
   });
-};
-// ยืนยันการเลือกหน่วยงาน
-const saveAppoint = async () => {
+}
+
+/** ยืนยันการเลือกหน่วยงาน */
+async function saveAppoint() {
   myFormPosition.value.validate().then(async (result: boolean) => {
     if (result) {
       const dataAppoint = await {
@@ -183,11 +210,10 @@ const saveAppoint = async () => {
       });
     }
   });
-};
+}
 
-const editDataStatus = ref<boolean>(false);
-
-const closeModal = () => {
+/** ปิด dialog */
+function closeModal() {
   if (editDataStatus.value == true) {
     dialogConfirm(
       $q,
@@ -198,9 +224,9 @@ const closeModal = () => {
   } else {
     closeAndClear();
   }
-};
-// clean ข้อมูล
-const closeAndClear = async () => {
+}
+/** clean ข้อมูล */
+async function closeAndClear() {
   await props.close();
   editDataStatus.value = false;
   selected.value = "";
@@ -212,51 +238,13 @@ const closeAndClear = async () => {
   dataForm.positionLineId = "";
   dataForm.positionPathSideId = "";
   dataForm.positionTypeId = "";
-};
-// ตำแหน่งเลขที่
-const posNoOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ตำแหน่ง
-const positionOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ด้าน/สาขา
-const positionPathSideOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ตำแหน่งประเภท
-const positionTypeOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// สายงาน
-const positionLineOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ระดับ
-const positionLevelOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// เลือกหน่วยงาน
-const selectedPosition = async (data: any) => {
+}
+
+/**
+ * เลือกหน่วยงาน
+ * @param data ข้อมูลตำเเหน่งงาน
+ */
+async function selectedPosition(data: any) {
   if (data.name == null && selected.value != data.keyId) {
     editDataStatus.value = true;
     selected.value = data.keyId;
@@ -338,43 +326,21 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
-};
+}
 
-const checkPosition = (val: string) => {
+/**
+ * เช็คตำแหน่ง งาน
+ * @param val id ตำแหน่ง
+ */
+function checkPosition(val: string) {
   const num = placementPosition.value.findIndex((e: string) => e === val);
   return num;
-};
-const personal = ref<any>();
-const expanded = ref<string[]>([]);
-// เมื่อ props เปลี่ยนแปลงจะโหลดหน่วยงาน
-watch(props, () => {
-  expanded.value = [];
-  const dataPersonal = props.personal;
-  fetchplacementPosition();
-  if (dataPersonal) {
-    dataPersonal.map((data: any) => {
-      personal.value = data;
-    });
-  }
-  if (
-    personal.value &&
-    personal.value.draft === false &&
-    personal.value.positionNumber !== null
-  ) {
-    let findData: any = null; 
-    dataRespone.value.map((x: any) => {
-      findData = findByPerson(x);
-      // ถ้ามีตำแต่งจะทำการ  expandedTree
-      if (findData != null) {
-        selectedPosition(findData);
-        for (let i = 3; i <= findData.keyId.length; i += 2) {
-          expanded.value.push(findData.keyId.slice(0, i));
-        }
-      }
-    });
-  }
-});
-// หาหน่วยงานที่เลือก
+}
+
+/**
+ * หาหน่วยงานที่เลือก
+ * @param element
+ */
 function findByPerson(element: any): any {
   if (
     element.positionNumId &&
@@ -395,17 +361,19 @@ function findByPerson(element: any): any {
   }
   return null;
 }
-// ยืนยันการคืนตำแหน่ง
-const clearPosition = () => {
+
+/** ยืนยันการคืนตำแหน่ง */
+function clearPosition() {
   dialogConfirm(
     $q,
     async () => postClearPosition(),
     "ยืนยันการคืนตำแหน่ง",
     "ต้องการยืนยันการคืนตำแหน่งนี้ใช่หรือไม่ ?"
   );
-};
-// คืนตำแหน่ง
-const postClearPosition = async () => {
+}
+
+/** คืนตำแหน่ง */
+async function postClearPosition() {
   showLoader();
   await http
     .post(config.API.clearPosition(personal.value.personalId), {})
@@ -419,7 +387,42 @@ const postClearPosition = async () => {
       hideLoader();
       await closeAndClear();
     });
-};
+}
+
+/** เมื่อ props เปลี่ยนแปลงจะโหลดหน่วยงาน */
+watch(props, () => {
+  expanded.value = [];
+  const dataPersonal = props.personal;
+  fetchplacementPosition();
+  if (dataPersonal) {
+    dataPersonal.map((data: any) => {
+      personal.value = data;
+    });
+  }
+  if (
+    personal.value &&
+    personal.value.draft === false &&
+    personal.value.positionNumber !== null
+  ) {
+    let findData: any = null;
+    dataRespone.value.map((x: any) => {
+      findData = findByPerson(x);
+      // ถ้ามีตำแต่งจะทำการ  expandedTree
+      if (findData != null) {
+        selectedPosition(findData);
+        for (let i = 3; i <= findData.keyId.length; i += 2) {
+          expanded.value.push(findData.keyId.slice(0, i));
+        }
+      }
+    });
+  }
+});
+
+onMounted(async () => {
+  await fetchPublishFile();
+  await loadTreeData();
+  await fetchplacementPosition();
+});
 </script>
 
 <template>
diff --git a/src/modules/05_placement/components/PersonalList/StatCard.vue b/src/modules/05_placement/components/PersonalList/StatCard.vue
index 67ddb48bc..04a8ce1a2 100644
--- a/src/modules/05_placement/components/PersonalList/StatCard.vue
+++ b/src/modules/05_placement/components/PersonalList/StatCard.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-const sizeCard = (val: number) => {
-  if (val === 5) {
-    return "width:15%;";
-  }
-};
+/** รับค่ามาจาก หน้าหลัก*/
 const props = defineProps({
   color: {
     type: String,
@@ -18,6 +14,16 @@ const props = defineProps({
     default: 0,
   },
 });
+
+/**
+ * ปรับขนาด การ์ดตาม ค่าที่ได้รับมา
+ * @param val ตัวเลข
+ */
+function sizeCard(val: number) {
+  if (val === 5) {
+    return "width:15%;";
+  }
+}
 </script>
 <template>
   <div
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 554858b12..b49a688fb 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, watch, reactive, computed } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+
 import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
 import DialogCard from "@/modules/05_placement/components/PersonalList/TableDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
@@ -17,12 +18,14 @@ import router from "@/router";
 
 let roleAdmin = ref<boolean>(false);
 
+/** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   statCard: {
     type: Function,
     default: () => console.log("getStat"),
   },
 });
+
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
@@ -42,7 +45,32 @@ const myForm = ref<any>();
 const files = ref<any>(null);
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const $q = useQuasar(); // show dialog
+const appointModal = ref<boolean>(false);
+const getNumFile = ref(0);
+const dataRes = ref<any>([]);
+const personal = ref<any>([]);
+const displayAdd = ref<boolean>(true);
+const containStatus = ref<boolean>(false);
+const modaladdlist = ref<boolean>(false);
+const selected = ref<any>([]);
+const personal_selected = ref<any>([]);
+const filterlistAdd = ref<string>("");
+const paging = ref<boolean>(true);
 
+// เช็ตสถานะการเลือกคนไปยังหน่วยงาน
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+const dataInfo = reactive({
+  reason: "",
+  reliefDoc: "",
+});
 const {
   messageError,
   showLoader,
@@ -57,6 +85,7 @@ const examId = route.params.examId;
 const examIdString = Array.isArray(examId) ? examId[0] : examId;
 const personalId = ref<string>("");
 
+/** แสดงข้อมูลตารางหลัก */
 const visibleColumns = ref<any[]>([
   "position",
   "fullName",
@@ -70,6 +99,10 @@ const visibleColumns = ref<any[]>([
   "draft",
   "positionCandidate",
 ]);
+
+/** แสดงข้แมูลใน ตาราง
+ * ตาราง ส่งรายชื่อไปหน่วยงาน
+ */
 const visibleColumnslist = ref<any>([
   "fullName",
   "examNumber",
@@ -81,6 +114,7 @@ const visibleColumnslist = ref<any>([
   "positionCandidate",
 ]);
 
+/**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -172,8 +206,12 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-// แปลงสถานะพนักงาน
-const convertBmaOfficer = (val: string) => {
+
+/**
+ * แปลงสถานะพนักงาน
+ * @param val type
+ */
+function convertBmaOfficer(val: string) {
   switch (val) {
     case "OFFICER":
       return "ขรก.กทม. สามัญ";
@@ -184,9 +222,13 @@ const convertBmaOfficer = (val: string) => {
     default:
       return "บุคคลภายนอก";
   }
-};
-// แปลงสถานะบรรจุ
-const convertContainStatus = (val: string) => {
+}
+
+/**
+ * แปลงสถานะบรรจุ
+ * @param val type
+ */
+function convertContainStatus(val: string) {
   switch (val) {
     case "UN-CONTAIN":
       return "ยังไม่บรรจุ";
@@ -199,9 +241,13 @@ const convertContainStatus = (val: string) => {
     default:
       return "-";
   }
-};
-// แปลงสถานะการส่งรายชื่อ
-const convertDraft = (val: boolean) => {
+}
+
+/**
+ * แปลงสถานะการส่งรายชื่อ
+ * @param val true/false
+ */
+function convertDraft(val: boolean) {
   switch (val) {
     case false:
       return "รอส่งตัว";
@@ -210,9 +256,10 @@ const convertDraft = (val: boolean) => {
     default:
       return "-";
   }
-};
-// เรียกข้อมูลรายชื่อผู้สอบผ่าย
-const getTable = async () => {
+}
+
+/**เรียกข้อมูลรายชื่อผู้สอบผ่าย */
+async function getTable() {
   showLoader();
   await http
     .get(config.API.personalList(examIdString))
@@ -273,11 +320,10 @@ const getTable = async () => {
     .finally(async () => {
       hideLoader();
     });
-};
+}
 
-const appointModal = ref<boolean>(false);
-// ยืนยันการผ่อนผัน
-const saveDeferment = async () => {
+/**ยืนยันการผ่อนผัน */
+async function saveDeferment() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       dialogConfirm(
@@ -288,9 +334,9 @@ const saveDeferment = async () => {
       );
     }
   });
-};
-//  post ผ่อนผัน
-const postDeferment = async () => {
+}
+/**post ผ่อนผัน */
+async function postDeferment() {
   const formData = new FormData();
   formData.append("personalId", personalId.value);
   formData.append("note", userNote.value);
@@ -311,9 +357,10 @@ const postDeferment = async () => {
       modalDefermentDisclaim.value = false;
       hideLoader();
     });
-};
-// ยืนยันการสละสิทธิ์
-const saveDisclaim = async () => {
+}
+
+/**ยืนยันการสละสิทธิ์ */
+async function saveDisclaim() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       dialogConfirm(
@@ -324,9 +371,10 @@ const saveDisclaim = async () => {
       );
     }
   });
-};
-// post การสละสิทธิ์
-const postDisclaimf = async () => {
+}
+
+/**post การสละสิทธิ์ */
+async function postDisclaimf() {
   const dataPost = {
     note: userNote.value,
     personId: personalId.value,
@@ -347,33 +395,40 @@ const postDisclaimf = async () => {
       modalDefermentDisclaim.value = false;
       hideLoader();
     });
-};
+}
 
-const clickEditRow = () => {
+/** เปิด dialog */
+function clickEditRow() {
   editRow.value = true;
-};
+}
 
-const getClass = (val: boolean) => {
+/** เปลี่ยน class true/false */
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer ": val,
     "full-width cursor-pointer": !val,
   };
-};
-// เรียกดูรายละเอียดข้อมูล
-const selectData = (pid: string, draft: string) => {
-  if (roleAdmin.value && draft === 'ส่งตัวแล้ว') {
+}
+
+/**
+ * เรียกดูรายละเอียดข้อมูล
+ * @param pid id personal
+ * @param draft status
+ */
+function selectData(pid: string, draft: string) {
+  if (roleAdmin.value && draft === "ส่งตัวแล้ว") {
     personalId.value = pid;
     modal.value = true;
   } else {
     router.push("/placement/personal-detail/" + pid);
   }
-};
-const getNumFile = ref(0);
-const dataInfo = reactive({
-  reason: "",
-  reliefDoc: "",
-});
-//แก้ไขข้อมูล
+}
+
+/**
+ * แก้ไขข้อมูล
+ * @param props rows data
+ * @param action type
+ */
 const editDetail = (
   props: PartialTableName,
   action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
@@ -421,36 +476,42 @@ const editDetail = (
   }
 };
 
-const dataRes = ref<any>([]);
-const personal = ref<any>([]);
-const openAppointModal = (pid: string) => {
+/**
+ * เปิด dialog
+ * @param pid id personal
+ */
+function openAppointModal(pid: string) {
   appointModal.value = true;
   personalId.value = pid;
   personal.value = dataRes.value.filter(
     (e: any) => e.personalId == personalId.value
   );
-};
+}
 
-const clickCloseModalTree = async () => {
+/** close dialog */
+async function clickCloseModalTree() {
   await getTable();
   appointModal.value = false;
   props.statCard();
-};
+}
 
-const validateData = async () => {
+/** validate */
+async function validateData() {
   checkValidate.value = true;
   await myForm.value.validate().then((result: boolean) => {
     if (result == false) {
       checkValidate.value = false;
     }
   });
-};
+}
 
-const clickCloseSendModal = () => {
+/** ปิด dialog */
+function clickCloseSendModal() {
   modaladdlist.value = false;
-};
+}
 
-const clickClose = async () => {
+/** validate */
+async function clickClose() {
   userNote.value = "";
   if (editRow.value == true) {
     dialogConfirm(
@@ -469,45 +530,10 @@ const clickClose = async () => {
     modalwaitInfo.value = false;
     modal.value = false;
   }
-};
-const displayAdd = ref<boolean>(true);
-onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    if (roleAdmin.value === false) {
-      displayAdd.value = false;
-      visibleColumns.value = [
-        "position",
-        "fullName",
-        "examNumber",
-        "idCard",
-        "positionNumber",
-        "organizationName",
-        "reportingDate",
-        "bmaOfficer",
-        "statusName",
-        "positionCandidate",
-      ];
-    }
-  }
-  await getTable();
-});
+}
 
-const containStatus = ref<boolean>(false);
-watch(containStatus, () => {
-  if (containStatus.value) {
-    rows.value = rowsAll.value.filter((x: any) => x.statusId == "CONTAIN");
-  } else {
-    rows.value = rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
-  }
-});
-const modaladdlist = ref<boolean>(false);
-const selected = ref<any>([]);
-const personal_selected = ref<any>([]);
-const filterlistAdd = ref<string>("");
-const paging = ref<boolean>(true);
-// ยืนยันส่งราชชื่อไปหน่วยงาน
-const savelist = () => {
+/** ยืนยันส่งราชชื่อไปหน่วยงาน */
+function savelist() {
   selected.value.map((e: any) => {
     personal_selected.value.push(e.personalId);
   });
@@ -533,26 +559,50 @@ const savelist = () => {
       "ต้องการยืนยันการส่งรายชื่อไปยังหน่วยงานหรือไม่?"
     );
   }
-};
-// เปิด popup ส่งรายชื่อไปยังหน่วยงาน
-const handleModalAddListUpdate = (val: boolean) => {
+}
+
+/**
+ * เปิด popup ส่งรายชื่อไปยังหน่วยงาน
+ * @param val true/false
+ */
+function handleModalAddListUpdate(val: boolean) {
   modaladdlist.value = val;
   (selected.value = []), (personal_selected.value = []);
-};
-// เช็ตสถานะการเลือกคนไปยังหน่วยงาน
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-const paginationLabel = (start: number, end: number, total: number) => {
+}
+
+function paginationLabel(start: number, end: number, total: number) {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
-};
+}
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+watch(containStatus, () => {
+  if (containStatus.value) {
+    rows.value = rowsAll.value.filter((x: any) => x.statusId == "CONTAIN");
+  } else {
+    rows.value = rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
+  }
+});
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    if (roleAdmin.value === false) {
+      displayAdd.value = false;
+      visibleColumns.value = [
+        "position",
+        "fullName",
+        "examNumber",
+        "idCard",
+        "positionNumber",
+        "organizationName",
+        "reportingDate",
+        "bmaOfficer",
+        "statusName",
+        "positionCandidate",
+      ];
+    }
+  }
+  await getTable();
 });
 </script>
 <template>
@@ -642,12 +692,14 @@ const pagination = ref({
                   </div>
                 </div>
               </div>
+
               <div v-else>
                 <div class="col-4">
                   <div class="text-weight-medium">-</div>
                 </div>
               </div>
             </template>
+
             <template v-else-if="col.name === 'positionCandidate'">
               <div
                 class="text-weight-medium"
@@ -659,6 +711,7 @@ const pagination = ref({
                 {{ props.row.positionCandidate }}
               </div>
             </template>
+
             <template
               v-else-if="col.name === 'reportingDate' && col.value !== '-'"
             >
@@ -666,16 +719,19 @@ const pagination = ref({
                 {{ props.row.reportingDate }}
               </div>
             </template>
+
             <template v-else-if="col.name === 'bmaOfficer'">
               <div class="text-weight-medium">
                 {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
               </div>
             </template>
+
             <template v-else-if="col.name === 'draft'">
               <div class="text-weight-medium">
                 {{ props.row.draft }}
               </div>
             </template>
+
             <template v-else-if="col.name === 'statusName'">
               <div class="text-weight-medium">
                 {{ props.row.statusName }}
@@ -738,6 +794,7 @@ const pagination = ref({
                     </q-item-section>
                     <q-item-section>ขอผ่อนผัน</q-item-section>
                   </q-item>
+
                   <q-item
                     v-else-if="
                       props.row.deferment === true &&
@@ -760,6 +817,7 @@ const pagination = ref({
                     </q-item-section>
                     <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
                   </q-item>
+
                   <q-separator />
                   <q-item
                     v-if="
@@ -783,6 +841,7 @@ const pagination = ref({
                     </q-item-section>
                     <q-item-section>สละสิทธิ์</q-item-section>
                   </q-item>
+
                   <q-item
                     v-else-if="props.row.statusId === 'DISCLAIM'"
                     clickable
diff --git a/src/modules/05_placement/components/PersonalList/TableDetail.vue b/src/modules/05_placement/components/PersonalList/TableDetail.vue
index 14471175f..84bdf2e4b 100644
--- a/src/modules/05_placement/components/PersonalList/TableDetail.vue
+++ b/src/modules/05_placement/components/PersonalList/TableDetail.vue
@@ -1,15 +1,23 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
-const $q = useQuasar();
 
+const rows = ref<any[]>([]);
+const myForm = ref<any>([]);
+const selection = ref<any>([]);
+const personalForm = ref<any>([]);
+
+/** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
   close: {
@@ -26,13 +34,7 @@ const props = defineProps({
   },
 });
 
-const rows = ref<any[]>([]);
-//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
-// const graduationDate = new Date(graduationExample);
-// rows.value[0].graduation = date2Thai(graduationDate, false, false);
-
-//--------------------------------------------------------------------//
-
+/**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "university",
@@ -75,17 +77,9 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const myForm = ref<any>([]);
-const personalForm = ref<any>([]);
-const selection = ref<any>([]);
-// เมื่อ props.Modal จะเรียกข้อมูลการศึกษา
-watch(props, () => {
-  if (props.Modal === true) {
-    fetchData();
-  }
-});
-// ข้อมูลการศึกษา
-const fetchData = async () => {
+
+/** get ข้อมูลการศึกษา */
+async function fetchData(){
   showLoader();
   await http
     .get(config.API.getDatapersonal(props.personalId))
@@ -108,7 +102,11 @@ const fetchData = async () => {
     });
 };
 
-const formBmaofficer = (val: string) => {
+/**
+ * convert text
+ * @param val type
+ */
+function formBmaofficer(val: string){
   switch (val) {
     case "OFFICER":
       return "ขรก.กทม. สามัญ";
@@ -120,12 +118,20 @@ const formBmaofficer = (val: string) => {
       return "";
   }
 };
-// ปิด POPUP ข้อมูล
-const close = async () => {
+
+/** ปิด POPUP ข้อมูล */
+async function close(){
   props.close();
   selection.value = [];
   rows.value = [];
 };
+
+/** เมื่อ props.Modal จะเรียกข้อมูลการศึกษา */ 
+watch(props, () => {
+  if (props.Modal === true) {
+    fetchData();
+  }
+});
 </script>
 <template>
   <q-dialog v-model="props.Modal" persistent>
@@ -137,6 +143,7 @@ const close = async () => {
             @click="close"
           />
         </div>
+
         <q-separator />
 
         <div class="contanier-box-main">
@@ -152,11 +159,13 @@ const close = async () => {
                   {{ formBmaofficer(personalForm.bmaOfficer) }}
                 </span>
               </div>
+
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">
                   <div class="q-pb-md">เลขประจำตัวประชาชน</div>
                   <div>วัน/เดือน/ปีเกิด</div>
                 </div>
+
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
                     {{ personalForm.idCard }}
@@ -165,6 +174,7 @@ const close = async () => {
                     {{ date2Thai(personalForm.dateOfBirth) }}
                   </div>
                 </div>
+
                 <div class="col-2 header-sub-text">
                   <div class="q-pb-md">ชื่อ-นามสกุล</div>
                   <div>เพศ</div>
@@ -177,9 +187,11 @@ const close = async () => {
                     {{ personalForm.gender }}
                   </div>
                 </div>
+                
               </div>
             </q-card>
           </div>
+
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
@@ -191,6 +203,7 @@ const close = async () => {
               </div>
             </q-card>
           </div>
+
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การศึกษา</div>
@@ -209,58 +222,11 @@ const close = async () => {
               </q-table>
             </q-card>
           </div>
+          
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การสอบ</div>
               <div class="row q-pa-xs">
-                <!-- <div class="col-6">
-                  <q-card class="card-exam q-pa-sm">
-                    <div class="row">
-                      <div class="col-4 q-pa-xs header-sub-text-exam">
-                        <div>ประเภท</div>
-                        <div>ภาค ก</div>
-                        <div>ภาค ข</div>
-                        <div>ภาค ค</div>
-                        <div>รวมทั้งหมด</div>
-                      </div>
-                      <div class="col-4 q-pa-xs text-right">
-                        <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotalA }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotalB }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotalC }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointTotal }}
-                        </div>
-                      </div>
-                      <div
-                        class="col-4 q-pa-xs header-sub-text-exam-2 text-right"
-                      >
-                        <div class="header-sub-text-exam-2 text-right">
-                          ผลการสอบ
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointA }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointB }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.pointC }}
-                        </div>
-                        <div class="sub-text-exam">
-                          {{ personalForm.point }}
-                        </div>
-                      </div>
-                    </div>
-                  </q-card>
-                </div>
-                <div class="col-1"></div> -->
                 <div class="col-6 q-pt-sm q-pl-lg">
                   <div class="row">
                     <div class="col-7 header-sub-text">
diff --git a/src/modules/05_placement/components/PersonalList/TableView.vue b/src/modules/05_placement/components/PersonalList/TableView.vue
index 8eef688fe..ee0730c42 100644
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import { QTooltip, useQuasar } from "quasar";
+
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
+
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -95,18 +97,15 @@ const props = defineProps({
   containStatus: Boolean,
   roleAdmin: Boolean,
 });
+
 const pagination = ref({
   sortBy: "examNumber",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const refresh = () => props.refresh();
 
+/** ส่งค่า*/
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
@@ -117,25 +116,42 @@ const emit = defineEmits([
   "update-modaladdlist",
 ]);
 
-const updateInput = (value: any) => {
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+/**
+ * update ค่าที่ค้นหา
+ * @param value string
+ */
+function updateInput(value: any) {
   emit("update:inputfilter", value);
-};
-const updateVisible = (value: any) => {
+}
+
+/** update ข้อมูลที่ เเสดง */
+function updateVisible(value: any) {
   emit("update:inputvisible", value);
-};
+}
 
-const updateContain = (value: any) => {
+/**
+ * แสดงสถานะบรรจุแล้ว
+ * @param value true/false
+ */
+function updateContain(value: any) {
   emit("update:containfilter", value);
-};
+}
 
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+/** reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา */
+function resetFilter() {
   emit("update:inputfilter", "");
   filterRef.value.focus();
-};
-const updateModaladdlist = () => {
+}
+
+/** ส่งรายชื่อไปยังหน่วยงาน */
+function updateModaladdlist() {
   emit("update-modaladdlist", true);
-};
+}
 </script>
 
 <template>