diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 63b0fafbb..ad8973014 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -258,11 +258,11 @@ const menuList = readonly<any[]>([
         path: "placement",
         role: "placement",
       },
-      {
-        label: "การทดลองปฏิบัติหน้าที่ราชการ",
-        path: "probation",
-        role: "probation",
-      },
+      // {
+      //   label: "การทดลองปฏิบัติหน้าที่ราชการ",
+      //   path: "probation",
+      //   role: "probation",
+      // },
       {
         label: "รายการขอโอน",
         path: "transfer",
@@ -293,6 +293,11 @@ const menuList = readonly<any[]>([
         path: "appoint-employee",
         role: "placement",
       },
+      {
+        label: "ออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง",
+        path: "changePositions",
+        role: "placement",
+      },
       {
         label: "รายการอื่นๆ",
         path: "other",
@@ -300,6 +305,14 @@ const menuList = readonly<any[]>([
       },
     ],
   },
+  {
+    key: 81,
+    icon: "badge",
+    activeIcon: "badge",
+    label: "ทดลองปฏิบัติหน้าที่ราชการ",
+    path: "probation",
+    role: "probation",
+  },
   {
     key: 9,
     icon: "mdi-account-cancel-outline",
diff --git a/src/modules/05_placement/components/ChangePosition/DialogHeader.vue b/src/modules/05_placement/components/ChangePosition/DialogHeader.vue
new file mode 100644
index 000000000..a20e917b0
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/DialogHeader.vue
@@ -0,0 +1,29 @@
+<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/Main.vue b/src/modules/05_placement/components/ChangePosition/Main.vue
new file mode 100644
index 000000000..b12c08ce6
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/Main.vue
@@ -0,0 +1,378 @@
+<script setup lang="ts">
+import { ref, 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 SendToCommand from "@/modules/05_placement/components/ChangePosition/SendToCommand.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 $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();
+};
+
+//ปิด modal
+const clickClose = () => {
+  modal.value = false;
+};
+
+//เปิด modal
+const sendToCommand = () => {
+  modal.value = true;
+  filterKeyword2.value = "";
+  // fecthTypeOption();
+};
+
+//ดึงข้อมูล API
+const fecthLists = async () => {
+  // showLoader();
+  // rows.value = [];
+  // await http
+  //   .get(config.API.appointmentMain())
+  //   .then((res) => {
+  //     let response = res.data.result;
+  //     listRecevice.value = response;
+  //     rows.value = response;
+  //     rows2.value = rows.value.filter(
+  //       (e: any) => e.status !== "REPORT" && e.status !== "DONE"
+  //     );
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+
+  rows.value = [
+    {
+      id: "08dc86c2-98a5-45f0-8e37-3502a4eb78c0",
+      name: "ย้ายสับเปลี่ยนตำแหน่งทุกเขต",
+      status: "WAITTING",
+      createdAt: "2024-06-07T14:22:31.985829",
+    },
+  ];
+
+  rows2.value = rows.value.filter(
+    (e: any) => e.status !== "REPORT" && e.status !== "DONE"
+  );
+};
+
+// dialog สำหรับแก้ไข
+const openModaledit = (data: any) => {};
+
+// ฟังก์ชั่นสำหรับเพิ่มรอบการย้ายสับเปลี่ยนตำแหน่ง
+function addRound() {}
+
+//ลบข้อมูล
+const clickDelete = (id: string) => {
+  dialogRemove($q, () => {
+    //   showLoader();
+    //   http
+    //     .delete(config.API.appointmentDelete(id))
+    //     .then(() => {
+    //       success($q, "ลบข้อมูลสำเร็จ");
+    //     })
+    //     .catch((e) => {
+    //       messageError($q, e);
+    //     })
+    //     .finally(() => {
+    //       fecthLists();
+    //       hideLoader();
+    //     });
+  });
+};
+
+// ไปหน้ารายชื่อ
+const personalListPage = (id: string) => {
+  router.push({
+    path: `/change-positions/${id}`,
+  });
+};
+
+function onSave(data: any) {
+  // showLoader();
+  // http
+  //   .put(config.API.appointmentPosition(personalId.value), dataAppoint)
+  //   .then((res) => {
+  //     modalTree.value = false;
+  //     success($q, "บันทึกสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     fecthLists();
+  //     hideLoader();
+  //   });
+}
+
+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="ค้นหา"
+          >
+            <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="citizenId"
+            :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-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"
+                  @click="personalListPage(props.row.id)"
+                >
+                  <div v-if="col.name == 'no'">
+                    {{ 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-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-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"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/ChangePosition/Modal.vue b/src/modules/05_placement/components/ChangePosition/Modal.vue
new file mode 100644
index 000000000..560525358
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/Modal.vue
@@ -0,0 +1,715 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref, watch } from "vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/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
+          title="เลือกหน่วยงานที่แต่งตั้ง - เลื่อน"
+          :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
new file mode 100644
index 000000000..6f89b4b7a
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue
@@ -0,0 +1,402 @@
+<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,
+} = mixin;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+//เรียกข้อมูลตาม id
+const fecthappointmentByid = async () => {
+  showLoader();
+  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 ?? "-"} ${
+        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.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      posNo.value = data.positionNumberOld;
+      salary.value = data.salary ?? 0;
+      reason.value = data.reason;
+      date.value = data.positionDate;
+      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,
+        positionNumberOld: posNo.value,
+        amountOld: salary.value.toString().replace(/,/g, ""),
+        reason: reason.value,
+        positionDate: date.value,
+      };
+      showLoader();
+      http
+        .put(config.API.appointmentByid(paramsId.toString()), data)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          fecthappointmentByid();
+          edit.value = false;
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+}
+const cancel = () => {
+  edit.value = false;
+  fecthappointmentByid();
+  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 fecthappointmentByid();
+});
+</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/08dc86c2-98a5-45f0-8e37-3502a4eb78c0s`)
+      "
+    />
+    รายละเอียดผู้ที่ย้ายสับเปลี่ยนตำแหน่ง {{ 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"
+    >
+      <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="inputgreen"
+              />
+            </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
new file mode 100644
index 000000000..52014fd22
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/PersonalList.vue
@@ -0,0 +1,598 @@
+<script setup lang="ts">
+import { ref, 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 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";
+
+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 router = useRouter();
+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",
+  "dateOfBirth",
+  "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: "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: "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: "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();
+};
+
+//ปิด modal
+const clickClose = () => {
+  modal.value = false;
+};
+
+// เพิ่มรายชื่อเพื่อย้ายสับเปลี่ยนตำแหน่ง
+const addPerson = () => {};
+
+//ดึงข้อมูล API
+const fecthLists = async () => {
+  // showLoader();
+  // rows.value = [];
+  // await http
+  //   .get(config.API.appointmentMain())
+  //   .then((res) => {
+  //     let response = res.data.result;
+  //     rows.value = response;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+
+  rows.value = [
+    {
+      id: "08dc7e02-08ff-4cb3-85a7-3feb2a38614d",
+      profileId: "1526d9d3-d8b1-43ab-81b5-a84dfbe99511",
+      prefix: "นางสาว",
+      firstName: "นิรมล",
+      lastName: "เต็มเปี่ยม",
+      citizenId: "3140700369248",
+      dateOfBirth: "1975-12-06T17:00:00",
+      root: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      rootId: "3084a630-4715-413d-98ab-0ba59c5c115e",
+      rootShortName: "สกก.",
+      child1: "กองสรรหาบุคคล",
+      child1Id: "2e49b10a-1a59-41ec-8b62-98c301af39e3",
+      child1ShortName: "กสบ.",
+      child2: null,
+      child2Id: null,
+      child2ShortName: null,
+      child3: null,
+      child3Id: null,
+      child3ShortName: null,
+      child4: null,
+      child4Id: null,
+      child4ShortName: null,
+      orgRevisionId: "7cf4b332-694a-498b-8af2-d1b86d667506",
+      positionId: "c905cfb7-63f5-4e9e-a1f4-e7a709d018f3",
+      posMasterNo: 1,
+      position: null,
+      positionField: null,
+      posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08081",
+      posTypeName: "อำนวยการ",
+      posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe09262",
+      posLevelName: "ต้น",
+      node: 1,
+      nodeName: "กองสรรหาบุคคล",
+      nodeId: "2e49b10a-1a59-41ec-8b62-98c301af39e3",
+      nodeShortName: "กสบ.",
+      rootOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      rootOldId: "3084a630-4715-413d-98ab-0ba59c5c115e",
+      rootShortNameOld: "สกก.",
+      child1Old: null,
+      child1OldId: null,
+      child1ShortNameOld: null,
+      child2Old: null,
+      child2OldId: null,
+      child2ShortNameOld: null,
+      child3Old: null,
+      child3OldId: null,
+      child3ShortNameOld: null,
+      child4Old: null,
+      child4OldId: null,
+      child4ShortNameOld: null,
+      posMasterNoOld: 12,
+      posTypeOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
+      posTypeNameOld: "วิชาการ",
+      posLevelOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08662",
+      posLevelNameOld: "ชำนาญการ",
+      status: "PENDING",
+      amount: null,
+      reportingDate: "2024-06-05T02:55:48.319",
+      isActive: true,
+      positionDate: "2018-06-11T02:56:00",
+      reason: "1",
+      educationOld: "-",
+      salary: 10000,
+      positionTypeOld: "วิชาการ",
+      positionLevelOld: "ชำนาญการ",
+      positionNumberOld: "12",
+      organizationPositionOld:
+        "นักวิชาการเงินและบัญชี-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      amountOld: 10000,
+      organizationOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      posmasterId: "bb753819-357b-4d12-a445-c93c2bc67096",
+      positionOld: "นักวิชาการเงินและบัญชี",
+      createdAt: "2024-05-27T11:03:58.545266",
+      typeCommand: "MOVE",
+    },
+    {
+      id: "08dc7b99-239c-4ae0-8246-45dbb2059fa4",
+      profileId: "1526d9d3-d8b1-43ab-81b5-a84dfbe99500",
+      prefix: "นาย",
+      firstName: "ณัฐพงศ์",
+      lastName: "ดิษยบุตร",
+      citizenId: "3100903812600",
+      dateOfBirth: "1964-05-13T17:00:00",
+      root: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      rootId: "3084a630-4715-413d-98ab-0ba59c5c115e",
+      rootShortName: "สกก.",
+      child1: null,
+      child1Id: null,
+      child1ShortName: null,
+      child2: null,
+      child2Id: null,
+      child2ShortName: null,
+      child3: null,
+      child3Id: null,
+      child3ShortName: null,
+      child4: null,
+      child4Id: null,
+      child4ShortName: null,
+      orgRevisionId: "7cf4b332-694a-498b-8af2-d1b86d667506",
+      positionId: "2f12e761-a0ee-45a9-8b96-7ad88f297660",
+      posMasterNo: 1,
+      position: null,
+      positionField: null,
+      posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08091",
+      posTypeName: "บริหาร",
+      posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe09362",
+      posLevelName: "สูง",
+      node: 0,
+      nodeName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      nodeId: "3084a630-4715-413d-98ab-0ba59c5c115e",
+      nodeShortName: "สกก.",
+      rootOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      rootOldId: "3084a630-4715-413d-98ab-0ba59c5c115e",
+      rootShortNameOld: "สกก.",
+      child1Old: null,
+      child1OldId: null,
+      child1ShortNameOld: null,
+      child2Old: null,
+      child2OldId: null,
+      child2ShortNameOld: null,
+      child3Old: null,
+      child3OldId: null,
+      child3ShortNameOld: null,
+      child4Old: null,
+      child4OldId: null,
+      child4ShortNameOld: null,
+      posMasterNoOld: 1,
+      posTypeOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08091",
+      posTypeNameOld: "บริหาร",
+      posLevelOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe09362",
+      posLevelNameOld: "สูง",
+      status: "PENDING",
+      amount: null,
+      reportingDate: "2024-05-24T05:01:11.455",
+      isActive: true,
+      positionDate: "2024-05-07T02:31:00",
+      reason: null,
+      educationOld: "-",
+      salary: 10,
+      positionTypeOld: "บริหาร",
+      positionLevelOld: "ต้น",
+      positionNumberOld: "1",
+      organizationPositionOld:
+        "นักบริหาร-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/",
+      amountOld: 10,
+      organizationOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/",
+      posmasterId: "74a4ab16-1958-4e7b-b807-a39d8b15472d",
+      positionOld: "นักบริหาร",
+      createdAt: "2024-05-24T09:28:03.669054",
+      typeCommand: "APPOINT",
+    },
+  ];
+};
+
+// เปิดโครงสร้าง
+const openModalTree = (data: any, type: string) => {
+  personalId.value = data.id;
+  modalTree.value = true;
+  typeModal.value = type;
+  dataRows.value = data;
+  posType.value = data.posTypeNameOld;
+  posLevel.value = data.positionLevelOld;
+  position.value = data.positionOld;
+};
+//เบข้อมูล
+const clickDelete = (id: string) => {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.appointmentDelete(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.appointmentPosition(personalId.value), dataAppoint)
+  //   .then((res) => {
+  //     modalTree.value = false;
+  //     success($q, "บันทึกสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     fecthLists();
+  //     hideLoader();
+  //   });
+}
+
+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="ค้นหา"
+          >
+            <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="citizenId"
+            :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-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'">
+                    {{ 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-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"
+  />
+</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
new file mode 100644
index 000000000..e71e0ff17
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/SendToCommand.vue
@@ -0,0 +1,298 @@
+<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 "@/modules/05_placement/components/AppointMent/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 title="ส่งไปออกคำสั่ง" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <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-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="sendToCommand"
+          color="public"
+          :disable="checkSelected"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index c9b71e6de..427dc7df5 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -39,14 +39,25 @@ const FormEvaluateScoreAdd = () =>
   import(
     "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue"
   );
-const FormSaveResultAddCommander = () => import("./components/probation/FormEvaluation/FormSaveResultAddCommander.vue")
+const FormSaveResultAddCommander = () =>
+  import(
+    "./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 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 receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
@@ -59,15 +70,27 @@ const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
 
 //แต่งตั้ง-เลื่อน
-const AppointmentMain = () => import("@/modules/05_placement/components/AppointMent/Main.vue");
-const AppointmentDetail = () => import("@/modules/05_placement/components/AppointMent/Detail.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 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");
+const OtherMain = () =>
+  import("@/modules/05_placement/components/Other/Main.vue");
+const OthertDetail = () =>
+  import("@/modules/05_placement/components/Other/Detail.vue");
 
+const ChangePositionMain = () =>
+  import("@/modules/05_placement/components/ChangePosition/Main.vue");
+const ChangePersonalList = () =>
+  import("@/modules/05_placement/components/ChangePosition/PersonalList.vue");
+const ChangePersonalDetail = () =>
+  import("@/modules/05_placement/components/ChangePosition/PersonalDetail.vue");
 
 export default [
   {
@@ -336,16 +359,17 @@ export default [
     component: OtherMain,
     meta: {
       Auth: true,
-      Key: [6.10],
+      Key: [6.1],
       Role: "placement",
     },
-  }, {
+  },
+  {
     path: "/relocation",
     name: "relocation",
     component: relocation,
     meta: {
       Auth: true,
-      Key: [6.10],
+      Key: [6.1],
       Role: "placement",
     },
   },
@@ -358,7 +382,8 @@ export default [
       Key: [6.9],
       Role: "placement",
     },
-  }, {
+  },
+  {
     path: "/relocation/detail/:id",
     name: "relocationId",
     component: relocationbyId,
@@ -368,4 +393,34 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/change-positions",
+    name: "changePositions",
+    component: ChangePositionMain,
+    meta: {
+      Auth: true,
+      Key: [6.4],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/change-positions/:id",
+    name: "changePersonalList",
+    component: ChangePersonalList,
+    meta: {
+      Auth: true,
+      Key: [6.4],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/change-positions/personal/:id",
+    name: "changePersonalId",
+    component: ChangePersonalDetail,
+    meta: {
+      Auth: true,
+      Key: [6.4],
+      Role: "placement",
+    },
+  },
 ];