From c4e1c4510abeab41313446e4100989d7c6428aa8 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 11 Jul 2023 17:55:06 +0700
Subject: [PATCH] no message

---
 src/api/05_placement/api.placement.ts         |    3 +
 src/modules/05_placement/components/Main.vue  |   96 +-
 .../05_placement/components/pass/Detail.vue   |   39 +-
 .../05_placement/components/pass/Table.vue    | 1147 +++++++++--------
 .../interface/request/placement.ts            |    1 +
 5 files changed, 724 insertions(+), 562 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 76ac2d2de..96c96e0b1 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -5,4 +5,7 @@ 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}`
 }
\ No newline at end of file
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 09c125bce..1121d990e 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs } from "vue";
+import { onMounted, reactive, ref, useAttrs, watchEffect } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption,DataOption1 } from "@/modules/05_placement/interface/index/Main";
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
@@ -15,7 +18,7 @@ const DataStore = usePlacementDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dateText, messageError } = mixin;
-
+const selectedFiscalYear = ref(0);
 // แปลงเวลา ค.ศ ให้เป็น พ.ศ
 const textDate = (value: Date) => {
   return dateText(value);
@@ -108,46 +111,30 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([
-  {
-    id: 0,
-    examRound: "",
-    examOrder: 0,
-    fiscalYear: 0,
-    numberOfCandidates: 0,
-    examTypeValue: "",
-    examTypeName: "",
-    accountStartDate: "",
-    accountExpirationDate: "",
-  },
-]);
+const rows = ref<FormPlacementMainData[]>([]);
+const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
 
 let OriginalData = ref<FormPlacementMainData[]>([]);
 let UpdataData = ref<FormPlacementMainData[]>([]);
-
+watchEffect(() => {
+  rows.value = OriginalData.value;
+});
 const OriginalDataFetch = async (year: number) => {
+  yearValue.value = year;
   try {
     const response = await http.get(config.API.MainDetail(year));
     const apiData = response.data.result;
-    console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", apiData);
+    console.log(`🚀 ข้อมูลจากการ get (${year})`, apiData);
     await DataStore.DataMain(apiData);
     OriginalData.value = await DataStore.DataMainOrig;
-    UpdataData.value = OriginalData.value.filter((data) => data.fiscalYear === year); // ใช้ค่า fiscalYear ในการกรองข้อมูล
+    UpdataData.value = OriginalData.value.filter(
+      (data) => data.fiscalYear === year
+    );
   } catch (error) {
     messageError($q, error);
   }
 };
 
-
-onMounted(async () => {
-  await fiscalYearFilter();
-  await OriginalDataFetch(fiscalyear.value);
-  examTimeFilter();
-  await examTypeFilter();
-  expiredAccountFilter();
-  await searchFilterTable();
-});
-
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
   router.push(`/placement/pass/${examId}`);
@@ -158,27 +145,30 @@ const fiscalyear = ref<number>(0);
 const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
-  let maxYear = 0;
   try {
     const response = await http.get(config.API.yearOptions());
     const dataOptions = response.data.result;
-    console.log("🚀 ", dataOptions);
-    for (let data of dataOptions) {
-      fiscalyearOP.push(data);
+    fiscalyearOP.push(...dataOptions);
 
+    let maxYear = 0;
+    for (let data of dataOptions) {
       if (data.id > maxYear) {
         maxYear = data.id;
       }
     }
+
     fiscalyear.value = maxYear;
-    console.log("Selected Year:", fiscalyear.value);
-    await OriginalDataFetch(fiscalyear.value); // เรียกใช้งานฟังก์ชันที่ดึงข้อมูลใหม่เมื่อมีการเลือกใน fiscalyear
+
+    // อัพเดตค่าของ selectedFiscalYear
+    selectedFiscalYear.value = fiscalyear.value;
+
+    // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
+    await OriginalDataFetch(selectedFiscalYear.value);
   } catch (e) {
     messageError($q, e);
   }
 };
 
-
 //-------------------|เลือกปีงบประมาณตาม API|--------------------//
 interface YearOption {
   id: number;
@@ -187,20 +177,17 @@ interface YearOption {
 
 const searchfiscalyear = async () => {
   try {
-    const response = await http.get(config.API.yearOptions());
-    const dataOptions: YearOption[] = response.data.result;
-    console.log("🚀 ~ file: Main.vue:189 ~ .then ~ dataOptions:", dataOptions);
-    
+    const res = await http.get(config.API.yearOptions());
+    const dataOptions: YearOption[] = res.data.result;
     if (fiscalyear.value === 0) {
-      // Perform any desired operations for selecting "ทั้งหมด" option
-      // เช่นตัวอย่างข้างล่างนี้ ที่แสดงผลลัพธ์ทั้งหมดใน console.log
-      console.log("All Year Objects:", dataOptions);
+      await OriginalDataFetch(0);
     } else {
-      // Find the selected object based on the chosen year
-      const selectedYearObject = dataOptions.find((option: YearOption) => option.id === fiscalyear.value);
+      const selectedYearObject = dataOptions.find(
+        (option: YearOption) => option.id === fiscalyear.value
+      );
+      OriginalDataFetch(fiscalyear.value);
+
       if (selectedYearObject) {
-        console.log("Selected Year Object:", selectedYearObject);
-        // Perform any desired operations with the selected object here
       } else {
         console.log("No Selected Year Object");
       }
@@ -210,8 +197,6 @@ const searchfiscalyear = async () => {
   }
 };
 
-
-
 //-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -290,7 +275,7 @@ const expiredAccountFilter = async () => {
   const currentDate = new Date();
   const updatedRows = OriginalData.value.map((data) => {
     let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = expirationDate < currentDate;
+    let isExpired = currentDate > expirationDate;
 
     return { ...data, isExpired };
   });
@@ -308,6 +293,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+onMounted(async () => {
+  await fiscalYearFilter();
+  examTimeFilter();
+  await examTypeFilter();
+  expiredAccountFilter();
+  await searchFilterTable();
+});
 </script>
 
 <template>
@@ -315,7 +307,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
     รายการสอบแข่งขัน / คัดเลือก
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
+    <div class="row q-col-gutter-md">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
@@ -421,8 +413,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
         </q-card>
       </div>
       <div class="col-12">
+        {{ rows }}
         <q-table
           ref="table"
+          :row="rows"
           :columns="columns"
           :rows="UpdataData"
           :filter="filterKeyword"
diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index d4bca4107..e1f2d0ea2 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
-import { useRouter } from "vue-router";
+import { useRouter ,useRoute} from "vue-router";
 import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
 import keycloak from "@/plugins/keycloak";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 let roleAdmin = ref<boolean>(false);
-
 const router = useRouter();
+const route = useRoute();
+const examId = route.params.examId;
 const year = ref<string>("2566");
 const round = ref<string>("1");
 const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
@@ -15,14 +18,38 @@ const AddTablePosition = defineAsyncComponent(
   () => import("@/modules/05_placement/components/pass/Table.vue")
 );
 const stat = ref<any>({
-  total: 5,
-  unContain: 1,
-  prepareContain: 3,
-  contain: 1,
+  total: 0,
+  unContain: 0,
+  prepareContain: 0,
+  contain: 0,
   disclaim: 0,
 });
 
+const getStat = async () => {
+  const examIdString = Array.isArray(examId) ? examId[0] : examId;
+
+  try {
+    const res = await http.get(config.API.getStatCard(examIdString));
+    const statCard = res.data.result;
+
+    // อัปเดตค่าในตัวแปร stat
+    stat.value = {
+      total: statCard.total,
+      unContain: statCard.unContain,
+      prepareContain: statCard.prepareContain,
+      contain: statCard.contain,
+      disclaim: statCard.disclaim,
+    };
+
+    console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
+  } catch (error) {
+    console.error("Error retrieving data:", error);
+    // จัดการข้อผิดพลาดที่เกิดขึ้นในการรับข้อมูล
+  }
+};
+
 onMounted(async () => {
+  await getStat()
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 09a822885..cd9e7b0fb 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, watchEffect } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,12 +9,13 @@ 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 http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
@@ -33,7 +34,6 @@ const modalwaitInfo = ref<boolean>(false); //modal add detail
 
 const positionMasterUserNote = ref<string>();
 const positionExecutiveId = ref<string>();
-const visibleColumns = ref<String[]>([]);
 const positionPathSideId = ref<string>();
 const positionLevelId = ref<string>();
 const positionLineId = ref<string>();
@@ -49,8 +49,9 @@ 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[]>([]);
@@ -67,11 +68,10 @@ 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(); //เรียกฟังก์ชันกลาง
@@ -79,9 +79,57 @@ 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 } =
-  mixin;
+
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dateText,
+} = 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 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();
@@ -164,7 +212,7 @@ const fetchPosition = async () => {
       });
       // positionLevelOptionsFilter.value = optionPositionLevels;
     })
-    .catch((e: any) => { })
+    .catch((e: any) => {})
     .finally(() => {
       hideLoader();
     });
@@ -259,29 +307,60 @@ const saveAppoint = async () => {
 const savePostpone = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      if (modal_right.value) {
-        const dataPost = { note: positionMasterUserNote.value, files: files };
-        console.log("save postpone===>", dataPost);
-        positionMasterUserNote.value = "";
-        modal_right.value = false;
-        files.value = null;
-      } else {
-        // await saveData();
-      }
+      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) {
-      if (modal_right.value) {
-        const dataPost = { note: positionMasterUserNote.value };
-        console.log("save disclaim===>", dataPost);
-        positionMasterUserNote.value = "";
-        modal_right.value = false;
-      } else {
-        // await saveData();
-      }
+      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();
+        });
     }
   });
 };
@@ -328,7 +407,7 @@ const fetchPositionNumber = async (id: string) => {
 };
 const getNumFile = ref(0);
 const editDetail = (
-  props: TableName,
+  props: PartialTableName,
   action: "cancel" | "wait" | "waitInfo"
 ) => {
   if (action === "cancel") {
@@ -338,6 +417,7 @@ const editDetail = (
     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;
@@ -345,6 +425,7 @@ const editDetail = (
     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;
@@ -352,20 +433,21 @@ const editDetail = (
     modalwaitInfo.value = true;
     edit.value = true;
     Name.value = props.fullName;
+    personId.value = props.personalId;
   }
 };
-placementData.mappingPosition.columns.length == 0
-  ? (visibleColumns.value = [
-    "position",
-    "Name",
-    "ExamOrder",
-    "Unit",
-    "ReportingDate",
-    "BMAOfficer",
-    "Status",
-    "checkList",
-  ])
-  : (visibleColumns.value = placementData.mappingPosition.columns);
+const visibleColumns = ref<any[]>([
+  "position",
+  "fullName",
+  "number",
+  "idCard",
+  "positionNumber",
+  "organizationName",
+  "reportingDate",
+  "bmaOfficer",
+  "statusId",
+]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -377,62 +459,61 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "Name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-สกุล",
     sortable: true,
-    field: "Name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
-    name: "ExamOrder",
+    name: "number",
     align: "center",
     label: "ลำดับที่สอบได้",
     sortable: true,
-    field: "ExamOrder",
+    field: "number",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "Unit",
+    name: "organizationName",
     align: "left",
     label: "หน่วยงานที่รับการบรรจุ",
     sortable: true,
-    field: "Unit",
+    field: "organizationName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "ReportingDate",
+    name: "reportingDate",
     align: "left",
     label: "วันที่รายงานตัว",
     sortable: true,
-    field: "ReportingDate",
+    field: "reportingDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "BMAOfficer",
+    name: "bmaOfficer",
     align: "left",
     label: "สถานภาพ",
     sortable: true,
-    field: "BMAOfficer",
+    field: "bmaOfficer",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "Status",
+    name: "statusId",
     align: "left",
     label: "สถานะการบรรจุ",
     sortable: true,
-    field: "Status",
+    field: "statusId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -440,284 +521,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = ref<TableName[]>([
-  { 
-    personalId:"test11111",
-    profileID: "4016500103241",
-    position: 1,
-    fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 1,
-    unitId: "",
-    UnitGroup: "",
-    Unit: "",
-    ReportingDate: "-", //วันที่รายงานตัว
-    BMAOfficer: "ขรก.กทม. สามัญ",
-    Status: "สละสิทธิ์",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  { personalId:"",
-    profileID: "4016500092355",
-    position: 2,
-    fullName: "นางสาวรัชภรณ์ ภักดี",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 2,
-    unitId: "",
-    UnitGroup: "",
-    Unit: "",
-    ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: "บุคคลภายนอก",
-    Status: "ยังไม่บรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  { personalId:"",
-    profileID: "4016500086436",
-    position: 3,
-    fullName: "นางสาวภาพรรณ ลออ",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 3,
-    unitId: "",
-    UnitGroup: "",
-    Unit: "",
-    ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: "ลูกจ้างชั่วคราว",
-    Status: "ยังไม่บรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-
-  {personalId:"",
-    profileID: "4016500073585",
-    position: 4,
-    fullName: "นางกติมา พนมเทียน",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 4,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.1)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ลูกจ้างประจำ",
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-
-  {personalId:"",
-    profileID: "4016500053234",
-    position: 5,
-    fullName: "นางสาววิยฎา ทองเอียด",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 5,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.2)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ขรก.กทม. สามัญ",
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  {personalId:"",
-    profileID: "4016500042345",
-    position: 6,
-    fullName: "นายศรุณ เจริญเมือง",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "ชาย",
-    ExamOrder: 6,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.3)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "บุคคลภายนอก",
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  {personalId:"",
-    profileID: "401650002245",
-    position: 7,
-    fullName: "นายอภินัน บอบู่",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "ชาย",
-    ExamOrder: 7,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.4)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ขรก.กทม. สามัญ",
-    Status: "บรรจุเเล้ว",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  // {
-  //   profileID: "401650002245",
-  //   position: 7,
-  //   fullName: "นายอภินัน บอบู่",
-  //   dateOfBirth: "17 ก.พ. 2535",
-  //   gender: "ชาย",
-  //   ExamOrder: 7,
-  //   unitId: "",
-  //   UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-  //   Unit: "นักทรัพยากรบุคคล (กบห.4)",
-  //   ReportingDate: "2023-05-30", //วันที่รายงานตัว
-  //   BMAOfficer: "ลูกจ้างชั่วคราว",
-  //   Status: "ขอผ่อนผัน",
-  //   checkList: null,
-  //   address:
-  //     "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-  //   university: "มหาวิทยาลัยบูรพา",
-  //   degree: "การศึกษาบัณฑิต",
-  //   major: "เทคโนโลยีการศึกษา",
-  //   remark: "-",
-  //   number: 3,
-  //   examCount: 5,
-  //   scoreResult: {
-  //     scoreAFull: 200,
-  //     scoreA: 133,
-  //     scoreBFull: 200,
-  //     scoreB: 149,
-  //     scoreCFull: 100,
-  //     scoreC: 0,
-  //     scoreSumFull: 500,
-  //     scoreSum: 282,
-  //     examResult: "ผ่าน",
-  //   },
-  // },
-]);
-
 const refOptions = ref<DataOption[]>([
   {
     id: "0",
@@ -948,7 +751,7 @@ const refOptionsFilter = ref<DataOption[]>([
     name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
   },
 ]);
-const itemtest = ref<string>({});
+const itemtest = ref<object>({});
 
 const openAppointModal = (value: any) => {
   appointModal.value = true;
@@ -1024,11 +827,9 @@ const save = () => {
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin)
-
-
+    console.log("roleAdmin===>", roleAdmin);
   }
-
+  await getTable();
   await fetchPosition();
   await nodeTree();
   // await fetchData();
@@ -1078,101 +879,233 @@ const listKeyId = (data: any) => {
 
 const expiredAccount = ref<boolean>(false);
 
-
 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-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
-
-        <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
-          class="cursor-pointer">
-          <div v-if="col.name == 'Name'" class="table_ellipsis">
-            {{ col.value }}
-            <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.profileID }}
+  <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>
-            </div>
-          </div>
-          <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-            <div v-if="props.row.Status == 'ยังไม่บรรจุ' ||
-              props.row.Status == 'สละสิทธิ์'
-              ">
-              -
-            </div>
-            <div v-else>
-              {{ props.row.UnitGroup }}
-              <p>{{ col.value }}</p>
-            </div>
-          </div>
-          <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
-            {{ mixin.date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn v-if="props.row.Status !== 'สละสิทธิ์' &&
-            props.row.Status !== 'บรรจุเเล้ว'
-            " 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 === true && props.row.Status === 'ยังไม่บรรจุ'" 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 === true && props.row.Status === 'ยังไม่บรรจุ'" 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.Status === 'ขอผ่อนผัน'" 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.Status === 'ยังไม่บรรจุ' ||
-                  props.row.Status === 'เตรียมบรรจุ'
-                  " 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> -->
+            </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>
@@ -1184,25 +1117,50 @@ watch(expiredAccount, () => {
             <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">
+                  <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>
+                  <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">
+                        <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-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>
@@ -1215,31 +1173,51 @@ watch(expiredAccount, () => {
                       </div>
                     </template>
                     <template v-slot:header-person="prop">
-                      <q-item clickable :active="clickAction === prop.node.keyId" @click="
-                        clickAction =
-                        prop.node.name == `ว่าง` ||
+                      <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
-                          ? 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%" />
+                            ? '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
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium text-red"
+                        >
                           ว่าง
                         </div>
                         <!--=====หัวหน้า สีเขียว=====-->
@@ -1264,8 +1242,13 @@ watch(expiredAccount, () => {
                         <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-icon
+                          v-if="prop.node.positionLeaderFlag"
+                          class="q-mr-sm"
+                          size="15px"
+                          color="primary"
+                          name="mdi-bookmark"
+                        ></q-icon>
 
                         <q-space />
                       </q-item>
@@ -1280,24 +1263,46 @@ watch(expiredAccount, () => {
                   <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">
+                      <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="[
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
                               (val: string) =>
                                 !!val ||
                                 `${'วันที่รายงานตัว'}`,
-                            ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                            ]"
+                            :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
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
                               </q-icon>
                             </template>
                           </q-input>
@@ -1306,58 +1311,145 @@ watch(expiredAccount, () => {
                     </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="`${'เลขที่ตำแหน่ง'}`" />
+                      <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="`${'ตำแหน่ง'}`" />
+                      <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="`${'ด้าน/สาขา'}`" />
+                      <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="`${'ประเภทตำแหน่ง'}`" />
+                      <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="`${'สายงาน'}`" />
+                      <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 />
+                      <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 />
+                      <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>
 
                     <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="[
+                      <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 />
+                        ]"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
                     </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="mouthSalaryAmount" :rules="[
+                      <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 />
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -1367,29 +1459,60 @@ watch(expiredAccount, () => {
         </q-card-section>
 
         <q-separator />
-        <DialogFooter v-model:editvisible="edit" :validate="validateData" v-model:modalEdit="modalEdit"
-          :save="saveAppoint" />
+        <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" />
+    <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" />
+        <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">
+            <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>
@@ -1397,8 +1520,12 @@ watch(expiredAccount, () => {
           </div>
         </q-card-section>
         <q-separator />
-        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :validate="validateData"
-          :save="modalEdit ? savePostpone : saveDisclaim" />
+        <DialogFooter
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+          :validate="validateData"
+          :save="modalEdit ? savePostpone : saveDisclaim"
+        />
       </q-form>
     </q-card>
   </q-dialog>
@@ -1407,7 +1534,10 @@ watch(expiredAccount, () => {
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
       <q-form ref="myForm">
-        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <DialogHeader
+          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row">
@@ -1417,7 +1547,14 @@ watch(expiredAccount, () => {
           <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" />
+            <q-btn
+              color="primary"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-download"
+            />
           </div>
         </q-card-section>
         <q-separator />
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index fe67f39a5..0cfc57ac8 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -48,6 +48,7 @@ interface PartialTableName {
   positionPath: string;
   reportingDate: string;
   bmaOfficer: string;
+  number: number;
   statusId: string;
   disclaim: string;
 }