diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 53398fdf6..ea1d93edd 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -21,42 +21,45 @@ const { placementData } = store;
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const modal = ref<boolean>(false); //modal add detail
 const modal_right = ref<boolean>(false); //modal add detail
+
+const modalwaitInfo = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const Name = ref<string>();
 const positionMasterUserNote = ref<string>();
 const $q = useQuasar(); // show dialog
 const files = ref<File[]>([]);
 const appointModal = ref<boolean>(false);
+const isNewModel = ref<any>(false); //modal add detail
 const appoint = ref<any>({
-  Code: '',
-  UnitName: '',
-  PositionNo: '',
-  PositionType: '',
-  PositionManage: '',
-  PositionTypeManage: '',
-  PositionLine: '',
-  Major: '',
-  PositionLevel: ''
+  Code: "",
+  UnitName: "",
+  PositionNo: "",
+  PositionType: "",
+  PositionManage: "",
+  PositionTypeManage: "",
+  PositionLine: "",
+  Major: "",
+  PositionLevel: "",
 });
 
-
 const saveAppoint = () => {
   console.log("save appoint===>", appoint.value);
-}
+};
 
 const savePostpone = () => {
-  const dataPost = { note: positionMasterUserNote.value, files: files }
+  const dataPost = { note: positionMasterUserNote.value, files: files };
   console.log("save postpone===>", dataPost);
-  positionMasterUserNote.value = '';
+  positionMasterUserNote.value = "";
   modal_right.value = false;
-}
+  isNewModel.value = false;
+};
 
 const saveDisclaim = () => {
-  const dataPost = { note: positionMasterUserNote.value }
+  const dataPost = { note: positionMasterUserNote.value };
   console.log("save disclaim===>", dataPost);
-  positionMasterUserNote.value = '';
+  positionMasterUserNote.value = "";
   modal_right.value = false;
-}
+};
 
 const clickEditRow = () => {
   editRow.value = true;
@@ -68,7 +71,7 @@ const getClass = (val: boolean) => {
   };
 };
 const selectData = (props: TableName) => {
-  itemtest.value = props
+  itemtest.value = props;
   if (editvisible.value == true) {
     editRow.value = false;
     modalEdit.value = true;
@@ -83,8 +86,12 @@ const selectData = (props: TableName) => {
 };
 
 const getNumFile = ref(0);
-const editDetail = (props: TableName, action: "cancel" | "wait") => {
-
+const editDetail = (
+  props: TableName,
+  action: "cancel" | "wait" | "waitInfo",
+  id:Number
+) => {
+  let dataProp = { ...props };
   if (action === "cancel") {
     getNumFile.value = 0;
     editRow.value = false;
@@ -98,21 +105,39 @@ const editDetail = (props: TableName, action: "cancel" | "wait") => {
     modalEdit.value = true;
     modal_right.value = true;
     edit.value = true;
+    isNewModel.value = true;
+    const GetId = (dataProp:any) =>{
+      if(dataProp.value == id){
+        dataProp.value.push({
+          isNewModel:isNewModel.value
+        })
+      }
+    }
+    GetId(dataProp);
+    console.log(dataProp)
+    Name.value = props.fullName;
+  } else if (action === "waitInfo") {
+    getNumFile.value = 1;
+    editRow.value = false;
+    modalEdit.value = true;
+    modalwaitInfo.value = true;
+    edit.value = true;
+    isNewModel.value = true;
     Name.value = props.fullName;
   }
-
 };
+
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
-    "position",
-    "Name",
-    "ExamOrder",
-    "Unit",
-    "ReportingDate",
-    "BMAOfficer",
-    "Status",
-    "checkList",
-  ])
+      "position",
+      "Name",
+      "ExamOrder",
+      "Unit",
+      "ReportingDate",
+      "BMAOfficer",
+      "Status",
+      "checkList",
+    ])
   : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -203,7 +228,8 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "สละสิทธิ์",
     checkList: null,
-    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    address:
+      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
     university: "มหาวิทยาลัยบูรพา",
     degree: "การศึกษาบัณฑิต",
     major: "เทคโนโลยีการศึกษา",
@@ -211,15 +237,15 @@ const rows = ref<TableName[]>([
     number: 3,
     examCount: 5,
     scoreResult: {
-        scoreAFull: 200,
-        scoreA: 133,
-        scoreBFull: 200,
-        scoreB: 149,
-        scoreCFull: 100,
-        scoreC: 0,
-        scoreSumFull: 500,
-        scoreSum: 282,
-        examResult: "ผ่าน"
+      scoreAFull: 200,
+      scoreA: 133,
+      scoreBFull: 200,
+      scoreB: 149,
+      scoreCFull: 100,
+      scoreC: 0,
+      scoreSumFull: 500,
+      scoreSum: 282,
+      examResult: "ผ่าน",
     },
   },
   {
@@ -236,7 +262,8 @@ const rows = ref<TableName[]>([
     BMAOfficer: false,
     Status: "ยังไม่บรรจุ",
     checkList: null,
-    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    address:
+      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
     university: "มหาวิทยาลัยบูรพา",
     degree: "การศึกษาบัณฑิต",
     major: "เทคโนโลยีการศึกษา",
@@ -244,15 +271,15 @@ const rows = ref<TableName[]>([
     number: 3,
     examCount: 5,
     scoreResult: {
-        scoreAFull: 200,
-        scoreA: 133,
-        scoreBFull: 200,
-        scoreB: 149,
-        scoreCFull: 100,
-        scoreC: 0,
-        scoreSumFull: 500,
-        scoreSum: 282,
-        examResult: "ผ่าน"
+      scoreAFull: 200,
+      scoreA: 133,
+      scoreBFull: 200,
+      scoreB: 149,
+      scoreCFull: 100,
+      scoreC: 0,
+      scoreSumFull: 500,
+      scoreSum: 282,
+      examResult: "ผ่าน",
     },
   },
   {
@@ -269,7 +296,8 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
     checkList: null,
-    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    address:
+      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
     university: "มหาวิทยาลัยบูรพา",
     degree: "การศึกษาบัณฑิต",
     major: "เทคโนโลยีการศึกษา",
@@ -277,15 +305,15 @@ const rows = ref<TableName[]>([
     number: 3,
     examCount: 5,
     scoreResult: {
-        scoreAFull: 200,
-        scoreA: 133,
-        scoreBFull: 200,
-        scoreB: 149,
-        scoreCFull: 100,
-        scoreC: 0,
-        scoreSumFull: 500,
-        scoreSum: 282,
-        examResult: "ผ่าน"
+      scoreAFull: 200,
+      scoreA: 133,
+      scoreBFull: 200,
+      scoreB: 149,
+      scoreCFull: 100,
+      scoreC: 0,
+      scoreSumFull: 500,
+      scoreSum: 282,
+      examResult: "ผ่าน",
     },
   },
 
@@ -303,7 +331,8 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
     checkList: null,
-    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    address:
+      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
     university: "มหาวิทยาลัยบูรพา",
     degree: "การศึกษาบัณฑิต",
     major: "เทคโนโลยีการศึกษา",
@@ -311,15 +340,15 @@ const rows = ref<TableName[]>([
     number: 3,
     examCount: 5,
     scoreResult: {
-        scoreAFull: 200,
-        scoreA: 133,
-        scoreBFull: 200,
-        scoreB: 149,
-        scoreCFull: 100,
-        scoreC: 0,
-        scoreSumFull: 500,
-        scoreSum: 282,
-        examResult: "ผ่าน"
+      scoreAFull: 200,
+      scoreA: 133,
+      scoreBFull: 200,
+      scoreB: 149,
+      scoreCFull: 100,
+      scoreC: 0,
+      scoreSumFull: 500,
+      scoreSum: 282,
+      examResult: "ผ่าน",
     },
   },
 
@@ -337,7 +366,8 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
     checkList: null,
-    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    address:
+      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
     university: "มหาวิทยาลัยบูรพา",
     degree: "การศึกษาบัณฑิต",
     major: "เทคโนโลยีการศึกษา",
@@ -345,15 +375,15 @@ const rows = ref<TableName[]>([
     number: 3,
     examCount: 5,
     scoreResult: {
-        scoreAFull: 200,
-        scoreA: 133,
-        scoreBFull: 200,
-        scoreB: 149,
-        scoreCFull: 100,
-        scoreC: 0,
-        scoreSumFull: 500,
-        scoreSum: 282,
-        examResult: "ผ่าน"
+      scoreAFull: 200,
+      scoreA: 133,
+      scoreBFull: 200,
+      scoreB: 149,
+      scoreCFull: 100,
+      scoreC: 0,
+      scoreSumFull: 500,
+      scoreSum: 282,
+      examResult: "ผ่าน",
     },
   },
   {
@@ -370,7 +400,8 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
     checkList: null,
-    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    address:
+      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
     university: "มหาวิทยาลัยบูรพา",
     degree: "การศึกษาบัณฑิต",
     major: "เทคโนโลยีการศึกษา",
@@ -378,15 +409,15 @@ const rows = ref<TableName[]>([
     number: 3,
     examCount: 5,
     scoreResult: {
-        scoreAFull: 200,
-        scoreA: 133,
-        scoreBFull: 200,
-        scoreB: 149,
-        scoreCFull: 100,
-        scoreC: 0,
-        scoreSumFull: 500,
-        scoreSum: 282,
-        examResult: "ผ่าน"
+      scoreAFull: 200,
+      scoreA: 133,
+      scoreBFull: 200,
+      scoreB: 149,
+      scoreCFull: 100,
+      scoreC: 0,
+      scoreSumFull: 500,
+      scoreSum: 282,
+      examResult: "ผ่าน",
     },
   },
   {
@@ -403,7 +434,8 @@ const rows = ref<TableName[]>([
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
     checkList: null,
-    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+    address:
+      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
     university: "มหาวิทยาลัยบูรพา",
     degree: "การศึกษาบัณฑิต",
     major: "เทคโนโลยีการศึกษา",
@@ -411,15 +443,49 @@ const rows = ref<TableName[]>([
     number: 3,
     examCount: 5,
     scoreResult: {
-        scoreAFull: 200,
-        scoreA: 133,
-        scoreBFull: 200,
-        scoreB: 149,
-        scoreCFull: 100,
-        scoreC: 0,
-        scoreSumFull: 500,
-        scoreSum: 282,
-        examResult: "ผ่าน"
+      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: true,
+    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: "ผ่าน",
     },
   },
 ]);
@@ -431,7 +497,7 @@ const clickCancel = async () => {
 };
 
 const openAppointModal = (value: any) => {
-  appointModal.value = true
+  appointModal.value = true;
   editRow.value = true;
 };
 
@@ -445,180 +511,368 @@ const clickClose = async () => {
       persistent: true,
     }).onOk(async () => {
       modal_right.value = false;
+      modalwaitInfo.value = false;
       modal.value = false;
       appointModal.value = false;
     });
   } else {
     modal_right.value = false;
+    modalwaitInfo.value = false;
     modal.value = false;
     appointModal.value = false;
   }
 };
 
 const save = () => {
-  console.log("rows===>", rows.value)
-}
-
+  console.log("rows===>", rows.value);
+};
 </script>
 <template>
-            <q-form ref="myForm">
-              <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
-                v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
-                :boss="true" :saveNoDraft="true" :add="save">
-                <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-form ref="myForm">
+    <Table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:editvisible="editvisible"
+      :cancel="clickCancel"
+      :history="true"
+      :boss="true"
+      :saveNoDraft="true"
+      :add="save"
+    >
+      <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 == 'BMAOfficer'" class="table_ellipsis">
-                        <div>
-                          <q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
-                          <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-                        </div>
-                      </div>
-                      <div v-else-if="col.name == 'Name'" class="table_ellipsis">
-                        {{ col.value }}
-                        <p>{{ props.row.fullName }}</p>
-                      </div>
-                      <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+          <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 == 'BMAOfficer'" class="table_ellipsis">
+              <div>
+                <q-icon
+                  v-if="col.value == false"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </div>
+            </div>
+            <div v-else-if="col.name == 'Name'" class="table_ellipsis">
+              {{ col.value }}
+              <p>{{ props.row.fullName }}</p>
+            </div>
+            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
+                <div @click="openAppointModal">
+                  <q-input
+                    hide-bottom-space
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="props.row.Unit"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="mdi-bookmark-plus-outline"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+              </div>
+              <div
+                v-else-if="
+                  props.row.Status == 'ยังไม่บรรจุ' ||
+                  props.row.Status == 'สละสิทธิ์'
+                "
+              >
+                -
+              </div>
+              <div v-else>
+                {{ props.row.examResult }}
+                <p>{{ col.value }}</p>
+              </div>
+            </div>
+            <div
+              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+              class="table_ellipsis"
+            >
+              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
+                <datepicker
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  v-model="props.row.ReportingDate"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      hide-bottom-space
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="mixin.date2Thai(col.value)"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div
+                v-else-if="
+                  props.row.Status == 'ยังไม่บรรจุ' ||
+                  props.row.Status == 'สละสิทธิ์'
+                "
+              >
+                -
+              </div>
+              <div v-else>
+                {{ mixin.date2Thai(col.value) }}
+              </div>
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <!-- btn if else -->
+          <q-td auto-width>
+            <div
+              v-if="
+                props.row.Status === 'บรรจุเเล้ว' ||
+                props.row.Status === 'สละสิทธิ์'
+              "
+            >
+              <div></div>
+            </div>
+            <div v-else-if="props.row.Status === 'ขอผ่อนผัน'">
+              <q-btn
+                color="blue"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-information-outline"
+                @click="editDetail(props.row, 'waitInfo')"
+              />
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')"
+              />
+            </div>
+            <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
+              <q-btn
+                color="blue"
+                flat
+                dense
+                round
+                size="14px"
+                :icon="isNewModel ? 'mdi-information-outline' : 'mdi-account-alert'" 
+                @click="editDetail(props.row, 'wait',props.row.position)"
+              />
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')"
+              />
+            </div>
+            <div v-else align="right">
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')"
+              />
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
 
-                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                          <div @click="openAppointModal">
-                            <q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
-                              <template v-slot:prepend>
-                                <q-icon name="bookmark" color="primary" />
-                              </template>
-                            </q-input>
-                          </div>
-                        </div>
-                        <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
-                        <div v-else>
-                          {{ props.row.examResult }}
-                          <p>{{ col.value }}</p>
-                        </div>
-                      </div>
-                      <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
-                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                          <datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
-                            v-model="props.row.ReportingDate">
-                            <template #year="{ year }">
-                              {{ year + 543 }}
-                            </template>
-                            <template #year-overlay-value="{ value }">
-                              {{ parseInt(value + 543) }}
-                            </template>
-                            <template #trigger>
-                              <q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
-                                <template v-slot:prepend>
-                                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                                  </q-icon>
-                                </template>
-                              </q-input>
-                            </template>
-                          </datepicker>
-                        </div>
-                        <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
-                        <div v-else>
-                          {{ mixin.date2Thai(col.value) }}
-                        </div>
-                      </div>
-                      <div v-else class="table_ellipsis">
-                        {{ col.value }}
-                      </div>
-                    </q-td>
-                    <q-td auto-width>
-                      <div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
-                        <div></div>
-                      </div>
-                      <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
-                        <q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
-                          @click="editDetail(props.row, 'wait')" />
-                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
-                          @click="editDetail(props.row, 'cancel')" />
-                      </div>
-                      <div v-else align="right">
-                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
-                          @click="editDetail(props.row, 'cancel')" />
-                      </div>
-                    </q-td>
-                  </q-tr>
-                </template>
-              </Table>
-            </q-form>
+  <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
 
-            <q-dialog v-model="appointModal" persistent>
-              <q-card style="width: 800px">
-                <q-form ref="myForm">
-                  <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
-                  <q-separator />
-                  <q-card-section>
+  <q-dialog v-model="appointModal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-xs">
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.Code"
+                label="รหัสส่วนราชการ"
+              />
+            </div>
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.UnitName"
+                label="ชื่อหน่วยงาน"
+              />
+            </div>
+          </div>
 
-                    <div class="row q-col-gutter-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
-                      </div>
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
-                      </div>
-                    </div>
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.PositionNo"
+                label="ตำแหน่งเลขที่"
+              />
+            </div>
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.PositionType"
+                label="ประเภทตำแหน่ง"
+              />
+            </div>
+          </div>
 
-                    <div class="row q-col-gutter-xs q-pt-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
-                      </div>
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
-                      </div>
-                    </div>
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.PositionManage"
+                label="ตำแหน่งทางการบริหาร"
+              />
+            </div>
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.PositionTypeManage"
+                label="ด้านทางบริหาร"
+              />
+            </div>
+          </div>
 
-                    <div class="row q-col-gutter-xs q-pt-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
-                      </div>
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
-                      </div>
-                    </div>
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.PositionLine"
+                label="ตำแหน่งในสายงาน"
+              />
+            </div>
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.Major"
+                label="ด้าน/สาขา"
+              />
+            </div>
+          </div>
 
-                    <div class="row q-col-gutter-xs q-pt-xs">
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
-                      </div>
-                      <div class="col">
-                        <q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
-                      </div>
-                    </div>
-
-                    <div class="row q-col-gutter-xs q-pt-xs">
-                      <div class="col-6">
-                        <q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
-                      </div>
-                    </div>
-
-                  </q-card-section>
-
-                  <q-separator />
-                  <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
-                </q-form>
-              </q-card>
-            </q-dialog>
-
-            <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose"/>
+          <div class="row q-col-gutter-xs q-pt-xs">
+            <div class="col-6">
+              <q-select
+                outlined
+                dense
+                v-model="appoint.PositionLevel"
+                label="ระดับตำแหน่ง"
+              />
+            </div>
+          </div>
+        </q-card-section>
 
+        <q-separator />
+        <DialogFooter
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+          :save="saveAppoint"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+<!-- ปุ่มขวาตาราง -->
   <q-dialog v-model="modal_right" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
         <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <DialogHeader
+          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${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 :readonly="!edit"
-              :borderless="!edit" v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`"
-              @update:modelValue="clickEditRow" type="textarea" />
-            <q-file v-if="getNumFile == 1" v-model="files" dense :label="'เลือกไฟล์เอกสารหลักฐาน'" outlined use-chips
-              multiple class="q-py-sm">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="positionMasterUserNote"
+              :label="`${'กรอกเหตุผล'}`"
+              @update:modelValue="clickEditRow"
+              type="textarea"
+            />
+            <q-file
+              v-if="getNumFile == 1"
+              v-model="files"
+              dense
+              :label="'เลือกไฟล์เอกสารหลักฐาน'"
+              outlined
+              use-chips
+              multiple
+              class="q-py-sm"
+            >
               <template v-slot:prepend>
                 <q-icon name="attach_file" color="primary" />
               </template>
@@ -627,11 +881,46 @@ const save = () => {
           </div>
         </q-card-section>
         <q-separator />
-        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit"
-          :save="modalEdit ? savePostpone : saveDisclaim" />
+        <DialogFooter
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+          :save="modalEdit ? savePostpone : saveDisclaim"
+        />
       </q-form>
     </q-card>
   </q-dialog>
+<!-- btn แสดงรายละเอียด -->
+  <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"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
+
 </template>
 
 <style lang="scss" scoped>
@@ -639,4 +928,4 @@ const save = () => {
   margin-bottom: 0;
   color: #818181;
 }
-</style>
\ No newline at end of file
+</style>