From 6fbc73300c5d597560d548c50f616745c63689de Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 10 Aug 2023 17:02:08 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD=E0=B8=99?=
 =?UTF-8?q?=20api=20=20=E0=B8=95=E0=B9=88=E0=B8=AD=E0=B9=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B9=89=E0=B8=A7,=E0=B8=94=E0=B8=B2=E0=B8=95=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=B1=E0=B8=87=E0=B9=84=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  45 ++--
 .../components/OrderPlacement/step/step02.vue |  41 +--
 .../components/Transfer/transferMain.vue      | 237 ++++++------------
 .../components/Transfer/transferRegistry.vue  | 223 ++++++++++------
 .../interface/response/Transfer.ts            |  38 +++
 5 files changed, 307 insertions(+), 277 deletions(-)
 create mode 100644 src/modules/05_placement/interface/response/Transfer.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index b9cc81f9b..b29f33155 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -3,6 +3,7 @@ const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
 const order = `${env.API_PLACEMENT_URI}`;
 const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
+const transfer = `${placement}/transfer`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -63,47 +64,37 @@ export default {
   nextStep: (orderId: string) => `${order}/order/next/${orderId}`,
   prevStep: (orderId: string) => `${order}/order/prev/${orderId}`,
   executeOrder: (orderId: string) => `${order}/order/execute/${orderId}`,
-
   createOrder: () => `${order}/order/detail`,
-
   examroundOrder: () => `${order}/order/detail/exam-round`,
-
-  //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
-  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`,
-  personsselectedOrder: (orderId: string) => `${order}/order/persons-selected/${orderId}`,
-
-  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
-  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`,
-  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
-  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`,
-
-  //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
-  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`,
-  //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
+  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`, //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
+  personsselectedOrder: (orderId: string) =>
+    `${order}/order/persons-selected/${orderId}`,
+  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`, //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`, //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`, //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
   swapDownOrder: (personalId: string) =>
-    `${order}/order/swap/down/${personalId}`,
-
-  //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
-  salaryOrder: (id: string) => `${order}/order/salary/${id}`,
-
-  // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
-  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`,
-
+    `${order}/order/swap/down/${personalId}`, //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
+  salaryOrder: (id: string) => `${order}/order/salary/${id}`, //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
+  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`, // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
   copyOrder: `${order}/order/copy-order`,
-
   copyOrderId: (id: string) => `${order}/order/copy-order/${id}`,
-
   attachmentId: (id: string) => `${order}/order/attachment/${id}`,
-
   attachmentOrderId: (orderId: string) =>
     `${order}/order/attachment/order-file/${orderId}`,
   attachmentFileId: (orderId: string) =>
     `${order}/order/attachment/file/${orderId}`,
-
   orderReady: (id: string) => `${order}/order/ready/${id}`,
   attachmentOrder: (orderId: string) => `${order}/order/attachment/${orderId}`,
 
+  //receive ระบบรับโอน
   receiveData: () => `${receive}`,
   receiveDataId: (id: string) => `${receive}/${id}`,
   receivePosition: (id: string) => `${receive}/position/${id}`,
+
+  //tranfer ระบบคำขอโอน
+  transfer,
+  transferId: (id: string) => `${transfer}/${id}`,
+  transferUser: `${transfer}/user`,
+  transferUserId: (id: string) => `${transfer}/user/${id}`,
+  transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index a64b88f85..34b0634df 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -372,7 +372,6 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const selected = ref<ResponseData[]>([]);
-const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -602,7 +601,14 @@ const putSalary = async (salary: any) => {
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    await fetchaddlist(orderId.value);
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
   } else await conditionData();
 };
 const fetchaddlist = async (id: string) => {
@@ -656,18 +662,25 @@ const saveModalAdd = () => {
   }
 };
 const addlist = async (data: Object) => {
-  await http
-    .post(config.API.personsOrder(orderId.value), data)
-    .then(() => {
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      modalAddChange();
-    });
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await http
+      .post(config.API.personsOrder(id), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
 };
 
 const click = (e: any) => {
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
index 78bd3f03a..fb15a19aa 100644
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -1,38 +1,32 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+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 http from "@/plugins/http";
+import config from "@/app.config";
+
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
 const selected = ref([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
   }
 });
-const clickClose = () => {
-  modal.value = false;
-};
 
 const $q = useQuasar();
-const modal = ref<boolean>(false);
-const popup = () => {
-  modal.value = true;
-};
 const router = useRouter();
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+const mixin = useCounterMixin();
+
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+
+const modal = ref<boolean>(false);
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -63,53 +57,7 @@ const resetFilter = () => {
 // const nextPage = (id:string) => {
 //   router.push("/retirement/resign/"+id);
 // };
-const rows = ref<any>([
-  {
-    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-ae3d-4b8c-8cf0-b86b5a2ed8bb",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-]);
+const rows = ref<ResponseData[]>([]);
 const rows2 = ref<any>([
   {
     personalId: "0a846508-4932-40de-9a9e-5b519492217c",
@@ -287,6 +235,49 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transfer)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: new Date(),
+          date: new Date(),
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          organization: r.organization ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          posNo: r.posNo ?? "",
+          position: r.position ?? "",
+          positionLevel: r.positionLevel ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          reason: r.id ?? "",
+          salary: r.salary !== null ? r.salary : 0,
+          status: r.status ?? "",
+        });
+      });
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
@@ -296,7 +287,7 @@ const columns2 = ref<QTableProps["columns"]>([
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="popup()"
+            @click="openModal"
             size="14px"
             flat
             round
@@ -346,20 +337,12 @@ const columns2 = ref<QTableProps["columns"]>([
         </div>
 
         <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
+          <d-table
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="fullname"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
+            row-key="id"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -372,7 +355,7 @@ const columns2 = ref<QTableProps["columns"]>([
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="router.push(`/transfer/${props.row.personalId}`)"
+                @click="router.push(`/transfer/${props.row.id}`)"
               >
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
@@ -397,19 +380,7 @@ const columns2 = ref<QTableProps["columns"]>([
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
+          </d-table>
         </div>
       </div>
     </div>
@@ -417,7 +388,7 @@ const columns2 = ref<QTableProps["columns"]>([
 
   <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="clickClose" />
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
@@ -432,15 +403,15 @@ const columns2 = ref<QTableProps["columns"]>([
                 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>
+                <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"
@@ -461,26 +432,17 @@ const columns2 = ref<QTableProps["columns"]>([
           </div>
         </div>
 
-        <q-table
-          ref="tableRef"
+        <d-table
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
           row-key="personalId"
-          flat
-          bordered
-          :paging="true"
-          dense
           class="custom-header-table"
           :visible-columns="visibleColumns2"
-          :pagination-label="paginationLabel"
           selection="multiple"
-          v-model:pagination="pagination"
           v-model:selected="selected"
-
         >
-
-        <template v-slot:header-selection="scope">
+          <template v-slot:header-selection="scope">
             <q-checkbox
               keep-color
               color="primary"
@@ -497,10 +459,7 @@ const columns2 = ref<QTableProps["columns"]>([
             />
           </template> -->
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-            >
+            <q-tr :props="props" class="cursor-pointer">
               <q-td>
                 <q-checkbox
                   keep-color
@@ -532,18 +491,7 @@ const columns2 = ref<QTableProps["columns"]>([
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
@@ -557,35 +505,4 @@ const columns2 = ref<QTableProps["columns"]>([
     </q-card>
   </q-dialog>
 </template>
-<style scoped lang="scss">
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 382717fb1..2ea3c3c63 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -35,19 +35,25 @@
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">{{ position }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.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">{{ level }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.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">{{ institution }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
           </div>
         </div>
       </div>
@@ -59,16 +65,17 @@
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
       <q-space />
       <q-btn
-      v-if="!roleAdmin"
+        v-if="!roleAdmin"
         outline
         color="primary"
         dense
         icon-right="arrow_forward"
         class="q-px-sm"
         label="ส่งคำร้องไปยัง สกจ."
+        @click="confirmMessage"
       />
       <q-btn
-      v-else
+        v-else
         outline
         color="primary"
         dense
@@ -83,13 +90,17 @@
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
-            <div class="col-12 text-detail">{{ organization }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organization }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
-            <div class="col-12 text-detail">{{ reason }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
           </div>
         </div>
       </div>
@@ -102,12 +113,10 @@
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="col-12">
-      <q-table
-        flat
-        bordered
+      <d-table
         :rows="rows"
         :columns="columns"
-        row-key="name"
+        row-key="fileName"
         hide-header
         hide-bottom
       >
@@ -116,40 +125,56 @@
             <q-td key="no" :props="props">
               {{ props.rowIndex + 1 }}
             </q-td>
-            <q-td key="noteTitle" :props="props">
-              {{ props.row.noteTitle }}
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
             </q-td>
             <q-td key="btnMicrosoft" :props="props">
-              <q-btn flat
-								dense
-								round
-                color="red" 
-                icon="picture_as_pdf">
+              <q-btn flat dense round color="red" icon="picture_as_pdf">
                 <q-tooltip>ไฟล์ PDF</q-tooltip>
               </q-btn>
-              <q-btn flat
-								dense
-								round
-                color="blue" 
-                icon="mdi-file-word">
+              <q-btn flat dense round color="blue" icon="mdi-file-word">
                 <q-tooltip>ไฟล์ WORD</q-tooltip>
               </q-btn>
             </q-td>
           </q-tr>
         </template>
-      </q-table>
+      </d-table>
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
+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";
 
-let roleAdmin = ref<boolean>(false);
+import type { QTableProps } 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 personId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const roleAdmin = ref<boolean>(false);
+
 const name = ref<string>("นายสมคิด ยอดใจ");
 const position = ref<string>("นักจัดการงานทั่วไป");
 const level = ref<string>("ชำนาญการพิเศษ");
@@ -157,17 +182,23 @@ const institution = ref<string>("ฝ่ายบริหารงานทั
 const status = ref<string>("อยู่ระหว่างการทดลองงาน");
 const organization = ref<string>("ก.ก.");
 const reason = ref<string>("เพราะxxx");
-const route = useRoute();
-const personId = route.params.id;
-const rows = [
-  {
-    noteTitle: "ชื่อเอกสาร",
-  },
-  {
-    noteTitle: "ชื่อเอกสาร",
-  },
-];
-const columns = [
+
+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",
@@ -178,11 +209,11 @@ const columns = [
     style: "font-size: 14px",
   },
   {
-    name: "noteTitle",
+    name: "fileName",
     align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ชื่อไฟล์",
     sortable: true,
-    field: "noteTitle",
+    field: "fileName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -195,14 +226,84 @@ const columns = [
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-];
+]);
 
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
-      roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-      console.log("roleAdmin===>", roleAdmin.value);
-    }
-  });
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transferUserId(personId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+        rows.value = list;
+        responseData.value.createdAt = data.createdAt;
+        responseData.value.date = new Date();
+        responseData.value.id = data.id ?? "";
+        responseData.value.organization = data.organization ?? "";
+        responseData.value.organizationPositionOld =
+          data.organizationPositionOld ?? "";
+        responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+        responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+        responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+        responseData.value.reason = data.reason ?? "";
+        responseData.value.salary = data.salary !== null ? data.salary : 0;
+        responseData.value.status = data.status ?? "";
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      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();
+    });
+};
 </script>
 <style lang="scss" scope>
 .q-img {
@@ -217,34 +318,4 @@ onMounted(async () => {
 .text-detail {
   font-weight: 500;
 }
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
 </style>
diff --git a/src/modules/05_placement/interface/response/Transfer.ts b/src/modules/05_placement/interface/response/Transfer.ts
new file mode 100644
index 000000000..19a1523a9
--- /dev/null
+++ b/src/modules/05_placement/interface/response/Transfer.ts
@@ -0,0 +1,38 @@
+interface ResponseData {
+  createdAt: Date;
+  date: Date;
+  id: string;
+  isActive: boolean;
+  organization: string;
+  organizationPositionOld: string;
+  posNo: string;
+  position: string;
+  positionLevel: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+}
+
+interface TypeFile {
+  fileName: string;
+  pathName: string;
+}
+
+interface ResponseDataDetail {
+  createdAt: Date;
+  date: Date;
+  id: string;
+  organization: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+}
+
+export type { ResponseData, ResponseDataDetail, TypeFile };