From 4678ead38ef9f3c7e2c6cf4c94dac83f527b237e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 19 Sep 2024 15:02:44 +0700
Subject: [PATCH 1/2] Refactoring code module 05_placement

---
 .../{Detail.vue => AppointEmployeeDetail.vue} |   45 +-
 .../AppointEmployee/DialogHeader.vue          |   34 -
 .../{Dialogbody.vue => DialogOrders.vue}      |  135 +-
 .../components/AppointEmployee/Modal.vue      |  700 ----------
 .../{Detail.vue => AppointMentDetail.vue}     |   60 +-
 .../AppointMent/AppointmentModal.vue          |  715 ----------
 .../components/AppointMent/DialogHeader.vue   |   34 -
 .../{Dialogbody.vue => DialogOrders.vue}      |   33 +-
 .../ChangePosition/DialogChange.vue           |  409 ------
 .../ChangePosition/DialogHeader.vue           |   34 -
 .../components/ChangePosition/DialogRound.vue |   80 --
 .../components/ChangePosition/Main.vue        |  405 ------
 .../components/ChangePosition/Modal.vue       |  716 -----------
 .../ChangePosition/PersonalDetail.vue         |  406 ------
 .../ChangePosition/PersonalList.vue           |  506 --------
 .../ChangePosition/SendToCommand.vue          |  301 -----
 .../DialogOrders.vue}                         |   26 +-
 .../HelpGovernmentDetail.vue}                 |   23 +-
 .../components/Other/DialogHeader.vue         |   34 -
 .../{Dialogbody.vue => DialogOrders.vue}      |   46 +-
 .../Other/{Detail.vue => OtherDetail.vue}     |   38 +-
 .../components/Other/OtherModal.vue           |  783 -----------
 .../{Detail.vue => DetailMain.vue}            |  140 +-
 .../PersonalDetail/DialogFooter.vue           |   14 +-
 .../PersonalDetail/DialogHeader.vue           |   27 -
 .../PersonalDetail/Information/Address.vue    |  174 ++-
 .../PersonalDetail/Information/Certicate.vue  |  117 +-
 .../PersonalDetail/Information/Document.vue   |  105 +-
 .../{ => Information}/Education.vue           |  188 ++-
 .../{ => Information}/ExamResult.vue          |    0
 .../PersonalDetail/Information/Family.vue     |   81 +-
 .../Information/Information.vue               |  116 +-
 .../{ => Information}/Qualification.vue       |   34 +-
 .../TableEducation.vue}                       |   25 +-
 .../PersonalDetail/Information/layout.vue     |   65 -
 .../components/PersonalList/CardPosition.vue  |   27 +-
 .../components/PersonalList/DialogDetail.vue  |   64 +-
 .../PersonalList/PersonalListPage.vue         |   32 +-
 .../components/PersonalList/Table.vue         |  147 +--
 .../components/Receive/AddEmployee/Main.vue   |  927 -------------
 .../components/Receive/DialogFooter.vue       |   68 -
 .../components/Receive/DialogHeader.vue       |   34 -
 .../{Dialogbody.vue => DialogOrders.vue}      |  142 +-
 .../components/Receive/FormAdd.vue            |   74 --
 .../components/Receive/ReceiveAddPerson.vue   |  771 +++++++++++
 .../components/Receive/receiveDetail.vue      | 1145 +++++++++++++++--
 .../components/Receive/receiveDetail2.vue     | 1026 ---------------
 .../components/Relocation/RelocationMain.vue  |  733 -----------
 .../components/Relocation/RelocationModal.vue |  791 ------------
 .../components/Relocation/RelocationbyId.vue  |  526 --------
 .../{Dialogbody.vue => DialogOrders.vue}      |    5 +-
 ...epatriatebyId.vue => RepatriateDetail.vue} |    0
 .../components/Transfer/TransferDetail.vue    |   20 +-
 .../{Other => probation}/Criterion.vue        |    0
 .../probation/FormEvaluation/FormEvaluate.vue |    2 +-
 .../FormEvaluation/FormEvaluateAdd.vue        |    2 +-
 .../FormEvaluation/FormEvaluateScore.vue      |    2 +-
 .../FormEvaluation/FormEvaluateScoreAdd.vue   |    2 +-
 .../FormEvaluation/FormSaveResult.vue         |    2 +-
 .../FormEvaluation/FormSaveResultAdd.vue      |    2 +-
 .../FormSaveResultAddCommander.vue            |    2 +-
 .../FormEvaluation/FormSaveResultCommader.vue |    2 +-
 .../components/probation/MainProbation.vue    |    1 +
 .../components/probation/SummarySurvey.vue    |    2 +-
 .../05_placement/interface/index/Main.ts      |    9 +
 .../05_placement/interface/response/Main.ts   |  101 +-
 src/modules/05_placement/router.ts            |  136 +-
 src/modules/05_placement/views/01_Main.vue    |    6 +-
 .../05_placement/views/02_transferMain.vue    |   11 +-
 .../05_placement/views/03_receiveMain.vue     |  149 ++-
 .../04_helpGovernmentMain.vue}                |   56 +-
 .../05_repatriateMain.vue}                    |   55 +-
 .../06_appointPromoteMain.vue}                |   69 +-
 .../07_appointEmployeeMain.vue}               |   78 +-
 .../Other/Main.vue => views/08_otherMain.vue} |   35 +-
 75 files changed, 3110 insertions(+), 10795 deletions(-)
 rename src/modules/05_placement/components/AppointEmployee/{Detail.vue => AppointEmployeeDetail.vue} (92%)
 delete mode 100644 src/modules/05_placement/components/AppointEmployee/DialogHeader.vue
 rename src/modules/05_placement/components/AppointEmployee/{Dialogbody.vue => DialogOrders.vue} (83%)
 delete mode 100644 src/modules/05_placement/components/AppointEmployee/Modal.vue
 rename src/modules/05_placement/components/AppointMent/{Detail.vue => AppointMentDetail.vue} (91%)
 delete mode 100644 src/modules/05_placement/components/AppointMent/AppointmentModal.vue
 delete mode 100644 src/modules/05_placement/components/AppointMent/DialogHeader.vue
 rename src/modules/05_placement/components/AppointMent/{Dialogbody.vue => DialogOrders.vue} (96%)
 delete mode 100644 src/modules/05_placement/components/ChangePosition/DialogChange.vue
 delete mode 100644 src/modules/05_placement/components/ChangePosition/DialogHeader.vue
 delete mode 100644 src/modules/05_placement/components/ChangePosition/DialogRound.vue
 delete mode 100644 src/modules/05_placement/components/ChangePosition/Main.vue
 delete mode 100644 src/modules/05_placement/components/ChangePosition/Modal.vue
 delete mode 100644 src/modules/05_placement/components/ChangePosition/PersonalDetail.vue
 delete mode 100644 src/modules/05_placement/components/ChangePosition/PersonalList.vue
 delete mode 100644 src/modules/05_placement/components/ChangePosition/SendToCommand.vue
 rename src/modules/05_placement/components/{helpgovernment/Dialogbody.vue => Help-Government/DialogOrders.vue} (96%)
 rename src/modules/05_placement/components/{helpgovernment/governmentDetail.vue => Help-Government/HelpGovernmentDetail.vue} (97%)
 delete mode 100644 src/modules/05_placement/components/Other/DialogHeader.vue
 rename src/modules/05_placement/components/Other/{Dialogbody.vue => DialogOrders.vue} (93%)
 rename src/modules/05_placement/components/Other/{Detail.vue => OtherDetail.vue} (94%)
 delete mode 100644 src/modules/05_placement/components/Other/OtherModal.vue
 rename src/modules/05_placement/components/PersonalDetail/{Detail.vue => DetailMain.vue} (89%)
 delete mode 100644 src/modules/05_placement/components/PersonalDetail/DialogHeader.vue
 rename src/modules/05_placement/components/PersonalDetail/{ => Information}/Education.vue (92%)
 rename src/modules/05_placement/components/PersonalDetail/{ => Information}/ExamResult.vue (100%)
 rename src/modules/05_placement/components/PersonalDetail/{ => Information}/Qualification.vue (85%)
 rename src/modules/05_placement/components/PersonalDetail/{Table.vue => Information/TableEducation.vue} (94%)
 delete mode 100644 src/modules/05_placement/components/PersonalDetail/Information/layout.vue
 delete mode 100644 src/modules/05_placement/components/Receive/AddEmployee/Main.vue
 delete mode 100644 src/modules/05_placement/components/Receive/DialogFooter.vue
 delete mode 100644 src/modules/05_placement/components/Receive/DialogHeader.vue
 rename src/modules/05_placement/components/Receive/{Dialogbody.vue => DialogOrders.vue} (87%)
 delete mode 100644 src/modules/05_placement/components/Receive/FormAdd.vue
 create mode 100644 src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
 delete mode 100644 src/modules/05_placement/components/Receive/receiveDetail2.vue
 delete mode 100644 src/modules/05_placement/components/Relocation/RelocationMain.vue
 delete mode 100644 src/modules/05_placement/components/Relocation/RelocationModal.vue
 delete mode 100644 src/modules/05_placement/components/Relocation/RelocationbyId.vue
 rename src/modules/05_placement/components/Repatriate/{Dialogbody.vue => DialogOrders.vue} (99%)
 rename src/modules/05_placement/components/Repatriate/{RepatriatebyId.vue => RepatriateDetail.vue} (100%)
 rename src/modules/05_placement/components/{Other => probation}/Criterion.vue (100%)
 rename src/modules/05_placement/{components/helpgovernment/mainHelp.vue => views/04_helpGovernmentMain.vue} (90%)
 rename src/modules/05_placement/{components/Repatriate/RepatriateMain.vue => views/05_repatriateMain.vue} (92%)
 rename src/modules/05_placement/{components/AppointMent/Main.vue => views/06_appointPromoteMain.vue} (91%)
 rename src/modules/05_placement/{components/AppointEmployee/Main.vue => views/07_appointEmployeeMain.vue} (90%)
 rename src/modules/05_placement/{components/Other/Main.vue => views/08_otherMain.vue} (95%)

diff --git a/src/modules/05_placement/components/AppointEmployee/Detail.vue b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
similarity index 92%
rename from src/modules/05_placement/components/AppointEmployee/Detail.vue
rename to src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
index fdc77eae0..c9ee1855f 100644
--- a/src/modules/05_placement/components/AppointEmployee/Detail.vue
+++ b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
@@ -11,7 +12,6 @@ import config from "@/app.config";
  * importType
  */
 import type { QForm } from "quasar";
-import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type {
   appointmentData,
   ResponseData,
@@ -37,8 +37,7 @@ const {
   dialogConfirm,
 } = mixin;
 
-const modalPersonal = ref<boolean>(false);
-const dataProfile = ref<DataProfile>();
+const dataProfile = ref<DataProfile>(); //ข้อมุลส่วนตัว
 
 const appointment = ref<appointmentData>({
   citizenId: "",
@@ -49,42 +48,33 @@ const appointment = ref<appointmentData>({
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
 const profileId = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-const educationOld = ref<string>("");
-const reason = ref<string>("");
-const date = ref<Date | null>(null);
+const educationOld = ref<string>(""); //วุฒิการศึกษา
+const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัดเดิม
+const positionTypeOld = ref<string>(""); //ประเภทตำแหน่ง
+const positionLevelOld = ref<string>(""); //ระดับตำแหน่ง
+const posNo = ref<string>(""); //เลขที่
+const salary = ref<number>(0); //เงินเดือน
+const date = ref<Date | null>(null); //ดำรงตำแหน่งในระดับปัจจุบันเมื่อ
+const reason = ref<string>(""); //หมายเหตุ
 const status = ref<string>("");
-const avatar = ref<string>("");
-
-const title = ref<ResponseTitle>({
-  fullname: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionTypeOld: "",
-});
+const fullName = ref<string>("");
 
 /**
  * fetch รายละเอียดการปรับระดับชั้นงานลูกจ้าง
  */
-function fecthappointmentByid() {
+async function fecthappointmentByid() {
   showLoader();
-  http
+  await http
     .get(config.API.appointEmployeeByid(paramsId.toString()))
     .then((res: ResponseData) => {
       dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
       appointment.value = data;
       profileId.value = data.profileId;
-      title.value.fullname = `${data.prefix === null ? "" : data.prefix}${
+      fullName.value = `${data.prefix === null ? "" : data.prefix}${
         data.firstName ?? "-"
       } ${data.lastName ?? "-"}`;
-      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
-      title.value.positionLevelOld = data.positionLevelOld ?? "-";
-      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+
       (status.value = data.status),
         (educationOld.value = data.educationOld ?? "-");
       organizationPositionOld.value = data.organizationPositionOld;
@@ -94,7 +84,6 @@ function fecthappointmentByid() {
       salary.value = data.salary ?? 0;
       reason.value = data.reason;
       date.value = data.positionDate;
-      avatar.value = data.avatar ?? "";
     })
     .catch((e) => {
       messageError($q, e);
@@ -186,7 +175,7 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.push(`/placement/appoint-employee`)"
     />
-    รายละเอียดการปรับระดับชั้นงานลูกจ้าง{{ title.fullname }}
+    รายละเอียดการปรับระดับชั้นงานลูกจ้าง{{ fullName }}
   </div>
 
   <CardProfile :data="dataProfile as DataProfile" :type="'employee'" />
diff --git a/src/modules/05_placement/components/AppointEmployee/DialogHeader.vue b/src/modules/05_placement/components/AppointEmployee/DialogHeader.vue
deleted file mode 100644
index 82ba60d98..000000000
--- a/src/modules/05_placement/components/AppointEmployee/DialogHeader.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  close: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const close = async () => {
-  props.close();
-};
-</script>
-<template>
-  <q-toolbar class="q-py-md">
-    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
-    <q-btn
-      icon="close"
-      unelevated
-      round
-      dense
-      @click="close"
-      style="color: #ff8080; background-color: #ffdede"
-    />
-  </q-toolbar>
-</template>
-
-<style scoped lang="scss">
-.header-text {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 26px;
-  color: #35373c;
-}
-</style>
diff --git a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue b/src/modules/05_placement/components/AppointEmployee/DialogOrders.vue
similarity index 83%
rename from src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
rename to src/modules/05_placement/components/AppointEmployee/DialogOrders.vue
index 63ee5c44f..854a13966 100644
--- a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointEmployee/DialogOrders.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type { UserData } from "@/modules/05_placement/interface/response/AppointMent";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import { useTransferDataStore } from "@/modules/05_placement/store";
-const storeFn = useTransferDataStore();
-const { statusText } = storeFn;
-
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -24,24 +21,23 @@ const {
   date2Thai,
 } = mixin;
 
-const $q = useQuasar();
-const selected = ref<[]>([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 const props = defineProps({
   Modal: Boolean,
   clickClose: Function,
-  fecthlistappointment: Function,
+  fetchData: Function,
   nextPage: Function,
   optionsType: Array,
   rows2: Array,
   filterKeyword2: String,
   type: String,
 });
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:type",
+  "update:selected",
+]);
+
+const selected = ref<[]>([]); //รายากรที่เลือก
 const visibleColumns2 = ref<string[]>([
   "no",
   "citizenId",
@@ -49,6 +45,11 @@ const visibleColumns2 = ref<string[]>([
   "organizationName",
   "dateOfBirth",
 ]);
+
+/**
+ * อัปเดทคค้นหา
+ * @param value ตำค้นหา
+ */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -98,62 +99,62 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-// const pageNext = (item: object) => {
-//   props.nextPage?.(item);
-// };
-const emit = defineEmits([
-  "update:filterKeyword2",
-  "update:type",
-  "update:selected",
-]);
-const updateInput = (value: any) => {
+
+function updateInput(value: any) {
   emit("update:filterKeyword2", value);
-};
+}
 
-const updateInputType = (value: string) => {
-  emit("update:type", value);
-};
-//รีเซ็ตค่าในช่องค้นหา
-const Reset = () => {
+/**
+ * รีเซ็ตค่าในช่องค้นหา
+ */
+function Reset() {
   emit("update:filterKeyword2", "");
-};
-//เปิด modal ยืนยัน
-const clickAddlist = () => {
-  dialogConfirm($q, () => createdAppoint());
-};
+}
 
-//อัพเดต ส่งไปออกคำสั่ง
-const createdAppoint = async () => {
-  let pId: string[] = [];
-  let Type = props.type as string;
-  selected.value.forEach((e: UserData) => {
-    pId.push(e.id);
-  });
-  let data = {
-    id: pId,
-  };
-  showLoader();
-  await http
-    .post(config.API.appointEmployeeOrder(Type), data)
-    .then(async () => {
-      await props.fecthlistappointment?.();
-      await props.clickClose?.();
-      await success($q, "บันทึกสำเร็จ");
-      selected.value = [];
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+/**
+ * ฟังก์ชันยืนยันส่งไปออกคำสั่ง
+ */
+function clickAddlist() {
+  dialogConfirm($q, async () => {
+    let pId: string[] = [];
+    let Type = props.type as string;
+    selected.value.forEach((e: UserData) => {
+      pId.push(e.id);
     });
-};
+    let data = {
+      id: pId,
+    };
+    showLoader();
+    await http
+      .post(config.API.appointEmployeeOrder(Type), data)
+      .then(async () => {
+        await props.fetchData?.();
+        await props.clickClose?.();
+        await success($q, "บันทึกสำเร็จ");
+        selected.value = [];
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
 
-watchEffect(() => {
-  if (props.Modal === true) {
-    selected.value = [];
+/**
+ * เมื่อ props.modal เป็น true
+ *
+ * กำหนดให้  selected เป็นค่าว่าง
+ */
+watch(
+  () => props.Modal,
+  () => {
+    if (props.Modal === true) {
+      selected.value = [];
+    }
   }
-});
+);
 </script>
 <template>
   <q-dialog v-model="props.Modal">
@@ -297,7 +298,7 @@ watchEffect(() => {
           label="ส่งไปออกคำสั่ง"
           @click="clickAddlist"
           color="public"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           ><q-tooltip>ส่งไปออกคำสั่ง</q-tooltip></q-btn
         >
       </q-card-actions>
diff --git a/src/modules/05_placement/components/AppointEmployee/Modal.vue b/src/modules/05_placement/components/AppointEmployee/Modal.vue
deleted file mode 100644
index 9be8f0f97..000000000
--- a/src/modules/05_placement/components/AppointEmployee/Modal.vue
+++ /dev/null
@@ -1,700 +0,0 @@
-<script setup lang="ts">
-import { useQuasar, QForm } from "quasar";
-import { onMounted, reactive, ref, watch } from "vue";
-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";
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  date2Thai,
-  hideLoader,
-  messageError,
-  showLoader,
-  success,
-  dialogConfirm,
-} = mixin; //ฟังก์ชันกลางที่เรียกใช้
-
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
-
-const checkValidate = ref<boolean>(false);
-const myFormPosition = ref<any>();
-const selected = ref<string>("");
-const selectedFile = ref<string>("");
-const dataRespone = ref<any>();
-const personal = ref<any>();
-const expanded = ref<string[]>([]);
-const treeData = ref<Array<any>>([]);
-const placementPosition = ref<any>([]);
-const search = ref<string>("");
-const filterRef = ref<any>(null);
-const id = ref<string>("");
-
-const editDataStatus = ref<boolean>(false);
-// Set form field
-let dataForm = reactive({
-  personalId: "",
-  containDate: new Date(),
-  posNoId: "",
-  positionId: "",
-  positionLevelId: "",
-  positionLineId: "",
-  positionPathSideId: "",
-  positionTypeId: "",
-});
-
-onMounted(async () => {
-  // await fetchPublishFile();
-  // await loadTreeData();
-  await fetchplacementPosition();
-});
-// const fetchPublishFile = async () => {
-//   await http
-//     .get(config.API.getPublishFileHistory)
-//     .then((res) => {
-//       let data = res.data.result;
-//       selectedFile.value = data[0].fileName;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//     });
-// };
-// โหลดข้อมูลโครงสร้างจาก json
-// const loadTreeData = async () => {
-//   expanded.value = [];
-//   await http
-//     .get(`${config.s3ClusterUrl}${selectedFile.value}`)
-//     .then((res: any) => {
-//       treeData.value = res.data;
-//       dataRespone.value = res.data;
-//       // Filter objects with "name" null
-//       const filteredData = res.data.filter(filterByPersonIdNull);
-//       treeData.value = filteredData;
-//     })
-//     .catch((e: any) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-function filterByPersonIdNull(obj: any) {
-  if (obj.name === null && obj.isCondition != true) {
-    return true;
-  }
-  if (obj.children && obj.children.length > 0) {
-    obj.children = obj.children.filter(filterByPersonIdNull);
-    return obj.children.length > 0;
-  }
-  return false;
-}
-// โหลด position
-const fetchplacementPosition = async () => {
-  await http
-    .get(config.API.apppointmentPositionUse())
-    .then((res: any) => {
-      placementPosition.value = res.data.result;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
-};
-const props = defineProps({
-  personalId: String,
-  modal: Boolean,
-  close: {
-    type: Function,
-    default: () => console.log("close modal"),
-  },
-  personal: Object,
-});
-const myFilterMethod = (node: any, filter: string) => {
-  const filt = filter;
-  return (
-    (node.name && node.name.indexOf(filt) > -1) ||
-    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-    (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
-      node.governmentCode.toString().indexOf(filt) > -1) ||
-    (node.agency && node.agency.indexOf(filt) > -1) ||
-    (node.government && node.government.indexOf(filt) > -1) ||
-    (node.department && node.department.indexOf(filt) > -1) ||
-    (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
-      node.organizationShortName.indexOf(filt) > -1) ||
-    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
-      node.executivePositionSide.indexOf(filt) > -1) ||
-    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
-  );
-};
-const validateData = async () => {
-  checkValidate.value = true;
-  await myFormPosition.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-const saveAppoint = async () => {
-  myFormPosition.value.validate().then(async (result: boolean) => {
-    if (props.personalId !== undefined) {
-      id.value = props.personalId.toString();
-    }
-    if (result) {
-      const dataAppoint = await {
-        recruitDate: dataForm.containDate,
-        posNoId: dataForm.posNoId,
-        positionId: dataForm.positionId,
-        positionLevelId: dataForm.positionLevelId,
-        positionLineId: dataForm.positionLineId,
-        positionPathSideId: dataForm.positionPathSideId,
-        positionTypeId: dataForm.positionTypeId,
-      };
-      showLoader();
-      await http
-        .put(config.API.appointEmployeePosition(id.value), dataAppoint)
-        .then(() => {
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await closeAndClear();
-          // await fetchPublishFile();
-          // await loadTreeData();
-          await fetchplacementPosition();
-          hideLoader();
-        });
-    }
-  });
-};
-const closeModal = () => {
-  if (editDataStatus.value == true) {
-    dialogConfirm(
-      $q,
-      async () => {
-        editDataStatus.value = false;
-        await closeAndClear();
-      },
-      `ข้อมูลมีการแก้ไข`,
-      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`
-    );
-  } else {
-    closeAndClear();
-  }
-};
-const closeAndClear = async () => {
-  await props.close();
-  editDataStatus.value = false;
-  selected.value = "";
-  dataForm.personalId = "";
-  dataForm.containDate = new Date();
-  dataForm.posNoId = "";
-  dataForm.positionId = "";
-  dataForm.positionLevelId = "";
-  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) => {
-  if (data.name == null && selected.value != data.keyId) {
-    editDataStatus.value = true;
-    selected.value = data.keyId;
-
-    // posNo Options
-    posNoOptions.value = [
-      {
-        label: data.positionNum,
-        value: data.positionNumId,
-      },
-    ];
-    dataForm.posNoId = data.positionNumId;
-
-    // position Options
-    positionOptions.value = [
-      {
-        label: data.positionName,
-        value: data.positionNameId,
-      },
-    ];
-    dataForm.positionId = data.positionNameId;
-
-    // positionPathSide Options
-    let positionPathSideArr: any = [];
-    if (data.positionSideNameObj && data.positionSideNameObj != null) {
-      data.positionSideNameObj.map((x: any) => {
-        positionPathSideArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionPathSideOptions.value = positionPathSideArr;
-      dataForm.positionPathSideId =
-        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
-          ? ""
-          : positionPathSideArr[0].value;
-    }
-
-    // positionType Options
-    positionTypeOptions.value = [
-      {
-        label: data.positionType,
-        value: data.positionTypeId,
-      },
-    ];
-    dataForm.positionTypeId = data.positionTypeId;
-
-    // positionLine Options
-    positionLineOptions.value = [
-      {
-        label: data.positionLine,
-        value: data.positionLineId,
-      },
-    ];
-    dataForm.positionLineId = data.positionLineId;
-
-    // positionLevel Options
-    let positionLevelsArr: any = [];
-    if (data.positionLevelObj != null) {
-      data.positionLevelObj.map((x: any) => {
-        positionLevelsArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionLevelOptions.value = positionLevelsArr;
-      dataForm.positionLevelId =
-        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
-          ? ""
-          : positionLevelsArr[0].value;
-      dataForm.positionLevelId = data.positionLevelObj[0].Id;
-    }
-  } else if (selected.value == data.keyId) {
-    selected.value = "";
-    dataForm.posNoId = "";
-    dataForm.positionId = "";
-    dataForm.positionLevelId = "";
-    dataForm.positionLineId = "";
-    dataForm.positionPathSideId = "";
-    dataForm.positionTypeId = "";
-  }
-};
-
-const checkPosition = (val: string) => {
-  const num = placementPosition.value.findIndex((e: string) => e === val);
-  return num;
-};
-
-watch(props, () => {
-  expanded.value = [];
-  const dataPersonal = props.personal;
-
-  if (dataPersonal) {
-    dataPersonal.map((data: any) => {
-      personal.value = data;
-    });
-  }
-
-  if (personal.value) {
-    let findData: any = null;
-    dataRespone.value.map((x: any) => {
-      findData = findByPerson(x);
-      if (findData != null) {
-        selectedPosition(findData);
-        for (let i = 3; i <= findData.keyId.length; i += 2) {
-          expanded.value.push(findData.keyId.slice(0, i));
-        }
-      }
-    });
-  }
-});
-
-function findByPerson(element: any): any {
-  if (
-    element.positionNumId &&
-    element.positionLineId === personal.value.positionLineId &&
-    element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId &&
-    (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId)
-  ) {
-    return element;
-  } else if (element.children) {
-    var i;
-    var result = null;
-    for (i = 0; result == null && i < element.children.length; i++) {
-      result = findByPerson(element.children[i]);
-    }
-    return result;
-  }
-  return null;
-}
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myFormPosition">
-        <DialogHeader :tittle="'เลือกหน่วยงาน'" :close="closeModal" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-7 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    ref="filterRef"
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <div class="q-pa-sm q-gutter-sm">
-                    <q-tree
-                      no-transition
-                      dense
-                      :nodes="treeData"
-                      node-key="keyId"
-                      :filter="search"
-                      :no-results-label="notFound"
-                      :no-nodes-label="noData"
-                      :filter-method="myFilterMethod"
-                      v-model:expanded="expanded"
-                    >
-                      <template v-slot:header-organization="prop">
-                        <div class="col">
-                          <div
-                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                          >
-                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                            <div class="text-weight-medium">
-                              {{ prop.node.organizationName }}
-                            </div>
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
-
-                            <q-space />
-                          </div>
-                          <div class="col items-center q-px-xs q-pt-xs">
-                            <div class="text-weight-medium text-grey-7">
-                              {{ prop.node.governmentCode }}
-                              {{ prop.node.organizationShortName }}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="selected == prop.node.keyId"
-                          @click="selectedPosition(prop.node)"
-                          :disable="
-                            prop.node.name != null ||
-                            checkPosition(prop.node.positionNumId) != -1
-                          "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        >
-                          <img
-                            v-if="
-                              prop.node.avatar == '' ||
-                              prop.node.avatar ==
-                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                            "
-                            src="@/assets/avatar_user.jpg"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div
-                            v-if="prop.node.name == null"
-                            class="q-px-sm text-weight-medium text-red"
-                          >
-                            ว่าง
-                          </div>
-                          <!--=====หัวหน้า สีเขียว=====-->
-                          <div v-else-if="prop.node.positionLeaderFlag">
-                            <div
-                              class="q-px-sm text-weight-medium text-primary"
-                            >
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--=====ลูกน้อง สีปกติ=====-->
-                          <div v-else>
-                            <div class="q-px-sm text-weight-medium">
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionName }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionNum }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionLevel }}
-                          </div>
-                          <q-icon
-                            v-if="prop.node.positionLeaderFlag"
-                            class="q-mr-sm"
-                            size="15px"
-                            color="primary"
-                            name="mdi-bookmark"
-                          ></q-icon>
-
-                          <q-space />
-                        </q-item>
-                      </template>
-                    </q-tree>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-5">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="dataForm.containDate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            class="full-width inputgreen cursor-pointer"
-                            outlined
-                            dense
-                            :model-value="
-                              date2Thai(new Date(dataForm.containDate))
-                            "
-                            :rules="[(val: string) => !!val || `${'วันที่รายงานตัว'}`]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        outlined
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="posNoOptions"
-                        v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionOptions"
-                        v-model="dataForm.positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        emit-value
-                        :options="positionPathSideOptions"
-                        v-model="dataForm.positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        map-options
-                      />
-                    </div>
-
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionTypeOptions"
-                        v-model="dataForm.positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionLineOptions"
-                        v-model="dataForm.positionLineId"
-                        :label="`${'สายงาน'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="dataForm.positionLevelId"
-                        :label="`${'ระดับ'}`"
-                        hide-bottom-space
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        emit-value
-                        map-options
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="saveAppoint"
-          v-model:modalEdit="editDataStatus"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.q-tree__node-header {
-  padding: 0px;
-  margin-top: 0px;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.my-list-link {
-  color: rgb(118, 168, 222);
-  border-radius: 5px;
-  background: #a3d3fb48 !important;
-  font-weight: 600;
-  border: 1px solid rgba(175, 185, 196, 0.217);
-}
-</style>
diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
similarity index 91%
rename from src/modules/05_placement/components/AppointMent/Detail.vue
rename to src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
index 44b08fb19..09fdf66cf 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
+
+import { useQuasar } from "quasar";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,7 +12,6 @@ import config from "@/app.config";
  * importType
  */
 import type { QForm } from "quasar";
-import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { DataProfile } from "@/modules/05_placement/interface/response/AppointMent";
 
 /**
@@ -18,11 +19,6 @@ import type { DataProfile } from "@/modules/05_placement/interface/response/Appo
  */
 import CardProfile from "@/components/CardProfile.vue"; // card ข้อมูลส่วนตัว
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -34,49 +30,39 @@ const {
   success,
   dialogConfirm,
 } = useCounterMixin();
-const paramsId = route.params.id;
 
-const dataProfile = ref<DataProfile>();
+const paramsId = route.params.id; //id รายการที่เลือก
+const dataProfile = ref<DataProfile>(); //ข้อมูลส่วนตัว
+const edit = ref<boolean>(false); //การแก้ไขข้อมูล
 
 const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(false);
 const profileId = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-const educationOld = ref<string>("");
-const reason = ref<string>("");
-const date = ref<Date | null>(null);
+const educationOld = ref<string>(""); //วุฒิการศึกษา
+const organizationPositionOld = ref<string>(""); //'ตำแหน่ง/สังกัด
+const positionTypeOld = ref<string>(""); //ตำแหน่งประเภท
+const positionLevelOld = ref<string>(""); //ระดับตำแหน่ง
+const posNo = ref<string>(""); //เลขที่
+const salary = ref<number>(0); //เงินเดือน
+const date = ref<Date | null>(null); //ดำรงตำแหน่งในระดับปัจจุบันเมื่อ
+const reason = ref<string>(""); //หมายเหตุ
 const status = ref<string>("");
-const avatar = ref<string>("");
-
-const title = ref<ResponseTitle>({
-  fullname: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionTypeOld: "",
-});
+const fullName = ref<string>("");
 
 /**
  *  fetch รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย
  */
-function fecthappointmentByid() {
+async function fecthappointmentByid() {
   showLoader();
-  http
+  await http
     .get(config.API.appointmentByid(paramsId.toString()))
     .then((res) => {
       dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
-
       profileId.value = data.profileId;
-      title.value.fullname = `${data.prefix}${data.firstName ?? "-"} ${
+      fullName.value = `${data.prefix}${data.firstName ?? "-"} ${
         data.lastName ?? "-"
       }`;
-      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
-      title.value.positionLevelOld = data.positionLevelOld ?? "-";
-      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+
       (status.value = data.status),
         (educationOld.value = data.educationOld ?? "-");
       organizationPositionOld.value = data.organizationPositionOld;
@@ -86,7 +72,6 @@ function fecthappointmentByid() {
       salary.value = data.salary ?? 0;
       reason.value = data.reason;
       date.value = data.positionDate;
-      avatar.value = data.avatar ?? "";
     })
     .catch((e) => {
       messageError($q, e);
@@ -156,6 +141,7 @@ onMounted(() => {
   fecthappointmentByid();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -168,7 +154,7 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.push(`/placement/appoint-promote`)"
     />
-    รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย{{ title.fullname }}
+    รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย{{ fullName }}
   </div>
   <CardProfile :data="dataProfile as DataProfile" />
 
@@ -392,7 +378,7 @@ onMounted(() => {
               :borderless="!edit"
               v-model="reason"
               hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
+              :label="`${'หมายเหตุ'}`"
               type="textarea"
             />
           </div>
diff --git a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
deleted file mode 100644
index 1f96cca6e..000000000
--- a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
+++ /dev/null
@@ -1,715 +0,0 @@
-<script setup lang="ts">
-import { useQuasar, QForm } from "quasar";
-import { onMounted, reactive, ref, watch } from "vue";
-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";
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  date2Thai,
-  hideLoader,
-  messageError,
-  showLoader,
-  success,
-  dialogConfirm,
-} = mixin; //ฟังก์ชันกลางที่เรียกใช้
-
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
-
-const checkValidate = ref<boolean>(false);
-const myFormPosition = ref<any>();
-const selected = ref<string>("");
-const selectedFile = ref<string>("");
-const dataRespone = ref<any>();
-const personal = ref<any>();
-const expanded = ref<string[]>([]);
-const treeData = ref<Array<any>>([]);
-const placementPosition = ref<any>([]);
-const search = ref<string>("");
-const filterRef = ref<any>(null);
-const id = ref<string>("");
-
-const editDataStatus = ref<boolean>(false);
-// Set form field
-let dataForm = reactive({
-  personalId: "",
-  containDate: new Date(),
-  posNoId: "",
-  positionId: "",
-  positionLevelId: "",
-  positionLineId: "",
-  positionPathSideId: "",
-  positionTypeId: "",
-});
-
-// const fetchPublishFile = async () => {
-//   await http
-//     .get(config.API.getPublishFileHistory)
-//     .then((res) => {
-//       let data = res.data.result;
-//       selectedFile.value = data[0].fileName;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//     });
-// };
-
-// โหลดข้อมูลโครงสร้างจาก json
-// const loadTreeData = async () => {
-//   expanded.value = [];
-//   await http
-//     .get(`${config.s3ClusterUrl}${selectedFile.value}`)
-//     .then((res: any) => {
-//       treeData.value = res.data;
-//       dataRespone.value = res.data;
-
-//       // Filter objects with "name" null
-//       const filteredData = res.data.filter(filterByPersonIdNull);
-//       treeData.value = filteredData;
-//     })
-//     .catch((e: any) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-function filterByPersonIdNull(obj: any) {
-  if (obj.name === null && obj.isCondition != true) {
-    return true;
-  }
-  if (obj.children && obj.children.length > 0) {
-    obj.children = obj.children.filter(filterByPersonIdNull);
-    return obj.children.length > 0;
-  }
-  return false;
-}
-
-// โหลด position
-
-const fetchplacementPosition = async () => {
-  await http
-    .get(config.API.apppointmentPosition())
-    .then((res: any) => {
-      placementPosition.value = res.data.result;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
-};
-
-const props = defineProps({
-  personalId: String,
-  modal: Boolean,
-  close: {
-    type: Function,
-    default: () => console.log("close modal"),
-  },
-  personal: Object,
-});
-
-const myFilterMethod = (node: any, filter: string) => {
-  const filt = filter;
-
-  return (
-    (node.name && node.name.indexOf(filt) > -1) ||
-    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-    (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
-      node.governmentCode.toString().indexOf(filt) > -1) ||
-    (node.agency && node.agency.indexOf(filt) > -1) ||
-    (node.government && node.government.indexOf(filt) > -1) ||
-    (node.department && node.department.indexOf(filt) > -1) ||
-    (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
-      node.organizationShortName.indexOf(filt) > -1) ||
-    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
-      node.executivePositionSide.indexOf(filt) > -1) ||
-    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
-  );
-};
-
-const validateData = async () => {
-  checkValidate.value = true;
-  await myFormPosition.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-
-const saveAppoint = async () => {
-  myFormPosition.value.validate().then(async (result: boolean) => {
-    if (props.personalId !== undefined) {
-      id.value = props.personalId.toString();
-    }
-    if (result) {
-      const dataAppoint = await {
-        recruitDate: dataForm.containDate,
-        posNoId: dataForm.posNoId,
-        positionId: dataForm.positionId,
-        positionLevelId: dataForm.positionLevelId,
-        positionLineId: dataForm.positionLineId,
-        positionPathSideId: dataForm.positionPathSideId,
-        positionTypeId: dataForm.positionTypeId,
-      };
-      showLoader();
-      await http
-        .put(config.API.appointmentPosition(id.value), dataAppoint)
-        .then((res) => {
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await closeAndClear();
-          // await fetchPublishFile();
-          // await loadTreeData();
-          await fetchplacementPosition();
-          hideLoader();
-        });
-    }
-  });
-};
-
-const closeModal = () => {
-  if (editDataStatus.value == true) {
-    dialogConfirm(
-      $q,
-      async () => {
-        editDataStatus.value = false;
-        await closeAndClear();
-      },
-      `ข้อมูลมีการแก้ไข`,
-      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`
-    );
-  } else {
-    closeAndClear();
-  }
-};
-
-const closeAndClear = async () => {
-  await props.close();
-  editDataStatus.value = false;
-  selected.value = "";
-  dataForm.personalId = "";
-  dataForm.containDate = new Date();
-  dataForm.posNoId = "";
-  dataForm.positionId = "";
-  dataForm.positionLevelId = "";
-  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) => {
-  if (data.name == null && selected.value != data.keyId) {
-    editDataStatus.value = true;
-    selected.value = data.keyId;
-
-    // posNo Options
-    posNoOptions.value = [
-      {
-        label: data.positionNum,
-        value: data.positionNumId,
-      },
-    ];
-    dataForm.posNoId = data.positionNumId;
-
-    // position Options
-    positionOptions.value = [
-      {
-        label: data.positionName,
-        value: data.positionNameId,
-      },
-    ];
-    dataForm.positionId = data.positionNameId;
-
-    // positionPathSide Options
-    let positionPathSideArr: any = [];
-    if (data.positionSideNameObj && data.positionSideNameObj != null) {
-      data.positionSideNameObj.map((x: any) => {
-        positionPathSideArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionPathSideOptions.value = positionPathSideArr;
-      dataForm.positionPathSideId =
-        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
-          ? ""
-          : positionPathSideArr[0].value;
-    }
-
-    // positionType Options
-    positionTypeOptions.value = [
-      {
-        label: data.positionType,
-        value: data.positionTypeId,
-      },
-    ];
-    dataForm.positionTypeId = data.positionTypeId;
-
-    // positionLine Options
-    positionLineOptions.value = [
-      {
-        label: data.positionLine,
-        value: data.positionLineId,
-      },
-    ];
-    dataForm.positionLineId = data.positionLineId;
-
-    // positionLevel Options
-    let positionLevelsArr: any = [];
-    if (data.positionLevelObj != null) {
-      data.positionLevelObj.map((x: any) => {
-        positionLevelsArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionLevelOptions.value = positionLevelsArr;
-      dataForm.positionLevelId =
-        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
-          ? ""
-          : positionLevelsArr[0].value;
-      dataForm.positionLevelId = data.positionLevelObj[0].Id;
-    }
-  } else if (selected.value == data.keyId) {
-    selected.value = "";
-    dataForm.posNoId = "";
-    dataForm.positionId = "";
-    dataForm.positionLevelId = "";
-    dataForm.positionLineId = "";
-    dataForm.positionPathSideId = "";
-    dataForm.positionTypeId = "";
-  }
-};
-
-const checkPosition = (val: string) => {
-  const num = placementPosition.value.findIndex((e: string) => e === val);
-  return num;
-};
-
-watch(props, () => {
-  expanded.value = [];
-  const dataPersonal = props.personal;
-
-  if (dataPersonal) {
-    dataPersonal.map((data: any) => {
-      personal.value = data;
-    });
-  }
-
-  if (personal.value) {
-    let findData: any = null;
-    dataRespone.value.map((x: any) => {
-      findData = findByPerson(x);
-      if (findData != null) {
-        selectedPosition(findData);
-        for (let i = 3; i <= findData.keyId.length; i += 2) {
-          expanded.value.push(findData.keyId.slice(0, i));
-        }
-      }
-    });
-  }
-});
-
-function findByPerson(element: any): any {
-  if (
-    element.positionNumId &&
-    element.positionLineId === personal.value.positionLineId &&
-    element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId &&
-    (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId)
-  ) {
-    return element;
-  } else if (element.children) {
-    var i;
-    var result = null;
-    for (i = 0; result == null && i < element.children.length; i++) {
-      result = findByPerson(element.children[i]);
-    }
-    return result;
-  }
-  return null;
-}
-
-onMounted(async () => {
-  // await fetchPublishFile();
-  // await loadTreeData();
-  // await fetchplacementPosition();
-});
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myFormPosition">
-        <DialogHeader
-          :tittle="'เลือกหน่วยงานที่แต่งตั้ง - เลื่อน'"
-          :close="closeModal"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-7 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    ref="filterRef"
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <div class="q-pa-sm q-gutter-sm">
-                    <q-tree
-                      no-transition
-                      dense
-                      :nodes="treeData"
-                      node-key="keyId"
-                      :filter="search"
-                      :no-results-label="notFound"
-                      :no-nodes-label="noData"
-                      :filter-method="myFilterMethod"
-                      v-model:expanded="expanded"
-                    >
-                      <template v-slot:header-organization="prop">
-                        <div class="col">
-                          <div
-                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                          >
-                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                            <div class="text-weight-medium">
-                              {{ prop.node.organizationName }}
-                            </div>
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
-
-                            <q-space />
-                          </div>
-                          <div class="col items-center q-px-xs q-pt-xs">
-                            <div class="text-weight-medium text-grey-7">
-                              {{ prop.node.governmentCode }}
-                              {{ prop.node.organizationShortName }}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="selected == prop.node.keyId"
-                          @click="selectedPosition(prop.node)"
-                          :disable="
-                            prop.node.name != null ||
-                            checkPosition(prop.node.positionNumId) != -1
-                          "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        >
-                          <img
-                            v-if="
-                              prop.node.avatar == '' ||
-                              prop.node.avatar ==
-                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                            "
-                            src="@/assets/avatar_user.jpg"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div
-                            v-if="prop.node.name == null"
-                            class="q-px-sm text-weight-medium text-red"
-                          >
-                            ว่าง
-                          </div>
-                          <!--=====หัวหน้า สีเขียว=====-->
-                          <div v-else-if="prop.node.positionLeaderFlag">
-                            <div
-                              class="q-px-sm text-weight-medium text-primary"
-                            >
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--=====ลูกน้อง สีปกติ=====-->
-                          <div v-else>
-                            <div class="q-px-sm text-weight-medium">
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionName }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionNum }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionLevel }}
-                          </div>
-                          <q-icon
-                            v-if="prop.node.positionLeaderFlag"
-                            class="q-mr-sm"
-                            size="15px"
-                            color="primary"
-                            name="mdi-bookmark"
-                          ></q-icon>
-
-                          <q-space />
-                        </q-item>
-                      </template>
-                    </q-tree>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-5">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="dataForm.containDate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            class="full-width inputgreen cursor-pointer"
-                            outlined
-                            dense
-                            :model-value="
-                              date2Thai(new Date(dataForm.containDate))
-                            "
-                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        outlined
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="posNoOptions"
-                        v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionOptions"
-                        v-model="dataForm.positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        emit-value
-                        :options="positionPathSideOptions"
-                        v-model="dataForm.positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        map-options
-                      />
-                    </div>
-
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionTypeOptions"
-                        v-model="dataForm.positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionLineOptions"
-                        v-model="dataForm.positionLineId"
-                        :label="`${'สายงาน'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="dataForm.positionLevelId"
-                        :label="`${'ระดับตำแหน่ง'}`"
-                        hide-bottom-space
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
-                        emit-value
-                        map-options
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="saveAppoint"
-          v-model:modalEdit="editDataStatus"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.q-tree__node-header {
-  padding: 0px;
-  margin-top: 0px;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.my-list-link {
-  color: rgb(118, 168, 222);
-  border-radius: 5px;
-  background: #a3d3fb48 !important;
-  font-weight: 600;
-  border: 1px solid rgba(175, 185, 196, 0.217);
-}
-</style>
diff --git a/src/modules/05_placement/components/AppointMent/DialogHeader.vue b/src/modules/05_placement/components/AppointMent/DialogHeader.vue
deleted file mode 100644
index 82ba60d98..000000000
--- a/src/modules/05_placement/components/AppointMent/DialogHeader.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  close: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const close = async () => {
-  props.close();
-};
-</script>
-<template>
-  <q-toolbar class="q-py-md">
-    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
-    <q-btn
-      icon="close"
-      unelevated
-      round
-      dense
-      @click="close"
-      style="color: #ff8080; background-color: #ffdede"
-    />
-  </q-toolbar>
-</template>
-
-<style scoped lang="scss">
-.header-text {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 26px;
-  color: #35373c;
-}
-</style>
diff --git a/src/modules/05_placement/components/AppointMent/Dialogbody.vue b/src/modules/05_placement/components/AppointMent/DialogOrders.vue
similarity index 96%
rename from src/modules/05_placement/components/AppointMent/Dialogbody.vue
rename to src/modules/05_placement/components/AppointMent/DialogOrders.vue
index 68e2d9979..9726cb6b9 100644
--- a/src/modules/05_placement/components/AppointMent/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointMent/DialogOrders.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -14,13 +17,6 @@ import type { UserDataNew } from "@/modules/05_placement/interface/response/Appo
  * importcomponents
  */
 import DialogHeader from "@/components/DialogHeader.vue";
-
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-
 const $q = useQuasar();
 const storeFn = useTransferDataStore();
 const { statusText } = storeFn;
@@ -39,7 +35,7 @@ const {
 const props = defineProps({
   Modal: Boolean,
   clickClose: Function,
-  fecthlistappointment: Function,
+  fetchData: Function,
   nextPage: Function,
   optionsType: Array,
   rows2: Array,
@@ -130,14 +126,12 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const selected = ref<[]>([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
 
+/**
+ * ไปหน้ารายละเอียดที่เลือก
+ * @param item
+ */
 function pageNext(item: any) {
   props.nextPage?.(item?.id);
 }
@@ -173,7 +167,7 @@ function sendToCommand() {
     await http
       .put(config.API.apppointmentReport(Type), data)
       .then(async () => {
-        await props.fecthlistappointment?.();
+        await props.fetchData?.();
         await props.clickClose?.();
         await success($q, "บันทึกสำเร็จ");
         selected.value = [];
@@ -187,6 +181,11 @@ function sendToCommand() {
   });
 }
 
+/**
+ * เมื่อ props.modal เป็น true
+ *
+ * กำหนดให้  selected เป็นค่าว่าง
+ */
 watch(
   () => props.Modal,
   () => {
@@ -343,7 +342,7 @@ watch(
           label="ส่งไปออกคำสั่ง"
           @click="sendToCommand"
           color="public"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
         >
           <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
         </q-btn>
diff --git a/src/modules/05_placement/components/ChangePosition/DialogChange.vue b/src/modules/05_placement/components/ChangePosition/DialogChange.vue
deleted file mode 100644
index 608c2a56e..000000000
--- a/src/modules/05_placement/components/ChangePosition/DialogChange.vue
+++ /dev/null
@@ -1,409 +0,0 @@
-<script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
-import config from "@/app.config";
-
-import http from "@/plugins/http";
-import { reactive, ref, onMounted, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  optionData,
-  tableType,
-} from "@/modules/05_placement/interface/index/Main";
-import { useRouter, useRoute } from "vue-router";
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const props = defineProps({
-  getData: Function,
-});
-const route = useRoute();
-const router = useRouter();
-const id = ref<string>(route.params.id ? route.params.id.toString() : "");
-const searchRules = ref<boolean>(false);
-const selected = ref<any[]>([]);
-const searchRef = ref<any>(null);
-const rows = ref<tableType[]>([]);
-const type = ref<string>("citizenId");
-const search = ref<string>("");
-const typeOps = ref<optionData[]>([
-  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstname", name: "ชื่อ" },
-  { id: "lastname", name: "นามสกุล" },
-]);
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  dialogConfirm,
-  dialogMessageNotify,
-  findOrgName,
-} = mixin;
-
-const modalDialog = defineModel<boolean>("modal", { required: true });
-
-function onCloseDialog() {
-  modalDialog.value = false;
-  rows.value = [];
-  selected.value = [];
-  search.value = "";
-  type.value = "idcard";
-}
-
-/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
-const visibleColumnsRespondent = ref<string[]>([
-  "no",
-  "name",
-  "position",
-  "positionType",
-  "organization",
-]);
-
-const columnsRespondent = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-async function searchInput(check: boolean) {
-  if (check) {
-    searchRules.value = check;
-    searchRef.value.validate();
-    if (!searchRef.value.hasError) {
-      await getSearch();
-    }
-    setTimeout(() => {
-      searchRules.value = false;
-    }, 100);
-  }
-}
-
-async function getSearch() {
-  showLoader();
-  const body = {
-    fieldName: type.value,
-    keyword: search.value,
-  };
-  await http
-    .post(
-      config.API.orgSearchPersonal() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
-      body
-    )
-    .then((res) => {
-      const data = res.data.result;
-      totalList.value = Math.ceil(data.total / pagination.value.rowsPerPage);
-      total.value = data.total;
-      rows.value = data.data;
-    })
-    .catch((err) => {})
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** update เมื่อเปลี่ยน option */
-function updateSelect() {
-  search.value = "";
-}
-
-function onSubmit() {
-  if (selected.value.length == 0) {
-    dialogMessageNotify($q, "กรุณาเลือกรายชื่อผู้ที่ย้ายสับเปลี่ยนตำแหน่ง");
-  } else {
-    const dataProfile = selected.value;
-    dialogConfirm($q, () => {
-      showLoader();
-      http
-        .post(config.API.changePositionByIdProfile + `/${id.value}`, {
-          changePositionId: id.value,
-          profiles: dataProfile.map((i: any) => ({
-            profileId: i.id,
-            prefix: i.prefix,
-            firstName: i.firstName,
-            lastName: i.lastName,
-            citizenId: i.citizenId ? i.citizenId : null,
-            birthDate: i.birthDate ? i.birthDate : null,
-            positionOld: i.position ? i.position : null,
-            positionTypeOld: i.positionType ? i.positionType : null,
-            positionLevelOld: i.positionLevel ? i.positionLevel : null,
-            positionNumberOld: i.posNo ? i.posNo : null,
-            organizationOld: i.organization ? i.organization : null,
-            amountOld: i.salary ? i.salary : null,
-            educationOld: i.educationDegree ? i.educationDegree : null,
-            rootOld: i.root ? i.root : null,
-            rootOldId: i.rootId ? i.rootId : null,
-            rootShortNameOld: i.rootShortName ? i.rootShortName : null,
-            child1Old: i.child1 ? i.child1 : null,
-            child1OldId: i.child1Id ? i.child1Id : null,
-            child1ShortNameOld: i.child1ShortName ? i.child1ShortName : null,
-            child2Old: i.child2 ? i.child2 : null,
-            child2OldId: i.child2Id ? i.child2Id : null,
-            child2ShortNameOld: i.child2ShortName ? i.child2ShortName : null,
-            child3Old: i.child3 ? i.child3 : null,
-            child3OldId: i.child3Id ? i.child3Id : null,
-            child3ShortNameOld: i.child3ShortName ? i.child3ShortName : null,
-            child4Old: i.child4 ? i.child4 : null,
-            child4OldId: i.child4Id ? i.child4Id : null,
-            child4ShortNameOld: i.child4ShortName ? i.child4ShortName : null,
-            posMasterNoOld: i.posMasterNo ? i.posMasterNo : null,
-            posTypeOldId: i.posTypeId ? i.posTypeId : null,
-            posTypeNameOld: i.posTypeName ? i.posTypeName : null,
-            posLevelOldId: i.posLevelId ? i.posLevelId : null,
-            posLevelNameOld: i.posLevelName ? i.posLevelName : null,
-          })),
-        })
-        .then((res) => {
-          onCloseDialog();
-          props.getData?.();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    });
-  }
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getSearch();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modalDialog" persistent>
-    <q-card :style="$q.screen.gt.xs ? 'min-width: 90vw' : 'width: 100vw'">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="'เพิ่มรายชื่อผู้ที่ย้ายสับเปลี่ยนตำแหน่ง'"
-          :close="onCloseDialog"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
-          <div class="row">
-            <div class="col-12">
-              <div class="row q-pa-md q-col-gutter-sm">
-                <div class="col-12 col-sm-6 col-md-3">
-                  <q-select
-                    label="ค้นหาจาก"
-                    v-model="type"
-                    :options="typeOps"
-                    emit-value
-                    dense
-                    @update:model-value="updateSelect"
-                    map-options
-                    outlined
-                    option-label="name"
-                    option-value="id"
-                  />
-                </div>
-
-                <div class="col-12 col-sm-6 col-md-9">
-                  <q-input
-                    ref="searchRef"
-                    v-model="search"
-                    outlined
-                    clearable
-                    hide-bottom-space
-                    dense
-                    label="คำค้น"
-                    :rules="[
-                      (val) => !!val || !searchRules || `กรุณากรอกคำค้น`,
-                    ]"
-                  >
-                    <template v-slot:after>
-                      <q-btn
-                        color="primary"
-                        icon="search"
-                        label="ค้นหา"
-                        class="full-width q-py-sm q-px-md"
-                        @click="searchInput(true)"
-                      >
-                      </q-btn>
-                    </template>
-                  </q-input>
-                </div>
-                <div class="col-12 q-pt-sm">
-                  <d-table
-                    ref="table"
-                    :columns="columnsRespondent"
-                    :rows="rows"
-                    row-key="id"
-                    flat
-                    bordered
-                    selection="multiple"
-                    v-model:selected="selected"
-                    :paging="true"
-                    dense
-                    class="custom-header-table"
-                    :visible-columns="visibleColumnsRespondent"
-                    :rows-per-page-options="[1, 25, 50, 100]"
-                    @update:pagination="updatePagination"
-                  >
-                    <template v-slot:pagination="scope">
-                      ทั้งหมด {{ total }} รายการ
-                      <q-pagination
-                        v-model="pagination.page"
-                        active-color="primary"
-                        color="dark"
-                        :max="Number(totalList)"
-                        size="sm"
-                        boundary-links
-                        direction-links
-                        :max-pages="5"
-                        @update:model-value="getSearch"
-                      ></q-pagination>
-                    </template>
-
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <q-th auto-width>
-                          <q-checkbox
-                            keep-color
-                            color="primary"
-                            dense
-                            v-model="props.selected"
-                          />
-                        </q-th>
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                          style="color: #000000; font-weight: 500"
-                        >
-                          <span class="text-weight-medium">{{
-                            col.label
-                          }}</span>
-                        </q-th>
-                      </q-tr>
-                    </template>
-                    <template v-slot:body="props">
-                      <q-tr :props="props" class="cursor-pointer">
-                        <q-td>
-                          <q-checkbox
-                            keep-color
-                            color="primary"
-                            dense
-                            v-model="props.selected"
-                          />
-                        </q-td>
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <div v-if="col.name == 'no'">
-                            {{
-                              (pagination.page - 1) * pagination.rowsPerPage +
-                              props.rowIndex +
-                              1
-                            }}
-                          </div>
-                          <div v-else-if="col.name == 'name'">
-                            {{
-                              `${props.row.prefix ? props.row.prefix : ""}${
-                                props.row.firstName ? props.row.firstName : ""
-                              } ${props.row.lastName ? props.row.lastName : ""}`
-                            }}
-                          </div>
-                          <div v-else-if="col.name == 'positionType'">
-                            {{
-                              props.row.positionTypeName
-                                ? props.row.positionTypeName
-                                : ""
-                            }}{{
-                              props.row.positionLevelName
-                                ? ` (${props.row.positionLevelName})`
-                                : ""
-                            }}
-                          </div>
-                          <div
-                            v-else-if="col.name == 'organization'"
-                            class="table_ellipsis"
-                          >
-                            {{ findOrgName(props.row) }}
-                          </div>
-                          <div v-else>
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/05_placement/components/ChangePosition/DialogHeader.vue b/src/modules/05_placement/components/ChangePosition/DialogHeader.vue
deleted file mode 100644
index 82ba60d98..000000000
--- a/src/modules/05_placement/components/ChangePosition/DialogHeader.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  close: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const close = async () => {
-  props.close();
-};
-</script>
-<template>
-  <q-toolbar class="q-py-md">
-    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
-    <q-btn
-      icon="close"
-      unelevated
-      round
-      dense
-      @click="close"
-      style="color: #ff8080; background-color: #ffdede"
-    />
-  </q-toolbar>
-</template>
-
-<style scoped lang="scss">
-.header-text {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 26px;
-  color: #35373c;
-}
-</style>
diff --git a/src/modules/05_placement/components/ChangePosition/DialogRound.vue b/src/modules/05_placement/components/ChangePosition/DialogRound.vue
deleted file mode 100644
index 4c39accb8..000000000
--- a/src/modules/05_placement/components/ChangePosition/DialogRound.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { dialogConfirm, success, showLoader, hideLoader } = mixin;
-const modal = defineModel<boolean>("modal", { required: true });
-const editCheck = defineModel<boolean>("edit");
-const round = defineModel<string>("round", { required: true });
-const idRound = defineModel<string>("id", { required: true });
-
-const props = defineProps({
-  getData: Function,
-});
-/** ปิด dialog */
-function close() {
-  modal.value = false;
-  editCheck.value = false;
-  round.value = "";
-  idRound.value = "";
-}
-
-function onSubmit() {
-  dialogConfirm($q, () => {
-    const url = editCheck.value
-      ? config.API.changePosition + `/${idRound.value}`
-      : config.API.changePosition;
-
-    http[editCheck.value ? "put" : "post"](url, {
-      name: round.value,
-    }).then((res) => {
-      close();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      props.getData?.();
-    });
-  });
-}
-</script>
-
-<template>
-  <q-dialog persistent v-model="modal">
-    <q-card bordered style="min-width: 40vh">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="`${
-            editCheck ? 'แก้ไข' : 'เพิ่ม'
-          }รอบการออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง`"
-          :close="close"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-sm">
-          <div class="row">
-            <div class="col-12">
-              <q-input
-                v-model="round"
-                outlined
-                dense
-                hide-bottom-space
-                class="inputgreen"
-                label="ชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง'}`,]"
-              ></q-input>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/05_placement/components/ChangePosition/Main.vue b/src/modules/05_placement/components/ChangePosition/Main.vue
deleted file mode 100644
index 474d74548..000000000
--- a/src/modules/05_placement/components/ChangePosition/Main.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-import SendToCommand from "@/modules/05_placement/components/ChangePosition/SendToCommand.vue";
-
-import DialogRound from "@/modules/05_placement/components/ChangePosition/DialogRound.vue";
-import type {
-  listAppointType,
-  resData,
-} from "@/modules/05_placement/interface/response/AppointMent";
-import type { OpType } from "@/modules/05_placement/interface/response/Main";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const round = ref<string>("");
-const idRound = ref<string>("");
-const editCheck = ref<boolean>(false);
-const modalRound = ref<boolean>(false);
-const $q = useQuasar();
-const modal = ref<boolean>(false);
-const storeFn = useTransferDataStore();
-const { statusText } = storeFn;
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  showLoader,
-  hideLoader,
-  success,
-  messageError,
-  date2Thai,
-  dialogRemove,
-} = mixin;
-
-const router = useRouter();
-const rows = ref<any[]>([]);
-const rows2 = ref<any>([]);
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const optionsType = ref<OpType[]>([]);
-const type = ref<string>("");
-
-const visibleColumns = ref<string[]>(["no", "name", "createdAt", "status"]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-//รีเซ็ต input
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-  fecthLists();
-};
-
-//ปิด modal
-const clickClose = () => {
-  modal.value = false;
-};
-
-//เปิด modal
-function sendToCommand() {
-  modal.value = true;
-  filterKeyword2.value = "";
-  // fecthTypeOption();
-}
-
-//ดึงข้อมูล API
-async function fecthLists() {
-  showLoader();
-  rows.value = [];
-  await http
-    .get(
-      config.API.changePosition +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${filterKeyword.value}`
-    )
-    .then((res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = res.data.result.data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-// dialog สำหรับแก้ไข
-function openModaledit(data: any) {
-  modalRound.value = true;
-  editCheck.value = true;
-  round.value = data.name;
-  idRound.value = data.id;
-}
-
-// ฟังก์ชั่นสำหรับเพิ่มรอบการย้ายสับเปลี่ยนตำแหน่ง
-function addRound() {
-  modalRound.value = true;
-}
-
-//ลบข้อมูล
-function clickDelete(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.changePosition + `/${id}`)
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        fecthLists();
-        hideLoader();
-      });
-  });
-}
-
-// ไปหน้ารายชื่อ
-function personalListPage(id: string) {
-  router.push({
-    path: `/change-positions/${id}`,
-  });
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await fecthLists();
-  }
-);
-
-onMounted(() => {
-  fecthLists();
-});
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
-    <div class="row q-pa-md">
-      <div class="col-12">
-        <div class="row col-12">
-          <q-btn
-            @click="addRound()"
-            size="14px"
-            flat
-            round
-            color="primary"
-            icon="add"
-          >
-            <q-tooltip>เพิ่มรอบการย้ายสับเปลี่ยนตำแหน่ง</q-tooltip>
-          </q-btn>
-
-          <q-btn
-            @click="sendToCommand()"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
-            <q-tooltip>ส่งไปออกคำสั่งแต่งตั้ง-เลื่อน-ย้าย</q-tooltip>
-          </q-btn>
-
-          <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            @keyup.enter="fecthLists()"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
-        </div>
-
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            row-key="id"
-            :visible-columns="visibleColumns"
-            :rows-per-page-options="[1, 25, 50, 100]"
-            @update:pagination="updatePagination"
-          >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fecthLists"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td auto-width>
-                  <q-btn
-                    v-if="
-                      props.row.status !== 'REPORT' &&
-                      props.row.status !== 'DONE'
-                    "
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
-                    flat
-                    round
-                    dense
-                  >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 250px">
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="openModaledit(props.row)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon color="edit" size="xs" name="edit" />
-                          </q-item-section>
-                          <q-item-section>แก้ไข</q-item-section>
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="clickDelete(props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  @click="personalListPage(props.row.id)"
-                >
-                  <div v-if="col.name == 'no'">
-                    {{
-                      (pagination.page - 1) * pagination.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-
-                  <div v-else-if="col.name == 'createdAt'">
-                    {{
-                      props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
-                    }}
-                  </div>
-
-                  <div v-else-if="col.name == 'status'">
-                    {{ props.row.status ? statusText(props.row.status) : "-" }}
-                  </div>
-
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <SendToCommand
-    v-model:Modal="modal"
-    :clickClose="clickClose"
-    :optionsType="optionsType"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    v-model:type="type"
-    :nextPage="personalListPage"
-    :fecthLists="fecthLists"
-  />
-
-  <DialogRound
-    v-model:modal="modalRound"
-    v-model:edit="editCheck"
-    v-model:round="round"
-    v-model:id="idRound"
-    :getData="fecthLists"
-  />
-</template>
-
-<style scoped></style>
diff --git a/src/modules/05_placement/components/ChangePosition/Modal.vue b/src/modules/05_placement/components/ChangePosition/Modal.vue
deleted file mode 100644
index 16cfa69ba..000000000
--- a/src/modules/05_placement/components/ChangePosition/Modal.vue
+++ /dev/null
@@ -1,716 +0,0 @@
-<script setup lang="ts">
-import { useQuasar, QForm } from "quasar";
-import { onMounted, reactive, ref, watch } from "vue";
-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";
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  date2Thai,
-  hideLoader,
-  messageError,
-  showLoader,
-  success,
-  dialogConfirm,
-} = mixin; //ฟังก์ชันกลางที่เรียกใช้
-
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
-
-const checkValidate = ref<boolean>(false);
-const myFormPosition = ref<any>();
-const selected = ref<string>("");
-const selectedFile = ref<string>("");
-const dataRespone = ref<any>();
-const personal = ref<any>();
-const expanded = ref<string[]>([]);
-const treeData = ref<Array<any>>([]);
-const placementPosition = ref<any>([]);
-const search = ref<string>("");
-const filterRef = ref<any>(null);
-const id = ref<string>("");
-
-const editDataStatus = ref<boolean>(false);
-// Set form field
-let dataForm = reactive({
-  personalId: "",
-  containDate: new Date(),
-  posNoId: "",
-  positionId: "",
-  positionLevelId: "",
-  positionLineId: "",
-  positionPathSideId: "",
-  positionTypeId: "",
-});
-
-// const fetchPublishFile = async () => {
-//   await http
-//     .get(config.API.getPublishFileHistory)
-//     .then((res) => {
-//       let data = res.data.result;
-//       selectedFile.value = data[0].fileName;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//     });
-// };
-
-// โหลดข้อมูลโครงสร้างจาก json
-// const loadTreeData = async () => {
-//   expanded.value = [];
-//   await http
-//     .get(`${config.s3ClusterUrl}${selectedFile.value}`)
-//     .then((res: any) => {
-//       treeData.value = res.data;
-//       dataRespone.value = res.data;
-
-//       // Filter objects with "name" null
-//       const filteredData = res.data.filter(filterByPersonIdNull);
-//       treeData.value = filteredData;
-//     })
-//     .catch((e: any) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-function filterByPersonIdNull(obj: any) {
-  if (obj.name === null && obj.isCondition != true) {
-    return true;
-  }
-  if (obj.children && obj.children.length > 0) {
-    obj.children = obj.children.filter(filterByPersonIdNull);
-    return obj.children.length > 0;
-  }
-  return false;
-}
-
-// โหลด position
-
-const fetchplacementPosition = async () => {
-  await http
-    .get(config.API.apppointmentPosition())
-    .then((res: any) => {
-      placementPosition.value = res.data.result;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
-};
-
-const props = defineProps({
-  personalId: String,
-  modal: Boolean,
-  close: {
-    type: Function,
-    default: () => console.log("close modal"),
-  },
-  personal: Object,
-});
-
-const myFilterMethod = (node: any, filter: string) => {
-  const filt = filter;
-
-  return (
-    (node.name && node.name.indexOf(filt) > -1) ||
-    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-    (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
-      node.governmentCode.toString().indexOf(filt) > -1) ||
-    (node.agency && node.agency.indexOf(filt) > -1) ||
-    (node.government && node.government.indexOf(filt) > -1) ||
-    (node.department && node.department.indexOf(filt) > -1) ||
-    (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
-      node.organizationShortName.indexOf(filt) > -1) ||
-    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
-      node.executivePositionSide.indexOf(filt) > -1) ||
-    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
-  );
-};
-
-const validateData = async () => {
-  checkValidate.value = true;
-  await myFormPosition.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-
-const saveAppoint = async () => {
-  myFormPosition.value.validate().then(async (result: boolean) => {
-    if (props.personalId !== undefined) {
-      id.value = props.personalId.toString();
-    }
-    if (result) {
-      const dataAppoint = await {
-        recruitDate: dataForm.containDate,
-        posNoId: dataForm.posNoId,
-        positionId: dataForm.positionId,
-        positionLevelId: dataForm.positionLevelId,
-        positionLineId: dataForm.positionLineId,
-        positionPathSideId: dataForm.positionPathSideId,
-        positionTypeId: dataForm.positionTypeId,
-      };
-      showLoader();
-      await http
-        .put(config.API.appointmentPosition(id.value), dataAppoint)
-        .then((res) => {
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await closeAndClear();
-          // await fetchPublishFile();
-          // await loadTreeData();
-          await fetchplacementPosition();
-          hideLoader();
-        });
-    }
-  });
-};
-
-const closeModal = () => {
-  if (editDataStatus.value == true) {
-    dialogConfirm(
-      $q,
-      async () => {
-        editDataStatus.value = false;
-        await closeAndClear();
-      },
-      `ข้อมูลมีการแก้ไข`,
-      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`
-    );
-  } else {
-    closeAndClear();
-  }
-};
-
-const closeAndClear = async () => {
-  await props.close();
-  editDataStatus.value = false;
-  selected.value = "";
-  dataForm.personalId = "";
-  dataForm.containDate = new Date();
-  dataForm.posNoId = "";
-  dataForm.positionId = "";
-  dataForm.positionLevelId = "";
-  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) => {
-  if (data.name == null && selected.value != data.keyId) {
-    editDataStatus.value = true;
-    selected.value = data.keyId;
-
-    // posNo Options
-    posNoOptions.value = [
-      {
-        label: data.positionNum,
-        value: data.positionNumId,
-      },
-    ];
-    dataForm.posNoId = data.positionNumId;
-
-    // position Options
-    positionOptions.value = [
-      {
-        label: data.positionName,
-        value: data.positionNameId,
-      },
-    ];
-    dataForm.positionId = data.positionNameId;
-
-    // positionPathSide Options
-    let positionPathSideArr: any = [];
-    if (data.positionSideNameObj && data.positionSideNameObj != null) {
-      data.positionSideNameObj.map((x: any) => {
-        positionPathSideArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionPathSideOptions.value = positionPathSideArr;
-      dataForm.positionPathSideId =
-        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
-          ? ""
-          : positionPathSideArr[0].value;
-    }
-
-    // positionType Options
-    positionTypeOptions.value = [
-      {
-        label: data.positionType,
-        value: data.positionTypeId,
-      },
-    ];
-    dataForm.positionTypeId = data.positionTypeId;
-
-    // positionLine Options
-    positionLineOptions.value = [
-      {
-        label: data.positionLine,
-        value: data.positionLineId,
-      },
-    ];
-    dataForm.positionLineId = data.positionLineId;
-
-    // positionLevel Options
-    let positionLevelsArr: any = [];
-    if (data.positionLevelObj != null) {
-      data.positionLevelObj.map((x: any) => {
-        positionLevelsArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionLevelOptions.value = positionLevelsArr;
-      dataForm.positionLevelId =
-        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
-          ? ""
-          : positionLevelsArr[0].value;
-      dataForm.positionLevelId = data.positionLevelObj[0].Id;
-    }
-  } else if (selected.value == data.keyId) {
-    selected.value = "";
-    dataForm.posNoId = "";
-    dataForm.positionId = "";
-    dataForm.positionLevelId = "";
-    dataForm.positionLineId = "";
-    dataForm.positionPathSideId = "";
-    dataForm.positionTypeId = "";
-  }
-};
-
-const checkPosition = (val: string) => {
-  const num = placementPosition.value.findIndex((e: string) => e === val);
-  return num;
-};
-
-watch(props, () => {
-  expanded.value = [];
-  const dataPersonal = props.personal;
-
-  if (dataPersonal) {
-    dataPersonal.map((data: any) => {
-      personal.value = data;
-    });
-  }
-
-  if (personal.value) {
-    let findData: any = null;
-    dataRespone.value.map((x: any) => {
-      findData = findByPerson(x);
-      if (findData != null) {
-        selectedPosition(findData);
-        for (let i = 3; i <= findData.keyId.length; i += 2) {
-          expanded.value.push(findData.keyId.slice(0, i));
-        }
-      }
-    });
-  }
-});
-
-function findByPerson(element: any): any {
-  if (
-    element.positionNumId &&
-    element.positionLineId === personal.value.positionLineId &&
-    element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId &&
-    (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId)
-  ) {
-    return element;
-  } else if (element.children) {
-    var i;
-    var result = null;
-    for (i = 0; result == null && i < element.children.length; i++) {
-      result = findByPerson(element.children[i]);
-    }
-    return result;
-  }
-  return null;
-}
-
-onMounted(async () => {
-  // await fetchPublishFile();
-  // await loadTreeData();
-  // await fetchplacementPosition();
-});
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myFormPosition">
-        <DialogHeader
-          :tittle="'เลือกหน่วยงานที่แต่งตั้ง - เลื่อน'"
-          :close="closeModal"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-7 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    ref="filterRef"
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <div class="q-pa-sm q-gutter-sm">
-                    <q-tree
-                      no-transition
-                      dense
-                      :nodes="treeData"
-                      node-key="keyId"
-                      :filter="search"
-                      :no-results-label="notFound"
-                      :no-nodes-label="noData"
-                      :filter-method="myFilterMethod"
-                      v-model:expanded="expanded"
-                    >
-                      <template v-slot:header-organization="prop">
-                        <div class="col">
-                          <div
-                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                          >
-                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                            <div class="text-weight-medium">
-                              {{ prop.node.organizationName }}
-                            </div>
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
-
-                            <q-space />
-                          </div>
-                          <div class="col items-center q-px-xs q-pt-xs">
-                            <div class="text-weight-medium text-grey-7">
-                              {{ prop.node.governmentCode }}
-                              {{ prop.node.organizationShortName }}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="selected == prop.node.keyId"
-                          @click="selectedPosition(prop.node)"
-                          :disable="
-                            prop.node.name != null ||
-                            checkPosition(prop.node.positionNumId) != -1
-                          "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        >
-                          <img
-                            v-if="
-                              prop.node.avatar == '' ||
-                              prop.node.avatar ==
-                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                            "
-                            src="@/assets/avatar_user.jpg"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div
-                            v-if="prop.node.name == null"
-                            class="q-px-sm text-weight-medium text-red"
-                          >
-                            ว่าง
-                          </div>
-                          <!--=====หัวหน้า สีเขียว=====-->
-                          <div v-else-if="prop.node.positionLeaderFlag">
-                            <div
-                              class="q-px-sm text-weight-medium text-primary"
-                            >
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--=====ลูกน้อง สีปกติ=====-->
-                          <div v-else>
-                            <div class="q-px-sm text-weight-medium">
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionName }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionNum }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionLevel }}
-                          </div>
-                          <q-icon
-                            v-if="prop.node.positionLeaderFlag"
-                            class="q-mr-sm"
-                            size="15px"
-                            color="primary"
-                            name="mdi-bookmark"
-                          ></q-icon>
-
-                          <q-space />
-                        </q-item>
-                      </template>
-                    </q-tree>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-5">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="dataForm.containDate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            class="full-width inputgreen cursor-pointer"
-                            outlined
-                            dense
-                            :model-value="
-                              date2Thai(new Date(dataForm.containDate))
-                            "
-                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        outlined
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="posNoOptions"
-                        v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionOptions"
-                        v-model="dataForm.positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        emit-value
-                        :options="positionPathSideOptions"
-                        v-model="dataForm.positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        map-options
-                      />
-                    </div>
-
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionTypeOptions"
-                        v-model="dataForm.positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionLineOptions"
-                        v-model="dataForm.positionLineId"
-                        :label="`${'สายงาน'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="dataForm.positionLevelId"
-                        :label="`${'ระดับตำแหน่ง'}`"
-                        hide-bottom-space
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
-                        emit-value
-                        map-options
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="saveAppoint"
-          v-model:modalEdit="editDataStatus"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.q-tree__node-header {
-  padding: 0px;
-  margin-top: 0px;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.my-list-link {
-  color: rgb(118, 168, 222);
-  border-radius: 5px;
-  background: #a3d3fb48 !important;
-  font-weight: 600;
-  border: 1px solid rgba(175, 185, 196, 0.217);
-}
-</style>
diff --git a/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue b/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue
deleted file mode 100644
index 87e0255c2..000000000
--- a/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue
+++ /dev/null
@@ -1,406 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, reactive } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
-import type { DataProfile } from "@/modules/05_placement/interface/response/AppointMent";
-import type { QForm } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import CardProfile from "@/components/CardProfile.vue";
-
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-
-const dataProfile = ref<DataProfile>();
-
-const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(false);
-const profileId = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-const educationOld = ref<string>("");
-const reason = ref<string>("");
-const date = ref<Date | null>(null);
-const status = ref<string>("");
-const avatar = ref<string>("");
-
-const paramsId = route.params.id;
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-  findOrgName,
-} = mixin;
-
-const title = ref<ResponseTitle>({
-  fullname: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionTypeOld: "",
-});
-
-//เรียกข้อมูลตาม id
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.changePositionByIdProfile + `/${paramsId.toString()}`)
-    .then((res) => {
-      dataProfile.value = res.data.result as unknown as DataProfile;
-      const data = res.data.result;
-
-      profileId.value = data.profileId;
-      title.value.fullname = `${data.prefix}${data.firstName ?? "-"} ${
-        data.lastName ?? "-"
-      }`;
-      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
-      title.value.positionLevelOld = data.positionLevelOld ?? "-";
-      title.value.positionTypeOld = data.positionTypeOld ?? "-";
-      (status.value = data.status),
-        (educationOld.value = data.educationOld ?? "-");
-      organizationPositionOld.value = data.organizationPositionOld;
-      positionTypeOld.value = data.posTypeNameOld;
-      positionLevelOld.value = data.posLevelNameOld;
-      posNo.value = data.posMasterNo;
-      salary.value = data.amountOld ?? 0;
-      reason.value = data.reason;
-      date.value = data.dateCurrent;
-      avatar.value = data.avatar ?? "";
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-// เเก้ไขข้อมูล
-function putAppointment() {
-  dialogConfirm(
-    $q,
-    () => {
-      let data = {
-        educationOld: educationOld.value,
-        organizationPositionOld: organizationPositionOld.value,
-        positionTypeOld: positionTypeOld.value,
-        positionLevelOld: positionLevelOld.value,
-        posMasterNoOld: posNo.value,
-        amountOld: salary.value.toString().replace(/,/g, ""),
-        reason: reason.value,
-        dateCurrent: date.value,
-      };
-      showLoader();
-      http;
-      http
-        .put(
-          config.API.changePositionByIdProfile + `/${paramsId.toString()}`,
-          data
-        )
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          getData();
-          edit.value = false;
-        });
-    },
-    "ต้องการแก้ไขข้อมูลหรือไม่?",
-    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-  );
-}
-const cancel = () => {
-  edit.value = false;
-  getData();
-  myForm.value?.resetValidation();
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await getData();
-});
-</script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายละเอียดผู้ที่ย้ายสับเปลี่ยนตำแหน่ง {{ title.fullname }}
-  </div>
-  <CardProfile :data="dataProfile as DataProfile" />
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <q-form
-      greedy
-      @submit.prevent
-      @validation-success="putAppointment"
-      ref="myForm"
-      class="full-width"
-    >
-      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-        <div class="q-pl-sm text-weight-bold text-dark">
-          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
-        </div>
-        <q-space />
-        <div v-if="status !== 'DONE' && status !== 'REPORT'">
-          <div class="q-gutter-sm" v-if="!edit">
-            <q-btn
-              outline
-              color="primary"
-              dense
-              icon-right="mdi-file-edit-outline"
-              class="q-px-sm"
-              label="แก้ไข"
-              style="width: 80px"
-              @click="edit = !edit"
-            />
-          </div>
-          <div class="q-gutter-sm" v-else>
-            <q-btn
-              outline
-              type="submit"
-              color="public"
-              dense
-              class="q-px-sm"
-              label="บันทึก"
-              style="width: 80px"
-            />
-            <q-btn
-              outline
-              color="red"
-              dense
-              class="q-px-sm"
-              label="ยกเลิก"
-              style="width: 80px"
-              @click="cancel()"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="col-12"><q-separator /></div>
-
-      <div class="row col-12 q-pa-md">
-        <div class="col-12">
-          <div class="text-weight-bold">วุฒิการศึกษา</div>
-        </div>
-        <div class="col-12">
-          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="educationOld"
-            :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-            hide-bottom-space
-            :label="`${'วุฒิการศึกษา'}`"
-            type="text"
-          />
-        </div>
-      </div>
-      <div class="row col-12 q-pa-md">
-        <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="col-xs-12 row q-pa-md items-center">
-            <div class="col-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
-            </div>
-
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ระดับตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :class="getClass(edit)"
-              />
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    :borderless="!edit"
-                    :readonly="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-</template>
-<style lang="scss" scope>
-.q-img {
-  border-radius: 5px;
-  height: 70px;
-}
-
-.text-top {
-  color: gray;
-  font-weight: 400;
-  padding-bottom: 3px;
-}
-
-.text-detail {
-  font-weight: 500;
-}
-</style>
diff --git a/src/modules/05_placement/components/ChangePosition/PersonalList.vue b/src/modules/05_placement/components/ChangePosition/PersonalList.vue
deleted file mode 100644
index b93d4106f..000000000
--- a/src/modules/05_placement/components/ChangePosition/PersonalList.vue
+++ /dev/null
@@ -1,506 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-
-import type { OpType } from "@/modules/05_placement/interface/response/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
-import DialogEvalute from "@/modules/05_placement/components/ChangePosition/DialogChange.vue";
-
-const router = useRouter();
-const route = useRoute();
-const id = ref<string>(route.params.id ? route.params.id.toString() : "");
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const modalDialog = ref<boolean>(false);
-const posType = ref<string>("");
-const posLevel = ref<string>("");
-const position = ref<string>("");
-const typeModal = ref<string | null>(null);
-const dataRows = ref<any[]>([]);
-
-const $q = useQuasar();
-const modal = ref<boolean>(false);
-const storeFn = useTransferDataStore();
-const { statusText } = storeFn;
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  showLoader,
-  hideLoader,
-  success,
-  messageError,
-  date2Thai,
-  dialogRemove,
-} = mixin;
-
-const rows = ref<any[]>([]);
-const modalTree = ref<boolean>(false);
-const personalId = ref<string>("");
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const optionsType = ref<OpType[]>([]);
-const type = ref<string>("");
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "citizenId",
-  "fullname",
-  "organizationName",
-  "birthDate",
-  "lastUpdatedAt",
-  "status",
-]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationName",
-    align: "left",
-    label: "หน่วยงานที่รับย้าย",
-    sortable: true,
-    field: "organizationName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "birthDate",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-//รีเซ็ต input
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-  fecthLists();
-};
-
-//ปิด modal
-const clickClose = () => {
-  modal.value = false;
-};
-
-// เพิ่มรายชื่อเพื่อย้ายสับเปลี่ยนตำแหน่ง
-const addPerson = () => {
-  modalDialog.value = true;
-};
-
-//ดึงข้อมูล API
-const fecthLists = async () => {
-  showLoader();
-  await http
-    .get(
-      config.API.changePositionById +
-        `/${id.value}?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${filterKeyword.value}`
-    )
-    .then(async (res) => {
-      let response = await res.data.result;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = response.total;
-      rows.value = response.data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// เปิดโครงสร้าง
-const openModalTree = (data: any, type: string) => {
-  personalId.value = data.id;
-  modalTree.value = true;
-  typeModal.value = type;
-  dataRows.value = data;
-  posType.value = data.posTypeOldId;
-  posLevel.value = data.posLevelOldId;
-  position.value = data.positionOld;
-};
-//เบข้อมูล
-const clickDelete = (id: string) => {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.changePositionByIdProfile + `/${id}`)
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        fecthLists();
-        hideLoader();
-      });
-  });
-};
-
-// ไปหน้ารายละเอียด
-const detailPage = (id: string) => {
-  router.push({
-    path: `/change-positions/personal/${id}`,
-  });
-};
-
-function onSave(data: any) {
-  showLoader();
-  http
-    .put(
-      config.API.changePositionByIdProfile + `/position/${personalId.value}`,
-      {
-        node: data.node,
-        nodeId: data.nodeId,
-        posmasterId: data.posmasterId,
-        posMasterNo: data.posMasterNo,
-        positionId: data.positionId,
-        orgRevisionId: data.orgRevisionId,
-        position: data.positionName,
-        positionField: data.positionField,
-        posTypeId: data.posTypeId,
-        posTypeName: data.posTypeName,
-        posLevelId: data.posLevelId,
-        posLevelName: data.posLevelName,
-      }
-    )
-    .then((res) => {
-      modalTree.value = false;
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      fecthLists();
-      hideLoader();
-    });
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await fecthLists();
-  }
-);
-
-onMounted(() => {
-  fecthLists();
-});
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/change-positions`)"
-    />
-
-    รายชื่อผู้ที่ย้ายสับเปลี่ยนตำแหน่ง
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
-    <div class="row q-pa-md">
-      <div class="col-12">
-        <div class="row col-12">
-          <q-btn
-            @click="addPerson()"
-            size="14px"
-            flat
-            round
-            color="primary"
-            icon="add"
-          >
-            <q-tooltip>เพิ่มรายชื่อเพื่อย้ายสับเปลี่ยนตำแหน่ง</q-tooltip>
-          </q-btn>
-
-          <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            @keyup.enter="fecthLists()"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
-        </div>
-
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            row-key="id"
-            :visible-columns="visibleColumns"
-            :rows-per-page-options="[1, 25, 50, 100]"
-            @update:pagination="updatePagination"
-          >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fecthLists"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  @click="detailPage(props.row.id)"
-                >
-                  <div v-if="col.name == 'no'">
-                    {{
-                      (pagination.page - 1) * pagination.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-                  <div v-else-if="col.name == 'fullname'">
-                    {{
-                      props.row.firstName
-                        ? `${props.row.prefix ?? ""}${
-                            props.row.firstName ?? ""
-                          } ${props.row.lastName ?? ""}`
-                        : "-"
-                    }}
-                  </div>
-
-                  <div v-else-if="col.name == 'status'">
-                    {{ props.row.status ? statusText(props.row.status) : "-" }}
-                  </div>
-                  <div v-else-if="col.name == 'birthDate'">
-                    {{
-                      props.row.birthDate ? date2Thai(props.row.birthDate) : "-"
-                    }}
-                  </div>
-                  <div v-else-if="col.name == 'organizationName'">
-                    <div class="col-4">
-                      <div class="text-weight-medium">
-                        {{ props.row.root !== null ? props.row.root : "-" }}
-                        {{
-                          props.row.rootShortName !== null
-                            ? `(${props.row.rootShortName})`
-                            : ""
-                        }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{ props.row.root ? props.row.root : "" }}
-                        {{
-                          props.row.rootShortName
-                            ? `(${props.row.rootShortName}${props.row.posMasterNo})`
-                            : ""
-                        }}
-                      </div>
-                    </div>
-                  </div>
-                  <div v-else-if="col.name == 'lastUpdatedAt'">
-                    {{
-                      props.row.lastUpdatedAt
-                        ? date2Thai(props.row.lastUpdatedAt)
-                        : "-"
-                    }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    v-if="
-                      props.row.status !== 'REPORT' &&
-                      props.row.status !== 'DONE'
-                    "
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
-                    flat
-                    round
-                    dense
-                  >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 250px">
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="openModalTree(props.row, 'MOVE')"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              color="primary"
-                              size="xs"
-                              name="mdi-bookmark-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section
-                            >เลือกหน่วยงานที่รับย้าย</q-item-section
-                          >
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="clickDelete(props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <DialogOrgSelect
-    :title="`เลือกหน่วยงานที่รับย้าย`"
-    v-model:modal="modalTree"
-    v-model:type="typeModal"
-    :posType="posType"
-    :posLevel="posLevel"
-    :position="position"
-    :dataRows="dataRows"
-    :onSubmit="onSave"
-  />
-
-  <DialogEvalute v-model:modal="modalDialog" :getData="fecthLists" />
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/ChangePosition/SendToCommand.vue b/src/modules/05_placement/components/ChangePosition/SendToCommand.vue
deleted file mode 100644
index d9f454e9e..000000000
--- a/src/modules/05_placement/components/ChangePosition/SendToCommand.vue
+++ /dev/null
@@ -1,301 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import type { UserDataNew } from "@/modules/05_placement/interface/response/AppointMent";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import { useTransferDataStore } from "@/modules/05_placement/store";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const storeFn = useTransferDataStore();
-const { statusText } = storeFn;
-
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  success,
-  messageError,
-  dialogConfirm,
-  hideLoader,
-  date2Thai,
-} = mixin;
-
-const $q = useQuasar();
-const selected = ref<[]>([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-const props = defineProps({
-  Modal: Boolean,
-  clickClose: Function,
-  fecthlistappointment: Function,
-  nextPage: Function,
-  optionsType: Array,
-  rows2: Array,
-  filterKeyword2: String,
-  type: String,
-});
-const visibleColumns2 = ref<string[]>(["no", "name", "createdAt"]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const pageNext = (item: object) => {
-  props.nextPage?.(item);
-};
-const emit = defineEmits([
-  "update:filterKeyword2",
-  "update:type",
-  "update:selected",
-]);
-const updateInput = (value: any) => {
-  emit("update:filterKeyword2", value);
-};
-
-// const updateInputType = (value: string) => {
-//   emit("update:type", value);
-// };
-//รีเซ็ตค่าในช่องค้นหา
-const Reset = () => {
-  emit("update:filterKeyword2", "");
-};
-
-//ส่งไปออกคำสั่ง
-const sendToCommand = () => {
-  dialogConfirm($q, async () => {
-    let pId: string[] = [];
-    let Type = props.type as string;
-    selected.value.forEach((e: UserDataNew) => {
-      pId.push(e.id);
-    });
-    let data = {
-      id: pId,
-    };
-    showLoader();
-    await http
-      .put(config.API.apppointmentReport(Type), data)
-      .then((res) => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-        props.fecthlistappointment?.();
-        selected.value = [];
-        props.clickClose?.();
-      });
-  });
-};
-
-watchEffect(() => {
-  if (props.Modal === true) {
-    selected.value = [];
-  }
-});
-</script>
-<template>
-  <q-dialog v-model="props.Modal">
-    <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="clickClose" />
-      <q-separator />
-      <q-card-section>
-        <div class="row justify-between">
-          <div class="col-5">
-            <!-- <q-toolbar style="padding: 0">
-              <q-select
-                outlined
-                dense
-                :model-value="type"
-                @update:model-value="updateInputType"
-                :options="optionsType"
-                label="คำสั่งแต่งตั่ง-เลื่อน-ย้าย"
-                style="width: 400px; max-width: auto"
-                emit-value
-                map-options
-                option-label="name"
-                option-value="id"
-              />
-            </q-toolbar> -->
-          </div>
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="profileId"
-          flat
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td auto-width>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
-              </q-td>
-              <q-td
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                @click="pageNext(props.row)"
-              >
-                <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-                <div v-else-if="col.name == 'fullname'">
-                  {{
-                    props.row.firstName
-                      ? `${props.row.prefix ?? ""}${
-                          props.row.firstName ?? ""
-                        } ${props.row.lastName ?? ""}`
-                      : "-"
-                  }}
-                </div>
-
-                <div v-else-if="col.name == 'status'">
-                  {{ props.row.status ? statusText(props.row.status) : "-" }}
-                </div>
-                <div v-else-if="col.name == 'dateOfBirth'">
-                  {{
-                    props.row.dateOfBirth
-                      ? date2Thai(props.row.dateOfBirth)
-                      : "-"
-                  }}
-                </div>
-                <div v-else-if="col.name == 'organizationName'">
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{ props.row.root !== null ? props.row.root : "-" }}
-                      {{
-                        props.row.rootShortName !== null
-                          ? `(${props.row.rootShortName})`
-                          : ""
-                      }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{
-                        props.row.nodeName !== null ? props.row.nodeName : ""
-                      }}
-                      {{
-                        props.row.nodeShortName !== null
-                          ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
-                          : ""
-                      }}
-                    </div>
-                  </div>
-                </div>
-                <div v-else-if="col.name == 'createdAt'">
-                  {{
-                    props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
-                  }}
-                </div>
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn
-          label="ส่งไปออกคำสั่ง"
-          @click="sendToCommand"
-          color="public"
-          :disable="checkSelected"
-        >
-          <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/05_placement/components/helpgovernment/Dialogbody.vue b/src/modules/05_placement/components/Help-Government/DialogOrders.vue
similarity index 96%
rename from src/modules/05_placement/components/helpgovernment/Dialogbody.vue
rename to src/modules/05_placement/components/Help-Government/DialogOrders.vue
index 4ecdf2f39..370960370 100644
--- a/src/modules/05_placement/components/helpgovernment/Dialogbody.vue
+++ b/src/modules/05_placement/components/Help-Government/DialogOrders.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -15,12 +18,6 @@ import type { officerType } from "@/modules/05_placement/interface/response/offi
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-
 /**
  * use
  */
@@ -188,13 +185,7 @@ const visibleColumns2 = ref<string[]>([
   "createdAt",
   "status",
 ]);
-const selected = ref<officerType[]>([]);
-
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
+const selected = ref<officerType[]>([]); //รายการที่เลือก
 
 /**
  * ยืนยันการส่งไปออกคำสั่ง
@@ -242,6 +233,11 @@ function Reset() {
   emit("update:filterKeyword2", "");
 }
 
+/**
+ * เมื่อ props.modal เป็น true
+ *
+ * กำหนดให้  selected เป็นค่าว่าง
+ */
 watch(
   () => props.Modal,
   () => {
@@ -354,7 +350,7 @@ watch(
       <q-card-actions align="right">
         <q-btn
           label="ส่งไปออกคำสั่ง"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
           @click="saveOrder"
           ><q-tooltip>ส่งไปออกคำสั่ง</q-tooltip></q-btn
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
similarity index 97%
rename from src/modules/05_placement/components/helpgovernment/governmentDetail.vue
rename to src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
index 9d43b2c23..1bf049e56 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRoute, useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -14,9 +16,6 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 /** importComponents*/
 import CardProfile from "@/components/CardProfile.vue";
 
-/** impoerStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const route = useRoute();
@@ -32,12 +31,11 @@ const {
   findOrgName,
 } = mixin;
 
-const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(false);
 const dataId = route.params.id as string;
-const dataProfile = ref<DataProfile>();
-
-const fullname = ref<string>("");
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false); //การแก้ไขข้อมูล
+const dataProfile = ref<DataProfile>(); //ข้อมุลส่วนตัว
+const fullname = ref<string>(""); //ชื่อ
 
 /** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
 const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัดเดิม
@@ -50,9 +48,9 @@ const status = ref<string>("");
 /**
  * fetch ข้อมูลรายละเอียด
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.officerDetail(dataId))
     .then((res: resHelpDetail) => {
       const data = res.data.result;
@@ -128,6 +126,9 @@ const getClass = (val: boolean) => {
   };
 };
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(() => {
   getData();
 });
diff --git a/src/modules/05_placement/components/Other/DialogHeader.vue b/src/modules/05_placement/components/Other/DialogHeader.vue
deleted file mode 100644
index 82ba60d98..000000000
--- a/src/modules/05_placement/components/Other/DialogHeader.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  close: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const close = async () => {
-  props.close();
-};
-</script>
-<template>
-  <q-toolbar class="q-py-md">
-    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
-    <q-btn
-      icon="close"
-      unelevated
-      round
-      dense
-      @click="close"
-      style="color: #ff8080; background-color: #ffdede"
-    />
-  </q-toolbar>
-</template>
-
-<style scoped lang="scss">
-.header-text {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 26px;
-  color: #35373c;
-}
-</style>
diff --git a/src/modules/05_placement/components/Other/Dialogbody.vue b/src/modules/05_placement/components/Other/DialogOrders.vue
similarity index 93%
rename from src/modules/05_placement/components/Other/Dialogbody.vue
rename to src/modules/05_placement/components/Other/DialogOrders.vue
index 3209c689e..c13572d6e 100644
--- a/src/modules/05_placement/components/Other/Dialogbody.vue
+++ b/src/modules/05_placement/components/Other/DialogOrders.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
@@ -41,12 +41,8 @@ const emit = defineEmits([
   "update:selected",
 ]);
 
-const selected = ref<any>([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0 || props.type === "") {
-    return true;
-  }
-});
+const selected = ref<any[]>([]); //รายการทีี่เลือก
+const OptionsTypeFn = ref<any[]>([]); //ตัวเลือกประเภทคำสั่ง
 
 /**
  * Table
@@ -183,21 +179,15 @@ function clickAddlist() {
   });
 }
 
-watch(
-  () => props.Modal,
-  () => {
-    if (props.Modal === true) {
-      selected.value = [];
-    }
-  }
-);
-
-// filter OptionsType
-const OptionsTypeFn = ref<any>([]);
-function filterFnOptionsType(val: string, update: any) {
+/**
+ * filter OptionsType
+ * @param val  คำค้นหา
+ * @param update Function
+ */
+function filterFnOptionsType(val: string, update: Function) {
   if (val == "") {
     update(() => {
-      OptionsTypeFn.value = props.optionsType;
+      OptionsTypeFn.value = props.optionsType || [];
     });
   } else {
     update(() => {
@@ -209,6 +199,20 @@ function filterFnOptionsType(val: string, update: any) {
     });
   }
 }
+
+/**
+ * เมื่อ props.modal เป็น true
+ *
+ * กำหนดให้  selected เป็นค่าว่าง
+ */
+watch(
+  () => props.Modal,
+  () => {
+    if (props.Modal === true) {
+      selected.value = [];
+    }
+  }
+);
 </script>
 
 <template>
@@ -334,7 +338,7 @@ function filterFnOptionsType(val: string, update: any) {
         <q-btn
           label="ส่งไปออกคำสั่ง"
           @click="clickAddlist"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         >
           <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/OtherDetail.vue
similarity index 94%
rename from src/modules/05_placement/components/Other/Detail.vue
rename to src/modules/05_placement/components/Other/OtherDetail.vue
index b93904e95..9568376d9 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/OtherDetail.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
-import { checkPermission } from "@/utils/permissions";
+
 import { useRoute, useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { tokenParsed } from "@/plugins/auth";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { tokenParsed } from "@/plugins/auth";
+
 /**
  * impotyType
  */
@@ -16,15 +19,11 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 /** importComponents*/
 import CardProfile from "@/components/CardProfile.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-const paramsId = route.params.id;
 const {
   messageError,
   showLoader,
@@ -35,29 +34,30 @@ const {
   success,
 } = mixin;
 
+const paramsId = route.params.id;
 const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
-const dataProfile = ref<DataProfile>();
-const fullName = ref<string>("");
+const dataProfile = ref<DataProfile>(); //ข้อมุลส่วนตัว
 const edit = ref<boolean>(false);
 const status = ref<string>("");
+const fullName = ref<string>("");
 
-const educationOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-const date = ref<Date | null>(null);
-const militaryDate = ref<Date | null>(null);
-const reason = ref<string>("");
+const educationOld = ref<string>(""); //วุฒิ/สาขา
+const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัด
+const positionTypeOld = ref<string>(""); //ประเภทตำแหน่ง
+const positionLevelOld = ref<string>(""); //ระดับตำแหน่ง
+const posNo = ref<string>(""); //เลขที่
+const salary = ref<number>(0); //เงินเดือน
+const date = ref<Date | null>(null); //ตั้งแต่วัน
+const militaryDate = ref<Date | null>(null); //พ้นราชการทหารเมื่อ
+const reason = ref<string>(""); //หมายเหตุ
 
 /**
  * fetch รายละเอียดรายการอื่นๆ
  */
-function fetchData() {
+async function fetchData() {
   showLoader();
-  http
+  await http
     .get(config.API.otherByid(paramsId.toString()))
     .then((res: resApiData) => {
       const data = res.data.result;
diff --git a/src/modules/05_placement/components/Other/OtherModal.vue b/src/modules/05_placement/components/Other/OtherModal.vue
deleted file mode 100644
index 775aacb88..000000000
--- a/src/modules/05_placement/components/Other/OtherModal.vue
+++ /dev/null
@@ -1,783 +0,0 @@
-<script setup lang="ts">
-import { useQuasar, QForm } from "quasar";
-import { onMounted, reactive, ref, watch } from "vue";
-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";
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
-
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
-
-const checkValidate = ref<boolean>(false);
-const myFormPosition = ref<any>();
-const selected = ref<string>("");
-const selectedFile = ref<string>("");
-const dataRespone = ref<any>();
-
-// Set form field
-let dataForm = reactive({
-  personalId: "",
-  containDate: new Date(),
-  posNoId: "",
-  positionId: "",
-  positionLevelId: "",
-  positionLineId: "",
-  positionPathSideId: "",
-  positionTypeId: "",
-  // salaryAmount: null,
-  // mouthSalaryAmount: null,
-  // positionSalaryAmount: null,
-});
-
-onMounted(async () => {
-  await fetchPublishFile();
-  await loadTreeData();
-  await fetchplacementPosition();
-});
-const fetchPublishFile = async () => {
-  await http
-    .get(config.API.getPublishFileHistory)
-    .then((res) => {
-      let data = res.data.result;
-      selectedFile.value = data[0].fileName;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-// โหลดข้อมูลโครงสร้างจาก json
-const treeData = ref<Array<any>>([]);
-const loadTreeData = async () => {
-  expanded.value = [];
-  await http
-    .get(`${config.s3ClusterUrl}${selectedFile.value}`)
-    .then((res: any) => {
-      treeData.value = res.data;
-      dataRespone.value = res.data;
-
-      // Filter objects with "name" null
-      const filteredData = res.data.filter(filterByPersonIdNull);
-      treeData.value = filteredData;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-function filterByPersonIdNull(obj: any) {
-  if (obj.name === null && obj.isCondition != true) {
-    return true;
-  }
-  if (obj.children && obj.children.length > 0) {
-    obj.children = obj.children.filter(filterByPersonIdNull);
-    return obj.children.length > 0;
-  }
-  return false;
-}
-
-// โหลด position
-const placementPosition = ref<any>([]);
-const fetchplacementPosition = async () => {
-  await http
-    .get(config.API.placementPosition())
-    .then((res: any) => {
-      placementPosition.value = res.data.result;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
-};
-
-const search = ref<string>("");
-//reset Tree Filter
-const filterRef = ref<any>(null);
-// const resetFilter = () => {
-//   search.value = "";
-//   filterRef.value.focus();
-// };
-
-const props = defineProps({
-  personalId: String,
-  modal: Boolean,
-  close: {
-    type: Function,
-    default: () => console.log("close modal"),
-  },
-  personal: Object,
-});
-
-const myFilterMethod = (node: any, filter: string) => {
-  const filt = filter;
-
-  return (
-    // ((node.name && node.name == null) || !node.name) &&
-    (node.name && node.name.indexOf(filt) > -1) ||
-    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-    (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
-      node.governmentCode.toString().indexOf(filt) > -1) ||
-    (node.agency && node.agency.indexOf(filt) > -1) ||
-    (node.government && node.government.indexOf(filt) > -1) ||
-    (node.department && node.department.indexOf(filt) > -1) ||
-    (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
-      node.organizationShortName.indexOf(filt) > -1) ||
-    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
-      node.executivePositionSide.indexOf(filt) > -1) ||
-    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
-  );
-};
-
-const validateData = async () => {
-  checkValidate.value = true;
-  await myFormPosition.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-const id = ref<string>("");
-const saveAppoint = async () => {
-  myFormPosition.value.validate().then(async (result: boolean) => {
-    if (props.personalId !== undefined) {
-      id.value = props.personalId.toString();
-    }
-    if (result) {
-      const dataAppoint = await {
-        // personalId: props.personalId,
-        recruitDate: dataForm.containDate,
-        posNoId: dataForm.posNoId,
-        positionId: dataForm.positionId,
-        positionLevelId: dataForm.positionLevelId,
-        positionLineId: dataForm.positionLineId,
-        positionPathSideId: dataForm.positionPathSideId,
-        positionTypeId: dataForm.positionTypeId,
-        // salaryAmount: dataForm.salaryAmount,
-        // mouthSalaryAmount: dataForm.mouthSalaryAmount,
-        // positionSalaryAmount: dataForm.positionSalaryAmount,
-      };
-
-      showLoader();
-      await http
-        .put(config.API.otherPosition(id.value), dataAppoint)
-        .then(() => {
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await closeAndClear();
-          // await resetFilter();
-          await fetchPublishFile();
-          await loadTreeData();
-          await fetchplacementPosition();
-          hideLoader();
-        });
-    }
-  });
-};
-
-const editDataStatus = ref<boolean>(false);
-const clickEditRow = () => {
-  editDataStatus.value = true;
-};
-
-const closeModal = () => {
-  if (editDataStatus.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(() => {
-      editDataStatus.value = false;
-      closeAndClear();
-    });
-  } else {
-    closeAndClear();
-  }
-};
-
-const closeAndClear = async () => {
-  await props.close();
-  editDataStatus.value = false;
-  selected.value = "";
-  dataForm.personalId = "";
-  dataForm.containDate = new Date();
-  dataForm.posNoId = "";
-  dataForm.positionId = "";
-  dataForm.positionLevelId = "";
-  dataForm.positionLineId = "";
-  dataForm.positionPathSideId = "";
-  dataForm.positionTypeId = "";
-  // dataForm.salaryAmount = null;
-  // dataForm.mouthSalaryAmount = null;
-  // dataForm.positionSalaryAmount = null;
-};
-// ตำแหน่งเลขที่
-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) => {
-  if (data.name == null && selected.value != data.keyId) {
-    editDataStatus.value = true;
-    selected.value = data.keyId;
-
-    // posNo Options
-    posNoOptions.value = [
-      {
-        label: data.positionNum,
-        value: data.positionNumId,
-      },
-    ];
-    dataForm.posNoId = data.positionNumId;
-
-    // position Options
-    positionOptions.value = [
-      {
-        label: data.positionName,
-        value: data.positionNameId,
-      },
-    ];
-    dataForm.positionId = data.positionNameId;
-
-    // positionPathSide Options
-    let positionPathSideArr: any = [];
-    if (data.positionSideNameObj && data.positionSideNameObj != null) {
-      data.positionSideNameObj.map((x: any) => {
-        positionPathSideArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionPathSideOptions.value = positionPathSideArr;
-      dataForm.positionPathSideId =
-        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
-          ? ""
-          : positionPathSideArr[0].value;
-    }
-
-    // positionType Options
-    positionTypeOptions.value = [
-      {
-        label: data.positionType,
-        value: data.positionTypeId,
-      },
-    ];
-    dataForm.positionTypeId = data.positionTypeId;
-
-    // positionLine Options
-    positionLineOptions.value = [
-      {
-        label: data.positionLine,
-        value: data.positionLineId,
-      },
-    ];
-    dataForm.positionLineId = data.positionLineId;
-
-    // positionLevel Options
-    let positionLevelsArr: any = [];
-    if (data.positionLevelObj != null) {
-      data.positionLevelObj.map((x: any) => {
-        positionLevelsArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionLevelOptions.value = positionLevelsArr;
-      dataForm.positionLevelId =
-        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
-          ? ""
-          : positionLevelsArr[0].value;
-      dataForm.positionLevelId = data.positionLevelObj[0].Id;
-    }
-  } else if (selected.value == data.keyId) {
-    selected.value = "";
-    dataForm.posNoId = "";
-    dataForm.positionId = "";
-    dataForm.positionLevelId = "";
-    dataForm.positionLineId = "";
-    dataForm.positionPathSideId = "";
-    dataForm.positionTypeId = "";
-  }
-};
-
-const checkPosition = (val: string) => {
-  const num = placementPosition.value.findIndex((e: string) => e === val);
-  return num;
-};
-const personal = ref<any>();
-const expanded = ref<string[]>([]);
-
-watch(props, () => {
-  expanded.value = [];
-  const dataPersonal = props.personal;
-
-  if (dataPersonal) {
-    dataPersonal.map((data: any) => {
-      personal.value = data;
-    });
-  }
-
-  if (personal.value) {
-    let findData: any = null;
-    dataRespone.value.map((x: any) => {
-      findData = findByPerson(x);
-
-      if (findData != null) {
-        selectedPosition(findData);
-        for (let i = 3; i <= findData.keyId.length; i += 2) {
-          expanded.value.push(findData.keyId.slice(0, i));
-        }
-      }
-    });
-    // loadTreeData();
-    // selectedPosition(findData.children.children.children)
-  }
-});
-
-function findByPerson(element: any): any {
-  if (
-    element.positionNumId &&
-    element.positionLineId === personal.value.positionLineId &&
-    element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId &&
-    (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId)
-  ) {
-    return element;
-  } else if (element.children) {
-    var i;
-    var result = null;
-    for (i = 0; result == null && i < element.children.length; i++) {
-      result = findByPerson(element.children[i]);
-    }
-    return result;
-  }
-  return null;
-}
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myFormPosition">
-        <DialogHeader :tittle="'เลือกหน่วยงานที่รับโอน'" :close="closeModal" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-7 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    ref="filterRef"
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <div class="q-pa-sm q-gutter-sm">
-                    <q-tree
-                      no-transition
-                      dense
-                      :nodes="treeData"
-                      node-key="keyId"
-                      :filter="search"
-                      :no-results-label="notFound"
-                      :no-nodes-label="noData"
-                      :filter-method="myFilterMethod"
-                      v-model:expanded="expanded"
-                    >
-                      <template v-slot:header-organization="prop">
-                        <div class="col">
-                          <div
-                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                          >
-                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                            <div class="text-weight-medium">
-                              {{ prop.node.organizationName }}
-                            </div>
-
-                            <!--แสดง Total Count PositionNum-->
-                            <!-- <q-badge rounded color="grey-2" text-color="dark"
-                                                            :label="prop.node.totalPositionCount" /> -->
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
-
-                            <q-space />
-                          </div>
-                          <div class="col items-center q-px-xs q-pt-xs">
-                            <div class="text-weight-medium text-grey-7">
-                              {{ prop.node.governmentCode }}
-                              {{ prop.node.organizationShortName }}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="selected == prop.node.keyId"
-                          @click="selectedPosition(prop.node)"
-                          :disable="
-                            prop.node.name != null ||
-                            checkPosition(prop.node.positionNumId) != -1
-                          "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        >
-                          <img
-                            v-if="
-                              prop.node.avatar == '' ||
-                              prop.node.avatar ==
-                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                            "
-                            src="@/assets/avatar_user.jpg"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div
-                            v-if="prop.node.name == null"
-                            class="q-px-sm text-weight-medium text-red"
-                          >
-                            ว่าง
-                          </div>
-                          <!--=====หัวหน้า สีเขียว=====-->
-                          <div v-else-if="prop.node.positionLeaderFlag">
-                            <div
-                              class="q-px-sm text-weight-medium text-primary"
-                            >
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--=====ลูกน้อง สีปกติ=====-->
-                          <div v-else>
-                            <div class="q-px-sm text-weight-medium">
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionName }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionNum }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionLevel }}
-                          </div>
-                          <q-icon
-                            v-if="prop.node.positionLeaderFlag"
-                            class="q-mr-sm"
-                            size="15px"
-                            color="primary"
-                            name="mdi-bookmark"
-                          ></q-icon>
-
-                          <q-space />
-                        </q-item>
-                      </template>
-                    </q-tree>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-5">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="dataForm.containDate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            class="full-width inputgreen cursor-pointer"
-                            outlined
-                            dense
-                            :model-value="
-                              date2Thai(new Date(dataForm.containDate))
-                            "
-                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
-        ]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        outlined
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="posNoOptions"
-                        v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionOptions"
-                        v-model="dataForm.positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionPathSideOptions"
-                        v-model="dataForm.positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        map-options
-                      />
-                    </div>
-
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionTypeOptions"
-                        v-model="dataForm.positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionLineOptions"
-                        v-model="dataForm.positionLineId"
-                        :label="`${'สายงาน'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="dataForm.positionLevelId"
-                        :label="`${'ระดับ'}`"
-                        hide-bottom-space
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        emit-value
-                        map-options
-                      />
-                    </div>
-                    <!-- <div class="col-sx-12 col-sm-12 col-md-12">
-                      <q-separator inset size="2px" class="q-my-md" />
-                    </div> -->
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.salaryAmount"
-                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.positionSalaryAmount"
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.mouthSalaryAmount"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="saveAppoint"
-          v-model:modalEdit="editDataStatus"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.q-tree__node-header {
-  padding: 0px;
-  margin-top: 0px;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.my-list-link {
-  color: rgb(118, 168, 222);
-  border-radius: 5px;
-  background: #a3d3fb48 !important;
-  font-weight: 600;
-  border: 1px solid rgba(175, 185, 196, 0.217);
-  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
-}
-</style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
similarity index 89%
rename from src/modules/05_placement/components/PersonalDetail/Detail.vue
rename to src/modules/05_placement/components/PersonalDetail/DetailMain.vue
index d66ac41aa..8d46fe73d 100644
--- a/src/modules/05_placement/components/PersonalDetail/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
@@ -1,30 +1,20 @@
 <!-- หน้า รายละเอียดของ -->
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-import { useDataStore } from "@/stores/data";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import { useRoute, useRouter } from "vue-router";
+import { useDataStore } from "@/stores/data";
+import { usePersonalDataStore } from "@/modules/05_placement/storePersona";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { usePersonalDataStore } from "@/modules/05_placement/storePersona";
-
-import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
-import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
-import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
-import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
-import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
-import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
-import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
-import Document from "@/modules/05_placement/components/PersonalDetail/Information/Document.vue";
-
 import {
   AddressDataDefualt,
   FamilyDataDefualt,
 } from "@/modules/05_placement/interface/index/Main";
-
 import type {
   Property,
   PointExam,
@@ -35,25 +25,32 @@ import type {
   optionData,
   InformationOps,
 } from "@/modules/05_placement/interface/index/Main";
-
 import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
-import { checkPermission } from "@/utils/permissions";
 
-const $q = useQuasar(); // show dialog
+import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
+import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
+import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
+import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
+import EducationVue from "@/modules/05_placement/components/PersonalDetail/Information/Education.vue";
+import ExamResult from "@/modules/05_placement/components/PersonalDetail/Information/ExamResult.vue";
+import Qualification from "@/modules/05_placement/components/PersonalDetail/Information/Qualification.vue";
+import Document from "@/modules/05_placement/components/PersonalDetail/Information/Document.vue";
+
+const $q = useQuasar();
+const route = useRoute();
 const router = useRouter();
 const store = useDataStore();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const mixin = useCounterMixin();
 const storePersonal = usePersonalDataStore();
 const { showLoader, hideLoader, messageError } = mixin;
 const { changeTab } = store;
-const statusEdit = ref<boolean>(false);
-const profileType = ref<string>("");
 
-const route = useRoute();
 const examId = ref<string>(
   route.params.personalId ? route.params.personalId.toString() : ""
 );
-
+const statusEdit = ref<boolean>(false); //การแก้ไข
+const profileType = ref<string>(""); //ประเภทของบุคคล
+//ผลการสอบ
 const ExamDataDefualt: PointExam = {
   pointA: 0,
   pointB: 0,
@@ -67,7 +64,7 @@ const ExamDataDefualt: PointExam = {
   examRound: 0,
   pass: "",
 };
-
+//ข้อมูลส่วนตัว
 const InformationDataDefualt: Information = {
   idCard: "",
   prefix: "",
@@ -89,29 +86,23 @@ const InformationDataDefualt: Information = {
   religion: "",
   religionId: "",
 };
-
+//ชื่อ
 const personalData = ref({
   id: "",
   fullName: "",
 });
 const QualificationData = ref<Property[]>([]);
-const ExamData = ref<PointExam>(ExamDataDefualt);
-const InformationData = ref<Information>(InformationDataDefualt);
-const EducationData = ref<Education[]>([]);
-const FamilyData = ref<Family>(FamilyDataDefualt);
-const AddressData = ref<Address>(AddressDataDefualt);
-const CertificateData = ref<Certificate[]>([]);
+const ExamData = ref<PointExam>(ExamDataDefualt); //ข้อมูลผลการสอบ
+const InformationData = ref<Information>(InformationDataDefualt); //ข้อมูลส่วนตัว
+const EducationData = ref<Education[]>([]); //ข้อมูลประวัติการศึกษา
+const FamilyData = ref<Family>(FamilyDataDefualt); //ข้อมูลครอบครัว
+const AddressData = ref<Address>(AddressDataDefualt); //ข้อมูลที่อยู่
+const CertificateData = ref<Certificate[]>([]); //ข้อมูลใบอนุญาตประกอบอาชีพ
+//สิทธิการแก้ไข
 const isEdit = ref<boolean>(
   checkPermission(route)?.attrIsUpdate ? true : false
 );
 
-const guidCheck = (id: string) => {
-  if (id == "00000000-0000-0000-0000-000000000000") {
-    return null;
-  }
-  return id;
-};
-
 const Ops = ref<InformationOps>({
   prefixOps: [],
   genderOps: [],
@@ -144,16 +135,19 @@ const OpsFilter = ref<InformationOps>({
   ],
 });
 
-const fetchData = async () => {
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดทั้งหมด
+ */
+async function fetchData() {
+  showLoader();
   storePersonal.loading = false;
   await http
     .get(config.API.placementPersonalId(examId.value))
-    .then((res: any) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       storePersonal.fecthDataInformation(data);
       personalData.value.fullName = data.fullName;
       personalData.value.id = data.personalId;
-
       InformationData.value.idCard = data.idCard;
       InformationData.value.fullName = data.fullName;
       InformationData.value.firstname = data.firstname;
@@ -263,19 +257,24 @@ const fetchData = async () => {
       });
       CertificateData.value = listCert;
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
-};
+    .finally(() => {
+      hideLoader();
+    });
+}
 
-const fetchDataByType = async (type: string) => {
-  // storePersonal.loading = false;
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดตามประเภท
+ * @param type ประเภทของข้อมูล
+ */
+async function fetchDataByType(type: string) {
   showLoader();
   await http
     .get(config.API.placementPersonalId(examId.value))
-    .then((res: any) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       storePersonal.fecthDataInformation(data);
       personalData.value.fullName = data.fullName;
       personalData.value.id = data.personalId;
@@ -392,18 +391,19 @@ const fetchDataByType = async (type: string) => {
         QualificationData.value = data.isProperty;
       }
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
- * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ * ฟังก์ชันดึงข้อมูลเกี่ยวกับบุคคล
  */
-const fetchPerson = async () => {
+async function fetchPerson() {
+  showLoader();
   await http
     .get(config.API.profileNewMetaMain)
     .then((res) => {
@@ -464,16 +464,32 @@ const fetchPerson = async () => {
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
     })
-    .catch((e: any) => {})
-    .finally(() => {});
-};
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
+/**
+ * ฟังก์ชันเช็ต id
+ * @param id profile
+ * @returns ถ้า ID เป็น   "00000000-0000-0000-0000-000000000000" ให้ return null
+ *
+ */
+function guidCheck(id: string) {
+  if (id == "00000000-0000-0000-0000-000000000000") {
+    return null;
+  }
+  return id;
+}
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(async () => {
-  //   await checkProfileData();
-
-  await fetchData();
-  await changeTab("information");
-  await fetchPerson();
+  await Promise.all([fetchData(), changeTab("information"), fetchPerson()]);
 });
 </script>
 
diff --git a/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue b/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
index 516a68ec4..7d0f59e6b 100644
--- a/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
+++ b/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
@@ -53,10 +53,6 @@ const edit = async () => {
   updateEdit(!props.editvisible);
   props.edit();
 };
-const checkSave = () => {
-  props.validate();
-  props.save();
-};
 
 const clickNext = async () => {
   await props.clickNext();
@@ -93,8 +89,7 @@ const clickPrevious = async () => {
       label="ลบข้อมูล"
       color="red"
       @click="clickDelete"
-      ><!-- icon="mdi-delete"
-      <q-tooltip>ลบข้อมูล</q-tooltip> -->
+    >
     </q-btn>
     <q-btn
       v-show="editvisible"
@@ -106,8 +101,6 @@ const clickPrevious = async () => {
       label="ยกเลิกแก้ไข"
       v-if="modalEdit == true"
     >
-      <!-- icon="mdi-undo"
-      <q-tooltip>ยกเลิก</q-tooltip> -->
     </q-btn>
     <q-btn
       v-if="!editvisible"
@@ -117,8 +110,6 @@ const clickPrevious = async () => {
       :color="editvisible ? 'grey-7' : 'primary'"
       @click="edit"
     >
-      <!-- icon="mdi-pencil-outline"
-      <q-tooltip></q-tooltip> -->
     </q-btn>
 
     <q-btn
@@ -128,8 +119,7 @@ const clickPrevious = async () => {
       :color="!editvisible ? 'grey-7' : 'public'"
       type="submit"
       label="บันทึก"
-      ><!-- icon="mdi-content-save-outline"
-      <q-tooltip>บันทึก</q-tooltip> -->
+    >
     </q-btn>
   </q-card-actions>
 </template>
diff --git a/src/modules/05_placement/components/PersonalDetail/DialogHeader.vue b/src/modules/05_placement/components/PersonalDetail/DialogHeader.vue
deleted file mode 100644
index bf1bff6de..000000000
--- a/src/modules/05_placement/components/PersonalDetail/DialogHeader.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  tittle: String,
-  close: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const close = async () => {
-  props.close();
-};
-</script>
-<template>
-  <q-toolbar>
-    <q-toolbar-title class="text-subtitle2 text-bold">{{
-      tittle
-    }}</q-toolbar-title>
-    <q-btn
-      icon="close"
-      unelevated
-      round
-      dense
-      @click="close"
-      style="color: #ff8080; background-color: #ffdede"
-    />
-  </q-toolbar>
-</template>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index 218161c96..26af481ea 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -1,17 +1,15 @@
 <!-- card ข้อมูลที่อยู่ -->
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
-
-import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 
 import { useRoute } from "vue-router";
-import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
+import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import type {
   AddressOps,
   Address as AddressType,
@@ -20,6 +18,16 @@ import type {
 } from "@/modules/05_placement/interface/index/Main";
 import type { PropType } from "vue";
 
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
+
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+
+/**
+ * props
+ */
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -40,21 +48,11 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:statusEdit"]);
 
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-const edit = ref<boolean>(false);
-const onEdit = ref<boolean>(false);
-const addressData = ref<AddressType>(props.data);
-const myform = ref<any>();
+const myform = ref<any>(); //refForm
+const edit = ref<boolean>(false); //การแก้ไข
+const onEdit = ref<boolean>(false); //การแก้ไข
+const addressData = ref<AddressType>(props.data); //ข้อมูลที่อยู่
+//ตัวเลือกข้อมูลที่อยู่
 const Ops = ref<AddressOps>({
   provinceOps: [],
   districtOps: [],
@@ -62,6 +60,7 @@ const Ops = ref<AddressOps>({
   subdistrictOps: [],
   subdistrictCOps: [],
 });
+//ข้อมูลที่อยู่
 const OpsFilter = ref<AddressOps>({
   provinceOps: [],
   districtOps: [],
@@ -69,14 +68,14 @@ const OpsFilter = ref<AddressOps>({
   subdistrictOps: [],
   subdistrictCOps: [],
 });
-
+//ที่อยู่ตามทะเบียนบ้าน
 const registAddress = reactive<AddressData>({
   subDistrictId: "",
   zipCode: "",
   districtId: "",
   provinceId: "",
 });
-
+//ที่อยู่ปัจบัน
 const currentAddress = reactive<AddressData>({
   subDistrictId: "",
   zipCode: "",
@@ -84,12 +83,13 @@ const currentAddress = reactive<AddressData>({
   provinceId: "",
 });
 
-onMounted(async () => {
-  await getNewData();
-  emit("update:statusEdit", false);
-});
-
-const filterSelector = (val: any, update: Function, refData: string) => {
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "provinceOps":
       update(() => {
@@ -130,9 +130,9 @@ const filterSelector = (val: any, update: Function, refData: string) => {
     default:
       break;
   }
-};
+}
 
-const refreshData = async () => {
+function refreshData() {
   myform.value.reset();
   if (onEdit.value) {
     dialogConfirm(
@@ -150,15 +150,21 @@ const refreshData = async () => {
   } else {
     edit.value = false;
   }
-};
+}
 
-const getNewData = async () => {
+/**
+ * ฟังก์ชันดึงข้อมูลใหม่
+ */
+async function getNewData() {
   await fetchProvince();
-};
+}
 
-// บันทึกข้อมูล
-const editData = async () => {
+/**
+ * ฟังก์ชันบันทึกการแก้ไข
+ */
+async function editData() {
   dialogConfirm($q, async () => {
+    showLoader();
     const body = {
       registrationSame: addressData.value.registSame == "1",
       registrationAddress: addressData.value.registAddress,
@@ -201,13 +207,19 @@ const editData = async () => {
       })
       .catch((e) => {
         messageError($q, e);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
-};
+}
 
-// เลือกข้อมูลจังหวัด
-const selectProvince = async (e: string | null, name: string) => {
+/**
+ * ฟังก์ชันเลือกข้อมูลจังหวัด
+ * @param e id จังหวัด
+ * @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function selectProvince(e: string | null, name: string) {
   onEdit.value = true;
   if (e != null) {
     if (name == "1") {
@@ -222,10 +234,14 @@ const selectProvince = async (e: string | null, name: string) => {
     myform.value.resetValidation();
     await fetchDistrict(e, name);
   }
-};
+}
 
-// เลือกข้อมูลอำเภอ
-const selectDistrict = async (e: string | null, name: string) => {
+/**
+ * ฟังก์ชันลือกข้อมูลอำเภอ
+ * @param e id อำเภอ
+ * @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function selectDistrict(e: string | null, name: string) {
   onEdit.value = true;
   if (e != null) {
     if (name == "1") {
@@ -238,10 +254,14 @@ const selectDistrict = async (e: string | null, name: string) => {
     myform.value.resetValidation();
     await fetchSubDistrict(e, name);
   }
-};
+}
 
-// เลือกข้อมูลตำบล
-const selectSubDistrict = (e: string | null, name: string) => {
+/**
+ * ฟังก์ชันเลือกข้อมูลตำบล
+ * @param e id ตำบล
+ * @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function selectSubDistrict(e: string | null, name: string) {
   onEdit.value = true;
   if (e != null) {
     if (name == "1") {
@@ -254,10 +274,12 @@ const selectSubDistrict = (e: string | null, name: string) => {
       currentAddress.zipCode = namecode;
     }
   }
-};
+}
 
-// ดึงข้อมูลจังหวัด
-const fetchProvince = async () => {
+/**
+ * ฟังก์ชันดึงข้อมูลจังหวัด
+ */
+async function fetchProvince() {
   showLoader();
   await http
     .get(config.API.orgProvince)
@@ -330,10 +352,14 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {});
-};
+}
 
-// ดึงข้อมูลอำเภอ
-const fetchDistrict = async (id: string | null, position: string) => {
+/**
+ * ฟังก์ชันดึงข้อมูลอำเภอ
+ * @param id จังหวัด
+ * @param position  ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function fetchDistrict(id: string | null, position: string) {
   if (id != null && id != "") {
     await http
       .get(config.API.orgProvince + `/${id}`)
@@ -373,10 +399,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
       })
       .finally(() => {});
   }
-};
+}
 
-// ดึงข้อมูลตำบล
-const fetchSubDistrict = async (id: string | null, position: string) => {
+/**
+ * ฟังก์ชันดึงข้อมูลตำบล
+ * @param id อำเภอ
+ * @param position  ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function fetchSubDistrict(id: string | null, position: string) {
   if (id != null && id != "") {
     await http
       .get(config.API.orgDistrict + `/${id}`)
@@ -422,9 +452,12 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         hideLoader();
       });
   }
-};
+}
 
-const changeBtn = async () => {
+/**
+ * ฟังก์ชันการแก้ไขข้อมูล
+ */
+function changeBtn() {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       props.notiNoEdit();
@@ -434,18 +467,33 @@ const changeBtn = async () => {
   } else {
     emit("update:statusEdit", false);
   }
-};
+}
 
-const getClass = (val: boolean) => {
+/**
+ * ฟังก์ชันแก้ไขข้อมูล
+ */
+function checkEdit() {
+  onEdit.value = true;
+}
+
+/**
+ * ฟังก์ชันสำหรับคืนค่าชื่อคลาสตามค่าที่กำหนด
+ * @param val ค่าที่ใช้กำหนดคลาส
+ */
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
-};
-
-function checkEdit() {
-  onEdit.value = true;
 }
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(async () => {
+  await getNewData();
+  emit("update:statusEdit", false);
+});
 </script>
 
 <template>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
index fbc82ee9d..2307a3245 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@@ -1,26 +1,30 @@
 <!-- card ใบอนุญาตประกอบอาชีพ -->
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/05_placement/store";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   RequestItemsObject,
   DataProps,
 } from "@/modules/05_placement/interface/request/Certificate";
-import type { ResponseObject } from "@/modules/05_placement/interface/response/Certificate";
-import HistoryTable from "@/components/TableHistory.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type { PropType } from "vue";
 import type { Certificate } from "@/modules/05_placement/interface/index/Main";
 
+import HistoryTable from "@/components/TableHistory.vue";
+import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Information/TableEducation.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
+
+/**
+ * props
+ */
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -48,7 +52,7 @@ const mixin = useCounterMixin();
 const {
   date2Thai,
   success,
-  dateToISO,
+
   messageError,
   showLoader,
   hideLoader,
@@ -75,10 +79,7 @@ const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
 const tittleHistory = ref<string>("ประวัติแก้ไขใบอนุญาตประกอบอาชีพ"); //
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-// const profileId = ref<string>(
-//   route.params.id ? route.params.id.toString() : ""
-// );
+
 const profileId = ref<string>("");
 const rows = ref<Certificate[]>([]);
 const filter = ref<string>(""); //search data table
@@ -238,19 +239,6 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("certicate", count);
-});
-
-onMounted(async () => {
-  // await fetchData();
-  if (route.params.id) {
-    profileId.value = route.params.personalId.toString();
-  }
-  // await props.fetch();
-  rows.value = props.data;
-});
-
 /**
  * กดดูข้อมูลก่อนหน้า
  */
@@ -489,55 +477,6 @@ const clickEditRow = () => {
   editRow.value = true;
 };
 
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
- */
-const clickHistory = async (row: RequestItemsObject) => {
-  tittleHistory.value =
-    props.profileType == "employee"
-      ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
-      : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileCertHisId(row.id))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObject) => {
-        rowsHistory.value.push({
-          id: e.id,
-          certificateNo: e.certificateNo,
-          issuer: e.issuer,
-          issueDate: new Date(e.issueDate),
-          expireDate: new Date(e.expireDate),
-          certificateType: e.certificateType,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * validate input ใน dialog
- */
-const validateData = async () => {
-  checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
@@ -548,6 +487,17 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  changeProfileColumns("certicate", count);
+});
+
+onMounted(() => {
+  if (route.params.id) {
+    profileId.value = route.params.personalId.toString();
+  }
+  rows.value = props.data;
+});
 </script>
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md no-border">
@@ -587,17 +537,6 @@ const getClass = (val: boolean) => {
                 {{ col.value }}
               </div>
             </q-td>
-            <!-- <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td> -->
           </q-tr>
         </template>
       </ProfileTable>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Document.vue b/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
index de088f55f..9cd6b4dbc 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, computed, ref, watch } from "vue";
-import { useQuasar, QForm } from "quasar";
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
 import axios from "axios";
@@ -15,6 +15,18 @@ interface ArrayFileList {
   fileName: string;
 }
 
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const route = useRoute();
+const {
+  success,
+  messageError,
+  showLoader,
+  dialogConfirm,
+  hideLoader,
+  dialogRemove,
+} = mixin;
+
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -41,72 +53,13 @@ const emit = defineEmits(["update:statusEdit"]);
 const documentFile = ref<any>(null);
 const fileList = ref<ArrayFileList[]>([]);
 
-const $q = useQuasar(); // show dialog
-const mixin = useCounterMixin();
-const route = useRoute();
-const {
-  success,
-  messageError,
-  showLoader,
-  dialogConfirm,
-  hideLoader,
-  dialogRemove,
-} = mixin;
 const profileId = ref<string>(
   route.params.personalId ? route.params.personalId.toString() : ""
 );
-const edit = ref<boolean>(false);
-const uploader = ref<any>();
-const files = ref<any>([]);
-const file = ref<any>([]);
+const edit = ref<boolean>(false); //การแก้ไขข้อมูล
+const uploader = ref<any>(); //
+const file = ref<any>([]); //ไฟล์์
 const name = ref<string>("");
-const dataMain = ref<any>([]);
-
-// const getData = async () => {
-//   if (props.datainformation) {
-//     dataMain.value = props.datainformation;
-//     files.value = dataMain.value.docs;
-//   }
-
-// โค้ดเก่ายังไม่ได้ใช้
-// if (profileId.value) {
-//   showLoader();
-//   await http
-//     .get(config.API.profilePaperId(profileId.value))
-//     .then((res) => {
-//       const data = res.data.result;
-//       files.value = data;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// }
-// };
-
-const deleteData = async (id: string) => {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      await http
-        .delete(config.API.documentDelid(profileId.value, id))
-        .then(() => {
-          success($q, "ลบไฟล์เอกสารสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await props.fetch();
-        });
-    },
-    "ยืนยันการลบเอกสารหลักฐาน",
-    "ต้องการยืนยันการลบเอกสารหลักฐานนี้หรือไม่ ?"
-  );
-};
 
 const uploadData = async () => {
   if (profileId.value) {
@@ -117,7 +70,6 @@ const uploadData = async () => {
       });
       const formData = new FormData();
       formData.append("file", newFile);
-      // formData.append("moss", "newFile");
       showLoader();
       await http
         .put(config.API.documentByid(profileId.value), formData)
@@ -134,26 +86,10 @@ const uploadData = async () => {
           edit.value = false;
           emit("update:statusEdit", false);
         });
-      // } else {
-      //   // modalError(
-      //   //   $q,
-      //   //   "ไม่สามารถอัปโหลดไฟล์ได้",
-      //   //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
-      //   // );
-      //   getData();
     }
   }
 };
 
-const fileAdd = async (val: any) => {
-  name.value = val[0].name;
-  file.value = val;
-};
-
-const downloadData = async (path: string) => {
-  window.open(path);
-};
-
 const changeBtn = async () => {
   name.value = "";
   if (edit.value == true) {
@@ -171,7 +107,6 @@ const changeBtn = async () => {
 /** ฟังชั่นใหม่ */
 function clickUpload(file: any) {
   const fileName = { fileName: file.name };
-
   dialogConfirm(
     $q,
     async () => {
@@ -295,6 +230,9 @@ function deleteFile(fileName: string) {
   });
 }
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการไฟล์
+ */
 async function getData() {
   showLoader();
   await http
@@ -312,6 +250,9 @@ async function getData() {
     });
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(async () => {
   await getData();
 });
diff --git a/src/modules/05_placement/components/PersonalDetail/Education.vue b/src/modules/05_placement/components/PersonalDetail/Information/Education.vue
similarity index 92%
rename from src/modules/05_placement/components/PersonalDetail/Education.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/Education.vue
index d74745cbf..7469bdb32 100644
--- a/src/modules/05_placement/components/PersonalDetail/Education.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Education.vue
@@ -4,8 +4,8 @@ import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
 
-import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
+import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Information/TableEducation.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
 import { useQuasar } from "quasar";
 import type {
@@ -23,6 +23,22 @@ import type {
 import type { QTableProps } from "quasar";
 import type { PropType } from "vue";
 
+const $q = useQuasar();
+const route = useRoute();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const mixin = useCounterMixin();
+const {
+  success,
+  dateToISO,
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  dialogConfirm,
+} = mixin;
+
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -38,21 +54,6 @@ const props = defineProps({
   },
 });
 
-const $q = useQuasar();
-const store = useProfileDataStore();
-const { profileData, changeProfileColumns } = store;
-const mixin = useCounterMixin();
-const {
-  success,
-  dateToISO,
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  dialogConfirm,
-} = mixin;
-const route = useRoute();
 const id = ref<string>("");
 const levelId = ref<string>();
 const Ops = ref<EduOps>({
@@ -96,6 +97,7 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
 const rows = ref<Education[]>(props.data);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
+
 profileData.education.columns.length == 0
   ? (visibleColumns.value = [
       "educationLevel",
@@ -108,7 +110,6 @@ profileData.education.columns.length == 0
       "durationYear",
       "other",
       "fundName",
-      //   "positionPath",
       "finishDate",
       "startDate",
       "endDate",
@@ -170,17 +171,7 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  //   {
-  //     name: "positionPath",
-  //     align: "left",
-  //     label: "เป็นวุฒิการศึกษาในตำแหน่ง",
-  //     sortable: true,
-  //     field: "positionPath",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
+
   {
     name: "degree",
     align: "left",
@@ -271,20 +262,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-watch(startDate, (count, prevCount) => {
-  minDate.value = new Date(`${startDate.value}-01-01`);
-});
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("education", count);
-});
-
-onMounted(async () => {
-  await fetchLevel();
-  await fetchPositionPath();
-  rows.value = props.data;
-});
-
+/**
+ * ฟังก์ชันดึงข้อมูลระดับ
+ */
 const fetchLevel = async () => {
   showLoader();
   await http
@@ -306,6 +286,9 @@ const fetchLevel = async () => {
     });
 };
 
+/**
+ * ฟังก์ชันดึงข้อมูลตำแหน่ง
+ */
 const fetchPositionPath = async () => {
   let option: any = [];
   option.push({ id: true, name: "ใช่" });
@@ -314,7 +297,13 @@ const fetchPositionPath = async () => {
   OpsFilter.value.positionPathOptions = option;
 };
 
-const filterSelector = (val: any, update: Function, refData: string) => {
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+const filterSelector = (val: string, update: Function, refData: string) => {
   switch (refData) {
     case "levelOptions":
       update(() => {
@@ -359,7 +348,7 @@ const clickNext = async () => {
 /**
  * กดดูข้อมูลต่อไป
  */
-const getData = () => {
+const getData = async () => {
   const row = rows.value[rowIndex.value];
   const checkLevelEducation = OpsFilter.value.levelOptions.find(
     (e) => e.id === row.educationLevelId
@@ -367,8 +356,6 @@ const getData = () => {
 
   levelId.value = checkLevelEducation ? row.educationLevelId : "";
   isDate.value = row.isDate;
-  isEducation.value = row.isEducation;
-  //   positionPathId.value = resultPath;
   institute.value = row.institute;
   degree.value = row.degree;
   field.value = row.field;
@@ -396,7 +383,7 @@ const getData = () => {
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
-const checkRowPage = () => {
+const checkRowPage = async () => {
   editRow.value = false;
   next.value = true;
   previous.value = true;
@@ -420,9 +407,9 @@ const clickEdit = () => {
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
-const clickAdd = async () => {
+const clickAdd = () => {
   editRow.value = false;
-  await addData();
+  addData();
 };
 
 /**
@@ -430,9 +417,9 @@ const clickAdd = async () => {
  */
 const clickSave = async () => {
   if (modalEdit.value) {
-    await dialogConfirm($q, () => editData());
+    dialogConfirm($q, () => editData());
   } else {
-    await dialogConfirm($q, () => saveData());
+    dialogConfirm($q, () => saveData());
   }
 };
 
@@ -444,7 +431,6 @@ const saveData = async () => {
   await http
     .post(config.API.placementEducationId(route.params.personalId.toString()), {
       id: id.value,
-      //   educationLevel: filter[0].name,
       educationLevelId: levelId.value,
       positionPathId: positionPathId.value,
       institute: institute.value,
@@ -475,6 +461,8 @@ const saveData = async () => {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 };
@@ -487,7 +475,6 @@ const editData = async () => {
   await http
     .put(config.API.placementEducationId(route.params.personalId.toString()), {
       id: id.value,
-      //   educationLevel: filter[0].name,
       educationLevelId: levelId.value,
       positionPathId: positionPathId.value,
       institute: institute.value,
@@ -518,6 +505,8 @@ const editData = async () => {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 };
@@ -526,22 +515,23 @@ const editData = async () => {
  * ลบลบข้อมูล
  */
 const clickDelete = async () => {
-  dialogRemove($q, async () => await deletePlacementEducation());
-};
-const deletePlacementEducation = async () => {
-  showLoader();
-  await http
-    .delete(config.API.placementEducationId(id.value))
-    .then(async (res) => {
-      await props.fetch("Education");
-      await success($q, "ลบข้อมูลสำเร็จ");
-      modal.value = false;
-      rows.value = props.data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.placementEducationId(id.value))
+      .then(async () => {
+        await props.fetch("Education");
+        await success($q, "ลบข้อมูลสำเร็จ");
+        modal.value = false;
+        rows.value = props.data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 };
 
 /**
@@ -582,9 +572,6 @@ const selectData = async (_props: DataProps) => {
   rowIndex.value = _props.rowIndex;
   levelId.value = checkLevelEducation ? _props.row.educationLevelId : "";
 
-  //   positionPathId.value = resultPath;
-  //   levelId.value = _props.row.levelId;
-  //   positionPathId.value = _props.row.positionPathId;
   institute.value = _props.row.institute;
   degree.value = _props.row.degree;
   field.value = _props.row.field;
@@ -646,17 +633,6 @@ const clickCancel = async () => {
       `ข้อมูลมีการแก้ไข`,
       `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
     );
-    // $q.dialog({
-    //   title: `ข้อมูลมีการแก้ไข`,
-    //   message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
-    //   cancel: "ยกเลิก",
-    //   ok: "ยืนยัน",
-    //   persistent: true,
-    // }).onOk(async () => {
-    //   edit.value = false;
-    //   await checkRowPage();
-    //   await getData();
-    // });
   } else {
     edit.value = false;
     await checkRowPage();
@@ -692,6 +668,23 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+watch(startDate, (count, prevCount) => {
+  minDate.value = new Date(`${startDate.value}-01-01`);
+});
+
+watch(visibleColumns, (count: String[], prevCount: String[]) => {
+  changeProfileColumns("education", count);
+});
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(async () => {
+  await fetchLevel();
+  await fetchPositionPath();
+  rows.value = props.data;
+});
 </script>
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
@@ -783,7 +776,7 @@ const getClass = (val: boolean) => {
                 option-value="id"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
                       ) "
               />
@@ -1057,30 +1050,7 @@ const getClass = (val: boolean) => {
                 </template>
               </datepicker>
             </div>
-            <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="isEducation"
-                hide-bottom-space
-                :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.positionPathOptions"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
-                      ) "
-              />
-            </div> -->
+
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
diff --git a/src/modules/05_placement/components/PersonalDetail/ExamResult.vue b/src/modules/05_placement/components/PersonalDetail/Information/ExamResult.vue
similarity index 100%
rename from src/modules/05_placement/components/PersonalDetail/ExamResult.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/ExamResult.vue
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
index e5033fd0d..7a472a8ea 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
-import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
+
+import { FamilyDataDefualt } from "@/modules/05_placement/interface/index/Main";
+import type { QForm } from "quasar";
 import type { PropType } from "vue";
 import type { Family } from "@/modules/05_placement/interface/index/Main";
-import { FamilyDataDefualt } from "@/modules/05_placement/interface/index/Main";
+import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
+
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
 const props = defineProps({
   statusEdit: {
@@ -38,29 +46,25 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:statusEdit"]);
 
-const route = useRoute();
-const $q = useQuasar();
-
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-const edit = ref<boolean>(false);
-const onEdit = ref<boolean>(false);
-
 const myform = ref<QForm | null>(null);
-const familyData = ref<Family>(props.data);
+const edit = ref<boolean>(false); //การแก้ไขข้อมูล
+const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
+const familyData = ref<Family>(props.data); //ข้อมูลครอบครัว
 
+/**
+ * ฟังก์ชันแก้ไขข้อมูล
+ */
 function checkEdit() {
   onEdit.value = true;
 }
 
-function filterSelector(val: any, update: Function, refData: string) {
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
   update(() => {
     props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
       (v: DataOption) => v.name.indexOf(val) > -1
@@ -121,32 +125,30 @@ async function editData() {
       })
       .catch((e) => {
         messageError($q, e);
-        hideLoader();
       })
-      .finally(async () => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-async function saveData() {
-  await myform.value?.validate().then(async (success: boolean) => {
-    if (success) {
-      await editData();
-    } else {
-    }
-  });
-}
-
-function selectRadio(e: boolean, i: any) {
+/**
+ * ฟังก์ชันเลือกคู่สมรส
+ * @param e มี, ไม่มีคู่สมรส
+ */
+function selectRadio(e: boolean) {
   onEdit.value = true;
   if (e) {
     familyData.value.marryPrefixId = "";
     familyData.value.marryFirstName = "";
     familyData.value.marryLastName = "";
-    // familyData.value.lastnameCOld = "";
     familyData.value.marryOccupation = "";
   }
 }
 
+/**
+ * ฟังก์ชันการแก้ไขข้อมูล
+ */
 async function changeBtn() {
   if (edit.value == true) {
     if (props.statusEdit === true) {
@@ -159,6 +161,10 @@ async function changeBtn() {
   }
 }
 
+/**
+ * ฟังก์ชันสำหรับคืนค่าชื่อคลาสตามค่าที่กำหนด
+ * @param val ค่าที่ใช้กำหนดคลาส
+ */
 function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -166,6 +172,9 @@ function getClass(val: boolean) {
   };
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(async () => {
   emit("update:statusEdit", false);
 });
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index 17931a109..c85ec694e 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -1,25 +1,40 @@
 <!-- card ข้อมูลส่วนตัว -->
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import type { PropType } from "vue";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   Information,
   DataOption,
 } from "@/modules/05_placement/components/PersonalDetail/profileType";
+import type { QForm } from "quasar";
 import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
 
 import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/05_placement/store";
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  modalError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 
-import type { QForm } from "quasar";
-import type { PropType } from "vue";
-
-const onEdit = ref<boolean>(false);
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -46,30 +61,11 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:statusEdit"]);
 
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  messageError,
-  modalError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-
-const profileStore = useProfileDataStore();
-const { changeRetireText, changeBirth } = profileStore;
-const edit = ref<boolean>(false);
-const informaData = ref<Information>(props.data);
-const age = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
-
-onMounted(async () => {
-  emit("update:statusEdit", false);
-});
+const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
+const edit = ref<boolean>(false); //การแก้ไขข้อมูล
+const informaData = ref<Information>(props.data); //ข้อมูลส่วนตัว
+const age = ref<boolean>(true); //อายุ
 
 const onCancel = async () => {
   if (myform.value != null) {
@@ -92,7 +88,13 @@ const onCancel = async () => {
   }
 };
 
-const filterSelector = (val: any, update: Function, refData: string) => {
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+const filterSelector = (val: string, update: Function, refData: string) => {
   switch (refData) {
     case "prefixOps":
       update(() => {
@@ -149,12 +151,20 @@ const filterSelector = (val: any, update: Function, refData: string) => {
   }
 };
 
+/**
+ * ฟังก์เลือกวันเดือนปีเกิด
+ * @param modelData วันเดือนปีเกิด
+ */
 const handleDate = async (modelData: Date) => {
   informaData.value.dateOfBirth = modelData;
   await calRetire(modelData);
   onEdit.value = true;
 };
 
+/**
+ * ฟังก์ชันคำนวนวันเกษียณอายุราชการ
+ * @param birth  วันเดือนปีเกิด
+ */
 const calRetire = async (birth: Date) => {
   const body = {
     birthDate: dateToISO(birth),
@@ -179,13 +189,16 @@ const calRetire = async (birth: Date) => {
     });
 };
 
+/**
+ * บันทึกการแก้ไขข้อมูล
+ */
 const editData = async () => {
   dialogConfirm($q, async () => {
     if (age.value == false) {
       modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
       return;
     }
-
+    showLoader();
     const body: any = {
       citizenId: informaData.value.idCard,
       prefix: informaData.value.prefixId,
@@ -215,11 +228,16 @@ const editData = async () => {
       })
       .catch((e) => {
         messageError($q, e);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
 };
 
+/**
+ * ฟังก์ชันการแก้ไขข้อมูล
+ */
 const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
@@ -232,6 +250,17 @@ const changeBtn = async () => {
   }
 };
 
+/**
+ * ฟังก์ชันแก้ไขข้อมูล
+ */
+function checkEdit() {
+  onEdit.value = true;
+}
+
+/**
+ * ฟังก์ชันสำหรับคืนค่าชื่อคลาสตามค่าที่กำหนด
+ * @param val ค่าที่ใช้กำหนดคลาส
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -239,9 +268,12 @@ const getClass = (val: boolean) => {
   };
 };
 
-function checkEdit() {
-  onEdit.value = true;
-}
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(async () => {
+  emit("update:statusEdit", false);
+});
 </script>
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
@@ -300,7 +332,7 @@ function checkEdit() {
             :label="`${'คำนำหน้า'}`"
             use-input
             input-debounce="0"
-            @filter="(inputValue:any,
+            @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                       ) "
           />
@@ -417,7 +449,7 @@ function checkEdit() {
             :label="`${'เพศ'}`"
             use-input
             input-debounce="0"
-            @filter="(inputValue:any,
+            @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
                       ) "
           />
@@ -443,7 +475,7 @@ function checkEdit() {
             :label="`${'สถานภาพ'}`"
             use-input
             input-debounce="0"
-            @filter="(inputValue:any,
+            @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
                       ) "
           />
@@ -468,7 +500,7 @@ function checkEdit() {
             :label="`${'หมู่เลือด'}`"
             use-input
             input-debounce="0"
-            @filter="(inputValue:any,
+            @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
                       ) "
           />
@@ -524,7 +556,7 @@ function checkEdit() {
             :label="`${'ศาสนา'}`"
             use-input
             input-debounce="0"
-            @filter="(inputValue:any,
+            @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
                       ) "
           />
diff --git a/src/modules/05_placement/components/PersonalDetail/Qualification.vue b/src/modules/05_placement/components/PersonalDetail/Information/Qualification.vue
similarity index 85%
rename from src/modules/05_placement/components/PersonalDetail/Qualification.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/Qualification.vue
index 4692a8dce..3980a65a9 100644
--- a/src/modules/05_placement/components/PersonalDetail/Qualification.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Qualification.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+
 import { useRoute } from "vue-router";
-
-import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
-
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { PropType } from "vue";
 import type { Property } from "@/modules/05_placement/interface/index/Main";
 
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const route = useRoute();
@@ -33,13 +33,12 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:statusEdit", "update:data"]);
 
-const edit = ref<boolean>(false);
-const onEdit = ref<boolean>(false);
-
-onMounted(() => {
-  emit("update:statusEdit", false);
-});
+const edit = ref<boolean>(false); //การแก้ไขข้อมูล
+const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
 
+/**
+ * ฟังก์ชันบันทึกการแก้ไขข้อมูล
+ */
 const saveData = async () => {
   dialogConfirm($q, async () => {
     showLoader();
@@ -57,11 +56,16 @@ const saveData = async () => {
       })
       .catch((e: any) => {
         messageError($q, e);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
 };
 
+/**
+ * ฟังก์ชันการแก้ไขข้อมูล
+ */
 const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
@@ -91,9 +95,19 @@ const onCancel = async () => {
   }
 };
 
+/**
+ * ฟังก์ชันแก้ไขข้อมูล
+ */
 function checkEdit() {
   onEdit.value = true;
 }
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(() => {
+  emit("update:statusEdit", false);
+});
 </script>
 <template>
   <q-form ref="myform" greedy @submit.prevent @validation-success="saveData">
diff --git a/src/modules/05_placement/components/PersonalDetail/Table.vue b/src/modules/05_placement/components/PersonalDetail/Information/TableEducation.vue
similarity index 94%
rename from src/modules/05_placement/components/PersonalDetail/Table.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/TableEducation.vue
index 593fa1cda..09cf1ad0d 100644
--- a/src/modules/05_placement/components/PersonalDetail/Table.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/TableEducation.vue
@@ -49,12 +49,18 @@ const emit = defineEmits([
   "update:editvisible",
 ]);
 
-const updateEdit = (value: Boolean) => {
-  emit("update:editvisible", value);
-};
+/**
+ * ฟังก์ชันอัปเดทคำค้นหา
+ * @param value  คำค้นหา
+ */
 const updateInput = (value: string | number | null) => {
   emit("update:inputfilter", value);
 };
+
+/**
+ * ฟังก์ชันอัปเดท Visible
+ * @param value  Visible
+ */
 const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
@@ -63,20 +69,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
   return start + "-" + end + " ใน " + total;
 };
 
+/**
+ * ฟังก์ชันเพิ่มข้อมูล
+ */
 const checkAdd = () => {
   props.add();
 };
 
-const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
-
-const cancel = async () => {
-  updateEdit(!props.editvisible);
-  props.cancel();
-};
-
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   emit("update:inputfilter", "");
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/layout.vue b/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
deleted file mode 100644
index c26230556..000000000
--- a/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<!-- card รวม ข้อมูลส่วนตัว กับ ที่อยู่ -->
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import Information from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
-import Address from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  profileType: {
-    type: String,
-    required: true,
-  },
-});
-const emit = defineEmits(["update:statusEdit"]);
-
-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
-const statusEdit = ref<boolean>(false);
-const modalNoEdit = ref<boolean>(false);
-const modalNoEditTittle = ref<string>("ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?");
-const modalNoEditDetail = ref<string>("มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล");
-
-watch(statusEdit, (count: boolean, prevCount: boolean) => {
-  emit("update:statusEdit", count);
-});
-
-watch(props, (count: any, prevCount: any) => {
-  statusEdit.value = props.statusEdit;
-});
-
-onMounted(() => {
-  // hideLoader();
-});
-
-const notiNoEdit = () => {
-  modalNoEdit.value = true;
-};
-
-const closeModalError = () => {
-  modalNoEdit.value = false;
-};
-</script>
-<template>
-  <div class="row col-12 items-center">
-    <div>
-      <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
-    </div>
-
-    <div class="col-12 q-px-md"><q-separator size="4px" /></div>
-
-    <div>
-      <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.horizontal-line {
-  background-color: #f4f4f4;
-  height: 5px;
-}
-</style>
diff --git a/src/modules/05_placement/components/PersonalList/CardPosition.vue b/src/modules/05_placement/components/PersonalList/CardPosition.vue
index 786d3006b..5cf3d30d2 100644
--- a/src/modules/05_placement/components/PersonalList/CardPosition.vue
+++ b/src/modules/05_placement/components/PersonalList/CardPosition.vue
@@ -13,18 +13,17 @@ import { useCounterMixin } from "@/stores/mixin";
 const { date2Thai } = useCounterMixin();
 
 /** props*/
-const selected = defineModel("selectedPos", { required: true });
-const positionId = defineModel<string>("positionId", { required: true });
-const seletcId = defineModel<string>("seletcId", { required: true });
-const date = defineModel<Date>("datePos", { required: true });
-const positionData = defineModel<any[]>("position", { required: true });
-const isAll = defineModel<boolean>("isAll", { required: true });
-const isBlank = defineModel<boolean>("isBlank", { required: true });
+const selected = defineModel("selectedPos", { required: true }); //ตำแหน่งที่เลือก
+const positionId = defineModel<string>("positionId", { required: true }); //id ตำแหน่งที่เลือก
+const seletcId = defineModel<string>("seletcId", { required: true }); // ตำแหน่งที่เลือก
+const date = defineModel<Date>("datePos", { required: true }); //วันยที่รายงานคัว
+const positionData = defineModel<any[]>("position", { required: true }); //ข้อมูลรายการตำแหน่งเลขที่
+const isAll = defineModel<boolean>("isAll", { required: true }); //แสดงตำแหน่งทั้งหมด
+const isBlank = defineModel<boolean>("isBlank", { required: true }); //แสดงเฉพาะตำแหน่งว่าง
 
-const filters = ref<string>("");
-const rowsPosition = ref<Positions[]>([]);
-
-/** columns*/
+//Table
+const filters = ref<string>(""); //คำค้นหา
+const rowsPosition = ref<Positions[]>([]); //รายการตำแหน่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "isPosition",
@@ -90,7 +89,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const columnsPostition = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -165,7 +163,6 @@ const columnsPostition = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const visibleColumns = ref<string[]>([
   "isPosition",
   "no",
@@ -195,10 +192,12 @@ async function onClickSelectPos(id: string) {
         (e) => e.id === seletcId.value
       );
     }
-    console.log(selected.value);
   }
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
   if (positionId.value) {
     setTimeout(async () => {
diff --git a/src/modules/05_placement/components/PersonalList/DialogDetail.vue b/src/modules/05_placement/components/PersonalList/DialogDetail.vue
index a1fb38e57..56cc9b3c4 100644
--- a/src/modules/05_placement/components/PersonalList/DialogDetail.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogDetail.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
+import type { DataEducation } from "@/modules/05_placement/interface/index/Main";
+import type {
+  DataPerson,
+  Education,
+} from "@/modules/05_placement/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
-const rows = ref<any[]>([]);
-const myForm = ref<any>([]);
-const selection = ref<any>([]);
-const personalForm = ref<any>([]);
-
 /** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   Modal: Boolean,
@@ -34,6 +36,9 @@ const props = defineProps({
   },
 });
 
+const rows = ref<DataEducation[]>([]);
+const personalForm = ref<DataPerson>();
+
 /**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -78,16 +83,18 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** get ข้อมูลการศึกษา */
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียด
+ */
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.getDatapersonal(props.personalId))
     .then((res) => {
       personalForm.value = res.data.result;
-      personalForm.value.education.map((e: any) => {
+      personalForm.value?.education.map((e: Education) => {
         rows.value.push({
-          university: e.name,
+          university: e.institute,
           degree: e.degree,
           major: e.field,
           graduation: date2Thai(e.finishDate),
@@ -103,8 +110,8 @@ async function fetchData() {
 }
 
 /**
- * convert text
- * @param val type
+ * ฟังก์ชันแปลงประเภทข้าราชการ เป็นไทย
+ * @param val ประเภทข้าราชการ
  */
 function formBmaofficer(val: string) {
   switch (val) {
@@ -119,14 +126,17 @@ function formBmaofficer(val: string) {
   }
 }
 
-/** ปิด POPUP ข้อมูล */
+/**
+ * ปิด POPUP ข้อมูล
+ */
 async function close() {
   props.close();
-  selection.value = [];
   rows.value = [];
 }
 
-/** เมื่อ props.Modal จะเรียกข้อมูลการศึกษา */
+/**
+ * เมื่อ props.Modal เป็น true จะเรียกข้อมูลการศึกษา
+ */
 watch(props, () => {
   if (props.Modal === true) {
     fetchData();
@@ -136,9 +146,9 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.Modal" persistent>
     <q-card style="max-width: 100%; width: 80%">
-      <q-form ref="myForm">
+      <q-form>
         <DialogHeader
-          :tittle="`รายละเอียดของ ${personalForm.fullName}`"
+          :tittle="`รายละเอียดของ ${personalForm?.fullName}`"
           :close="close"
         />
 
@@ -150,7 +160,7 @@ watch(props, () => {
               <div class="row items-center q-pa-xs header-text">
                 ข้อมูลทั่วไป
                 <span
-                  v-if="personalForm.bmaOfficer != null"
+                  v-if="personalForm?.bmaOfficer != null"
                   class="check-officer"
                 >
                   <q-icon name="mdi-check" />
@@ -166,10 +176,10 @@ watch(props, () => {
 
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
-                    {{ personalForm.idCard }}
+                    {{ personalForm?.idCard }}
                   </div>
                   <div>
-                    {{ date2Thai(personalForm.dateOfBirth) }}
+                    {{ date2Thai(personalForm?.dateOfBirth) }}
                   </div>
                 </div>
 
@@ -179,10 +189,10 @@ watch(props, () => {
                 </div>
                 <div class="col-3 sub-text">
                   <div class="q-pb-md">
-                    {{ personalForm.fullName }}
+                    {{ personalForm?.fullName }}
                   </div>
                   <div>
-                    {{ personalForm.gender }}
+                    {{ personalForm?.gender }}
                   </div>
                 </div>
               </div>
@@ -195,7 +205,7 @@ watch(props, () => {
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">ที่อยู่</div>
                 <div class="col-9 sub-text">
-                  {{ personalForm.address }}
+                  {{ personalForm?.registAddress }}
                 </div>
               </div>
             </q-card>
@@ -233,10 +243,10 @@ watch(props, () => {
                     </div>
                     <div class="col-5 sub-text-exam">
                       <div class="q-pb-sm">
-                        {{ personalForm.pass }}
+                        {{ personalForm?.pass }}
                       </div>
-                      <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
-                      <div class="q-pb-sm">{{ personalForm.examRound }}</div>
+                      <div class="q-pb-sm">{{ personalForm?.examNumber }}</div>
+                      <div class="q-pb-sm">{{ personalForm?.examRound }}</div>
                     </div>
                   </div>
                 </div>
diff --git a/src/modules/05_placement/components/PersonalList/PersonalListPage.vue b/src/modules/05_placement/components/PersonalList/PersonalListPage.vue
index a3b3445e9..b4a7be0ad 100644
--- a/src/modules/05_placement/components/PersonalList/PersonalListPage.vue
+++ b/src/modules/05_placement/components/PersonalList/PersonalListPage.vue
@@ -1,32 +1,30 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { tokenParsed } from "@/plugins/auth";
+import { useQuasar } from "quasar";
 
+import { tokenParsed } from "@/plugins/auth";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 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";
-
 import CardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
 import AddTablePosition from "@/modules/05_placement/components/PersonalList/Table.vue";
 
-const DataStore = usePlacementDataStore();
-
-let roleAdmin = ref<boolean>(false);
-const $q = useQuasar;
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
+const mixin = useCounterMixin();
+const DataStore = usePlacementDataStore();
+const { messageError, showLoader, hideLoader } = mixin;
+
 const examId = route.params.examId;
 const year = ref<string>("");
 const round = ref<string>("");
 const title = ref<string>("");
 const examData = ref<any>();
-
+const roleAdmin = ref<boolean>(false);
 const stat = ref<any>({
   total: 0,
   unContain: 0,
@@ -35,7 +33,9 @@ const stat = ref<any>({
   disclaim: 0,
 });
 
-/** เรียกข้อมูล Stat */
+/**
+ * เรียกข้อมูล Stat
+ */
 async function getStat() {
   const examIdString = Array.isArray(examId) ? examId[0] : examId;
   await http
@@ -56,7 +56,9 @@ async function getStat() {
     });
 }
 
-/** get รายละเอียด ของการสอบ */
+/**
+ * get รายละเอียด ของการสอบ
+ */
 async function fetchPlacementData() {
   showLoader();
   await http
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 58d6066b6..24463e80d 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -16,13 +16,23 @@ import type { QTableProps } from "quasar";
 import type { DataList } from "@/modules/05_placement/interface/response/SelectOrg";
 
 import DialogSelectOrg from "@/modules/05_placement/components/PersonalList/DialogSelectOrg.vue";
-
 import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
 import DialogCard from "@/modules/05_placement/components/PersonalList/DialogDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 
-let roleAdmin = ref<boolean>(false);
+const route = useRoute();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const $q = useQuasar(); // show dialog
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dateText,
+  success,
+  dialogConfirm,
+  date2Thai,
+} = mixin;
 
 /** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
@@ -32,6 +42,7 @@ const props = defineProps({
   },
 });
 
+let roleAdmin = ref<boolean>(false);
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
@@ -49,8 +60,7 @@ const rows = ref<any[]>([]);
 const rowsFilter = ref<any>([]);
 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>([]);
@@ -69,25 +79,12 @@ const checkSelected = computed(() => {
     return true;
   }
 });
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
+
 const dataInfo = reactive({
   reason: "",
   reliefDoc: "",
 });
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dateText,
-  success,
-  dialogConfirm,
-  date2Thai,
-} = mixin;
 
-const route = useRoute();
 const examId = route.params.examId;
 const examIdString = Array.isArray(examId) ? examId[0] : examId;
 const personalId = ref<string>("");
@@ -251,6 +248,10 @@ function convertContainStatus(val: string, type: string = "") {
   }
 }
 
+/**
+ * แปลงสถานะ
+ * @param val type
+ */
 function convertTypeCommand(val: string) {
   switch (val) {
     case "APPOINTED":
@@ -281,7 +282,9 @@ function convertDraft(val: boolean) {
   }
 }
 
-/**เรียกข้อมูลรายชื่อผู้สอบผ่าน */
+/**
+ * เรียกข้อมูลรายชื่อผู้สอบผ่าน
+ */
 async function getTable() {
   showLoader();
   await http
@@ -389,7 +392,9 @@ async function getTable() {
     });
 }
 
-/**ยืนยันการผ่อนผัน */
+/**
+ * ยืนยันการผ่อนผัน
+ */
 async function saveDeferment() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -402,7 +407,9 @@ async function saveDeferment() {
     }
   });
 }
-/**post ผ่อนผัน */
+/**
+ * post ผ่อนผัน
+ */
 async function postDeferment() {
   showLoader();
   const formData = new FormData();
@@ -425,7 +432,9 @@ async function postDeferment() {
     });
 }
 
-/**ยืนยันการสละสิทธิ์ */
+/**
+ * ยืนยันการสละสิทธิ์
+ */
 async function saveDisclaim() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -439,7 +448,9 @@ async function saveDisclaim() {
   });
 }
 
-/**post การสละสิทธิ์ */
+/**
+ * post การสละสิทธิ์
+ */
 async function postDisclaimf() {
   showLoader();
   const dataPost = {
@@ -462,12 +473,16 @@ async function postDisclaimf() {
     });
 }
 
-/** เปิด dialog */
+/** เ
+ * ปิด dialog
+ */
 function clickEditRow() {
   editRow.value = true;
 }
 
-/** เปลี่ยน class true/false */
+/**
+ * เปลี่ยน class true/false
+ */
 function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer ": val,
@@ -553,26 +568,23 @@ function openAppointModal(
   data: DataList,
   typeCommandVal: "APPOINTED" | "APPOINT" | "SLIP" | "MOVE"
 ) {
-  // appointModal.value = true;
-  // personalId.value = pid;
-  // personal.value = dataRes.value.filter(
-  //   (e: any) => e.personalId == personalId.value
-  // );
-  // console.log(personal.value);
-
   dataRow.value = data;
   typeCommand.value = typeCommandVal;
   modalDialogSelectOrg.value = !modalDialogSelectOrg.value;
 }
 
-/** close dialog */
+/**
+ * close dialog
+ */
 async function clickCloseModalTree() {
   await getTable();
   appointModal.value = false;
   props.statCard();
 }
 
-/** validate */
+/**
+ * validate
+ */
 async function validateData() {
   checkValidate.value = true;
   await myForm.value.validate().then((result: boolean) => {
@@ -582,12 +594,16 @@ async function validateData() {
   });
 }
 
-/** ปิด dialog */
+/**
+ * ปิด dialog
+ */
 function clickCloseSendModal() {
   modaladdlist.value = false;
 }
 
-/** validate */
+/**
+ * validate
+ */
 async function clickClose() {
   userNote.value = "";
   if (editRow.value == true) {
@@ -610,7 +626,9 @@ async function clickClose() {
   }
 }
 
-/** ยืนยันส่งรายชื่อไปหน่วยงาน */
+/**
+ * ยืนยันส่งรายชื่อไปหน่วยงาน
+ */
 function savelist() {
   selected.value.map((e: any) => {
     personal_selected.value.push(e.personalId);
@@ -654,14 +672,6 @@ function paginationLabel(start: number, end: number, total: number) {
   else return start + "-" + end + " ใน " + total;
 }
 
-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");
-  }
-});
-
 function onRestorePos(id: string) {
   dialogConfirm(
     $q,
@@ -713,6 +723,14 @@ function onSubmitDate() {
   });
 }
 
+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 () => {
   const user = await tokenParsed();
   if (user) {
@@ -754,7 +772,7 @@ onMounted(async () => {
       :boss="true"
       :saveNoDraft="true"
       :role-admin="roleAdmin"
-      :displayAdd="displayAdd"
+      :display-add="displayAdd"
       row-key="fullname"
     >
       <template #columns="props">
@@ -1382,24 +1400,6 @@ onMounted(async () => {
                       </div>
                     </q-item-section>
                   </q-item>
-                  <!-- <div class="row col-12 text-no-wrap items-center">
-                    <img
-                      v-if="props.row.avatar == ''"
-                      src="@/assets/avatar_user.jpg"
-                      class="col-4 img-info"
-                    />
-                    <img
-                      v-else
-                      :src="props.row.avatar"
-                      class="col-4 img-info"
-                    />
-                    <div class="col-4">
-                      <div class="text-weight-medium">{{ props.row.name }}</div>
-                      <div class="text-weight-light">
-                        {{ props.row.idCard }}
-                      </div>
-                    </div>
-                  </div> -->
                 </template>
                 <template v-else-if="col.name === 'examNumber'">
                   <div class="text-weight-medium">
@@ -1482,17 +1482,6 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-          <!-- <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template> -->
         </d-table>
       </q-card-section>
       <q-separator />
@@ -1513,10 +1502,10 @@ onMounted(async () => {
   <!-- เลือกหน่วยงานที่บรรจุ -->
   <DialogSelectOrg
     v-model:modal="modalDialogSelectOrg"
-    :dataRow="dataRow"
-    :fetchTable="getTable"
-    :fetchStatCard="statCard"
-    :typeCommand="typeCommand"
+    :data-row="dataRow"
+    :fetch-table="getTable"
+    :fetch-stat-card="statCard"
+    :type-command="typeCommand"
   />
 
   <!-- dialog วันรายงานตัว-->
diff --git a/src/modules/05_placement/components/Receive/AddEmployee/Main.vue b/src/modules/05_placement/components/Receive/AddEmployee/Main.vue
deleted file mode 100644
index 29f9bfaa1..000000000
--- a/src/modules/05_placement/components/Receive/AddEmployee/Main.vue
+++ /dev/null
@@ -1,927 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
-import type { QForm } from "quasar";
-
-import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
-import type {
-  Information,
-  DataOption,
-  DataOptioninfo,
-} from "@/modules/04_registry/components/profileType";
-import type {
-  InformationOps,
-  FormAddPerson,
-  DataType,
-} from "@/modules/04_registry/interface/index/Main";
-import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
-
-const retireDate = ref<Date>();
-const router = useRouter();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  messageError,
-  dialogMessageNotify,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-} = mixin;
-
-const profileStore = useProfileDataStore();
-const { changeRetireText } = profileStore;
-
-const age = ref<string | null>("");
-
-const informaData = ref<FormAddPerson>({
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  citizenId: "",
-  birthDate: null,
-  age: null,
-  genderId: null,
-  bloodId: null,
-  nationality: null,
-  ethnicity: null,
-  statusId: null,
-  religionId: null,
-  tel: null,
-  employeeType: null,
-  employeeClass: null,
-  profileType: null,
-});
-
-const dateBefore = ref<Date>(new Date());
-// รายการข้อมูลทั้งหมด
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [],
-  employeeTypeOps: [],
-});
-// ข้อมูลเมื่อเลือกแล้ว
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [],
-  employeeTypeOps: [],
-});
-
-/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
-const fetchPerson = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileNewMetaMain)
-    .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: DataOptioninfo) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: DataOptioninfo) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      optionprefixs = data.prefixs.map((v: any) => ({
-        id: v.id,
-        name: v.name,
-      }));
-
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: DataOptioninfo) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: DataOptioninfo) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// รูป profile
-const inputImage = ref<any>(null);
-const image = ref<any>(null);
-const fileData = ref<any>(null);
-const uploadImage = async (e: any) => {
-  const input = e.target.files;
-  if (input.length > 0) {
-    const url = URL.createObjectURL(input[0]);
-    image.value = url;
-    fileData.value = input[0];
-  }
-};
-
-// คลิกแก้ไขรูป profile
-const addNewImage = async () => {
-  inputImage.value.click();
-};
-
-// ตรวจสอบเลขประจำตัวประชาชน
-const defaultCitizenData = ref<string>("");
-const changeCardID = async (value: string | number | null) => {
-  if (value != null && typeof value == "string") {
-    if (value.length == 13 && value != defaultCitizenData.value) {
-      await checkCitizen(value);
-    }
-  }
-};
-
-/**
- * function  เช็คเลขประจำตัวประชาชนช้ำ
- * @param id เลขประจำตัวประชาชน
- */
-const checkCitizen = async (id: string) => {
-  showLoader();
-  await http
-    .put(config.API.profileNewCitizenId(id), {
-      citizenId: id,
-    })
-    .then(() => {})
-    .catch((err) => {
-      if (err.response.data.status === 500) {
-        dialogMessageNotify($q, err.response.data.message);
-      } else {
-        messageError($q, err);
-      }
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// filter list ข้อมูลต่างๆ
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-// เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
-const calculateMaxDate = () => {
-  const today = new Date();
-  today.setFullYear(today.getFullYear() - 18);
-  return today;
-};
-
-// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
-const onSubmit = async () => {
-  const formData = new FormData();
-  if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
-  if (informaData.value.citizenId != undefined)
-    formData.append("citizenId", informaData.value.citizenId);
-  if (informaData.value.prefix != undefined)
-    formData.append("prefix", informaData.value.prefix);
-  if (informaData.value.firstName != undefined)
-    formData.append("firstName", informaData.value.firstName);
-  if (informaData.value.lastName != undefined)
-    formData.append("lastName", informaData.value.lastName);
-  if (informaData.value.genderId != undefined)
-    formData.append("gender", informaData.value.genderId);
-  if (informaData.value.nationality != undefined)
-    formData.append("nationality", informaData.value.nationality);
-  if (informaData.value.ethnicity != undefined)
-    formData.append("race", informaData.value.ethnicity);
-  if (informaData.value.religionId != undefined)
-    formData.append("religion", informaData.value.religionId);
-  if (informaData.value.birthDate != undefined)
-    formData.append(
-      "birthDate",
-      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
-    );
-  if (informaData.value.bloodId != undefined)
-    formData.append("bloodGroup", informaData.value.bloodId);
-  if (informaData.value.statusId != undefined)
-    formData.append("relationship", informaData.value.statusId);
-  if (informaData.value.tel != undefined)
-    formData.append("telephoneNumber", informaData.value.tel);
-  if (informaData.value.employeeType != undefined)
-    formData.append("employeeType", informaData.value.employeeType);
-  if (informaData.value.employeeClass != undefined)
-    formData.append("employeeClass", informaData.value.employeeClass);
-
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .post(config.API.receiveData(), formData)
-      .then(async (res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        await clickBack();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-      });
-  });
-};
-
-// ปุ่ม back
-const clickBack = () => {
-  router.push("/placement/receive");
-};
-
-function calculateAge(birthDate: Date | null) {
-  if (!birthDate) return null;
-  const birthDateTimeStamp = new Date(birthDate).getTime();
-  const now = new Date();
-  const diff = now.getTime() - birthDateTimeStamp;
-
-  const ageDate = new Date(diff);
-  const years = ageDate.getUTCFullYear() - 1970;
-  const months = ageDate.getUTCMonth();
-  const days = ageDate.getUTCDate() - 1;
-  const retire = new Date(birthDate);
-  retire.setFullYear(retire.getFullYear() + 60);
-  retireDate.value = retire;
-
-  if (years > 60) {
-    return "อายุเกิน 60 ปี";
-  }
-
-  return `${years} ปี ${months} เดือน ${days} วัน`;
-}
-
-watch(
-  () => informaData.value.birthDate,
-  (v) => {
-    if (v) {
-      age.value = calculateAge(v);
-    }
-  }
-);
-
-onMounted(async () => {
-  await fetchPerson();
-});
-</script>
-
-<template>
-  <!-- <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
-    <q-form ref="myform" class="col-12 q-pt-md">
-      <div class="row">
-        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              hide-bottom-space
-              outlined
-              v-model="informaData.citizenId"
-              dense
-              @update:model-value="changeCardID"
-              lazy-rules
-              :rules="[
-                (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-                (val: string) =>
-                  val.length >= 13 ||
-                  `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-              ]"
-              label="เลขประจำตัวประชาชน"
-              maxlength="13"
-              mask="#############"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <selector
-              hide-bottom-space
-              outlined
-              :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-              dense
-              lazy-rules
-              v-model="informaData.prefix"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.prefixOps"
-              option-value="id"
-              :label="`${'คำนำหน้าชื่อ'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.firstName"
-              :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.lastName"
-              :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-        </div>
-        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <datepicker
-              v-model="informaData.birthDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-              :max-date="calculateMaxDate()"
-              @update:model-value="handleDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  :model-value="
-                    informaData.birthDate == null
-                      ? null
-                      : date2Thai(informaData.birthDate)
-                  "
-                  :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                  :label="`${'วัน/เดือน/ปี เกิด'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              hide-bottom-space
-              dense
-              lazy-rules
-              readonly
-              borderless
-              style="padding: 0 12px"
-              :model-value="informaData.age"
-              :label="`${'อายุ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.genderId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.genderOps"
-              option-value="id"
-              :label="`${'เพศ'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
-                )"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.statusId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.statusOps"
-              option-value="id"
-              :label="`${'สถานภาพ'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
-                )"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.nationality"
-              :label="`${'สัญชาติ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.ethnicity"
-              :label="`${'เชื้อชาติ'}`"
-            />
-          </div>
-        </div>
-        <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.religionId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.religionOps"
-              option-value="id"
-              :label="`${'ศาสนา'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
-                )"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              v-model="informaData.bloodId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.bloodOps"
-              option-value="id"
-              :label="`${'หมู่เลือด'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
-                )"
-              clearable
-            />
-          </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              type="tel"
-              v-model="informaData.tel"
-              :label="`${'เบอร์โทร'}`"
-              mask="##########"
-            />
-          </div>
-        </div>
-      </div>
-    </q-form>
-    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-    <div class="row col-12">
-      <q-space />
-      <q-btn
-        unelevated
-        dense
-        class="q-px-md items-center"
-        color="light-blue-10"
-        label="บันทึก"
-        @click="saveData"
-      />
-    </div>
-  </q-card> -->
-
-  <!-- Header  -->
-  <q-page-sticky
-    position="top"
-    expand
-    class="bg-grey-2 text-white"
-    style="z-index: 99; padding: 0% 1% 0% 1%"
-  >
-    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
-      <q-btn
-        flat
-        round
-        class="bg-teal-1 full-height"
-        color="primary"
-        icon="mdi-chevron-left"
-        dense
-        @click="router.push(`/placement/receive`)"
-      >
-      </q-btn>
-      <q-avatar size="65px" rounded class="containerimage">
-        <img
-          v-if="image == null"
-          src="@/assets/avatar_user.jpg"
-          class="bg-grey-3"
-          style="object-fit: cover"
-        />
-        <img :src="image" class="bg-grey-3" style="object-fit: cover" />
-        <div
-          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-          @click="addNewImage()"
-        >
-          <q-icon name="mdi-camera" size="18px" color="blue">
-            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-          </q-icon>
-
-          <input
-            type="file"
-            style="display: none"
-            ref="inputImage"
-            accept="image/*"
-            @change="uploadImage"
-          />
-        </div>
-      </q-avatar>
-
-      <div class="row items-center text-dark q-ml-md">
-        <div class="column">
-          <div class="text-bold q-pb-xs text-name">
-            เพิ่มข้อมูลทะเบียนประวัติ
-          </div>
-          <div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
-        </div>
-      </div>
-      <q-space />
-    </div>
-  </q-page-sticky>
-  <!-- End Header  -->
-
-  <q-card flat bordered class="col-12">
-    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <HeaderTop
-        header="ข้อมูลส่วนตัว"
-        icon="mdi-account"
-        class="q-px-lg q-pt-md"
-      />
-      <q-card-section class="q-px-lg">
-        <div class="row q-col-gutter-sm">
-          <div class="col-3">
-            <q-input
-              bg-color="white"
-              outlined
-              v-model="informaData.citizenId"
-              label="เลขประจำตัวประชาชน"
-              class="inputgreen"
-              dense
-              lazy-rules
-              borderless
-              :rules="[
-                        (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
-                        (val: string) =>
-                          val.length >= 13 ||
-                          `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-                      ]"
-              maxlength="13"
-              hide-bottom-space
-              mask="#############"
-              @update:model-value="changeCardID"
-            />
-          </div>
-          <div class="col-3">
-            <q-select
-              bg-color="white"
-              v-model="informaData.prefix"
-              label="คำนำหน้าชื่อ"
-              outlined
-              dense
-              lazy-rules
-              class="inputgreen"
-              :options="Ops.prefixOps"
-              option-label="name"
-              option-value="name"
-              map-options
-              hide-bottom-space
-              :rules="[
-                (val) => {
-                  return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
-                },
-              ]"
-              emit-value
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              bg-color="white"
-              outlined
-              v-model="informaData.firstName"
-              label="ชื่อ"
-              dense
-              lazy-rules
-              class="inputgreen"
-              borderless
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              bg-color="white"
-              outlined
-              v-model="informaData.lastName"
-              label="นามสกุล"
-              class="inputgreen"
-              dense
-              lazy-rules
-              borderless
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
-              hide-bottom-space
-            />
-          </div>
-
-          <div class="col-2">
-            <datepicker
-              autoApply
-              borderless
-              week-start="0"
-              :max-date="calculateMaxDate()"
-              :enableTimePicker="false"
-              menu-class-name="modalfix"
-              v-model="informaData.birthDate"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  for="inputDatereceive"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  class="inputgreen"
-                  :model-value="
-                    informaData.birthDate != null
-                      ? date2Thai(informaData.birthDate)
-                      : null
-                  "
-                  label="วัน/เดือน/ปี เกิด"
-                  :rules="[
-                    (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
-                  ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" color="primary">
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-2">
-            <q-input
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              readonly
-              class="inputgreen"
-              v-model="age"
-              label="อายุ"
-            />
-          </div>
-          <div class="col-2">
-            <q-select
-              dense
-              outlined
-              use-input
-              clearable
-              lazy-rules
-              emit-value
-              map-options
-              hide-bottom-space
-              input-debounce="0"
-              option-label="name"
-              option-value="name"
-              v-model="informaData.genderId"
-              class="inputgreen"
-              :options="Ops.genderOps"
-              label="เพศ"
-              @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
-              )"
-            />
-          </div>
-          <div class="col-2">
-            <q-select
-              dense
-              outlined
-              use-input
-              clearable
-              lazy-rules
-              emit-value
-              map-options
-              hide-bottom-space
-              option-value="name"
-              option-label="name"
-              input-debounce="0"
-              class="inputgreen"
-              v-model="informaData.statusId"
-              :options="Ops.statusOps"
-              label="สถานภาพ"
-              @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
-              )"
-            />
-          </div>
-          <div class="col-2">
-            <q-input
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              class="inputgreen"
-              v-model="informaData.nationality"
-              label="สัญชาติ"
-            />
-          </div>
-          <div class="col-2">
-            <q-input
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              class="inputgreen"
-              v-model="informaData.ethnicity"
-              label="เชื้อชาติ"
-            />
-          </div>
-          <div class="col-2">
-            <q-select
-              dense
-              outlined
-              use-input
-              clearable
-              lazy-rules
-              emit-value
-              map-options
-              hide-bottom-space
-              option-value="name"
-              option-label="name"
-              input-debounce="0"
-              v-model="informaData.religionId"
-              class="inputgreen"
-              :options="Ops.religionOps"
-              label="ศาสนา"
-              @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
-              )"
-            />
-          </div>
-          <div class="col-2">
-            <q-select
-              dense
-              outlined
-              use-input
-              clearable
-              lazy-rules
-              emit-value
-              map-options
-              hide-bottom-space
-              option-value="name"
-              option-label="name"
-              input-debounce="0"
-              v-model="informaData.bloodId"
-              class="inputgreen"
-              :options="Ops.bloodOps"
-              label="หมู่เลือด"
-              @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
-              )"
-            />
-          </div>
-          <div class="col-2">
-            <q-input
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              mask="##########"
-              class="inputgreen"
-              v-model="informaData.tel"
-              label="เบอร์โทร"
-            />
-          </div>
-        </div>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" color="secondary" type="submit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
-    </q-form>
-  </q-card>
-</template>
diff --git a/src/modules/05_placement/components/Receive/DialogFooter.vue b/src/modules/05_placement/components/Receive/DialogFooter.vue
deleted file mode 100644
index 057d1fa37..000000000
--- a/src/modules/05_placement/components/Receive/DialogFooter.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  editvisible: Boolean,
-  modalEdit: Boolean,
-  cancel: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  edit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  save: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const emit = defineEmits([
-  "update:editvisible",
-  "update:next",
-  "update:previous",
-]);
-
-const updateEdit = (value: Boolean) => {
-  emit("update:editvisible", value);
-};
-// const cancel = async () => {
-//   props.cancel();
-// };
-const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
-const checkSave = () => {
-  props.validate();
-  props.save();
-};
-</script>
-<template>
-  <q-card-actions class="text-primary">
-    <q-space />
-    <q-btn
-      v-if="!editvisible"
-      outline
-      :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
-        label="บันทึก"
-        :disabled="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'public'"
-        @click="checkSave"
-      >
-      </q-btn
-      ><!-- icon="mdi-content-save-outline">
-        <q-tooltip>บันทึก</q-tooltip> -->
-    </div>
-  </q-card-actions>
-</template>
diff --git a/src/modules/05_placement/components/Receive/DialogHeader.vue b/src/modules/05_placement/components/Receive/DialogHeader.vue
deleted file mode 100644
index 9f858c453..000000000
--- a/src/modules/05_placement/components/Receive/DialogHeader.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  close: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const close = async () => {
-  props.close();
-};
-</script>
-<template>
-  <q-toolbar class="q-py-sm">
-    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
-    <q-btn
-      icon="close"
-      unelevated
-      round
-      dense
-      @click="close"
-      style="color: #ff8080; background-color: #ffdede"
-    />
-  </q-toolbar>
-</template>
-
-<style scoped lang="scss">
-.header-text {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 26px;
-  color: #35373c;
-}
-</style>
diff --git a/src/modules/05_placement/components/Receive/Dialogbody.vue b/src/modules/05_placement/components/Receive/DialogOrders.vue
similarity index 87%
rename from src/modules/05_placement/components/Receive/Dialogbody.vue
rename to src/modules/05_placement/components/Receive/DialogOrders.vue
index daea426fc..93e3a7126 100644
--- a/src/modules/05_placement/components/Receive/Dialogbody.vue
+++ b/src/modules/05_placement/components/Receive/DialogOrders.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, watchEffect } from "vue";
 import { useQuasar } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import type { ResponseRow } from "@/modules/05_placement/interface/response/Receive";
-import DialogHeader from "@/components/DialogHeader.vue";
-// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { ResponseRow } from "@/modules/05_placement/interface/response/Receive";
+
 import { useTransferDataStore } from "@/modules/05_placement/store";
 
+import DialogHeader from "@/components/DialogHeader.vue";
 const transferStore = useTransferDataStore();
 const { statusText } = transferStore;
 const $q = useQuasar();
@@ -24,17 +26,20 @@ const {
   date2Thai,
 } = mixin;
 
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "citizenId",
-  "fullname",
-  "organizationName",
-  "dateOfBirth",
-  "createdAt",
-  "status",
-]);
-//หัวตาราง
+/**
+ * props
+ */
+const props = defineProps({
+  modal: Boolean,
+  clickClose: Function,
+  fecthlistRecevice: Function,
+  nextPage: Function,
+  rows2: Array,
+  filterKeyword2: String,
+});
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+
+//Table
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -113,69 +118,74 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "dateOfBirth",
+  "createdAt",
+  "status",
+]);
 
-const props = defineProps({
-  Modal: Boolean,
-  clickClose: Function,
-  fecthlistRecevice: Function,
-  nextPage: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-//popup ยืนยันส่งัว
-const saveOrder = () => {
+/**
+ * ฟังก์ชันยืนยันการส่งออกคำสั่ง
+ */
+function saveOrder() {
   dialogConfirm(
     $q,
-    () => Ordersave(),
+    async () => {
+      const id = selected.value.map((r: ResponseRow) => r.id);
+      const body = {
+        id,
+      };
+      showLoader();
+      await http
+        .post(config.API.receiveReport, body)
+        .then(async () => {
+          await props.fecthlistRecevice?.();
+          success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
+          props.clickClose?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          hideLoader();
+        });
+    },
     "ยืนยันส่งไปออกคำสั่ง",
     "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
   );
-};
-//ส่งไปออกคำสั่ง
-const Ordersave = async () => {
-  const id = selected.value.map((r: ResponseRow) => r.id);
-  const body = {
-    id,
-  };
-  showLoader();
-  await http
-    .post(config.API.receiveReport, body)
-    .then((res: any) => {
-      success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
-      props.clickClose?.();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      props.fecthlistRecevice?.();
-      hideLoader();
-    });
-};
+}
 
-const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-const updateInput = (value: any) => {
+/**
+ * ฟังก์ชันอัปเดทค่าในช่องค้นหา
+ */
+function updateInput(value: any) {
   emit("update:filterKeyword2", value);
-};
-//รีเซ็ตค่าในช่องค้นหา
-const Reset = () => {
+}
+
+/**
+ * ฟังก์ชันรีเซ็ตค่าในช่องค้นหา
+ */
+function onReset() {
   emit("update:filterKeyword2", "");
-};
+}
+
+/**
+ * เมื่อ props.modal เป็น true
+ *
+ * กำหนดให้  selected เป็นค่าว่าง
+ */
 watchEffect(() => {
-  if (props.Modal === true) {
+  if (props.modal === true) {
     selected.value = [];
   }
 });
 </script>
 <template>
-  <q-dialog v-model="props.Modal">
+  <q-dialog v-model="props.modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="'ส่งไปออกคำสั่งรับโอน'" :close="clickClose" />
       <q-separator />
@@ -199,7 +209,7 @@ watchEffect(() => {
                     v-if="filterKeyword2 !== ''"
                     name="clear"
                     class="cursor-pointer"
-                    @click="Reset"
+                    @click="onReset"
                   />
                 </template>
               </q-input>
@@ -317,7 +327,7 @@ watchEffect(() => {
         <q-btn
           label="ส่งไปออกคำสั่ง"
           @click="saveOrder"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
           ><q-tooltip>ส่งไปออกคำสั่ง</q-tooltip></q-btn
         >
diff --git a/src/modules/05_placement/components/Receive/FormAdd.vue b/src/modules/05_placement/components/Receive/FormAdd.vue
deleted file mode 100644
index 04015992f..000000000
--- a/src/modules/05_placement/components/Receive/FormAdd.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import Information from "@/modules/05_placement/components/Receive/AddEmployee/Main.vue";
-</script>
-
-<template>
-  <div class="col-12 row">
-    <div class="row col-12" style="padding-top: 80px">
-      <div id="information" name="1" class="row col-12 information q-mt-sm">
-        <Information :statusAdd="true" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.image-size-default {
-  height: 150px;
-  max-width: 15vw;
-}
-
-.image-size-full {
-  height: 160px;
-  max-width: 15vw;
-}
-
-.border-green {
-  border: 5px solid #52c688;
-}
-
-.area-div {
-  background-color: transparent;
-}
-
-.text-header {
-  font-size: 1.2em;
-}
-
-.containerimage {
-  position: relative;
-}
-
-.containerimage:hover .overlay {
-  opacity: 1;
-}
-
-.overlay {
-  background-color: #e4f2ffd2 !important;
-  opacity: 0;
-  padding: 2px !important;
-}
-
-.information:target {
-  padding-top: 84px;
-}
-
-.border-custom {
-  border: 0.5px solid #c3c3c3;
-}
-
-.bg-active-image {
-  background-color: #52c688;
-}
-
-.text-name {
-  font-size: 1.3em;
-  overflow: hidden;
-}
-
-.text-sub {
-  font-size: 1.2em;
-  overflow: hidden;
-  color: var(--q-primary);
-}
-</style>
diff --git a/src/modules/05_placement/components/Receive/ReceiveAddPerson.vue b/src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
new file mode 100644
index 000000000..7098203e6
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
@@ -0,0 +1,771 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QForm } from "quasar";
+import type {
+  DataOption,
+  DataOptioninfo,
+} from "@/modules/04_registry/components/profileType";
+import type {
+  InformationOps,
+  FormAddPerson,
+} from "@/modules/04_registry/interface/index/Main";
+
+import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
+
+const retireDate = ref<Date>();
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+
+const profileStore = useProfileDataStore();
+
+const age = ref<string | null>("");
+const defaultCitizenData = ref<string>("");
+const informaData = ref<FormAddPerson>({
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  citizenId: "",
+  birthDate: null,
+  age: null,
+  genderId: null,
+  bloodId: null,
+  nationality: null,
+  ethnicity: null,
+  statusId: null,
+  religionId: null,
+  tel: null,
+  employeeType: null,
+  employeeClass: null,
+  profileType: null,
+});
+
+// รายการข้อมูลทั้งหมด
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [],
+  employeeTypeOps: [],
+});
+// ข้อมูลเมื่อเลือกแล้ว
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [],
+  employeeTypeOps: [],
+});
+
+// รูป profile
+const inputImage = ref<any>(null);
+const image = ref<any>(null);
+const fileData = ref<any>(null);
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)
+ */
+async function fetchPerson() {
+  showLoader();
+  await http
+    .get(config.API.profileNewMetaMain)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: DataOptioninfo) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: DataOptioninfo) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      optionprefixs = data.prefixs.map((v: any) => ({
+        id: v.id,
+        name: v.name,
+      }));
+
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: DataOptioninfo) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: DataOptioninfo) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function uploadImage(e: any) {
+  const input = e.target.files;
+  if (input.length > 0) {
+    const url = URL.createObjectURL(input[0]);
+    image.value = url;
+    fileData.value = input[0];
+  }
+}
+
+/**
+ * ฟังก์ชันคลิกแก้ไขรูป profile
+ */
+function addNewImage() {
+  inputImage.value.click();
+}
+
+/**
+ * ฟังก์ชันตรวจสอบเลขบัตรประจำตัวประชาชน
+ * @param value เลขบัตรประจำตัวประชาชน
+ */
+async function changeCardID(value: string | number | null) {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+    }
+  }
+}
+
+/**
+ * ฟังก์ชันยิง API ตรวจสอบเลขบัตรประจำตัวประชาชนซ้ำ
+ * @param value เลขบัตรประจำตัวประชาชน
+ */
+async function checkCitizen(id: string) {
+  showLoader();
+  await http
+    .put(config.API.profileNewCitizenId(id), {
+      citizenId: id,
+    })
+    .then(() => {})
+    .catch((err) => {
+      if (err.response.data.status === 500) {
+        dialogMessageNotify($q, err.response.data.message);
+      } else {
+        messageError($q, err);
+      }
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+/**
+ * ฟังก์ชันเช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
+ */
+function calculateMaxDate() {
+  const today = new Date();
+  today.setFullYear(today.getFullYear() - 18);
+  return today;
+}
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกข้อมูล
+ */
+function onSubmit() {
+  const formData = new FormData();
+  if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
+  if (informaData.value.citizenId != undefined)
+    formData.append("citizenId", informaData.value.citizenId);
+  if (informaData.value.prefix != undefined)
+    formData.append("prefix", informaData.value.prefix);
+  if (informaData.value.firstName != undefined)
+    formData.append("firstName", informaData.value.firstName);
+  if (informaData.value.lastName != undefined)
+    formData.append("lastName", informaData.value.lastName);
+  if (informaData.value.genderId != undefined)
+    formData.append("gender", informaData.value.genderId);
+  if (informaData.value.nationality != undefined)
+    formData.append("nationality", informaData.value.nationality);
+  if (informaData.value.ethnicity != undefined)
+    formData.append("race", informaData.value.ethnicity);
+  if (informaData.value.religionId != undefined)
+    formData.append("religion", informaData.value.religionId);
+  if (informaData.value.birthDate != undefined)
+    formData.append(
+      "birthDate",
+      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
+    );
+  if (informaData.value.bloodId != undefined)
+    formData.append("bloodGroup", informaData.value.bloodId);
+  if (informaData.value.statusId != undefined)
+    formData.append("relationship", informaData.value.statusId);
+  if (informaData.value.tel != undefined)
+    formData.append("telephoneNumber", informaData.value.tel);
+  if (informaData.value.employeeType != undefined)
+    formData.append("employeeType", informaData.value.employeeType);
+  if (informaData.value.employeeClass != undefined)
+    formData.append("employeeClass", informaData.value.employeeClass);
+
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.receiveData(), formData)
+      .then(async () => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ฟังก์ชันกลับไปหน้ารายการรายการรับโอน
+ */
+function clickBack() {
+  router.push("/placement/receive");
+}
+
+/**
+ * ฟังก์ชันคำนวนอายุ
+ * @param birthDate  วันเดือยปีเกิด
+ * @returns  อายุ แบบ ปี เดือน วัน
+ */
+function calculateAge(birthDate: Date | null) {
+  if (!birthDate) return null;
+  const birthDateTimeStamp = new Date(birthDate).getTime();
+  const now = new Date();
+  const diff = now.getTime() - birthDateTimeStamp;
+
+  const ageDate = new Date(diff);
+  const years = ageDate.getUTCFullYear() - 1970;
+  const months = ageDate.getUTCMonth();
+  const days = ageDate.getUTCDate() - 1;
+  const retire = new Date(birthDate);
+  retire.setFullYear(retire.getFullYear() + 60);
+  retireDate.value = retire;
+
+  if (years > 60) {
+    return "อายุเกิน 60 ปี";
+  }
+
+  return `${years} ปี ${months} เดือน ${days} วัน`;
+}
+
+/**
+ * ฟังก์ชันอัปเดทวันเดือนปีเกิด
+ * @param v  วันเดือยปีเกิด
+ */
+function updateBirthDate(v: Date) {
+  age.value = calculateAge(v);
+}
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(async () => {
+  await fetchPerson();
+});
+</script>
+
+<template>
+  <div class="col-12 row">
+    <div class="row col-12" style="padding-top: 80px">
+      <div id="information" name="1" class="row col-12 information q-mt-sm">
+        <!-- Header  -->
+        <q-page-sticky
+          position="top"
+          expand
+          class="bg-grey-2 text-white"
+          style="z-index: 99; padding: 0% 1% 0% 1%"
+        >
+          <div
+            class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
+          >
+            <q-btn
+              flat
+              round
+              class="bg-teal-1 full-height"
+              color="primary"
+              icon="mdi-chevron-left"
+              dense
+              @click="router.push(`/placement/receive`)"
+            >
+            </q-btn>
+            <q-avatar size="65px" rounded class="containerimage">
+              <img
+                v-if="image == null"
+                src="@/assets/avatar_user.jpg"
+                class="bg-grey-3"
+                style="object-fit: cover"
+              />
+              <img :src="image" class="bg-grey-3" style="object-fit: cover" />
+              <div
+                class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+                @click="addNewImage()"
+              >
+                <q-icon name="mdi-camera" size="18px" color="blue">
+                  <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+                </q-icon>
+
+                <input
+                  type="file"
+                  style="display: none"
+                  ref="inputImage"
+                  accept="image/*"
+                  @change="uploadImage"
+                />
+              </div>
+            </q-avatar>
+
+            <div class="row items-center text-dark q-ml-md">
+              <div class="column">
+                <div class="text-bold q-pb-xs text-name">
+                  เพิ่มข้อมูลทะเบียนประวัติ
+                </div>
+                <div class="text-bold q-pb-xs text-sub">
+                  ข้าราชการกทม. สามัญ
+                </div>
+              </div>
+            </div>
+            <q-space />
+          </div>
+        </q-page-sticky>
+
+        <q-card flat bordered class="col-12">
+          <q-form greedy @submit.prevent @validation-success="onSubmit">
+            <HeaderTop
+              header="ข้อมูลส่วนตัว"
+              icon="mdi-account"
+              class="q-px-lg q-pt-md"
+            />
+            <q-card-section class="q-px-lg">
+              <div class="row q-col-gutter-sm">
+                <div class="col-3">
+                  <q-input
+                    bg-color="white"
+                    outlined
+                    v-model="informaData.citizenId"
+                    label="เลขประจำตัวประชาชน"
+                    class="inputgreen"
+                    dense
+                    lazy-rules
+                    borderless
+                    :rules="[
+                      (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
+                      (val: string) =>
+                        val.length >= 13 ||
+                        `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                    ]"
+                    maxlength="13"
+                    hide-bottom-space
+                    mask="#############"
+                    @update:model-value="changeCardID"
+                  />
+                </div>
+                <div class="col-3">
+                  <q-select
+                    bg-color="white"
+                    v-model="informaData.prefix"
+                    label="คำนำหน้าชื่อ"
+                    outlined
+                    dense
+                    lazy-rules
+                    class="inputgreen"
+                    :options="Ops.prefixOps"
+                    option-label="name"
+                    option-value="name"
+                    map-options
+                    hide-bottom-space
+                    :rules="[
+                      (val) => {
+                        return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
+                      },
+                    ]"
+                    emit-value
+                  />
+                </div>
+                <div class="col-3">
+                  <q-input
+                    bg-color="white"
+                    outlined
+                    v-model="informaData.firstName"
+                    label="ชื่อ"
+                    dense
+                    lazy-rules
+                    class="inputgreen"
+                    borderless
+                    :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-3">
+                  <q-input
+                    bg-color="white"
+                    outlined
+                    v-model="informaData.lastName"
+                    label="นามสกุล"
+                    class="inputgreen"
+                    dense
+                    lazy-rules
+                    borderless
+                    :rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
+                    hide-bottom-space
+                  />
+                </div>
+
+                <div class="col-2">
+                  <datepicker
+                    autoApply
+                    borderless
+                    week-start="0"
+                    :max-date="calculateMaxDate()"
+                    :enableTimePicker="false"
+                    menu-class-name="modalfix"
+                    v-model="informaData.birthDate"
+                    :locale="'th'"
+                    @update:model-value="updateBirthDate"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        for="inputDatereceive"
+                        outlined
+                        dense
+                        hide-bottom-space
+                        class="inputgreen"
+                        :model-value="
+                          informaData.birthDate != null
+                            ? date2Thai(informaData.birthDate)
+                            : null
+                        "
+                        label="วัน/เดือน/ปี เกิด"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            color="primary"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-2">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    readonly
+                    class="inputgreen"
+                    v-model="age"
+                    label="อายุ"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-select
+                    dense
+                    outlined
+                    use-input
+                    clearable
+                    lazy-rules
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    input-debounce="0"
+                    option-label="name"
+                    option-value="name"
+                    v-model="informaData.genderId"
+                    class="inputgreen"
+                    :options="Ops.genderOps"
+                    label="เพศ"
+                    @filter="(inputValue:string,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+            )"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-select
+                    dense
+                    outlined
+                    use-input
+                    clearable
+                    lazy-rules
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    option-value="name"
+                    option-label="name"
+                    input-debounce="0"
+                    class="inputgreen"
+                    v-model="informaData.statusId"
+                    :options="Ops.statusOps"
+                    label="สถานภาพ"
+                    @filter="(inputValue:string,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+            )"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    v-model="informaData.nationality"
+                    label="สัญชาติ"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    v-model="informaData.ethnicity"
+                    label="เชื้อชาติ"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-select
+                    dense
+                    outlined
+                    use-input
+                    clearable
+                    lazy-rules
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    option-value="name"
+                    option-label="name"
+                    input-debounce="0"
+                    v-model="informaData.religionId"
+                    class="inputgreen"
+                    :options="Ops.religionOps"
+                    label="ศาสนา"
+                    @filter="(inputValue:string,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+            )"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-select
+                    dense
+                    outlined
+                    use-input
+                    clearable
+                    lazy-rules
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    option-value="name"
+                    option-label="name"
+                    input-debounce="0"
+                    v-model="informaData.bloodId"
+                    class="inputgreen"
+                    :options="Ops.bloodOps"
+                    label="หมู่เลือด"
+                    @filter="(inputValue:string,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+            )"
+                  />
+                </div>
+                <div class="col-2">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    mask="##########"
+                    class="inputgreen"
+                    v-model="informaData.tel"
+                    label="เบอร์โทร"
+                  />
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-separator />
+
+            <q-card-actions align="right" class="bg-white text-teal">
+              <q-btn label="บันทึก" color="secondary" type="submit"
+                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+              >
+            </q-card-actions>
+          </q-form>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.image-size-default {
+  height: 150px;
+  max-width: 15vw;
+}
+
+.image-size-full {
+  height: 160px;
+  max-width: 15vw;
+}
+
+.border-green {
+  border: 5px solid #52c688;
+}
+
+.area-div {
+  background-color: transparent;
+}
+
+.text-header {
+  font-size: 1.2em;
+}
+
+.containerimage {
+  position: relative;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+
+.overlay {
+  background-color: #e4f2ffd2 !important;
+  opacity: 0;
+  padding: 2px !important;
+}
+
+.information:target {
+  padding-top: 84px;
+}
+
+.border-custom {
+  border: 0.5px solid #c3c3c3;
+}
+
+.bg-active-image {
+  background-color: #52c688;
+}
+
+.text-name {
+  font-size: 1.3em;
+  overflow: hidden;
+}
+
+.text-sub {
+  font-size: 1.2em;
+  overflow: hidden;
+  color: var(--q-primary);
+}
+</style>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index 7d299c721..dafa04d92 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -1,109 +1,1060 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
 
-import Image from "@/components/information/Image.vue";
-import Information from "@/components/information/Information.vue";
-import Government from "@/components/information/Government.vue";
-import Address from "@/components/information/Address.vue";
-import Family from "@/components/information/Family.vue";
-import Certicate from "@/components/information/Certicate.vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-import EducationVue from "@/components/information/Education.vue";
-import TrainVue from "@/components/information/Train.vue";
-import InsigniaVue from "@/components/information/Insignia.vue";
-import CoinedVue from "@/components/information/Coin.vue";
-import AssessmentVue from "@/components/information/Assessment.vue";
-import SalaryVue from "@/components/information/Salary.vue";
-import DisciplineVue from "@/components/information/Discipline.vue";
-import LeaveVue from "@/components/information/Leave.vue";
-import TalentVue from "@/components/information/Talent.vue";
-import WorkVue from "@/components/information/Work.vue";
-import RecordVue from "@/components/information/Record.vue";
-import OtherVue from "@/components/information/Other.vue";
-import DocumentVue from "@/components/information/Document.vue";
+import type { QTableProps, QForm } from "quasar";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import type {
+  ResponseTitle,
+  DataProfile,
+} from "@/modules/05_placement/interface/response/Receive";
+import type {
+  Information,
+  DataOption,
+  DataOptioninfo,
+  docList,
+} from "@/modules/04_registry/components/profileType";
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
 
-const statusEdit = ref<boolean>(false);
+import CardProfile from "@/components/CardProfile.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const paramsId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dateToISO,
+  dialogConfirm,
+} = mixin;
+
+const dataProfile = ref<DataProfile>(); //ข้อมุลส่วนตัว
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+const status = ref<string>("");
+
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false); //การแก้ไข
+const informaData = ref<Information>(defaultInformation); //ข้อมูลส่วนตัว
+const rows = ref<docList[]>([]); //เอกสารเพิ่มเติม
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const profileId = ref<string>("");
+const educationOld = ref<string>(""); //วุฒิ/สาขา
+const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัด
+const positionTypeOld = ref<string>(""); //ประเภทตำแหน่ง
+const positionLevelOld = ref<string>(""); //ระดับตำแหน่ง
+const posNo = ref<string>(""); //เลขที่
+const salary = ref<number>(0); //เงินเดือน
+const reason = ref<string>(""); //หมายเหตุ
+const defaultCitizenData = ref<string>(""); //เลขประจำตัวประชาชน
+
+//รายการตัวเลือก
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)
+ */
+async function fetchPerson() {
+  showLoader();
+  await http
+    .get(config.API.profileNewMetaMain)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: DataOptioninfo) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: DataOptioninfo) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      optionprefixs = data.prefixs.map((v: any) => ({
+        id: v.id,
+        name: v.name,
+      }));
+
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: DataOptioninfo) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: DataOptioninfo) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดการรับโอน
+ */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.receiveDataId(paramsId.toString()))
+    .then(async (res: any) => {
+      const data = res.data.result;
+      dataProfile.value = res.data.result as unknown as DataProfile;
+      let list: docList[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: docList) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+      }
+      rows.value = list;
+      profileId.value = data.profileId;
+      title.value.fullname = `${data.prefix ?? ""}${data.firstName ?? ""} ${
+        data.lastName ?? ""
+      }`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+      defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
+      informaData.value = {
+        cardid: data.citizenId ?? "",
+        age: calculateAge(data.dateOfBirth),
+        prefix: "",
+        prefixId:
+          (data.prefix == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.prefix) ?? "",
+        firstname: data.firstName ?? "",
+        lastname: data.lastName ?? "",
+        birthDate:
+          data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
+        genderId:
+          (data.gender == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.gender) ?? "",
+        bloodId:
+          (data.bloodGroup == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.bloodGroup) ?? "",
+        nationality: data.nationality ?? "",
+        ethnicity: data.race ?? "",
+        statusId:
+          (data.relationship == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.relationship) ?? "",
+        religionId:
+          (data.religion == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.religion) ?? "",
+        tel: data.telephoneNumber ?? "",
+        employeeType: "",
+        employeeClass: "",
+        profileType: "",
+      };
+      educationOld.value = data.educationOld ?? "";
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.amountOld ?? 0;
+      reason.value = data.reason ?? "";
+      status.value = data.status ?? "";
+
+      calculateAge(data.dateOfBirth);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันยกเลิกการแก้ไขข้อมูล
+ */
+async function oncanceledit() {
+  edit.value = !edit.value;
+  if (myForm.value !== null) {
+    await getData();
+    myForm.value?.resetValidation();
+  } else {
+  }
+}
+
+/**
+ * ฟังก์ชันตรวจสอบเลขบัตรประจำตัวประชาชน
+ * @param value เลขบัตรประจำตัวประชาชน
+ */
+async function changeCardID(value: string | number | null) {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+    }
+  }
+}
+
+/**
+ * ฟังก์ชันยิง API ตรวจสอบเลขบัตรประจำตัวประชาชนซ้ำ
+ * @param value เลขบัตรประจำตัวประชาชน
+ */
+async function checkCitizen(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+/**
+ * ฟังก์ชันบันทึกข้อมูลการแก้ไขบัญชีแนบท้าย
+ */
+function saveData() {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        citizenId: informaData.value.cardid,
+        prefix: informaData.value.prefixId,
+        firstname: informaData.value.firstname,
+        lastname: informaData.value.lastname,
+        dateOfBirth:
+          informaData.value.birthDate !== null
+            ? dateToISO(informaData.value.birthDate)
+            : null,
+        gender: informaData.value.genderId,
+        nationality: informaData.value.nationality,
+        race: informaData.value.ethnicity,
+        religion: informaData.value.religionId,
+        bloodGroup: informaData.value.bloodId,
+        relationship: informaData.value.statusId,
+        telephoneNumber: informaData.value.tel,
+        reason: reason.value,
+        educationOld: educationOld.value,
+        organizationPositionOld: organizationPositionOld.value,
+        positionTypeOld: positionTypeOld.value,
+        positionLevelOld: positionLevelOld.value,
+        positionNumberOld: posNo.value,
+        amount: 0,
+        amountOld: salary.value,
+      };
+      showLoader();
+      http
+        .put(config.API.receiveDataId(route.params.id.toString()), body)
+        .then(async () => {
+          await getData();
+          await success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          hideLoader();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+}
+
+/**
+ * ฟังก์ชันสำหรับคืนค่าชื่อคลาสตามค่าที่กำหนด
+ * @param val ค่าที่ใช้กำหนดคลาส
+ */
+function getClass(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+/**
+ * function เช็คอายุไม่เกิน 18 ปี
+ */
+function calculateMaxDate() {
+  const today = new Date();
+  today.setFullYear(today.getFullYear() - 18);
+  return today;
+}
+
+/**
+ * ฟังก์ชันคำนวนอายุ
+ * @param birthDate  วันเดือยปีเกิด
+ * @returns  อายุ แบบ ปี เดือน วัน
+ */
+function calculateAge(birthDate: Date | null) {
+  if (!birthDate) return null;
+  const birthDateTimeStamp = new Date(birthDate).getTime();
+  const now = new Date();
+  const diff = now.getTime() - birthDateTimeStamp;
+
+  const ageDate = new Date(diff);
+  const years = ageDate.getUTCFullYear() - 1970;
+  const months = ageDate.getUTCMonth();
+  const days = ageDate.getUTCDate() - 1;
+  const retire = new Date(birthDate);
+  retire.setFullYear(retire.getFullYear() + 60);
+
+  if (years > 60) {
+    return "อายุเกิน 60 ปี";
+  }
+
+  return `${years} ปี ${months} เดือน ${days} วัน`;
+}
+
+/**
+ * ฟังก์ชันอัปเดทวันเดือนปีเกิด
+ * @param v  วันเดือยปีเกิด
+ */
+function updateBirthDate(v: Date) {
+  informaData.value.age = calculateAge(v);
+}
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(async () => {
+  await fetchPerson();
+  await getData();
+});
 </script>
 
 <template>
-  <div class="col-12 row">
-    <div class="row col-12" style="padding-top: 80px">
-      <div id="information" name="1" class="row col-12 information">
-        <Information v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="government" name="16" class="row col-12 q-mt-md">
-        <Government
-          v-model:statusEdit="statusEdit"
-          :statusAdd="false"
-          profileType="test"
-          employeeClass="test"
-        />
-      </div>
-      <div id="address" name="17" class="row col-12 q-mt-md">
-        <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="family" name="18" class="row col-12 q-mt-md">
-        <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
-      </div>
-      <div id="certicate" name="15" class="row col-12 q-mt-md">
-        <Certicate v-model:statusEdit="statusEdit" profileType="test" />
-      </div>
-      <div id="education" name="2" class="row col-12 q-mt-md">
-        <EducationVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="training" name="3" class="row col-12 q-mt-md">
-        <TrainVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="insignia" name="4" class="row col-12 q-mt-md">
-        <InsigniaVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="coined" name="5" class="row col-12 q-mt-md">
-        <CoinedVue v-model:statusEdit="statusEdit" profileType="profileType" />
-      </div>
-      <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          profileType="profileType"
-        />
-      </div>
-      <div id="position" name="7" class="row col-12 q-mt-md">
-        <SalaryVue v-model:statusEdit="statusEdit" />
-        <!-- v-if="profileType === 'officer'" -->
-        <!-- <SalaryEmployeeTempVue
-          v-model:statusEdit="statusEdit"
-          v-else-if="employeeClass === 'temp'"
-        />
-        <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else /> -->
-      </div>
-      <div id="rule" name="8" class="row col-12 q-mt-md">
-        <DisciplineVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="leave" name="9" class="row col-12 q-mt-md">
-        <LeaveVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="talent" name="10" class="row col-12 q-mt-md">
-        <TalentVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="work" name="11" class="row col-12 q-mt-md">
-        <WorkVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="record" name="12" class="row col-12 q-mt-md">
-        <RecordVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="other" name="13" class="row col-12 q-mt-md">
-        <OtherVue v-model:statusEdit="statusEdit" />
-      </div>
-      <div id="document" name="14" class="row col-12 q-my-md">
-        <DocumentVue v-model:statusEdit="statusEdit" />
-      </div>
-    </div>
-    <Image />
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/placement/receive`)"
+    />
+    รายละเอียดการรับโอนของ{{ title.fullname }}
   </div>
+  <CardProfile :data="dataProfile as DataProfile" />
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <q-form greedy @submit.prevent @validation-success="saveData" ref="myForm">
+      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="q-pl-sm text-weight-bold text-dark">
+          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+        </div>
+        <q-space />
+        <div class="q-gutter-sm" v-if="!edit">
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+            v-if="
+              !(status == 'REPORT' || status == 'DONE') &&
+              checkPermission($route)?.attrIsUpdate
+            "
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            type="submit"
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="oncanceledit"
+          />
+        </div>
+      </div>
+      <div class="col-12"><q-separator /></div>
+
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white">
+          <div class="col-xs-12 row q-col-gutter-md">
+            <div class="col-xs-12">
+              <div class="text-weight-bold text-grey">ข้อมูลส่วนตัว</div>
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                v-model="informaData.cardid"
+                dense
+                @update:model-value="changeCardID"
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                label="เลขประจำตัวประชาชน"
+                maxlength="13"
+                mask="#############"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="name"
+                :label="`${'คำนำหน้าชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps' ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.firstname"
+                :label="`${'ชื่อ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.lastname"
+                lazy-rules
+                :label="`${'นามสกุล'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <datepicker
+                v-model="informaData.birthDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :max-date="calculateMaxDate()"
+                :disabled="!edit"
+                @update:model-value="updateBirthDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      informaData.birthDate == null
+                        ? null
+                        : date2Thai(informaData.birthDate)
+                    "
+                    :label="`${'วัน/เดือน/ปี เกิด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(false)"
+                hide-bottom-space
+                dense
+                lazy-rules
+                readonly
+                borderless
+                :style="!edit ? '' : 'padding:0 12px;'"
+                :model-value="informaData.age"
+                :label="`${'อายุ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.genderId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.genderOps"
+                option-value="name"
+                :label="`${'เพศ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps') "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.statusId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="name"
+                :label="`${'สถานภาพ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps' ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.nationality"
+                :label="`${'สัญชาติ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.ethnicity"
+                :label="`${'เชื้อชาติ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.religionId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.religionOps"
+                option-value="name"
+                :label="`${'ศาสนา'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.bloodId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.bloodOps"
+                option-value="name"
+                :label="`${'หมู่เลือด'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                        ) "
+                clearable
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                type="tel"
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.tel"
+                :label="`${'เบอร์โทร'}`"
+                mask="##########"
+              />
+            </div>
+            <div
+              class="col-xs-6 col-sm-3 col-md-3"
+              v-if="informaData.profileType == 'employee'"
+            >
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.employeeType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.employeeTypeOps"
+                option-value="id"
+                :label="`${'ประเภทการจ้าง'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps' ) "
+              />
+            </div>
+            <div
+              class="col-xs-6 col-sm-3 col-md-3"
+              v-if="informaData.profileType == 'employee'"
+            >
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.employeeClass"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.employeeClassOps"
+                option-value="id"
+                :label="`${'ประเภทลูกจ้าง'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) "
+              />
+            </div>
+            <div class="col-xs-12">
+              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
+            </div>
+            <div class="col-xs-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="educationOld"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิ/สาขา'}`,]"
+                hide-bottom-space
+                :label="`${'วุฒิ/สาขา'}`"
+                type="textarea"
+                autogrow
+              />
+            </div>
+            <div class="col-xs-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทตำแหน่ง'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                hide-bottom-space
+                :label="`${'ระดับตำแหน่ง'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3">
+              <q-input
+                :class="getClass(edit)"
+                v-model="salary"
+                :outlined="edit"
+                dense
+                :readonly="!edit"
+                hide-bottom-space
+                :borderless="!edit"
+                :label="`${'เงินเดือน'}`"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
+                mask="###,###,###,###"
+                reverse-fill-mask
+              />
+            </div>
+            <div class="col-xs-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                hide-bottom-space
+                :label="`${'หมายเหตุ '}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+
+  <q-card v-if="rows.length > 0" bordered class="row col-12 text-dark q-my-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn
+                type="a"
+                target="_blank"
+                :href="props.row.pathName"
+                flat
+                dense
+                round
+                color="red"
+                icon="picture_as_pdf"
+              >
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
 </template>
 
-<style lang="scss" scoped>
-.information:target {
-  padding-top: 84px;
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
 }
 </style>
->
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
deleted file mode 100644
index feb9ebf94..000000000
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ /dev/null
@@ -1,1026 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps, QForm } from "quasar";
-import type {
-  ResponseTitle,
-  DataProfile,
-} from "@/modules/05_placement/interface/response/Receive";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import type {
-  Information,
-  DataOption,
-  DataOptioninfo,
-  docList,
-} from "@/modules/04_registry/components/profileType";
-
-import { defaultInformation } from "@/modules/04_registry/components/profileType";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import CardProfile from "@/components/CardProfile.vue";
-
-const dataProfile = ref<DataProfile>();
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-
-const paramsId = route.params.id;
-const {
-  date2Thai,
-  dialogMessage,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dateToISO,
-  dialogConfirm,
-} = mixin;
-
-const title = ref<ResponseTitle>({
-  fullname: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionTypeOld: "",
-});
-
-const status = ref<string>("");
-
-const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(false);
-const rows = ref<docList[]>([]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fileName",
-    align: "left",
-    label: "ชื่อไฟล์",
-    sortable: true,
-    field: "fileName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "btnMicrosoft",
-    align: "right",
-    label: "ปุ่ม",
-    sortable: true,
-    field: "btnMicrosoft",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const profileId = ref<string>("");
-const educationOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-const avatar = ref<string>("");
-
-const reason = ref<string>("");
-
-const informaData = ref<Information>(defaultInformation);
-const dateBefore = ref<Date>(new Date());
-const defaultCitizenData = ref<string>("");
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-
-/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
-const fetchPerson = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileNewMetaMain)
-    .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: DataOptioninfo) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: DataOptioninfo) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      optionprefixs = data.prefixs.map((v: any) => ({
-        id: v.id,
-        name: v.name,
-      }));
-
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: DataOptioninfo) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: DataOptioninfo) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.receiveDataId(paramsId.toString()))
-    .then(async (res: any) => {
-      const data = res.data.result;
-      dataProfile.value = res.data.result as unknown as DataProfile;
-      let list: docList[] = [];
-      if (data.docs.length > 0) {
-        data.docs.map((doc: docList) => {
-          list.push({
-            pathName: doc.pathName ?? "",
-            fileName: doc.fileName ?? "",
-          });
-        });
-      }
-      rows.value = list;
-      profileId.value = data.profileId;
-      avatar.value = data.avatar ?? "";
-      title.value.fullname = `${data.prefix ?? ""}${data.firstName ?? ""} ${
-        data.lastName ?? ""
-      }`;
-      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
-      title.value.positionLevelOld = data.positionLevelOld ?? "-";
-      title.value.positionTypeOld = data.positionTypeOld ?? "-";
-      defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
-      informaData.value = {
-        cardid: data.citizenId ?? "",
-        age: calculateAge(data.dateOfBirth),
-        prefix: "",
-        prefixId:
-          (data.prefix == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.prefix) ?? "",
-        firstname: data.firstName ?? "",
-        lastname: data.lastName ?? "",
-        birthDate:
-          data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
-        genderId:
-          (data.gender == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.gender) ?? "",
-        bloodId:
-          (data.bloodGroup == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.bloodGroup) ?? "",
-        nationality: data.nationality ?? "",
-        ethnicity: data.race ?? "",
-        statusId:
-          (data.relationship == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.relationship) ?? "",
-        religionId:
-          (data.religion == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.religion) ?? "",
-        tel: data.telephoneNumber ?? "",
-        employeeType: "",
-        employeeClass: "",
-        profileType: "",
-      };
-      educationOld.value = data.educationOld ?? "";
-      organizationPositionOld.value = data.organizationPositionOld ?? "";
-      positionTypeOld.value = data.positionTypeOld ?? "";
-      positionLevelOld.value = data.positionLevelOld ?? "";
-      posNo.value = data.positionNumberOld ?? "";
-      salary.value = data.amountOld ?? 0;
-      reason.value = data.reason ?? "";
-      status.value = data.status ?? "";
-
-      calculateAge(data.dateOfBirth);
-
-      dateBefore.value = new Date(data.dateOfBirth);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const cancel = async () => {
-  edit.value = !edit.value;
-  if (myForm.value !== null) {
-    await getData();
-    myForm.value?.resetValidation();
-  } else {
-  }
-};
-
-const changeCardID = async (value: string | number | null) => {
-  if (value != null && typeof value == "string") {
-    if (value.length == 13 && value != defaultCitizenData.value) {
-      await checkCitizen(value);
-    }
-  }
-};
-
-const checkCitizen = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.profileCitizenId(id))
-    .then((res) => {
-      const data = res.data.result.citizen;
-
-      if (!data) {
-        dialogMessage(
-          $q,
-          "ข้อความแจ้งเตือน",
-          "เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
-          "warning",
-          undefined,
-          "orange",
-          undefined,
-          undefined,
-          true
-        );
-        informaData.value.cardid = defaultCitizenData.value;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-function saveData() {
-  dialogConfirm(
-    $q,
-    () => {
-      const body = {
-        citizenId: informaData.value.cardid,
-        prefix: informaData.value.prefixId,
-        firstname: informaData.value.firstname,
-        lastname: informaData.value.lastname,
-        dateOfBirth:
-          informaData.value.birthDate !== null
-            ? dateToISO(informaData.value.birthDate)
-            : null,
-        gender: informaData.value.genderId,
-        nationality: informaData.value.nationality,
-        race: informaData.value.ethnicity,
-        religion: informaData.value.religionId,
-        bloodGroup: informaData.value.bloodId,
-        relationship: informaData.value.statusId,
-        telephoneNumber: informaData.value.tel,
-        reason: reason.value,
-        educationOld: educationOld.value,
-        organizationPositionOld: organizationPositionOld.value,
-        positionTypeOld: positionTypeOld.value,
-        positionLevelOld: positionLevelOld.value,
-        positionNumberOld: posNo.value,
-        amount: 0,
-        amountOld: salary.value,
-      };
-      showLoader();
-      http
-        .put(config.API.receiveDataId(route.params.id.toString()), body)
-        .then(async () => {
-          await getData();
-          await success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-          edit.value = false;
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          hideLoader();
-        });
-    },
-    "ต้องการแก้ไขข้อมูลหรือไม่?",
-    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-  );
-}
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-
-/**
- * function เช็คอายุไม่เกิน 18 ปี
- */
-function calculateMaxDate() {
-  const today = new Date();
-  today.setFullYear(today.getFullYear() - 18);
-  return today;
-}
-
-function calculateAge(birthDate: Date | null) {
-  if (!birthDate) return null;
-  const birthDateTimeStamp = new Date(birthDate).getTime();
-  const now = new Date();
-  const diff = now.getTime() - birthDateTimeStamp;
-
-  const ageDate = new Date(diff);
-  const years = ageDate.getUTCFullYear() - 1970;
-  const months = ageDate.getUTCMonth();
-  const days = ageDate.getUTCDate() - 1;
-  const retire = new Date(birthDate);
-  retire.setFullYear(retire.getFullYear() + 60);
-
-  if (years > 60) {
-    return "อายุเกิน 60 ปี";
-  }
-
-  return `${years} ปี ${months} เดือน ${days} วัน`;
-}
-
-watch(
-  () => informaData.value.birthDate,
-  (v) => {
-    if (v) {
-      informaData.value.age = calculateAge(v);
-    }
-  }
-);
-
-onMounted(async () => {
-  await fetchPerson();
-  await getData();
-});
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push(`/placement/receive`)"
-    />
-    รายละเอียดการรับโอนของ{{ title.fullname }}
-  </div>
-  <CardProfile :data="dataProfile as DataProfile" />
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <q-form greedy @submit.prevent @validation-success="saveData" ref="myForm">
-      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-        <div class="q-pl-sm text-weight-bold text-dark">
-          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
-        </div>
-        <q-space />
-        <div class="q-gutter-sm" v-if="!edit">
-          <q-btn
-            outline
-            color="primary"
-            dense
-            icon-right="mdi-file-edit-outline"
-            class="q-px-sm"
-            label="แก้ไข"
-            style="width: 80px"
-            @click="edit = !edit"
-            v-if="
-              !(status == 'REPORT' || status == 'DONE') &&
-              checkPermission($route)?.attrIsUpdate
-            "
-          />
-        </div>
-        <div class="q-gutter-sm" v-else>
-          <q-btn
-            type="submit"
-            outline
-            color="public"
-            dense
-            class="q-px-sm"
-            label="บันทึก"
-            style="width: 80px"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="cancel"
-          />
-        </div>
-      </div>
-      <div class="col-12"><q-separator /></div>
-
-      <div class="row col-12 q-pa-md">
-        <div class="col-12 row bg-white">
-          <div class="col-xs-12 row q-col-gutter-md">
-            <div class="col-xs-12">
-              <div class="text-weight-bold text-grey">ข้อมูลส่วนตัว</div>
-            </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                v-model="informaData.cardid"
-                dense
-                @update:model-value="changeCardID"
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                label="เลขประจำตัวประชาชน"
-                maxlength="13"
-                mask="#############"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
-              <selector
-                :hide-dropdown-icon="!edit"
-                hide-bottom-space
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.prefixId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.prefixOps"
-                option-value="name"
-                :label="`${'คำนำหน้าชื่อ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps' ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="informaData.firstname"
-                :label="`${'ชื่อ'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="informaData.lastname"
-                lazy-rules
-                :label="`${'นามสกุล'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <datepicker
-                v-model="informaData.birthDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                :max-date="calculateMaxDate()"
-                :disabled="!edit"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    hide-bottom-space
-                    :outlined="edit"
-                    dense
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="
-                      informaData.birthDate == null
-                        ? null
-                        : date2Thai(informaData.birthDate)
-                    "
-                    :label="`${'วัน/เดือน/ปี เกิด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <q-input
-                :class="getClass(false)"
-                hide-bottom-space
-                dense
-                lazy-rules
-                readonly
-                borderless
-                :style="!edit ? '' : 'padding:0 12px;'"
-                :model-value="informaData.age"
-                :label="`${'อายุ'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <selector
-                :hide-dropdown-icon="!edit"
-                hide-bottom-space
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.genderId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.genderOps"
-                option-value="name"
-                :label="`${'เพศ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps') "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <selector
-                :hide-dropdown-icon="!edit"
-                hide-bottom-space
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.statusId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.statusOps"
-                option-value="name"
-                :label="`${'สถานภาพ'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps' ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="informaData.nationality"
-                :label="`${'สัญชาติ'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="informaData.ethnicity"
-                :label="`${'เชื้อชาติ'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <selector
-                :hide-dropdown-icon="!edit"
-                hide-bottom-space
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.religionId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.religionOps"
-                option-value="name"
-                :label="`${'ศาสนา'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
-                        ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <selector
-                :hide-dropdown-icon="!edit"
-                hide-bottom-space
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.bloodId"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.bloodOps"
-                option-value="name"
-                :label="`${'หมู่เลือด'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                        ) "
-                clearable
-              />
-            </div>
-            <div class="col-xs-6 col-sm-2 col-md-2">
-              <q-input
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                type="tel"
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="informaData.tel"
-                :label="`${'เบอร์โทร'}`"
-                mask="##########"
-              />
-            </div>
-            <div
-              class="col-xs-6 col-sm-3 col-md-3"
-              v-if="informaData.profileType == 'employee'"
-            >
-              <selector
-                :hide-dropdown-icon="!edit"
-                hide-bottom-space
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.employeeType"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.employeeTypeOps"
-                option-value="id"
-                :label="`${'ประเภทการจ้าง'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps' ) "
-              />
-            </div>
-            <div
-              class="col-xs-6 col-sm-3 col-md-3"
-              v-if="informaData.profileType == 'employee'"
-            >
-              <selector
-                :hide-dropdown-icon="!edit"
-                hide-bottom-space
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
-                :outlined="edit"
-                dense
-                lazy-rules
-                v-model="informaData.employeeClass"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.employeeClassOps"
-                option-value="id"
-                :label="`${'ประเภทลูกจ้าง'}`"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) "
-              />
-            </div>
-            <div class="col-xs-12">
-              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
-            </div>
-            <div class="col-xs-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="educationOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกวุฒิ/สาขา'}`,]"
-                hide-bottom-space
-                :label="`${'วุฒิ/สาขา'}`"
-                type="textarea"
-                autogrow
-              />
-            </div>
-            <div class="col-xs-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทตำแหน่ง'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ระดับตำแหน่ง'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-3">
-              <q-input
-                :class="getClass(edit)"
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-              />
-            </div>
-            <div class="col-xs-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reason"
-                hide-bottom-space
-                :label="`${'หมายเหตุ '}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <q-card v-if="rows.length > 0" bordered class="row col-12 text-dark q-my-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn
-                type="a"
-                target="_blank"
-                :href="props.row.pathName"
-                flat
-                dense
-                round
-                color="red"
-                icon="picture_as_pdf"
-              >
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-</template>
-
-<style lang="scss" scope>
-.q-img {
-  border-radius: 5px;
-  height: 70px;
-}
-.text-top {
-  color: gray;
-  font-weight: 400;
-  padding-bottom: 3px;
-}
-.text-detail {
-  font-weight: 500;
-}
-</style>
diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
deleted file mode 100644
index 6efa6716c..000000000
--- a/src/modules/05_placement/components/Relocation/RelocationMain.vue
+++ /dev/null
@@ -1,733 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import DialogOrgTree from "@/modules/05_placement/components/Relocation/RelocationModal.vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import type { relocationType } from "@/modules/05_placement/interface/response/Relocation";
-
-const transferStore = useTransferDataStore();
-const { statusText } = transferStore;
-
-const personalId = ref<string>("");
-const personal = ref<any[]>([]);
-const modalTree = ref<boolean>(false);
-const selected = ref<relocationType[]>([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin();
-
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogMessage,
-  dialogRemove,
-} = mixin;
-
-const modal = ref<boolean>(false);
-const visibleColumns = ref<string[]>([
-  "no",
-  "citizenId",
-  "fullname",
-  "organizationName",
-  "dateOfBirth",
-  "createdAt",
-  "statusText",
-  "btn",
-]);
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "citizenId",
-  "fullname",
-  "organizationName",
-  "dateOfBirth",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
-const rows = ref<relocationType[]>([]);
-const rows2 = ref<any[]>([]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationName",
-    align: "left",
-    label: "หน่วยงานที่รับโอน",
-    sortable: true,
-    field: "organizationName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateOfBirth",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "dateOfBirth",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "statusText",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statusText",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "btn",
-    align: "left",
-    label: "",
-    sortable: true,
-    field: "btn",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationName",
-    align: "left",
-    label: "หน่วยงานที่รับโอน",
-    sortable: true,
-    field: "organizationName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateOfBirth",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "dateOfBirth",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-//--------------(ปุ่มลบ)----------------//
-
-const openDetail = (id: string) => {
-  router.push(`/relocation/detail/${id}`);
-};
-const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
-const openModalOrder = () => {
-  openModal();
-  const row = rows.value.filter(
-    (item: relocationType) =>
-      item.status == "WAITTING" ||
-      item.status == "PENDING" ||
-      item.status == "APPROVE"
-  );
-  rows2.value = row;
-};
-const openModalTree = (id: string) => {
-  personalId.value = id;
-  personal.value = rows.value.filter((e: any) => e.id === id);
-  modalTree.value = true;
-};
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.relocationMain())
-    .then((res: any) => {
-      const data = res.data.result;
-      rows.value = data.map((item: relocationType) => ({
-        fullname: `${item.prefix}${item.firstname} ${item.lastname}`,
-        id: item.id,
-        citizenId: item.citizenId,
-        prefix: item.prefix,
-        firstname: item.firstname,
-        lastname: item.lastname,
-        dateOfBirth: date2Thai(item.dateOfBirth),
-        gender: item.gender,
-        status: item.status,
-        statusText: statusText(item.status),
-        recruitDate: item.recruitDate,
-        positionNumber: item.positionNumber,
-        positionPath: item.positionPath,
-        positionPathSide: item.positionPathSide,
-        positionType: item.positionType,
-        positionLine: item.positionLine,
-        positionLevel: item.positionLevel,
-        posNoId: item.posNoId,
-        positionId: item.positionId,
-        positionPathSideId: item.positionPathSideId,
-        positionTypeId: item.positionTypeId,
-        positionLineId: item.positionLineId,
-        positionLevelId: item.positionLevelId,
-        organizationPositionId: item.organizationPositionId,
-        organizationName: item.organizationName,
-        organizationShortName: item.organizationShortName,
-        isActive: item.isActive,
-        reason: item.reason,
-        educationOld: item.educationOld,
-        salary: item.salary,
-        positionTypeOld: item.positionTypeOld,
-        positionLevelOld: item.positionLevelOld,
-        positionNumberOld: item.positionNumberOld,
-        organizationPositionOld: item.organizationPositionOld,
-        createdAt: date2Thai(item.createdAt),
-      }));
-    })
-    .catch((e) => {
-      // messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const saveOrder = async () => {
-  const id = selected.value.map((item) => item.id);
-  const body = {
-    id,
-  };
-
-  showLoader();
-  await http
-    .post(config.API.relocationMainReport(), body)
-    .then(() => {
-      success($q, "ส่งไปออกคำสั่งย้าย");
-      closeModal();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.relocationMainDelete(id))
-    .then(() => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-    });
-};
-
-const clickDelete = async (name: string, id: string) => {
-  dialogRemove(
-    $q,
-    async () => {
-      await deleteData(id);
-      await getData();
-    },
-    `ลบข้อมูลของ ${name}`
-  );
-};
-const closeModalTree = async () => {
-  await getData();
-  modalTree.value = false;
-};
-onMounted(async () => {
-  await getData();
-});
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-</script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">รายการย้าย</div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
-    <div class="row q-pa-md">
-      <div class="col-12">
-        <div class="row col-12">
-          <q-btn
-            @click="openModalOrder"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
-            <q-tooltip>ส่งไปออกคำสั่งย้าย</q-tooltip>
-          </q-btn>
-
-          <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
-        </div>
-
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="id"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="citizenId"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.citizenId !== null ? props.row.citizenId : "-" }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.fullname !== null ? props.row.fullname : "-" }}
-                </q-td>
-                <q-td
-                  key="organizationName"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div
-                    v-if="
-                      props.row.organizationName !== null ||
-                      props.row.positionPath !== null
-                    "
-                  >
-                    <div class="col-4">
-                      <div class="text-weight-medium">
-                        {{
-                          props.row.organizationName !== null
-                            ? props.row.organizationName
-                            : "-"
-                        }}
-                        {{
-                          props.row.organizationShortName !== null
-                            ? `(${props.row.organizationShortName})`
-                            : ""
-                        }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{
-                          props.row.positionPath !== null
-                            ? props.row.positionPath
-                            : "-"
-                        }}
-                        {{
-                          props.row.positionNumber !== null
-                            ? `(${props.row.positionNumber})`
-                            : ""
-                        }}
-                      </div>
-                    </div>
-                  </div>
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
-                    </div>
-                  </div>
-                </q-td>
-                <q-td
-                  key="dateOfBirth"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{
-                    props.row.dateOfBirth !== null ? props.row.dateOfBirth : "-"
-                  }}
-                </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{
-                      props.row.organizationPositionOld !== null
-                        ? props.row.organizationPositionOld
-                        : "-"
-                    }}
-                  </div>
-                </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{
-                      props.row.organization !== null
-                        ? props.row.organization
-                        : "-"
-                    }}
-                  </div>
-                </q-td>
-                <q-td
-                  key="statusText"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{
-                    props.row.statusText !== null ? props.row.statusText : "-"
-                  }}
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    v-if="
-                      props.row.status !== 'DONE' &&
-                      props.row.status !== 'REPORT'
-                    "
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
-                    flat
-                    round
-                    dense
-                  >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 100px">
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="openModalTree(props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              color="primary"
-                              size="xs"
-                              name="mdi-bookmark-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section
-                            >เลือกหน่วยงานที่รับย้าย</q-item-section
-                          >
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="clickDelete(props.row.fullname, props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-dialog v-model="modal">
-    <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader :tittle="'ส่งไปออกคำสั่งย้าย'" :close="closeModal" />
-      <q-separator />
-      <q-card-section>
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filterKeyword2"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="id"
-          flat
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
-              </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="citizenId" :props="props">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="organizationName" :props="props">
-                <div
-                  v-if="
-                    props.row.organizationName !== null ||
-                    props.row.positionPath !== null
-                  "
-                >
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{
-                        props.row.organizationName !== null
-                          ? props.row.organizationName
-                          : "-"
-                      }}
-                      {{
-                        props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
-                          : ""
-                      }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{
-                        props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
-                      }}
-                      {{
-                        props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
-                          : ""
-                      }}
-                    </div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="col-4">
-                    <div class="text-weight-medium">-</div>
-                  </div>
-                </div>
-              </q-td>
-              <q-td key="dateOfBirth" :props="props">
-                {{ props.row.dateOfBirth }}
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn
-          label="ส่งไปออกคำสั่ง"
-          @click="saveOrder"
-          :disable="checkSelected"
-          color="public"
-        >
-          <q-tooltpi>ส่งไปออกคำสั่ง</q-tooltpi>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-  <DialogOrgTree
-    v-model:modal="modalTree"
-    :close="closeModalTree"
-    :personal="personal"
-    :personalId="personalId"
-  />
-  <!-- :personalId="personalId" -->
-</template>
-<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Relocation/RelocationModal.vue b/src/modules/05_placement/components/Relocation/RelocationModal.vue
deleted file mode 100644
index 347c8ef9d..000000000
--- a/src/modules/05_placement/components/Relocation/RelocationModal.vue
+++ /dev/null
@@ -1,791 +0,0 @@
-<script setup lang="ts">
-import { useQuasar, QForm } from "quasar";
-import { onMounted, reactive, ref, watch } from "vue";
-
-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";
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  date2Thai,
-  hideLoader,
-  messageError,
-  showLoader,
-  success,
-  dialogConfirm,
-} = mixin; //ฟังก์ชันกลางที่เรียกใช้
-
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
-
-const checkValidate = ref<boolean>(false);
-const myFormPosition = ref<any>();
-const selected = ref<string>("");
-const selectedFile = ref<string>("");
-const dataRespone = ref<any>();
-
-// Set form field
-let dataForm = reactive({
-  personalId: "",
-  containDate: new Date(),
-  posNoId: "",
-  positionId: "",
-  positionLevelId: "",
-  positionLineId: "",
-  positionPathSideId: "",
-  positionTypeId: "",
-  // salaryAmount: null,
-  // mouthSalaryAmount: null,
-  // positionSalaryAmount: null,
-});
-
-onMounted(async () => {
-  // await fetchPublishFile();
-  await loadTreeData();
-  await fetchplacementPosition();
-});
-// const fetchPublishFile = async () => {
-//   await http
-//     .get(config.API.getPublishFileHistory)
-//     .then((res) => {
-//       let data = res.data.result;
-//       selectedFile.value = data[0].fileName;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//     });
-// };
-
-// โหลดข้อมูลโครงสร้างจาก json
-const treeData = ref<Array<any>>([]);
-const loadTreeData = async () => {
-  expanded.value = [];
-  await http
-    .get(`${config.s3ClusterUrl}${selectedFile.value}`)
-    .then((res: any) => {
-      treeData.value = res.data;
-      dataRespone.value = res.data;
-
-      // Filter objects with "name" null
-      const filteredData = res.data.filter(filterByPersonIdNull);
-      treeData.value = filteredData;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-function filterByPersonIdNull(obj: any) {
-  if (obj.name === null && obj.isCondition != true) {
-    return true;
-  }
-  if (obj.children && obj.children.length > 0) {
-    obj.children = obj.children.filter(filterByPersonIdNull);
-    return obj.children.length > 0;
-  }
-  return false;
-}
-
-// โหลด position
-const placementPosition = ref<any>([]);
-const fetchplacementPosition = async () => {
-  await http
-    .get(config.API.relocationMainPosition())
-    .then((res: any) => {
-      placementPosition.value = res.data.result;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
-};
-
-const search = ref<string>("");
-//reset Tree Filter
-const filterRef = ref<any>(null);
-// const resetFilter = () => {
-//   search.value = "";
-//   filterRef.value.focus();
-// };
-
-const props = defineProps({
-  personalId: String,
-  modal: Boolean,
-  close: {
-    type: Function,
-    default: () => console.log("close modal"),
-  },
-  personal: Object,
-});
-
-const myFilterMethod = (node: any, filter: string) => {
-  const filt = filter;
-
-  return (
-    // ((node.name && node.name == null) || !node.name) &&
-    (node.name && node.name.indexOf(filt) > -1) ||
-    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-    (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
-      node.governmentCode.toString().indexOf(filt) > -1) ||
-    (node.agency && node.agency.indexOf(filt) > -1) ||
-    (node.government && node.government.indexOf(filt) > -1) ||
-    (node.department && node.department.indexOf(filt) > -1) ||
-    (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
-      node.organizationShortName.indexOf(filt) > -1) ||
-    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
-      node.executivePositionSide.indexOf(filt) > -1) ||
-    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
-  );
-};
-
-const validateData = async () => {
-  checkValidate.value = true;
-  await myFormPosition.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-const id = ref<string>("");
-const saveAppoint = async () => {
-  myFormPosition.value.validate().then(async (result: boolean) => {
-    if (props.personalId !== undefined) {
-      id.value = props.personalId.toString();
-    }
-    if (result) {
-      const dataAppoint = await {
-        // personalId: props.personalId,
-        recruitDate: dataForm.containDate,
-        posNoId: dataForm.posNoId,
-        positionId: dataForm.positionId,
-        positionLevelId: dataForm.positionLevelId,
-        positionLineId: dataForm.positionLineId,
-        positionPathSideId: dataForm.positionPathSideId,
-        positionTypeId: dataForm.positionTypeId,
-        // salaryAmount: dataForm.salaryAmount,
-        // mouthSalaryAmount: dataForm.mouthSalaryAmount,
-        // positionSalaryAmount: dataForm.positionSalaryAmount,
-      };
-
-      showLoader();
-      await http
-        .put(config.API.relocationMainPut(id.value), dataAppoint)
-        .then(() => {
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await closeAndClear();
-          // await resetFilter();
-          // await fetchPublishFile();
-          await loadTreeData();
-          await fetchplacementPosition();
-          hideLoader();
-        });
-    }
-  });
-};
-
-const editDataStatus = ref<boolean>(false);
-const clickEditRow = () => {
-  editDataStatus.value = true;
-};
-
-const closeModal = () => {
-  if (editDataStatus.value == true) {
-    dialogConfirm(
-      $q,
-      () => {
-        editDataStatus.value = false;
-        closeAndClear();
-      },
-      `ข้อมูลมีการแก้ไข`,
-      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`
-    );
-  } else {
-    closeAndClear();
-  }
-};
-
-const closeAndClear = async () => {
-  await props.close();
-  editDataStatus.value = false;
-  selected.value = "";
-  dataForm.personalId = "";
-  dataForm.containDate = new Date();
-  dataForm.posNoId = "";
-  dataForm.positionId = "";
-  dataForm.positionLevelId = "";
-  dataForm.positionLineId = "";
-  dataForm.positionPathSideId = "";
-  dataForm.positionTypeId = "";
-  // dataForm.salaryAmount = null;
-  // dataForm.mouthSalaryAmount = null;
-  // dataForm.positionSalaryAmount = null;
-};
-// ตำแหน่งเลขที่
-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) => {
-  if (data.name == null && selected.value != data.keyId) {
-    editDataStatus.value = true;
-    selected.value = data.keyId;
-
-    // posNo Options
-    posNoOptions.value = [
-      {
-        label: data.positionNum,
-        value: data.positionNumId,
-      },
-    ];
-    dataForm.posNoId = data.positionNumId;
-
-    // position Options
-    positionOptions.value = [
-      {
-        label: data.positionName,
-        value: data.positionNameId,
-      },
-    ];
-    dataForm.positionId = data.positionNameId;
-
-    // positionPathSide Options
-    let positionPathSideArr: any = [];
-    if (data.positionSideNameObj && data.positionSideNameObj != null) {
-      data.positionSideNameObj.map((x: any) => {
-        positionPathSideArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionPathSideOptions.value = positionPathSideArr;
-      dataForm.positionPathSideId =
-        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
-          ? ""
-          : positionPathSideArr[0].value;
-    }
-
-    // positionType Options
-    positionTypeOptions.value = [
-      {
-        label: data.positionType,
-        value: data.positionTypeId,
-      },
-    ];
-    dataForm.positionTypeId = data.positionTypeId;
-
-    // positionLine Options
-    positionLineOptions.value = [
-      {
-        label: data.positionLine,
-        value: data.positionLineId,
-      },
-    ];
-    dataForm.positionLineId = data.positionLineId;
-
-    // positionLevel Options
-    let positionLevelsArr: any = [];
-    if (data.positionLevelObj != null) {
-      data.positionLevelObj.map((x: any) => {
-        positionLevelsArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionLevelOptions.value = positionLevelsArr;
-      dataForm.positionLevelId =
-        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
-          ? ""
-          : positionLevelsArr[0].value;
-      dataForm.positionLevelId = data.positionLevelObj[0].Id;
-    }
-  } else if (selected.value == data.keyId) {
-    selected.value = "";
-    dataForm.posNoId = "";
-    dataForm.positionId = "";
-    dataForm.positionLevelId = "";
-    dataForm.positionLineId = "";
-    dataForm.positionPathSideId = "";
-    dataForm.positionTypeId = "";
-  }
-};
-
-const checkPosition = (val: string) => {
-  const num = placementPosition.value.findIndex((e: string) => e === val);
-  return num;
-};
-const personal = ref<any>();
-const expanded = ref<string[]>([]);
-
-watch(props, () => {
-  expanded.value = [];
-  const dataPersonal = props.personal;
-
-  if (dataPersonal) {
-    dataPersonal.map((data: any) => {
-      personal.value = data;
-    });
-  }
-
-  if (personal.value) {
-    // const findData = dataRespone.value.find(findByPerson);
-    let findData: any = null;
-    dataRespone.value.map((x: any) => {
-      findData = findByPerson(x);
-
-      if (findData != null) {
-        selectedPosition(findData);
-        for (let i = 3; i <= findData.keyId.length; i += 2) {
-          expanded.value.push(findData.keyId.slice(0, i));
-        }
-      }
-    });
-    // loadTreeData();
-    // selectedPosition(findData.children.children.children)
-  }
-});
-
-function findByPerson(element: any): any {
-  if (
-    element.positionNumId &&
-    element.positionLineId === personal.value.positionLineId &&
-    element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId &&
-    (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId)
-  ) {
-    return element;
-  } else if (element.children) {
-    var i;
-    var result = null;
-    for (i = 0; result == null && i < element.children.length; i++) {
-      result = findByPerson(element.children[i]);
-    }
-    return result;
-  }
-  return null;
-}
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myFormPosition">
-        <DialogHeader tittle="เลือกหน่วยงานที่รับย้าย" :close="closeModal" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-7 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    ref="filterRef"
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <div class="q-pa-sm q-gutter-sm">
-                    <q-tree
-                      no-transition
-                      dense
-                      :nodes="treeData"
-                      node-key="keyId"
-                      :filter="search"
-                      :no-results-label="notFound"
-                      :no-nodes-label="noData"
-                      :filter-method="myFilterMethod"
-                      v-model:expanded="expanded"
-                    >
-                      <template v-slot:header-organization="prop">
-                        <div class="col">
-                          <div
-                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                          >
-                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                            <div class="text-weight-medium">
-                              {{ prop.node.organizationName }}
-                            </div>
-
-                            <!--แสดง Total Count PositionNum-->
-                            <!-- <q-badge rounded color="grey-2" text-color="dark"
-                                                            :label="prop.node.totalPositionCount" /> -->
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
-
-                            <q-space />
-                          </div>
-                          <div class="col items-center q-px-xs q-pt-xs">
-                            <div class="text-weight-medium text-grey-7">
-                              {{ prop.node.governmentCode }}
-                              {{ prop.node.organizationShortName }}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="selected == prop.node.keyId"
-                          @click="selectedPosition(prop.node)"
-                          :disable="
-                            prop.node.name != null ||
-                            checkPosition(prop.node.positionNumId) != -1
-                          "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        >
-                          <img
-                            v-if="
-                              prop.node.avatar == '' ||
-                              prop.node.avatar ==
-                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                            "
-                            src="@/assets/avatar_user.jpg"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div
-                            v-if="prop.node.name == null"
-                            class="q-px-sm text-weight-medium text-red"
-                          >
-                            ว่าง
-                          </div>
-                          <!--=====หัวหน้า สีเขียว=====-->
-                          <div v-else-if="prop.node.positionLeaderFlag">
-                            <div
-                              class="q-px-sm text-weight-medium text-primary"
-                            >
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--=====ลูกน้อง สีปกติ=====-->
-                          <div v-else>
-                            <div class="q-px-sm text-weight-medium">
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionName }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionNum }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionLevel }}
-                          </div>
-                          <q-icon
-                            v-if="prop.node.positionLeaderFlag"
-                            class="q-mr-sm"
-                            size="15px"
-                            color="primary"
-                            name="mdi-bookmark"
-                          ></q-icon>
-
-                          <q-space />
-                        </q-item>
-                      </template>
-                    </q-tree>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-5">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="dataForm.containDate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            class="full-width inputgreen cursor-pointer"
-                            outlined
-                            dense
-                            :model-value="
-                              date2Thai(new Date(dataForm.containDate))
-                            "
-                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
-        ]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        outlined
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="posNoOptions"
-                        v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionOptions"
-                        v-model="dataForm.positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        emit-value
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionPathSideOptions"
-                        v-model="dataForm.positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionTypeOptions"
-                        v-model="dataForm.positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionLineOptions"
-                        v-model="dataForm.positionLineId"
-                        :label="`${'สายงาน'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="dataForm.positionLevelId"
-                        :label="`${'ระดับ'}`"
-                        hide-bottom-space
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        emit-value
-                        map-options
-                      />
-                    </div>
-                    <!-- <div class="col-sx-12 col-sm-12 col-md-12">
-                      <q-separator inset size="2px" class="q-my-md" />
-                    </div> -->
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.salaryAmount"
-                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.positionSalaryAmount"
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.mouthSalaryAmount"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="saveAppoint"
-          v-model:modalEdit="editDataStatus"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.q-tree__node-header {
-  padding: 0px;
-  margin-top: 0px;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.my-list-link {
-  color: rgb(118, 168, 222);
-  border-radius: 5px;
-  background: #a3d3fb48 !important;
-  font-weight: 600;
-  border: 1px solid rgba(175, 185, 196, 0.217);
-  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
-}
-</style>
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
deleted file mode 100644
index 3bffec327..000000000
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ /dev/null
@@ -1,526 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import CurrencyInput from "@/components/CurruncyInput.vue";
-import type { QTableProps, QForm } from "quasar";
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-const edit = ref<boolean>(false);
-const dataId = route.params.id as string;
-const {
-  date2Thai,
-  dialogMessage,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
-
-const roleAdmin = ref<boolean>(false);
-const myForm = ref<QForm | null>(null);
-const name = ref<string>("นายสมคิด ยอดใจ");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const fullname = ref<string>("");
-const profileId = ref<string>("");
-const prefix = ref<string>("");
-const prefixId = ref<string>("");
-const firstname = ref<string>("");
-const citizenId = ref<string>("");
-const lastname = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const educationOld = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const date = ref<Date | null>(null);
-const amount = ref<number>();
-const amountOld = ref<number>();
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const dateOfBirth = ref<Date>();
-const genderId = ref<string>("");
-const nationality = ref<string>("");
-const race = ref<string>("");
-const religionId = ref<string>("");
-const bloodGroupId = ref<string>("");
-const relationshipId = ref<string>("");
-const telephoneNumber = ref<string>("");
-const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const isActive = ref<string>("");
-// const responseData = ref<ResponseDataDetail>({
-//   createdAt: new Date(),
-//   date: new Date(),
-//   id: "",
-//   organization: "",
-//   organizationPositionOld: "",
-//   positionLevelOld: "",
-//   positionNumberOld: "",
-//   positionTypeOld: "",
-//   reason: "",
-//   salary: 0,
-//   status: "",
-// });
-
-// const rows = ref<TypeFile[]>([]);
-// const columns = ref<QTableProps["columns"]>([
-//   {
-//     name: "no",
-//     align: "left",
-//     label: "ลำดับ",
-//     sortable: true,
-//     field: "no",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "fileName",
-//     align: "left",
-//     label: "ชื่อไฟล์",
-//     sortable: true,
-//     field: "fileName",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "btnMicrosoft",
-//     align: "right",
-//     label: "ปุ่ม",
-//     sortable: true,
-//     field: "btnMicrosoft",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-// ]);
-
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.relocationDetail(dataId))
-    .then((res: any) => {
-      const data = res.data.result;
-      profileId.value = data.profileId;
-      citizenId.value = data.citizenId;
-      fullname.value = `${data.prefix}${data.firstname} ${data.lastname}`;
-      prefixId.value = data.prefixId;
-      prefix.value = data.prefix;
-      firstname.value = data.firstname;
-      lastname.value = data.lastname;
-      educationOld.value = data.educationOld;
-      position.value = data.position;
-      posNo.value = data.posNo;
-      positionLevel.value = data.positionLevel;
-      createdAt.value = data.createdAt;
-      organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
-      date.value = data.date;
-      amount.value = data.amount;
-      amountOld.value = data.amountOld;
-      positionTypeOld.value = data.positionTypeOld;
-      positionLevelOld.value = data.positionLevelOld;
-      positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
-      dateOfBirth.value = data.dateOfBirth;
-      genderId.value = data.genderId;
-      nationality.value = data.nationality;
-      race.value = data.race;
-      religionId.value = data.religionId;
-      bloodGroupId.value = data.bloodGroupId;
-      relationshipId.value = data.relationshipId;
-      telephoneNumber.value = data.telephoneNumber;
-      isActive.value = data.isActive;
-    })
-    .catch((e) => {
-      //   messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-//
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
-const cancelBtn = () => {
-  edit.value = !edit;
-  getData();
-};
-const saveData = async () => {
-  const body = {
-    educationOld: educationOld.value,
-    prefixId: prefixId.value,
-    citizenId: citizenId.value,
-    firstname: firstname.value,
-    lastname: lastname.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: positionNumberOld.value,
-    amount: amount.value,
-    amountOld: amountOld.value,
-    dateOfBirth: dateOfBirth.value,
-    genderId: genderId.value,
-    nationality: nationality.value,
-    race: race.value,
-    religionId: religionId.value,
-    bloodGroupId: bloodGroupId.value,
-    relationshipId: relationshipId.value,
-    telephoneNumber: telephoneNumber.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.relocationMainEdit(dataId), body)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await getData();
-});
-</script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายละเอียดการย้าย {{ fullname }}
-  </div>
-  <q-card bordered class="row col-12 text-dark">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(profileId)"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img src="@/assets/avatar_user.jpg" />
-        </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">
-              {{ positionTypeOld }}
-            </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">
-              {{ positionLevelOld }}
-            </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">
-              {{ organizationPositionOld }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
-      </div>
-      <q-space />
-      <div v-if="status !== 'REPORT' && status !== 'DONE'">
-        <div class="q-gutter-sm" v-if="!edit">
-          <q-btn
-            outline
-            color="primary"
-            dense
-            icon-right="mdi-file-edit-outline"
-            class="q-px-sm"
-            label="แก้ไข"
-            style="width: 80px"
-            @click="edit = !edit"
-          />
-        </div>
-        <div class="q-gutter-sm" v-else>
-          <q-btn
-            outline
-            color="public"
-            dense
-            class="q-px-sm"
-            label="บันทึก"
-            style="width: 80px"
-            @click="conditionSave"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="cancelBtn"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm">
-      <div class="row col-12 q-pa-md">
-        <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="educationOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'วุฒิ/สาขา'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-12 row items-center">
-            <div class="col-12 q-pb-sm"><q-separator /></div>
-
-            <div class="col-12">
-              <div class="text-weight-bold text-grey">ตำแหน่ง/สังกัดเดิม</div>
-            </div>
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ประเภทตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space
-                :label="`${'ระดับ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionNumberOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="col-12">
-              <CurrencyInput
-                v-model="amountOld"
-                :edit="edit"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
-              />
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-
-          <!-- <div class="col-xs-6 col-sm-6 row items-center">
-              <div class="col-12">
-                <q-input
-                  :class="getClass(edit)"
-                  :outlined="edit"
-                  dense
-                  lazy-rules
-                  :readonly="!edit"
-                  :borderless="!edit"
-                  v-model="organization"
-                  :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                  hide-bottom-space
-                  :label="`${'โอนไปสังกัด'}`"
-                />
-              </div>
-            </div> -->
-          <div class="col-xs-6 col-sm-3 row items-center">
-            <div class="text-weight-bold text-grey col-12">
-              เงินเดือนตำแหน่งและหน่วยงานที่รับย้าย
-            </div>
-            <div class="col-12">
-              <!-- <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="amount"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              /> -->
-              <CurrencyInput
-                v-model="amount"
-                :edit="edit"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
-              />
-            </div>
-          </div>
-          <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
-          </div>
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
-</template>
-
-<style lang="scss" scope>
-.q-img {
-  border-radius: 5px;
-  height: 70px;
-}
-.text-top {
-  color: gray;
-  font-weight: 400;
-  padding-bottom: 3px;
-}
-.text-detail {
-  font-weight: 500;
-}
-</style>
diff --git a/src/modules/05_placement/components/Repatriate/Dialogbody.vue b/src/modules/05_placement/components/Repatriate/DialogOrders.vue
similarity index 99%
rename from src/modules/05_placement/components/Repatriate/Dialogbody.vue
rename to src/modules/05_placement/components/Repatriate/DialogOrders.vue
index 253c8dec2..6becb36d6 100644
--- a/src/modules/05_placement/components/Repatriate/Dialogbody.vue
+++ b/src/modules/05_placement/components/Repatriate/DialogOrders.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 
 /**
  * impportType
@@ -18,8 +21,6 @@ import DialogHeader from "@/components/DialogHeader.vue";
 /**
  * importStore
  */
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
 
 const $q = useQuasar();
 const { statusText } = useTransferDataStore();
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
similarity index 100%
rename from src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
rename to src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
diff --git a/src/modules/05_placement/components/Transfer/TransferDetail.vue b/src/modules/05_placement/components/Transfer/TransferDetail.vue
index 273356c91..06c7841cd 100644
--- a/src/modules/05_placement/components/Transfer/TransferDetail.vue
+++ b/src/modules/05_placement/components/Transfer/TransferDetail.vue
@@ -9,7 +9,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 
-import type { QTableProps, QForm } from "quasar";
+import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 import type {
   TypeFile,
@@ -38,15 +38,14 @@ const roleAdmin = ref<boolean>(false); //admin
 const edit = ref<boolean>(false); //การแก่ไข
 const dataProfile = ref<DataProfile>(); //ข้อมูลส่วนตัว
 
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-const organization = ref<string>("");
-const date = ref<Date | null>(null);
-const reason = ref<string>("");
-const rows = ref<TypeFile[]>([]); //รายการเอกสารเพิ่มเติม
+const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัด
+const positionTypeOld = ref<string>(""); //ประเภทตำแหน่ง
+const positionLevelOld = ref<string>(""); //ระดับตำแหน่ง
+const posNo = ref<string>(""); //เลขที่
+const salary = ref<number>(0); //เงินเดือน
+const organization = ref<string>(""); //โอนไปสังกัด
+const date = ref<Date | null>(null); //ตั้งแต่วัน
+const reason = ref<string>(""); //หมายเหตุ
 //ข้อมูลการขอโอน
 const responseData = ref<ResponseDataDetail>({
   profileId: "",
@@ -65,6 +64,7 @@ const responseData = ref<ResponseDataDetail>({
   fullname: "",
 });
 
+const rows = ref<TypeFile[]>([]); //รายการเอกสารเพิ่มเติม
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
diff --git a/src/modules/05_placement/components/Other/Criterion.vue b/src/modules/05_placement/components/probation/Criterion.vue
similarity index 100%
rename from src/modules/05_placement/components/Other/Criterion.vue
rename to src/modules/05_placement/components/probation/Criterion.vue
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 92f1a7144..5deffde9d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 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/probation/Criterion.vue";
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
 const router = useRouter();
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
index 3edc6c37c..ab85bd18b 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 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/probation/Criterion.vue";
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
 const $q = useQuasar();
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 244cae6fc..c5630794a 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 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/probation/Criterion.vue";
 
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
index d1b217c43..4a72bb506 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 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/probation/Criterion.vue";
 
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index d3fe8fd87..452a89abb 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -8,7 +8,7 @@ import { useRouter, useRoute } from "vue-router";
 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/probation/Criterion.vue";
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
 const router = useRouter();
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
index 8fda0e8df..faa0534f6 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -10,7 +10,7 @@ import { useRoute, useRouter } from "vue-router";
 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/probation/Criterion.vue";
 
 const $q = useQuasar();
 const route = useRoute();
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
index f0ffc0fc7..b4365e6d5 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
@@ -8,7 +8,7 @@ import { useRoute, useRouter } from "vue-router";
 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/probation/Criterion.vue";
 
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
index e04d37698..037952cbf 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
@@ -9,7 +9,7 @@ import { useRouter, useRoute } from "vue-router";
 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/probation/Criterion.vue";
 
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 3292ae320..2957f025e 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -402,6 +402,7 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
   </div>
+  
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
diff --git a/src/modules/05_placement/components/probation/SummarySurvey.vue b/src/modules/05_placement/components/probation/SummarySurvey.vue
index 4c806f17e..50d4d7704 100644
--- a/src/modules/05_placement/components/probation/SummarySurvey.vue
+++ b/src/modules/05_placement/components/probation/SummarySurvey.vue
@@ -5,7 +5,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
 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/probation/Criterion.vue";
 import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
 const optionText = ref<ListDataText[]>([
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 1ff2c8a49..b680cdcd7 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -283,6 +283,14 @@ interface ListMenu {
   type: string;
   color: string;
 }
+
+interface DataEducation {
+  university: string;
+  degree: string;
+  major: string;
+  graduation: string;
+}
+
 export type {
   DataOption,
   DataOptionInsignia,
@@ -307,6 +315,7 @@ export type {
   tableType,
   ListDataText,
   ListMenu,
+  DataEducation,
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };
diff --git a/src/modules/05_placement/interface/response/Main.ts b/src/modules/05_placement/interface/response/Main.ts
index fe8436797..c9c5dbd0e 100644
--- a/src/modules/05_placement/interface/response/Main.ts
+++ b/src/modules/05_placement/interface/response/Main.ts
@@ -2,4 +2,103 @@ interface OpType {
   commandCode: string;
   id: string;
 }
-export type { OpType };
+
+interface DataPerson {
+  age: string;
+  bloodGroup: string;
+  bmaOfficer: string;
+  certificates: [
+    {
+      certificateNo: string;
+      certificateType: string;
+      expireDate: string;
+      id: string;
+      issueDate: string;
+      issuer: string;
+    }
+  ];
+  couple: boolean;
+  currentAddress: string;
+  currentDistrictId: string;
+  currentProvinceId: string;
+  currentSubDistrictId: string;
+  currentZipCode: string;
+  dateOfBirth: any;
+  docs: any;
+  draft: boolean;
+  education: Education[];
+  examNumber: number;
+  examRound: string;
+  fatherFirstName: string;
+  fatherLastName: string;
+  fatherOccupation: string;
+  fatherPrefix: string;
+  firstname: string;
+  fullName: string;
+  gender: string;
+  idCard: string;
+  isProperty: [
+    {
+      name: string;
+      value: boolean;
+    }
+  ];
+  isRelief: boolean;
+  lastname: string;
+  marryFirstName: string;
+  marryLastName: string;
+  marryOccupation: string;
+  marryPrefix: string;
+  motherFirstName: string;
+  motherLastName: string;
+  motherOccupation: string;
+  motherPrefix: string;
+  nationality: string;
+  pass: string;
+  personalId: string;
+  point: number;
+  pointA: number;
+  pointB: number;
+  pointC: number;
+  pointTotal: number;
+  pointTotalA: number;
+  pointTotalB: number;
+  pointTotalC: number;
+  positionCandidate: string;
+  positionCandidateId: string;
+  prefix: string;
+  race: string;
+  registAddress: string;
+  registDistrictId: string;
+  registProvinceId: string;
+  registSame: boolean;
+  registSubDistrictId: string;
+  registZipCode: string;
+  relationship: string;
+  religion: string;
+  telephone: string;
+}
+
+interface Education {
+  country: string;
+  degree: string;
+  duration: string;
+  durationYear: string;
+  educationLevel: string;
+  educationLevelId: string;
+  endDate: string;
+  field: string;
+  finishDate: Date;
+  fundName: string;
+  gpa: string;
+  id: string;
+  institute: string;
+  isDate: boolean;
+  isEducation: string;
+  other: string;
+  positionPath: string;
+  positionPathId: string;
+  startDate: string;
+}
+
+export type { OpType, DataPerson, Education };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 8b323ca45..2693d05f9 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -7,7 +7,7 @@ const PlacementMain = () => import("@/modules/05_placement/views/01_Main.vue");
 const PlacementDetail = () =>
   import("@/modules/05_placement/components/PersonalList/PersonalListPage.vue");
 const PlacementPersonalDetail = () =>
-  import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
+  import("@/modules/05_placement/components/PersonalDetail/DetailMain.vue");
 
 // รายการขอโอน
 const transfer = () =>
@@ -19,27 +19,55 @@ const transferbyId = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/views/03_receiveMain.vue");
 const ReceiveAdd = () =>
-  import("@/modules/05_placement/components/Receive/FormAdd.vue");
+  import("@/modules/05_placement/components/Receive/ReceiveAddPerson.vue");
 const receiveDetail2 = () =>
-  import("@/modules/05_placement/components/Receive/receiveDetail2.vue");
+  import("@/modules/05_placement/components/Receive/ReceiveDetail.vue");
+
+//รายการช่วยราชการ
+const helpgovernment = () =>
+  import("@/modules/05_placement/views/04_helpGovernmentMain.vue");
+const helpgovernmentbyId = () =>
+  import(
+    "@/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue"
+  );
+
+//รายการส่งตัวกลับ
+const repatriate = () =>
+  import("@/modules/05_placement/views/05_repatriateMain.vue");
+const repatriatebyId = () =>
+  import("@/modules/05_placement/components/Repatriate/RepatriateDetail.vue");
+
+//รายการแต่งตั้ง-เลื่อน-ย้าย
+const AppointmentMain = () =>
+  import("@/modules/05_placement/views/06_appointPromoteMain.vue");
+const AppointmentDetail = () =>
+  import("@/modules/05_placement/components/AppointMent/AppointMentDetail.vue");
+
+//รายการปรับระดับชั้นงานลูกจ้าง
+const AppointEmployeeMain = () =>
+  import("@/modules/05_placement/views/07_appointEmployeeMain.vue");
+const AppointEmployeeDetail = () =>
+  import("@/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue");
+
+//อื่นๆ
+const OtherMain = () =>
+  import("@/modules/05_placement/views/08_otherMain.vue");
+const OthertDetail = () =>
+  import("@/modules/05_placement/components/Other/OtherDetail.vue");
 
 // ระบบทดลองงาน
 const mainProbation = () =>
   import("@/modules/05_placement/components/probation/MainProbation.vue");
-
 const probationDetail = () =>
   import("@/modules/05_placement/components/probation/ProbationDetail.vue");
-
 const probationFormEvaluation = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
 const probationFormEvaluationDetail = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
-
 const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
 const probationFormAssign = () =>
   import("@/modules/05_placement/components/probation/FormAssign.vue");
-
 const FormSaveResultAdd = () =>
   import(
     "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue"
@@ -57,41 +85,6 @@ const FormSaveResultAddCommander = () =>
     "./components/probation/FormEvaluation/FormSaveResultAddCommander.vue"
   );
 
-const helpgovernment = () =>
-  import("@/modules/05_placement/components/helpgovernment/mainHelp.vue");
-const helpgovernmentbyId = () =>
-  import(
-    "@/modules/05_placement/components/helpgovernment/governmentDetail.vue"
-  );
-const repatriate = () =>
-  import("@/modules/05_placement/components/Repatriate/RepatriateMain.vue");
-const repatriatebyId = () =>
-  import("@/modules/05_placement/components/Repatriate/RepatriatebyId.vue");
-const relocation = () =>
-  import("@/modules/05_placement/components/Relocation/RelocationMain.vue");
-const relocationbyId = () =>
-  import("@/modules/05_placement/components/Relocation/RelocationbyId.vue");
-//รับโอน
-
-// const receiveDetail = () =>
-//   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-
-//แต่งตั้ง-เลื่อน
-const AppointmentMain = () =>
-  import("@/modules/05_placement/components/AppointMent/Main.vue");
-const AppointmentDetail = () =>
-  import("@/modules/05_placement/components/AppointMent/Detail.vue");
-//แต่งตั้งลูกจ้างประจำ
-const AppointEmployeeMain = () =>
-  import("@/modules/05_placement/components/AppointEmployee/Main.vue");
-const AppointEmployeeDetail = () =>
-  import("@/modules/05_placement/components/AppointEmployee/Detail.vue");
-//อื่นๆ
-const OtherMain = () =>
-  import("@/modules/05_placement/components/Other/Main.vue");
-const OthertDetail = () =>
-  import("@/modules/05_placement/components/Other/Detail.vue");
-
 export default [
   {
     path: "/placement",
@@ -255,6 +248,7 @@ export default [
       Role: "STAFF",
     },
   },
+
   //รายการรับโอน
   {
     path: "/placement/receive",
@@ -286,6 +280,8 @@ export default [
       Role: "STAFF",
     },
   },
+
+  //รายการช่วยราชการ
   {
     path: "/placement/help-government",
     name: "help-government",
@@ -306,6 +302,8 @@ export default [
       Role: "STAFF",
     },
   },
+
+  // รายการส่งตัวกลับ
   {
     path: "/placement/repatriate",
     name: "repatriate",
@@ -326,6 +324,8 @@ export default [
       Role: "STAFF",
     },
   },
+
+  // รายการแต่งตั้ง-เลื่อน-ย้าย
   {
     path: "/placement/appoint-promote",
     name: "appoint-promote",
@@ -346,6 +346,8 @@ export default [
       Role: "STAFF",
     },
   },
+
+  //รายการปรับระดับชั้นงานลูกจ้าง
   {
     path: "/placement/appoint-employee",
     name: "appoint-employee",
@@ -386,54 +388,4 @@ export default [
       Role: "STAFF",
     },
   },
-  // {
-  //   path: "/relocation",
-  //   name: "relocation",
-  //   component: relocation,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [6.1],
-  //     Role: "placement",
-  //   },
-  // },
-  // {
-  //   path: "/relocation/detail/:id",
-  //   name: "relocationId",
-  //   component: relocationbyId,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [6.9],
-  //     Role: "placement",
-  //   },
-  // },
-  // {
-  //   path: "/change-positions",
-  //   name: "changePositions",
-  //   component: ChangePositionMain,
-  //   meta: {
-  //     Auth: true,
-  //     Key: "",
-  //     Role: "STAFF",
-  //   },
-  // },
-  // {
-  //   path: "/change-positions/:id",
-  //   name: "changePersonalList",
-  //   component: ChangePersonalList,
-  //   meta: {
-  //     Auth: true,
-  //     Key: "",
-  //     Role: "placement",
-  //   },
-  // },
-  // {
-  //   path: "/change-positions/personal/:id",
-  //   name: "changePersonalId",
-  //   component: ChangePersonalDetail,
-  //   meta: {
-  //     Auth: true,
-  //     Key: "",
-  //     Role: "placement",
-  //   },
-  // },
 ];
diff --git a/src/modules/05_placement/views/01_Main.vue b/src/modules/05_placement/views/01_Main.vue
index d0f363d6b..460f203dc 100644
--- a/src/modules/05_placement/views/01_Main.vue
+++ b/src/modules/05_placement/views/01_Main.vue
@@ -312,8 +312,6 @@ async function expiredAccountFilter() {
   await DataStore.DataMain(updatedRows);
 }
 
-/** filter ใน dropdown ครั้งที่ */
-
 /**
  * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
  * @param val ค่าที่กรอก
@@ -376,7 +374,9 @@ function paginationLabel(start: number, end: number, total: number) {
   else return start + "-" + end + " ใน " + total;
 }
 
-/** เรียกใช้ฟังชั่น เมื่อเริ่มหน้านี้ */
+/**
+ * เรียกใช้ฟังชั่น เมื่อเริ่มหน้านี้
+ */
 onMounted(async () => {
   await fetchYearOptions();
 });
diff --git a/src/modules/05_placement/views/02_transferMain.vue b/src/modules/05_placement/views/02_transferMain.vue
index a17f6ba93..981b2cdac 100644
--- a/src/modules/05_placement/views/02_transferMain.vue
+++ b/src/modules/05_placement/views/02_transferMain.vue
@@ -21,14 +21,13 @@ const { statusText } = useTransferDataStore();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 
 const modal = ref<boolean>(false); //ส่งไปออกคำสั่ง
-const rowsOrder = ref<ResponseData[]>([]);
-const filterOrder = ref<string>("");
-
-const filterMain = ref<string>(""); //คำค้นหารายการข้อโอน
-const rows = ref<ResponseData[]>([]);
-const dataTransfer = ref<ResponseData[]>([]);
+const dataTransfer = ref<ResponseData[]>([]); //ช่อมูลรายการขอโอน
 
 //Table
+const rows = ref<ResponseData[]>([]); //รายการขอโอน
+const filterMain = ref<string>(""); //คำค้นหารายการขอโอน
+const rowsOrder = ref<ResponseData[]>([]); //รายการส่งไปออกคำสั่ง
+const filterOrder = ref<string>(""); //คำค้นหารายการส่งไปออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
diff --git a/src/modules/05_placement/views/03_receiveMain.vue b/src/modules/05_placement/views/03_receiveMain.vue
index 05b7c8cf0..8e772b175 100644
--- a/src/modules/05_placement/views/03_receiveMain.vue
+++ b/src/modules/05_placement/views/03_receiveMain.vue
@@ -15,8 +15,8 @@ import type {
   ResponseRow,
 } from "@/modules/05_placement/interface/response/Receive";
 
-import Dialogbody from "@/modules/05_placement/components/Receive/Dialogbody.vue";
-import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
+import Dialogbody from "@/modules/05_placement/components/Receive/DialogOrders.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
 
 const $q = useQuasar();
@@ -34,27 +34,27 @@ const {
 } = mixin;
 
 const dataRecevice = ref<ResponseData[]>([]); //ข้อมูลรายการรับโอน
+const filters = ref<ResponseRow[]>([]); //ข้อมูลรายการรับโอน
+const dataRows = ref<ResponseRow>(); //ข้อมูลที่ต้องการเลือกหน่วยงานที่รับโอน
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่งรับโอน
+const modalupload = ref<boolean>(false); //แสดง popup อัปโหลดเอกสาร
+const modalTree = ref<boolean>(false); //แสดง popup เลือกหน่วยงานที่รับโอน
 
-const dataRows = ref<any[]>([]);
-const rows2 = ref<ResponseRow[]>([]);
-const modal = ref<boolean>(false);
-const modalupload = ref<boolean>(false);
-const modalTree = ref<boolean>(false);
-const myForm = ref<any>();
-const personal = ref<ResponseData[]>([]);
-const personalId = ref<string>("");
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const files = ref<any>();
-const filters = ref<ResponseRow[]>([]);
-const rows = ref<ResponseRow[]>([]);
-const posType = ref<string>("");
-const posLevel = ref<string>("");
-const position = ref<string>("");
+const personal = ref<ResponseData[]>([]); //ข้อมูลบุคคล
+const personalId = ref<string>(""); //บุคคล
+
+const files = ref<any>(); //ไฟล์
+
+const posType = ref<string>(""); //ประเภทตำแหน่ง
+const posLevel = ref<string>(""); //ระดับตำแหน่ง
+const position = ref<string>(""); //ตำแหน่ง
 const type = ref<string | null>(null);
 
 //Table
+const rows = ref<ResponseRow[]>([]); //รายการรับโอน
+const rows2 = ref<ResponseRow[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการรับโอน
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -143,6 +143,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการรับโอน
+ */
 async function fecthlistRecevice() {
   showLoader();
   await http
@@ -189,45 +192,58 @@ function onSubmitDoc() {
     });
 }
 
-// รีเซ็ตค่าในฟิลเตอร์
-const resetFilter = () => {
+/**
+ * ฟังก์ชันบรีเซ็ตค่าในฟิลเตอร์
+ */
+function resetFilter() {
   filterKeyword.value = "";
   filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
-// ปิดโมเดล
-const clickClose = () => {
+}
+/**
+ * ฟังก์ชันปิด popup ออกคำสั่ง
+ */
+function clickClose() {
   modal.value = false;
   filterKeyword2.value = "";
-};
-// ปิดโมเดลอัปเดตไฟล์
-const clickCloseUpload = () => {
+}
+
+/**
+ * ฟังก์ชันปิด popup อัปเดตไฟล์
+ */
+function clickCloseUpload() {
   modalupload.value = false;
   files.value = null;
-};
-// ปิดโมเดลโครงสร้าง
-const openModalTree = (id: string, data: any) => {
+}
+
+/**
+ * ฟังก์ชันเปิด popup เลือกหน่วยงานที่รับโอน
+ */
+function openModalTree(id: string, data: any) {
   personalId.value = id;
   personal.value = dataRecevice.value.filter((e: ResponseData) => e.id === id);
   dataRows.value = data;
-
   modalTree.value = true;
   type.value = null;
   dataRows.value = data;
-  // console.log("data===>", data);
-
   posType.value = data.posTypeOldId;
   posLevel.value = data.posLevelOldId;
   position.value = data.positionOld;
-};
-// เปิดโมเดลไฟล์
-const openUpload = (id: string) => {
+}
+
+/**
+ * ฟังก์ชันเปิด popup อัปเดตไฟล์
+ * @param id รายการที่ต้องการอัปเดตไฟล์
+ */
+function openUpload(id: string) {
   personalId.value = id;
   modalupload.value = true;
-};
-// ยินยันลบข้อมูล
-const openDelete = (id: string) => {
+}
+
+/**
+ * ฟังก์ชันยืนยันการลบข้อมูล
+ * @param id  รายการที่ต้องการลบ
+ */
+function openDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -241,16 +257,24 @@ const openDelete = (id: string) => {
         hideLoader();
       });
   });
-};
+}
 
-// ไปหน้ารายละเอียด
-const nextPage = (id: string) => {
+/**
+ * ฟังก์ชันไปหน้ารายละเอียด
+ * @param id  รายการที่ต้องการดูรายละเอียก
+ */
+function nextPage(id: string) {
   router.push({
     path: `/placement/receive/${id}`,
   });
-};
+}
 
-const popup = () => {
+/**
+ * ฟังก์ชันส่งไปออกคำสั่ง
+ *
+ * ค้นหารายชื่อออกคำสั่งตามสถานะ อนุมัติ (APPROVE)
+ */
+function openModalOrder() {
   const row = filters.value.filter(
     (r: any) =>
       (r.status == "WAITTING" ||
@@ -267,10 +291,9 @@ const popup = () => {
 
   rows2.value = row;
   modal.value = true;
-};
+}
 
 function onSave(data: any) {
-  console.log("not save", data);
   const dataAppoint = {
     node: data.node,
     nodeId: data.nodeId,
@@ -303,6 +326,9 @@ function onSave(data: any) {
     });
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(() => {
   fecthlistRecevice();
 });
@@ -331,7 +357,7 @@ onMounted(() => {
             round
             color="add"
             icon="mdi-account-arrow-right"
-            @click="popup()"
+            @click="openModalOrder()"
           >
             <q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
           </q-btn>
@@ -550,34 +576,23 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <!-- ออกคำสั่ง -->
-  <Dialogbody
-    v-model:Modal="modal"
-    :clickClose="clickClose"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    :fecthlistRecevice="fecthlistRecevice"
-    :nextPage="nextPage"
-  />
-
   <!-- อัปโหลดเอกสาร -->
   <q-dialog v-model="modalupload">
     <q-card style="width: 600px">
       <q-form greedy @submit.prevent @validation-success="onSubmitDoc">
-        <DialogHeader title="อัปโหลดเอกสาร" :close="clickCloseUpload" />
+        <DialogHeader tittle="อัปโหลดเอกสาร" :close="clickCloseUpload" />
         <q-separator />
         <q-card-section class="q-py-sm">
           <div class="col-12 row items-center q-col-gutter-sm">
             <div class="col-12">
               <q-file
-                ref="myForm"
                 outlined
                 dense
                 v-model="files"
                 label="อัปโหลดเอกสาร"
                 lazy-rules
                 :rules="[
-                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  (val:string) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
                 ]"
                 hide-bottom-space
               >
@@ -599,6 +614,16 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <!-- ออกคำสั่ง -->
+  <Dialogbody
+    v-model:modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    :click-close="clickClose"
+    :rows2="rows2"
+    :fecthlist-recevice="fecthlistRecevice"
+    :next-page="nextPage"
+  />
+
   <!-- เลือกหน่วยงานที่รับโอน -->
   <DialogOrgSelect
     :title="`เลือกหน่วยงานที่รับโอน`"
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/views/04_helpGovernmentMain.vue
similarity index 90%
rename from src/modules/05_placement/components/helpgovernment/mainHelp.vue
rename to src/modules/05_placement/views/04_helpGovernmentMain.vue
index 7c0f7414a..438896e7a 100644
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/src/modules/05_placement/views/04_helpGovernmentMain.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
 import { useRouter } from "vue-router";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /**
  * importType
@@ -13,21 +18,12 @@ import type { officerType } from "@/modules/05_placement/interface/response/offi
 /**
  * importComponents
  */
-import Dialogbody from "@/modules/05_placement/components/helpgovernment/Dialogbody.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/**
- * importStore
- */
-import { useTransferDataStore } from "@/modules/05_placement/store";
-import { useCounterMixin } from "@/stores/mixin";
-
-const transferStore = useTransferDataStore();
-const { statusText } = transferStore;
+import Dialogbody from "@/modules/05_placement/components/Help-Government/DialogOrders.vue";
 
 const $q = useQuasar();
 const router = useRouter();
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -43,14 +39,12 @@ const {
 /**
  * Table
  */
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const rows = ref<officerType[]>([]);
-const rows2 = ref<officerType[]>([]);
-const modal = ref<boolean>(false);
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่งช่วยราชการ;
 
-//หัวตาราง
+const filterKeyword = ref<string>(""); //คำค้นหารายการช่วยราชการ
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
+const rows = ref<officerType[]>([]); //รายการช่วยราชการ
+const rows2 = ref<officerType[]>([]); //รายการออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -191,12 +185,12 @@ const visibleColumns = ref<string[]>([
 /**
  * fetch รายการช่วยราชการ
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.officerMain())
-    .then((res: any) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       rows.value = data;
     })
     .catch((e) => {
@@ -209,7 +203,7 @@ function getData() {
 
 /**
  * ยืนยันการลบรายการช่วยราชการ
- * @param id
+ * @param id รายการที่ต้องการลบ
  */
 function clickDelete(id: string) {
   dialogRemove($q, () => {
@@ -231,7 +225,7 @@ function clickDelete(id: string) {
 
 /**
  * rediarect หน้ารายละเอียดข้อมูล
- * @param id รายการช่วยราชการ
+ * @param id รายการช่วยราชการที่ต้องการดูรายละเอียด
  */
 function openDetail(id: string) {
   router.push(`/placement/help-government/detail/${id}`);
@@ -269,9 +263,11 @@ function closeModal() {
 function resetFilter() {
   filterKeyword.value = "";
   filterKeyword2.value = "";
-  filterRef.value.focus();
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(() => {
   getData();
 });
@@ -410,10 +406,10 @@ onMounted(() => {
 
   <Dialogbody
     v-model:Modal="modal"
-    :closeModal="closeModal"
+    v-model:filter-keyword2="filterKeyword2"
+    :get-data="getData"
+    :close-modal="closeModal"
     :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    :getData="getData"
   />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/views/05_repatriateMain.vue
similarity index 92%
rename from src/modules/05_placement/components/Repatriate/RepatriateMain.vue
rename to src/modules/05_placement/views/05_repatriateMain.vue
index 3f199835f..4d3cdc77b 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
+++ b/src/modules/05_placement/views/05_repatriateMain.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -15,16 +18,11 @@ import type { officerType } from "@/modules/05_placement/interface/response/offi
 /**
  * importComponents
  */
-import Dialogbody from "@/modules/05_placement/components/Repatriate/Dialogbody.vue"; //popup ส่งไปออกคำสั่งส่งตัวกลับ
+import Dialogbody from "@/modules/05_placement/components/Repatriate/DialogOrders.vue"; //popup ส่งไปออกคำสั่งส่งตัวกลับ
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-
-const { statusText } = useTransferDataStore();
 const $q = useQuasar();
+const router = useRouter();
+const { statusText } = useTransferDataStore();
 const {
   date2Thai,
   messageError,
@@ -35,16 +33,13 @@ const {
   findPosMasterNoOld,
 } = useCounterMixin();
 
-/**
- * Table
- */
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const router = useRouter();
-const rows = ref<officerType[]>([]);
-const rows2 = ref<officerType[]>([]);
-// หัวตาราง
+const modal = ref<boolean>(false); //  ส่งไปออกคำสั่งส่งตัวกลับ
+
+//  Table
+const filterKeyword = ref<string>(""); //คำค้นหารายการส่งตัวกลับ
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
+const rows = ref<officerType[]>([]); //รายการส่งตัวกลับ
+const rows2 = ref<officerType[]>([]); //รายการออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -149,8 +144,6 @@ const visibleColumns = ref<string[]>([
   "status",
 ]);
 
-const modal = ref<boolean>(false); //  ส่งไปออกคำสั่งส่งตัวกลับ
-
 /**
  * rediarect ไปหน้ารายละเอียด
  */
@@ -161,12 +154,12 @@ function openDetail(id: string) {
 /**
  * fetch รายการส่งตัวกลับ
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.repatriationMain())
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       rows.value = data;
     })
     .catch((e) => {
@@ -235,13 +228,16 @@ function closeModal() {
 function resetFilter() {
   filterKeyword.value = "";
   filterKeyword2.value = "";
-  filterRef.value.focus();
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการส่งตัวกลับ</div>
   <q-card flat bordered class="col-12 q-mt-sm">
@@ -372,10 +368,11 @@ onMounted(async () => {
 
   <Dialogbody
     v-model:Modal="modal"
-    :closeModal="closeModal"
+    v-model:filter-keyword2="filterKeyword2"
+    :get-data="getData"
+    :close-modal="closeModal"
     :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    :getData="getData"
   />
 </template>
+
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/views/06_appointPromoteMain.vue
similarity index 91%
rename from src/modules/05_placement/components/AppointMent/Main.vue
rename to src/modules/05_placement/views/06_appointPromoteMain.vue
index 4a7bb5e78..b699c97da 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/views/06_appointPromoteMain.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -19,14 +22,11 @@ import type { QTableProps } from "quasar";
 /**
  * importComponents
  */
-import Dialogbody from "@/modules/05_placement/components/AppointMent/Dialogbody.vue"; //ส่งไปออกคำสั่ง
+import Dialogbody from "@/modules/05_placement/components/AppointMent/DialogOrders.vue"; //ส่งไปออกคำสั่ง
 import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue"; // เลือกหน่วยงาน
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-
 const $q = useQuasar();
-const modal = ref<boolean>(false);
+const router = useRouter();
 const storeFn = useTransferDataStore();
 const { statusText } = storeFn;
 const {
@@ -38,29 +38,27 @@ const {
   dialogRemove,
 } = useCounterMixin();
 
-const posType = ref<string>("");
-const posLevel = ref<string>("");
-const position = ref<string>("");
-const typeModal = ref<string | null>(null);
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่ง
+const modalTree = ref<boolean>(false); //แสดง popup  เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย
+const posType = ref<string>(""); //ประเภทตำแหน่ง
+const posLevel = ref<string>(""); //ระดับตำแหน่ง
+const position = ref<string>(""); //ตำแหน่ง
+const typeModal = ref<string | null>(null); //ประเภท popup แต่งตั้ง , เลื่อน , ย้าย
 const dataRows = ref<any[]>([]);
-
-const router = useRouter();
-
-const modalTree = ref<boolean>(false);
 const personalId = ref<string>("");
 
 const filterRef = ref<any>(null);
-const listRecevice = ref<resData[]>([]);
+const listRecevice = ref<resData[]>([]); //ข้อมูลรายการแต่งตั้ง-เลื่อน-ย้าย
 const optionsType = ref<OpType[]>([]);
 const type = ref<string>("");
 
 /**
  * Table
  */
-const rows = ref<listAppointType[]>([]);
-const rows2 = ref<listAppointType[]>([]);
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
+const rows = ref<listAppointType[]>([]); //รายการแต่งตั้ง-เลื่อน-ย้าย
+const rows2 = ref<listAppointType[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการแต่งตั้ง-เลื่อน-ย้าย
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -160,22 +158,22 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
 /**
- * รีเซ็ต input
+ * รีเซ็ตคำค้นหารายการ
  */
-const resetFilter = () => {
+function resetFilter() {
   filterKeyword.value = "";
   filterKeyword2.value = "";
   filterRef.value.focus();
-};
+}
 
 /**
  * fetch รายการแต่งตั้ง-เลื่อน-ย้าย
  */
-function fecthlistappointment() {
+async function fecthlistappointment() {
   showLoader();
-  rows.value = [];
-  http
+  await http
     .get(config.API.appointmentMain())
     .then((res) => {
       let response = res.data.result;
@@ -300,6 +298,9 @@ function clickClose() {
   modal.value = false;
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(() => {
   fecthlistappointment();
 });
@@ -577,23 +578,23 @@ onMounted(() => {
 
   <Dialogbody
     v-model:Modal="modal"
-    :clickClose="clickClose"
-    :optionsType="optionsType"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
+    v-model:filter-keyword2="filterKeyword2"
     v-model:type="type"
-    :nextPage="nextPage"
-    :fecthlistappointment="fecthlistappointment"
+    :click-close="clickClose"
+    :options-type="optionsType"
+    :rows2="rows2"
+    :next-page="nextPage"
+    :fetch-data="fecthlistappointment"
   />
 
   <DialogOrgSelect
     :title="`เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย`"
     v-model:modal="modalTree"
     v-model:type="typeModal"
-    :posType="posType"
-    :posLevel="posLevel"
+    :pos-type="posType"
+    :pos-level="posLevel"
     :position="position"
-    :dataRows="dataRows"
+    :data-rows="dataRows"
     :onSubmit="onSave"
   />
 </template>
diff --git a/src/modules/05_placement/components/AppointEmployee/Main.vue b/src/modules/05_placement/views/07_appointEmployeeMain.vue
similarity index 90%
rename from src/modules/05_placement/components/AppointEmployee/Main.vue
rename to src/modules/05_placement/views/07_appointEmployeeMain.vue
index 7d17525d0..dd1ebca68 100644
--- a/src/modules/05_placement/components/AppointEmployee/Main.vue
+++ b/src/modules/05_placement/views/07_appointEmployeeMain.vue
@@ -1,34 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
-import Dialogbody from "@/modules/05_placement/components/AppointEmployee/Dialogbody.vue";
-// import DialogOrgTree from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
 
 import type {
   listAppointType,
   resData,
-  orgFilter,
 } from "@/modules/05_placement/interface/response/AppointMent";
 import type { OpType } from "@/modules/05_placement/interface/response/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-import DialogHeader from "@/components/DialogHeader.vue";
 import DialogOrgSelectEmployee from "@/components/Dialogs/DialogOrgSelectEmployee.vue"; //เลือกหน่วยงาน
-
-const typeModal = ref<string>("");
-const posType = ref<string>("");
-const posLevel = ref<string>("");
-const position = ref<string>("");
-const dataRows = ref<any[]>([]);
+import Dialogbody from "@/modules/05_placement/components/AppointEmployee/DialogOrders.vue";
 
 const $q = useQuasar();
-const modal = ref<boolean>(false);
+const router = useRouter();
 const storeFn = useTransferDataStore();
 const { statusText } = storeFn;
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@@ -40,19 +33,26 @@ const {
   date2Thai,
   dialogRemove,
 } = mixin;
-const router = useRouter();
-const rows = ref<listAppointType[]>([]);
-const rows2 = ref<listAppointType[]>([]);
-const modalTree = ref<boolean>(false);
 
 const personalId = ref<string>("");
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่ง
+const modalTree = ref<boolean>(false); //แสดง popup  เลือกหน่วยงานที่รับการปรับระดับชั้นงาน
+const typeModal = ref<string>(""); //ประเภท popup ปรับระดับชั้นงาน,รับย้าย
+const posType = ref<string>(""); //ประเภทตำแหน่ง
+const posLevel = ref<string>(""); //ระดับตำแหน่ง
+const position = ref<string>(""); //ตำแหน่ง
+const dataRows = ref<any[]>([]);
+
 const filterRef = ref<any>(null);
-const listRecevice = ref<resData[]>([]);
+const listRecevice = ref<resData[]>([]); //ข้อมูลรายการปรับระดับชั้นงานลูกจ้าง
 const optionsType = ref<OpType[]>([]);
 const type = ref<string>("");
 
+// Table
+const rows = ref<listAppointType[]>([]); //รายการปรับระดับชั้นงานลูกจ้าง
+const rows2 = ref<listAppointType[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการปรับระดับชั้นงานลูกจ้าง
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -145,13 +145,13 @@ function resetFilter() {
 /**
  * fetch รายการปรับระดับชั้นงานลูกจ้าง
  */
-function fecthlistappointment() {
+async function fecthlistappointment() {
   showLoader();
-  rows.value = [];
-  http
+
+  await http
     .get(config.API.appointEmployee())
-    .then((res) => {
-      let response = res.data.result;
+    .then(async (res) => {
+      let response = await res.data.result;
       listRecevice.value = response;
       rows.value = response;
 
@@ -182,7 +182,7 @@ function fecthlistappointment() {
  * ยืนยันลบรายการปรับระดับชั้นงานลูกจ้าง
  * @param id รายการปรับระดับชั้นงานลูกจ้าง
  */
-const clickDelete = (id: string) => {
+function clickDelete(id: string) {
   dialogRemove($q, () => {
     showLoader();
     http
@@ -198,7 +198,7 @@ const clickDelete = (id: string) => {
         hideLoader();
       });
   });
-};
+}
 
 /**
  * redialect รายละเอียดการปรับระดับชั้นงานลูกจ้าง
@@ -259,7 +259,6 @@ function onSave(data: any) {
     posmasterId: data.posmasterId,
     typeCommand: data.typeCommand,
   };
-
   showLoader();
   http
     .put(config.API.appointmentPosition(personalId.value), dataAppoint)
@@ -275,6 +274,7 @@ function onSave(data: any) {
       hideLoader();
     });
 }
+
 onMounted(() => {
   fecthlistappointment();
 });
@@ -523,23 +523,23 @@ onMounted(() => {
 
   <Dialogbody
     v-model:Modal="modal"
-    :clickClose="clickClose"
-    :optionsType="optionsType"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
+    v-model:filter-keyword2="filterKeyword2"
     v-model:type="type"
-    :nextPage="nextPage"
-    :fecthlistappointment="fecthlistappointment"
+    :click-close="clickClose"
+    :options-type="optionsType"
+    :rows2="rows2"
+    :next-page="nextPage"
+    :fetch-data="fecthlistappointment"
   />
 
   <DialogOrgSelectEmployee
     :title="`เลือกหน่วยงานที่รับการปรับระดับชั้นงาน`"
     v-model:modal="modalTree"
     v-model:type="typeModal"
-    :posType="posType"
-    :posLevel="posLevel"
+    :pos-type="posType"
+    :pos-level="posLevel"
     :position="position"
-    :dataRows="dataRows"
+    :data-rows="dataRows"
     :onSubmit="onSave"
   />
 </template>
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/views/08_otherMain.vue
similarity index 95%
rename from src/modules/05_placement/components/Other/Main.vue
rename to src/modules/05_placement/views/08_otherMain.vue
index cd27cf157..70432f5b7 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/views/08_otherMain.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
+import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -13,11 +15,7 @@ import type { listMain } from "@/modules/05_placement/interface/response/OhterMa
 import type { OpType } from "@/modules/05_placement/interface/response/Main";
 
 /** importcomopnents*/
-import Dialogbody from "@/modules/05_placement/components/Other/Dialogbody.vue";
-
-/** importStore*/
-import { useTransferDataStore } from "@/modules/05_placement/store";
-import { useCounterMixin } from "@/stores/mixin";
+import Dialogbody from "@/modules/05_placement/components/Other/DialogOrders.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -40,11 +38,10 @@ const optionsType = ref<OpType[]>([]);
 /**
  * Table
  */
-const rows = ref<listMain[]>([]);
-const rows2 = ref<listMain[]>([]);
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
+const rows = ref<listMain[]>([]); //รายการอื่นๆ
+const rows2 = ref<listMain[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการอื่นๆ
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -137,9 +134,9 @@ const pagination = ref({
 /**
  * fetch รายการอื่นๆ
  */
-function fecthlistOthet() {
+async function fecthlistOthet() {
   showLoader();
-  http
+  await http
     .get(config.API.otherMain())
     .then((res) => {
       let response = res.data.result;
@@ -195,7 +192,6 @@ function fecthTypeOption() {
 function resetFilter() {
   filterKeyword.value = "";
   filterKeyword2.value = "";
-  filterRef.value.focus();
 }
 
 /**
@@ -383,12 +379,13 @@ onMounted(() => {
 
   <Dialogbody
     v-model:Modal="modal"
-    :clickClose="clickClose"
-    :optionsType="optionsType"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
+    v-model:filter-keyword2="filterKeyword2"
     v-model:type="type"
+    :click-close="clickClose"
+    :options-type="optionsType"
+    :rows2="rows2"
     :fecthlistOthet="fecthlistOthet"
   />
 </template>
+
 <style scoped lang="scss"></style>

From 94109a6f157cf7d36c45da0b538993aa7e7fc640 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 19 Sep 2024 15:57:40 +0700
Subject: [PATCH 2/2] Refactoring code module 16_positionEmployee

---
 .../components/DialogAddPosition.vue          | 146 ++++----
 .../components/DialogFormPosition.vue         | 238 ++++++-------
 .../components/DialogHistoryPos.vue           |  22 +-
 .../components/DialogSelectPerson.vue         |  25 +-
 .../components/DialogSortPosition.vue         |   9 +-
 .../components/DialogSuccession.vue           |  17 +-
 .../components/TreeMain.vue                   |  18 +-
 .../components/TreeTable.vue                  |   7 +-
 .../components/TreeView.vue                   | 330 ------------------
 .../16_positionEmployee/views/main.vue        | 315 ++++++++++++++++-
 10 files changed, 527 insertions(+), 600 deletions(-)
 delete mode 100644 src/modules/16_positionEmployee/components/TreeView.vue

diff --git a/src/modules/16_positionEmployee/components/DialogAddPosition.vue b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
index 5a4075017..fc51fc0a5 100644
--- a/src/modules/16_positionEmployee/components/DialogAddPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -11,7 +13,6 @@ import type {
   ResGroup,
   ResLevel,
 } from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
-import type { ObjectPosRef } from "@/modules/01_masterdata/interface/index/positionEmployee";
 import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
 import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
 
@@ -20,11 +21,6 @@ import type { OptionType } from "@/modules/16_positionEmployee/interface/respons
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -44,86 +40,58 @@ const props = defineProps({
   levelOp: Object,
 });
 
-const isDisValidate = ref<boolean>(false);
-const isSpecial = ref<boolean>(false);
+//ข้อมูลตำแหน่ง
 const formDataPos = reactive({
-  posName: "",
-  posTypeName: "",
-  posLevelName: "",
+  posName: "", //ชือตำแหน่ง
+  posTypeName: "", //กลุ่มงาน
+  posLevelName: "", //ระดับชั้นงาน
 });
 
-const posNameRef = ref<object | null>(null);
-const posTypeNameRef = ref<object | null>(null);
-const posLevelNameRef = ref<object | null>(null);
-const objectRef: ObjectPosRef = {
-  posName: posNameRef,
-  posTypeName: posTypeNameRef,
-  posLevelName: posLevelNameRef,
-};
-const posTypeMain = ref<ResGroup[]>([]);
-const posTypeOp = ref<DataOption[]>([]);
-const posLevelOp = ref<DataOption[]>([]);
+const posTypeMain = ref<ResGroup[]>([]); //ข้อมูลกลุ่มงาน
+const posTypeOp = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const posLevelOp = ref<DataOption[]>([]); //รายการระดับชั้นงาน
 
 /**
- * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ * ฟังก์ชันยืนยันการบันทึกข้อมุล
  */
-function validateFormPositionEdit() {
-  isDisValidate.value = false;
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    const body = {
+      posDictName: formDataPos.posName,
+      posTypeId: formDataPos.posTypeName,
+      posLevelId: formDataPos.posLevelName,
+    };
+    showLoader();
+    try {
+      const url = !isEditCheck.value
+        ? config.API.orgEmployeePos
+        : config.API.orgEmployeePosById(props?.data?.id);
+      await http[!isEditCheck.value ? "post" : "put"](url, body);
+      await props.emitSearch?.(formDataPos.posName, "positionName");
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      close();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
     }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      submit();
-    });
-  }
-}
-async function submit() {
-  const body = {
-    posDictName: formDataPos.posName,
-    posTypeId: formDataPos.posTypeName,
-    posLevelId: formDataPos.posLevelName,
-  };
-  showLoader();
-  try {
-    const url = !isEditCheck.value
-      ? config.API.orgEmployeePos
-      : config.API.orgEmployeePosById(props?.data?.id);
-    await http[!isEditCheck.value ? "post" : "put"](url, body);
-    await props.emitSearch?.(formDataPos.posName, "positionName");
-    await success($q, "บันทีกข้อมูลสำเร็จ");
-    await close();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-  }
+  });
 }
 
-async function clearFormPositionSelect() {
+/**
+ * ฟังก์ชันปิด popup
+ */
+function close() {
+  modal.value = false;
   isEditCheck.value = false;
-  isDisValidate.value = true;
   formDataPos.posName = "";
   formDataPos.posTypeName = "";
   formDataPos.posLevelName = "";
-  isSpecial.value = false;
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
-function close() {
-  modal.value = false;
-  clearFormPositionSelect();
 }
 
+/**
+ * ฟังก์ชันดึงข้อมุลกลุ่มงาน
+ */
 async function fetchType() {
   showLoader();
   await http
@@ -143,6 +111,10 @@ async function fetchType() {
     });
 }
 
+/**
+ * ฟังก์ชันหาข้อมูลระดับชั้นงานตามกลุ่มงาน
+ * @param id  กลุ่มงาน
+ */
 function updatePosTypeName(id: string) {
   const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
   posLevelOp.value =
@@ -153,6 +125,9 @@ function updatePosTypeName(id: string) {
   formDataPos.posLevelName = "";
 }
 
+/**
+ * ทำงานเมื่อ modal เป็น true
+ */
 watch(
   () => modal.value,
   async () => {
@@ -175,14 +150,16 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 50vw">
-      <DialogHeader
-        :tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
-        :close="close"
-      />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`
+          }`"
+          :close="close"
+        />
+        <q-separator />
 
-      <q-card-section class="q-pa-none">
-        <form @submit.prevent="validateFormPositionEdit">
+        <q-card-section class="q-pa-none">
           <div class="row q-col-gutter-sm col-12 q-pa-md">
             <div class="col-12">
               <q-input
@@ -194,7 +171,8 @@ watch(
                 label="ชื่อตำแหน่ง"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                class="inputgreen"
               />
             </div>
 
@@ -212,8 +190,9 @@ watch(
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
                 @update:model-value="updatePosTypeName"
+                class="inputgreen"
               />
             </div>
 
@@ -232,7 +211,8 @@ watch(
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                class="inputgreen"
               />
             </div>
           </div>
@@ -245,8 +225,8 @@ watch(
               color="public"
             />
           </q-card-actions>
-        </form>
-      </q-card-section>
+        </q-card-section>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/16_positionEmployee/components/DialogFormPosition.vue b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
index 3702f6592..5207426af 100644
--- a/src/modules/16_positionEmployee/components/DialogFormPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,37 +12,15 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type {
   FormDataPosition,
-  FormPositionRef,
   DataOption,
   RowDetailPositions,
   ListMenu,
 } from "@/modules/16_positionEmployee/interface/index/Main";
 import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
+import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue"; //เพิ่มตำแหน่ง
 
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  modal: Boolean,
-  close: Function,
-  orgLevel: Number,
-  treeId: String,
-  actionType: String,
-  rowId: { type: String, default: "" },
-  fetchDataTable: Function,
-  getSummary: Function,
-  shortName: { type: String, required: true },
-});
-
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isDisValidate = ref<boolean>(false);
-const isPosition = ref<boolean>(false);
-
-const dataCopy = ref<any>();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -53,7 +33,28 @@ const {
   dialogMessageNotify,
 } = mixin;
 
-const search = ref<string>("");
+/**
+ * props
+ */
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+  orgLevel: Number,
+  treeId: String,
+  actionType: String,
+  rowId: { type: String, default: "" },
+  fetchDataTable: Function,
+  getSummary: Function,
+  shortName: { type: String, required: true },
+});
+
+const modalAdd = ref<boolean>(false); //เพิ่มข้อมูลตำแหน่ง
+const isEdit = ref<boolean>(false); //แก้ไขข้อมูล
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isPosition = ref<boolean>(false); //แสดงเลือกตำแหน่งที่ต้องการเพิ่ม
+const dataCopy = ref<RowDetailPositions>(); //ข้อมูลตำแหน่งที่ต้องการคัดลอก
+const search = ref<string>(""); //คำค้นหา
 const type = ref<string>("positionName");
 const optionFilter = ref<DataOption[]>([
   { id: "positionName", name: "ชื่อตำแหน่ง" },
@@ -82,11 +83,8 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
-const rows = ref<RowDetailPositions[]>([]);
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-
-const prefixNoRef = ref<Object | null>(null);
-const positionNoRef = ref<Object | null>(null);
+const rows = ref<RowDetailPositions[]>([]); //รายกานข้อมูลอัตรากำลัง
+const rowsPositionSelect = ref<RowDetailPositions[]>([]); //รายการตำแหน่ง
 
 const formData = reactive<FormDataPosition>({
   shortName: props.shortName,
@@ -96,12 +94,6 @@ const formData = reactive<FormDataPosition>({
   reason: "",
 });
 
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectPositionRef: FormPositionRef = {
-  prefixNo: prefixNoRef,
-  positionNo: positionNoRef,
-};
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -171,75 +163,59 @@ async function fetchPosition(id: string) {
     });
 }
 
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectPositionRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
-      const property = objectPositionRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (rows.value.length == 0) {
-      dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
-    } else {
-      onSubmit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
+/**
+ *  ฟังก์ชันบันทึกข่อมูลอัตรากำลัง
+ */
 function onSubmit() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    const positionsData = rows.value.map((e: any) => ({
-      posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
-      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
-    }));
-    const body = {
-      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-      posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
-      posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
-      orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
-      orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
-      orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
-      orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
-      positions: positionsData,
-      isDirector: false,
-      isOfficer: false,
-
-      // succession: succession.value,
-    };
-    try {
-      const url =
-        props.actionType === "ADD"
-          ? config.API.orgPosMasterEmp
-          : config.API.orgPosMasterByIdEmp(props.rowId);
-      await http[props.actionType === "ADD" ? "post" : "put"](url, body);
-      await props.getSummary?.();
-      await props.fetchDataTable?.(
-        reqMaster.value.id,
-        reqMaster.value.type,
-        false
-      );
-      await success($q, "บันทีกข้อมูลสำเร็จ");
-      close();
-    } catch (err) {
-      messageError($q, err);
-    } finally {
-      hideLoader();
-    }
-  });
+  if (rows.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const positionsData = rows.value.map((e: any) => ({
+        posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+        posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+        posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+      }));
+      const body = {
+        posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+        posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
+        posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
+        orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
+        orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
+        orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
+        orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
+        positions: positionsData,
+        isDirector: false,
+      };
+      try {
+        const url =
+          props.actionType === "ADD"
+            ? config.API.orgPosMasterEmp
+            : config.API.orgPosMasterByIdEmp(props.rowId);
+        await http[props.actionType === "ADD" ? "post" : "put"](url, body);
+        await props.getSummary?.();
+        await props.fetchDataTable?.(
+          reqMaster.value.id,
+          reqMaster.value.type,
+          false
+        );
+        await success($q, "บันทีกข้อมูลสำเร็จ");
+        close();
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
 }
 
-/** input ค้นหา */
+/**
+ * ฟังก์ชันค้นหาข้อมูลตำแหน่ง
+ */
 const searchRef = ref<any>(null);
 async function searchInput() {
   searchRef.value.validate();
@@ -281,20 +257,18 @@ function editDetiail(data: RowDetailPositions) {
 }
 
 /**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
+ * ฟังก์ชันเลือกตำแหน่ง
+ * @param data  ตำแหน่งที่เลือก
  */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
 function addPosition(data: RowDetailPositions) {
   rows.value = [];
   rows.value.push(data);
 }
 
+/**
+ * ฟังก์ชัยลบตำแหน่ง
+ * @param id  คำแหน่งีที่เลือก
+ */
 function deletePos(id: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -313,27 +287,36 @@ function deletePos(id: string) {
   });
 }
 
-function clearFormPositionSelect() {
-  isDisValidate.value = true;
-  search.value = "";
-  type.value = "positionName";
-
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
+/**
+ * ฟังก์ชันปืด Popup
+ */
 function close() {
   props.close?.();
   isPosition.value = false;
-  clearFormPositionSelect();
+  search.value = "";
+  type.value = "positionName";
 }
 
+/**
+ * ฟังก์ชันค้นหาตำแหน่ง
+ * @param keyword คำค้นหา
+ * @param typeSelect ค้นหาจาก
+ */
 async function emitSearch(keyword: string, typeSelect: string) {
   search.value = keyword;
   type.value = typeSelect;
   await searchInput();
 }
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
 
 watch(
   () => props.modal,
@@ -343,7 +326,6 @@ watch(
         rowsPositionSelect.value = [];
         search.value = "";
         rows.value = [];
-        clearFormPositionSelect();
         formData.prefixNo = "";
         formData.positionNo = "";
         formData.suffixNo = "";
@@ -358,7 +340,7 @@ watch(
   () => modalAdd.value,
   () => {
     if (!modalAdd.value) {
-      dataCopy.value = [];
+      dataCopy.value = undefined;
     }
   }
 );
@@ -374,7 +356,7 @@ watch(
         :close="close"
       />
       <q-separator />
-      <form @submit.prevent="validateForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <q-card-section class="q-pa-sm fixed-height">
           <div class="row q-col-gutter-sm">
             <div class="col-12">
@@ -725,15 +707,17 @@ watch(
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
+
+  <!-- เพิ่มตำแหน่ง -->
   <DialogAddPosition
     v-model:modalAdd="modalAdd"
-    :emitSearch="emitSearch"
-    :data="dataCopy"
     v-model:is-edit="isEdit"
     :get-data="searchInput"
+    :emit-search="emitSearch"
+    :data="dataCopy"
   />
 </template>
 
diff --git a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
index 4b6db61fb..ef79f4db4 100644
--- a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
+++ b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -15,12 +18,6 @@ import type { HistoryPos } from "@/modules/16_positionEmployee/interface/respons
  */
 import Header from "@/components/DialogHeader.vue";
 
-/**
- * import*Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
  * use
  */
@@ -38,6 +35,7 @@ const props = defineProps({
   },
 });
 
+const rows = ref<HistoryPos[]>([]); //รายการแก้ไขประวัติ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -61,7 +59,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
-    field: "lastUpdatedAt",
+    field: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -93,7 +91,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any[]>([]);
 
 /**
  *  function เรียกข้อมูลประวัติตำแหน่ง
@@ -105,14 +102,7 @@ function fetchHistoryPos(id: string) {
     .get(config.API.orgPosHistory(id))
     .then((res) => {
       const data: HistoryPos[] = res.data.result;
-      const list = data.map((e: HistoryPos) => ({
-        ...e,
-        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
-        posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
-        posMasterNo: e.posMasterNo ?? "-",
-        posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
-      }));
-      rows.value = list;
+      rows.value = data;
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
index 76e9525bd..015698610 100644
--- a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 
 /**
  * importType
@@ -29,12 +32,6 @@ import type {
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * import*Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
  * use
  */
@@ -70,12 +67,12 @@ const props = defineProps({
 });
 
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const typeOpsMain = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]); //ข้อมูลกลุ่มงาน
+const levelOpsMain = ref<DataOption[]>([]); //ข้อมูลระดับกลุ่มงาน
+const typeOps = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const levelOps = ref<DataOption[]>([]); //รายการระดับกลุ่มงาน
 const dataLevel = ref<TypePos[]>([]);
-const selected = ref<Position[]>([]);
+const selected = ref<Position[]>([]); //ตำแหน่งที่เลือก
 const isSit = ref<boolean>(false);
 
 const formData = reactive<FormPositionFilter>({
@@ -201,14 +198,15 @@ const columnsResult = ref<QTableProps["columns"]>([
  */
 function close() {
   modal.value = false;
+  clearForm();
 }
 
 /**
  *  function เรียกข้อมูลประเภทตำแหน่ง
  */
-function fetchType() {
+async function fetchType() {
   showLoader();
-  http
+  await http
     .get(config.API.orgEmployeeType)
     .then((res) => {
       dataLevel.value = res.data.result;
@@ -377,7 +375,6 @@ watch(
   () => modal.value,
   async () => {
     if (modal.value == true) {
-      await clearForm();
       await fetchType();
 
       if (props.dataDetailPos) {
diff --git a/src/modules/16_positionEmployee/components/DialogSortPosition.vue b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
index fe5f0cff8..73905f9e1 100644
--- a/src/modules/16_positionEmployee/components/DialogSortPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 
 /**
  * importType
@@ -15,12 +18,6 @@ import type { DataSortPos } from "@/modules/02_organization/interface/index/orga
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
  * use
  */
diff --git a/src/modules/16_positionEmployee/components/DialogSuccession.vue b/src/modules/16_positionEmployee/components/DialogSuccession.vue
index fedba3adc..156bb1a74 100644
--- a/src/modules/16_positionEmployee/components/DialogSuccession.vue
+++ b/src/modules/16_positionEmployee/components/DialogSuccession.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -20,11 +24,6 @@ import type {
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useRoute } from "vue-router";
-
 /** use*/
 const $q = useQuasar();
 const store = usePositionEmp();
@@ -82,10 +81,10 @@ function resetFilter() {
  * function เลือกหน่วยงาน
  */
 async function updateSelected(data: DataTree) {
-  levelTree.value = await data.orgLevel;
-  selectedTree.value = await data.orgTreeId;
-  reqMaster.id = await data.orgTreeId;
-  reqMaster.type = await data.orgLevel;
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+  reqMaster.id = data.orgTreeId;
+  reqMaster.type = data.orgLevel;
   await fetchTable();
 }
 
diff --git a/src/modules/16_positionEmployee/components/TreeMain.vue b/src/modules/16_positionEmployee/components/TreeMain.vue
index e39127940..903180c2f 100644
--- a/src/modules/16_positionEmployee/components/TreeMain.vue
+++ b/src/modules/16_positionEmployee/components/TreeMain.vue
@@ -18,7 +18,7 @@ const store = usePositionEmp();
 const {} = useCounterMixin();
 
 /** props*/
-const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeMain = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const nodeId = defineModel<string>("nodeId", { required: true });
 const shortName = defineModel<string>("shortName", { required: true });
 const props = defineProps({
@@ -32,12 +32,10 @@ const props = defineProps({
   },
 });
 
-const filter = ref<string>("");
-const nodes = ref<Array<OrgTree>>([]);
+const filter = ref<string>(""); //ค้าหาข้อมูลโครงสร้าง
+const nodes = ref<Array<OrgTree>>([]); //ข้อมูลโครงสร้าง
 const lazy = ref(nodes);
-const expanded = ref<Array<any>>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
+const expanded = ref<Array<string[]>>([]);
 
 /**
  * funtion เลือกข้อมูล Tree
@@ -82,9 +80,9 @@ function updateSelected(data: DataTree) {
 }
 
 watch(
-  () => nodeTEST.value,
+  () => nodeMain.value,
   () => {
-    nodes.value = nodeTEST.value;
+    nodes.value = nodeMain.value;
   }
 );
 </script>
@@ -116,8 +114,8 @@ watch(
           node-key="orgTreeId"
           label-key="labelName"
           :filter="filter"
-          :no-results-label="notFound"
-          :no-nodes-label="noData"
+          no-results-label="ไม่พบข้อมูลที่ค้นหา"
+          no-nodes-label="ไม่มีข้อมูล"
           v-model:expanded="expanded"
         >
           <template v-slot:default-header="prop">
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
index a81fe9062..312972696 100644
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import config from "@/app.config";
 import http from "@/plugins/http";
-import { checkPermission } from "@/utils/permissions";
 
 /**
  * importType
@@ -31,8 +34,6 @@ import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuc
 /**
  * importStore
  */
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * ues
diff --git a/src/modules/16_positionEmployee/components/TreeView.vue b/src/modules/16_positionEmployee/components/TreeView.vue
deleted file mode 100644
index 2d4006df8..000000000
--- a/src/modules/16_positionEmployee/components/TreeView.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useStructureTree } from "@/stores/structureTree";
-
-/** importType*/
-import type {
-  OrgTree,
-  PosMaster,
-  Position,
-  PosMaster2,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
-
-/** importComponents*/
-import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
-import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
-
-/** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-
-/** use*/
-const store = usePositionEmp();
-const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-const route = useRoute();
-const { fetchStructureTree } = useStructureTree();
-const storeStructureTree = useStructureTree();
-
-const nodeTree = ref<OrgTree[]>([]); // ข้อมูล Tree
-const nodeId = ref<string>(""); // id ของ Tree
-const orgLevel = ref<number>(0); // levelTree
-const isLoad = ref<boolean>(false); // loadTable
-const isLoadTree = ref<boolean>(false); // loadTable
-const mainTree = ref<OrgTree>();
-const selected = ref<string>("");
-
-const reqMaster = reactive<FilterMaster>({
-  id: "",
-  type: 0,
-  isAll: false,
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  revisionId: "",
-});
-const totalPage = ref<number>(1);
-const action1 = ref<boolean>(false);
-const posMaster = ref<PosMaster2[]>([]);
-const shortName = ref<string>("");
-
-/**
- * function fetch ข้อมูลของ Tree
- * @param id id โครงสร้าง
- */
-async function fetchDataTree() {
-  isLoadTree.value = false;
-  const dataTree = await fetchStructureTree(route.meta.Key as string, true);
-  store.activeId = storeStructureTree.activeId;
-  if (dataTree) {
-    nodeTree.value = dataTree;
-    selected.value = "";
-    nodeId.value = "";
-    store.treeId = "";
-  }
-}
-
-/**
- * function fetch ข้อรายการตำแหน่ง
- * @param id  idTree
- * @param level  levelTree
- */
-function fetchDataTable(id: string, level: number, action: boolean) {
-  searchAndReplaceOrgName(nodeTree.value, id);
-  orgLevel.value = level;
-  reqMaster.id = id;
-  reqMaster.type = level;
-  action1.value = action;
-  if (action) {
-    setTimeout(() => {
-      action1.value = false;
-    }, 1000);
-    reqMaster.isAll = false;
-    reqMaster.page = 1;
-    reqMaster.pageSize = 10;
-    reqMaster.keyword = "";
-    reqMaster.revisionId = store.activeId;
-  }
-
-  if (action === true) {
-    isLoad.value = true;
-  }
-  http
-    .post(config.API.orgPosMasterListEmp, reqMaster)
-    .then(async (res) => {
-      posMaster.value = [];
-      const dataMain: PosMaster[] = [];
-      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
-      res.data.result.data.forEach((e: PosMaster) => {
-        const p = e.positions;
-        if (p.length !== 0) {
-          const a = p.find((el: Position) => el.positionIsSelected === true);
-          const { id, ...rest } = a ? a : p[0];
-          const test = { ...e, ...rest };
-          dataMain.push(test);
-        }
-      });
-      posMaster.value = await store.fetchPosMaster(dataMain);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      posMaster.value = [];
-    })
-    .finally(() => {
-      setTimeout(() => {
-        isLoad.value = false;
-      }, 500);
-    });
-}
-
-/**
- * ดึงข้อมูลสถิติจำนวนด้านบน
- */
-function getSummary() {
-  http
-    .post(config.API.orgSummaryEmp, {
-      id: reqMaster.id, //*Id node
-      type: reqMaster.type, //*ประเภทnode
-      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
-    })
-    .then(async (res: any) => {
-      const data = await res.data.result;
-      store.getSumPosition({
-        totalPosition: data.totalPosition,
-        totalPositionCurrentUse: data.totalPositionCurrentUse,
-        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalPositionNextUse: data.totalPositionNextUse,
-        totalPositionNextVacant: data.totalPositionNextVacant,
-        totalRootPosition: data.totalPosition,
-        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
-        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalRootPositionNextUse: data.totalPositionNextUse,
-        totalRootPositionNextVacant: data.totalPositionNextVacant,
-      });
-    });
-}
-
-/**
- * funcion ค้นหาข้อมูลใน Table
- */
-function filterKeyword() {
-  reqMaster.page = 1;
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-}
-
-/**
- * function ค้นหาชือ
- * @param data ข้อมูล Tree
- * @param targetId tree
- */
-function searchAndReplaceOrgName(data: any, targetId: string) {
-  for (const child of data) {
-    if (child.orgTreeId === targetId) {
-      mainTree.value = child;
-
-      return true; // Found the targetId in this level
-    }
-    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
-      return true; // Found the targetId in the nested children
-    }
-  }
-  return false; // Not found in this branch
-}
-
-/**
- * lifecycle Hook
- */
-onMounted(() => {
-  fetchDataTree();
-  // setTimeout(async () => {
-  //   store.activeId && (await );
-  // }, 200);
-});
-
-/**
- * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
- */
-watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-});
-
-/**
- *  callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด
- */
-watch(
-  () => reqMaster.isAll,
-  () => {
-    getSummary();
-    if (reqMaster.page !== 1) {
-      reqMaster.page = 1;
-    } else {
-      fetchDataTable(reqMaster.id, reqMaster.type, false);
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="col-12">
-    <q-card bordered class="col-12 row caedNone">
-      <div class="col-xs-12 col-sm-3 row">
-        <div class="col-12 row no-wrap bg-grey-1">
-          <TreeMain
-            v-model:nodeTree="nodeTree"
-            v-model:shortName="shortName"
-            v-model:nodeId="nodeId"
-            :fetchDataTree="fetchDataTree"
-            :fetchDataTable="fetchDataTable"
-          />
-
-          <div class="col-12 row">
-            <q-separator :vertical="!$q.screen.lt.md" />
-          </div>
-        </div>
-      </div>
-
-      <div class="col-xs-12 col-sm-9 q-pa-md row">
-        <div class="col-12 row">
-          <div
-            class="row col-12 justify-center"
-            v-if="isLoad"
-            style="height: 550px"
-          >
-            <div class="col-2">
-              <q-spinner color="primary" size="3em" />
-            </div>
-          </div>
-
-          <div v-else class="col-12 row">
-            <div class="col-12" v-if="nodeId !== ''">
-              <!-- summary -->
-              <q-card
-                bordered
-                v-if="nodeId"
-                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
-              >
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
-                  <q-space />
-                  <q-badge
-                    color="secondary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.total
-                        : store.sumPosition.totalRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
-                  <q-space />
-                  <q-badge
-                    color="primary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.use
-                        : store.sumPosition.useRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งว่าง</div>
-                  <q-space />
-                  <q-badge
-                    color="red"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.vacant
-                        : store.sumPosition.vacantRoot
-                    "
-                  />
-                </div>
-              </q-card>
-
-              <TreeTable
-                v-if="nodeId !== ''"
-                v-model:nodeTree="nodeTree"
-                v-model:orgLevel="orgLevel"
-                v-model:treeId="nodeId"
-                v-model:reqMaster="reqMaster"
-                v-model:totalPage="totalPage"
-                v-model:posMaster="posMaster"
-                :shortName="shortName"
-                :mainTree="mainTree"
-                :fetchDataTable="fetchDataTable"
-                :filterKeyword="filterKeyword"
-                :fetchDataTree="fetchDataTree"
-              />
-            </div>
-            <div class="row col-12 items-center" v-else>
-              <q-banner class="q-pa-lg col-12 text-center">
-                <q-icon
-                  name="mdi-hand-pointing-left"
-                  size="lg"
-                  color="primary"
-                />
-                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
-              </q-banner>
-            </div>
-          </div>
-        </div>
-      </div>
-    </q-card>
-  </div>
-</template>
-
-<style scoped>
-.list-summary .item {
-  border: 1px solid rgb(231, 231, 231);
-  border-radius: 4px;
-  background-color: white;
-}
-</style>
diff --git a/src/modules/16_positionEmployee/views/main.vue b/src/modules/16_positionEmployee/views/main.vue
index 9a9a0c6da..d1376e4e7 100644
--- a/src/modules/16_positionEmployee/views/main.vue
+++ b/src/modules/16_positionEmployee/views/main.vue
@@ -1,6 +1,210 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useStructureTree } from "@/stores/structureTree";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type {
+  OrgTree,
+  PosMaster,
+  Position,
+  PosMaster2,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+
 /** importComponents*/
-import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
+import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
+import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
+
+/** use*/
+const store = usePositionEmp();
+const $q = useQuasar();
+const { messageError } = useCounterMixin();
+const route = useRoute();
+const { fetchStructureTree } = useStructureTree();
+const storeStructureTree = useStructureTree();
+
+const nodeTree = ref<OrgTree[]>([]); // ข้อมูล Tree
+const nodeId = ref<string>(""); // id ของ Tree
+const orgLevel = ref<number>(0); // levelTree
+const isLoad = ref<boolean>(false); // loadTable
+const isLoadTree = ref<boolean>(false); // loadTable
+const mainTree = ref<OrgTree>();
+const selected = ref<string>("");
+
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: "",
+});
+const totalPage = ref<number>(1); //จำนวนหน้า
+const action1 = ref<boolean>(false);
+const posMaster = ref<PosMaster2[]>([]); //รายการตำแหน่ง
+const shortName = ref<string>(""); //ชื่อย่อย
+
+/**
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
+async function fetchDataTree() {
+  isLoadTree.value = false;
+  const dataTree = await fetchStructureTree(route.meta.Key as string, true);
+  store.activeId = storeStructureTree.activeId;
+  if (dataTree) {
+    nodeTree.value = dataTree;
+    selected.value = "";
+    nodeId.value = "";
+    store.treeId = "";
+  }
+}
+
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+function fetchDataTable(id: string, level: number, action: boolean) {
+  searchAndReplaceOrgName(nodeTree.value, id);
+  orgLevel.value = level;
+  reqMaster.id = id;
+  reqMaster.type = level;
+  action1.value = action;
+  if (action) {
+    setTimeout(() => {
+      action1.value = false;
+    }, 1000);
+    reqMaster.isAll = false;
+    reqMaster.page = 1;
+    reqMaster.pageSize = 10;
+    reqMaster.keyword = "";
+    reqMaster.revisionId = store.activeId;
+  }
+
+  if (action === true) {
+    isLoad.value = true;
+  }
+  http
+    .post(config.API.orgPosMasterListEmp, reqMaster)
+    .then(async (res) => {
+      posMaster.value = [];
+      const dataMain: PosMaster[] = [];
+      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      res.data.result.data.forEach((e: PosMaster) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = { ...e, ...rest };
+          dataMain.push(test);
+        }
+      });
+      posMaster.value = await store.fetchPosMaster(dataMain);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      setTimeout(() => {
+        isLoad.value = false;
+      }, 500);
+    });
+}
+
+/**
+ * ดึงข้อมูลสถิติจำนวนด้านบน
+ */
+function getSummary() {
+  http
+    .post(config.API.orgSummaryEmp, {
+      id: reqMaster.id, //*Id node
+      type: reqMaster.type, //*ประเภทnode
+      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    });
+}
+
+/**
+ * funcion ค้นหาข้อมูลใน Table
+ */
+function filterKeyword() {
+  reqMaster.page = 1;
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+}
+
+/**
+ * function ค้นหาชือ
+ * @param data ข้อมูล Tree
+ * @param targetId tree
+ */
+function searchAndReplaceOrgName(data: any, targetId: string) {
+  for (const child of data) {
+    if (child.orgTreeId === targetId) {
+      mainTree.value = child;
+
+      return true; // Found the targetId in this level
+    }
+    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
+      return true; // Found the targetId in the nested children
+    }
+  }
+  return false; // Not found in this branch
+}
+
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
+ */
+watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+});
+
+/**
+ *  callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด
+ */
+watch(
+  () => reqMaster.isAll,
+  () => {
+    getSummary();
+    if (reqMaster.page !== 1) {
+      reqMaster.page = 1;
+    } else {
+      fetchDataTable(reqMaster.id, reqMaster.type, false);
+    }
+  }
+);
+
+/**
+ * lifecycle Hook
+ */
+onMounted(() => {
+  fetchDataTree();
+});
 </script>
 
 <template>
@@ -13,7 +217,114 @@ import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
   <q-card flat bordered>
     <q-card class="my-card">
       <q-card-section style="padding: 0px">
-        <TreeView />
+        <div class="col-12">
+          <q-card bordered class="col-12 row caedNone">
+            <div class="col-xs-12 col-sm-3 row">
+              <div class="col-12 row no-wrap bg-grey-1">
+                <TreeMain
+                  v-model:node-tree="nodeTree"
+                  v-model:short-name="shortName"
+                  v-model:node-id="nodeId"
+                  :fetch-data-table="fetchDataTable"
+                  :fetch-data-tree="fetchDataTree"
+                />
+
+                <div class="col-12 row">
+                  <q-separator :vertical="!$q.screen.lt.md" />
+                </div>
+              </div>
+            </div>
+
+            <div class="col-xs-12 col-sm-9 q-pa-md row">
+              <div class="col-12 row">
+                <div
+                  class="row col-12 justify-center"
+                  v-if="isLoad"
+                  style="height: 550px"
+                >
+                  <div class="col-2">
+                    <q-spinner color="primary" size="3em" />
+                  </div>
+                </div>
+
+                <div v-else class="col-12 row">
+                  <div class="col-12" v-if="nodeId !== ''">
+                    <!-- summary -->
+                    <q-card
+                      bordered
+                      v-if="nodeId"
+                      class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
+                    >
+                      <div class="row col q-pa-sm item">
+                        <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                        <q-space />
+                        <q-badge
+                          color="secondary"
+                          :label="
+                            reqMaster.isAll
+                              ? store.sumPosition.total
+                              : store.sumPosition.totalRoot
+                          "
+                        />
+                      </div>
+                      <div class="row col q-pa-sm item">
+                        <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                        <q-space />
+                        <q-badge
+                          color="primary"
+                          :label="
+                            reqMaster.isAll
+                              ? store.sumPosition.use
+                              : store.sumPosition.useRoot
+                          "
+                        />
+                      </div>
+                      <div class="row col q-pa-sm item">
+                        <div class="ellipsis">ตำแหน่งว่าง</div>
+                        <q-space />
+                        <q-badge
+                          color="red"
+                          :label="
+                            reqMaster.isAll
+                              ? store.sumPosition.vacant
+                              : store.sumPosition.vacantRoot
+                          "
+                        />
+                      </div>
+                    </q-card>
+
+                    <TreeTable
+                      v-if="nodeId !== ''"
+                      v-model:node-tree="nodeTree"
+                      v-model:org-level="orgLevel"
+                      v-model:tree-id="nodeId"
+                      v-model:pos-master="posMaster"
+                      v-model:req-master="reqMaster"
+                      v-model:total-page="totalPage"
+                      :short-name="shortName"
+                      :main-tree="mainTree"
+                      :fetch-data-table="fetchDataTable"
+                      :fetch-data-tree="fetchDataTree"
+                      :filter-keyword="filterKeyword"
+                    />
+                  </div>
+                  <div class="row col-12 items-center" v-else>
+                    <q-banner class="q-pa-lg col-12 text-center">
+                      <q-icon
+                        name="mdi-hand-pointing-left"
+                        size="lg"
+                        color="primary"
+                      />
+                      <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
+                    </q-banner>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <!-- <TreeView /> -->
       </q-card-section>
     </q-card>
   </q-card>