diff --git a/src/modules/05_placement/components/Transfer/Dialogbody.vue b/src/modules/05_placement/components/Transfer/Dialogbody.vue
new file mode 100644
index 000000000..af86c1c37
--- /dev/null
+++ b/src/modules/05_placement/components/Transfer/Dialogbody.vue
@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const selected = ref<ResponseData[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
+  "dateText",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const props = defineProps({
+  Modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2:String,
+});
+
+
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
+}
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.transferReport, body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งโอนออกสำเร็จ");
+      props.closeModal?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      props.getData?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+    emit("update:filterKeyword2", "");
+};
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="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"
+                :model-value="filterKeyword2" 
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="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="dateText" :props="props">
+                {{ props.row.dateText }}
+              </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>
+</template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
index 76d6ff010..c1323d044 100644
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -1,26 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
-
+import Dialogbody from "@/modules/05_placement/components/Transfer/Dialogbody.vue";
 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<ResponseData[]>([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -30,6 +19,14 @@ const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
 const { statusText } = transferStore;
 
 const modal = ref<boolean>(false);
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
+
+ //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -40,31 +37,14 @@ const visibleColumns = ref<string[]>([
   "statustext",
   "dateText",
 ]);
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "statustext",
-  "dateText",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-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<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const filters = ref<ResponseData[]>([]);
+// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -154,105 +134,16 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateText",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "dateText",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
+
 
 const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
+const closeModal = () => {
+  modal.value = false
+  filterKeyword2.value = ""
+};
 
-onMounted(async () => {
-  await getData();
-});
 
+// เปิดโมเดล
 const openModalOrder = () => {
   openModal();
   const row = filters.value.filter(
@@ -261,7 +152,7 @@ const openModalOrder = () => {
   );
   rows2.value = row;
 };
-
+// เรียกข้อมูล api
 const getData = async () => {
   showLoader();
   await http
@@ -308,29 +199,9 @@ const getData = async () => {
     });
 };
 
-const saveOrder = async () => {
-  const id = selected.value.map((r) => r.id);
-  const body = {
-    id,
-  };
-
-  showLoader();
-  await http
-    .post(config.API.transferReport, 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();
-    });
-};
+onMounted(async () => {
+  await getData();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
@@ -425,17 +296,11 @@ const saveOrder = async () => {
                 <q-td key="organizationPositionOld" :props="props">
                   <div class="table_ellipsis">
                     {{ props.row.organizationPositionOld }}
-                    <!-- <q-tooltip>
-                      {{ props.row.organizationPositionOld }}
-                    </q-tooltip> -->
                   </div>
                 </q-td>
                 <q-td key="organization" :props="props">
                   <div class="table_ellipsis">
                     {{ props.row.organization }}
-                    <!-- <q-tooltip>
-                      {{ props.row.organization }}
-                    </q-tooltip> -->
                   </div>
                 </q-td>
                 <q-td key="dateText" :props="props">
@@ -452,122 +317,12 @@ const saveOrder = async () => {
     </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="id"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
-              </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="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="dateText" :props="props">
-                {{ props.row.dateText }}
-              </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>
+  <Dialogbody
+    v-model:Modal="modal"
+    :closeModal="closeModal"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :getData="getData"
+  />
 </template>
 <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 ac49d1b4b..a0ee73414 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -1,3 +1,293 @@
+<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 CurrencyInput from "@/components/CurruncyInput.vue";
+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 id = ref<string>("");
+const dataId = route.params.id as string;
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+const rows = ref<TypeFile[]>([]);
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
+
+const responseData = ref<ResponseDataDetail>({
+  profileId: "",
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+const fileDownload = async (no: number, type: string) => {
+  showLoader();
+  await http
+    .get(config.API.reportTransferFile(no, type, id.value), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      downloadFile(res, `_ครั้งที่.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+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 rowsFileDownload = ref<any[]>([
+  {
+    no: 1,
+    fileName:
+      "คําร้องขอโอนไปถึงส่วนราชการอื่นนอก กรุงเทพมหานครที่ข้าราชการประสงค์ขอโอน",
+    pathName: "",
+  },
+  {
+    no: 2,
+    fileName:
+      "หนังสือแจ้งสํานักงานการเจ้าหน้าที่ สํานักปลัดกรุงเทพมหานคร ให้ทราบตําแหน่งและตําแหน่งเลขที่ที่ดําเนินการให้โอน",
+    pathName: "",
+  },
+  {
+    no: 3,
+    fileName:
+      "หนังสือยินยอมให้โอนและวันที่พร้อมจะให้โอนไปยัง หน่วยงานที่รับโอน",
+    pathName: "",
+  },
+  {
+    no: 4,
+    fileName:
+      "หนังสือแจ้งสหกรณ์ออมทรัพย์กรุงเทพมหานครเพื่อขอ ตรวจสอบภาระหนี้สินสหกรณ์ออมทรัพย์",
+    pathName: "",
+  },
+  {
+    no: 5,
+    fileName:
+      "หนังสือถึงสํานักงานการเจ้าหน้าที่ สํานักปลัดกรุงเทพมหานครเพื่อขอตรวจสอบพฤติการณ์ทางวินัย และภาระหนี้สินสวัสดิการ",
+    pathName: "",
+  },
+  {
+    no: 6,
+    fileName:
+      "หนังสือถึงสถาบันพัฒนาข้าราชการกรุงเทพมหานครเพื่อขอตรวจสอบเรื่องภาระผูกพันการรับทุนและการลา ศึกษาต่อกับทางกรุงเทพมหานคร",
+    pathName: "",
+  },
+]);
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transferId(dataId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+      id.value = data.id;
+      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.profileId = data.profileId;
+      responseData.value.createdAt = data.createdAt;
+      responseData.value.date =
+        data.date !== null ? new Date(data.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 ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.posNo ?? "";
+      salary.value = data.salary ?? 0;
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const confirmMessage = async () => {
+  dialogConfirm(
+    $q,
+    async () => await sendConfirm(),
+    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที"
+  );
+};
+
+const sendConfirm = async () => {
+  showLoader();
+  await http
+    .get(config.API.transferConfirmId(dataId.toString()))
+    .then((res: any) => {
+      success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => await saveData(),
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+        );
+      }
+    });
+  }
+};
+
+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(dataId.toString()), body)
+    .then((res: any) => {
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await getData();
+});
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -8,7 +298,7 @@
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.go(-1)"
+      @click="router.push(`/transfer`)"
     />
     รายละเอียดการขอโอนของ {{ responseData.fullname }}
   </div>
@@ -80,15 +370,6 @@
         label="ส่งคำร้องไปยัง สกจ."
         @click="confirmMessage"
       />
-      <!-- <q-btn
-        v-else
-        outline
-        color="primary"
-        dense
-        icon-right="download"
-        class="q-px-sm"
-        label="ดาวน์โหลด"
-      /> -->
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -317,19 +598,6 @@
                   />
                 </div>
                 <div class="col-xs-6 col-sm-3">
-                  <!-- <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              /> -->
                   <CurrencyInput
                     v-model="salary"
                     :edit="edit"
@@ -427,302 +695,7 @@
     </q-form>
   </q-card>
 </template>
-<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 CurrencyInput from "@/components/CurruncyInput.vue";
-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 id = ref<string>("");
-const dataId = route.params.id as string;
-
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
-
-const myForm = ref<QForm | null>(null);
-const roleAdmin = ref<boolean>(false);
-const edit = ref<boolean>(false);
-
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-const organization = ref<string>("");
-const date = ref<Date | null>(null);
-const reason = ref<string>("");
-
-const responseData = ref<ResponseDataDetail>({
-  profileId: "",
-  avataPath: "",
-  createdAt: new Date(),
-  date: new Date(),
-  id: "",
-  organization: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  reason: "",
-  salary: 0,
-  status: "",
-  fullname: "",
-});
-const downloadFile = (response: any, filename: string) => {
-  const link = document.createElement("a");
-  var fileName = filename;
-  link.href = window.URL.createObjectURL(new Blob([response.data]));
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-const fileDownload = async (no: number, type: string) => {
-  showLoader();
-  await http
-    .get(config.API.reportTransferFile(no, type, id.value), {
-      responseType: "blob",
-    })
-    .then(async (res) => {
-      downloadFile(res, `_ครั้งที่.${type}`);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-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",
-  },
-]);
-
-onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin.value);
-  }
-  await getData();
-});
-
-const rowsFileDownload = ref<any[]>([
-  {
-    no: 1,
-    fileName:
-      "คําร้องขอโอนไปถึงส่วนราชการอื่นนอก กรุงเทพมหานครที่ข้าราชการประสงค์ขอโอน",
-    pathName: "",
-  },
-  {
-    no: 2,
-    fileName:
-      "หนังสือแจ้งสํานักงานการเจ้าหน้าที่ สํานักปลัดกรุงเทพมหานคร ให้ทราบตําแหน่งและตําแหน่งเลขที่ที่ดําเนินการให้โอน",
-    pathName: "",
-  },
-  {
-    no: 3,
-    fileName:
-      "หนังสือยินยอมให้โอนและวันที่พร้อมจะให้โอนไปยัง หน่วยงานที่รับโอน",
-    pathName: "",
-  },
-  {
-    no: 4,
-    fileName:
-      "หนังสือแจ้งสหกรณ์ออมทรัพย์กรุงเทพมหานครเพื่อขอ ตรวจสอบภาระหนี้สินสหกรณ์ออมทรัพย์",
-    pathName: "",
-  },
-  {
-    no: 5,
-    fileName:
-      "หนังสือถึงสํานักงานการเจ้าหน้าที่ สํานักปลัดกรุงเทพมหานครเพื่อขอตรวจสอบพฤติการณ์ทางวินัย และภาระหนี้สินสวัสดิการ",
-    pathName: "",
-  },
-  {
-    no: 6,
-    fileName:
-      "หนังสือถึงสถาบันพัฒนาข้าราชการกรุงเทพมหานครเพื่อขอตรวจสอบเรื่องภาระผูกพันการรับทุนและการลา ศึกษาต่อกับทางกรุงเทพมหานคร",
-    pathName: "",
-  },
-]);
-
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.transferId(dataId.toString()))
-    .then((res: any) => {
-      const data = res.data.result;
-      id.value = data.id;
-      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.profileId = data.profileId;
-      responseData.value.createdAt = data.createdAt;
-      responseData.value.date =
-        data.date !== null ? new Date(data.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 ?? "";
-      responseData.value.avataPath = data.avataPath ?? "";
-      responseData.value.fullname = `${data.firstName ?? "-"} ${
-        data.lastName ?? "-"
-      }`;
-
-      organizationPositionOld.value = data.organizationPositionOld ?? "";
-      positionTypeOld.value = data.positionTypeOld ?? "";
-      positionLevelOld.value = data.positionLevelOld ?? "";
-      posNo.value = data.posNo ?? "";
-      salary.value = data.salary ?? 0;
-      organization.value = data.organization ?? "";
-      date.value = data.date !== null ? new Date(data.date) : null;
-      reason.value = data.reason ?? "";
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const confirmMessage = async () => {
-  dialogConfirm(
-    $q,
-    async () => await sendConfirm(),
-    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที"
-  );
-};
-
-const sendConfirm = async () => {
-  showLoader();
-  await http
-    .get(config.API.transferConfirmId(dataId.toString()))
-    .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
-      success($q, "ส่งคำร้องข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
-
-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(dataId.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 getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;