From d33cdc363b730b0bec45274326c3416ee3f4b49c Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 26 Jun 2023 10:22:53 +0700
Subject: [PATCH 1/6] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=84=20insignia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/insignia/Insignia.vue          |  2 +-
 .../components/insignia/InsigniaType.vue      |  2 +-
 .../OrderPlacement/MainOrderPlacement.vue     | 76 +++++++++----------
 3 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/modules/01_metadata/components/insignia/Insignia.vue b/src/modules/01_metadata/components/insignia/Insignia.vue
index c5db8f96f..4858afc35 100644
--- a/src/modules/01_metadata/components/insignia/Insignia.vue
+++ b/src/modules/01_metadata/components/insignia/Insignia.vue
@@ -304,7 +304,7 @@ const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
 const { manageData, changeManageColumns, getInsignia, dataInsignia } = store;
-const rows = ref<RequestItemsHistoryObject[]>(dataInsignia); //list data table
+const rows = ref<RequestItemsHistoryObject[]>(); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
 const tittleHistory = ref<string>("ประวัติแก้ไขชื่อเครื่องราชฯ"); //
diff --git a/src/modules/01_metadata/components/insignia/InsigniaType.vue b/src/modules/01_metadata/components/insignia/InsigniaType.vue
index cfeac7a8e..ce94bc177 100644
--- a/src/modules/01_metadata/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadata/components/insignia/InsigniaType.vue
@@ -206,7 +206,7 @@ const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
 const { manageData, changeManageColumns, getInsigniaType, dataInsigniaType } =
   store;
-const rows = ref<RequestItemsHistoryObject[]>(dataInsigniaType); //list data table
+const rows = ref<RequestItemsHistoryObject[]>(); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
 const tittleHistory = ref<string>("ประวัติแก้ไขลำดับชั้นเครื่องราชฯ"); //
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 101590312..909f7cfc6 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -247,7 +247,7 @@ const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 5,
 });
 
 const mixin = useCounterMixin();
@@ -350,9 +350,9 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<FormOrderPlacementMainData[]>([
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -361,39 +361,9 @@ const rows = ref<FormOrderPlacementMainData[]>([
 
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -426,7 +396,37 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {

From c837fe6d8bc1112714ede977696c8c44c5938135 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 26 Jun 2023 10:37:42 +0700
Subject: [PATCH 2/6] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20color=20pagin?=
 =?UTF-8?q?ation=20=E0=B9=83=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=20TableView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index d8d0b5a5e..28d58c8c6 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -249,7 +249,7 @@
       <template v-slot:pagination="scope">
         <q-pagination
           v-model="pagination.page"
-          color="grey-8"
+          color="primary"
           :max="scope.pagesNumber"
           :max-pages="5"
           size="sm"

From 5144effebd9442df3e7991b360ea291bb2442662 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 26 Jun 2023 16:34:41 +0700
Subject: [PATCH 3/6] =?UTF-8?q?update=20ui=20=E0=B8=A3=E0=B8=B0=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/pass/Table.vue    | 1261 ++++++++---------
 .../components/pass/TableView.vue             |    4 +-
 .../interface/request/placement.ts            |   20 +-
 3 files changed, 602 insertions(+), 683 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 139c95389..ce476e3e4 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -28,7 +28,7 @@ const positionLevelId = ref<string>();
 const date = ref<Date>(new Date());
 const expanded = ref<string[]>([]);
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const editvisible = ref<boolean>(false);
+const editvisible = ref<boolean>(true);
 const myForm = ref<QForm | null>(null);
 const positionLineId = ref<string>();
 const positionId = ref<string>();
@@ -175,9 +175,9 @@ const fetchOrganization = async (id: string) => {
 };
 const templateDetail = async () => {
   await fetchOrganization(selected.value);
-  
+
   salaryClass.value = "";
-  
+
   if (ocId.value != "") {
     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
   }
@@ -268,19 +268,19 @@ const appoint = ref<any>({
 
 const saveAppoint = () => {
   const dataAppoint = {
-    date : date.value,
+    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
+    amount: amount.value,
+    positionSalaryAmount: positionSalaryAmount.value,
+    mouthSalaryAmount: mouthSalaryAmount.value,
+    salaryClass: salaryClass.value,
+    refSelected: refSelected.value,
+    salaryRef: salaryRef.value,
   };
   console.log("save appoint===>", dataAppoint);
 };
@@ -439,8 +439,8 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "BMAOfficer",
-    align: "center",
-    label: "ข้าราชการฯ กทม.",
+    align: "left",
+    label: "สถานภาพ",
     sortable: true,
     field: "BMAOfficer",
     headerStyle: "font-size: 14px",
@@ -471,7 +471,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "-", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "สละสิทธิ์",
     checkList: null,
     address:
@@ -505,7 +505,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: false,
+    BMAOfficer: "บุคคลภายนอก",
     Status: "ยังไม่บรรจุ",
     checkList: null,
     address:
@@ -539,7 +539,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างชั่วคราว",
     Status: "ยังไม่บรรจุ",
     checkList: null,
     address:
@@ -574,7 +574,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.1)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างประจำ",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -609,7 +609,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.2)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -643,7 +643,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.3)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "บุคคลภายนอก",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -677,7 +677,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.4)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "บรรจุเเล้ว",
     checkList: null,
     address:
@@ -711,7 +711,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.4)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างชั่วคราว",
     Status: "ขอผ่อนผัน",
     checkList: null,
     address:
@@ -968,9 +968,9 @@ const refOptionsFilter = ref<DataOption[]>([
 ]);
 const itemtest = ref<object>({});
 
-const clickCancel = async () => {
-  editvisible.value = false;
-};
+// const clickCancel = async () => {
+//   editvisible.value = false;
+// };
 
 const openAppointModal = (value: any) => {
   appointModal.value = true;
@@ -1131,675 +1131,594 @@ const listKeyId = (data: any) => {
       :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>
+        v-model:editvisible="editvisible"
+        :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 }}
-              <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 }}
-                  </div>
-                </div>
-              </div>
-            </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.UnitGroup }}
-                <p>{{ col.value }}</p>
-              </div>
-            </div>
-            <div
-              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
-              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="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                <datepicker
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                  v-model="props.row.ReportingDate"
+              <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 }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+                <div
+                  v-if="props.row.Status == 'ยังไม่บรรจุ' ||
+                    props.row.Status == 'สละสิทธิ์'
+                    "
                 >
-                  <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>
+                  {{ props.row.UnitGroup }}
+                  <p>{{ col.value }}</p>
+                </div>
               </div>
               <div
-                v-else-if="
-                  props.row.Status == 'ยังไม่บรรจุ' ||
-                  props.row.Status == 'สละสิทธิ์'
-                "
+                v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+                class="table_ellipsis"
               >
-                -
-              </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 === 'ขอผ่อนผัน'">
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <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="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>
+                v-if="props.row.Status !== 'สละสิทธิ์' &&
+                  props.row.Status !== 'บรรจุเเล้ว'
+                  "
+                icon="density_medium"
+                size="xs"
+              >
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list style="min-width: 100px">
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                      clickable
+                      v-close-popup
+                      @click="openAppointModal"
+                    >
+                      <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row, 'wait')"
+                    >
+                      <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>ข้อมูลการผ่อนผัน</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>สละสิทธิ์</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 }}
+    <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>
-
-                          <!--แสดง Total Count PositionNum-->
-                          <q-badge
-                            rounded
-                            color="grey-2"
-                            text-color="dark"
-                            :label="prop.node.totalPositionCount"
+                          <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%"
                           />
-                          <q-badge
-                            v-if="prop.node.totalPositionVacant > 0"
-                            rounded
-                            color="red"
-                            outline
-                            :label="prop.node.totalPositionVacant"
+                          <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 />
-                        </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 = listKeyId(prop)"
-                        active-class="my-list-link text-primary text-weight-medium"
-                        class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                      >
-                        <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"
+                        </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"
                         >
-                          ว่าง
-                        </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>
+                          <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>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                      </div>
+                      <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-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionPathSideId"
+                          :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="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-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionLevelId"
+                          :label="`${'ระดับ'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6"></div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="amount"
+                          :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                          :label="`${'เงินเดือน'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="positionSalaryAmount"
+                          :rules="[
+                            (val: string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                          ]"
+                          :label="`${'เงินประจำตำแหน่ง'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <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 class="col-xs-12 col-sm-12 col-md-12">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="salaryClass"
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                          ]"
+                          :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                          @update:modelValue="clickEditRow"
+                          hide-bottom-space
+                          autogrow
+                        >
+                          <template v-slot:append>
+                            <q-btn
+                              color="info"
+                              flat
+                              dense
+                              round
+                              size="14px"
+                              icon="mdi-plus"
+                              @click="templateDetail"
+                              :disable="!edit"
+                            />
+                          </template>
+                        </q-input>
+                      </div>
 
-                        <q-space />
-                      </q-item>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
+                      <div class="row col-xs-12 col-sm-12 col-md-12">
+                        <selector
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="refSelected"
+                          :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                          @update:modelValue="clickEditRowRef"
+                          option-label="name"
+                          :options="refOptions"
+                          option-value="id"
+                          hide-bottom-space
+                          use-input
+                          input-debounce="0"
+                          @filter="(inputValue: any,
+                            doneFn: Function) => filterSelector(inputValue, doneFn, '8'
+                            )"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-12 col-md-12">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="salaryRef"
+                          :rules="[
+                            (val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                          ]"
+                          :label="`${'เอกสารอ้างอิง'}`"
+                          @update:modelValue="clickEditRow"
+                          type="textarea"
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
+                  </q-scroll-area>
+                </q-card>
+              </div>
             </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>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <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-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionPathSideId"
-                        :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="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-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionLevelId"
-                        :label="`${'ระดับ'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6"></div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <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 class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryClass"
-                        :rules="[
-                          (val:string) =>
-                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                        ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
+          </q-card-section>
 
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                        ]"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
+          <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" />
+
+    <q-dialog v-model="modal_right" persistent>
+      <q-card style="width: 800px">
+        <q-form ref="myForm">
+          <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+          <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"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
             </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" />
-
-  <q-dialog v-model="modal_right" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <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"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-          :save="modalEdit ? savePostpone : saveDisclaim"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
+          </q-card-section>
+          <q-separator />
+          <DialogFooter
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+            :save="modalEdit ? savePostpone : saveDisclaim"
+          />
+        </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">
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index 79e3c0d1a..c07f87d36 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm" v-if="nornmalData == false">
-      <q-btn
+          <!-- <q-btn
         size="12px"
         v-if="!editvisible"
         flat
@@ -36,7 +36,7 @@
         >
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
-      </div>
+      </div> -->
 
       <q-space />
       <div class="items-center" style="display: flex">
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index 199265b2a..541e5ccb7 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -9,7 +9,7 @@ interface TableName {
   UnitGroup: string;
   Unit: string;
   ReportingDate: string; //วันที่รายงานตัว
-  BMAOfficer: boolean;
+  BMAOfficer: string;
   Status: string;
   checkList: any;
   address: string;
@@ -20,15 +20,15 @@ interface TableName {
   number: number;
   examCount: number;
   scoreResult: {
-      scoreAFull:number
-      scoreA: number;
-      scoreBFull: number;
-      scoreB: number;
-      scoreCFull: number;
-      scoreC: number;
-      scoreSumFull: number;
-      scoreSum: number;
-      examResult: string;
+    scoreAFull: number;
+    scoreA: number;
+    scoreBFull: number;
+    scoreB: number;
+    scoreCFull: number;
+    scoreC: number;
+    scoreSumFull: number;
+    scoreSum: number;
+    examResult: string;
   };
 } 
 

From cf0ada2c6729a3560bbe7d79921acf5a6f12a7c4 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 27 Jun 2023 13:43:38 +0700
Subject: [PATCH 4/6] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css?=
 =?UTF-8?q?=20drawer,=20=E0=B8=A3=E0=B8=B0=E0=B8=9A=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

---
 src/components/TableHistory.vue               |   3 +-
 src/components/TableView.vue                  |   3 +-
 src/interface/request/main/main.ts            |   8 +-
 .../OrderPlacement/MainOrderPlacement.vue     | 349 +++++++++---------
 .../components/exams_other/Main.vue           |   2 +-
 .../components/exams_sorkorcho/Main.vue       | 124 +++----
 .../05_placement/components/pass/Detail.vue   |   9 +-
 .../05_placement/components/pass/Table.vue    |  22 +-
 src/views/MainLayout.vue                      |  21 +-
 9 files changed, 275 insertions(+), 266 deletions(-)

diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 1ecbeaa30..ad631ec58 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -106,7 +106,8 @@
             <template v-slot:pagination="scope">
               <q-pagination
                 v-model="pagination.page"
-                color="grey-8"
+                active-color="primary"
+                color="dark"
                 :max="scope.pagesNumber"
                 :max-pages="5"
                 size="sm"
diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index 28d58c8c6..cedd2a9e9 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -249,7 +249,8 @@
       <template v-slot:pagination="scope">
         <q-pagination
           v-model="pagination.page"
-          color="primary"
+          active-color="primary"
+          color="dark"
           :max="scope.pagesNumber"
           :max-pages="5"
           size="sm"
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 5257be006..452a53402 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -195,16 +195,16 @@ const menuList = readonly<any[]>([
   },
   {
     key: 7,
-    icon: "mdi-home-variant-outline",
-    activeIcon: "mdi-home-variant",
+    icon: "mdi-account-cancel-outline",
+    activeIcon: "mdi-account-cancel",
     label: "พ้นจากราชการ",
     path: "retirement",
     role: "retirement",
   },
   {
     key: 8,
-    icon: "mdi-home-variant-outline",
-    activeIcon: "mdi-home-variant",
+    icon: "mdi-medal-outline",
+    activeIcon: "mdi-medal",
     label: "เครื่องราชอิสริยาภรณ์",
     path: "insignia",
     role: "insignia",
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 909f7cfc6..0e73ffaa1 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="toptitle text-dark col-12 row items-center">ออกคำสั่งบรรจุ</div>
+  <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="row q-pa-md">
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-select
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-md">
+        <div class="row col-12 q-col-gutter-sm">
+            <q-select 
+            class="col-xs-10 col-sm-3 col-md-2"
             v-model="fiscalyear"
             label="ปีงบประมาณ"
             dense
@@ -21,21 +22,21 @@
             :hide-dropdown-icon="false"
             @update:model-value="searchfiscalyear"
           />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-6">
-          <q-btn
-            size="12px"
-            flat
-            round
-            color="add"
-            @click="clickAdd"
-            icon="mdi-plus"
-          >
-            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-          </q-btn>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
+          <div>
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              @click="clickAdd"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+          <q-space />
           <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
             standout
             dense
             v-model="filterKeyword"
@@ -43,7 +44,6 @@
             outlined
             debounce="300"
             placeholder="ค้นหา"
-            class="q-ml-sm"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -55,9 +55,8 @@
               />
             </template>
           </q-input>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
           <q-select
+            class="col-xs-12 col-sm-3 col-md-2"
             v-model="visibleColumns"
             multiple
             outlined
@@ -70,162 +69,160 @@
             option-value="name"
             options-cover
             style="min-width: 150px"
-            class="gt-xs q-ml-sm"
           />
         </div>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-card bordered class="col-12 filter-card">
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
-              <q-select
-                v-model="OrderType"
-                label="ประเภท"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderTypeOption"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
-              <q-select
-                v-model="OrderStatus"
-                label="สถานะ"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderStatusOption"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-            </div>
-          </div>
-        </q-card>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="UpdataData"
-          :filter="filterKeyword"
-          row-key="Order"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
-          <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">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td
-                key="Order"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.Order }}
-              </q-td>
-              <q-td
-                key="OrderNum"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderNum }}
-              </q-td>
-              <q-td
-                key="OrderDate"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderDate }}
-              </q-td>
-              <q-td
-                key="OrderBy"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderBy }}
-              </q-td>
-              <q-td
-                key="Signer"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.Signer }}
-              </q-td>
-              <q-td
-                key="OrderStatus"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                <q-icon
-                  v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
-                  name="hourglass_top"
-                  color="orange"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </q-td>
-
-              <q-td auto-width>
-                <q-btn
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+                <q-select
+                  class="col-xs-12 col-sm-3 col-md-2"
+                  v-model="OrderType"
+                  label="ประเภท"
                   dense
-                  size="12px"
-                  flat
-                  round
-                  color="red"
-                  @click="clickDelete(props.row.id)"
-                  icon="mdi-delete"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderTypeOption"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                />
+                <q-select
+                  class="col-xs-12 col-sm-3 col-md-2"
+                  v-model="OrderStatus"
+                  label="สถานะ"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderStatusOption"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                />
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="UpdataData"
+            :filter="filterKeyword"
+            row-key="Order"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <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">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  key="Order"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
                 >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td
+                  key="OrderNum"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td
+                  key="OrderDate"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderDate }}
+                </q-td>
+                <q-td
+                  key="OrderBy"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderBy }}
+                </q-td>
+                <q-td
+                  key="Signer"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.Signer }}
+                </q-td>
+                <q-td
+                  key="OrderStatus"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  <q-icon
+                    v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
+                    name="mdi-timer-sand"
+                    color="orange"
+                    class="text-h6"
+                  />
+                  <q-icon
+                    v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
+                    name="mdi-check"
+                    color="positive"
+                    class="text-h6"
+                  />
+                </q-td>
+
+                <q-td auto-width>
+                  <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>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
       </div>
     </q-card>
   </div>
@@ -324,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "OrderStatus",
-    align: "left",
+    align: "center",
     label: "สถานะคำสั่ง",
     sortable: false,
     field: "OrderStatus",
@@ -698,7 +695,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #ededed;
+  background-color: #f1f1f1b0;
 }
 
 .toggle-expired-account {
diff --git a/src/modules/05_placement/components/exams_other/Main.vue b/src/modules/05_placement/components/exams_other/Main.vue
index d1627d0e8..5abffee7e 100644
--- a/src/modules/05_placement/components/exams_other/Main.vue
+++ b/src/modules/05_placement/components/exams_other/Main.vue
@@ -373,7 +373,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #EDEDED;
+  background-color: #f1f1f1b0;
 }
 
 .toggle-expired-account {
diff --git a/src/modules/05_placement/components/exams_sorkorcho/Main.vue b/src/modules/05_placement/components/exams_sorkorcho/Main.vue
index c4a78ea29..ea93fa279 100644
--- a/src/modules/05_placement/components/exams_sorkorcho/Main.vue
+++ b/src/modules/05_placement/components/exams_sorkorcho/Main.vue
@@ -293,88 +293,74 @@ const paginationLabel = (start: string, end: string, total: string) => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสอบแข่งขัน / คัดเลือก
   </div>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="row q-pa-md">
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-select v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
-            option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-            :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <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" v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
+              option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
+              :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
+            <q-space />
+            <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา">
+              <template v-slot:append>
+                <q-icon v-if="filterKeyword == ''" name="search" />
+                <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+              </template>
+            </q-input>
+            <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+              emit-value map-options :options="columns" option-value="name" options-cover />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-6"></div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-input standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-            class="q-ml-sm">
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-            </template>
-          </q-input>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="gt-xs q-ml-sm" />
-        </div>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-card bordered class="col-12 filter-card">
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
-              <q-select v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
                 option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
                 :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
-              <q-select v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
                 :options="examTypeOP" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
                 :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md-3">
-              <q-toggle v-model="expiredAccount" class="toggle-expired-account" color="blue" label="แสดงบัญชีหมดอายุ"
+              <q-toggle class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account" v-model="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ"
                 @update:model-value="searchFilterTable" />
             </div>
-          </div>
-        </q-card>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-table ref="table" :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">
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
-              <q-td key="id" :props="props">
-                {{ props.row.id }}
-              </q-td>
-              <q-td key="examRound" :props="props">
-                {{ props.row.examRound }}
-              </q-td>
-              <q-td key="examOrder" :props="props">
-                {{ props.row.examOrder }}
-              </q-td>
-              <q-td key="fiscalYear" :props="props">
-                {{ props.row.fiscalYear + 543 }}
-              </q-td>
-              <q-td key="numberofCandidates" :props="props">
-                {{ props.row.numberofCandidates }}
-              </q-td>
-              <q-td key="examType" :props="props">
-                {{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
-              </q-td>
-              <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
-              </q-td>
-            </q-tr>
-          </template>
-        </q-table>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table ref="table" :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">
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
+                <q-td key="id" :props="props">
+                  {{ props.row.id }}
+                </q-td>
+                <q-td key="examRound" :props="props">
+                  {{ props.row.examRound }}
+                </q-td>
+                <q-td key="examOrder" :props="props">
+                  {{ props.row.examOrder }}
+                </q-td>
+                <q-td key="fiscalYear" :props="props">
+                  {{ props.row.fiscalYear + 543 }}
+                </q-td>
+                <q-td key="numberofCandidates" :props="props">
+                  {{ props.row.numberofCandidates }}
+                </q-td>
+                <q-td key="examType" :props="props">
+                  {{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
+                </q-td>
+                <q-td key="accountExpirationDate" :props="props">
+                  {{ textDate(props.row.accountExpirationDate) }}
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </div>
       </div>
     </q-card>
-  </div>
 </template>
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #EDEDED;
+  background-color: #f1f1f1b0;
 }
 
 .toggle-expired-account {
diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index 9db3af52b..122a1e035 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -56,14 +56,13 @@ const AddTablePosition = defineAsyncComponent(
       <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
       รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
     </div>
-    <q-space />
 
-    <div class="q-py-md row col-12">  
+    <q-card bordered class="q-py-sm row col-12">  
       <div class="col-12 row bg-white">
-        <div class="fit q-pa-md">
+        <div class="fit q-px-md q-py-sm">
           <div class="row col-12 q-col-gutter-md fit">
             <div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
-              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
+              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm">
                 <div class="col-12 row items-center q-pa-sm">
                   <div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
                     {{ item.num }}
@@ -77,7 +76,7 @@ const AddTablePosition = defineAsyncComponent(
           </div>
         </div>
       </div>
-    </div>
+    </q-card>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index ce476e3e4..87f3ce1b4 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1201,17 +1201,24 @@ const listKeyId = (data: any) => {
                 v-if="props.row.Status !== 'สละสิทธิ์' &&
                   props.row.Status !== 'บรรจุเเล้ว'
                   "
-                icon="density_medium"
-                size="xs"
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
+                flat
+                round
+                dense
               >
                 <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list style="min-width: 100px">
+                  <q-list dense style="min-width: 100px">
                     <q-item
                       v-if="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 />
@@ -1221,6 +1228,9 @@ const listKeyId = (data: any) => {
                       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
@@ -1229,6 +1239,9 @@ const listKeyId = (data: any) => {
                       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 />
@@ -1240,6 +1253,9 @@ const listKeyId = (data: any) => {
                       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>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 224ec4a5b..4dc33cbde 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -723,6 +723,7 @@ if (keycloak.tokenParsed != null) {
                       dense-toggle
                       :label="subMenu.label"
                       v-if="subMenu.key !== 5.1"
+                      class="expan2"
                       dense
                     >
                       <q-item
@@ -891,17 +892,20 @@ if (keycloak.tokenParsed != null) {
 </template>
 
 <style>
+.menuSub .q-item__section--avatar, .menu .q-item__section--avatar{
+  min-width: 0px;
+}
 .menu {
   padding-bottom: 5px;
   padding-top: 5px;
   border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+  margin-right: 2%;
 }
 
 .menuActive {
   background: #212a2f;
   border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+  margin-right: 2%;
 }
 
 .menuActiveMini {
@@ -909,17 +913,22 @@ if (keycloak.tokenParsed != null) {
 }
 .menuSub .q-item {
   border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+  margin-right: 2%;
+}
+.expan2 .q-item {
+  padding-left: 10%;
 }
-
 /* .menuSubAct {
   background: #1e2529d9;
 } */
-
-.menuSubHover {
+.expan2 .menuSubHover{
   padding-left: 30%;
   border-radius: 20px;
 }
+.menuSubHover{
+  padding-left: 25%;
+  border-radius: 20px;
+}
 .menuSub .q-expansion-item__content {
   background: #212a2f;
   padding: 5px 0px;

From dcf724d41d50dddbf60af18c340fe2f3a2c0a6c7 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 28 Jun 2023 09:40:33 +0700
Subject: [PATCH 5/6] =?UTF-8?q?update=20ui=20=E0=B8=9A=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=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/Table.vue    | 1085 ++++++++---------
 .../components/pass/TableView.vue             |   39 +-
 2 files changed, 543 insertions(+), 581 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index ce476e3e4..ed0613925 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -32,7 +32,7 @@ const editvisible = ref<boolean>(true);
 const myForm = ref<QForm | null>(null);
 const positionLineId = ref<string>();
 const positionId = ref<string>();
-const edit = ref<boolean>(false);
+const edit = ref<boolean>(true);
 const positionTypeId = ref<string>();
 const visibleColumns = ref<String[]>([]);
 const store = usePlacementDataStore();
@@ -67,7 +67,7 @@ const positionTypeOptionsFilter = ref<DataOption[]>([]);
 const positionLevelOptionsFilter = ref<DataOption[]>([]);
 const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
 const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, messageError, showLoader, hideLoader } =
   mixin;
 const files = ref<File[]>([]);
 
@@ -310,17 +310,17 @@ const getClass = (val: boolean) => {
 };
 const selectData = (props: TableName) => {
   itemtest.value = props;
-  if (editvisible.value == true) {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = false;
-    edit.value = true;
-  } else {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = true;
-    edit.value = true;
-  }
+  // if (editvisible.value == true) {
+  // editRow.value = false;
+  // modalEdit.value = true;
+  // modal.value = false;
+  // edit.value = true;
+  // } else {
+  //   editRow.value = false;
+  //   modalEdit.value = true;
+  modal.value = true;
+  //   edit.value = true;
+  // }
 };
 const onSelected = async (id: string) => {
   await fetchPositionNumber(id);
@@ -375,15 +375,15 @@ const editDetail = (
 };
 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"]>([
   {
@@ -1123,554 +1123,553 @@ const listKeyId = (data: any) => {
 };
 </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"
-        :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"
+          :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 == '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-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 }}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+                <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-if="props.row.Status == 'ยังไม่บรรจุ' ||
-                    props.row.Status == 'สละสิทธิ์'
-                    "
+                  v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+                  class="table_ellipsis"
                 >
-                  -
+                  {{ mixin.date2Thai(col.value) }}
                 </div>
-                <div v-else>
-                  {{ props.row.UnitGroup }}
-                  <p>{{ col.value }}</p>
+                <div v-else class="table_ellipsis">
+                  {{ col.value }}
                 </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="density_medium"
-                size="xs"
-              >
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list style="min-width: 100px">
-                    <q-item
-                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
-                      clickable
-                      v-close-popup
-                      @click="openAppointModal"
-                    >
-                      <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
-                    </q-item>
-                    <q-separator />
-                    <q-item
-                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row, 'wait')"
-                    >
-                      <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>ข้อมูลการผ่อนผัน</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>สละสิทธิ์</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </q-form>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  v-if="props.row.Status !== 'สละสิทธิ์' &&
+                    props.row.Status !== 'บรรจุเเล้ว'
+                    "
+                  icon="density_medium"
+                  size="xs"
+                >
+                  <q-menu transition-show="jump-down" transition-hide="jump-up">
+                    <q-list style="min-width: 100px">
+                      <q-item
+                        v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                        clickable
+                        v-close-popup
+                        @click="openAppointModal"
+                      >
+                        <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                      </q-item>
+                      <q-separator />
+                      <q-item
+                        v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                        clickable
+                        v-close-popup
+                        @click="editDetail(props.row, 'wait')"
+                      >
+                        <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>ข้อมูลการผ่อนผัน</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>สละสิทธิ์</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 }}
+      <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>
-
-                            <!--แสดง 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 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>
-                        </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 == `ว่าง` ||
+                        </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
+                            <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"
                             >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  :style="edit
+                              ว่าง
+                            </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>
-                              </template>
-                            </q-input>
-                          </template>
-                        </datepicker>
-                      </div>
-                      <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-input
-                          disable
-                          readonly
-                          class="custom-input"
-                          standout
-                          dense
-                          lazy-rules
-                          v-model="positionPathSideId"
-                          :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="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-input
-                          disable
-                          readonly
-                          class="custom-input"
-                          standout
-                          dense
-                          lazy-rules
-                          v-model="positionLevelId"
-                          :label="`${'ระดับ'}`"
-                        />
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6"></div>
-                      <div class="col-xs-4 col-sm-4 col-md-4">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="amount"
-                          :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                          :label="`${'เงินเดือน'}`"
-                          @update:modelValue="clickEditRow"
-                          type="number"
-                          hide-bottom-space
-                        />
-                      </div>
-                      <div class="col-xs-4 col-sm-4 col-md-4">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="positionSalaryAmount"
-                          :rules="[
-                            (val: string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                          ]"
-                          :label="`${'เงินประจำตำแหน่ง'}`"
-                          @update:modelValue="clickEditRow"
-                          type="number"
-                          hide-bottom-space
-                        />
-                      </div>
-                      <div class="col-xs-4 col-sm-4 col-md-4">
-                        <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 class="col-xs-12 col-sm-12 col-md-12">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="salaryClass"
-                          :rules="[
-                            (val: string) =>
-                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                          ]"
-                          :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                          @update:modelValue="clickEditRow"
-                          hide-bottom-space
-                          autogrow
-                        >
-                          <template v-slot:append>
-                            <q-btn
-                              color="info"
-                              flat
-                              dense
-                              round
-                              size="14px"
-                              icon="mdi-plus"
-                              @click="templateDetail"
-                              :disable="!edit"
-                            />
-                          </template>
-                        </q-input>
-                      </div>
+                                      "
+                                  >
+                                  </q-icon>
+                                </template>
+                              </q-input>
+                            </template>
+                          </datepicker>
+                        </div>
+                        <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-input
+                            disable
+                            readonly
+                            class="custom-input"
+                            standout
+                            dense
+                            lazy-rules
+                            v-model="positionPathSideId"
+                            :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="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-input
+                            disable
+                            readonly
+                            class="custom-input"
+                            standout
+                            dense
+                            lazy-rules
+                            v-model="positionLevelId"
+                            :label="`${'ระดับ'}`"
+                          />
+                        </div>
+                        <div class="col-xs-6 col-sm-6 col-md-6"></div>
+                        <div class="col-xs-4 col-sm-4 col-md-4">
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :readonly="!edit"
+                            :borderless="!edit"
+                            v-model="amount"
+                            :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                            :label="`${'เงินเดือน'}`"
+                            @update:modelValue="clickEditRow"
+                            type="number"
+                            hide-bottom-space
+                          />
+                        </div>
+                        <div class="col-xs-4 col-sm-4 col-md-4">
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :readonly="!edit"
+                            :borderless="!edit"
+                            v-model="positionSalaryAmount"
+                            :rules="[
+                              (val: string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                            ]"
+                            :label="`${'เงินประจำตำแหน่ง'}`"
+                            @update:modelValue="clickEditRow"
+                            type="number"
+                            hide-bottom-space
+                          />
+                        </div>
+                        <div class="col-xs-4 col-sm-4 col-md-4">
+                          <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 class="col-xs-12 col-sm-12 col-md-12">
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :readonly="!edit"
+                            :borderless="!edit"
+                            v-model="salaryClass"
+                            :rules="[
+                              (val: string) =>
+                                !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                            ]"
+                            :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                            @update:modelValue="clickEditRow"
+                            hide-bottom-space
+                            autogrow
+                          >
+                            <template v-slot:append>
+                              <q-btn
+                                color="info"
+                                flat
+                                dense
+                                round
+                                size="14px"
+                                icon="mdi-plus"
+                                @click="templateDetail"
+                                :disable="!edit"
+                              />
+                            </template>
+                          </q-input>
+                        </div>
 
-                      <div class="row col-xs-12 col-sm-12 col-md-12">
-                        <selector
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="refSelected"
-                          :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
-                          @update:modelValue="clickEditRowRef"
-                          option-label="name"
-                          :options="refOptions"
-                          option-value="id"
-                          hide-bottom-space
-                          use-input
-                          input-debounce="0"
-                          @filter="(inputValue: any,
-                            doneFn: Function) => filterSelector(inputValue, doneFn, '8'
-                            )"
-                        />
+                        <div class="row col-xs-12 col-sm-12 col-md-12">
+                          <selector
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :readonly="!edit"
+                            :borderless="!edit"
+                            v-model="refSelected"
+                            :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                            @update:modelValue="clickEditRowRef"
+                            option-label="name"
+                            :options="refOptions"
+                            option-value="id"
+                            hide-bottom-space
+                            use-input
+                            input-debounce="0"
+                            @filter="(inputValue: any,
+                              doneFn: Function) => filterSelector(inputValue, doneFn, '8'
+                              )"
+                          />
+                        </div>
+                        <div class="col-xs-12 col-sm-12 col-md-12">
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :readonly="!edit"
+                            :borderless="!edit"
+                            v-model="salaryRef"
+                            :rules="[
+                              (val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                            ]"
+                            :label="`${'เอกสารอ้างอิง'}`"
+                            @update:modelValue="clickEditRow"
+                            type="textarea"
+                            hide-bottom-space
+                          />
+                        </div>
                       </div>
-                      <div class="col-xs-12 col-sm-12 col-md-12">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="salaryRef"
-                          :rules="[
-                            (val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                          ]"
-                          :label="`${'เอกสารอ้างอิง'}`"
-                          @update:modelValue="clickEditRow"
-                          type="textarea"
-                          hide-bottom-space
-                        />
-                      </div>
-                    </div>
-                  </q-scroll-area>
-                </q-card>
+                    </q-scroll-area>
+                  </q-card>
+                </div>
               </div>
-            </div>
-          </q-card-section>
+            </q-card-section>
 
-          <q-separator />
-          <DialogFooter
-            v-model:editvisible="edit"
-            v-model:modalEdit="modalEdit"
-            :save="saveAppoint"
-          />
-        </q-form>
-      </q-card>
-    </q-dialog>
+            <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" />
+      <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
 
-    <q-dialog v-model="modal_right" persistent>
-      <q-card style="width: 800px">
-        <q-form ref="myForm">
-          <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+      <q-dialog v-model="modal_right" persistent>
+        <q-card style="width: 800px">
+                  <q-form ref="myForm">
           <DialogHeader
             :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
             :close="clickClose"
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index c07f87d36..55d7b1a30 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,43 +1,6 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
-          <!-- <q-btn
-        size="12px"
-        v-if="!editvisible"
-        flat
-        round
-        :disabled="editvisible"
-        :color="editvisible ? 'grey-7' : 'primary'"
-        @click="clickEdit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="editvisible"
-        :disabled="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'red'"
-        @click="clickCancel"
-        icon="mdi-undo"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
-      <div class="q-px-sm">
-        <q-btn
-          flat
-          round
-          :disabled="editvisible == false"
-          :color="editvisible == false ? 'grey-7' : 'public'"
-          @click="add"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </div> -->
-
+      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
       <q-space />
       <div class="items-center" style="display: flex">
         <div

From c05505071f9fd3b615122018a25e6be336a78b9f Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 28 Jun 2023 10:19:11 +0700
Subject: [PATCH 6/6] =?UTF-8?q?update=20popup=20=E0=B8=9A=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/pass/Table.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 7ca77e190..afa581879 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -310,17 +310,7 @@ const getClass = (val: boolean) => {
 };
 const selectData = (props: TableName) => {
   itemtest.value = props;
-  if (editvisible.value == true) {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = false;
-    edit.value = true;
-  } else {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = true;
-    edit.value = true;
-  }
+  modal.value = true;
 };
 const onSelected = async (id: string) => {
   await fetchPositionNumber(id);