From 62a8fa99139eff00b6c0d41d3921b348a2ea948d Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 15 Aug 2023 13:59:38 +0700
Subject: [PATCH] no message

---
 .../components/Relocation/RelocationMain.vue  | 723 ++++++++++++++++
 .../components/Relocation/RelocationModal.vue | 799 ++++++++++++++++++
 .../components/Relocation/RelocationbyId.vue  | 508 +++++++++++
 .../interface/response/Relocation.ts          |  38 +
 4 files changed, 2068 insertions(+)
 create mode 100644 src/modules/05_placement/components/Relocation/RelocationMain.vue
 create mode 100644 src/modules/05_placement/components/Relocation/RelocationModal.vue
 create mode 100644 src/modules/05_placement/components/Relocation/RelocationbyId.vue
 create mode 100644 src/modules/05_placement/interface/response/Relocation.ts

diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
new file mode 100644
index 000000000..1f84c5212
--- /dev/null
+++ b/src/modules/05_placement/components/Relocation/RelocationMain.vue
@@ -0,0 +1,723 @@
+<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";
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+import type { relocationType } from "@/modules/05_placement/interface/response/Relocation";
+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 getSelectedString = computed(() => {
+  return selected.value.length === 0
+    ? ''
+    : `${selected.value.length} record${
+        selected.value.length > 1 ? 's' : ''
+      } selected of ${rows.value.length}`;
+});
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
+
+const modal = ref<boolean>(false);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
+  "btn",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<relocationType[]>([]);
+const rows2 = ref<any>([
+  {
+    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
+    fullname: "นางสาวอย พชช",
+    position: "นักบริหาร",
+    positionLevel: "ต้น",
+    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+    agency: "กลุ่มงานกุมารเวชกรรม",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    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: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    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",
+  },
+  {
+    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: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    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: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    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",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    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;
+  console.log(personalId.value);
+
+  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;
+      console.log("data==>", data);
+      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: item.dateOfBirth,
+        gender: item.gender,
+        status: 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: item.createdAt,
+      }));
+      console.log(rows.value);
+    })
+    .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((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      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((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+
+const clickDelete = async (name: string, id: string) => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูลของ ${name}`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await deleteData(id),
+    async () => await getData()
+  );
+};
+const closeModalTree = async () => {
+  await getData();
+  modalTree.value = false;
+};
+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">
+    <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"
+          >
+            <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="fullname"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.fullname !== null ? props.row.fullname : "-" }}
+                </q-td>
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.position !== null ? props.row.position : "-" }}
+                </q-td>
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{
+                    props.row.positionLevel !== null
+                      ? props.row.positionLevel
+                      : "-"
+                  }}
+                </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
+                    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 title="ส่งไปออกคำสั่งย้าย" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <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="personalId"
+          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
+                :key="props.id"
+                  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="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+              </q-td>
+              <q-td key="statusText" :props="props">
+                {{ props.row.statusText }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </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
new file mode 100644
index 000000000..89208163a
--- /dev/null
+++ b/src/modules/05_placement/components/Relocation/RelocationModal.vue
@@ -0,0 +1,799 @@
+<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 } = 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) {
+  // console.log(obj);
+  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 () => {
+  console.log("save", dataForm);
+
+  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,
+      };
+      console.log("save appoint===>", dataAppoint);
+      showLoader();
+      await http
+        .put(config.API.receivePosition(id.value), dataAppoint)
+        .then((res) => {
+          console.log("respone=>", res);
+          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) => {
+  console.log("selecteds", data);
+  if (data.name == null && selected.value != data.keyId) {
+    // console.log("selecteds", data);
+
+    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 = "";
+  }
+  console.log("dataForm", dataForm);
+};
+
+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;
+  console.log(props.personal);
+
+  if (dataPersonal) {
+    dataPersonal.map((data: any) => {
+      personal.value = data;
+    });
+    console.log("personal", personal.value);
+  }
+  // console.log("draft===>", personal.value.draft);
+
+  if (personal.value) {
+    // const findData = dataRespone.value.find(findByPerson);
+    let findData: any = null;
+    dataRespone.value.map((x: any) => {
+      findData = findByPerson(x);
+      // console.log(findData);
+
+      if (findData != null) {
+        // console.log("findData===>", findData);
+        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 {
+  // console.log("searchTree element===>", element)
+  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 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>
+
+                            <!--แสดง 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
+                            lazy-rules
+                            :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/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
new file mode 100644
index 000000000..7cf80c7e8
--- /dev/null
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -0,0 +1,508 @@
+<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 keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+// import type {
+//   TypeFile,
+//   ResponseDataDetail,
+// } from "@/modules/05_placement/interface/response/Transfer";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const edit = ref<boolean>(false);
+const personId = route.params.id as string;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = 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 id = ref<string>("");
+const prefix = ref<string>("");
+const firstName = ref<string>("");
+const lastName = ref<string>("");
+const position = ref<string>("");
+const posNo = ref<string>("");
+const positionLevel = 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 salary = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = 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(personId))
+    .then((res: any) => {
+      const data = res.data.result;
+      fullname.value = `${data.firstname} ${data.lastname}`
+      prefix.value = data.prefix;
+      firstName.value = data.firstname;
+      lastName.value = data.lastname;
+      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;
+      salary.value = data.salary;
+      positionTypeOld.value = data.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      positionNumberOld.value = data.positionNumberOld;
+      organizationPositionOld.value = data.organizationPositionOld;
+      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) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.transferId(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+// const confirmMessage = async () => {
+//     dialogMessage(
+//       $q,
+//       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+//       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+//       "mdi-help-circle-outline",
+//       "ยืนยัน",
+//       "primary",
+//       () => sendConfirm(),
+//       undefined
+//     );
+//   };
+// const sendConfirm = async () => {
+//     showLoader();
+//     await http
+//       .get(config.API.transferConfirmId(personId.toString()))
+//       .then((res: any) => {
+//         //   const data = res.data.result;
+//         //   console.log(data);
+//         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+//       })
+//       .catch((e) => {
+//         messageError($q, e);
+//       })
+//       .finally(async () => {
+//         await getData();
+//         hideLoader();
+//       });
+//   };
+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="router.push(`/registry/${personId}`)"
+        />
+      </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 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="edit = !edit"
+          />
+        </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-12 row items-center">
+              <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="posNo"
+                  :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="salary"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  hide-bottom-space
+                  :label="`${'เงินเดือน'}`"
+                  type="number"
+                />
+              </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-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
+                      lazy-rules
+                      :borderless="!edit"
+                      :model-value="date !== null ? date2Thai(date) : null"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      hide-bottom-space
+                      :label="`${'ตั้งแต่วัน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          :style="
+                            edit
+                              ? 'color: var(--q-primary)'
+                              : 'color: var(--q-grey)'
+                          "
+                        >
+                        </q-icon>
+                      </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"
+                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+                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>
+  
\ No newline at end of file
diff --git a/src/modules/05_placement/interface/response/Relocation.ts b/src/modules/05_placement/interface/response/Relocation.ts
new file mode 100644
index 000000000..4972a366f
--- /dev/null
+++ b/src/modules/05_placement/interface/response/Relocation.ts
@@ -0,0 +1,38 @@
+interface relocationType {
+    no:number,
+    id: string,
+    citizenId: "0000000000005",
+    prefix: string,
+    firstname: string,
+    lastname: string,
+    dateOfBirth: Date,
+    gender: string,
+    status: string,
+    recruitDate: Date,
+    positionNumber: number,
+    positionPath: string,
+    positionPathSide: string,
+    positionType: string,
+    positionLine: string,
+    positionLevel: string,
+    posNoId: string,
+    positionId: string,
+    positionPathSideId: string,
+    positionTypeId: string,
+    positionLineId: string,
+    positionLevelId: string,
+    organizationPositionId: string,
+    organizationName: string,
+    organizationShortName: string,
+    isActive: boolean,
+    reason: string,
+    educationOld: string,
+    salary: number,
+    positionTypeOld: string,
+    positionLevelOld: string,
+    positionNumberOld: string,
+    organizationPositionOld: string,
+    createdAt: Date
+}
+
+export type { relocationType};
\ No newline at end of file