From 8eee779e149b3b148c596fd26bae8df89261580f Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 14:50:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=A7=E0=B8=A1=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   24 +-
 .../05_placement/components/pass/Table.vue    | 1749 ++++-------------
 .../components/pass/TableDetail.vue           |   59 +-
 .../interface/request/placement.ts            |    2 +-
 4 files changed, 387 insertions(+), 1447 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index dbca3a328..1f4d212c1 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -3,14 +3,16 @@ const placement = `${env.API_URI}/Placement/placement`
 const orgTree = `${env.API_URI_ORG_TREE}`;
 
 export default {
-    MainDetail: (year: number) => `${placement}/exam/${year}`,
-    yearOptions: () => `${placement}/fiscal`,
-    redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
-    disclaimF: () => `${placement}/pass/disclaim`,
-    defermentF: () => `${placement}/pass/deferment`,
-    getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
-    getDatapersonal: (id: string) => `${placement}/personal/${id}`,
-    putProperty: (id: string) => `${placement}/property/${id}`,
-    orgTree: orgTree, 
-    placementPass: () => `${placement}/pass`
-}
\ No newline at end of file
+  MainDetail: (year: number) => `${placement}/exam/${year}`,
+  yearOptions: () => `${placement}/fiscal`,
+  redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
+  disclaimF: () => `${placement}/pass/disclaim`,
+  defermentF: () => `${placement}/pass/deferment`,
+  getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
+  getDatapersonal: (id: string) => `${placement}/personal/${id}`,
+  putProperty: (id: string) => `${placement}/property/${id}`,
+  orgTree: orgTree,
+  placementPass: () => `${placement}/pass`,
+  placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
+  placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
+};
\ No newline at end of file
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index cd9e7b0fb..f6a5dcde7 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1,21 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, watchEffect } from "vue";
+import { ref, onMounted, watch, reactive } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { usePlacementDataStore } from "@/modules/05_placement/store";
 import Table from "@/modules/05_placement/components/pass/TableView.vue";
 import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
 import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
-// import type  Deferment  from "@/modules/05_placement/components/pass/Deferment.vue";
-import type {
-  treeTab,
-  DataOption,
-} from "@/modules/05_placement/interface/index/Main";
-import { useRoute, useRouter } from "vue-router";
+import DialogOrgTree from "@/modules/05_placement/components/pass/OrgTree.vue";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
@@ -24,418 +19,36 @@ import router from "@/router";
 let roleAdmin = ref<boolean>(false);
 
 const edit = ref<boolean>(true);
-const modal = ref<boolean>(false); //modal add detail
+const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
-const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const modalDisclaim = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const editvisible = ref<boolean>(true);
-const modal_right = ref<boolean>(false); //modal add detail
+const modalDefermentDisclaim = ref<boolean>(false); //modal add detail
 const checkValidate = ref<boolean>(false);
 const modalwaitInfo = ref<boolean>(false); //modal add detail
 
-const positionMasterUserNote = ref<string>();
-const positionExecutiveId = ref<string>();
-const positionPathSideId = ref<string>();
-const positionLevelId = ref<string>();
-const positionLineId = ref<string>();
-const positionTypeId = ref<string>();
-const expanded = ref<string[]>([]);
-const clickAction = ref<string>();
-const salaryClass = ref<string>();
-const selected = ref<string>("");
-const positionId = ref<string>();
-const salaryRef = ref<string>();
-const search = ref<string>("");
+const userNote = ref<string>("");
 const filter = ref<string>("");
-const posNoId = ref<string>();
-const amount = ref<string>();
 const Name = ref<string>();
-const personId = ref<string>();
-const ocId = ref<string>();
 const rows = ref<any>([]);
-const posNoOptions = ref<DataOption[]>([]);
-const positionOptions = ref<DataOption[]>([]);
-const posNoOptionsFilter = ref<DataOption[]>([]);
-const refSelected = ref<DataOption | null>(null);
-const positionLineOptions = ref<DataOption[]>([]);
-const positionSideOptions = ref<DataOption[]>([]);
-const positionTypeOptions = ref<DataOption[]>([]);
-const positionOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveOptions = ref<DataOption[]>([]);
-const positionLineOptionsFilter = ref<DataOption[]>([]);
-const positionSideOptionsFilter = ref<DataOption[]>([]);
-const positionTypeOptionsFilter = ref<DataOption[]>([]);
-const positionLevelOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveSideOptions = ref<DataOption[]>([]);
-const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
-const number = ref<number>();
 const myForm = ref<any>();
-const mouthSalaryAmount = ref<any>();
-const positionSalaryAmount = ref<any>();
 const files = ref<any>(null);
-const date = ref<Date>(new Date());
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const store = usePlacementDataStore();
-const { placementData } = store;
-const nodesTree = ref<treeTab[]>([]);
 const $q = useQuasar(); // show dialog
-const statusCode = ref<number>();
-const positionLevelOptions = ref<any[]>([]);
 
 const {
-  date2Thai,
-  success,
-  dateToISO,
   messageError,
   showLoader,
   hideLoader,
   dateText,
+  success
 } = mixin;
+
 const route = useRoute();
 const examId = route.params.examId;
-const textDate = (value: Date) => {
-  return dateText(value);
-};
 const examIdString = Array.isArray(examId) ? examId[0] : examId;
+const personalId = ref<string>("");
 
-const getTable = async () => {
-  showLoader();
-  await http
-    .get(config.API.redirectToPage(examIdString))
-    .then((res: any) => {
-      const dataArray: PartialTableName[] = res.data.result;
-      console.log("🚀 ~ file: Table.vue:96 ~ getTable ~ data:", dataArray);
-      dataArray.map((data) => {
-        const rowData = {
-          personalId: data.personalId,
-          idCard: data.idCard,
-          profilePhoto: data.profilePhoto,
-          organizationName: data.organizationName,
-          organizationShortName: data.organizationShortName,
-          positionNumber: data.positionNumber,
-          positionPath: data.positionPath,
-          reportingDate: data.reportingDate,
-          number: data.number,
-          bmaOfficer: data.bmaOfficer,
-          statusId: data.statusId,
-          disclaim: data.disclaim,
-        };
-        rows.value.push(rowData);
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const fetchPosition = async () => {
-  showLoader();
-  await http
-    .get(config.API.position)
-    .then((res) => {
-      const data = res.data.result;
-      let optionpositionpaths: DataOption[] = [];
-      data.positionPaths.map((r: any) => {
-        optionpositionpaths.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionOptions.value = optionpositionpaths;
-      positionOptionsFilter.value = optionpositionpaths;
-
-      let optionPositionPathSides: DataOption[] = [];
-      data.positionPathSides.map((r: any) => {
-        optionPositionPathSides.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionSideOptions.value = optionPositionPathSides;
-      positionSideOptionsFilter.value = optionPositionPathSides;
-
-      let optionPositionTypes: DataOption[] = [];
-      data.positionTypes.map((r: any) => {
-        optionPositionTypes.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionTypeOptions.value = optionPositionTypes;
-      positionTypeOptionsFilter.value = optionPositionTypes;
-
-      let optionPositionLines: DataOption[] = [];
-      data.positionLines.map((r: any) => {
-        optionPositionLines.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionLineOptions.value = optionPositionLines;
-      positionLineOptionsFilter.value = optionPositionLines;
-
-      let optionPositionExecutives: DataOption[] = [];
-      data.positionExecutives.map((r: any) => {
-        optionPositionExecutives.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionExecutiveOptions.value = optionPositionExecutives;
-      positionExecutiveOptionsFilter.value = optionPositionExecutives;
-
-      let optionPositionExecutiveSides: DataOption[] = [];
-      data.positionExecutiveSides.map((r: any) => {
-        optionPositionExecutiveSides.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionExecutiveSideOptions.value = optionPositionExecutiveSides;
-      positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
-
-      let optionPositionLevels: DataOption[] = [];
-      data.positionLevels.map((r: any) => {
-        optionPositionLevels.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-
-      positionLevelOptions.value = optionPositionLevels.map((item: any) => {
-        //   {lebal:item.id,
-        //   value:item.name
-        // }
-      });
-      // positionLevelOptionsFilter.value = optionPositionLevels;
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchOrganization = async (id: string) => {
-  if (selected.value != "") {
-    showLoader();
-    await http
-      .get(config.API.organizationName(id))
-      .then((res) => {
-        let data = res.data.result;
-        ocId.value = data;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const appointModal = ref<boolean>(false);
-
-const nodeTree = async () => {
-  showLoader();
-  await http
-    .get(config.API.getTreeRoot)
-    .then((res) => {
-      const data = res.data.result;
-      nodesTree.value = data;
-      if (data.length > 0) {
-        expanded.value = [data[0].id];
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const appoint = ref<any>({
-  Code: "",
-  UnitName: "",
-  PositionNo: "",
-  PositionType: "",
-  PositionManage: "",
-  PositionTypeManage: "",
-  PositionLine: "",
-  Major: "",
-  PositionLevel: "",
-});
-const saveAppoint = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (appointModal.value) {
-        const dataAppoint = {
-          date: date.value,
-          posNoId: posNoId.value,
-          positionId: positionId.value,
-          positionPathSideId: positionPathSideId.value,
-          positionTypeId: positionTypeId.value,
-          positionLineId: positionLineId.value,
-          positionLevelId: positionLevelId.value,
-          amount: amount.value,
-          positionSalaryAmount: positionSalaryAmount.value,
-          mouthSalaryAmount: mouthSalaryAmount.value,
-          // salaryClass: salaryClass.value,
-          // refSelected: refSelected.value,
-          // salaryRef: salaryRef.value,
-        };
-        console.log("save appoint===>", dataAppoint);
-        positionTypeId.value = "";
-        positionLineId.value = "";
-        positionLevelId.value = "";
-        amount.value = "";
-        positionSalaryAmount.value = "";
-        positionPathSideId.value = "";
-        positionId.value = "";
-        posNoId.value = "";
-        mouthSalaryAmount.value = "";
-        appointModal.value = false;
-      }
-    } else {
-      // await saveData();
-    }
-  });
-};
-
-const savePostpone = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const formData = new FormData();
-      formData.append("personalId", personId.value);
-      formData.append("note", positionMasterUserNote.value),
-        formData.append("files", files.value);
-
-      await http
-        .post(config.API.defermentF(), formData)
-        .then((res) => {
-          const test = rows.value.filter(
-            (e) => e.personalId === personId.value
-          );
-
-          test.forEach((e) => {
-            e.statusId = "PREPARE-CONTAIN";
-          });
-
-          modal_right.value = false;
-        })
-        .catch((e) => {
-          console.log(e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
-  });
-};
-
-const saveDisclaim = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataPost = {
-        note: positionMasterUserNote.value,
-        personId: personId.value,
-      };
-      console.log("save disclaim===>", dataPost);
-      modal_right.value = false;
-
-      await http
-        .post(config.API.disclaimF(), {
-          note: dataPost.note,
-          personalId: dataPost.personId,
-        })
-        .then(() => {
-          const test1 = rows.value.filter(
-            (e) => e.personalId === personId.value
-          );
-          test1.forEach((e) => {
-            e.statusId = "DISCLAIM";
-          });
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
-  });
-};
-
-const clickEditRow = () => {
-  editRow.value = true;
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer ": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-const selectData = (props: TableName) => {
-  itemtest.value = props;
-  if (roleAdmin.value === true) {
-    modal.value = true;
-  } else {
-    router.push("/placement/detail/08db7322-5712-4626-8a76-e2d28cd1a13b");
-  }
-};
-const onSelected = async (id: string) => {
-  await fetchPositionNumber(id);
-};
-const fetchPositionNumber = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.getPositionNumberIdByOcId(id))
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      posNoOptions.value = option;
-      posNoOptionsFilter.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const getNumFile = ref(0);
-const editDetail = (
-  props: PartialTableName,
-  action: "cancel" | "wait" | "waitInfo"
-) => {
-  if (action === "cancel") {
-    getNumFile.value = 0;
-    editRow.value = false;
-    modalEdit.value = false;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.fullName;
-    personId.value = props.personalId;
-  } else if (action === "wait") {
-    getNumFile.value = 1;
-    editRow.value = false;
-    modalEdit.value = true;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.fullName;
-    personId.value = props.personalId;
-  } else if (action === "waitInfo") {
-    getNumFile.value = 1;
-    editRow.value = false;
-    modalEdit.value = true;
-    modalwaitInfo.value = true;
-    edit.value = true;
-    Name.value = props.fullName;
-    personId.value = props.personalId;
-  }
-};
 const visibleColumns = ref<any[]>([
   "position",
   "fullName",
@@ -445,7 +58,7 @@ const visibleColumns = ref<any[]>([
   "organizationName",
   "reportingDate",
   "bmaOfficer",
-  "statusId",
+  "statusName",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
@@ -509,11 +122,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "statusId",
+    name: "statusName",
     align: "left",
     label: "สถานะการบรรจุ",
     sortable: true,
-    field: "statusId",
+    field: "statusName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -521,243 +134,178 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const refOptions = ref<DataOption[]>([
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const refOptionsFilter = ref<DataOption[]>([
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const itemtest = ref<object>({});
+const getTable = async () => {
+  showLoader();
+  await http
+    .get(config.API.redirectToPage(examIdString))
+    .then((res: any) => {
+      const dataArray: PartialTableName[] = res.data.result;
+      rows.value = []
+      dataArray.map((data) => {
+        const rowData = {
+          personalId: data.personalId,
+          idCard: data.idCard,
+          fullName: data.fullName,
+          profilePhoto: data.profilePhoto,
+          organizationName: data.organizationName,
+          organizationShortName: data.organizationShortName,
+          positionNumber: data.positionNumber,
+          positionPath: data.positionPath,
+          reportingDate: dateText(new Date(data.reportingDate)),
+          number: data.number,
+          bmaOfficer: data.bmaOfficer,
+          statusId: data.statusId,
+          statusName: data.statusId == 'un-contain' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN'? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-',
+          deferment: data.deferment,
+        };
 
-const openAppointModal = (value: any) => {
-  appointModal.value = true;
-  editRow.value = false;
+        rows.value.push(rowData);
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
 };
 
+const appointModal = ref<boolean>(false);
+
+const savePostpone = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const formData = new FormData();
+      formData.append("personalId", personalId.value);
+      formData.append("note", userNote.value),
+        formData.append("files", files.value);
+
+      await http
+        .post(config.API.defermentF(), formData)
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          console.log(e);
+        })
+        .finally(async () => {
+          await getTable();
+          modalDefermentDisclaim.value = false;
+          hideLoader();
+        });
+    }
+  });
+};
+
+const saveDisclaim = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataPost = {
+        note: userNote.value,
+        personId: personalId.value,
+      };
+
+      // console.log("save disclaim===>", dataPost);
+
+      await http
+        .post(config.API.disclaimF(), {
+          note: dataPost.note,
+          personalId: dataPost.personId,
+        })
+        .then(() => { success($q, "บันทึกสำเร็จ"); })
+        .finally(async () => {
+          await getTable();
+          modalDefermentDisclaim.value = false;
+          hideLoader();
+        });
+    }
+  });
+};
+
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer ": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const selectData = (pid: string) => {
+  if (roleAdmin.value === true) {
+    personalId.value = pid
+    modal.value = true;
+  } else {
+    router.push("/placement/detail/" + pid);
+  }
+};
+
+const getNumFile = ref(0);
+const dataInfo = reactive({
+  reason: "",
+  reliefDoc: ""
+});
+
+const editDetail = (
+  props: PartialTableName,
+  action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
+) => {
+  Name.value = props.fullName;
+  personalId.value = props.personalId;
+  editRow.value = false;
+  edit.value = true;
+
+  if (action === "disclaim") {
+    getNumFile.value = 0;
+    modalDisclaim.value = true;
+    modalDefermentDisclaim.value = true;
+  } else if (action === "deferment") {
+    getNumFile.value = 1;
+    modalDisclaim.value = false;
+    modalDefermentDisclaim.value = true;
+  } else if (action === "defermentInfo") {
+
+    http
+      .get(config.API.placementDefermentInfo(props.personalId))
+      .then((res: any) => {
+        dataInfo.reason = res.data.result.reliefReason;
+        dataInfo.reliefDoc = res.data.reliefDoc
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalDisclaim.value = false;
+        modalwaitInfo.value = true;
+      });
+  } else if (action === "disclaimInfo") {
+    http
+      .get(config.API.placementDisclaimInfo(props.personalId))
+      .then((res: any) => {
+        dataInfo.reason = res.data.result.rejectReason;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalDisclaim.value = true;
+        modalwaitInfo.value = true;
+      });
+  }
+};
+
+const openAppointModal = (pid: string) => {
+  appointModal.value = true;
+  personalId.value = pid;
+};
+
+const clickCloseModalTree = async () => {
+  await getTable();
+  appointModal.value = false
+}
+
 const validateData = async () => {
   checkValidate.value = true;
   await myForm.value.validate().then((result: boolean) => {
@@ -766,23 +314,9 @@ const validateData = async () => {
     }
   });
 };
-const posNoF = posNoOptions.value.filter(
-  (r: DataOption) => r.id == posNoId.value
-);
-if (posNoF.length > 0) {
-  salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
-}
+
 const clickClose = async () => {
-  positionTypeId.value = "";
-  positionLineId.value = "";
-  positionLevelId.value = "";
-  amount.value = "";
-  positionSalaryAmount.value = "";
-  positionPathSideId.value = "";
-  positionId.value = "";
-  posNoId.value = "";
-  positionMasterUserNote.value = "";
-  mouthSalaryAmount.value = "";
+  userNote.value = "";
   if (editRow.value == true) {
     $q.dialog({
       title: `ข้อมูลมีการแก้ไข`,
@@ -791,91 +325,25 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
-      positionTypeId.value = "";
-      positionLineId.value = "";
-      positionLevelId.value = "";
-      amount.value = "";
-      positionSalaryAmount.value = "";
-      positionPathSideId.value = "";
-      positionId.value = "";
-      posNoId.value = "";
-      positionMasterUserNote.value = "";
-      mouthSalaryAmount.value = "";
-      modal_right.value = false;
+      modalDefermentDisclaim.value = false;
       modalwaitInfo.value = false;
       modal.value = false;
       files.value = null;
-      appointModal.value = false;
     });
   } else {
-    modal_right.value = false;
+    modalDefermentDisclaim.value = false;
     modalwaitInfo.value = false;
     modal.value = false;
-    appointModal.value = false;
   }
 };
-const manageApiErrorMsg = (catchE: any) => {
-  if (catchE.response.status == 404 || catchE.response.data.status == 404) {
-    return;
-  } else {
-    messageError($q, catchE);
-  }
-};
-const save = () => {
-  console.log("rows===>", rows.value);
-};
+
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
     console.log("roleAdmin===>", roleAdmin);
   }
   await getTable();
-  await fetchPosition();
-  await nodeTree();
-  // await fetchData();
 });
-const fetchChildrenByParentId = async (node: any) => {
-  console.log("Call API4");
-  showLoader();
-  let request = "";
-
-  request = config.API.getTreeNode(node.organizationId, node.keyId);
-
-  await http
-    .get(request)
-    .then((res) => {
-      console.log(res.data.result);
-      node.children = res.data.result;
-    })
-    .catch((e) => {
-      manageApiErrorMsg(e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const onLazyLoad = (node: any) => {
-  setTimeout(async () => {
-    console.log("Call LazyLoad");
-    await fetchChildrenByParentId(node.node);
-    node.done(node.node.children); //return ค่าให้ q-tree generate children
-  }, 10);
-};
-const listKeyId = (data: any) => {
-  const { node } = data;
-  console.log("test", node);
-  posNoId.value = node.positionNum;
-  positionId.value = node.positionName;
-  positionPathSideId.value = node.executivePositionSide;
-  positionTypeId.value = node.positionType;
-  positionLineId.value = node.organizationName;
-  positionLevelId.value = node.positionLevel;
-  positionLevelOptions.value = node.positionLevel.split(",");
-  return {
-    keyId: node.keyId,
-    optionsLevel: positionLevelOptions.value,
-  };
-};
 
 const expiredAccount = ref<boolean>(false);
 
@@ -883,678 +351,191 @@ watch(expiredAccount, () => {
   console.log("expiredAccount===>", expiredAccount.value);
 });
 </script>
+
 <template>
-  <q-form ref="myForm">
-    <Table
-      :expired-account="expiredAccount"
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      v-model:editvisible="editvisible"
-      v-model:expiredaccountfilter="expiredAccount"
-      :history="true"
-      :boss="true"
-      :saveNoDraft="true"
-      :add="save"
-      :role-admin="roleAdmin"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props.row)"
-            class="cursor-pointer"
-          >
-            <template v-if="col.name === 'position'">
-              {{ props.rowIndex + 1 }}
-            </template>
-            <template
-              v-else-if="col.name === 'fullName'"
-              class="table_ellipsis"
-            >
-              <div class="row col-12 text-no-wrap items-center">
-                <img
-                  v-if="props.row.avatar == null"
-                  src="@/assets/avatar_user.jpg"
-                  class="col-4 img-info"
-                />
-                <img v-else :src="props.row.avatar" class="col-4 img-info" />
-                <div class="col-4">
-                  <div class="text-weight-medium">{{ props.row.fullName }}</div>
-                  <div class="text-weight-light">{{ props.row.idCard }}</div>
-                </div>
-              </div>
-            </template>
-            <template v-else-if="col.name === 'number'">
-              <div class="text-weight-medium">
-                {{ props.row.number !== null ? props.row.number : "-" }}
-              </div>
-            </template>
-
-            <template v-else-if="col.name === 'organizationName'">
-              <div
-                v-if="
-                  props.row.organizationName !== null ||
-                  props.row.positionPath !== null
-                "
-              >
-                <div class="col-4">
-                  <div class="text-weight-medium">
-                    {{
-                      props.row.organizationName !== null
-                        ? props.row.organizationName
-                        : "-"
-                    }}
-                    {{
-                      props.row.organizationShortName !== null
-                        ? `(${props.row.organizationShortName})`
-                        : ""
-                    }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{
-                      props.row.positionPath !== null
-                        ? props.row.positionPath
-                        : "-"
-                    }}
-                    {{
-                      props.row.positionNumber !== null
-                        ? `(${props.row.positionNumber})`
-                        : ""
-                    }}
-                  </div>
-                </div>
-              </div>
-              <div v-else>
-                <div class="col-4">
-                  <div class="text-weight-medium">-</div>
-                  <div class="text-weight-light">-</div>
-                </div>
-              </div>
-            </template>
-            <template
-              v-else-if="col.name === 'reportingDate' && col.value !== '-'"
-            >
-              <div class="text-weight-medium">
-                {{ dateText(props.row.reportingDate) }}
-              </div>
-            </template>
-            <template v-else-if="col.name === 'bmaOfficer'">
-              <div class="text-weight-medium">
-                {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
-              </div>
-            </template>
-            <template
-              v-else-if="col.name === 'statusId'"
-              class="table_ellipsis"
-            >
-              <div v-if="props.row.statusId === 'un-contain'">ยังไม่บรรจุ</div>
-              <div v-else-if="props.row.statusId === 'PREPARE-CONTAIN'">
-                เตรียมบรรจุ
-              </div>
-              <div v-else-if="props.row.statusId === 'contain'">บรรจุแล้ว</div>
-              <div v-else-if="props.row.statusId === 'DISCLAIM'">สละสิทธิ์</div>
-              <div v-else>-</div>
-            </template>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              v-if="
-                props.row.Status !== 'DISCLAIM' &&
-                props.row.Status !== 'contain'
-              "
-              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
-                    v-if="roleAdmin && props.row.statusId === 'un-contain'"
-                    clickable
-                    v-close-popup
-                    @click="openAppointModal"
-                  >
-                    <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-separator />
-                  <q-item
-                    v-if="roleAdmin && props.row.statusId === 'un-contain'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'wait')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-alert-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>ขอผ่อนผัน</q-item-section>
-                  </q-item>
-                  <q-item
-                    v-else-if="props.row.statusId !== 'DISCLAIM'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'waitInfo')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-details-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
-                  </q-item>
-                  <q-separator />
-                  <q-item
-                    v-if="
-                      props.row.statusId === 'un-contain' ||
-                      props.row.statusId === 'PREPARE-CONTAIN'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'cancel')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="pink"
-                        size="xs"
-                        name="mdi-account-cancel-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>สละสิทธิ์</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </Table>
-  </q-form>
-
-  <q-dialog v-model="appointModal" persistent full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
-        <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-6 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    no-transition
-                    ref="qtreeEdit"
-                    :nodes="nodesTree"
-                    node-key="keyId"
-                    @lazy-load="onLazyLoad"
-                    dense
-                  >
-                    <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
-                    <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="clickAction === prop.node.keyId"
-                        @click="
-                          clickAction =
-                            prop.node.name == `ว่าง` ||
-                            prop.node.name == `N/A` ||
-                            prop.node.name == null
-                              ? listKeyId(prop)
-                              : ''
-                        "
-                        active-class="my-list-link text-primary text-weight-medium"
-                        :class="
-                          prop.node.name == `ว่าง` ||
-                          prop.node.name == `N/A` ||
-                          prop.node.name == null
-                            ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
-                            : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
-                        "
-                      >
-                        <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 == `ว่าง` ||
-                            prop.node.name == `N/A` ||
-                            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>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-6">
-              <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-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        :readonly="!edit"
-                        v-model="date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        @update:modelValue="clickEditRow"
-                        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="date2Thai(date)"
-                            :rules="[
-                              (val: string) =>
-                                !!val ||
-                                `${'วันที่รายงานตัว'}`,
-                            ]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                :style="
-                                  edit
-                                    ? 'color: var(--q-primary)'
-                                    : 'color: var(--q-grey)'
-                                "
-                              >
-                              </q-icon>
+              <q-form ref="myForm">
+                    <Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
+                      :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
+                      v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
+                      :saveNoDraft="true" :role-admin="roleAdmin">
+                      <template #columns="props">
+                        <q-tr :props="props">
+                          <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
+                            class="cursor-pointer">
+                            <template v-if="col.name === 'position'">
+                              {{ props.rowIndex + 1 }}
+                            </template>
+                            <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
+                              <div class="row col-12 text-no-wrap items-center">
+                                <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
+                                <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                                <div class="col-4">
+                                  <div class="text-weight-medium">{{ props.row.fullName }}</div>
+                                  <div class="text-weight-light">{{ props.row.idCard }}</div>
+                                </div>
+                              </div>
+                            </template>
+                            <template v-else-if="col.name === 'number'">
+                              <div class="text-weight-medium">
+                                {{ props.row.number !== null ? props.row.number : "-" }}
+                              </div>
                             </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        standout
-                        readonly
-                        class="custom-input"
-                        dense
-                        lazy-rules
-                        v-model="posNoId"
-                        :label="`${'เลขที่ตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        :readonly="!edit"
-                        class="custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        v-model="positionPathSideId"
-                        :rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]"
-                        :label="`${'ด้าน/สาขา'}`"
-                      />
-                    </div>
-                    <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
 
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionLineId"
-                        :label="`${'สายงาน'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        :readonly="!edit"
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="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
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
+                            <template v-else-if="col.name === 'organizationName'">
+                              <div v-if="props.row.organizationName !== null ||
+                                props.row.positionPath !== null
+                                ">
+                                <div class="col-4">
+                                  <div class="text-weight-medium">
+                                    {{
+                                      props.row.organizationName !== null
+                                      ? props.row.organizationName
+                                      : "-"
+                                    }}
+                                    {{
+                                      props.row.organizationShortName !== null
+                                      ? `(${props.row.organizationShortName})`
+                                      : ""
+                                    }}
+                                  </div>
+                                  <div class="text-weight-light">
+                                    {{
+                                      props.row.positionPath !== null
+                                      ? props.row.positionPath
+                                      : "-"
+                                    }}
+                                    {{
+                                      props.row.positionNumber !== null
+                                      ? `(${props.row.positionNumber})`
+                                      : ""
+                                    }}
+                                  </div>
+                                </div>
+                              </div>
+                              <div v-else>
+                                <div class="col-4">
+                                  <div class="text-weight-medium">-</div>
+                                  <div class="text-weight-light">-</div>
+                                </div>
+                              </div>
+                            </template>
+                            <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
+                              <div class="text-weight-medium">
+                                {{ props.row.reportingDate }}
+                              </div>
+                            </template>
+                            <template v-else-if="col.name === 'bmaOfficer'">
+                              <div class="text-weight-medium">
+                                {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
+                              </div>
+                            </template>
+                            <template v-else-if="col.name === 'statusName'">
+                              <div class="text-weight-medium">
+                                {{ props.row.statusName }}
+                              </div>
+                            </template>
+                          </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 v-if="roleAdmin && props.row.statusId === 'un-contain'" clickable v-close-popup
+                                    @click="openAppointModal(props.row.personalId)">
+                                    <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-separator />
+                                  <q-item v-if="roleAdmin && props.row.statusId === 'un-contain'" clickable v-close-popup
+                                    @click="editDetail(props.row, 'deferment')">
+                                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                      <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
+                                    </q-item-section>
+                                    <q-item-section>ขอผ่อนผัน</q-item-section>
+                                  </q-item>
+                                  <q-item v-else-if="props.row.deferment === true && props.row.statusId != 'DISCLAIM'" clickable v-close-popup
+                                    @click="editDetail(props.row, 'defermentInfo')">
+                                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                      <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
+                                    </q-item-section>
+                                    <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                                  </q-item>
+                                  <q-separator />
+                                  <q-item v-if="props.row.statusId === 'un-contain' ||
+                                    props.row.statusId === 'PREPARE-CONTAIN'
+                                    " clickable v-close-popup
+                                    @click="editDetail(props.row, 'disclaim')">
+                                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                      <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                                    </q-item-section>
+                                    <q-item-section>สละสิทธิ์</q-item-section>
+                                  </q-item>
+                                  <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
+                                    @click="editDetail(props.row, 'disclaimInfo')">
+                                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                      <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                                    </q-item-section>
+                                    <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
+                                  </q-item>
 
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
+                                </q-list>
+                              </q-menu>
+                            </q-btn>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </Table>
+                  </q-form>
 
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="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>
+                  <!-- เลือกหน่วยงานที่บรรจุ -->
+                  <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
 
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          :validate="validateData"
-          v-model:modalEdit="modalEdit"
-          :save="saveAppoint"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <q-form ref="myForm">
-    <DialogCard
-      v-model:Modal="modal"
-      :getdetail="itemtest"
-      :close="clickClose"
-      :validate="validateData"
-    />
-  </q-form>
-  <q-dialog v-model="modal_right" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <DialogHeader
-          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          {{ personId }}
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="positionMasterUserNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:model-value="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile === 1"
-              v-model="files"
-              dense
-              :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
-              outlined
-              use-chips
-              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-              multiple
-              @update:model-value="clickEditRow"
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-          :validate="validateData"
-          :save="modalEdit ? savePostpone : saveDisclaim"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
+                  <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
+                  <q-form ref="myForm">
+                    <DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
+                  </q-form>
+                  <q-dialog v-model="modalDefermentDisclaim" persistent>
+                    <q-card style="width: 800px">
+                      <q-form ref="myForm">
+                        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+                        <q-separator />
+                        <q-card-section class="q-p-sm">
+                          <div class="col-xs-12 col-sm-12 col-md-12">
+                            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
+                              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
+                              :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
+                            <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
+                              use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
+                              @update:model-value="clickEditRow" class="q-py-sm">
+                              <template v-slot:prepend>
+                                <q-icon name="attach_file" color="primary" />
+                              </template>
+                            </q-file>
+                          </div>
+                        </q-card-section>
+                        <q-separator />
+                        <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : savePostpone" />
+                      </q-form>
+                    </q-card>
+                  </q-dialog>
 
-  <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
-  <q-dialog v-model="modalwaitInfo" persistent>
-    <q-card style="width: 500px; max-width: 500px">
-      <q-form ref="myForm">
-        <DialogHeader
-          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="row">
-            <div class="col-3 text-grey-7">กรอกเหตุผล</div>
-            <div class="col-4">กรอกเหตุผล</div>
-          </div>
-          <div class="row q-pt-md">
-            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
-            <div class="col-2 q-mt-sm">กรอกเหตุผล</div>
-            <q-btn
-              color="primary"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-download"
-            />
+                  <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
+                  <q-dialog v-model="modalwaitInfo" persistent>
+                    <q-card style="width: 500px; max-width: 500px">
+                      <q-form ref="myForm">
+                        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+                        <q-separator />
+                        <q-card-section class="q-p-sm">
+                          <div class="row">
+                            <div class="col-3 text-grey-7">เหตุผล</div>
+                            <div class="col-4">{{ dataInfo.reason }}</div>
+                          </div>
+                          <div v-if="!modalDisclaim" class="row q-pt-md">
+                            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
+                            <div class="col-2 q-mt-sm">
+                              <q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download" target="_blank" />
+                            </div>
           </div>
         </q-card-section>
         <q-separator />
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index 9bc2508d3..52bc0b023 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -4,26 +4,23 @@ import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vu
 import { useQuasar } from "quasar";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import type { QTableProps } from "quasar";
-import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRoute } from "vue-router";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const modal = ref<boolean>();
 const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
 const save = ref<boolean>(true);
 
-const fullName = ref<any>()
-
 const props = defineProps({
   Modal: Boolean,
   close: {
     type: Function,
     default: () => console.log("not function"),
   },
-  getdetail: {
-    type: Object,
-    required: true,
+  personalId: {
+    type: String,
+    default: ""
   },
   validate: {
     type: Function,
@@ -31,46 +28,6 @@ const props = defineProps({
   },
 });
 
-// const getDetailbyId =  (props.getdetail) => {
-//     showLoader();
-
-//     // ดึงข้อมูล personalId จาก API ก่อน
-//     try {
-//       const response = await http.get(config.API.personalId(id));
-//       const personalId = response.data.personalId;
-
-//       // เมื่อได้รับ personalId แล้วให้ดึงข้อมูลอื่นๆ จาก API
-//       const organizationResponse = await http.get(config.API.organizationName(personalId));
-//       const data = organizationResponse.data.result;
-
-//       // อัปเดตข้อมูลบนหน้า UI จากข้อมูลที่ได้รับ
-//       uid.value = data.personalId;
-//       idCard.value = data.idCard;
-//       fullName.value = "tee";
-//       dateOfBirth.value = new Date(data.dateOfBirth).toLocaleDateString();
-//       gender.value = data.gender;
-//       address.value = data.address;
-//       education.value = data.education;
-//       pointA.value = data.pointA;
-//       pointB.value = data.pointB;
-//       pointC.value = data.pointC;
-//       pointTotalA.value = data.pointTotalA;
-//       pointTotalB.value = data.pointTotalB;
-//       pointTotalC.value = data.pointTotalC;
-//       point.value = data.point;
-//       pointTotal.value = data.pointTotal;
-//       examNumber.value = data.examNumber;
-//       examRound.value = data.examRound;
-//       pass.value = data.pass;
-//       isProperty.value = data.isProperty;
-//     } catch (error) {
-//       messageError($q, error);
-//     } finally {
-//       hideLoader();
-//     }
-
-// };
-
 const rows = ref<any[]>([
   ]);
 //--------------------(แปลงวันที่เป็นไทย)------------------------------------//
@@ -134,7 +91,7 @@ function isRequired(val: any): boolean | string {
 
 watch(props, () => {
   if (props.Modal === true) {
-    console.log(props.getdetail);
+    // console.log(props.getdetail);
     fetchData();
   }
 });
@@ -143,7 +100,7 @@ const validateData = () => {
   const selectedIds = personalForm.value.isProperty;
 
   const selectedItems = personalForm.value.isProperty.filter(
-    (item) => item.value === true
+    (item: any) => item.value === true
     // selectedIds.includes(item.value)
   );
   return (
@@ -172,10 +129,10 @@ const ClickSave = () => {
 const fetchData = async () => {
   showLoader();
   await http
-    .get(config.API.getDatapersonal("0a846508-4932-40de-9a9e-5b519492217c"))
+    .get(config.API.getDatapersonal(props.personalId))
     .then((res) => {
       personalForm.value = res.data.result;
-      personalForm.value.education.map((e) => {
+      personalForm.value.education.map((e: any) => {
         rows.value.push({
           university: e.name,
           degree: e.degree,
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index 0cfc57ac8..3c2d47c23 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -50,6 +50,6 @@ interface PartialTableName {
   bmaOfficer: string;
   number: number;
   statusId: string;
-  disclaim: string;
+  deferment: string;
 }
 export type { TableName ,PartialTableName};
\ No newline at end of file