From c296bdfc48cd2b8d8a0147ca91b57b71f87d841a Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 4 Jul 2023 09:41:24 +0700
Subject: [PATCH 01/19] no message

---
 src/api/05_placement/api.placement.ts         |  12 +-
 src/modules/05_placement/components/Main.vue  | 242 ++++++++----------
 .../05_placement/components/pass/Table.vue    |  22 +-
 .../components/pass/TableDetail.vue           |  81 +++++-
 .../05_placement/interface/request/Main.ts    |  13 +-
 .../interface/request/placement.ts            |   1 +
 src/modules/05_placement/router.ts            |   2 +-
 src/modules/05_placement/store.ts             |  20 +-
 8 files changed, 219 insertions(+), 174 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index bd9f76127..cc5248697 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -1,6 +1,8 @@
-/**
- * api บรรจุ แต่งตั้ง ย้าย โอน
- */
-import env from "../index";
+import env from "../index"
+const placement = `${env.API_URI}/Placement/placement`
 
-export default {};
+export default {
+	MainDetail: () => `${placement}`,
+	yearOptions: () => `${placement}/fiscal`,
+	redirectToPage: (examId:string) => `${placement}/pass/${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 c4180bdfe..384a9cb6c 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, useAttrs } from "vue";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
 import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
 
-const DataStore = usePlacementDataStore();
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const DataStore = usePlacementDataStore();
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dateText } = mixin;
+const { dateText, messageError } = mixin;
 
 // แปลงเวลา ค.ศ ให้เป็น พ.ศ
 const textDate = (value: Date) => {
@@ -29,62 +33,73 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "examRound",
+    name: "name",
     align: "left",
     label: "รอบการสอบ",
     sortable: true,
-    field: "examRound",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "examOrder",
+    name: "round",
     align: "left",
     label: "ครั้งที่",
     sortable: true,
-    field: "examOrder",
+    field: "round",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "fiscalYear",
+    name: "year",
     align: "left",
     label: "ปีงบประมาณ",
     sortable: true,
-    field: "fiscalYear",
+    field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "numberofCandidates",
+    name: "number",
     align: "left",
     label: "จำนวนผู้สอบได้",
     sortable: false,
-    field: "numberofCandidates",
+    field: "number",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "examType",
+    name: "placementType",
     align: "left",
     label: "ประเภทการสอบ",
     sortable: false,
-    field: "examType",
+    field: "placementType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "accountExpirationDate",
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มคำสั่ง",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
     align: "left",
     label: "วันที่บัญชีหมดอายุ",
     sortable: true,
-    field: "accountExpirationDate",
+    field: "endDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -95,74 +110,34 @@ const columns = ref<QTableProps["columns"]>([
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormPlacementMainData[]>([
   {
-    id: 1,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 3,
-    fiscalYear: 2023,
-    numberofCandidates: 8,
-    examType: 1,
-    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
-  },
-  {
-    id: 2,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2023,
-    numberofCandidates: 12,
-    examType: 1,
-    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
-  },
-  {
-    id: 3,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2023,
-    numberofCandidates: 20,
-    examType: 1,
-    accountExpirationDate: "2023-01-31T14:47:04.1785384Z",
-  },
-  {
-    id: 4,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2022,
-    numberofCandidates: 16,
-    examType: 2,
-    accountExpirationDate: "2023-11-30T14:47:04.1785384Z",
-  },
-  {
-    id: 5,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 1,
-    fiscalYear: 2021,
-    numberofCandidates: 20,
-    examType: 2,
-    accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
+    id: 0,
+    name: "",
+    round:0 ,
+    year: 0,
+    number: 0,
+    placementType: 0,
+    startDate: "",
+    endDate: "",
   },
+ 
 ]);
 
 let OriginalData = ref<FormPlacementMainData[]>([]);
 let UpdataData = ref<FormPlacementMainData[]>([]);
 
 const OriginalDataFetch = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  await DataStore.DataMain(rows.value);
-  OriginalData.value = await DataStore.DataMainOrig;
-  UpdataData.value = OriginalData.value;
+  await http
+    .get(config.API.MainDetail())
+    .then(async (res: any) => {
+      console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", res.data.result);
+      await DataStore.DataMain(res.data.result);
+      OriginalData.value = await DataStore.DataMainOrig;
+      UpdataData.value = OriginalData.value;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {});
 };
 
 onMounted(async () => {
@@ -175,9 +150,9 @@ onMounted(async () => {
 });
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
-const redirectToPage = (id?: number) => {
+const redirectToPage = (examId?: number) => {
   // router.push({ name: 'placementDetail'});
-  router.push(`/placement/detail`);
+  router.push(`/placement/pass/${examId}`);
 };
 
 // เลือกปีงบประมาณ
@@ -186,44 +161,35 @@ const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหม
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
   // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear + 543;
-
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
-
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
+  await http
+    .get(config.API.yearOptions())
+    .then((res: any) => {
+      console.log("🚀 ", res.data.result);
+      for (let data of res.data.result) {
+        fiscalyearOP.push(data);
+      }
+      //  DataStore.DataMainYearSet(rows.value);
+      //  fiscalyearOP.value = DataStore.DataMainYearGet;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {});
 };
 
 // เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
+const searchfiscalyear = async () => {
   console.log("Input value changed:", fiscalyear.value);
   // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
+  await http
+    .get(config.API.yearOptions())
+    .then((res: any) => {
+      console.log("🚀date", res);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {});
 };
 
 // ค้นหาในตาราง
@@ -235,14 +201,15 @@ const resetFilter = () => {
 };
 
 const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<string[]>([
-  "id",
-  "examRound",
-  "examOrder",
-  "fiscalYear",
-  "numberofCandidates",
-  "examType",
-  "accountExpirationDate",
+const visibleColumns = ref<any[]>([
+"id",
+"name",
+"round",
+"year",
+"number",
+"placementType",
+"startDate",
+"endDate",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // ครั้งที่สอบ
@@ -250,8 +217,8 @@ const examTime = ref<number | null>(null);
 const examTimeOP = ref<number[]>([]);
 const examTimeFilter = async () => {
   for (let data of OriginalData.value) {
-    if (!examTimeOP.value.includes(data.examOrder)) {
-      examTimeOP.value.push(data.examOrder);
+    if (!examTimeOP.value.includes(data.round)) {
+      examTimeOP.value.push(data.round);
     }
   }
   examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
@@ -263,7 +230,7 @@ const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด
 const addedexamTypeValues: number[] = [];
 const examTypeFilter = async () => {
   for (let data of OriginalData.value) {
-    const examTypeValue = data.examType;
+    const examTypeValue = data.placementType;
     if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
       examTypeOP.push({ id: 1, name: "คัดเลือก" });
       addedexamTypeValues.push(1);
@@ -289,7 +256,7 @@ const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
   const currentDate = new Date();
   const updatedRows = OriginalData.value.map((data) => {
-    let expirationDate = new Date(data.accountExpirationDate);
+    let expirationDate = new Date(data.endDate);
     let isExpired = expirationDate < currentDate;
 
     return { ...data, isExpired };
@@ -298,7 +265,7 @@ const expiredAccountFilter = async () => {
 };
 
 const paging = ref<boolean>(true);
-  const pagination = ref({
+const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
@@ -454,25 +421,28 @@ const paginationLabel = (start: string, end: string, total: string) => {
               @click="redirectToPage(props.row.id)"
             >
               <q-td key="id" :props="props">
-                {{ props.row.id }}
+                {{ props.rowIndex+1 }}
               </q-td>
-              <q-td key="examRound" :props="props">
-                {{ props.row.examRound }}
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
               </q-td>
-              <q-td key="examOrder" :props="props">
-                {{ props.row.examOrder }}
+              <q-td key="round" :props="props">
+                {{ props.row.round }}
               </q-td>
-              <q-td key="fiscalYear" :props="props">
-                {{ props.row.fiscalYear + 543 }}
+              <q-td key="year" :props="props">
+                {{ props.row.year + 543 }}
               </q-td>
-              <q-td key="numberofCandidates" :props="props">
-                {{ props.row.numberofCandidates }}
+              <q-td key="number" :props="props">
+                {{ props.row.number }}
               </q-td>
-              <q-td key="examType" :props="props">
-                {{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
+              <q-td key="placementType" :props="props">
+                {{ props.row.placementType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
               </q-td>
-              <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
+              <q-td key="startDate" :props="props">
+                {{ textDate(props.row.startDate) }}
+              </q-td>
+              <q-td key="endDate" :props="props">
+                {{ textDate(props.row.endDate) }}
               </q-td>
             </q-tr>
           </template>
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index cc7a50eb6..3f77f2203 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -9,7 +9,6 @@ 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  Deferment  from "@/modules/05_placement/components/pass/Deferment.vue";
 import type {
   treeTab,
   DataOption,
@@ -291,7 +290,7 @@ const getClass = (val: boolean) => {
   };
 };
 const selectData = (props: TableName) => {
-  itemtest.value = props;
+  itemtest.value = props.personalId;
   modal.value = true;
 };
 const onSelected = async (id: string) => {
@@ -432,7 +431,8 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const rows = ref<TableName[]>([
-  {
+  { 
+    personalId:"test11111",
     profileID: "4016500103241",
     position: 1,
     fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
@@ -466,7 +466,7 @@ const rows = ref<TableName[]>([
       examResult: "ผ่าน",
     },
   },
-  {
+  { personalId:"",
     profileID: "4016500092355",
     position: 2,
     fullName: "นางสาวรัชภรณ์ ภักดี",
@@ -500,7 +500,7 @@ const rows = ref<TableName[]>([
       examResult: "ผ่าน",
     },
   },
-  {
+  { personalId:"",
     profileID: "4016500086436",
     position: 3,
     fullName: "นางสาวภาพรรณ ลออ",
@@ -535,7 +535,7 @@ const rows = ref<TableName[]>([
     },
   },
 
-  {
+  {personalId:"",
     profileID: "4016500073585",
     position: 4,
     fullName: "นางกติมา พนมเทียน",
@@ -570,7 +570,7 @@ const rows = ref<TableName[]>([
     },
   },
 
-  {
+  {personalId:"",
     profileID: "4016500053234",
     position: 5,
     fullName: "นางสาววิยฎา ทองเอียด",
@@ -604,7 +604,7 @@ const rows = ref<TableName[]>([
       examResult: "ผ่าน",
     },
   },
-  {
+  {personalId:"",
     profileID: "4016500042345",
     position: 6,
     fullName: "นายศรุณ เจริญเมือง",
@@ -638,7 +638,7 @@ const rows = ref<TableName[]>([
       examResult: "ผ่าน",
     },
   },
-  {
+  {personalId:"",
     profileID: "401650002245",
     position: 7,
     fullName: "นายอภินัน บอบู่",
@@ -672,7 +672,7 @@ const rows = ref<TableName[]>([
       examResult: "ผ่าน",
     },
   },
-  {
+  {personalId:"",
     profileID: "401650002245",
     position: 7,
     fullName: "นายอภินัน บอบู่",
@@ -938,7 +938,7 @@ const refOptionsFilter = ref<DataOption[]>([
     name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
   },
 ]);
-const itemtest = ref<object>({});
+const itemtest = ref<string>({});
 
 const openAppointModal = (value: any) => {
   appointModal.value = true;
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index b031d2121..bd7c159af 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -6,10 +6,35 @@ import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vu
 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";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const modal = ref<boolean>();
-const { success } = mixin;
+const graduationExample = "2023-03-01T00:00:00";
+const $q = useQuasar();
+
+const { success, date2Thai,messageError,
+showLoader ,hideLoader} = mixin;
 const save = ref<boolean>(true);
+const uid = ref<any>()
+const idCard = ref<any>()
+const fullName = ref<any>()
+const dateOfBirth = ref<any>()
+const gender = ref<any>()
+const address = ref<any>()
+const education = ref<any>()
+const pointA = ref<any>()
+const pointB = ref<any>()
+const pointC = ref<any>()
+const pointTotalA = ref<any>()
+const pointTotalB = ref<any>()
+const pointTotalC = ref<any>()
+const point = ref<any>()
+const pointTotal = ref<any>()
+const examNumber = ref<any>()
+const examRound = ref<any>()
+const pass = ref<any>()
+const isProperty = ref<any>()
 const props = defineProps({
   Modal: Boolean,
   close: {
@@ -25,15 +50,61 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
+
+// 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[]>([
   {
     university: props.getdetail.university || "-",
     degree: props.getdetail.degree || "-",
     major: props.getdetail.major || "-",
-    graduation: "2022-01-01",
+    graduation: "",
   },
-
 ]);
+//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
+const graduationDate = new Date(graduationExample);
+rows.value[0].graduation = date2Thai(graduationDate, false, false);
+
+//--------------------------------------------------------------------//
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "university",
@@ -125,7 +196,6 @@ const checkboxItems: CheckboxItem[] = [
       "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
   },
 ];
-const $q = useQuasar();
 function isRequired(val: any): boolean | string {
   return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
 }
@@ -164,7 +234,7 @@ const close = async () => {
       <q-form ref="myForm">
         <div class="row">
           <DialogHeader
-            :title="`รายละเอียดของ ${props.getdetail.fullName}`"
+            :title="`รายละเอียดของ ${fullName}`"
             @click="close"
           />
         </div>
@@ -231,6 +301,7 @@ const close = async () => {
                 virtual-scroll
                 :virtual-scroll-sticky-size-start="48"
                 dense
+                hide-bottom
               >
               </q-table>
             </q-card>
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index cf01f9fe4..13d6cd0a9 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -1,12 +1,13 @@
 // ข้อมูลรายการสอบแข่งขัน/คัดเลือก
 interface FormPlacementMainData {
   id: number;
-  examRound: string;
-  examOrder: number;
-  fiscalYear: number;
-  numberofCandidates: number;
-  examType: number;
-  accountExpirationDate: string;
+  name: string;
+  round: number;
+  year: number;
+  number: number;
+  placementType: number;
+  startDate: string;
+  endDate: string;
   isExpired?: boolean;
 }
 
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index 541e5ccb7..b03008bdd 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -1,4 +1,5 @@
 interface TableName {
+  personalId: string;
   profileID: string;
   position: number;
   fullName: string;
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 22a1e2206..6c3074a71 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -33,7 +33,7 @@ export default [
     },
   },
   {
-    path: "/placement/detail",
+    path: "/placement/pass/:examId",
     name: "placementDetail",
     component: PlacementDetail,
     meta: {
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 296a38b78..8c22fb6c3 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -123,25 +123,25 @@ export const usePlacementDataStore = defineStore("placement", () => {
     } else if (filter_1 !== null && filter_2 === 0 && filter_3 === false) {
       // console.log('case 2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examOrder === filter_1 && item.isExpired === filter_3
+        (item) => item.round === filter_1 && item.isExpired === filter_3
       ));
     } else if (filter_1 !== null && filter_2 === null && filter_3 === false) {
       // console.log('case 2.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examOrder === filter_1 && item.isExpired === filter_3
+        (item) => item.round === filter_1 && item.isExpired === filter_3
       ));
     } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === false) {
       // console.log('case 2.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
-          item.examOrder === filter_1 &&
-          item.examType === filter_2 &&
+          item.round === filter_1 &&
+          item.placementType === filter_2 &&
           item.isExpired === filter_3
       ));
     } else if (filter_1 === null && filter_2 !== 0 && filter_3 === false) {
       // console.log('case 3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examType === filter_2 && item.isExpired === filter_3
+        (item) => item.placementType === filter_2 && item.isExpired === filter_3
       ));
     } else if (filter_1 === null && filter_2 === 0 && filter_3 === true) {
       // console.log('case 3.1');
@@ -156,25 +156,25 @@ export const usePlacementDataStore = defineStore("placement", () => {
     } else if (filter_1 !== null && filter_2 === 0 && filter_3 === true) {
       // console.log('case 3.3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examOrder == filter_1 && item.isExpired == filter_3
+        (item) => item.round == filter_1 && item.isExpired == filter_3
       ));
     } else if (filter_1 !== null && filter_2 === null && filter_3 === true) {
       // console.log('case 3.4');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examOrder == filter_1 && item.isExpired == filter_3
+        (item) => item.round == filter_1 && item.isExpired == filter_3
       ));
     } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === true) {
       // console.log('case 3.5');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
-          item.examOrder == filter_1 &&
-          item.examType == filter_2 &&
+          item.round == filter_1 &&
+          item.placementType == filter_2 &&
           item.isExpired == filter_3
       ));
     } else if (filter_1 === null && filter_2 !== 0 && filter_3 === true) {
       // console.log('case 3.6');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examType == filter_2 && item.isExpired == filter_3
+        (item) => item.placementType == filter_2 && item.isExpired == filter_3
       ));
     }
   };

From dd6ae8c04d2898ab81d573e05a5af4c7ade3fa1c Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 5 Jul 2023 10:00:36 +0700
Subject: [PATCH 02/19] no message

---
 src/api/05_placement/api.placement.ts         |   2 +-
 src/modules/05_placement/components/Main.vue  | 180 ++++++++++--------
 .../05_placement/interface/index/Main.ts      |   4 +-
 .../05_placement/interface/request/Main.ts    |  15 +-
 src/modules/05_placement/store.ts             |  46 ++---
 5 files changed, 132 insertions(+), 115 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index cc5248697..76ac2d2de 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -2,7 +2,7 @@ import env from "../index"
 const placement = `${env.API_URI}/Placement/placement`
 
 export default {
-	MainDetail: () => `${placement}`,
+	MainDetail: (year:number) => `${placement}/exam/${year}`,
 	yearOptions: () => `${placement}/fiscal`,
 	redirectToPage: (examId:string) => `${placement}/pass/${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 384a9cb6c..b01465ec0 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -33,73 +33,73 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "examRound",
     align: "left",
     label: "รอบการสอบ",
     sortable: true,
-    field: "name",
+    field: "examRound",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "round",
+    name: "examOrder",
     align: "left",
     label: "ครั้งที่",
     sortable: true,
-    field: "round",
+    field: "examOrder",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "year",
+    name: "fiscalYear",
     align: "left",
     label: "ปีงบประมาณ",
     sortable: true,
-    field: "year",
+    field: "fiscalYear",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "number",
+    name: "numberOfCandidates",
     align: "left",
     label: "จำนวนผู้สอบได้",
     sortable: false,
-    field: "number",
+    field: "numberOfCandidates",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "placementType",
+    name: "examTypeName",
     align: "left",
     label: "ประเภทการสอบ",
     sortable: false,
-    field: "placementType",
+    field: "examTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "startDate",
+    name: "accountStartDate",
     align: "left",
     label: "วันที่เริ่มคำสั่ง",
     sortable: true,
-    field: "startDate",
+    field: "accountStartDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "endDate",
+    name: "accountExpirationDate",
     align: "left",
     label: "วันที่บัญชีหมดอายุ",
     sortable: true,
-    field: "endDate",
+    field: "accountExpirationDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -111,23 +111,23 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<FormPlacementMainData[]>([
   {
     id: 0,
-    name: "",
-    round:0 ,
-    year: 0,
-    number: 0,
-    placementType: 0,
-    startDate: "",
-    endDate: "",
+    examRound: "",
+    examOrder: 0,
+    fiscalYear: 0,
+    numberOfCandidates: 0,
+    examTypeValue:"",
+    examTypeName: "",
+    accountStartDate: "",
+    accountExpirationDate: "",
   },
- 
 ]);
 
 let OriginalData = ref<FormPlacementMainData[]>([]);
 let UpdataData = ref<FormPlacementMainData[]>([]);
 
-const OriginalDataFetch = async () => {
+const OriginalDataFetch = async (year: number) => {
   await http
-    .get(config.API.MainDetail())
+    .get(config.API.MainDetail(year)) // ส่งปีที่เลือกมาเป็นอาร์กิวเมนต์ในการเรียก API
     .then(async (res: any) => {
       console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", res.data.result);
       await DataStore.DataMain(res.data.result);
@@ -141,12 +141,12 @@ const OriginalDataFetch = async () => {
 };
 
 onMounted(async () => {
-  await OriginalDataFetch();
-  fiscalYearFilter();
+  await fiscalYearFilter(); // เรียกใช้ await เพื่อรอให้ fiscalYearFilter() เสร็จสิ้น
+  await OriginalDataFetch(fiscalyear.value); // ส่งค่าปีที่เลือกจาก fiscalyear เป็นอาร์กิวเมนต์ให้กับ OriginalDataFetch()
   examTimeFilter();
-  examTypeFilter();
-  await expiredAccountFilter();
-  searchFilterTable();
+  await examTypeFilter();
+  expiredAccountFilter();
+  await searchFilterTable();
 });
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
@@ -156,25 +156,30 @@ const redirectToPage = (examId?: number) => {
 };
 
 // เลือกปีงบประมาณ
-const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyear = ref<number>(0);
+const fiscalyearOP = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
-  // API
+  let maxYear = 0; // เพิ่มตัวแปร maxYear
   await http
     .get(config.API.yearOptions())
     .then((res: any) => {
       console.log("🚀 ", res.data.result);
       for (let data of res.data.result) {
         fiscalyearOP.push(data);
+
+        if (data.id > maxYear) {
+          maxYear = data.id; // อัพเดตค่า maxYear ถ้าพบปีที่มากกว่า
+        }
       }
-      //  DataStore.DataMainYearSet(rows.value);
-      //  fiscalyearOP.value = DataStore.DataMainYearGet;
     })
     .catch((e: any) => {
       messageError($q, e);
     })
-    .finally(async () => {});
+    .finally(async () => {
+      // ตั้งค่า fiscalyear เป็นค่าหลักปีที่มากที่สุด
+      fiscalyear.value = maxYear;
+    });
 };
 
 // เลือกปีงบประมาณตาม API
@@ -202,14 +207,15 @@ const resetFilter = () => {
 
 const attrs = ref<any>(useAttrs());
 const visibleColumns = ref<any[]>([
-"id",
-"name",
-"round",
-"year",
-"number",
-"placementType",
-"startDate",
-"endDate",
+  "id",
+  "examRound",
+  "examOrder",
+  "fiscalYear",
+  "numberOfCandidates",
+  "examTypeValue",
+  "examTypeName",
+  "accountStartDate",
+  "accountExpirationDate",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // ครั้งที่สอบ
@@ -217,38 +223,48 @@ const examTime = ref<number | null>(null);
 const examTimeOP = ref<number[]>([]);
 const examTimeFilter = async () => {
   for (let data of OriginalData.value) {
-    if (!examTimeOP.value.includes(data.round)) {
-      examTimeOP.value.push(data.round);
+    if (!examTimeOP.value.includes(data.examOrder)) {
+      examTimeOP.value.push(data.examOrder);
     }
   }
   examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
 };
 
 // ประเภทการสอบ
-const examType = ref<number | null>(0);
-const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedexamTypeValues: number[] = [];
-const examTypeFilter = async () => {
-  for (let data of OriginalData.value) {
-    const examTypeValue = data.placementType;
-    if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
-      examTypeOP.push({ id: 1, name: "คัดเลือก" });
-      addedexamTypeValues.push(1);
-    } else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) {
-      examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
-      addedexamTypeValues.push(2);
+
+const examType = ref<string | null>("");
+const examTypeOP = reactive<DataOption[]>([
+  { id: "", name: "ทั้งหมด" },
+]);
+const addedExamTypeValues: Set<string> = new Set();
+  const examTypeFilter = async () => {
+  for (const data of OriginalData.value) {
+    const examTypeName = data.examTypeName;
+    const examTypeValue = data.examTypeValue;
+
+    if (
+      examTypeName &&
+      !addedExamTypeValues.has(examTypeName)
+    ) {
+      examTypeOP.push({
+        id: examTypeValue,
+        name: examTypeName,
+      });
+      addedExamTypeValues.add(examTypeName);
     }
   }
 };
 
+
 const searchFilterTable = async () => {
-  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-  await DataStore.DataUpdateMain(
-    examTime.value,
-    examType.value,
-    expiredAccount.value
-  );
-  UpdataData.value = DataStore.DataMainUpdate;
+  if (examType.value !== undefined && examType.value !== null) {
+    await DataStore.DataUpdateMain(
+      examTime.value,
+      examType.value,
+      expiredAccount.value
+    );
+    UpdataData.value = DataStore.DataMainUpdate;
+  }
 };
 
 // บัญชีหมดอายุ
@@ -256,7 +272,7 @@ const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
   const currentDate = new Date();
   const updatedRows = OriginalData.value.map((data) => {
-    let expirationDate = new Date(data.endDate);
+    let expirationDate = new Date(data.accountExpirationDate);
     let isExpired = expirationDate < currentDate;
 
     return { ...data, isExpired };
@@ -366,9 +382,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
               dense
               emit-value
               map-options
-              option-label="name"
+              option-label="examTypeName"
               :options="examTypeOP"
-              option-value="id"
+              option-value="examTypeValue"
               lazy-rules
               hide-bottom-space
               :readonly="false"
@@ -421,28 +437,28 @@ const paginationLabel = (start: string, end: string, total: string) => {
               @click="redirectToPage(props.row.id)"
             >
               <q-td key="id" :props="props">
-                {{ props.rowIndex+1 }}
+                {{ props.rowIndex + 1 }}
               </q-td>
-              <q-td key="name" :props="props">
-                {{ props.row.name }}
+              <q-td key="examRound" :props="props">
+                {{ props.row.examRound }}
               </q-td>
-              <q-td key="round" :props="props">
-                {{ props.row.round }}
+              <q-td key="examOrder" :props="props">
+                {{ props.row.examOrder }}
               </q-td>
-              <q-td key="year" :props="props">
-                {{ props.row.year + 543 }}
+              <q-td key="fiscalYear" :props="props">
+                {{ props.row.fiscalYear }}
               </q-td>
-              <q-td key="number" :props="props">
-                {{ props.row.number }}
+              <q-td key="numberOfCandidates" :props="props">
+                {{ props.row.numberOfCandidates }}
               </q-td>
-              <q-td key="placementType" :props="props">
-                {{ props.row.placementType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
+              <q-td key="examTypeName" :props="props">
+                {{ props.row.examTypeName }}
               </q-td>
-              <q-td key="startDate" :props="props">
-                {{ textDate(props.row.startDate) }}
+              <q-td key="accountStartDate" :props="props">
+                {{ textDate(props.row.accountStartDate) }}
               </q-td>
-              <q-td key="endDate" :props="props">
-                {{ textDate(props.row.endDate) }}
+              <q-td key="accountExpirationDate" :props="props">
+                {{ textDate(props.row.accountExpirationDate) }}
               </q-td>
             </q-tr>
           </template>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 1e46a9961..9a87a2ece 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1,7 +1,7 @@
 import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
-  id: number | string;
-  name: string;
+  id: string|null;
+  name:string|null;
   disable?: boolean;
 }
 
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index 13d6cd0a9..a86e0dce2 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -1,13 +1,14 @@
 // ข้อมูลรายการสอบแข่งขัน/คัดเลือก
 interface FormPlacementMainData {
   id: number;
-  name: string;
-  round: number;
-  year: number;
-  number: number;
-  placementType: number;
-  startDate: string;
-  endDate: string;
+  examRound: string;
+  examOrder: number;
+  fiscalYear: number;
+  numberOfCandidates: number;
+  examTypeValue:string;
+  examTypeName: string;
+  accountStartDate: string;
+  accountExpirationDate: string;
   isExpired?: boolean;
 }
 
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 4d0c90cc0..cc7bd90b5 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -105,76 +105,76 @@ export const usePlacementDataStore = defineStore("placement", () => {
   const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
   const DataUpdateMain = (
     filter_1: number | null,
-    filter_2: number | null,
+    filter_2: string | null,
     filter_3: boolean
   ) => {
     DataMainUpdate.value = [];
-    if (filter_1 === null && filter_2 === 0 && filter_3 === false) {
+    if (filter_1 === null && filter_2 === "" && filter_3 === false) {
       // console.log('case 1');
       // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === null && filter_3 === false) {
+    } else if (filter_1 === null && filter_2 === "" && filter_3 === false) {
       // console.log('case 1.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === 0 && filter_3 === false) {
+    } else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
       // console.log('case 2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.round === filter_1 && item.isExpired === filter_3
+        (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === null && filter_3 === false) {
+    } else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
       // console.log('case 2.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.round === filter_1 && item.isExpired === filter_3
+        (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === false) {
+    } else if (filter_1 !== null && filter_2 !== "" && filter_3 === false) {
       // console.log('case 2.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
-          item.round === filter_1 &&
-          item.placementType === filter_2 &&
+          item.examOrder === filter_1 &&
+          item.examTypeValue === filter_2 &&
           item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== 0 && filter_3 === false) {
+    } else if (filter_1 === null && filter_2 !== "" && filter_3 === false) {
       // console.log('case 3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.placementType === filter_2 && item.isExpired === filter_3
+        (item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === 0 && filter_3 === true) {
+    } else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
       // console.log('case 3.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === null && filter_3 === true) {
+    } else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
       // console.log('case 3.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === 0 && filter_3 === true) {
+    } else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
       // console.log('case 3.3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.round == filter_1 && item.isExpired == filter_3
+        (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === null && filter_3 === true) {
+    } else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
       // console.log('case 3.4');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.round == filter_1 && item.isExpired == filter_3
+        (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === true) {
+    } else if (filter_1 !== null && filter_2 !== "" && filter_3 === true) {
       // console.log('case 3.5');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
-          item.round == filter_1 &&
-          item.placementType == filter_2 &&
+          item.examOrder == filter_1 &&
+          item.examTypeValue == filter_2 &&
           item.isExpired == filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== 0 && filter_3 === true) {
+    } else if (filter_1 === null && filter_2 !== "" && filter_3 === true) {
       // console.log('case 3.6');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.placementType == filter_2 && item.isExpired == filter_3
+        (item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
       ));
     }
   };

From f3ad4d21fbbbfa7d68ef81b9e15c0a659d1a5cb4 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 7 Jul 2023 09:47:46 +0700
Subject: [PATCH 03/19] =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B8=81=20api=20?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AB=E0=B8=99=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=80=E0=B9=80=E0=B8=82=E0=B9=88=E0=B8=87=E0=B8=82?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/Main.vue | 94 ++++++++++----------
 src/modules/05_placement/store.ts            | 26 +++---
 2 files changed, 58 insertions(+), 62 deletions(-)

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index b01465ec0..a0af21bff 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -115,7 +115,7 @@ const rows = ref<FormPlacementMainData[]>([
     examOrder: 0,
     fiscalYear: 0,
     numberOfCandidates: 0,
-    examTypeValue:"",
+    examTypeValue: "",
     examTypeName: "",
     accountStartDate: "",
     accountExpirationDate: "",
@@ -126,23 +126,21 @@ let OriginalData = ref<FormPlacementMainData[]>([]);
 let UpdataData = ref<FormPlacementMainData[]>([]);
 
 const OriginalDataFetch = async (year: number) => {
-  await http
-    .get(config.API.MainDetail(year)) // ส่งปีที่เลือกมาเป็นอาร์กิวเมนต์ในการเรียก API
-    .then(async (res: any) => {
-      console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", res.data.result);
-      await DataStore.DataMain(res.data.result);
-      OriginalData.value = await DataStore.DataMainOrig;
-      UpdataData.value = OriginalData.value;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {});
+  try {
+    const response = await http.get(config.API.MainDetail(year));
+    const apiData = response.data.result;
+    console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", apiData);
+    await DataStore.DataMain(apiData);
+    OriginalData.value = await DataStore.DataMainOrig;
+    UpdataData.value = OriginalData.value;
+  } catch (error) {
+    messageError($q, error);
+  }
 };
 
 onMounted(async () => {
-  await fiscalYearFilter(); // เรียกใช้ await เพื่อรอให้ fiscalYearFilter() เสร็จสิ้น
-  await OriginalDataFetch(fiscalyear.value); // ส่งค่าปีที่เลือกจาก fiscalyear เป็นอาร์กิวเมนต์ให้กับ OriginalDataFetch()
+  await fiscalYearFilter();
+  await OriginalDataFetch(fiscalyear.value);
   examTimeFilter();
   await examTypeFilter();
   expiredAccountFilter();
@@ -151,13 +149,12 @@ onMounted(async () => {
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
-  // router.push({ name: 'placementDetail'});
   router.push(`/placement/pass/${examId}`);
 };
 
-// เลือกปีงบประมาณ
+//-------------------|เลือกปีงบประมาณ|-----------------------//
 const fiscalyear = ref<number>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
+const fiscalyearOP = reactive<DataOption[]>([{ id: null, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
   let maxYear = 0; // เพิ่มตัวแปร maxYear
@@ -182,22 +179,19 @@ const fiscalYearFilter = async () => {
     });
 };
 
-// เลือกปีงบประมาณตาม API
+//-------------------|เลือกปีงบประมาณตาม API|--------------------//
 const searchfiscalyear = async () => {
-  console.log("Input value changed:", fiscalyear.value);
   // API
   await http
     .get(config.API.yearOptions())
-    .then((res: any) => {
-      console.log("🚀date", res);
-    })
+    .then((res: any) => {})
     .catch((e: any) => {
       messageError($q, e);
     })
     .finally(async () => {});
 };
 
-// ค้นหาในตาราง
+//-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -216,37 +210,40 @@ const visibleColumns = ref<any[]>([
   "examTypeName",
   "accountStartDate",
   "accountExpirationDate",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+]);
+
+//-------------------|ครั้งที่สอบ|------------------------------//
+const examTime = ref<number | string>("all");
+const examTimeOP = reactive<DataOption[]>([]);
+const addedExamTimeValues: Set<number> = new Set();
 
-// ครั้งที่สอบ
-const examTime = ref<number | null>(null);
-const examTimeOP = ref<number[]>([]);
 const examTimeFilter = async () => {
-  for (let data of OriginalData.value) {
-    if (!examTimeOP.value.includes(data.examOrder)) {
-      examTimeOP.value.push(data.examOrder);
+  examTimeOP.push({ id: "all", name: "ทั้งหมด" });
+
+  for (const data of OriginalData.value) {
+    const examOrder = data.examOrder;
+    if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
+      examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
+      addedExamTimeValues.add(examOrder);
     }
   }
-  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
+  examTimeOP.sort((a, b) => {
+    if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
+    if (b.id === "all") return 1;
+    return Number(a.id) - Number(b.id);
+  }); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
 };
 
 // ประเภทการสอบ
-
-const examType = ref<string | null>("");
-const examTypeOP = reactive<DataOption[]>([
-  { id: "", name: "ทั้งหมด" },
-]);
+const examType = ref<string | null>("all");
+const examTypeOP = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTypeValues: Set<string> = new Set();
-  const examTypeFilter = async () => {
+const examTypeFilter = () => {
   for (const data of OriginalData.value) {
     const examTypeName = data.examTypeName;
     const examTypeValue = data.examTypeValue;
-
-    if (
-      examTypeName &&
-      !addedExamTypeValues.has(examTypeName)
-    ) {
-      examTypeOP.push({
+    if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
+      examTypeOP.value.push({
         id: examTypeValue,
         name: examTypeName,
       });
@@ -254,8 +251,7 @@ const addedExamTypeValues: Set<string> = new Set();
     }
   }
 };
-
-
+//--------------|ฟิลเตอร์|--------------------------------------//
 const searchFilterTable = async () => {
   if (examType.value !== undefined && examType.value !== null) {
     await DataStore.DataUpdateMain(
@@ -267,7 +263,7 @@ const searchFilterTable = async () => {
   }
 };
 
-// บัญชีหมดอายุ
+//----------------|บัญชีหมดอายุ|-----------------------------//
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
   const currentDate = new Date();
@@ -382,9 +378,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
               dense
               emit-value
               map-options
-              option-label="examTypeName"
+              option-label="name"
               :options="examTypeOP"
-              option-value="examTypeValue"
+              option-value="id"
               lazy-rules
               hide-bottom-space
               :readonly="false"
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index cc7bd90b5..3f51227be 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -104,33 +104,33 @@ export const usePlacementDataStore = defineStore("placement", () => {
     (DataMainYear.value = val);
   const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
   const DataUpdateMain = (
-    filter_1: number | null,
+    filter_1: number | string,
     filter_2: string | null,
     filter_3: boolean
   ) => {
     DataMainUpdate.value = [];
-    if (filter_1 === null && filter_2 === "" && filter_3 === false) {
+    if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1');
       // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === "" && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== "" && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 2.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
@@ -138,32 +138,32 @@ export const usePlacementDataStore = defineStore("placement", () => {
           item.examTypeValue === filter_2 &&
           item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== "" && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.4');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== "" && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.5');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
@@ -171,7 +171,7 @@ export const usePlacementDataStore = defineStore("placement", () => {
           item.examTypeValue == filter_2 &&
           item.isExpired == filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== "" && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.6');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examTypeValue == filter_2 && item.isExpired == filter_3

From 07976376bb6953eba80abe5ec6b95525aa2643c4 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 10 Jul 2023 09:03:56 +0700
Subject: [PATCH 04/19] no message

---
 src/modules/05_placement/components/Main.vue  | 83 ++++++++++++-------
 .../05_placement/interface/index/Main.ts      |  7 +-
 .../interface/request/placement.ts            | 30 +++++--
 3 files changed, 82 insertions(+), 38 deletions(-)

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index a0af21bff..a44c64441 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -3,7 +3,7 @@ import { onMounted, reactive, ref, useAttrs } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption } 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";
@@ -132,12 +132,13 @@ const OriginalDataFetch = async (year: number) => {
     console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", apiData);
     await DataStore.DataMain(apiData);
     OriginalData.value = await DataStore.DataMainOrig;
-    UpdataData.value = OriginalData.value;
+    UpdataData.value = OriginalData.value.filter((data) => data.fiscalYear === year); // ใช้ค่า fiscalYear ในการกรองข้อมูล
   } catch (error) {
     messageError($q, error);
   }
 };
 
+
 onMounted(async () => {
   await fiscalYearFilter();
   await OriginalDataFetch(fiscalyear.value);
@@ -154,43 +155,63 @@ const redirectToPage = (examId?: number) => {
 
 //-------------------|เลือกปีงบประมาณ|-----------------------//
 const fiscalyear = ref<number>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: null, name: "ทั้งหมด" }]);
+const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
-  let maxYear = 0; // เพิ่มตัวแปร maxYear
-  await http
-    .get(config.API.yearOptions())
-    .then((res: any) => {
-      console.log("🚀 ", res.data.result);
-      for (let data of res.data.result) {
-        fiscalyearOP.push(data);
+  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);
 
-        if (data.id > maxYear) {
-          maxYear = data.id; // อัพเดตค่า maxYear ถ้าพบปีที่มากกว่า
-        }
+      if (data.id > maxYear) {
+        maxYear = data.id;
       }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      // ตั้งค่า fiscalyear เป็นค่าหลักปีที่มากที่สุด
-      fiscalyear.value = maxYear;
-    });
+    }
+    fiscalyear.value = maxYear;
+    console.log("Selected Year:", fiscalyear.value);
+    await OriginalDataFetch(fiscalyear.value); // เรียกใช้งานฟังก์ชันที่ดึงข้อมูลใหม่เมื่อมีการเลือกใน fiscalyear
+  } catch (e) {
+    messageError($q, e);
+  }
 };
 
+
 //-------------------|เลือกปีงบประมาณตาม API|--------------------//
+interface YearOption {
+  id: number;
+  name: number;
+}
+
 const searchfiscalyear = async () => {
-  // API
-  await http
-    .get(config.API.yearOptions())
-    .then((res: any) => {})
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(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);
+    
+    if (fiscalyear.value === 0) {
+      // Perform any desired operations for selecting "ทั้งหมด" option
+      // เช่นตัวอย่างข้างล่างนี้ ที่แสดงผลลัพธ์ทั้งหมดใน console.log
+      console.log("All Year Objects:", dataOptions);
+    } else {
+      // Find the selected object based on the chosen year
+      const selectedYearObject = dataOptions.find((option: YearOption) => option.id === 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");
+      }
+    }
+  } catch (e) {
+    messageError($q, e);
+  }
 };
 
+
+
 //-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -214,7 +235,7 @@ const visibleColumns = ref<any[]>([
 
 //-------------------|ครั้งที่สอบ|------------------------------//
 const examTime = ref<number | string>("all");
-const examTimeOP = reactive<DataOption[]>([]);
+const examTimeOP = reactive<DataOption1[]>([]);
 const addedExamTimeValues: Set<number> = new Set();
 
 const examTimeFilter = async () => {
@@ -236,7 +257,7 @@ const examTimeFilter = async () => {
 
 // ประเภทการสอบ
 const examType = ref<string | null>("all");
-const examTypeOP = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
+const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTypeValues: Set<string> = new Set();
 const examTypeFilter = () => {
   for (const data of OriginalData.value) {
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 9a87a2ece..657fbfbd7 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1,10 +1,14 @@
 import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
+  id: number|null;
+  name:string|null;
+  disable?: boolean;
+}
+interface DataOption1 {
   id: string|null;
   name:string|null;
   disable?: boolean;
 }
-
 interface DataOptionInsignia {
   id: string;
   name: string;
@@ -61,6 +65,7 @@ export type {
   AddressOps,
   Pagination,
   EduOps,
+  DataOption1,
   InsigniaOps,
   CheckboxItem,
 };
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index b03008bdd..fe67f39a5 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -1,6 +1,5 @@
 interface TableName {
   personalId: string;
-  profileID: string;
   position: number;
   fullName: string;
   dateOfBirth: string;
@@ -8,14 +7,20 @@ interface TableName {
   ExamOrder: number;
   unitId: string;
   UnitGroup: string;
+  positionNumber:string;
+  positionPath:string;
   Unit: string;
-  ReportingDate: string; //วันที่รายงานตัว
-  BMAOfficer: string;
-  Status: string;
+  reportingDate: string; //วันที่รายงานตัว
+  bmaOfficer: string;
+  statusId: string;
   checkList: any;
   address: string;
   university: string;
   degree: string;
+  disclaim: string;
+  profilePhoto:string;
+  organizationName:string;
+  organizationShortName:string;
   major: string;
   remark: string;
   number: number;
@@ -32,5 +37,18 @@ interface TableName {
     examResult: string;
   };
 } 
-
-export type { TableName };
\ No newline at end of file
+interface PartialTableName {
+  personalId: string;
+  fullName: string;
+  idCard: string;
+  profilePhoto: string;
+  organizationName: string;
+  organizationShortName: string;
+  positionNumber: string;
+  positionPath: string;
+  reportingDate: string;
+  bmaOfficer: string;
+  statusId: string;
+  disclaim: string;
+}
+export type { TableName ,PartialTableName};
\ No newline at end of file

From 2317839c7adbf0ae94bdf2d60904c9606fa10eec Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 11 Jul 2023 11:37:49 +0700
Subject: [PATCH 05/19] fix bug

---
 src/modules/04_registry/components/Record.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 5de5d5494..37ad44982 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -309,7 +309,7 @@ const tittleHistory = ref<string>(
 );
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
@@ -478,7 +478,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value) {
+  if (profileId.value!='') {
     loaderPage(true);
     await http
       .get(config.API.profileNopaidId(profileId.value))

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 06/19] 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;
 }

From b4c7a292208d5b8fba903414faa61b0a7c8989c3 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jul 2023 17:58:24 +0700
Subject: [PATCH 07/19] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=9C=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=9C=E0=B9=88=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  10 +-
 .../components/positionEmployee/Group.vue     |   2 +-
 .../components/pass/TableDetail.vue           | 259 ++++++++++++------
 3 files changed, 178 insertions(+), 93 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index bd9f76127..e85136e1a 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -3,4 +3,12 @@
  */
 import env from "../index";
 
-export default {};
+const placement = `${env.API_URI}/Placement/placement`
+
+
+export default {
+    getDatapersonal: (id: string) => `${placement}/personal/${id}`,
+    putProperty: (id: string) => `${placement}/property/${id}`
+
+
+};
diff --git a/src/modules/01_metadata/components/positionEmployee/Group.vue b/src/modules/01_metadata/components/positionEmployee/Group.vue
index 00c538863..7d8f70425 100644
--- a/src/modules/01_metadata/components/positionEmployee/Group.vue
+++ b/src/modules/01_metadata/components/positionEmployee/Group.vue
@@ -437,7 +437,7 @@ const fetchHistory = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 };
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index b031d2121..fe29b5037 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 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";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const modal = ref<boolean>();
-const { success } = mixin;
+const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
 const save = ref<boolean>(true);
 const props = defineProps({
   Modal: Boolean,
@@ -26,13 +28,10 @@ const props = defineProps({
   },
 });
 const rows = ref<any[]>([
-  {
-    university: props.getdetail.university || "-",
-    degree: props.getdetail.degree || "-",
-    major: props.getdetail.major || "-",
-    graduation: "2022-01-01",
-  },
-
+  // university: props.getdetail.university || "-",
+  // degree: props.getdetail.degree || "-",
+  // major: props.getdetail.major || "-",
+  // graduation: "2022-01-01",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -76,86 +75,157 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const myForm = ref<any>();
-const checkValidate = ref<boolean>(false);
-const selection = ref<number[]>([]);
+const myForm = ref<any>([]);
+const personalForm = ref<any>([]);
+// const checkValidate = ref<boolean>(false);
+const selection = ref<any>([]);
 
-const checkboxItems: CheckboxItem[] = [
-  { id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
-  {
-    id: 2,
-    label:
-      "ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
-  },
-  {
-    id: 3,
-    label:
-      "ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  { id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
-  {
-    id: 5,
-    label:
-      "ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
-  },
-  { id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
-  {
-    id: 7,
-    label:
-      "ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
-  },
-  {
-    id: 8,
-    label:
-      "ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
-  },
-  {
-    id: 9,
-    label:
-      "เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  {
-    id: 10,
-    label:
-      "เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  {
-    id: 11,
-    label:
-      "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
-  },
-];
+// const checkboxItems: CheckboxItem[] = [
+//   { id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
+//   {
+//     id: 2,
+//     label:
+//       "ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
+//   },
+//   {
+//     id: 3,
+//     label:
+//       "ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
+//   },
+//   { id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
+//   {
+//     id: 5,
+//     label:
+//       "ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
+//   },
+//   { id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
+//   {
+//     id: 7,
+//     label:
+//       "ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
+//   },
+//   {
+//     id: 8,
+//     label:
+//       "ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
+//   },
+//   {
+//     id: 9,
+//     label:
+//       "เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
+//   },
+//   {
+//     id: 10,
+//     label:
+//       "เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
+//   },
+//   {
+//     id: 11,
+//     label:
+//       "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
+//   },
+// ];
 const $q = useQuasar();
+
 function isRequired(val: any): boolean | string {
   return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
 }
-const validateData = () => {
-  const selectedIds = selection.value;
-  const selectedItems = checkboxItems.filter((item) =>
-    selectedIds.includes(item.id)
-  );
 
+watch(props, () => {
+  if (props.Modal === true) {
+    console.log(props.getdetail);
+    fetchData();
+  }
+});
+
+const validateData = () => {
+  const selectedIds = personalForm.value.isProperty;
+
+  const selectedItems = personalForm.value.isProperty.filter(
+    (item) => item.value === true
+    // selectedIds.includes(item.value)
+  );
   return (
-    selectedItems.length > 0 && selectedItems.length === selectedIds.length
+    selectedItems.length > 0 || selectedItems.length === selectedIds.length
   );
 };
 
 const ClickSave = () => {
   const isValid = validateData();
+
   if (isValid) {
-    console.log(selection.value);
-    console.log("rerer", props.Modal);
-    props.close();
-    props.validate();
-    selection.value = [];
+    // props.close();
+    // props.validate();
+    // putpersonalForm();
+    modalConfirm(
+      $q,
+      "การยืนยัน",
+      "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
+      putpersonalForm
+    );
   } else {
     success($q, "กรอกให้ครบ");
+    console.log();
+  }
+};
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.getDatapersonal("0a846508-4932-40de-9a9e-5b519492217c"))
+    .then((res) => {
+      personalForm.value = res.data.result;
+      personalForm.value.education.map((e) => {
+        rows.value.push({
+          university: e.name,
+          degree: e.degree,
+          major: e.field,
+          graduation: e.finishDate,
+        });
+      });
+    })
+    .catch((e) => {
+      console.log("e", e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const formBmaofficer = (val: string) => {
+  switch (val) {
+    case "officer":
+      return "ขรก.กทม. สามัญ";
+      break;
+    case "employee_perm":
+      return "ลูกจ้างประจำ";
+      break;
+    case "employee_temp":
+      return "ลูกจ้างชั่วคราว";
+      break;
+    default:
+      "";
   }
 };
-
 const close = async () => {
   props.close();
   selection.value = [];
+  rows.value = [];
+};
+const putpersonalForm = async () => {
+  await http
+    .put(
+      config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
+      personalForm.value.isProperty
+    )
+    .then((res) => {
+      success($q, res.data.message);
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      props.close();
+      props.validate();
+    });
 };
 </script>
 <template>
@@ -164,7 +234,7 @@ const close = async () => {
       <q-form ref="myForm">
         <div class="row">
           <DialogHeader
-            :title="`รายละเอียดของ ${props.getdetail.fullName}`"
+            :title="`รายละเอียดของ ${personalForm.fullName}`"
             @click="close"
           />
         </div>
@@ -176,7 +246,10 @@ const close = async () => {
               <div class="row items-center q-pa-xs header-text">
                 ข้อมูลทั่วไป
                 <span class="check-officer"
-                  ><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
+                  ><q-icon
+                    name="mdi-check"
+                    v-if="personalForm.bmaofficer !== null && ''"
+                  />{{ formBmaofficer(personalForm.bmaofficer) }}</span
                 >
               </div>
               <div class="row q-pa-xs">
@@ -186,10 +259,10 @@ const close = async () => {
                 </div>
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
-                    {{ props.getdetail.profileID }}
+                    {{ personalForm.idCard }}
                   </div>
                   <div>
-                    {{ props.getdetail.dateOfBirth }}
+                    {{ date2Thai(personalForm.dateOfBirth) }}
                   </div>
                 </div>
                 <div class="col-2 header-sub-text">
@@ -198,10 +271,10 @@ const close = async () => {
                 </div>
                 <div class="col-3 sub-text">
                   <div class="q-pb-md">
-                    {{ props.getdetail.fullName }}
+                    {{ personalForm.fullName }}
                   </div>
                   <div>
-                    {{ props.getdetail.gender }}
+                    {{ personalForm.gender }}
                   </div>
                 </div>
               </div>
@@ -213,7 +286,7 @@ const close = async () => {
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">ที่อยู่</div>
                 <div class="col-9 sub-text">
-                  {{ props.getdetail.address }}
+                  {{ personalForm.address }}
                 </div>
               </div>
             </q-card>
@@ -252,31 +325,31 @@ const close = async () => {
                       <div class="col-4 q-pa-xs">
                         <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreAFull }}
+                          {{ personalForm.pointTotalA }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreBFull }}
+                          {{ personalForm.pointTotalB }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreCFull }}
+                          {{ personalForm.pointTotalC }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreSumFull }}
+                          {{ personalForm.pointTotal }}
                         </div>
                       </div>
                       <div class="col-4 q-pa-xs header-sub-text-exam-2">
                         <div class="header-sub-text-exam-2">ผลการสอบ</div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreA }}
+                          {{ personalForm.pointA }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreB }}
+                          {{ personalForm.pointB }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreC }}
+                          {{ personalForm.pointC }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreSum }}
+                          {{ personalForm.point }}
                         </div>
                       </div>
                     </div>
@@ -292,10 +365,10 @@ const close = async () => {
                     </div>
                     <div class="col-5 sub-text-exam">
                       <div class="q-pb-sm">
-                        {{ props.getdetail.scoreResult.examResult }}
+                        {{ personalForm.pass }}
                       </div>
-                      <div class="q-pb-sm">{{ props.getdetail.number }}</div>
-                      <div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
+                      <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
+                      <div class="q-pb-sm">{{ personalForm.examRound }}</div>
                     </div>
                   </div>
                 </div>
@@ -308,12 +381,16 @@ const close = async () => {
               <div class="col-12 row items-center q-pa-sm header-text">
                 การคัดกรองคุณสมบัติ
               </div>
-              <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
+              <div
+                v-for="(item, index) of personalForm.isProperty"
+                :key="index"
+                class="q-pa-sm"
+              >
                 <q-checkbox
                   size="xs"
-                  v-model="selection"
-                  :val="item.id"
-                  :label="item.label"
+                  v-model="item.value"
+                  :val="item.value"
+                  :label="item.name"
                   keep-color
                   color="teal"
                   :rules="[isRequired]"

From 5533f0512daf7eac526f000558b4ea4f2833155a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 12 Jul 2023 14:43:17 +0700
Subject: [PATCH 08/19] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/Main.vue | 284 +++++++++++--------
 1 file changed, 173 insertions(+), 111 deletions(-)

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 1121d990e..1556edb73 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs, watchEffect } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
@@ -10,19 +10,14 @@ import type {
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const DataStore = usePlacementDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dateText, messageError } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const selectedFiscalYear = ref(0);
-// แปลงเวลา ค.ศ ให้เป็น พ.ศ
-const textDate = (value: Date) => {
-  return dateText(value);
-};
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -109,31 +104,96 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([]);
-const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
+const rows = ref<QTableProps["rows"]>([]);
+// const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
 
-let OriginalData = ref<FormPlacementMainData[]>([]);
-let UpdataData = ref<FormPlacementMainData[]>([]);
-watchEffect(() => {
-  rows.value = OriginalData.value;
+// let OriginalData = ref<FormPlacementMainData[]>([]);
+// let UpdataData = ref<FormPlacementMainData[]>([]);
+const searchYear = ref();
+const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+
+const dataPlacement = ref<any>([]);
+const visibleColumns = ref([
+  "id",
+  "examRound",
+  "examOrder",
+  "examOrder",
+  "fiscalYear",
+  "numberOfCandidates",
+  "examTypeName",
+  "accountStartDate",
+  "accountExpirationDate",
+]);
+
+onMounted(async () => {
+  await fetchYearOptions();
+  // await fiscalYearFilter();
+  // examTimeFilter();
+  // await examTypeFilter();
+  // expiredAccountFilter();
+  // await searchFilterTable();
 });
-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(`🚀 ข้อมูลจากการ get (${year})`, apiData);
-    await DataStore.DataMain(apiData);
-    OriginalData.value = await DataStore.DataMainOrig;
-    UpdataData.value = OriginalData.value.filter(
-      (data) => data.fiscalYear === year
-    );
-  } catch (error) {
-    messageError($q, error);
-  }
+const fetchPlacementData = async (val: number) => {
+  showLoader();
+  http
+    .get(config.API.MainDetail(val))
+    .then((res) => {
+      dataPlacement.value = res.data.result;
+      DataStore.DataMainOrig = dataPlacement.value;
+      rows.value = DataStore.DataMainOrig;
+      examTypeFilter();
+      examTimeFilter();
+      expiredAccountFilter();
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
+const fetchYearOptions = async () => {
+  http
+    .get(config.API.yearOptions())
+    .then((res) => {
+      const response = res.data.result;
+      yearOptions.push(...response);
+      const maxNumber = yearOptions.reduce((max, e) => {
+        return e.id > max ? e.id : max;
+      }, "");
+      searchYear.value = maxNumber;
+      DataStore.DataMainYearSet(searchYear.value);
+      DataStore.DataMainYear = yearOptions.value;
+      fetchPlacementData(searchYear.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const filterYear = () => {
+  console.log("searchYear", searchYear.value);
+  fetchPlacementData(searchYear.value);
+};
+
+// 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(`🚀 ข้อมูลจากการ get (${year})`, apiData);
+//     await DataStore.DataMain(apiData);
+//     OriginalData.value = await DataStore.DataMainOrig;
+//     UpdataData.value = OriginalData.value.filter(
+//       (data) => data.fiscalYear === year
+//     );
+//   } catch (error) {
+//     messageError($q, error);
+//   }
+// };
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
@@ -144,58 +204,54 @@ const redirectToPage = (examId?: number) => {
 const fiscalyear = ref<number>(0);
 const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
-const fiscalYearFilter = async () => {
-  try {
-    const response = await http.get(config.API.yearOptions());
-    const dataOptions = response.data.result;
-    fiscalyearOP.push(...dataOptions);
+// const fiscalYearFilter = async () => {
+//   try {
+//     const response = await http.get(config.API.yearOptions());
+//     const dataOptions = response.data.result;
+//     fiscalyearOP.push(...dataOptions);
 
-    let maxYear = 0;
-    for (let data of dataOptions) {
-      if (data.id > maxYear) {
-        maxYear = data.id;
-      }
-    }
+//     let maxYear = 0;
+//     for (let data of dataOptions) {
+//       if (data.id > maxYear) {
+//         maxYear = data.id;
+//       }
+//     }
 
-    fiscalyear.value = maxYear;
+//     fiscalyear.value = maxYear;
 
-    // อัพเดตค่าของ selectedFiscalYear
-    selectedFiscalYear.value = fiscalyear.value;
+//     // อัพเดตค่าของ selectedFiscalYear
+//     selectedFiscalYear.value = fiscalyear.value;
 
-    // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
-    await OriginalDataFetch(selectedFiscalYear.value);
-  } catch (e) {
-    messageError($q, e);
-  }
-};
+//     // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
+//     await OriginalDataFetch(selectedFiscalYear.value);
+//   } catch (e) {
+//     messageError($q, e);
+//   }
+// };
 
 //-------------------|เลือกปีงบประมาณตาม API|--------------------//
-interface YearOption {
-  id: number;
-  name: number;
-}
 
-const searchfiscalyear = async () => {
-  try {
-    const res = await http.get(config.API.yearOptions());
-    const dataOptions: YearOption[] = res.data.result;
-    if (fiscalyear.value === 0) {
-      await OriginalDataFetch(0);
-    } else {
-      const selectedYearObject = dataOptions.find(
-        (option: YearOption) => option.id === fiscalyear.value
-      );
-      OriginalDataFetch(fiscalyear.value);
+// const searchfiscalyear = async () => {
+//   try {
+//     const res = await http.get(config.API.yearOptions());
+//     const dataOptions: YearOption[] = res.data.result;
+//     if (fiscalyear.value === 0) {
+//       await OriginalDataFetch(0);
+//     } else {
+//       const selectedYearObject = dataOptions.find(
+//         (option: YearOption) => option.id === fiscalyear.value
+//       );
+//       OriginalDataFetch(fiscalyear.value);
 
-      if (selectedYearObject) {
-      } else {
-        console.log("No Selected Year Object");
-      }
-    }
-  } catch (e) {
-    messageError($q, e);
-  }
-};
+//       if (selectedYearObject) {
+//       } else {
+//         console.log("No Selected Year Object");
+//       }
+//     }
+//   } catch (e) {
+//     messageError($q, e);
+//   }
+// };
 
 //-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
@@ -205,28 +261,14 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
-const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<any[]>([
-  "id",
-  "examRound",
-  "examOrder",
-  "fiscalYear",
-  "numberOfCandidates",
-  "examTypeValue",
-  "examTypeName",
-  "accountStartDate",
-  "accountExpirationDate",
-]);
-
 //-------------------|ครั้งที่สอบ|------------------------------//
 const examTime = ref<number | string>("all");
-const examTimeOP = reactive<DataOption1[]>([]);
+const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTimeValues: Set<number> = new Set();
 
 const examTimeFilter = async () => {
-  examTimeOP.push({ id: "all", name: "ทั้งหมด" });
-
-  for (const data of OriginalData.value) {
+  // examTimeOP.push({ id: "all", name: "ทั้งหมด" });
+  for (const data of dataPlacement.value) {
     const examOrder = data.examOrder;
     if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
       examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
@@ -244,10 +286,40 @@ const examTimeFilter = async () => {
 const examType = ref<string | null>("all");
 const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTypeValues: Set<string> = new Set();
+const data = [
+  {
+    accountEndDate: "2024-06-21T01:22:59.251572",
+    accountExpirationDate: "2024-06-21T01:22:59.251572",
+    accountStartDate: "2023-06-22T01:22:59.251572",
+    examOrder: "1",
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examTypeName: "แข่งขัน",
+    examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
+    fiscalYear: 2566,
+    id: "0a846508-4932-40de-9a9e-5b519492216c",
+    isExpired: false,
+    numberOfCandidates: 1,
+  },
+  {
+    accountEndDate: "2024-06-21T01:22:59.251572",
+    accountExpirationDate: "2024-06-21T01:22:59.251572",
+    accountStartDate: "2023-06-22T01:22:59.251572",
+    examOrder: "2",
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examTypeName: "แข่งขัน",
+    examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
+    fiscalYear: 2566,
+    id: "0a846508-4932-40de-9a9e-5b519492216c",
+    isExpired: false,
+    numberOfCandidates: 1,
+  },
+];
 const examTypeFilter = () => {
-  for (const data of OriginalData.value) {
-    const examTypeName = data.examTypeName;
-    const examTypeValue = data.examTypeValue;
+  dataPlacement.value.forEach((item) => {
+    const examTypeName = item.examTypeName;
+    const examTypeValue = item.examTypeValue;
     if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
       examTypeOP.value.push({
         id: examTypeValue,
@@ -255,7 +327,7 @@ const examTypeFilter = () => {
       });
       addedExamTypeValues.add(examTypeName);
     }
-  }
+  });
 };
 //--------------|ฟิลเตอร์|--------------------------------------//
 const searchFilterTable = async () => {
@@ -265,7 +337,7 @@ const searchFilterTable = async () => {
       examType.value,
       expiredAccount.value
     );
-    UpdataData.value = DataStore.DataMainUpdate;
+    rows.value = DataStore.DataMainUpdate;
   }
 };
 
@@ -273,7 +345,7 @@ const searchFilterTable = async () => {
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
   const currentDate = new Date();
-  const updatedRows = OriginalData.value.map((data) => {
+  const updatedRows = dataPlacement.value.map((data) => {
     let expirationDate = new Date(data.accountExpirationDate);
     let isExpired = currentDate > expirationDate;
 
@@ -293,13 +365,6 @@ 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>
@@ -311,12 +376,12 @@ onMounted(async () => {
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
-          v-model="fiscalyear"
+          v-model="searchYear"
           label="ปีงบประมาณ"
           dense
           emit-value
           map-options
-          :options="fiscalyearOP"
+          :options="yearOptions"
           option-value="id"
           option-label="name"
           lazy-rules
@@ -325,7 +390,7 @@ onMounted(async () => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          @update:model-value="searchfiscalyear"
+          @update:model-value="filterYear"
         />
         <q-space />
         <q-input
@@ -413,19 +478,16 @@ onMounted(async () => {
         </q-card>
       </div>
       <div class="col-12">
-        {{ rows }}
         <q-table
           ref="table"
-          :row="rows"
+          :rows="rows"
           :columns="columns"
-          :rows="UpdataData"
           :filter="filterKeyword"
           row-key="id"
           flat
           bordered
           dense
           class="custom-header-table"
-          v-bind="attrs"
           :visible-columns="visibleColumns"
           :pagination-label="paginationLabel"
           v-model:pagination="pagination"
@@ -466,10 +528,10 @@ onMounted(async () => {
                 {{ props.row.examTypeName }}
               </q-td>
               <q-td key="accountStartDate" :props="props">
-                {{ textDate(props.row.accountStartDate) }}
+                {{ date2Thai(props.row.accountStartDate) }}
               </q-td>
               <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
+                {{ date2Thai(props.row.accountExpirationDate) }}
               </q-td>
             </q-tr>
           </template>

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 09/19] =?UTF-8?q?=E0=B8=A3=E0=B8=A7=E0=B8=A1=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88?=
 =?UTF-8?q?=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

From 71884b950f2be42520615c8e8f6e0e868085e6a1 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 15:07:59 +0700
Subject: [PATCH 10/19] update api index

---
 src/api/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 3c47b1430..90cbcd57d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,7 +8,7 @@ const env = ref<string>(process.env.NODE_ENV || "development");
 
 const config = ref<any>({
   development: {
-    // API_URI: "https://localhost:7006/api/v1",
+    // API_URI: "https://localhost:7260/api",
     API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
     API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
@@ -18,6 +18,8 @@ const config = ref<any>({
     API_CANDIDATE_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_REPORT_URI: "https://localhost:7187/api/v1",
     API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+    API_URI_ORG_TREE:
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
     MEET_URI: "meet.frappet.com",
   },
   test: {
@@ -33,6 +35,8 @@ const config = ref<any>({
     API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_CANDIDATE_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
+    API_URI_ORG_TREE:
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
     MEET_URI: "meet.frappet.com",
   },
 });
@@ -49,6 +53,7 @@ const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
 const API_URI_PROFILE_SERVICE = ref<string>(
   config.value[env.value].API_URI_PROFILE_SERVICE
 );
+const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
 
 export default {
   env: env.value,
@@ -58,5 +63,6 @@ export default {
   API_REPORT_URI: API_REPORT_URI.value,
   API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
   API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
+  API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
 };

From ab72432c1a3ed41f8387ba48635786bd3733de11 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 12 Jul 2023 16:50:01 +0700
Subject: [PATCH 11/19] active Stat card

---
 .../05_placement/components/pass/Detail.vue   | 27 +++++++++++--------
 .../05_placement/components/pass/Table.vue    |  8 ++++++
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index e1f2d0ea2..037211aa8 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watchEffect } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 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";
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
 
+const $q = useQuasar
+const mixin = useCounterMixin()
+const { messageError } = mixin
 let roleAdmin = ref<boolean>(false);
 const router = useRouter();
 const route = useRoute();
@@ -27,11 +32,10 @@ const stat = ref<any>({
 
 const getStat = async () => {
   const examIdString = Array.isArray(examId) ? examId[0] : examId;
-
-  try {
-    const res = await http.get(config.API.getStatCard(examIdString));
+  await http
+  .get(config.API.getStatCard(examIdString))
+  .then((res) =>{
     const statCard = res.data.result;
-
     // อัปเดตค่าในตัวแปร stat
     stat.value = {
       total: statCard.total,
@@ -40,12 +44,12 @@ const getStat = async () => {
       contain: statCard.contain,
       disclaim: statCard.disclaim,
     };
-
+    
     console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
-  } catch (error) {
-    console.error("Error retrieving data:", error);
-    // จัดการข้อผิดพลาดที่เกิดขึ้นในการรับข้อมูล
-  }
+  })
+  .catch((e) => {
+    messageError($q, e);
+  })
 };
 
 onMounted(async () => {
@@ -54,6 +58,7 @@ onMounted(async () => {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
 });
+
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
@@ -86,7 +91,7 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
-      <AddTablePosition class="q-pa-none" />
+      <AddTablePosition :statCard="getStat" class="q-pa-none" />
     </div>
   </q-card>
 </template>
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index f6a5dcde7..adec10b7b 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -18,6 +18,12 @@ import router from "@/router";
 
 let roleAdmin = ref<boolean>(false);
 
+const props = defineProps({
+  statCard:{
+    type:Function,
+    default: () => console.log("getStat"),
+  }
+})
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
@@ -190,6 +196,7 @@ const savePostpone = async () => {
         })
         .finally(async () => {
           await getTable();
+          props.statCard();
           modalDefermentDisclaim.value = false;
           hideLoader();
         });
@@ -215,6 +222,7 @@ const saveDisclaim = async () => {
         .then(() => { success($q, "บันทึกสำเร็จ"); })
         .finally(async () => {
           await getTable();
+          props.statCard();
           modalDefermentDisclaim.value = false;
           hideLoader();
         });

From 3aa9b68b23ec7734d6aede3bc35fa063bebcaf20 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 16:56:52 +0700
Subject: [PATCH 12/19] update by req

---
 src/api/05_placement/api.placement.ts         |   2 +-
 src/modules/05_placement/components/Main.vue  | 127 +------
 .../05_placement/components/pass/Table.vue    | 343 +++++++++---------
 .../components/pass/TableView.vue             |   9 +-
 4 files changed, 185 insertions(+), 296 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 1f4d212c1..62f8615d1 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -7,7 +7,7 @@ export default {
   yearOptions: () => `${placement}/fiscal`,
   redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
   disclaimF: () => `${placement}/pass/disclaim`,
-  defermentF: () => `${placement}/pass/deferment`,
+  deferment: () => `${placement}/pass/deferment`,
   getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
   getDatapersonal: (id: string) => `${placement}/personal/${id}`,
   putProperty: (id: string) => `${placement}/property/${id}`,
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 1556edb73..7b8b5209f 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -2,7 +2,6 @@
 import { onMounted, ref, reactive } 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,
@@ -17,7 +16,6 @@ const DataStore = usePlacementDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-const selectedFiscalYear = ref(0);
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -84,24 +82,20 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "accountStartDate",
     align: "left",
-    label: "วันที่เริ่มคำสั่ง",
+    label: "วันที่บัญชีใช้ได้ตั้งแต่",
     sortable: true,
     field: "accountStartDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "accountExpirationDate",
     align: "left",
-    label: "วันที่บัญชีหมดอายุ",
+    label: "วันที่บัญชีใช้ได้ถึง",
     sortable: true,
     field: "accountExpirationDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 // ข้อมูลตาราง (จำลอง)
@@ -128,11 +122,6 @@ const visibleColumns = ref([
 
 onMounted(async () => {
   await fetchYearOptions();
-  // await fiscalYearFilter();
-  // examTimeFilter();
-  // await examTypeFilter();
-  // expiredAccountFilter();
-  // await searchFilterTable();
 });
 const fetchPlacementData = async (val: number) => {
   showLoader();
@@ -159,12 +148,12 @@ const fetchYearOptions = async () => {
     .then((res) => {
       const response = res.data.result;
       yearOptions.push(...response);
-      const maxNumber = yearOptions.reduce((max, e) => {
+      const maxNumber = yearOptions.reduce((max: any, e: any) => {
         return e.id > max ? e.id : max;
       }, "");
       searchYear.value = maxNumber;
       DataStore.DataMainYearSet(searchYear.value);
-      DataStore.DataMainYear = yearOptions.value;
+      // DataStore.DataMainYear = yearOptions.value;
       fetchPlacementData(searchYear.value);
     })
     .catch((e) => {
@@ -176,83 +165,11 @@ const filterYear = () => {
   fetchPlacementData(searchYear.value);
 };
 
-// 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(`🚀 ข้อมูลจากการ get (${year})`, apiData);
-//     await DataStore.DataMain(apiData);
-//     OriginalData.value = await DataStore.DataMainOrig;
-//     UpdataData.value = OriginalData.value.filter(
-//       (data) => data.fiscalYear === year
-//     );
-//   } catch (error) {
-//     messageError($q, error);
-//   }
-// };
-
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
   router.push(`/placement/pass/${examId}`);
 };
 
-//-------------------|เลือกปีงบประมาณ|-----------------------//
-const fiscalyear = ref<number>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedfiscalYearValues: number[] = [];
-// const fiscalYearFilter = async () => {
-//   try {
-//     const response = await http.get(config.API.yearOptions());
-//     const dataOptions = response.data.result;
-//     fiscalyearOP.push(...dataOptions);
-
-//     let maxYear = 0;
-//     for (let data of dataOptions) {
-//       if (data.id > maxYear) {
-//         maxYear = data.id;
-//       }
-//     }
-
-//     fiscalyear.value = maxYear;
-
-//     // อัพเดตค่าของ selectedFiscalYear
-//     selectedFiscalYear.value = fiscalyear.value;
-
-//     // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
-//     await OriginalDataFetch(selectedFiscalYear.value);
-//   } catch (e) {
-//     messageError($q, e);
-//   }
-// };
-
-//-------------------|เลือกปีงบประมาณตาม API|--------------------//
-
-// const searchfiscalyear = async () => {
-//   try {
-//     const res = await http.get(config.API.yearOptions());
-//     const dataOptions: YearOption[] = res.data.result;
-//     if (fiscalyear.value === 0) {
-//       await OriginalDataFetch(0);
-//     } else {
-//       const selectedYearObject = dataOptions.find(
-//         (option: YearOption) => option.id === fiscalyear.value
-//       );
-//       OriginalDataFetch(fiscalyear.value);
-
-//       if (selectedYearObject) {
-//       } else {
-//         console.log("No Selected Year Object");
-//       }
-//     }
-//   } catch (e) {
-//     messageError($q, e);
-//   }
-// };
-
 //-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -286,38 +203,8 @@ const examTimeFilter = async () => {
 const examType = ref<string | null>("all");
 const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTypeValues: Set<string> = new Set();
-const data = [
-  {
-    accountEndDate: "2024-06-21T01:22:59.251572",
-    accountExpirationDate: "2024-06-21T01:22:59.251572",
-    accountStartDate: "2023-06-22T01:22:59.251572",
-    examOrder: "1",
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examTypeName: "แข่งขัน",
-    examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
-    fiscalYear: 2566,
-    id: "0a846508-4932-40de-9a9e-5b519492216c",
-    isExpired: false,
-    numberOfCandidates: 1,
-  },
-  {
-    accountEndDate: "2024-06-21T01:22:59.251572",
-    accountExpirationDate: "2024-06-21T01:22:59.251572",
-    accountStartDate: "2023-06-22T01:22:59.251572",
-    examOrder: "2",
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examTypeName: "แข่งขัน",
-    examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
-    fiscalYear: 2566,
-    id: "0a846508-4932-40de-9a9e-5b519492216c",
-    isExpired: false,
-    numberOfCandidates: 1,
-  },
-];
 const examTypeFilter = () => {
-  dataPlacement.value.forEach((item) => {
+  dataPlacement.value.forEach((item: any) => {
     const examTypeName = item.examTypeName;
     const examTypeValue = item.examTypeValue;
     if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
@@ -345,7 +232,7 @@ const searchFilterTable = async () => {
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
   const currentDate = new Date();
-  const updatedRows = dataPlacement.value.map((data) => {
+  const updatedRows = dataPlacement.value.map((data: any) => {
     let expirationDate = new Date(data.accountExpirationDate);
     let isExpired = currentDate > expirationDate;
 
@@ -356,7 +243,7 @@ const expiredAccountFilter = async () => {
 
 const paging = ref<boolean>(true);
 const pagination = ref({
-  sortBy: "desc",
+  sortBy: "accountStartDate",
   descending: false,
   page: 1,
   rowsPerPage: 10,
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index f6a5dcde7..ae5fdae1a 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -7,7 +7,6 @@ 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 DialogOrgTree from "@/modules/05_placement/components/pass/OrgTree.vue";
 import { useRoute } from "vue-router";
@@ -80,7 +79,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
   {
     name: "number",
     align: "center",
@@ -153,9 +151,9 @@ const getTable = async () => {
           positionPath: data.positionPath,
           reportingDate: dateText(new Date(data.reportingDate)),
           number: data.number,
-          bmaOfficer: data.bmaOfficer,
+          bmaOfficer: data.bmaOfficer == 'OFFICER' ? 'ขรก.กทม. สามัญ' : data.bmaOfficer == 'EMPLOYEE_PERM' ? 'ลูกจ้างประจำ' : data.bmaOfficer == 'EMPLOYEE_TEMP' ? 'ลูกจ้างชั่วคราว' : data.bmaOfficer == null ? 'บุคคลภายนอก' : '-',
           statusId: data.statusId,
-          statusName: data.statusId == 'un-contain' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN'? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-',
+          statusName: data.statusId == 'UN-CONTAIN' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN' ? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-',
           deferment: data.deferment,
         };
 
@@ -172,16 +170,17 @@ const getTable = async () => {
 
 const appointModal = ref<boolean>(false);
 
-const savePostpone = async () => {
+const saveDeferment = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
+      showLoader()
       const formData = new FormData();
       formData.append("personalId", personalId.value);
-      formData.append("note", userNote.value),
-        formData.append("files", files.value);
+      formData.append("note", userNote.value);
+      formData.append("files", files.value[0]);
 
       await http
-        .post(config.API.defermentF(), formData)
+        .post(config.API.deferment(), formData)
         .then((res) => {
           success($q, "บันทึกสำเร็จ");
         })
@@ -200,6 +199,7 @@ const savePostpone = async () => {
 const saveDisclaim = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
+      showLoader()
       const dataPost = {
         note: userNote.value,
         personId: personalId.value,
@@ -271,7 +271,7 @@ const editDetail = (
       .get(config.API.placementDefermentInfo(props.personalId))
       .then((res: any) => {
         dataInfo.reason = res.data.result.reliefReason;
-        dataInfo.reliefDoc = res.data.reliefDoc
+        dataInfo.reliefDoc = res.data.result.reliefDoc
       })
       .catch((e) => {
         messageError($q, e);
@@ -350,172 +350,179 @@ const expiredAccount = ref<boolean>(false);
 watch(expiredAccount, () => {
   console.log("expiredAccount===>", expiredAccount.value);
 });
+
+const pagination = ref({
+  sortBy: "number",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 </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" :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-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>
 
-                            <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>
+                                              <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>
 
-                                </q-list>
-                              </q-menu>
-                            </q-btn>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </Table>
-                  </q-form>
+                                                  </q-list>
+                                                </q-menu>
+                                              </q-btn>
+                                            </q-td>
+                                          </q-tr>
+                                        </template>
+                                      </Table>
+                                    </q-form>
 
-                  <!-- เลือกหน่วยงานที่บรรจุ -->
-                  <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
+                                    <!-- เลือกหน่วยงานที่บรรจุ -->
+                                    <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
 
-                  <!-- 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" />
+                                    <!-- 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 : saveDeferment" />
                       </q-form>
                     </q-card>
                   </q-dialog>
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index b62fb0b25..a303c9d23 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -46,15 +46,10 @@ import { ref, useAttrs } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage } = mixin;
-const editvisible = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
-const modalPublish = ref<boolean>(false);
-const modalDelete = ref<boolean>(false);
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -143,8 +138,8 @@ const props = defineProps({
   roleAdmin: Boolean
 });
 const pagination = ref({
-  sortBy: "desc",
-  descending: false,
+  sortBy: "number",
+  descending: true,
   page: 1,
   rowsPerPage: 10,
 });

From f0e334309377befd02322e502b5896273ac82eea Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 17:03:15 +0700
Subject: [PATCH 13/19] update condition expiredAccount

---
 src/modules/05_placement/components/Main.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 7b8b5209f..4ab957331 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -231,10 +231,11 @@ const searchFilterTable = async () => {
 //----------------|บัญชีหมดอายุ|-----------------------------//
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
-  const currentDate = new Date();
+  // const currentDate = new Date();
   const updatedRows = dataPlacement.value.map((data: any) => {
-    let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = currentDate > expirationDate;
+    // let expirationDate = new Date(data.accountExpirationDate);
+    // let isExpired = currentDate > expirationDate;
+    let isExpired = data.isExpired == expiredAccount;
 
     return { ...data, isExpired };
   });

From 926428192fbd26e7d27c581cc16b41b0d1889f6e Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 17:21:27 +0700
Subject: [PATCH 14/19] fix bug & remove const/import not use

---
 src/modules/05_placement/components/Main.vue  |  2 +-
 .../05_placement/components/pass/Detail.vue   | 12 +--
 .../components/pass/DialogAppoint.vue         |  0
 .../components/pass/DialogFooter.vue          |  6 +-
 .../05_placement/components/pass/Table.vue    | 95 +++++++++----------
 .../components/pass/TableDetail.vue           |  1 -
 .../components/pass/TableView.vue             |  1 -
 7 files changed, 57 insertions(+), 60 deletions(-)
 delete mode 100644 src/modules/05_placement/components/pass/DialogAppoint.vue

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 4ab957331..f72ff76a7 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -249,7 +249,7 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index 037211aa8..a24c5e852 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watchEffect } from "vue";
+import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter ,useRoute} from "vue-router";
 import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
@@ -16,9 +16,9 @@ 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>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
+const year = ref<string>("");
+const round = ref<string>("");
+const title = ref<string>("");
 const AddTablePosition = defineAsyncComponent(
   () => import("@/modules/05_placement/components/pass/Table.vue")
 );
@@ -45,7 +45,7 @@ const getStat = async () => {
       disclaim: statCard.disclaim,
     };
     
-    console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
+      console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
   })
   .catch((e) => {
     messageError($q, e);
@@ -91,7 +91,7 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
-      <AddTablePosition :statCard="getStat" class="q-pa-none" />
+        <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat"/>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/05_placement/components/pass/DialogAppoint.vue b/src/modules/05_placement/components/pass/DialogAppoint.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/modules/05_placement/components/pass/DialogFooter.vue b/src/modules/05_placement/components/pass/DialogFooter.vue
index dab4dfa0c..d2358bb75 100644
--- a/src/modules/05_placement/components/pass/DialogFooter.vue
+++ b/src/modules/05_placement/components/pass/DialogFooter.vue
@@ -29,9 +29,9 @@ const emit = defineEmits([
 const updateEdit = (value: Boolean) => {
   emit("update:editvisible", value);
 };
-const cancel = async () => {
-  props.cancel();
-};
+// const cancel = async () => {
+//   props.cancel();
+// };
 const edit = async () => {
   updateEdit(!props.editvisible);
   props.edit();
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 6fae7e35b..0ec5d10ab 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -429,55 +429,54 @@ const pagination = ref({
                                                 </div>
                                                 <div v-else>
                                                   <div class="col-4">
-                                                    <div class="text-weight-medium">-</div>
-                                                    <div class="text-weight-light">-</div>
+                                                      <div class="text-weight-medium">-</div>
+                                                    </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' ||
+                                                </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')">
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index 52bc0b023..13cc86ebb 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -7,7 +7,6 @@ import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
 const save = ref<boolean>(true);
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index a303c9d23..5318a4bbc 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -43,7 +43,6 @@
 
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());

From 32605e0426dd9bbb1862f045d593ee3d42183457 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 12 Jul 2023 17:26:26 +0700
Subject: [PATCH 15/19] =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=20input=20=E0=B8=AB=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B8=88=E0=B8=B2=E0=B8=81=E0=B8=81=E0=B8=94=20save?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/pass/Table.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 6fae7e35b..bc451a3c5 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -196,6 +196,7 @@ const saveDeferment = async () => {
         .finally(async () => {
           await getTable();
           props.statCard();
+          userNote.value = ""
           modalDefermentDisclaim.value = false;
           hideLoader();
         });
@@ -223,6 +224,7 @@ const saveDisclaim = async () => {
         .finally(async () => {
           await getTable();
           props.statCard();
+          userNote.value = ""
           modalDefermentDisclaim.value = false;
           hideLoader();
         });

From a719fede02d9c816d0473eb0aea7a3dbbb74324f Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 21:25:24 +0700
Subject: [PATCH 16/19] =?UTF-8?q?=E0=B8=9A=E0=B8=B1=E0=B8=99=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=81=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=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

---
 .../05_placement/components/pass/Detail.vue   | 10 ++
 .../05_placement/components/pass/OrgTree.vue  | 97 ++++++++++---------
 2 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index a24c5e852..34ab8931f 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -8,6 +8,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin"
 import { useQuasar } from "quasar"
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+
+const DataStore = usePlacementDataStore();
 
 const $q = useQuasar
 const mixin = useCounterMixin()
@@ -19,6 +22,7 @@ const examId = route.params.examId;
 const year = ref<string>("");
 const round = ref<string>("");
 const title = ref<string>("");
+const examData = ref<any>();
 const AddTablePosition = defineAsyncComponent(
   () => import("@/modules/05_placement/components/pass/Table.vue")
 );
@@ -53,6 +57,12 @@ const getStat = async () => {
 };
 
 onMounted(async () => {
+  examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
+  // console.log("DataStore===>", DataStore.DataMainOrig.find((x: any) => x.id == examId))
+  title.value = examData.value.examRound;
+  round.value = examData.value.examOrder;
+  year.value = examData.value.fiscalYear;
+
   await getStat()
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
diff --git a/src/modules/05_placement/components/pass/OrgTree.vue b/src/modules/05_placement/components/pass/OrgTree.vue
index f0309ef87..7aba3b1ec 100644
--- a/src/modules/05_placement/components/pass/OrgTree.vue
+++ b/src/modules/05_placement/components/pass/OrgTree.vue
@@ -116,7 +116,7 @@ const saveAppoint = async () => {
                 mouthSalaryAmount: dataForm.mouthSalaryAmount,
                 positionSalaryAmount: dataForm.positionSalaryAmount,
             };
-            console.log("save appoint===>", dataAppoint);
+            // console.log("save appoint===>", dataAppoint);
 
             showLoader();
             await http
@@ -128,25 +128,11 @@ const saveAppoint = async () => {
                 .catch((e) => {
                     messageError($q, e);
                 })
-                .finally(() => {
+                .finally(async () => {
+                    await closeAndClear()
+                    await resetFilter()
                     hideLoader()
-                    close()
                 });
-
-            resetFilter()
-            // Clear form
-            selected.value = "";
-            dataForm.personalId = '';
-            dataForm.containDate = new Date()
-            dataForm.posNoId = ""
-            dataForm.positionId = ""
-            dataForm.positionLevelId = ""
-            dataForm.positionLineId = ""
-            dataForm.positionPathSideId = ""
-            dataForm.positionTypeId = ""
-            dataForm.salaryAmount = null
-            dataForm.mouthSalaryAmount = null;
-            dataForm.positionSalaryAmount = null
         }
     });
 };
@@ -173,8 +159,8 @@ const closeModal = () => {
     }
 }
 
-const closeAndClear = () => {
-    props.close();
+const closeAndClear = async () => {
+    await props.close();
     editDataStatus.value = false;
     selected.value = ""
     dataForm.personalId = '';
@@ -223,59 +209,74 @@ const positionLevelOptions = ref<Object[]>([{
 const selectedPosition = async (data: any) => {
 
     if (data.name == null && selected.value != data.keyId) {
+        console.log("selecteds", data)
+
         editDataStatus.value = true;
-        // console.log("selected", data)
         selected.value = data.keyId
 
         // posNo Options
-        posNoOptions.value = await [{
+        posNoOptions.value = [{
             label: data.positionNum,
-            value: data.positionNumInt,
+            value: data.positionNumId,
         }]
-        dataForm.posNoId = data.positionNumInt;
+        dataForm.posNoId = data.positionNumId;
 
         // position Options
-        positionOptions.value = await [{
+        positionOptions.value = [{
             label: data.positionName,
-            value: data.positionMasterId,
+            value: data.positionNameId,
         }]
-        dataForm.positionId = data.positionMasterId;
+        dataForm.positionId = data.positionNameId;
 
         // positionPathSide Options
-        positionPathSideOptions.value = await [{
-            label: data.positionSideName,
-            value: data.positionSideName,
-        }]
-        dataForm.positionPathSideId = data.positionSideName;
+        let positionPathSideArr: any = [];
+        if (data.positionSideNameObj != null) {
+            data.positionSideNameObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
+            })
+            positionPathSideOptions.value = positionPathSideArr;
+            dataForm.positionPathSideId = positionPathSideArr.length > 1 || positionPathSideArr.length == 0 ? '' : positionPathSideArr[0].value;
+        }
 
         // positionType Options
-        positionTypeOptions.value = await [{
+        positionTypeOptions.value = [{
             label: data.positionType,
-            value: data.positionType,
+            value: data.positionTypeId,
         }]
-        dataForm.positionTypeId = data.positionType;
+        dataForm.positionTypeId = data.positionTypeId;
 
         // positionLine Options
-        // positionLineOptions.value = await [{
-        //     label: data.positionType,
-        //     value: data.positionType,
-        // }]
-        // dataForm.positionLineId = data.positionType;
+        positionLineOptions.value = [{
+            label: data.positionLine,
+            value: data.positionLineId,
+        }]
+        dataForm.positionLineId = data.positionLineId;
+
 
         // positionLevel Options
-        const positionLevelsSplit = data.positionLevel.split(',')
         let positionLevelsArr: any = [];
-        positionLevelsSplit.map((x: string) => {
-            positionLevelsArr.push({
-                label: x,
-                value: x,
+        if (data.positionLevelObj != null) {
+            data.positionLevelObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
             })
-        })
-        positionLevelOptions.value = positionLevelsArr;
-        dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
+            positionLevelOptions.value = positionLevelsArr;
+            dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
+        }
 
     } else if (selected.value == data.keyId) {
         selected.value = '';
+        dataForm.posNoId = "";
+        dataForm.positionId = "";
+        dataForm.positionLevelId = "";
+        dataForm.positionLineId = "";
+        dataForm.positionPathSideId = "";
+        dataForm.positionTypeId = "";
     }
 }
 </script>

From baa32a47f7c213e32b1fb14692a4095218154bc8 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 21:38:16 +0700
Subject: [PATCH 17/19] change api tree json

---
 src/api/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 90cbcd57d..57797c997 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -19,7 +19,7 @@ const config = ref<any>({
     // API_REPORT_URI: "https://localhost:7187/api/v1",
     API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     API_URI_ORG_TREE:
-      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
   },
   test: {

From bbddbb87766458c07c67e01efddb591d9e3b90f4 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 12 Jul 2023 22:06:08 +0700
Subject: [PATCH 18/19] fix redirect step 3 close popup

---
 .../05_placement/components/OrderPlacement/step/step03.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 4c6568450..f826a28e6 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -325,7 +325,7 @@
             round
             color="public"
             icon="mdi-content-save-outline"
-            @click="next"
+            @click="clickClose"
           >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>

From 3b80198220b80495fe8641cd8e51a6156d040e90 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Thu, 13 Jul 2023 09:00:38 +0700
Subject: [PATCH 19/19] =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=ADui=E0=B9=82?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.treelist.ts     |    8 +-
 src/api/index.ts                              |    7 +
 src/api/manage/api.organization.ts            |    2 +
 src/api/manage/api.positionEmployee.ts        |    2 +
 src/interface/request/main/main.ts            |    7 +-
 src/modules/02_organizational/router.ts       |   12 +
 .../02_organizational/views/MainTree.vue      | 3112 ++++++++---------
 .../views/MainTreeEmployee.vue                | 1749 +++++++++
 .../03_recruiting/components/Table.vue        |  376 +-
 .../03_recruiting/views/02_qualify/Period.vue |  609 ++--
 10 files changed, 3695 insertions(+), 2189 deletions(-)
 create mode 100644 src/modules/02_organizational/views/MainTreeEmployee.vue

diff --git a/src/api/02_organizational/api.treelist.ts b/src/api/02_organizational/api.treelist.ts
index 40285ee7a..afb16eee1 100644
--- a/src/api/02_organizational/api.treelist.ts
+++ b/src/api/02_organizational/api.treelist.ts
@@ -10,6 +10,7 @@ import env from "../index";
 const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
 const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
 const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`;
+const organizationEmployeePosition = `${env.API_URI_ORG_EMPLOYEE_SERVICE}/organization-employee/`;
 
 const report = `${env.API_URI}/report/organization/`;
 
@@ -83,8 +84,7 @@ export default {
   getPositionNumberIdByOcId: (OcId: string) =>
     `${postionMasterPath}/position-number/Oc/${OcId}`,
 
-
-  /**
-   * api ประวัติการ publish
-   */
+  organizationEmployeePosition: `${organizationEmployeePosition}`,
+  organizationEmployeePositionId: (id: string) =>
+    `${organizationEmployeePosition}${id}`,
 };
diff --git a/src/api/index.ts b/src/api/index.ts
index 3c47b1430..c72de70d1 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -12,6 +12,8 @@ const config = ref<any>({
     API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
     API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
+    API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
+    // API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
     // API_URI_PROFILE_SERVICE: "https://localhost:7159/api/v1",
     API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
     // API_CANDIDATE_URI: "https://localhost:7007/api/v1",
@@ -30,6 +32,7 @@ const config = ref<any>({
     // API_URI: "https://localhost:5010",
     API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
+    API_URI_ORG_EMPLOYEE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
     API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_CANDIDATE_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
@@ -45,6 +48,9 @@ const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
 const API_URI_ORG_SERVICE = ref<string>(
   config.value[env.value].API_URI_ORG_SERVICE
 );
+const API_URI_ORG_EMPLOYEE_SERVICE = ref<string>(
+  config.value[env.value].API_URI_ORG_EMPLOYEE_SERVICE
+);
 const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
 const API_URI_PROFILE_SERVICE = ref<string>(
   config.value[env.value].API_URI_PROFILE_SERVICE
@@ -57,6 +63,7 @@ export default {
   API_CANDIDATE_URI: API_CANDIDATE_URI.value,
   API_REPORT_URI: API_REPORT_URI.value,
   API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
+  API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
   API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
   MEET_URI: MEET_URI.value,
 };
diff --git a/src/api/manage/api.organization.ts b/src/api/manage/api.organization.ts
index 064a3d5e5..1138be215 100644
--- a/src/api/manage/api.organization.ts
+++ b/src/api/manage/api.organization.ts
@@ -3,6 +3,7 @@
  *  เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน
  */
 import env from "../index";
+const organizationMain = `${env.API_URI}/metadata/main/`;
 const organization = `${env.API_URI}/metadata/organization/`;
 const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`;
 const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`;
@@ -21,6 +22,7 @@ export default {
   /**
    * api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
    */
+  organizationMain: `${organizationMain}organization`,
   organization,
   countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
   countDashbordHistory: `${dashbord}`,
diff --git a/src/api/manage/api.positionEmployee.ts b/src/api/manage/api.positionEmployee.ts
index abd2be21b..456594378 100644
--- a/src/api/manage/api.positionEmployee.ts
+++ b/src/api/manage/api.positionEmployee.ts
@@ -3,6 +3,7 @@
  *  เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
  */
 import env from "../index";
+const positionEmployee = `${env.API_URI}/metadata/main/`;
 const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`;
 const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`;
 const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`;
@@ -11,6 +12,7 @@ const positionEmployeeLevel = `${env.API_URI}/metadata/position-employee-level/`
 const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`;
 
 export default {
+  positionEmployee: `${positionEmployee}positionEmployee`,
   /**
    * api ตำแหน่ง
    */
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 4a463859c..3552d4a07 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -88,11 +88,16 @@ const menuList = readonly<any[]>([
       },
       {
         key: 3.5,
+        label: "ผังโครงสร้างลูกจ้าง",
+        path: "organizationalEmployee",
+      },
+      {
+        key: 3.6,
         label: "จัดการบัญชี 2",
         path: "manageReport2",
       },
       {
-        key: 3.6,
+        key: 3.7,
         label: "รายงานบัญชี",
         path: "organizationalReport",
       },
diff --git a/src/modules/02_organizational/router.ts b/src/modules/02_organizational/router.ts
index 01e908726..cec042ef6 100644
--- a/src/modules/02_organizational/router.ts
+++ b/src/modules/02_organizational/router.ts
@@ -9,6 +9,8 @@ const MainStructChart = () =>
 const MainOrgChart = () =>
   import("@/modules/02_organizational/views/MainOrgChart.vue");
 const MainTree = () => import("@/modules/02_organizational/views/MainTree.vue");
+const MainTreeEmployee = () =>
+  import("@/modules/02_organizational/views/MainTreeEmployee.vue");
 const MainReport = () =>
   import("@/modules/02_organizational/views/MainReport.vue");
 const ManageReport2 = () =>
@@ -60,6 +62,16 @@ export default [
       Role: "organization",
     },
   },
+  {
+    path: "/organizational/employee",
+    name: "organizationalEmployee",
+    component: MainTreeEmployee,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "organization",
+    },
+  },
   {
     path: "/organizational/manage/report",
     name: "manageReport2",
diff --git a/src/modules/02_organizational/views/MainTree.vue b/src/modules/02_organizational/views/MainTree.vue
index c212bb6e0..9d5441556 100644
--- a/src/modules/02_organizational/views/MainTree.vue
+++ b/src/modules/02_organizational/views/MainTree.vue
@@ -2,102 +2,78 @@
 <!-- หน้า ผังโครงสร้าง(Tree) ของ โครงสร้างอัตรากำลัง -->
 <!-- =============================== -->
 <template>
-	<div class="toptitle text-dark col-12 row items-center">ผังโครงสร้าง</div>
-	<div class="text-dark">
-		<q-card flat bordered class="col-12 q-mt-sm">
-			<q-layout
-				view="hHh Lpr lff"
-				container
-				style="height: 80vh"
-				class="shadow-2 rounded-borders page-relative"
-			>
-				<!--Drawer Person Detail-->
-				<q-drawer
-					v-model="isDrawer"
-					:width="220"
-					:breakpoint="400"
-					class="bg-grey-1"
-					bordered
-				>
-					<q-btn
-						size="13px"
-						class="btn-absolute btnShadow"
-						color="white"
-						dense
-						round
-						unelevated
-						@click="isDrawer = false"
-						v-if="isDrawer"
-					>
-						<q-icon
-							name="chevron_left"
-							size="20px"
-							color="grey-7"
-						/>
-					</q-btn>
-					<q-scroll-area class="fit">
-						<div class="row col-12 text-dark q-pt-sm">
-							<div class="col-12 column items-center q-py-lg">
-								<img
-									v-if="
-										personDetail == null ||
-										personDetail.avatar == '' ||
-										personDetail.avatar ==
-											'https://cdn.quasar.dev/img/boy-avatar.png'
-									"
-									src="@/assets/avatar_user.jpg"
-									style="
-										width: 90px;
-										height: 90px;
-										border-radius: 50%;
-									"
-								/>
-								<img
-									v-else
-									:src="personDetail.avatar"
-									style="
-										width: 90px;
-										height: 90px;
-										border-radius: 50%;
-									"
-								/>
-							</div>
-							<div
-								class="col-12 items-center row col-12 justify-center"
-							>
-								<div style="font-weight: 600" class="q-mr-xs">
-									{{ personDetail ? personDetail.name : "" }}
-								</div>
-								<q-btn dense flat size="10px">
-									<q-icon
-										name="mdi-open-in-new"
-										size="15px"
-										color="grey-6"
-										@click="goToUserRegistry()"
-									/>
-									<q-tooltip>ทะเบียนประวัติ</q-tooltip>
-								</q-btn>
-							</div>
-							<div class="q-pl-lg q-pt-sm q-gutter-xs textSub">
-								<div
-									class="text-weight-medium q-pt-md row items-center"
-								>
-									<q-icon
-										size="10px"
-										color="grey-4"
-										name="mdi-circle"
-									/>
-									<div class="q-pl-sm">ตำแหน่งเลขที่</div>
-								</div>
-								<div class="text-grey-7 q-pl-lg">
-									{{
-										personDetail
-											? personDetail.positionNum
-											: ""
-									}}
-								</div>
+  <div class="toptitle text-dark col-12 row items-center">ผังโครงสร้าง</div>
+  <div class="text-dark">
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <q-layout
+        view="hHh Lpr lff"
+        container
+        style="height: 80vh"
+        class="shadow-2 rounded-borders page-relative"
+      >
+        <!--Drawer Person Detail-->
+        <q-drawer
+          v-model="isDrawer"
+          :width="220"
+          :breakpoint="400"
+          class="bg-grey-1"
+          bordered
+        >
+          <q-btn
+            size="13px"
+            class="btn-absolute btnShadow"
+            color="white"
+            dense
+            round
+            unelevated
+            @click="isDrawer = false"
+            v-if="isDrawer"
+          >
+            <q-icon name="chevron_left" size="20px" color="grey-7" />
+          </q-btn>
+          <q-scroll-area class="fit">
+            <div class="row col-12 text-dark q-pt-sm">
+              <div class="col-12 column items-center q-py-lg">
+                <img
+                  v-if="
+                    personDetail == null ||
+                    personDetail.avatar == '' ||
+                    personDetail.avatar ==
+                      'https://cdn.quasar.dev/img/boy-avatar.png'
+                  "
+                  src="@/assets/avatar_user.jpg"
+                  style="width: 90px; height: 90px; border-radius: 50%"
+                />
+                <img
+                  v-else
+                  :src="personDetail.avatar"
+                  style="width: 90px; height: 90px; border-radius: 50%"
+                />
+              </div>
+              <div class="col-12 items-center row col-12 justify-center">
+                <div style="font-weight: 600" class="q-mr-xs">
+                  {{ personDetail ? personDetail.name : "" }}
+                </div>
+                <q-btn dense flat size="10px">
+                  <q-icon
+                    name="mdi-open-in-new"
+                    size="15px"
+                    color="grey-6"
+                    @click="goToUserRegistry()"
+                  />
+                  <q-tooltip>ทะเบียนประวัติ</q-tooltip>
+                </q-btn>
+              </div>
+              <div class="q-pl-lg q-pt-sm q-gutter-xs textSub">
+                <div class="text-weight-medium q-pt-md row items-center">
+                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
+                  <div class="q-pl-sm">ตำแหน่งเลขที่</div>
+                </div>
+                <div class="text-grey-7 q-pl-lg">
+                  {{ personDetail ? personDetail.positionNum : "" }}
+                </div>
 
-								<!-- <div class="text-weight-medium q-pt-md row items-center">
+                <!-- <div class="text-weight-medium q-pt-md row items-center">
                   <q-icon size="10px" color="grey-4" name="mdi-circle" />
                   <div class="q-pl-sm">ตำแหน่งในการบริหารงาน</div>
                 </div>
@@ -105,935 +81,732 @@
                   {{ personDetail ? personDetail.executivePosition : "" }}
                 </div> -->
 
-								<div
-									class="text-weight-medium q-pt-md row items-center"
-								>
-									<q-icon
-										size="10px"
-										color="grey-4"
-										name="mdi-circle"
-									/>
-									<div class="q-pl-sm">ตำแหน่งประเภท</div>
-								</div>
-								<div class="text-grey-7 q-pl-lg">
-									{{
-										personDetail
-											? personDetail.positionType
-											: ""
-									}}
-								</div>
+                <div class="text-weight-medium q-pt-md row items-center">
+                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
+                  <div class="q-pl-sm">ตำแหน่งประเภท</div>
+                </div>
+                <div class="text-grey-7 q-pl-lg">
+                  {{ personDetail ? personDetail.positionType : "" }}
+                </div>
 
-								<div
-									class="text-weight-medium q-pt-md row items-center"
-								>
-									<q-icon
-										size="10px"
-										color="grey-4"
-										name="mdi-circle"
-									/>
-									<div class="q-pl-sm">ระดับตำแหน่ง</div>
-								</div>
-								<div class="text-grey-7 q-pl-lg">
-									{{
-										personDetail
-											? personDetail.positionLevel
-											: ""
-									}}
-								</div>
-							</div>
-						</div>
-					</q-scroll-area>
-				</q-drawer>
+                <div class="text-weight-medium q-pt-md row items-center">
+                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
+                  <div class="q-pl-sm">ระดับตำแหน่ง</div>
+                </div>
+                <div class="text-grey-7 q-pl-lg">
+                  {{ personDetail ? personDetail.positionLevel : "" }}
+                </div>
+              </div>
+            </div>
+          </q-scroll-area>
+        </q-drawer>
 
-				<!--Edit Button Set and Search Tree input and Show Free positionNum-->
-				<q-page-container class="col-12 row">
-					<q-page padding style="padding-top: 70px">
-						<!-- Button Set -->
-						<q-page-sticky
-							expand
-							position="top"
-							class="bg-white pageSK q-pt-sm"
-						>
-							<div
-								class="col-12 q-px-md row items-center q-py-sm q-col-gutter-xs"
-							>
-								<div class="row">
-									<buttonsSet
-										v-model:editvisible="isShowEditTree"
-										:deleteDraft="deleteDraft"
-										:publishDraft="publishDraft"
-										:refreshData="resetTree"
-										:publicData="version === 'published'"
-									/><q-btn
-										color="info"
-										flat
-										dense
-										round
-										size="14px"
-										icon="mdi-history"
-										@click="clickHistory"
-										><q-tooltip
-											>ประวัติการเผยแพร่</q-tooltip
-										>
-									</q-btn>
-								</div>
-								<q-space />
-								<q-select
-									dense
-									outlined
-									v-model="selectedFile"
-									:options="fileList"
-									class="col-xs-12 col-sm-4 col-md-3"
-									map-options
-									emit-value
-									v-if="!isShowEditTree"
-								/>
-								<q-input
-									outlined
-									dense
-									style="max-width: 200px"
-									ref="treeFilterRef"
-									v-model="treeFilter"
-									placeholder="ค้นหา"
-									debounce="300"
-								>
-									<template v-slot:append>
-										<q-icon
-											v-if="treeFilter == ''"
-											name="search"
-										/>
-										<q-icon
-											v-if="treeFilter !== ''"
-											name="clear"
-											class="cursor-pointer"
-											@click="resetFilter"
-										/>
-									</template>
-								</q-input>
-							</div>
-						</q-page-sticky>
+        <!--Edit Button Set and Search Tree input and Show Free positionNum-->
+        <q-page-container class="col-12 row">
+          <q-page padding style="padding-top: 70px">
+            <!-- Button Set -->
+            <q-page-sticky
+              expand
+              position="top"
+              class="bg-white pageSK q-pt-sm"
+            >
+              <div
+                class="col-12 q-px-md row items-center q-py-sm q-col-gutter-xs"
+              >
+                <div class="row">
+                  <buttonsSet
+                    v-model:editvisible="isShowEditTree"
+                    :deleteDraft="deleteDraft"
+                    :publishDraft="publishDraft"
+                    :refreshData="resetTree"
+                    :publicData="version === 'published'"
+                  /><q-btn
+                    color="info"
+                    flat
+                    dense
+                    round
+                    size="14px"
+                    icon="mdi-history"
+                    @click="clickHistory"
+                    ><q-tooltip>ประวัติการเผยแพร่</q-tooltip>
+                  </q-btn>
+                </div>
+                <q-space />
+                <q-select
+                  dense
+                  outlined
+                  v-model="selectedFile"
+                  :options="fileList"
+                  class="col-xs-12 col-sm-4 col-md-3"
+                  map-options
+                  emit-value
+                  v-if="!isShowEditTree"
+                />
+                <q-input
+                  outlined
+                  dense
+                  style="max-width: 200px"
+                  ref="treeFilterRef"
+                  v-model="treeFilter"
+                  placeholder="ค้นหา"
+                  debounce="300"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="treeFilter == ''" name="search" />
+                    <q-icon
+                      v-if="treeFilter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="resetFilter"
+                    />
+                  </template>
+                </q-input>
+              </div>
+            </q-page-sticky>
 
-						<!-- Tree View-->
-						<div class="q-gutter-sm">
-							<q-tree
-								v-show="!isShowEditTree"
-								no-transition
-								ref="qtreeView"
-								:nodes="dataTree"
-								:no-results-label="treeSearchNotFound"
-								:no-nodes-label="noTreeData"
-								node-key="keyId"
-								:filter="treeFilter"
-								:filter-method="treeFilterMethod"
-								v-model:expanded="expandedNodeView"
-							>
-								<!--organization บรรทัดแสดงชื่อหน่วยงาน -->
-								<template v-slot:header-organization="prop">
-									<div
-										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-									>
-										<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-										<div>
-											<div class="text-weight-medium">
-												{{ prop.node.organizationName }}
-											</div>
-											<div class="text-weight-light">
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node
-																.governmentCode
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.agency
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.government
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.department
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.pile
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node
-																.organizationShortName
-												}}
-											</div>
-										</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
-											"
-										/>
-									</div>
-								</template>
-								<!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
-								<template v-slot:header-person="prop">
-									<div
-										class="row items-center text-dark col-12 q-py-xs q-pl-sm rounded-borders pointer"
-										style="width: 100%"
-									>
-										<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
-											class="row"
-											@click="seeUserDetail(prop.node)"
-										>
-											<!--=====ตำแหน่งว่าง สีแดง=====-->
-											<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"
-												v-if="
-													prop.node.positionType !=
-														null &&
-													prop.node.positionType != ''
-												"
-											>
-												ประเภท{{
-													`${prop.node.positionType}`
-												}}
-											</div>
-											<div
-												class="q-pr-sm"
-												v-if="
-													prop.node.positionLevel !=
-														null &&
-													prop.node.positionLevel !=
-														''
-												"
-											>
-												ระดับ{{
-													`${prop.node.positionLevel}`
-												}}
-											</div>
-											<div
-												class="q-pr-sm"
-												v-if="
-													prop.node
-														.executivePosition !=
-														null &&
-													prop.node
-														.executivePosition != ''
-												"
-											>
-												{{
-													`(${prop.node.executivePosition})`
-												}}
-											</div>
-											<div class="q-pr-sm">
-												{{ prop.node.positionNum }}
-											</div>
-										</div>
-										<q-icon
-											v-if="prop.node.positionLeaderFlag"
-											class="q-mr-sm"
-											size="15px"
-											color="primary"
-											name="mdi-bookmark"
-										/>
-										<!-- <div
+            <!-- Tree View-->
+            <div class="q-gutter-sm">
+              <q-tree
+                v-show="!isShowEditTree"
+                no-transition
+                ref="qtreeView"
+                :nodes="dataTree"
+                :no-results-label="treeSearchNotFound"
+                :no-nodes-label="noTreeData"
+                node-key="keyId"
+                :filter="treeFilter"
+                :filter-method="treeFilterMethod"
+                v-model:expanded="expandedNodeView"
+              >
+                <!--organization บรรทัดแสดงชื่อหน่วยงาน -->
+                <template v-slot:header-organization="prop">
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                    <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.organizationName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.governmentCode
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.agency
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.government
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.department
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.pile
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.organizationShortName
+                        }}
+                      </div>
+                    </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"
+                    />
+                  </div>
+                </template>
+                <!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
+                <template v-slot:header-person="prop">
+                  <div
+                    class="row items-center text-dark col-12 q-py-xs q-pl-sm rounded-borders pointer"
+                    style="width: 100%"
+                  >
+                    <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 class="row" @click="seeUserDetail(prop.node)">
+                      <!--=====ตำแหน่งว่าง สีแดง=====-->
+                      <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"
+                        v-if="
+                          prop.node.positionType != null &&
+                          prop.node.positionType != ''
+                        "
+                      >
+                        ประเภท{{ `${prop.node.positionType}` }}
+                      </div>
+                      <div
+                        class="q-pr-sm"
+                        v-if="
+                          prop.node.positionLevel != null &&
+                          prop.node.positionLevel != ''
+                        "
+                      >
+                        ระดับ{{ `${prop.node.positionLevel}` }}
+                      </div>
+                      <div
+                        class="q-pr-sm"
+                        v-if="
+                          prop.node.executivePosition != null &&
+                          prop.node.executivePosition != ''
+                        "
+                      >
+                        {{ `(${prop.node.executivePosition})` }}
+                      </div>
+                      <div class="q-pr-sm">
+                        {{ prop.node.positionNum }}
+                      </div>
+                    </div>
+                    <q-icon
+                      v-if="prop.node.positionLeaderFlag"
+                      class="q-mr-sm"
+                      size="15px"
+                      color="primary"
+                      name="mdi-bookmark"
+                    />
+                    <!-- <div
                       class="text-white"
                       style="font-size: 1px; display: none"
                     >
                       {{ prop.node.positionLevel }}
                     </div> -->
-									</div>
-								</template>
-							</q-tree>
-						</div>
-						<!--Tree Edit-->
-						<div class="q-gutter-sm">
-							<!-- must use v-if to be able to use lazyLoad for second time-->
-							<q-tree
-								v-if="isShowEditTree"
-								no-transition
-								ref="qtreeEdit"
-								:nodes="dataTreeDraft"
-								:no-results-label="treeSearchNotFound"
-								:no-nodes-label="noTreeData"
-								node-key="keyId"
-								:filter="treeFilter"
-								:filter-method="treeFilterMethod"
-								@lazy-load="onLazyLoad"
-								v-model:expanded="expandedNodeEdit"
-								dense
-							>
-								<!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
-								<template v-slot:header-organization="prop">
-									<div
-										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-									>
-										<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-										<div>
-											<div class="text-weight-medium">
-												{{ prop.node.organizationName }}
-											</div>
-											<div class="text-weight-light">
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node
-																.governmentCode
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.agency
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.government
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.department
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node.pile
-												}}
-												{{
-													prop.node
-														.organizationParentId ==
-													null
-														? null
-														: prop.node
-																.organizationShortName
-												}}
-											</div>
-										</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-btn
-											flat
-											round
-											color="green"
-											@click.stop="
-												(popupAddOrganization = true),
-													(modalHeaderName =
-														prop.node
-															.organizationName),
-													(rowClickTree = prop.node),
-													(modalHeaderPosition =
-														prop.node.keyId.search(
-															'-'
-														) > 0
-															? true
-															: false)
-											"
-											size="10px"
-											icon="mdi-plus"
-										>
-											<q-tooltip
-												>เพิ่มโครงสร้าง</q-tooltip
-											>
-										</q-btn>
-										<!--
+                  </div>
+                </template>
+              </q-tree>
+            </div>
+            <!--Tree Edit-->
+            <div class="q-gutter-sm">
+              <!-- must use v-if to be able to use lazyLoad for second time-->
+              <q-tree
+                v-if="isShowEditTree"
+                no-transition
+                ref="qtreeEdit"
+                :nodes="dataTreeDraft"
+                :no-results-label="treeSearchNotFound"
+                :no-nodes-label="noTreeData"
+                node-key="keyId"
+                :filter="treeFilter"
+                :filter-method="treeFilterMethod"
+                @lazy-load="onLazyLoad"
+                v-model:expanded="expandedNodeEdit"
+                dense
+              >
+                <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
+                <template v-slot:header-organization="prop">
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                    <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.organizationName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.governmentCode
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.agency
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.government
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.department
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.pile
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.organizationShortName
+                        }}
+                      </div>
+                    </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-btn
+                      flat
+                      round
+                      color="green"
+                      @click.stop="
+                        (popupAddOrganization = true),
+                          (modalHeaderName = prop.node.organizationName),
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
+                      "
+                      size="10px"
+                      icon="mdi-plus"
+                    >
+                      <q-tooltip>เพิ่มโครงสร้าง</q-tooltip>
+                    </q-btn>
+                    <!--
                         v-if="
                         prop.node.totalPositionCount ==
                         prop.node.totalPositionVacant
                       "
                     -->
-										<q-btn
-											v-if="
-												prop.node.organizationId !=
-												orgRootIdDraft
-											"
-											flat
-											round
-											color="green"
-											@click.stop="
-												(popupEditSelectedOrganization = true),
-													(modalHeaderName =
-														prop.node
-															.organizationName),
-													(rowClickTree = prop.node),
-													(modalHeaderPosition =
-														prop.node.keyId.search(
-															'-'
-														) > 0
-															? true
-															: false)
-											"
-											size="10px"
-											icon="mdi-pencil-outline"
-										>
-											<q-tooltip>แก้ไขหน่วยงาน</q-tooltip>
-										</q-btn>
-										<q-btn
-											v-if="
-												prop.node.totalPositionCount ==
-													prop.node
-														.totalPositionVacant &&
-												prop.node.organizationId !=
-													orgRootIdDraft
-											"
-											flat
-											round
-											color="red"
-											size="10px"
-											class="q-mr-sm"
-											icon="mdi-trash-can-outline"
-											@click.stop="
-												deleteOrganization(prop.node)
-											"
-										>
-											<q-tooltip>ลบหน่วยงาน</q-tooltip>
-										</q-btn>
-										<q-space />
-									</div>
-								</template>
-								<!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
-								<template v-slot:header-person="prop">
-									<div
-										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-									>
-										<div
-											rounded
-											:style="
-												!prop.node.isActive
-													? 'filter: grayscale(60%);'
-													: ''
-											"
-										>
-											<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>
+                    <q-btn
+                      v-if="prop.node.organizationId != orgRootIdDraft"
+                      flat
+                      round
+                      color="green"
+                      @click.stop="
+                        (popupEditSelectedOrganization = true),
+                          (modalHeaderName = prop.node.organizationName),
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
+                      "
+                      size="10px"
+                      icon="mdi-pencil-outline"
+                    >
+                      <q-tooltip>แก้ไขหน่วยงาน</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="
+                        prop.node.totalPositionCount ==
+                          prop.node.totalPositionVacant &&
+                        prop.node.organizationId != orgRootIdDraft
+                      "
+                      flat
+                      round
+                      color="red"
+                      size="10px"
+                      class="q-mr-sm"
+                      icon="mdi-trash-can-outline"
+                      @click.stop="deleteOrganization(prop.node)"
+                    >
+                      <q-tooltip>ลบหน่วยงาน</q-tooltip>
+                    </q-btn>
+                    <q-space />
+                  </div>
+                </template>
+                <!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
+                <template v-slot:header-person="prop">
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                    <div
+                      rounded
+                      :style="
+                        !prop.node.isActive ? 'filter: grayscale(60%);' : ''
+                      "
+                    >
+                      <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>
 
-										<div
-											rounded
-											:class="
-												!prop.node.isActive
-													? 'text-grey-6'
-													: 'text-black'
-											"
-										>
-											<!--=====ตำแหน่งว่าง สีแดง=====-->
-											<div class="row">
-												<div
-													v-if="
-														prop.node.name ==
-															`ว่าง` ||
-														prop.node.name ==
-															`N/A` ||
-														prop.node.name == null
-													"
-													class="q-px-sm text-weight-medium"
-													:class="
-														!prop.node.isActive
-															? 'text-grey-6'
-															: '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"
-													v-if="
-														prop.node
-															.positionType !=
-															null &&
-														prop.node
-															.positionType != ''
-													"
-												>
-													ประเภท{{
-														prop.node.positionType
-													}}
-												</div>
-												<div
-													class="q-pr-sm"
-													v-if="
-														prop.node
-															.positionLevel !=
-															null &&
-														prop.node
-															.positionLevel != ''
-													"
-												>
-													ระดับ{{
-														prop.node.positionLevel
-													}}
-												</div>
-												<div
-													class="q-pr-sm"
-													v-if="
-														prop.node
-															.executivePosition !=
-															null &&
-														prop.node
-															.executivePosition !=
-															''
-													"
-												>
-													{{
-														`(${prop.node.executivePosition})`
-													}}
-												</div>
-												<div class="q-pr-sm">
-													{{ prop.node.positionNum }}
-												</div>
-											</div>
-											<div
-												class="q-pl-sm text-weight-light"
-											>
-												{{ prop.node.positionSideName }}
-												<!-- {{ prop.node.executivePosition }} -->
-												{{
-													prop.node
-														.executivePositionSide
-												}}
-											</div>
-										</div>
-										<q-icon
-											v-if="prop.node.positionLeaderFlag"
-											class="q-mr-sm"
-											size="15px"
-											color="primary"
-											name="mdi-bookmark"
-										></q-icon
-										><q-btn
-											v-if="
-												prop.node.name == `ว่าง` ||
-												prop.node.name == `N/A` ||
-												prop.node.name == null
-											"
-											flat
-											round
-											color="green"
-											@click.stop="
-												(popupEditSelectedPosition = true),
-													(modalHeaderName =
-														prop.node.positionName),
-													(rowClickTree = prop.node),
-													(modalHeaderPosition =
-														prop.node.keyId.search(
-															'-'
-														) > 0
-															? true
-															: false)
-											"
-											size="10px"
-											icon="mdi-pencil-outline"
-										>
-											<q-tooltip>แก้ไขตำแหน่ง</q-tooltip>
-										</q-btn>
-										<q-btn
-											v-if="
-												prop.node.name == `ว่าง` ||
-												prop.node.name == `N/A` ||
-												prop.node.name == null
-											"
-											flat
-											round
-											color="red"
-											size="10px"
-											class="q-mr-sm"
-											icon="mdi-trash-can-outline"
-											@click.stop="
-												deletePosition(prop.node)
-											"
-										>
-											<q-tooltip>ลบตำแหน่ง</q-tooltip>
-										</q-btn>
-										<q-space />
-										<!-- <div
+                    <div
+                      rounded
+                      :class="
+                        !prop.node.isActive ? 'text-grey-6' : 'text-black'
+                      "
+                    >
+                      <!--=====ตำแหน่งว่าง สีแดง=====-->
+                      <div class="row">
+                        <div
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium"
+                          :class="
+                            !prop.node.isActive ? 'text-grey-6' : '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"
+                          v-if="
+                            prop.node.positionType != null &&
+                            prop.node.positionType != ''
+                          "
+                        >
+                          ประเภท{{ prop.node.positionType }}
+                        </div>
+                        <div
+                          class="q-pr-sm"
+                          v-if="
+                            prop.node.positionLevel != null &&
+                            prop.node.positionLevel != ''
+                          "
+                        >
+                          ระดับ{{ prop.node.positionLevel }}
+                        </div>
+                        <div
+                          class="q-pr-sm"
+                          v-if="
+                            prop.node.executivePosition != null &&
+                            prop.node.executivePosition != ''
+                          "
+                        >
+                          {{ `(${prop.node.executivePosition})` }}
+                        </div>
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionNum }}
+                        </div>
+                      </div>
+                      <div class="q-pl-sm text-weight-light">
+                        {{ prop.node.positionSideName }}
+                        <!-- {{ prop.node.executivePosition }} -->
+                        {{ prop.node.executivePositionSide }}
+                      </div>
+                    </div>
+                    <q-icon
+                      v-if="prop.node.positionLeaderFlag"
+                      class="q-mr-sm"
+                      size="15px"
+                      color="primary"
+                      name="mdi-bookmark"
+                    ></q-icon
+                    ><q-btn
+                      v-if="
+                        prop.node.name == `ว่าง` ||
+                        prop.node.name == `N/A` ||
+                        prop.node.name == null
+                      "
+                      flat
+                      round
+                      color="green"
+                      @click.stop="
+                        (popupEditSelectedPosition = true),
+                          (modalHeaderName = prop.node.positionName),
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
+                      "
+                      size="10px"
+                      icon="mdi-pencil-outline"
+                    >
+                      <q-tooltip>แก้ไขตำแหน่ง</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="
+                        prop.node.name == `ว่าง` ||
+                        prop.node.name == `N/A` ||
+                        prop.node.name == null
+                      "
+                      flat
+                      round
+                      color="red"
+                      size="10px"
+                      class="q-mr-sm"
+                      icon="mdi-trash-can-outline"
+                      @click.stop="deletePosition(prop.node)"
+                    >
+                      <q-tooltip>ลบตำแหน่ง</q-tooltip>
+                    </q-btn>
+                    <q-space />
+                    <!-- <div
                       class="text-white"
                       style="font-size: 1px; display: none"
                     >
                       {{ prop.node.positionLevel }}
                     </div> -->
-									</div>
-								</template>
-							</q-tree>
-						</div>
-					</q-page>
-				</q-page-container>
-				<!-- popup Add Organizations & Positions -->
-				<q-dialog v-model="popupAddOrganization" persistent>
-					<q-card class="text-dark" style="min-width: 950px">
-						<q-card-section class="row items-center q-py-sm">
-							<div class="text-bold">
-								เพิ่มโครงสร้างอัตรากำลังภายใต้
-							</div>
-							<strong class="text-primary q-pl-sm">{{
-								modalHeaderName
-							}}</strong>
-							<q-space />
-							<q-btn
-								icon="close"
-								unelevated
-								round
-								dense
-								style="
-									color: #ff8080;
-									background-color: #ffdede;
-								"
-								size="12px"
-								v-close-popup
-							/>
-						</q-card-section>
+                  </div>
+                </template>
+              </q-tree>
+            </div>
+          </q-page>
+        </q-page-container>
+        <!-- popup Add Organizations & Positions -->
+        <q-dialog v-model="popupAddOrganization" persistent>
+          <q-card class="text-dark" style="min-width: 950px">
+            <q-card-section class="row items-center q-py-sm">
+              <div class="text-bold">เพิ่มโครงสร้างอัตรากำลังภายใต้</div>
+              <strong class="text-primary q-pl-sm">{{
+                modalHeaderName
+              }}</strong>
+              <q-space />
+              <q-btn
+                icon="close"
+                unelevated
+                round
+                dense
+                style="color: #ff8080; background-color: #ffdede"
+                size="12px"
+                v-close-popup
+              />
+            </q-card-section>
 
-						<q-separator />
+            <q-separator />
 
-						<q-card-section
-							style="min-height: 60vh; max-height: 70vh"
-							class="scroll"
-						>
-							<organizationComponent
-								v-model:organizprops="organizationData"
-								v-model:formprops="organizationForm"
-							/>
-							<br />
-							<positionsComponent
-								v-model:positions="positionData"
-								v-model:formprops="positionForm"
-								:is-add-new="true"
-								v-if="modalHeaderPosition"
-							/>
-						</q-card-section>
+            <q-card-section
+              style="min-height: 60vh; max-height: 70vh"
+              class="scroll"
+            >
+              <organizationComponent
+                v-model:organizprops="organizationData"
+                v-model:formprops="organizationForm"
+              />
+              <br />
+              <positionsComponent
+                v-model:positions="positionData"
+                v-model:formprops="positionForm"
+                :is-add-new="true"
+                v-if="modalHeaderPosition"
+              />
+            </q-card-section>
 
-						<q-separator />
+            <q-separator />
 
-						<q-card-actions
-							align="right"
-							class="text-primary q-py-sm"
-						>
-							<!-- Save for Add Organizations & Positions -->
-							<q-btn
-								flat
-								round
-								dense
-								:color="'public'"
-								@click="addStructure(rowClickTree)"
-								icon="mdi-content-save-outline"
-							>
-								<q-tooltip>บันทึก</q-tooltip>
-							</q-btn>
-						</q-card-actions>
-					</q-card>
-				</q-dialog>
-				<!-- popup Edit Selected Position -->
-				<q-dialog v-model="popupEditSelectedPosition" persistent>
-					<q-card class="text-dark" style="min-width: 70vw">
-						<q-card-section class="row items-center q-py-sm">
-							<div class="text-bold">แก้ไขตำแหน่ง</div>
-							<strong class="text-primary q-pl-sm">{{
-								modalHeaderName
-							}}</strong>
-							<q-space />
-							<q-btn
-								icon="close"
-								unelevated
-								round
-								dense
-								style="
-									color: #ff8080;
-									background-color: #ffdede;
-								"
-								size="12px"
-								v-close-popup
-							/>
-						</q-card-section>
-						<q-separator />
-						<q-card-section>
-							<positionsComponent
-								v-model:positions="positionData"
-								v-model:formprops="positionForm"
-								:is-add-new="false"
-								:editObj="rowClickTree"
-							/>
-						</q-card-section>
-						<q-separator />
-						<q-card-actions
-							align="right"
-							class="text-primary q-py-sm"
-						>
-							<!-- save Edit Selected Position -->
-							<q-btn
-								flat
-								dense
-								round
-								:color="'public'"
-								@click="editPositionStructure(rowClickTree)"
-								icon="mdi-content-save-outline"
-							>
-								<q-tooltip>บันทึก</q-tooltip>
-							</q-btn>
-						</q-card-actions>
-					</q-card>
-				</q-dialog>
-				<!-- popup Edit Selected Organization -->
-				<q-dialog v-model="popupEditSelectedOrganization" persistent>
-					<q-card class="text-dark" style="min-width: 70vw">
-						<q-card-section class="row items-center q-py-sm">
-							<div class="text-bold">แก้ไขหน่วยงาน</div>
-							<strong class="text-primary q-pl-sm">{{
-								modalHeaderName
-							}}</strong>
-							<q-space />
-							<q-btn
-								icon="close"
-								unelevated
-								round
-								dense
-								style="
-									color: #ff8080;
-									background-color: #ffdede;
-								"
-								size="12px"
-								v-close-popup
-							/>
-						</q-card-section>
-						<q-separator />
-						<q-card-section>
-							<organizationEditComponent
-								v-model:organizprops="organizationDataEdit"
-								v-model:formprops="organizationForm"
-								:org="rowClickTree"
-							/>
-						</q-card-section>
-						<q-separator />
-						<q-card-actions
-							align="right"
-							class="text-primary q-py-sm"
-						>
-							<!-- save Edit Selected Organization -->
-							<q-btn
-								flat
-								dense
-								round
-								:color="'public'"
-								@click="editOrgStructure(rowClickTree)"
-								icon="mdi-content-save-outline"
-							>
-								<q-tooltip>บันทึก</q-tooltip>
-							</q-btn>
-						</q-card-actions>
-					</q-card>
-				</q-dialog>
-			</q-layout>
-		</q-card>
-	</div>
+            <q-card-actions align="right" class="text-primary q-py-sm">
+              <!-- Save for Add Organizations & Positions -->
+              <q-btn
+                flat
+                round
+                dense
+                :color="'public'"
+                @click="addStructure(rowClickTree)"
+                icon="mdi-content-save-outline"
+              >
+                <q-tooltip>บันทึก</q-tooltip>
+              </q-btn>
+            </q-card-actions>
+          </q-card>
+        </q-dialog>
+        <!-- popup Edit Selected Position -->
+        <q-dialog v-model="popupEditSelectedPosition" persistent>
+          <q-card class="text-dark" style="min-width: 70vw">
+            <q-card-section class="row items-center q-py-sm">
+              <div class="text-bold">แก้ไขตำแหน่ง</div>
+              <strong class="text-primary q-pl-sm">{{
+                modalHeaderName
+              }}</strong>
+              <q-space />
+              <q-btn
+                icon="close"
+                unelevated
+                round
+                dense
+                style="color: #ff8080; background-color: #ffdede"
+                size="12px"
+                v-close-popup
+              />
+            </q-card-section>
+            <q-separator />
+            <q-card-section>
+              <positionsComponent
+                v-model:positions="positionData"
+                v-model:formprops="positionForm"
+                :is-add-new="false"
+                :editObj="rowClickTree"
+              />
+            </q-card-section>
+            <q-separator />
+            <q-card-actions align="right" class="text-primary q-py-sm">
+              <!-- save Edit Selected Position -->
+              <q-btn
+                flat
+                dense
+                round
+                :color="'public'"
+                @click="editPositionStructure(rowClickTree)"
+                icon="mdi-content-save-outline"
+              >
+                <q-tooltip>บันทึก</q-tooltip>
+              </q-btn>
+            </q-card-actions>
+          </q-card>
+        </q-dialog>
+        <!-- popup Edit Selected Organization -->
+        <q-dialog v-model="popupEditSelectedOrganization" persistent>
+          <q-card class="text-dark" style="min-width: 70vw">
+            <q-card-section class="row items-center q-py-sm">
+              <div class="text-bold">แก้ไขหน่วยงาน</div>
+              <strong class="text-primary q-pl-sm">{{
+                modalHeaderName
+              }}</strong>
+              <q-space />
+              <q-btn
+                icon="close"
+                unelevated
+                round
+                dense
+                style="color: #ff8080; background-color: #ffdede"
+                size="12px"
+                v-close-popup
+              />
+            </q-card-section>
+            <q-separator />
+            <q-card-section>
+              <organizationEditComponent
+                v-model:organizprops="organizationDataEdit"
+                v-model:formprops="organizationForm"
+                :org="rowClickTree"
+              />
+            </q-card-section>
+            <q-separator />
+            <q-card-actions align="right" class="text-primary q-py-sm">
+              <!-- save Edit Selected Organization -->
+              <q-btn
+                flat
+                dense
+                round
+                :color="'public'"
+                @click="editOrgStructure(rowClickTree)"
+                icon="mdi-content-save-outline"
+              >
+                <q-tooltip>บันทึก</q-tooltip>
+              </q-btn>
+            </q-card-actions>
+          </q-card>
+        </q-dialog>
+      </q-layout>
+    </q-card>
+  </div>
 
-	<HistoryTable
-		:rows="rowsHistory"
-		:columns="columnsHistory"
-		:filter="filterHistory"
-		:visible-columns="visibleColumnsHistory"
-		:boss="true"
-		v-model:modal="modalHistory"
-		v-model:inputfilter="filterHistory"
-		v-model:inputvisible="visibleColumnsHistory"
-		v-model:tittle="tittleHistory"
-	>
-		<template #columns="props">
-			<q-tr :props="props">
-				<q-td auto-width>
-					<q-icon
-						class="q-mr-sm"
-						size="15px"
-						color="primary"
-						name="mdi-bookmark"
-						v-if="props.row.isDirector"
-					></q-icon>
-				</q-td>
-				<q-td v-for="col in props.cols" :key="col.name" :props="props">
-					<div v-if="col.name == 'isActive'" class="">
-						<q-icon
-							v-if="col.value == false"
-							name="mdi-close"
-							color="red"
-							class="text-h5"
-						/>
-						<q-icon
-							v-else
-							name="mdi-check"
-							color="positive"
-							class="text-h5"
-						/>
-					</div>
-					<div v-else class="">
-						{{ col.value }}
-					</div>
-				</q-td>
-			</q-tr>
-		</template>
-	</HistoryTable>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    :boss="true"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-icon
+            class="q-mr-sm"
+            size="15px"
+            color="primary"
+            name="mdi-bookmark"
+            v-if="props.row.isDirector"
+          ></q-icon>
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'isActive'" class="">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else class="">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
 </template>
 
 <script setup lang="ts">
@@ -1052,32 +825,27 @@ import { useDataStore } from "@/stores/data";
 import HistoryTable from "@/components/TableHistory.vue";
 import type { QTableProps } from "quasar";
 import type {
-	RequestItemsObject,
-	RequestItemsPublishHistoryObject,
-	Columns,
+  RequestItemsObject,
+  RequestItemsPublishHistoryObject,
+  Columns,
 } from "@/modules/02_organizational/interface/request/Mapping";
 const positionsComponent = defineAsyncComponent(
-	() =>
-		import(
-			"@/modules/02_organizational/components/Tree/MappingPositions.vue"
-		)
+  () =>
+    import("@/modules/02_organizational/components/Tree/MappingPositions.vue")
 ); //ชุด Dropdown ตำแหน่ง
 const organizationComponent = defineAsyncComponent(
-	() =>
-		import(
-			"@/modules/02_organizational/components/Tree/OrganizationDialog.vue"
-		)
+  () =>
+    import("@/modules/02_organizational/components/Tree/OrganizationDialog.vue")
 ); //ชุด Dropdown หน่วยงาน for Add
 const organizationEditComponent = defineAsyncComponent(
-	() =>
-		import(
-			"@/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue"
-		)
+  () =>
+    import(
+      "@/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue"
+    )
 ); //ชุด Dropdown หน่วยงาน for Edit ครั้งละ 1 หน่วยงาน
 
 const buttonsSet = defineAsyncComponent(
-	() =>
-		import("@/modules/02_organizational/components/Tree/TreeButtonsSet.vue")
+  () => import("@/modules/02_organizational/components/Tree/TreeButtonsSet.vue")
 ); //ชุด ปุ่มกด copy from TableView but delete Table
 
 // import CustomComponent from "@/components/CustomDialog.vue";
@@ -1147,284 +915,284 @@ const selectedFile = ref<string>("");
 
 const visibleColumnsHistory = ref<String[]>(["detail", "editUser", "editDate"]);
 const columnsHistory = ref<QTableProps["columns"]>([
-	{
-		name: "detail",
-		align: "left",
-		label: "รายละเอียด",
-		sortable: true,
-		field: "detail",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "editUser",
-		align: "left",
-		label: "ผู้ดำเนินการ",
-		sortable: true,
-		field: "editUser",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "editDate",
-		align: "left",
-		label: "วันที่แก้ไข",
-		sortable: true,
-		field: "editDate",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "editUser",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "editUser",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "editDate",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "editDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
 ]);
 
 watch(isShowEditTree, (count, prevCount) => {
-	if (isShowEditTree.value) {
-		isDrawer.value = false;
-	}
+  if (isShowEditTree.value) {
+    isDrawer.value = false;
+  }
 }); // close drawer when enter edit mode
 
 watch(selectedFile, async (value, oldValue) => {
-	await loadJsonTree(value);
+  await loadJsonTree(value);
 });
 
 onMounted(async () => {
-	console.log("onMounted");
-	await fetchTreeRoot(true); //fetch Root Edit Tree level 1
-	expandedNodeView.value = [`1`];
+  console.log("onMounted");
+  await fetchTreeRoot(true); //fetch Root Edit Tree level 1
+  expandedNodeView.value = [`1`];
 
-	await loadPublishScreen();
+  await loadPublishScreen();
 
-	await isTreeHasDraft();
+  await isTreeHasDraft();
 });
 
 const loadTreeData = async () => {
-	//for test load file on server
-	await http
-		.get(
-			//   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
-			//   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/1-2-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร.json"
-			//   `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`
-			"https://s3cluster.frappet.com/bma-public-test/organization/strueture/61a11705-8346-4336-8289-49f72ed9463f-%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%8A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%A1%E0%B8%AB%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%A3.json"
-		)
-		.then((res) => {
-			console.log(res.data.result);
-			dataTree.value = res.data.result;
-		})
-		.catch((e) => {
-			manageApiErrorMsg(e);
-		});
+  //for test load file on server
+  await http
+    .get(
+      //   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
+      //   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/1-2-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร.json"
+      //   `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`
+      "https://s3cluster.frappet.com/bma-public-test/organization/strueture/61a11705-8346-4336-8289-49f72ed9463f-%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%8A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%A1%E0%B8%AB%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%A3.json"
+    )
+    .then((res) => {
+      console.log(res.data.result);
+      dataTree.value = res.data.result;
+    })
+    .catch((e) => {
+      manageApiErrorMsg(e);
+    });
 };
 
 const loadViewTree = async () => {
-	await fetchTreeRoot(false); //fetch root view tree level 1
-	dataTree.value[0].lazy = false; //must set lazy to false
-	await fetchChildrenByParentId(dataTree.value[0]); // fetch children view tree level 2
-	dataTree.value[0].children.forEach((element: any) => {
-		//fill all children of all level 2 nodes
-		loadFileServer(element);
-	});
+  await fetchTreeRoot(false); //fetch root view tree level 1
+  dataTree.value[0].lazy = false; //must set lazy to false
+  await fetchChildrenByParentId(dataTree.value[0]); // fetch children view tree level 2
+  dataTree.value[0].children.forEach((element: any) => {
+    //fill all children of all level 2 nodes
+    loadFileServer(element);
+  });
 };
 
 const loadPublishScreen = async () => {
-	console.log("onMounted");
-	await fetchPublishFile();
-	expandedNodeView.value = [`1`];
-	setTimeout(async () => {
-		await fetchTreeRoot(false); //fetch root view tree level 1
-		dataTree.value[0].lazy = false; //must set lazy to false
-		await loadJsonTree(selectedFile.value);
-	}, 600);
+  console.log("onMounted");
+  await fetchPublishFile();
+  expandedNodeView.value = [`1`];
+  setTimeout(async () => {
+    await fetchTreeRoot(false); //fetch root view tree level 1
+    dataTree.value[0].lazy = false; //must set lazy to false
+    await loadJsonTree(selectedFile.value);
+  }, 600);
 };
 
 const loadJsonTree = async (fileName: string) => {
-	await http
-		.get(`${config.s3ClusterUrl}${fileName}`)
-		.then((res) => {
-			dataTree.value[0].lazy = false; //must set lazy to false
-			dataTree.value[0].children = res.data;
-		})
-		.catch((e) => {
-			manageApiErrorMsg(e);
-		})
-		.finally(() => {
-			//   loaderPage(false);
-		});
+  await http
+    .get(`${config.s3ClusterUrl}${fileName}`)
+    .then((res) => {
+      dataTree.value[0].lazy = false; //must set lazy to false
+      dataTree.value[0].children = res.data;
+    })
+    .catch((e) => {
+      manageApiErrorMsg(e);
+    })
+    .finally(() => {
+      //   loaderPage(false);
+    });
 };
 
 const loadFileServer = async (node: any) => {
-	// test data = "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
-	// request = `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`;
-	node.lazy = false; // must set lazy to false
-	await http
-		.get(
-			`${config.s3ClusterUrl}${node.organizationId}-${node.organizationName}.json`
-		)
-		.then((res) => {
-			console.log(res.data);
-			node.children = res.data;
-		})
-		.catch((e) => {
-			//   console.log(e);
-			//   console.log(e.response);
-			manageApiErrorMsg(e);
-		})
-		.finally(() => {
-			//   loaderPage(false);
-		});
+  // test data = "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
+  // request = `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`;
+  node.lazy = false; // must set lazy to false
+  await http
+    .get(
+      `${config.s3ClusterUrl}${node.organizationId}-${node.organizationName}.json`
+    )
+    .then((res) => {
+      console.log(res.data);
+      node.children = res.data;
+    })
+    .catch((e) => {
+      //   console.log(e);
+      //   console.log(e.response);
+      manageApiErrorMsg(e);
+    })
+    .finally(() => {
+      //   loaderPage(false);
+    });
 };
 
 const isTreeHasDraft = async () => {
-	//   loaderPage(true);
-	let orgHasDraft = false;
-	let orgPoHasDraft = false;
-	await http
-		.get(config.API.isOrgPohasDraft)
-		.then((res) => {
-			//   console.log("isOrgPohasDraft:", res.data.result);
-			orgPoHasDraft = res.data.result;
-		})
-		.catch((e) => {
-			console.log("====isOrgPohasDraft====");
-			console.log(e);
-			console.log(e.response);
-			messageError($q, e);
-		})
-		.finally(() => {
-			//   loaderPage(false);
-		});
+  //   loaderPage(true);
+  let orgHasDraft = false;
+  let orgPoHasDraft = false;
+  await http
+    .get(config.API.isOrgPohasDraft)
+    .then((res) => {
+      //   console.log("isOrgPohasDraft:", res.data.result);
+      orgPoHasDraft = res.data.result;
+    })
+    .catch((e) => {
+      console.log("====isOrgPohasDraft====");
+      console.log(e);
+      console.log(e.response);
+      messageError($q, e);
+    })
+    .finally(() => {
+      //   loaderPage(false);
+    });
 
-	await http
-		.get(config.API.isOrghasDraft)
-		.then((res) => {
-			//   console.log("isOrghasDraft:", res.data.result);
-			orgHasDraft = res.data.result;
-		})
-		.catch((e) => {
-			console.log("====isOrghasDraft====");
-			console.log(e);
-			console.log(e.response);
-			messageError($q, e);
-		})
-		.finally(() => {
-			//   loaderPage(false);
-		});
+  await http
+    .get(config.API.isOrghasDraft)
+    .then((res) => {
+      //   console.log("isOrghasDraft:", res.data.result);
+      orgHasDraft = res.data.result;
+    })
+    .catch((e) => {
+      console.log("====isOrghasDraft====");
+      console.log(e);
+      console.log(e.response);
+      messageError($q, e);
+    })
+    .finally(() => {
+      //   loaderPage(false);
+    });
 
-	if (orgHasDraft || orgPoHasDraft) {
-		version.value = "";
-	} else {
-		version.value = "published";
-	}
+  if (orgHasDraft || orgPoHasDraft) {
+    version.value = "";
+  } else {
+    version.value = "published";
+  }
 };
 
 /**โหลด Tree Root Node
  * @param isDraft แสดงข้อมูลดราฟหรือ Production
  */
 const fetchTreeRoot = async (isDraft: boolean) => {
-	//   console.log(isDraft);
-	loaderPage(true);
-	console.log("Call API14 GetTreeRoot");
-	isShowEditTree.value = isDraft; // to show same tree that we fetch
-	let request = "";
-	if (isDraft) {
-		request = config.API.getDraftTreeRoot;
-	} else {
-		request = config.API.getTreeRoot;
-	}
-	await http
-		.get(request)
-		.then((res) => {
-			if (isDraft) {
-				dataTreeDraft.value = res.data.result;
-				orgRootIdDraft.value = res.data.result[0].organizationId;
-			} else {
-				dataTree.value = res.data.result;
-				rootNodeKey.value = res.data.result[0].organizationId;
-			}
-		})
-		.catch((e) => {
-			// console.log(e);
-			// console.log(e.response);
-			manageApiErrorMsg(e);
-			//   messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-			if (isDraft) {
-				// ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
-				// ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
-				qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
-				expandedNodeEdit.value = [dataTreeDraft.value[0].keyId];
-			} else {
-				qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
-			}
-		});
+  //   console.log(isDraft);
+  loaderPage(true);
+  console.log("Call API14 GetTreeRoot");
+  isShowEditTree.value = isDraft; // to show same tree that we fetch
+  let request = "";
+  if (isDraft) {
+    request = config.API.getDraftTreeRoot;
+  } else {
+    request = config.API.getTreeRoot;
+  }
+  await http
+    .get(request)
+    .then((res) => {
+      if (isDraft) {
+        dataTreeDraft.value = res.data.result;
+        orgRootIdDraft.value = res.data.result[0].organizationId;
+      } else {
+        dataTree.value = res.data.result;
+        rootNodeKey.value = res.data.result[0].organizationId;
+      }
+    })
+    .catch((e) => {
+      // console.log(e);
+      // console.log(e.response);
+      manageApiErrorMsg(e);
+      //   messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+      if (isDraft) {
+        // ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
+        // ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
+        qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
+        expandedNodeEdit.value = [dataTreeDraft.value[0].keyId];
+      } else {
+        qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
+      }
+    });
 };
 
 /**โหลดลูก Tree
  * @param node Parent Node
  */
 const fetchChildrenByParentId = async (node: any) => {
-	//   console.log(isDraft);
-	console.log("Call API4");
-	loaderPage(true);
-	let request = "";
-	if (isShowEditTree.value) {
-		request = config.API.getDraftTreeNode(node.organizationId, node.keyId);
-	} else {
-		request = config.API.getTreeNode(node.organizationId, node.keyId);
-	}
+  //   console.log(isDraft);
+  console.log("Call API4");
+  loaderPage(true);
+  let request = "";
+  if (isShowEditTree.value) {
+    request = config.API.getDraftTreeNode(node.organizationId, node.keyId);
+  } else {
+    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) => {
-			// console.log(e);
-			// console.log(e.response);
-			manageApiErrorMsg(e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  await http
+    .get(request)
+    .then((res) => {
+      console.log(res.data.result);
+      node.children = res.data.result;
+    })
+    .catch((e) => {
+      // console.log(e);
+      // console.log(e.response);
+      manageApiErrorMsg(e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const fetchPublishFile = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.getPublishFileHistory)
-		.then((res) => {
-			let data = res.data.result;
-			fileList.value = [];
-			data.map((e: any) => {
-				fileList.value.push({
-					value: e.fileName,
-					label: e.description,
-				});
-			});
-			selectedFile.value = fileList.value[0].value;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(async () => {
-			loaderPage(false);
-		});
+  loaderPage(true);
+  await http
+    .get(config.API.getPublishFileHistory)
+    .then((res) => {
+      let data = res.data.result;
+      fileList.value = [];
+      data.map((e: any) => {
+        fileList.value.push({
+          value: e.fileName,
+          label: e.description,
+        });
+      });
+      selectedFile.value = fileList.value[0].value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -1433,13 +1201,13 @@ const fetchPublishFile = async () => {
  * @param node Auto send by Quasar Tree no need to send anything
  */
 const onLazyLoad = (node: any) => {
-	setTimeout(async () => {
-		/**
-		 * เรียก API4 มาแสดงผล ทีละ shot
-		 */
-		console.log("Call LazyLoad");
-		await fetchChildrenByParentId(node.node);
-		/**   loaderPage(true);
+  setTimeout(async () => {
+    /**
+     * เรียก API4 มาแสดงผล ทีละ shot
+     */
+    console.log("Call LazyLoad");
+    await fetchChildrenByParentId(node.node);
+    /**   loaderPage(true);
     let request = "";
     if (isShowEditTree.value) {
       request = config.API.getDraftTreeNode(
@@ -1479,15 +1247,15 @@ const onLazyLoad = (node: any) => {
         loaderPage(false);
       });*/
 
-		node.done(node.node.children); //return ค่าให้ q-tree generate children
-	}, 10);
+    node.done(node.node.children); //return ค่าให้ q-tree generate children
+  }, 10);
 };
 
 /**====== Drawer Functions
  * ========================
  */
 const goToUserRegistry = () => {
-	router.push(`/registry/${personDetail.value.profileId}`);
+  router.push(`/registry/${personDetail.value.profileId}`);
 };
 
 /**
@@ -1495,12 +1263,12 @@ const goToUserRegistry = () => {
  * @param node user ใน tree ที่จะดูข้อมูล (prop.node)
  */
 const seeUserDetail = (node: any) => {
-	if (node.name != null) {
-		isChevronR.value = true;
-		isDrawer.value = true;
-		// personDetail.value = JSON.parse(JSON.stringify(node));
-		personDetail.value = node;
-	}
+  if (node.name != null) {
+    isChevronR.value = true;
+    isDrawer.value = true;
+    // personDetail.value = JSON.parse(JSON.stringify(node));
+    personDetail.value = node;
+  }
 };
 
 /**====== Pop-up Add/Edit/Delete Organization Functions
@@ -1512,48 +1280,48 @@ const seeUserDetail = (node: any) => {
  * @param node node that you want to delete (prop.node)
  */
 const deleteOrganization = (node: any) => {
-	delStructureId.value = node.organizationId;
-	delStructureKey.value = node.keyId;
-	dialogMessage(
-		$q,
-		"ยืนยันลบหน่วยงาน",
-		"หากต้องการลบกดตกลง",
-		"mdi-help-circle-outline",
-		"ตกลง",
-		"red",
-		apiDeleteOrg,
-		undefined
-	);
+  delStructureId.value = node.organizationId;
+  delStructureKey.value = node.keyId;
+  dialogMessage(
+    $q,
+    "ยืนยันลบหน่วยงาน",
+    "หากต้องการลบกดตกลง",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    apiDeleteOrg,
+    undefined
+  );
 };
 const apiDeleteOrg = () => {
-	// const deleteOrganization = (node: any) => {
-	isShowEditTree.value = false;
-	//   console.log("isShowEditTree", isShowEditTree.value);
-	setTimeout(async () => {
-		//delay for lazyLoad to be able to tricker again
-		loaderPage(true);
-		isShowEditTree.value = true;
-		await http
-			.delete(config.API.delTreeOrgDraft(delStructureId.value))
-			.then((res) => {
-				success($q, "ลบข้อมูลสำเร็จ");
-				// console.log("delStructureKey", delStructureKey.value);
-				const nodeSplit = delStructureKey.value.split("-");
-				const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
-				const nodeJoin = nodeDelete.join("-");
-				// console.log("nodeJoin", nodeJoin);
-				qtreeEdit.value.setExpanded(nodeJoin, true);
-			})
-			.catch((e) => {
-				console.log(e);
-				console.log(e.response);
-				messageError($q, e);
-			})
-			.finally(async () => {
-				loaderPage(false);
-				await isTreeHasDraft();
-			});
-	}, 20);
+  // const deleteOrganization = (node: any) => {
+  isShowEditTree.value = false;
+  //   console.log("isShowEditTree", isShowEditTree.value);
+  setTimeout(async () => {
+    //delay for lazyLoad to be able to tricker again
+    loaderPage(true);
+    isShowEditTree.value = true;
+    await http
+      .delete(config.API.delTreeOrgDraft(delStructureId.value))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        // console.log("delStructureKey", delStructureKey.value);
+        const nodeSplit = delStructureKey.value.split("-");
+        const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
+        const nodeJoin = nodeDelete.join("-");
+        // console.log("nodeJoin", nodeJoin);
+        qtreeEdit.value.setExpanded(nodeJoin, true);
+      })
+      .catch((e) => {
+        console.log(e);
+        console.log(e.response);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
+        await isTreeHasDraft();
+      });
+  }, 20);
 };
 
 /**ลบตำแหน่งที่ว่างออกจาก DB
@@ -1561,45 +1329,45 @@ const apiDeleteOrg = () => {
  * @param node node that you want to delete (prop.node)
  */
 const deletePosition = (node: any) => {
-	delStructureId.value = node.organizationPositionId;
-	delStructureKey.value = node.keyId;
-	dialogMessage(
-		$q,
-		"ยืนยันลบตำแหน่ง",
-		"หากต้องการลบกดตกลง",
-		"mdi-help-circle-outline",
-		"ตกลง",
-		"red",
-		apiDeletePosition,
-		undefined
-	);
+  delStructureId.value = node.organizationPositionId;
+  delStructureKey.value = node.keyId;
+  dialogMessage(
+    $q,
+    "ยืนยันลบตำแหน่ง",
+    "หากต้องการลบกดตกลง",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    apiDeletePosition,
+    undefined
+  );
 };
 const apiDeletePosition = () => {
-	// const deletePosition = (node: any) => {
-	isShowEditTree.value = false;
-	setTimeout(async () => {
-		//delay for lazyLoad to be able to tricker again
-		loaderPage(true);
-		isShowEditTree.value = true;
-		await http
-			.delete(config.API.delTreePositionDraft(delStructureId.value))
-			.then((res) => {
-				success($q, "ลบข้อมูลสำเร็จ");
-				const nodeSplit = delStructureKey.value.split("-");
-				const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
-				const nodeJoin = nodeDelete.join("-");
-				qtreeEdit.value.setExpanded(nodeJoin, true);
-			})
-			.catch((e) => {
-				console.log(e);
-				console.log(e.response);
-				messageError($q, e);
-			})
-			.finally(async () => {
-				loaderPage(false);
-				await isTreeHasDraft();
-			});
-	}, 20);
+  // const deletePosition = (node: any) => {
+  isShowEditTree.value = false;
+  setTimeout(async () => {
+    //delay for lazyLoad to be able to tricker again
+    loaderPage(true);
+    isShowEditTree.value = true;
+    await http
+      .delete(config.API.delTreePositionDraft(delStructureId.value))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        const nodeSplit = delStructureKey.value.split("-");
+        const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
+        const nodeJoin = nodeDelete.join("-");
+        qtreeEdit.value.setExpanded(nodeJoin, true);
+      })
+      .catch((e) => {
+        console.log(e);
+        console.log(e.response);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
+        await isTreeHasDraft();
+      });
+  }, 20);
 };
 
 /**======ButtonSet Function
@@ -1609,57 +1377,57 @@ const apiDeletePosition = () => {
  * ฟังก์ชัน clear data แบบร่าง
  */
 const deleteDraft = async () => {
-	loaderPage(true);
-	await http
-		.put(config.API.delTreeOrgPoDraft)
-		.then((res) => {
-			success($q, "ลบข้อมูลร่างสำเร็จ");
-		})
-		.catch((e) => {
-			console.log(e);
-			console.log(e.response);
-			messageError($q, e);
-		})
-		.finally(async () => {
-			loaderPage(false);
-			router.go(0);
-			await isTreeHasDraft();
-		});
+  loaderPage(true);
+  await http
+    .put(config.API.delTreeOrgPoDraft)
+    .then((res) => {
+      success($q, "ลบข้อมูลร่างสำเร็จ");
+    })
+    .catch((e) => {
+      console.log(e);
+      console.log(e.response);
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+      router.go(0);
+      await isTreeHasDraft();
+    });
 };
 
 /**Publish Draft
  * ฟังก์ชันเผยแพร่แบบร่าง
  */
 const publishDraft = async () => {
-	loaderPage(true);
-	await http
-		.put(config.API.publishOrgPoDraft)
-		.then((res) => {
-			success($q, "เผยแพร่ข้อมูลสำเร็จ");
-			//publish สำเร็จแล้ว ให้เช็คว่าถ้า BE generate file data เสร็จแล้วให้มีการเตือนให้ user reload viewTree ใหม่
-			//estimate time for be to regenerate new viewTree file is 30sec
-			//ยังไม่แน่ใจว่า BE จะ return success กลับมาเมื่อทำ publish สำเร็จ หรือเมื่อ generate new viewTree file เสร็จ
-			//ยูสเซอร์กด ตกลง ให้ Load viewTree ใหม่อีกครั้ง
-			dialogMessage(
-				$q,
-				"เผยแพร่ข้อมูลสำเร็จแล้ว",
-				"ต้องการโหลดข้อมูลใหม่หรือไม่",
-				"mdi-help-circle-outline",
-				"ตกลง",
-				"public",
-				loadViewTree,
-				undefined
-			);
-		})
-		.catch((e) => {
-			console.log(e);
-			console.log(e.response);
-			messageError($q, e);
-		})
-		.finally(async () => {
-			loaderPage(false);
-			await isTreeHasDraft();
-		});
+  loaderPage(true);
+  await http
+    .put(config.API.publishOrgPoDraft)
+    .then((res) => {
+      success($q, "เผยแพร่ข้อมูลสำเร็จ");
+      //publish สำเร็จแล้ว ให้เช็คว่าถ้า BE generate file data เสร็จแล้วให้มีการเตือนให้ user reload viewTree ใหม่
+      //estimate time for be to regenerate new viewTree file is 30sec
+      //ยังไม่แน่ใจว่า BE จะ return success กลับมาเมื่อทำ publish สำเร็จ หรือเมื่อ generate new viewTree file เสร็จ
+      //ยูสเซอร์กด ตกลง ให้ Load viewTree ใหม่อีกครั้ง
+      dialogMessage(
+        $q,
+        "เผยแพร่ข้อมูลสำเร็จแล้ว",
+        "ต้องการโหลดข้อมูลใหม่หรือไม่",
+        "mdi-help-circle-outline",
+        "ตกลง",
+        "public",
+        loadViewTree,
+        undefined
+      );
+    })
+    .catch((e) => {
+      console.log(e);
+      console.log(e.response);
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+      await isTreeHasDraft();
+    });
 };
 
 /**Refresh Data
@@ -1669,28 +1437,28 @@ const publishDraft = async () => {
  * ไม่ใช้แล้ว ยังไม่ลบเพราะไม่รู้เป้จะอยากได้อีกไหม
  */
 const resetTree = async () => {
-	dialogMessage(
-		$q,
-		"รีเฟรชหน้า",
-		"ต้องการรีเฟรชผังโครงสร้างใหม่หรือไม่",
-		"mdi-help-circle-outline",
-		"ตกลง",
-		"public",
-		loadPublishScreen,
-		undefined
-	);
+  dialogMessage(
+    $q,
+    "รีเฟรชหน้า",
+    "ต้องการรีเฟรชผังโครงสร้างใหม่หรือไม่",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "public",
+    loadPublishScreen,
+    undefined
+  );
 }; //ไม่ใช้แล้ว ยังไม่ลบเพราะไม่รู้เป้จะอยากได้อีกไหม
 const clearLocalStorage = async () => {
-	localStorage.removeItem("dataTree");
+  localStorage.removeItem("dataTree");
 }; //ไม่ใช้แล้ว ยังไม่ลบเพราะไม่รู้เป้จะอยากได้อีกไหม
 
 /**====== Tree Functions
  * ========================
  */
 const resetFilter = () => {
-	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-	treeFilter.value = ""; // v-model="treeFilter"
-	treeFilterRef.value.focus(); // ref="treeFilterRef"
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  treeFilter.value = ""; // v-model="treeFilter"
+  treeFilterRef.value.focus(); // ref="treeFilterRef"
 }; //reset Tree Filter
 
 /**Search Tree Function
@@ -1700,36 +1468,36 @@ const resetFilter = () => {
  * @param filter searching word Auto send by quasar tree
  */
 const treeFilterMethod = (node: any, filter: string) => {
-	const filt = filter;
-	let hasMatch =
-		(node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-		(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-		(node.name && node.name.indexOf(filt) > -1) ||
-		(node.positionName && node.positionName.indexOf(filt) > -1) ||
-		(node.governmentCode &&
-			node.governmentCode.toString().indexOf(filt) > -1) ||
-		(node.agency && node.agency.indexOf(filt) > -1) ||
-		(node.government && node.government.indexOf(filt) > -1) ||
-		(node.department && node.department.indexOf(filt) > -1) ||
-		(node.pile && node.pile.indexOf(filt) > -1) ||
-		(node.organizationShortName &&
-			node.organizationShortName.indexOf(filt) > -1) ||
-		(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-		(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-		(node.executivePositionSide &&
-			node.executivePositionSide.indexOf(filt) > -1) ||
-		(node.positionLevel && node.positionLevel.indexOf(filt) > -1);
+  const filt = filter;
+  let hasMatch =
+    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+    (node.name && node.name.indexOf(filt) > -1) ||
+    (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.positionLevel && node.positionLevel.indexOf(filt) > -1);
 
-	//hasMatch จะได้เป็น keyId ของ node ที่หาเจอโดย q-tree จะวนเรียก treeFilterMethod ทีละ node
-	//ถ้า 100 nodes ก็วนฟังชั่นนี้ 100 รอบ
-	//ยังไม่ใช้ เพราะเรียก api มาทีละ level user จะค่อยๆ แตก tree ออกมาอยู่แล้ว
-	//   if (hasMatch) {
-	//     // if the current node matches the filter, expand all nodes in the tree
-	//     expandedNode.value.push(node.keyId);
-	//     //expandAllNodes([node]);
-	//   }
+  //hasMatch จะได้เป็น keyId ของ node ที่หาเจอโดย q-tree จะวนเรียก treeFilterMethod ทีละ node
+  //ถ้า 100 nodes ก็วนฟังชั่นนี้ 100 รอบ
+  //ยังไม่ใช้ เพราะเรียก api มาทีละ level user จะค่อยๆ แตก tree ออกมาอยู่แล้ว
+  //   if (hasMatch) {
+  //     // if the current node matches the filter, expand all nodes in the tree
+  //     expandedNode.value.push(node.keyId);
+  //     //expandAllNodes([node]);
+  //   }
 
-	return hasMatch;
+  return hasMatch;
 };
 
 /**Add โครงสร้าง Org & Position
@@ -1737,67 +1505,67 @@ const treeFilterMethod = (node: any, filter: string) => {
  * @param node node that you want to add children data
  */
 const addStructure = async (node: any) => {
-	isShowEditTree.value = false; //ซ่อน editTree เพื่อให้สามารถเรียก lazyLoad ได้อีกครั้งเมื่อกลับมาแสดง
-	//   console.log(node);
-	console.log("organizationData.value", organizationData.value);
-	//   console.log("organizationForm.value", organizationForm.value);
-	console.log("positionData.value", positionData.value);
-	let organizCheck: Boolean = false;
-	let positionCheck: Boolean = false;
-	await organizationForm.value
-		?.validate()
-		.then((e: Boolean) => (organizCheck = e));
-	await positionForm.value
-		?.validate()
-		.then((e: Boolean) => (positionCheck = e));
-	//   if (positionData.value.length <= 0 && organizationData.value.length <= 0) {
-	//     popupAddOrganization.value = false;
-	//   } // no data to add close pop-up no message show when click save
-	if (
-		organizCheck == true &&
-		(positionCheck == true || modalHeaderPosition.value == false) &&
-		(positionData.value.length > 0 || organizationData.value.length > 0)
-	) {
-		let reqOrgAr: Array<any> = JSON.parse(
-			JSON.stringify(organizationData.value)
-		);
-		reqOrgAr.forEach((a: any) => {
-			delete a["organizationShortName"];
-			delete a["organizationShortCode"];
-			a.organizationId = node.organizationId; //parentId ของ node ที่จะสร้าง
-		});
-		// console.log(node.organizationId);
-		console.log("Call API1");
-		loaderPage(true);
-		isShowEditTree.value = true; //ต้องกลับมาแสดง editTree อีกครั้ง & trigger lazyLoad โดย setExpanded
-		await http
-			.post(config.API.addTreeDraft, {
-				organizationId: node.organizationId, // GUID ของหน่วยงานต้นสังกัดที่ต้องการสร้างข้อมูล,  // ParentId ของ Org ที่จะเพิ่มใหม่
-				organizations: reqOrgAr,
-				positions: positionData.value, // รอต่อ api dropdown ตำแหน่งก่อน
-			})
-			.then(async (res) => {
-				success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  isShowEditTree.value = false; //ซ่อน editTree เพื่อให้สามารถเรียก lazyLoad ได้อีกครั้งเมื่อกลับมาแสดง
+  //   console.log(node);
+  console.log("organizationData.value", organizationData.value);
+  //   console.log("organizationForm.value", organizationForm.value);
+  console.log("positionData.value", positionData.value);
+  let organizCheck: Boolean = false;
+  let positionCheck: Boolean = false;
+  await organizationForm.value
+    ?.validate()
+    .then((e: Boolean) => (organizCheck = e));
+  await positionForm.value
+    ?.validate()
+    .then((e: Boolean) => (positionCheck = e));
+  //   if (positionData.value.length <= 0 && organizationData.value.length <= 0) {
+  //     popupAddOrganization.value = false;
+  //   } // no data to add close pop-up no message show when click save
+  if (
+    organizCheck == true &&
+    (positionCheck == true || modalHeaderPosition.value == false) &&
+    (positionData.value.length > 0 || organizationData.value.length > 0)
+  ) {
+    let reqOrgAr: Array<any> = JSON.parse(
+      JSON.stringify(organizationData.value)
+    );
+    reqOrgAr.forEach((a: any) => {
+      delete a["organizationShortName"];
+      delete a["organizationShortCode"];
+      a.organizationId = node.organizationId; //parentId ของ node ที่จะสร้าง
+    });
+    // console.log(node.organizationId);
+    console.log("Call API1");
+    loaderPage(true);
+    isShowEditTree.value = true; //ต้องกลับมาแสดง editTree อีกครั้ง & trigger lazyLoad โดย setExpanded
+    await http
+      .post(config.API.addTreeDraft, {
+        organizationId: node.organizationId, // GUID ของหน่วยงานต้นสังกัดที่ต้องการสร้างข้อมูล,  // ParentId ของ Org ที่จะเพิ่มใหม่
+        organizations: reqOrgAr,
+        positions: positionData.value, // รอต่อ api dropdown ตำแหน่งก่อน
+      })
+      .then(async (res) => {
+        success($q, "บันทึกข้อมูลร่างสำเร็จ");
 
-				//reload it's own node to see new added nodes
-				qtreeEdit.value.setExpanded(node.keyId, true);
-			})
+        //reload it's own node to see new added nodes
+        qtreeEdit.value.setExpanded(node.keyId, true);
+      })
 
-			.catch((e) => {
-				console.log(e);
-				console.log(e.response);
-				messageError($q, e);
-			})
-			.finally(async () => {
-				loaderPage(false);
+      .catch((e) => {
+        console.log(e);
+        console.log(e.response);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
 
-				popupAddOrganization.value = false;
-				await isTreeHasDraft();
-			});
-	} else {
-		console.log("validation fail"); // or no data to add");
-	}
-	isShowEditTree.value = true;
+        popupAddOrganization.value = false;
+        await isTreeHasDraft();
+      });
+  } else {
+    console.log("validation fail"); // or no data to add");
+  }
+  isShowEditTree.value = true;
 };
 
 /**Edit โครงสร้างหน่วยงาน
@@ -1805,79 +1573,70 @@ const addStructure = async (node: any) => {
  * @param node node that you want to edit data
  */
 const editOrgStructure = async (node: any) => {
-	isShowEditTree.value = false; //start prepare for tricker LazyLoad
-	//   console.log(node);
-	//   console.log("organizationData.value", organizationData.value);
-	let organizCheck: Boolean = false;
+  isShowEditTree.value = false; //start prepare for tricker LazyLoad
+  //   console.log(node);
+  //   console.log("organizationData.value", organizationData.value);
+  let organizCheck: Boolean = false;
 
-	await organizationForm.value
-		?.validate()
-		.then((e: Boolean) => (organizCheck = e));
-	//   if (organizationData.value.length <= 0) {
-	//     popupAddOrganization.value = false;
-	//   } // no data to add close pop-up when click save no message show
-	console.log("organizCheck=>", organizCheck);
-	//   console.log("organizationData.value.length=>", organizationData.value.length);
-	if (organizCheck == true) {
-		// console.log(node.organizationId);
-		console.log("Call API13");
-		loaderPage(true);
-		isShowEditTree.value = true; //end prepare for tricker LazyLoad
-		await http
-			.put(config.API.editTreeOrgDraft(node.organizationId), {
-				organizationId: node.organizationId, // GUID ของหน่วยงานที่ต้องการแก้ไขข้อมูล มีส่งไปใน uri ด้วย
-				organizationOrganizationId:
-					organizationDataEdit.value?.organizationOrganizationId,
-				organizationShortNameId:
-					organizationDataEdit.value?.organizationShortNameId,
-				organizationTypeId:
-					organizationDataEdit.value?.organizationTypeId,
-				organizationLevelId:
-					organizationDataEdit.value?.organizationLevelId,
-				organizationTelExternalId:
-					organizationDataEdit.value?.organizationExternalPhoneId,
-				organizationTelInternalId:
-					organizationDataEdit.value?.organizationInternalPhoneId,
-				organizationFaxId:
-					organizationDataEdit.value?.organizationFaxId,
-				organizationOrder:
-					organizationDataEdit.value?.organizationOrder,
-				organizationUserNote:
-					organizationDataEdit.value?.organizationUserNote,
-				agency: organizationDataEdit.value?.agency,
-				government: organizationDataEdit.value?.government,
-				department: organizationDataEdit.value?.department,
-				pile: organizationDataEdit.value?.pile,
-				organizationStatusId:
-					organizationDataEdit.value?.organizationStatusId,
-				isActive: organizationDataEdit.value?.isActive,
-			})
-			.then(async (res) => {
-				success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  await organizationForm.value
+    ?.validate()
+    .then((e: Boolean) => (organizCheck = e));
+  //   if (organizationData.value.length <= 0) {
+  //     popupAddOrganization.value = false;
+  //   } // no data to add close pop-up when click save no message show
+  console.log("organizCheck=>", organizCheck);
+  //   console.log("organizationData.value.length=>", organizationData.value.length);
+  if (organizCheck == true) {
+    // console.log(node.organizationId);
+    console.log("Call API13");
+    loaderPage(true);
+    isShowEditTree.value = true; //end prepare for tricker LazyLoad
+    await http
+      .put(config.API.editTreeOrgDraft(node.organizationId), {
+        organizationId: node.organizationId, // GUID ของหน่วยงานที่ต้องการแก้ไขข้อมูล มีส่งไปใน uri ด้วย
+        organizationOrganizationId:
+          organizationDataEdit.value?.organizationOrganizationId,
+        organizationShortNameId:
+          organizationDataEdit.value?.organizationShortNameId,
+        organizationTypeId: organizationDataEdit.value?.organizationTypeId,
+        organizationLevelId: organizationDataEdit.value?.organizationLevelId,
+        organizationTelExternalId:
+          organizationDataEdit.value?.organizationExternalPhoneId,
+        organizationTelInternalId:
+          organizationDataEdit.value?.organizationInternalPhoneId,
+        organizationFaxId: organizationDataEdit.value?.organizationFaxId,
+        organizationOrder: organizationDataEdit.value?.organizationOrder,
+        organizationUserNote: organizationDataEdit.value?.organizationUserNote,
+        agency: organizationDataEdit.value?.agency,
+        government: organizationDataEdit.value?.government,
+        department: organizationDataEdit.value?.department,
+        pile: organizationDataEdit.value?.pile,
+        organizationStatusId: organizationDataEdit.value?.organizationStatusId,
+        isActive: organizationDataEdit.value?.isActive,
+      })
+      .then(async (res) => {
+        success($q, "บันทึกข้อมูลร่างสำเร็จ");
 
-				//reload children nodes by setExpanded mother node
-				const nodeSplit = await node.keyId.split("-");
-				const nodeDelete = await nodeSplit.splice(
-					0,
-					nodeSplit.length - 1
-				);
-				const nodeJoin = await nodeDelete.join("-");
-				qtreeEdit.value.setExpanded(nodeJoin, true);
-			})
-			.catch((e) => {
-				console.log(e);
-				console.log(e.response);
-				messageError($q, e);
-			})
-			.finally(async () => {
-				loaderPage(false);
-				popupEditSelectedOrganization.value = false;
-				await isTreeHasDraft();
-			});
-	} else {
-		console.log("validation fail"); // or no data to add");
-	}
-	isShowEditTree.value = true;
+        //reload children nodes by setExpanded mother node
+        const nodeSplit = await node.keyId.split("-");
+        const nodeDelete = await nodeSplit.splice(0, nodeSplit.length - 1);
+        const nodeJoin = await nodeDelete.join("-");
+        qtreeEdit.value.setExpanded(nodeJoin, true);
+      })
+      .catch((e) => {
+        console.log(e);
+        console.log(e.response);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
+        popupEditSelectedOrganization.value = false;
+        await isTreeHasDraft();
+      });
+  } else {
+    console.log("validation fail"); // or no data to add");
+  }
+  isShowEditTree.value = true;
 };
 
 /**Edit ตำแหน่ง ในโครงสร้าง
@@ -1885,92 +1644,86 @@ const editOrgStructure = async (node: any) => {
  * @param node node that you want to edit data
  */
 const editPositionStructure = async (node: any) => {
-	isShowEditTree.value = false; //start prepare for tricker LazyLoad
-	//   console.log("positionData.value", positionData.value);
-	//   console.log("Selectednode.keyId", node.keyId);
-	//   console.log("PrarentNode.keyId", node.keyId.slice(0, -2));
-	let positionCheck: Boolean = false;
-	await positionForm.value
-		?.validate()
-		.then((e: Boolean) => (positionCheck = e));
+  isShowEditTree.value = false; //start prepare for tricker LazyLoad
+  //   console.log("positionData.value", positionData.value);
+  //   console.log("Selectednode.keyId", node.keyId);
+  //   console.log("PrarentNode.keyId", node.keyId.slice(0, -2));
+  let positionCheck: Boolean = false;
+  await positionForm.value
+    ?.validate()
+    .then((e: Boolean) => (positionCheck = e));
 
-	if (positionCheck == true) {
-		console.log("Call API3");
-		loaderPage(true);
-		isShowEditTree.value = true; //end prepare for tricker LazyLoad
-		await http
-			.put(
-				config.API.editTreePositionDraft(node.organizationPositionId),
-				{
-					positionMasterId: positionData.value[0].positionMasterId,
-					positionUserNote: positionData.value[0].positionUserNote,
-					isActive: positionData.value[0].isActive,
-					isCondition: positionData.value[0].isCondition,
-					conditionNote: positionData.value[0].conditionNote,
-				}
-			)
-			.then(async (res) => {
-				success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  if (positionCheck == true) {
+    console.log("Call API3");
+    loaderPage(true);
+    isShowEditTree.value = true; //end prepare for tricker LazyLoad
+    await http
+      .put(config.API.editTreePositionDraft(node.organizationPositionId), {
+        positionMasterId: positionData.value[0].positionMasterId,
+        positionUserNote: positionData.value[0].positionUserNote,
+        isActive: positionData.value[0].isActive,
+        isCondition: positionData.value[0].isCondition,
+        conditionNote: positionData.value[0].conditionNote,
+      })
+      .then(async (res) => {
+        success($q, "บันทึกข้อมูลร่างสำเร็จ");
 
-				//reload children nodes by setExpanded mother node
-				const nodeSplit = await node.keyId.split("-");
-				const nodeDelete = await nodeSplit.splice(
-					0,
-					nodeSplit.length - 1
-				);
-				const nodeJoin = await nodeDelete.join("-");
-				qtreeEdit.value.setExpanded(nodeJoin, true);
-			})
-			.catch((e) => {
-				console.log(e);
-				console.log(e.response);
-				messageError($q, e);
-			})
-			.finally(async () => {
-				loaderPage(false);
-				popupEditSelectedPosition.value = false;
-				await isTreeHasDraft();
-			});
-	} else {
-		console.log("validation fail"); // or no data to add");
-	}
-	isShowEditTree.value = true;
+        //reload children nodes by setExpanded mother node
+        const nodeSplit = await node.keyId.split("-");
+        const nodeDelete = await nodeSplit.splice(0, nodeSplit.length - 1);
+        const nodeJoin = await nodeDelete.join("-");
+        qtreeEdit.value.setExpanded(nodeJoin, true);
+      })
+      .catch((e) => {
+        console.log(e);
+        console.log(e.response);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
+        popupEditSelectedPosition.value = false;
+        await isTreeHasDraft();
+      });
+  } else {
+    console.log("validation fail"); // or no data to add");
+  }
+  isShowEditTree.value = true;
 };
 
 /**ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
 const clickHistory = async () => {
-	modalHistory.value = true;
-	//   rowsHistory.value = rawHistory.value.filter((f: any) => f.id == row.id);
+  modalHistory.value = true;
+  //   rowsHistory.value = rawHistory.value.filter((f: any) => f.id == row.id);
 
-	loaderPage(true);
-	await http
-		.get(config.API.getTreeHistory)
-		.then((res) => {
-			let data = res.data.result;
-			rowsHistory.value = [];
-			//   version.value = "published";
-			data.map((e: any) => {
-				rowsHistory.value.push({
-					detail: e.detail,
-					editUser: e.createdFullName,
-					editDate: e.createdAt,
-				});
-				// if (e.isPublished == false) {
-				//   version.value = "draft";
-				// }
-			});
-		})
-		.catch((e) => {
-			rowsHistory.value.splice(0);
-			console.log(e);
-			console.log(e.response);
-			manageApiErrorMsg(e);
-			//   messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  loaderPage(true);
+  await http
+    .get(config.API.getTreeHistory)
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      //   version.value = "published";
+      data.map((e: any) => {
+        rowsHistory.value.push({
+          detail: e.detail,
+          editUser: e.createdFullName,
+          editDate: e.createdAt,
+        });
+        // if (e.isPublished == false) {
+        //   version.value = "draft";
+        // }
+      });
+    })
+    .catch((e) => {
+      rowsHistory.value.splice(0);
+      console.log(e);
+      console.log(e.response);
+      manageApiErrorMsg(e);
+      //   messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**Check Error Code 404 before return error message
@@ -1978,104 +1731,103 @@ const clickHistory = async () => {
  * @param catchE throw catch error message (e)
  */
 const manageApiErrorMsg = (catchE: any) => {
-	if (catchE.response.status == 404 || catchE.response.data.status == 404) {
-		//Data not found is not error for GET method so do nothing
-		return;
-		//   } else if (
-		//     catchE.response.data.status == 400 ||
-		//     catchE.response.data.status == 403 ||
-		//     catchE.response.data.status == 404
-		//   ) {
-		//     //ใส่เป็น error กลางๆ ถ้ามีเคสให้เห็นมากขึ้น ถึงจะแยกข้อความได้
-		//     modalError(q, "พบข้อผิดพลาด", "ไม่พบข้อมูล");
-	} else {
-		messageError($q, catchE);
-	}
+  if (catchE.response.status == 404 || catchE.response.data.status == 404) {
+    //Data not found is not error for GET method so do nothing
+    return;
+    //   } else if (
+    //     catchE.response.data.status == 400 ||
+    //     catchE.response.data.status == 403 ||
+    //     catchE.response.data.status == 404
+    //   ) {
+    //     //ใส่เป็น error กลางๆ ถ้ามีเคสให้เห็นมากขึ้น ถึงจะแยกข้อความได้
+    //     modalError(q, "พบข้อผิดพลาด", "ไม่พบข้อมูล");
+  } else {
+    messageError($q, catchE);
+  }
 };
 </script>
 
 <style>
 .pointer:hover {
-	cursor: pointer;
-	background-color: #f4f4f4;
+  cursor: pointer;
+  background-color: #f4f4f4;
 }
 
 .q-tree__node-header {
-	padding: 0px;
-	margin-top: 0px;
-	border-radius: 4px;
-	outline: 0;
+  padding: 0px;
+  margin-top: 0px;
+  border-radius: 4px;
+  outline: 0;
 }
 /* .q-tree__node--selected .q-tree__node-header-content {
   border: 1px solid #02a998c0;
   border-radius: 4px;
 } */
 .topCard {
-	z-index: 50;
-	position: absolute;
-	left: 35px;
+  z-index: 50;
+  position: absolute;
+  left: 35px;
 }
 .my-custom-toggle {
-	border: 1px solid #02a998;
+  border: 1px solid #02a998;
 }
 .pageSK {
-	z-index: 30;
+  z-index: 30;
 }
 /* mouse over link */
 .abc:hover {
-	color: #ff00ff;
+  color: #ff00ff;
 }
 .btn-absolute {
-	z-index: 50;
-	position: absolute;
-	left: 200px;
-	top: 30px;
+  z-index: 50;
+  position: absolute;
+  left: 200px;
+  top: 30px;
 }
 .q-header {
-	z-index: 40;
+  z-index: 40;
 }
 .page-relative {
-	position: relative;
+  position: relative;
 }
 
 .my-list {
-	padding: 10px 10px;
+  padding: 10px 10px;
 }
 
 .my-card {
-	width: 100%;
-	max-width: 160px;
+  width: 100%;
+  max-width: 160px;
 }
 
 .sub-card {
-	height: 100%;
-	max-height: 265px;
+  height: 100%;
+  max-height: 265px;
 }
 
 .cardNum {
-	border-radius: 5px;
+  border-radius: 5px;
 }
 
 .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .fc-direction-rtl .fc-daygrid-event.fc-event-start {
-	padding-left: 5px;
+  padding-left: 5px;
 }
 
 .btnShadow {
-	box-shadow: 0 1px 2px rgb(0 0 0 / 10%),
-		3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
 }
 .texttop {
-	font-size: 18px;
-	font-weight: 500;
+  font-size: 18px;
+  font-weight: 500;
 }
 .textSub {
-	font-size: 0.8rem;
+  font-size: 0.8rem;
 }
 .btnline {
-	border: 1px solid #c8d3dba4;
+  border: 1px solid #c8d3dba4;
 }
 .q-tree {
-	color: #c8d3db;
+  color: #c8d3db;
 }
 </style>
diff --git a/src/modules/02_organizational/views/MainTreeEmployee.vue b/src/modules/02_organizational/views/MainTreeEmployee.vue
new file mode 100644
index 000000000..b14061eff
--- /dev/null
+++ b/src/modules/02_organizational/views/MainTreeEmployee.vue
@@ -0,0 +1,1749 @@
+<!-- =============================== -->
+<!-- หน้า ผังโครงสร้างลูกจ้าง(Table) ของ โครงสร้างอัตรากำลัง -->
+<!-- =============================== -->
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    ผังโครงสร้างลูกจ้าง
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :add="clickAdd"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props.row)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 700px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}โครงสร้างและกรอบอัตรากำลัง`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="overScroll q-py-sm">
+            <div class="col-11 row q-col-gutter-xs">
+              <div class="col-12">
+                {{ "โครงสร้างหน่วยงาน" }}
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationOrganizationId"
+                  :options="organizationOrganizationOption"
+                  label="หน่วยงาน"
+                  class="col-xs-12 col-sm-6 col-md-6"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationAgencyCode"
+                  :options="organizationAgencyCodeOption"
+                  label="รหัสหน่วยงาน"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                  filterSelector(inputValue, doneFn, '2')
+                "
+                  option-label="agencyCode"
+                  option-value="agencyCode"
+                  map-options
+                  emit-value
+                  clearable
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสหน่วยงาน'}`]"
+                  @update:model-value="(value:any) => updateAgencyCode(value)"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationGovernmentCode"
+                  :options="organizationGovernmentCodeOption"
+                  label="รหัสส่วนราชการ"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                    (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '3')
+                "
+                  option-label="governmentCode"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
+                  @update:model-value="(value:any) => updateGovernmentCode(value)"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <q-input
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  readonly
+                  outlined
+                  :modelValue="organizationShortName"
+                  label="ชื่อย่อหน่วยงาน"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <q-input
+                  :class="getClass(true)"
+                  dense
+                  outlined
+                  v-model="agency"
+                  label="เลขที่หน่วยงาน"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <q-input
+                  :class="getClass(true)"
+                  dense
+                  outlined
+                  v-model="government"
+                  label="เลขที่ส่วนราชการ"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <q-input
+                  :class="getClass(true)"
+                  dense
+                  outlined
+                  v-model="department"
+                  label="เลขที่ฝ่าย/ส่วน"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <q-input
+                  :class="getClass(true)"
+                  dense
+                  outlined
+                  v-model="pile"
+                  label="เลขที่กอง"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationTypeId"
+                  :options="organizationTypeOption"
+                  label="ประเภทหน่วยงาน"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '6')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationLevelId"
+                  :options="organizationLevelOption"
+                  label="ระดับหน่วยงาน"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '7')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationAgencyId"
+                  :options="organizationAgencyOption"
+                  label="หน่วยงานต้นสังกัด"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                />
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationGovernmentAgencyId"
+                  :options="organizationGovernmentAgencyOption"
+                  label="ส่วนราชการต้นสังกัด"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                />
+              </div>
+              <div class="col-xs-12 col-sm-2 col-md-2">
+                <q-input
+                  :class="getClass(true)"
+                  dense
+                  outlined
+                  v-model="organizationOrder"
+                  type="number"
+                  label="ลำดับผังโครงสร้าง"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationTelExternalId"
+                  :options="organizationTelExternalOption"
+                  label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '8')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                />
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationTelInternalId"
+                  :options="organizationTelInternalOption"
+                  label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '9')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                />
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  dense
+                  outlined
+                  v-model="organizationFaxId"
+                  :options="organizationFaxOption"
+                  label="หมายเลขโทรสาร"
+                  use-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '10')
+                "
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  emit-value
+                  clearable
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="organizationUserNote"
+                  :label="`${'หน้าที่รับผิดชอบ'}`"
+                  type="textarea"
+                />
+              </div>
+
+              <div class="col-12">
+                {{ "โครงสร้างตำแหน่ง" }}
+              </div>
+              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionTypeId"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                  :label="`${'ตำแหน่งประเภท'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionTypeOption"
+                  option-value="id"
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '11')
+                "
+                />
+              </div> -->
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionEmployeeLineId"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+                  :label="`${'สายงาน'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionEmployeeLineOption"
+                  option-value="id"
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '12')
+                "
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionEmployeePathId"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                  :label="`${'ตำแหน่ง'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionEmployeePathOption"
+                  option-value="id"
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '13')
+                "
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionEmployeePositionSidesId"
+                  :label="`${'ด้าน/สาขา'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionEmployeePathSideOption"
+                  option-value="id"
+                  use-input
+                  use-chips
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '14')
+                "
+                  color="primary"
+                />
+                <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
+              </div>
+              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionExecutiveId"
+                  :label="`${'ตำแหน่งทางการบริหาร'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionExecutiveOption"
+                  option-value="id"
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '15')
+                "
+                  color="primary"
+                />
+              </div> -->
+              <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionExecutiveSideId"
+                  :label="`${'ด้านทางการบริหาร'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionExecutiveSideOption"
+                  option-value="id"
+                  use-input
+                  use-chips
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '16')
+                "
+                  color="primary"
+                />
+              </div> -->
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionEmployeeLevelId"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับ'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกระดับ'}`]"
+                  :label="`${'ระดับ'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionEmployeeLevelOption"
+                  option-value="id"
+                  use-input
+                  use-chips
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '17')
+                "
+                  color="primary"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionEmployeeStatusId"
+                  :label="`${'สถานภาพของตำแหน่ง'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="positionEmployeeStatusOption"
+                  option-value="id"
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                  @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '18')
+                "
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกสถานภาพของตำแหน่ง'}`]"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="posNo"
+                  :label="`${'เลขที่ตำแหน่ง'}`"
+                  :rules="[(val:any) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="qualification"
+                  :label="`${'คุณวุฒิ'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionCondition"
+                  :label="`${'เงื่อนไขตำแหน่ง'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="positionMasterUserNote"
+                  :label="`${'หมายเหตุ'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6 text-grey-9">
+                <q-checkbox v-model="isDirector" label="หัวหน้า" />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
+                <q-toggle v-model="isActive" dense size="34px" color="positive">
+                  ปกติ
+                </q-toggle>
+                <q-toggle
+                  v-model="isCondition"
+                  dense
+                  size="34px"
+                  color="positive"
+                  class="q-pl-md"
+                >
+                  ติดเงื่อนไข
+                </q-toggle>
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
+                <q-input
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="conditionNote"
+                  :label="`${'รายละเอียดเงื่อนไข'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :save="clickSave"
+          :validate="validateData"
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizationalDataStore } from "@/modules/02_organizational/store";
+import Table from "@/modules/03_recruiting/components/Table.vue";
+import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
+import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
+import { useQuasar, QForm } from "quasar";
+import type {
+  DataOption,
+  GovermentOption,
+} from "@/modules/02_organizational/interface/index/Main";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useDataStore } from "@/stores/data";
+import type { QTableProps } from "quasar";
+
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const { date2Thai, success, modalError, messageError } = mixin;
+const store = useOrganizationalDataStore();
+const { organizationalData, changeOrganizationalColumns } = store;
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const id = ref<string>("");
+
+const organizationOrganizationId = ref<string>();
+const organizationAgencyCode = ref<string>();
+const organizationGovernmentCode = ref<string>();
+const organizationTypeId = ref<string>();
+const organizationLevelId = ref<string>();
+const organizationAgencyId = ref<string>();
+const organizationGovernmentAgencyId = ref<string>();
+const organizationTelExternalId = ref<string>();
+const organizationTelInternalId = ref<string>();
+const organizationFaxId = ref<string>();
+// const positionTypeId = ref<string>();
+const positionEmployeeLineId = ref<string>();
+const positionEmployeePathId = ref<string>();
+const positionEmployeePositionSidesId = ref<string[]>([]);
+// const positionExecutiveId = ref<string>();
+// const positionExecutiveSideId = ref<string[]>([]);
+const positionEmployeeLevelId = ref<string[]>([]);
+const positionEmployeeStatusId = ref<string>();
+
+const organizationShortName = ref<string>();
+const agency = ref<string>();
+const government = ref<string>();
+const department = ref<string>();
+const pile = ref<string>();
+const organizationUserNote = ref<string>();
+const organizationOrder = ref<string>();
+const qualification = ref<string>();
+const positionCondition = ref<string>();
+const positionMasterUserNote = ref<string>();
+const isDirector = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const isCondition = ref<boolean>(false);
+const conditionNote = ref<string>();
+const posNo = ref<string>();
+
+const organizationOrganizationOption = ref<DataOption[]>([]);
+const organizationAgencyCodeOption = ref<GovermentOption[]>([]);
+const organizationGovernmentCodeOption = ref<GovermentOption[]>([]);
+const organizationTypeOption = ref<DataOption[]>([]);
+const organizationLevelOption = ref<DataOption[]>([]);
+const organizationAgencyOption = ref<DataOption[]>([]);
+const organizationGovernmentAgencyOption = ref<DataOption[]>([]);
+const organizationTelExternalOption = ref<DataOption[]>([]);
+const organizationTelInternalOption = ref<DataOption[]>([]);
+const organizationFaxOption = ref<DataOption[]>([]);
+// const positionEmployeeTypeOption = ref<DataOption[]>([]);
+const positionEmployeeLineOption = ref<DataOption[]>([]);
+const positionEmployeePathOption = ref<DataOption[]>([]);
+const positionEmployeePathSideOption = ref<DataOption[]>([]);
+// const positionEmployeeExecutiveOption = ref<DataOption[]>([]);
+// const positionEmployeeExecutiveSideOption = ref<DataOption[]>([]);
+const positionEmployeeLevelOption = ref<DataOption[]>([]);
+const positionEmployeeStatusOption = ref<DataOption[]>([]);
+
+const organizationOrganizationFilter = ref<DataOption[]>([]);
+const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
+const organizationGovernmentCodeFilter = ref<GovermentOption[]>([]);
+const organizationTypeFilter = ref<DataOption[]>([]);
+const organizationLevelFilter = ref<DataOption[]>([]);
+const organizationAgencyFilter = ref<DataOption[]>([]);
+const organizationGovernmentAgencyFilter = ref<DataOption[]>([]);
+const organizationTelExternalFilter = ref<DataOption[]>([]);
+const organizationTelInternalFilter = ref<DataOption[]>([]);
+const organizationFaxFilter = ref<DataOption[]>([]);
+// const positionEmployeeTypeFilter = ref<DataOption[]>([]);
+const positionEmployeeLineFilter = ref<DataOption[]>([]);
+const positionEmployeePathFilter = ref<DataOption[]>([]);
+const positionEmployeePathSideFilter = ref<DataOption[]>([]);
+// const positionEmployeeExecutiveFilter = ref<DataOption[]>([]);
+// const positionEmployeeExecutiveSideFilter = ref<DataOption[]>([]);
+const positionEmployeeLevelFilter = ref<DataOption[]>([]);
+const positionEmployeeStatusFilter = ref<DataOption[]>([]);
+
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const statusCode = ref<number>();
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+
+const rows = ref<any>([]);
+const filter = ref<string>(""); //search data table
+
+const visibleColumns = ref<String[]>([
+  "organizationOrganization",
+  "organizationAgencyCode",
+  "organizationGovernmentAgencyCode",
+  "organizationShortName",
+  "organizationType",
+  "organizationLevel",
+  "positionEmployeeLine",
+  "positionEmployeePosition",
+  "posNo",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "organizationOrganization",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "organizationOrganization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationAgencyCode",
+    align: "left",
+    label: "รหัสหน่วยงาน",
+    sortable: true,
+    field: "organizationAgencyCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationGovernmentAgencyCode",
+    align: "left",
+    label: "รหัสส่วนราชการ",
+    sortable: true,
+    field: "organizationGovernmentAgencyCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationShortName",
+    align: "left",
+    label: "ชื่อย่อหน่วยงาน",
+    sortable: true,
+    field: "organizationShortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationType",
+    align: "left",
+    label: "ประเภทหน่วยงาน",
+    sortable: true,
+    field: "organizationType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationLevel",
+    align: "left",
+    label: "ระดับหน่วยงาน",
+    sortable: true,
+    field: "organizationLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionEmployeeLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeOrganizationalColumns("mappingPosition", count);
+});
+
+onMounted(async () => {
+  loaderPage(false);
+  await fetchOrganization();
+  await fetchOrganizationAgency();
+  await fetchOrganizationGovernmentAgency();
+  await fetchOrganizationAgencyCode();
+  await fetchPosition();
+  await fetchData();
+});
+
+/**
+ * ฟังก์ชัน get data ล่าสุด
+ */
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.organizationEmployeePosition)
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((r: any) => {
+        rows.value.push({
+          agency: r.agency,
+          conditionNote: r.conditionNote,
+          department: r.department,
+          government: r.government,
+          id: r.id,
+          isActive: r.isActive,
+          isCondition: r.isCondition,
+          isDirector: r.isDirector,
+          organizationAgencyId:
+            r.organizationAgencyId == "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationAgencyId,
+          organizationFaxId:
+            r.organizationFaxId == "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationFaxId,
+          organizationFax: r.organizationFax,
+          organizationGovernmentAgencyId:
+            r.organizationGovernmentAgencyId ==
+            "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationGovernmentAgencyId,
+          organizationLevelId:
+            r.organizationLevelId == "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationLevelId,
+          organizationLevel: r.organizationLevel,
+          organizationOrder: r.organizationOrder,
+          organizationOrganizationId:
+            r.organizationOrganizationId ==
+            "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationOrganizationId,
+          organizationOrganization: r.organizationOrganization,
+
+          organizationGovernmentAgencyCode: r.organizationGovernmentAgencyCode,
+          organizationAgencyCode: r.organizationAgencyCode,
+          positionEmployeeLevelId: r.positionEmployeeLevels.map(
+            (val: any) => val.id
+          ),
+          positionEmployeePositionSidesId: r.positionEmployeePositionSides.map(
+            (val: any) => val.id
+          ),
+          organizationShortNameId:
+            r.organizationShortNameId == "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationShortNameId,
+          organizationShortName: r.organizationShortName,
+          organizationTelExternalId:
+            r.organizationTelExternalId ==
+            "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationTelExternalId,
+          organizationTelExternal: r.organizationTelExternal,
+          organizationTelInternalId:
+            r.organizationTelInternalId ==
+            "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationTelInternalId,
+          organizationTelInternal: r.organizationTelInternal,
+          organizationTypeId:
+            r.organizationTypeId == "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.organizationTypeId,
+          organizationType: r.organizationType,
+          organizationUserNote: r.organizationUserNote,
+          pile: r.pile,
+          posNo: r.posNo,
+          positionCondition: r.positionCondition,
+          positionEmployeeLineId:
+            r.positionEmployeeLineId == "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.positionEmployeeLineId,
+          positionEmployeeLine: r.positionEmployeeLine,
+          positionEmployeePathId:
+            r.positionEmployeePositionId ==
+            "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.positionEmployeePositionId,
+          positionEmployeePosition: r.positionEmployeePosition,
+          positionEmployeeStatusId:
+            r.positionEmployeeStatusId == "00000000-0000-0000-0000-000000000000"
+              ? null
+              : r.positionEmployeeStatusId,
+          positionEmployeeStatus: r.positionEmployeeStatus,
+          positionMasterUserNote: r.positionMasterUserNote,
+          qualification: r.qualification,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * get รายการ โครงสร้าง
+ */
+const fetchOrganization = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.organizationMain)
+    .then((res) => {
+      const data = res.data.result;
+      if (data != null) {
+        let OriOption: DataOption[] = [];
+        data.organizationOrganizations.map((r: any) => {
+          OriOption.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        organizationOrganizationOption.value = OriOption;
+        organizationOrganizationFilter.value = OriOption;
+
+        let TypeOption: DataOption[] = [];
+        data.organizationTypes.map((r: any) => {
+          TypeOption.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        organizationTypeOption.value = TypeOption;
+        organizationTypeFilter.value = TypeOption;
+
+        let LevelOption: DataOption[] = [];
+        data.organizationLevels.map((r: any) => {
+          LevelOption.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        organizationLevelOption.value = LevelOption;
+        organizationLevelFilter.value = LevelOption;
+
+        let TelInternalOption: DataOption[] = [];
+        data.organizationTelInternals.map((r: any) => {
+          TelInternalOption.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        organizationTelInternalOption.value = TelInternalOption;
+        organizationTelInternalFilter.value = TelInternalOption;
+
+        let TelExternalOption: DataOption[] = [];
+        data.organizationTelExternals.map((r: any) => {
+          TelExternalOption.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        organizationTelExternalOption.value = TelExternalOption;
+        organizationTelExternalFilter.value = TelExternalOption;
+
+        let FaxOption: DataOption[] = [];
+        data.organizationFaxs.map((r: any) => {
+          FaxOption.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        organizationFaxOption.value = FaxOption;
+        organizationFaxFilter.value = FaxOption;
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ *  หน่วยงานต้นสังกัด
+ */
+const fetchOrganizationAgency = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
+    .then((res) => {
+      const data = res.data.result;
+      let AgencyOption: DataOption[] = [];
+      data.map((r: any) => {
+        AgencyOption.push({
+          id: r.organizationId.toString(),
+          name: r.organizationName.toString(),
+        });
+      });
+      organizationAgencyOption.value = AgencyOption;
+      organizationAgencyFilter.value = AgencyOption;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ *  ส่วนราชการต้นสังกัด
+ */
+const fetchOrganizationGovernmentAgency = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
+    .then((res) => {
+      const data = res.data.result;
+      let GovernmentAgencyOption: DataOption[] = [];
+      data.map((r: any) => {
+        GovernmentAgencyOption.push({
+          id: r.organizationId.toString(),
+          name: r.organizationName.toString(),
+        });
+      });
+      organizationGovernmentAgencyOption.value = GovernmentAgencyOption;
+      organizationGovernmentAgencyFilter.value = GovernmentAgencyOption;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ *  รหัสหน่วยงาน
+ */
+const fetchOrganizationAgencyCode = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.organizationCode)
+    .then((res) => {
+      const data = res.data.result;
+      let option: GovermentOption[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          governmentCode: r.governmentCode.toString(),
+          agencyCode: r.agencyCode.toString(),
+          shortName: r.name.toString(),
+        });
+      });
+      organizationAgencyCodeOption.value = option;
+      organizationAgencyCodeFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchAgencyCode = async (val: string) => {
+  let option: GovermentOption[] = [];
+  loaderPage(true);
+  await http
+    .get(config.API.organizationAgencyCode(val))
+    .then((res) => {
+      const data = res.data.result;
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          governmentCode: r.governmentCode.toString(),
+          agencyCode: r.agencyCode.toString(),
+          shortName: r.name.toString(),
+        });
+      });
+      organizationGovernmentCodeOption.value = option;
+      organizationGovernmentCodeFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+  return option;
+};
+
+/**
+ * get รายการ ตำแหน่ง
+ */
+const fetchPosition = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.positionEmployee)
+    .then((res) => {
+      const data = res.data.result;
+
+      let optionpositionpaths: DataOption[] = [];
+      data.positionEmployeePositions.map((r: any) => {
+        optionpositionpaths.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+          note: r.note.toString(),
+        });
+      });
+      positionEmployeePathOption.value = optionpositionpaths;
+      positionEmployeePathFilter.value = optionpositionpaths;
+
+      let optionPositionPathSides: DataOption[] = [];
+      data.positionEmployeePositionSides.map((r: any) => {
+        optionPositionPathSides.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+          note: r.note.toString(),
+        });
+      });
+      positionEmployeePathSideOption.value = optionPositionPathSides;
+      positionEmployeePathSideFilter.value = optionPositionPathSides;
+
+      //   let optionPositionTypes: DataOption[] = [];
+      //   data.positionTypes.map((r: any) => {
+      //     optionPositionTypes.push({
+      //       id: r.id.toString(),
+      //       name: r.name.toString(),
+      //     });
+      //   });
+      //   positionTypeOption.value = optionPositionTypes;
+      //   positionTypeFilter.value = optionPositionTypes;
+
+      let optionPositionLines: DataOption[] = [];
+      data.positionEmployeeLines.map((r: any) => {
+        optionPositionLines.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionEmployeeLineOption.value = optionPositionLines;
+      positionEmployeeLineFilter.value = optionPositionLines;
+
+      //   let optionPositionExecutives: DataOption[] = [];
+      //   data.positionExecutives.map((r: any) => {
+      //     optionPositionExecutives.push({
+      //       id: r.id.toString(),
+      //       name: r.name.toString(),
+      //     });
+      //   });
+      //   positionExecutiveOption.value = optionPositionExecutives;
+      //   positionExecutiveFilter.value = optionPositionExecutives;
+
+      //   let optionPositionExecutiveSides: DataOption[] = [];
+      //   data.positionExecutiveSides.map((r: any) => {
+      //     optionPositionExecutiveSides.push({
+      //       id: r.id.toString(),
+      //       name: r.name.toString(),
+      //     });
+      //   });
+      //   positionExecutiveSideOption.value = optionPositionExecutiveSides;
+      //   positionExecutiveSideFilter.value = optionPositionExecutiveSides;
+
+      let optionPositionLevels: DataOption[] = [];
+      data.positionEmployeeLevels.map((r: any) => {
+        optionPositionLevels.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionEmployeeLevelOption.value = optionPositionLevels;
+      positionEmployeeLevelFilter.value = optionPositionLevels;
+
+      let optionPositionStatuss: DataOption[] = [];
+      data.positionEmployeeStatuss.map((r: any) => {
+        optionPositionStatuss.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionEmployeeStatusOption.value = optionPositionStatuss;
+      positionEmployeeStatusFilter.value = optionPositionStatuss;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value!.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  modal.value = false;
+  loaderPage(true);
+  await http
+    .post(config.API.organizationEmployeePosition, {
+      organizationOrganizationId: organizationOrganizationId.value,
+      organizationShortNameId: organizationGovernmentCode.value,
+      organizationTypeId: organizationTypeId.value,
+      organizationLevelId: organizationLevelId.value,
+      organizationAgencyId: organizationAgencyId.value,
+      organizationGovernmentAgencyId: organizationGovernmentAgencyId.value,
+      organizationTelExternalId: organizationTelExternalId.value,
+      organizationTelInternalId: organizationTelInternalId.value,
+      organizationFaxId: organizationFaxId.value,
+      agency: agency.value,
+      government: government.value,
+      department: department.value,
+      pile: pile.value,
+      organizationUserNote: organizationUserNote.value,
+      organizationOrder: organizationOrder.value,
+      //   positionTypeId: positionTypeId.value,
+      positionEmployeeLineId: positionEmployeeLineId.value,
+      positionEmployeePositionId: positionEmployeePathId.value,
+      positionEmployeePositionSidesId: positionEmployeePositionSidesId.value,
+      //   positionExecutiveId: positionExecutiveId.value,
+      //   positionExecutiveSideId: positionExecutiveSideId.value,
+      positionEmployeeLevelsId: positionEmployeeLevelId.value,
+      positionEmployeeStatusId: positionEmployeeStatusId.value,
+      posNo: posNo.value,
+      qualification: qualification.value,
+      positionCondition: positionCondition.value,
+      positionMasterUserNote: positionMasterUserNote.value,
+      isDirector: isDirector.value,
+      isActive: isActive.value,
+      isCondition: isCondition.value,
+      conditionNote: conditionNote.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลร่างสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      modal.value = false;
+      await fetchData();
+    });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  modal.value = false;
+  loaderPage(true);
+  await http
+    .put(config.API.organizationEmployeePositionId(id.value), {
+      organizationOrganizationId: organizationOrganizationId.value,
+      organizationShortNameId: organizationGovernmentCode.value,
+      organizationTypeId: organizationTypeId.value,
+      organizationLevelId: organizationLevelId.value,
+      organizationAgencyId: organizationAgencyId.value,
+      organizationGovernmentAgencyId: organizationGovernmentAgencyId.value,
+      organizationTelExternalId: organizationTelExternalId.value,
+      organizationTelInternalId: organizationTelInternalId.value,
+      organizationFaxId: organizationFaxId.value,
+      agency: agency.value,
+      government: government.value,
+      department: department.value,
+      pile: pile.value,
+      organizationUserNote: organizationUserNote.value,
+      organizationOrder: organizationOrder.value,
+      //   positionTypeId: positionTypeId.value,
+      positionEmployeeLineId: positionEmployeeLineId.value,
+      positionEmployeePositionId: positionEmployeePathId.value,
+      positionEmployeePositionSidesId: positionEmployeePositionSidesId.value,
+      //   positionExecutiveId: positionExecutiveId.value,
+      //   positionExecutiveSideId: positionExecutiveSideId.value,
+      positionEmployeeLevelsId: positionEmployeeLevelId.value,
+      positionEmployeeStatusId: positionEmployeeStatusId.value,
+      posNo: posNo.value,
+      qualification: qualification.value,
+      positionCondition: positionCondition.value,
+      positionMasterUserNote: positionMasterUserNote.value,
+      isDirector: isDirector.value,
+      isActive: isActive.value,
+      isCondition: isCondition.value,
+      conditionNote: conditionNote.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลร่างสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      await fetchData();
+    });
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await deleteData(id);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const deleteData = async (id: string) => {
+  loaderPage(true);
+  await http
+    .delete(config.API.organizationEmployeePositionId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+    });
+  } else {
+    modal.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: any) => {
+  editRow.value = false;
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = true;
+  id.value = props.id;
+  organizationOrganizationId.value = props.organizationOrganizationId;
+  organizationAgencyCode.value = props.organizationAgencyCode;
+  await updateAgencyCode(props.organizationAgencyCode);
+  organizationGovernmentCode.value = props.organizationShortNameId;
+  await updateGovernmentCode(props.organizationShortNameId);
+  organizationTypeId.value = props.organizationTypeId;
+  organizationLevelId.value = props.organizationLevelId;
+  organizationAgencyId.value = props.organizationAgencyId;
+  organizationGovernmentAgencyId.value = props.organizationGovernmentAgencyId;
+  organizationTelExternalId.value = props.organizationTelExternalId;
+  organizationTelInternalId.value = props.organizationTelInternalId;
+  organizationFaxId.value = props.organizationFaxId;
+  organizationShortName.value = props.organizationShortName;
+  agency.value = props.agency;
+  government.value = props.government;
+  department.value = props.department;
+  pile.value = props.pile;
+  organizationUserNote.value = props.organizationUserNote;
+  organizationOrder.value = props.organizationOrder;
+
+  //   positionTypeId.value = props.positionTypeId;
+  positionEmployeeLineId.value = props.positionEmployeeLineId;
+  positionEmployeePathId.value = props.positionEmployeePathId;
+  positionEmployeePositionSidesId.value = props.positionEmployeePositionSidesId;
+  //   positionExecutiveId.value = props.positionExecutiveId;
+  //   positionExecutiveSideId.value = props.positionExecutiveSideId;
+  positionEmployeeLevelId.value = props.positionEmployeeLevelId;
+  positionEmployeeStatusId.value = props.positionEmployeeStatusId;
+  posNo.value = props.posNo;
+  qualification.value = props.qualification;
+  positionCondition.value = props.positionCondition;
+  positionMasterUserNote.value = props.positionMasterUserNote;
+  isDirector.value = props.isDirector;
+  isActive.value = props.isActive;
+  isCondition.value = props.isCondition;
+  conditionNote.value = props.conditionNote;
+  id.value = props.id;
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const clickAdd = () => {
+  editRow.value = false;
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  id.value = "";
+  organizationOrganizationId.value = "";
+  organizationAgencyCode.value = "";
+  organizationGovernmentCode.value = "";
+  organizationTypeId.value = "";
+  organizationLevelId.value = "";
+  organizationAgencyId.value = "";
+  organizationGovernmentAgencyId.value = "";
+  organizationTelExternalId.value = "";
+  organizationTelInternalId.value = "";
+  organizationFaxId.value = "";
+  organizationShortName.value = "";
+  agency.value = "";
+  government.value = "";
+  department.value = "";
+  pile.value = "";
+  organizationUserNote.value = "";
+  organizationOrder.value = "";
+
+  //   positionTypeId.value = "";
+  positionEmployeeLineId.value = "";
+  positionEmployeePathId.value = "";
+  positionEmployeePositionSidesId.value = [];
+  //   positionExecutiveId.value = "";
+  //   positionExecutiveSideId.value = [];
+  positionEmployeeLevelId.value = [];
+  positionEmployeeStatusId.value = "";
+  posNo.value = "";
+  qualification.value = "";
+  positionCondition.value = "";
+  positionMasterUserNote.value = "";
+  isDirector.value = false;
+  isActive.value = false;
+  isCondition.value = false;
+  conditionNote.value = "";
+};
+
+/**เมื่อเลือกใหม่
+ * q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
+ * @param val ค่าตัวที่เลือก
+ */
+const updateAgencyCode = async (val: string) => {
+  await fetchAgencyCode(val);
+};
+
+/**เมื่อเลือกใหม่
+ * q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
+ * @param val ค่าตัวที่เลือก
+ */
+const updateGovernmentCode = async (val: string) => {
+  let data = organizationGovernmentCodeFilter.value.find(
+    (v: GovermentOption) => v.id.indexOf(val) > -1
+  );
+  organizationShortName.value = data?.shortName;
+  posNo.value = data?.shortName;
+};
+
+/**Fuction Filter DropDown
+ * q-select ส่งค่ามาให้เองจาก @filter="filterSelector"
+ * @param val ค่าตัวพิมพ์ค้นหา
+ * @param update ทุกครั้งที่พิมพ์ค่า
+ */
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "1":
+      update(() => {
+        organizationOrganizationOption.value =
+          organizationOrganizationFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "2":
+      update(() => {
+        organizationAgencyCodeOption.value =
+          organizationAgencyCodeFilter.value.filter(
+            (v: GovermentOption) => v.agencyCode.indexOf(val) > -1
+          );
+      });
+      break;
+    case "3":
+      update(() => {
+        organizationGovernmentCodeOption.value =
+          organizationGovernmentCodeFilter.value.filter(
+            (v: GovermentOption) => v.governmentCode.indexOf(val) > -1
+          );
+      });
+    case "4":
+      update(() => {
+        organizationAgencyOption.value = organizationAgencyFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "5":
+      update(() => {
+        organizationGovernmentAgencyOption.value =
+          organizationGovernmentAgencyFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "6":
+      update(() => {
+        organizationTypeOption.value = organizationTypeFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "7":
+      update(() => {
+        organizationLevelOption.value = organizationLevelFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "8":
+      update(() => {
+        organizationTelExternalOption.value =
+          organizationTelExternalFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "9":
+      update(() => {
+        organizationTelInternalOption.value =
+          organizationTelInternalFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "10":
+      update(() => {
+        organizationFaxOption.value = organizationFaxFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    // case "11":
+    //   update(() => {
+    //     positionEmployeeTypeOption.value = positionEmployeeTypeFilter.value.filter(
+    //       (v: DataOption) => v.name.indexOf(val) > -1
+    //     );
+    //   });
+    //   break;
+    case "12":
+      update(() => {
+        positionEmployeeLineOption.value =
+          positionEmployeeLineFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "13":
+      update(() => {
+        positionEmployeePathOption.value =
+          positionEmployeePathFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "14":
+      update(() => {
+        positionEmployeePathSideOption.value =
+          positionEmployeePathSideFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    // case "15":
+    //   update(() => {
+    //     positionEmployeeExecutiveOption.value = positionEmployeeExecutiveFilter.value.filter(
+    //       (v: DataOption) => v.name.indexOf(val) > -1
+    //     );
+    //   });
+    //   break;
+    // case "16":
+    //   update(() => {
+    //     positionEmployeeExecutiveSideOption.value =
+    //       positionEmployeeExecutiveSideFilter.value.filter(
+    //         (v: DataOption) => v.name.indexOf(val) > -1
+    //       );
+    //   });
+    //   break;
+    case "17":
+      update(() => {
+        positionEmployeeLevelOption.value =
+          positionEmployeeLevelFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "18":
+      update(() => {
+        positionEmployeeStatusOption.value =
+          positionEmployeeStatusFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index a118ab7f3..7e6da1e0a 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -1,128 +1,126 @@
 <template>
-	<div class="q-pb-sm row q-col-gutter-sm">
-		<!--  -->
-		<div class="q-gutter-sm" v-if="nornmalData == true">
-			<q-btn
-				size="12px"
-				flat
-				round
-				color="add"
-				@click="checkAdd"
-				icon="mdi-plus"
-			>
-				<q-tooltip>เพิ่มข้อมูล</q-tooltip>
-			</q-btn>
-		</div>
-		<div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
-			<q-card bordered flat class="q-px-md no-wrap row">
-				<div class="col-12 text-subtitle2 row items-center">
-					<span class="text-weight-medium text-dark"
-						>ผู้สมัครสอบ</span
-					>
-					<q-space />
-					<q-badge
-						color="white"
-						class="text-weight-bold text-subtitle1 text-primary"
-						:label="`${count}`"
-						rounded
-					/>
-				</div>
-			</q-card>
-			<q-card bordered flat class="q-px-md no-wrap row">
-				<div class="col-12 text-subtitle2 row items-center">
-					<span class="text-weight-medium text-dark">สอบผ่าน</span>
-					<q-space />
-					<q-badge
-						color="white"
-						class="text-weight-bold text-subtitle1 text-blue"
-						:label="`${pass}`"
-						rounded
-					/>
-				</div>
-			</q-card>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <!--  -->
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="checkAdd"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
+      <q-card bordered flat class="q-px-md no-wrap row">
+        <div class="col-12 text-subtitle2 row items-center">
+          <span class="text-weight-medium text-dark">ผู้สมัครสอบ</span>
+          <q-space />
+          <q-badge
+            color="white"
+            class="text-weight-bold text-subtitle1 text-primary"
+            :label="`${count}`"
+            rounded
+          />
+        </div>
+      </q-card>
+      <q-card bordered flat class="q-px-md no-wrap row">
+        <div class="col-12 text-subtitle2 row items-center">
+          <span class="text-weight-medium text-dark">สอบผ่าน</span>
+          <q-space />
+          <q-badge
+            color="white"
+            class="text-weight-bold text-subtitle1 text-blue"
+            :label="`${pass}`"
+            rounded
+          />
+        </div>
+      </q-card>
 
-			<q-card bordered flat class="q-px-md no-wrap row">
-				<div class="col-12 text-subtitle2 row items-center">
-					<span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
-					<q-space />
-					<q-badge
-						color="white"
-						class="text-weight-bold text-subtitle1 text-pink"
-						:label="`${notpass}`"
-						rounded
-					/>
-				</div>
-			</q-card>
-		</div>
-		<q-space />
-		<div class="items-center q-gutter-sm" style="display: flex">
-			<!-- ค้นหาข้อความใน table -->
-			<q-input
-				standout
-				dense
-				:model-value="inputfilter"
-				ref="filterRef"
-				@update:model-value="updateInput"
-				outlined
-				debounce="300"
-				placeholder="ค้นหา"
-				style="max-width: 200px"
-			>
-				<template v-slot:append>
-					<q-icon v-if="inputfilter == ''" name="search" />
-					<q-icon
-						v-if="inputfilter !== ''"
-						name="clear"
-						class="cursor-pointer"
-						@click="resetFilter"
-					/>
-				</template>
-			</q-input>
-			<!-- แสดงคอลัมน์ใน table -->
-			<q-select
-				:model-value="inputvisible"
-				@update:model-value="updateVisible"
-				:display-value="$q.lang.table.columns"
-				multiple
-				outlined
-				dense
-				:options="attrs.columns"
-				options-dense
-				option-value="name"
-				map-options
-				emit-value
-				style="min-width: 150px"
-				class="gt-xs"
-			>
-				<template> </template>
-			</q-select>
-		</div>
-	</div>
-	<q-table
-		ref="table"
-		flat
-		bordered
-		class="custom-table2"
-		v-bind="attrs"
-		virtual-scroll
-		:virtual-scroll-sticky-size-start="48"
-		dense
-		:pagination-label="paginationLabel"
-		:pagination="initialPagination"
-		:rows-per-page-options="[0]"
-	>
-		<template v-slot:header="props">
-			<q-tr :props="props">
-				<q-th v-for="col in props.cols" :key="col.name" :props="props">
-					<span class="text-weight-medium" v-html="col.label" />
-				</q-th>
-				<q-th auto-width v-if="nornmalData == true" />
-			</q-tr>
-		</template>
-		<template #body="props">
-			<slot v-bind="props" name="columns"></slot>
-		</template>
-	</q-table>
+      <q-card bordered flat class="q-px-md no-wrap row">
+        <div class="col-12 text-subtitle2 row items-center">
+          <span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
+          <q-space />
+          <q-badge
+            color="white"
+            class="text-weight-bold text-subtitle1 text-pink"
+            :label="`${notpass}`"
+            rounded
+          />
+        </div>
+      </q-card>
+    </div>
+    <q-space />
+    <div class="items-center q-gutter-sm" style="display: flex">
+      <!-- ค้นหาข้อความใน table -->
+      <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon v-if="inputfilter == ''" name="search" />
+          <q-icon
+            v-if="inputfilter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+      <!-- แสดงคอลัมน์ใน table -->
+      <q-select
+        :model-value="inputvisible"
+        @update:model-value="updateVisible"
+        :display-value="$q.lang.table.columns"
+        multiple
+        outlined
+        dense
+        :options="attrs.columns"
+        options-dense
+        option-value="name"
+        map-options
+        emit-value
+        style="min-width: 150px"
+        class="gt-xs"
+      >
+        <template> </template>
+      </q-select>
+    </div>
+  </div>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </q-th>
+        <q-th auto-width v-if="nornmalData == true" />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </q-table>
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
@@ -132,106 +130,106 @@ const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const initialPagination = ref<Pagination>({
-	rowsPerPage: 0,
+  rowsPerPage: 0,
 });
 
 const props = defineProps({
-	count: Number,
-	pass: Number,
-	notpass: Number,
+  count: Number,
+  pass: Number,
+  notpass: Number,
 
-	inputfilter: String,
-	name: String,
-	icon: String,
-	inputvisible: Array,
-	editvisible: Boolean,
-	add: {
-		type: Function,
-		default: () => console.log("not function"),
-	},
-	validate: {
-		type: Function,
-		default: () => console.log("not function"),
-	},
-	nornmalData: {
-		type: Boolean,
-		defualt: true,
-	},
-	conclude: {
-		type: Boolean,
-		defualt: false,
-	},
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
 });
 
 const emit = defineEmits([
-	"update:inputfilter",
-	"update:inputvisible",
-	"update:editvisible",
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
 ]);
 const updateInput = (value: string | number | null) => {
-	emit("update:inputfilter", value);
+  emit("update:inputfilter", value);
 };
 const updateVisible = (value: []) => {
-	emit("update:inputvisible", value);
+  emit("update:inputvisible", value);
 };
 
 const paginationLabel = (start: string, end: string, total: string) => {
-	return start + "-" + end + " ใน " + total;
+  return start + "-" + end + " ใน " + total;
 };
 
 const checkAdd = () => {
-	props.add();
+  props.add();
 };
 
 const resetFilter = () => {
-	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-	emit("update:inputfilter", "");
-	filterRef.value.focus();
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
 };
 </script>
 <style lang="scss">
 .icon-color {
-	color: #4154b3;
+  color: #4154b3;
 }
 
 .custom-table2 {
-	max-height: 64vh;
+  max-height: 64vh;
 
-	.q-table tr:nth-child(odd) td {
-		background: white;
-	}
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
 
-	.q-table tr:nth-child(even) td {
-		background: #f8f8f8;
-	}
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
 
-	.q-table thead tr {
-		background: #ecebeb;
-	}
+  .q-table thead tr {
+    background: #ecebeb;
+  }
 
-	.q-table thead tr th {
-		position: sticky;
-	}
+  .q-table thead tr th {
+    position: sticky;
+  }
 
-	.q-table td:nth-of-type(2) {
-		z-index: 3 !important;
-	}
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
 
-	.q-table th:nth-of-type(2),
-	.q-table td:nth-of-type(2) {
-		position: sticky;
-		left: 0;
-		z-index: 1;
-	}
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
 
-	/* this will be the loading indicator */
-	.q-table thead tr:last-child th {
-		/* height of all previous header rows */
-		top: 48px;
-	}
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
 
-	.q-table thead tr:first-child th {
-		top: 0;
-	}
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
 }
 </style>
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index 210a8200a..724d935ef 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -1,88 +1,79 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <template>
-	<div class="toptitle text-dark col-12 row items-center">
-		จัดการรอบคัดเลือก
-	</div>
-	<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-		<div>
-			<Table
-				style="max-height: 80vh"
-				:rows="examData"
-				:columns="columns"
-				:filter="filter"
-				:visible-columns="visibleColumns"
-				v-model:inputfilter="filter"
-				v-model:inputvisible="visibleColumns"
-				:pagination="initialPagination"
-				:nornmalData="true"
-				:add="clickAdd"
-				:paging="true"
-				:titleText="''"
-			>
-				<template #columns="props">
-					<q-tr :props="props" class="cursor-pointer">
-						<q-td
-							v-for="col in props.cols"
-							:key="col.name"
-							:props="props"
-							@click="clickEdit(props.row)"
-						>
-							<div
-								v-if="col.name == 'no'"
-								class="table_ellipsis2"
-							>
-								{{ props.rowIndex + 1 }}
-							</div>
-							<div
-								v-else-if="col.name == 'yearly'"
-								class="table_ellipsis2"
-							>
-								{{ col.value + 543 }}
-							</div>
-							<div
-								v-else-if="
-									col.name == 'dateRegister' ||
-									col.name == 'datePayment' ||
-									col.name == 'dateAnnouncement'
-								"
-								class="table_ellipsis2"
-							>
-								{{ dateThaiRange(col.value) }}
-							</div>
-							<div
-								v-else-if="col.name == 'announcementExam'"
-								class="table_ellipsis2"
-							>
-								{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
-							</div>
-							<div
-								v-else-if="col.name == 'category'"
-								class="table_ellipsis2"
-							>
-								{{ typeCategoryExam(col.value) }}
-							</div>
-							<div v-else class="table_ellipsis2">
-								{{ col.value }}
-							</div>
-						</q-td>
-						<q-td>
-							<q-btn
-								dense
-								size="12px"
-								flat
-								round
-								color="red"
-								@click="clickDelete(props.row.id)"
-								icon="mdi-delete"
-							>
-								<q-tooltip>ลบข้อมูล</q-tooltip>
-							</q-btn>
-						</q-td>
-					</q-tr>
-				</template>
-			</Table>
-		</div>
-	</q-card>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดการรอบคัดเลือก
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="examData"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :add="clickAdd"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="clickEdit(props.row)"
+            >
+              <div v-if="col.name == 'no'" class="table_ellipsis2">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
+                {{ col.value + 543 }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'dateRegister' ||
+                  col.name == 'datePayment' ||
+                  col.name == 'dateAnnouncement'
+                "
+                class="table_ellipsis2"
+              >
+                {{ dateThaiRange(col.value) }}
+              </div>
+              <div
+                v-else-if="col.name == 'announcementExam'"
+                class="table_ellipsis2"
+              >
+                {{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
+              </div>
+              <div v-else-if="col.name == 'category'" class="table_ellipsis2">
+                {{ typeCategoryExam(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis2">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -90,14 +81,14 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
-	RequestPeriodExam,
-	RequestPosition,
-	RequestPayment,
+  RequestPeriodExam,
+  RequestPosition,
+  RequestPayment,
 } from "@/modules/03_recruiting/interface/request/Period";
 import type {
-	ResponsePeriodExam,
-	ResponsePosition,
-	ResponsePayment,
+  ResponsePeriodExam,
+  ResponsePosition,
+  ResponsePayment,
 } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -114,248 +105,236 @@ const router = useRouter();
 const { date2Thai, success, typeCategoryExam, messageError } = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
-	rowsPerPage: 0,
+  rowsPerPage: 0,
 });
 const examData = ref<ResponsePeriodExam[]>([]);
 const visibleColumns = ref<String[]>([
-	"no",
-	"announcementExam",
-	"yearly",
-	"category",
-	"name",
-	"document",
-	"dateAnnouncement",
-	"dateRegister",
-	"datePayment",
-	"fee",
+  "no",
+  "announcementExam",
+  "yearly",
+  "category",
+  "name",
+  "document",
+  "dateAnnouncement",
+  "dateRegister",
+  "datePayment",
+  "fee",
 ]);
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "no",
-		align: "center",
-		label: "ลำดับ",
-		sortable: true,
-		field: "no",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "announcementExam",
-		align: "left",
-		label: "ประเภทการประกาศ",
-		sortable: true,
-		field: "announcementExam",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "yearly",
-		align: "center",
-		label: "ปีงบประมาณ",
-		sortable: true,
-		field: "yearly",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "category",
-		align: "left",
-		label: "สังกัด",
-		sortable: true,
-		field: "category",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "name",
-		align: "left",
-		label: "รายการประกาศ",
-		sortable: true,
-		field: "name",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "fee",
-		align: "right",
-		label: "ค่าธรรมเนียม",
-		sortable: true,
-		field: "fee",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "dateAnnouncement",
-		align: "left",
-		label: "วันที่สมัคร",
-		sortable: true,
-		field: "dateAnnouncement",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "dateRegister",
-		align: "left",
-		label: "วันที่ชำระเงิน",
-		sortable: true,
-		field: "dateRegister",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "datePayment",
-		align: "left",
-		label: "วันที่ประกาศ",
-		sortable: true,
-		field: "datePayment",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
+  {
+    name: "no",
+    align: "center",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "announcementExam",
+    align: "left",
+    label: "ประเภทการประกาศ",
+    sortable: true,
+    field: "announcementExam",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "yearly",
+    align: "center",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "yearly",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "category",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "category",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "รายการประกาศ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fee",
+    align: "right",
+    label: "ค่าธรรมเนียม",
+    sortable: true,
+    field: "fee",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateAnnouncement",
+    align: "left",
+    label: "วันที่สมัคร",
+    sortable: true,
+    field: "dateAnnouncement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateRegister",
+    align: "left",
+    label: "วันที่ชำระเงิน",
+    sortable: true,
+    field: "dateRegister",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "datePayment",
+    align: "left",
+    label: "วันที่ประกาศ",
+    sortable: true,
+    field: "datePayment",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 onMounted(async () => {
-	loaderPage(false);
-	await fetchData();
+  loaderPage(false);
+  await fetchData();
 });
 
 const fetchData = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.periodExamType("all"))
-		.then((res) => {
-			const data = res.data.result;
-			let result: ResponsePeriodExam[] = [];
-			if (data.length > 0) {
-				data.map((r: RequestPeriodExam) => {
-					const positionData: ResponsePosition[] = [];
-					r.positionExam.map((r: RequestPosition) => {
-						positionData.push({
-							id: r.id,
-							position: {
-								id: r.positionId,
-								name: r.positionName,
-							},
-							type: {
-								id: r.typeId,
-								name: r.typeName,
-							},
-							highDegree: r.highDegree,
-						});
-					});
-					const bankData: ResponsePayment[] = [];
-					r.bankExam.map((r: RequestPayment) => {
-						bankData.push({
-							id: r.id,
-							accountNumber: r.accountNumber,
-							bankName: r.bankName,
-							accountName: r.accountName,
-						});
-					});
-					result.push({
-						id: r.id,
-						dateAnnounce:
-							r.announcementDate !== null
-								? new Date(r.announcementDate)
-								: null,
-						announcementExam: r.announcementExam,
-						name: r.name,
-						checkDocument: r.checkDocument,
-						checkDisability: r.checkDisability,
-						round: r.round,
-						yearly: r.year,
-						fee: r.fee,
-						dateAnnouncement:
-							r.announcementStartDate !== null &&
-							r.announcementEndDate !== null
-								? [
-										new Date(r.announcementStartDate),
-										new Date(r.announcementEndDate),
-								  ]
-								: null,
-						dateExam:
-							r.examDate !== null ? new Date(r.examDate) : null,
-						dateRegister:
-							r.registerStartDate !== null &&
-							r.registerEndDate !== null
-								? [
-										new Date(r.registerStartDate),
-										new Date(r.registerEndDate),
-								  ]
-								: null,
-						datePayment:
-							r.paymentStartDate !== null &&
-							r.paymentEndDate !== null
-								? [
-										new Date(r.paymentStartDate),
-										new Date(r.paymentEndDate),
-								  ]
-								: null,
-						organizationName: {
-							id: r.organizationId,
-							name: r.organizationName,
-						},
-						organizationShortName: {
-							id: r.organizationCodeId,
-							name: r.organizationCodeName,
-						},
-						positionExam: positionData,
-						pay: r.bankExam.length > 0 ? "payment2" : "payment1",
-						bankExam: bankData,
-						editor: r.detail,
-						note: r.note,
-						category: r.category,
-					});
-				});
-			}
-			examData.value = result;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  loaderPage(true);
+  await http
+    .get(config.API.periodExamType("all"))
+    .then((res) => {
+      const data = res.data.result;
+      let result: ResponsePeriodExam[] = [];
+      if (data.length > 0) {
+        data.map((r: RequestPeriodExam) => {
+          const positionData: ResponsePosition[] = [];
+          r.positionExam.map((r: RequestPosition) => {
+            positionData.push({
+              id: r.id,
+              position: {
+                id: r.positionId,
+                name: r.positionName,
+              },
+              type: {
+                id: r.typeId,
+                name: r.typeName,
+              },
+              highDegree: r.highDegree,
+            });
+          });
+          const bankData: ResponsePayment[] = [];
+          r.bankExam.map((r: RequestPayment) => {
+            bankData.push({
+              id: r.id,
+              accountNumber: r.accountNumber,
+              bankName: r.bankName,
+              accountName: r.accountName,
+            });
+          });
+          result.push({
+            id: r.id,
+            dateAnnounce:
+              r.announcementDate !== null ? new Date(r.announcementDate) : null,
+            announcementExam: r.announcementExam,
+            name: r.name,
+            checkDocument: r.checkDocument,
+            checkDisability: r.checkDisability,
+            round: r.round,
+            yearly: r.year,
+            fee: r.fee,
+            dateAnnouncement:
+              r.announcementStartDate !== null && r.announcementEndDate !== null
+                ? [
+                    new Date(r.announcementStartDate),
+                    new Date(r.announcementEndDate),
+                  ]
+                : null,
+            dateExam: r.examDate !== null ? new Date(r.examDate) : null,
+            dateRegister:
+              r.registerStartDate !== null && r.registerEndDate !== null
+                ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
+                : null,
+            datePayment:
+              r.paymentStartDate !== null && r.paymentEndDate !== null
+                ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
+                : null,
+            organizationName: {
+              id: r.organizationId,
+              name: r.organizationName,
+            },
+            organizationShortName: {
+              id: r.organizationCodeId,
+              name: r.organizationCodeName,
+            },
+            positionExam: positionData,
+            pay: r.bankExam.length > 0 ? "payment2" : "payment1",
+            bankExam: bankData,
+            editor: r.detail,
+            note: r.note,
+            category: r.category,
+          });
+        });
+      }
+      examData.value = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const clickEdit = (col: ResponsePeriodExam) => {
-	router.push(`/qualify/period/${col.id}`);
+  router.push(`/qualify/period/${col.id}`);
 };
 
 const clickDelete = (id: string) => {
-	$q.dialog({
-		title: "ยืนยันการลบข้อมูล",
-		message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-		cancel: {
-			flat: true,
-			color: "negative",
-		},
-		persistent: true,
-	})
-		.onOk(async () => {
-			await deleteData(id);
-		})
-		.onCancel(() => {})
-		.onDismiss(() => {});
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await deleteData(id);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
 };
 
 const clickAdd = () => {
-	router.push({ name: "qualifyPeriodAdd" });
+  router.push({ name: "qualifyPeriodAdd" });
 };
 
 const deleteData = async (id: string) => {
-	loaderPage(true);
-	await http
-		.delete(config.API.periodExamId(id))
-		.then((res) => {
-			success($q, "ลบข้อมูลสำเร็จ");
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(async () => {
-			loaderPage(false);
-			await fetchData();
-		});
+  loaderPage(true);
+  await http
+    .delete(config.API.periodExamId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+      await fetchData();
+    });
 };
 
 /**
@@ -363,13 +342,13 @@ const deleteData = async (id: string) => {
  * @param val ช่วงวันที่
  */
 const dateThaiRange = (val: [Date, Date]) => {
-	if (val === null) {
-		return "";
-	} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
-		return `${date2Thai(val[0], true)}`;
-	} else {
-		return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
-	}
+  if (val === null) {
+    return "";
+  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
+    return `${date2Thai(val[0], true)}`;
+  } else {
+    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
+  }
 };
 </script>