From 1c573748682d9962e3c4881f29f33c6df6df685a Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 19 Sep 2023 17:42:17 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD-?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B2=E0=B8=A1=E0=B8=AA=E0=B8=81=E0=B8=B8=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/MainTreeEmployee.vue                |    2 +-
 .../components/Discharged/dischargedMain.vue  |    4 +-
 .../components/DismissOrder/DismissOrder.vue  |    4 +-
 .../components/ExitInterview/exitMain.vue     |   27 +
 .../components/Expulsion/expulsionMain.vue    |    4 +-
 .../components/resign/Deceased.vue            |   24 +-
 .../components/resign/DetailByidDeceased.vue  |   79 +-
 .../components/resign/DetailDeceased.vue      |  165 +-
 .../components/resign/Resign.vue              |   48 +-
 .../components/resign/ResignByid.vue          |  119 +-
 .../components/resign/ResignOrder.vue         | 1438 ++++++++---------
 .../interface/response/exitInterview.ts       |    1 +
 12 files changed, 833 insertions(+), 1082 deletions(-)

diff --git a/src/modules/02_organizational/views/MainTreeEmployee.vue b/src/modules/02_organizational/views/MainTreeEmployee.vue
index 67b2cdab7..a45c1a3ea 100644
--- a/src/modules/02_organizational/views/MainTreeEmployee.vue
+++ b/src/modules/02_organizational/views/MainTreeEmployee.vue
@@ -970,6 +970,7 @@ onMounted(async () => {
   await fetchOrganizationAgencyCode();
   await fetchPosition();
   await fetchData();
+  await nodeTree();
 });
 
 const onSelected = async (id: string) => {
@@ -1647,7 +1648,6 @@ const clickAdd = async () => {
   isActive.value = false;
   isCondition.value = false;
   conditionNote.value = "";
-  await nodeTree();
 };
 
 /**เมื่อเลือกใหม่
diff --git a/src/modules/06_retirement/components/Discharged/dischargedMain.vue b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
index f307bfc5a..56507f4c7 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedMain.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
@@ -231,9 +231,7 @@ const getData = async () => {
           salary: r.salary ? r.salary : 0,
           status: r.status ?? "",
           statustext: statusText(r.status ?? ""),
-          fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${
-            r.lastName ?? ""
-          }`,
+          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
         });
       });
       rows.value = list;
diff --git a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
index faa59df51..d9a8e1330 100644
--- a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
@@ -221,9 +221,7 @@ const getData = async () => {
           salary: r.salary ? r.salary : 0,
           status: r.status ?? "",
           statustext: statusText(r.status ?? ""),
-          fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${
-            r.lastName ?? ""
-          }`,
+          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
         });
       });
       rows.value = list;
diff --git a/src/modules/06_retirement/components/ExitInterview/exitMain.vue b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
index a1bd4991b..2a927a9e7 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitMain.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
@@ -41,6 +41,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "realReason",
     align: "left",
@@ -148,6 +159,7 @@ onMounted(async () => {
   }
 });
 
+//นำข้อมูลจาก API มาแสดง
 const fecthlist = async () => {
   showLoader();
   await http
@@ -158,6 +170,7 @@ const fecthlist = async () => {
       data.map((r: ResponseItems) => {
         list.push({
           datetext: r.createdAt !== null ? date2Thai(r.createdAt) : "-",
+          fullname: r.fullname ?? "",
           createdAt: new Date(r.createdAt),
           futureWork: !!r.futureWork,
           futureWorkReason: r.futureWorkReason ?? "",
@@ -184,6 +197,8 @@ const fecthlist = async () => {
       hideLoader();
     });
 };
+
+//เซฟเพื่อส่งไปออกคำสั่ง
 const saveAppoint = async () => {
   await myForm.value!.validate().then(async (result: boolean) => {
     if (result) {
@@ -218,6 +233,8 @@ const validationDate = (thaiDate: string | null) => {
     }
   }
 };
+
+//แปลงเดือนจากตัวเลขเป็นภาษาอ่าน
 const convertThaiDateToNumeric = (thaiDate: string) => {
   const parts = thaiDate.split(" ");
   if (parts.length !== 3) return null;
@@ -326,6 +343,15 @@ const openModalCalendar = (rows: any) => {
                 >
                   {{ props.rowIndex + 1 }}
                 </q-td>
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="
+                    router.push(`/exit-Interview/questionnair/${props.row.id}`)
+                  "
+                >
+                  {{ props.row.fullname }}
+                </q-td>
                 <q-td
                   key="realReason"
                   :props="props"
@@ -425,6 +451,7 @@ const openModalCalendar = (rows: any) => {
     </div>
   </q-card>
 
+  <!-- dialog กำหนดวันหนัดหมายสัมภาษณ์ -->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
index f88ce7586..cdc7e1c33 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
@@ -228,9 +228,7 @@ const getData = async () => {
           salary: r.salary ? r.salary : 0,
           status: r.status ?? "",
           statustext: statusText(r.status ?? ""),
-          fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${
-            r.lastName ?? ""
-          }`,
+          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
         });
       });
       rows.value = list;
diff --git a/src/modules/06_retirement/components/resign/Deceased.vue b/src/modules/06_retirement/components/resign/Deceased.vue
index f0cae6c40..763c15975 100644
--- a/src/modules/06_retirement/components/resign/Deceased.vue
+++ b/src/modules/06_retirement/components/resign/Deceased.vue
@@ -9,18 +9,20 @@ import config from "@/app.config";
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, success ,date2Thai} = mixin;
+const { showLoader, hideLoader, messageError, success, date2Thai } = mixin;
 
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "prefix",
+    name: "no",
     align: "left",
-    label: "คำนำหน้า",
+    label: "ลำดับ",
     sortable: true,
-    field: "prefix",
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -87,6 +89,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumns = ref<string[]>([
+  "no",
   "prefix",
   "fullname",
   "positionType",
@@ -104,17 +107,15 @@ const fectListDecased = async () => {
   await http
     .get(config.API.listDeceased())
     .then((res) => {
-      console.log(res);
       rows.value = res.data.result.map((e: any) => ({
         personalId: e.id,
-        prefix: e.prefix,
-        fullname: e.firstName + "   " + e.lastName,
+        fullname: `${e.prefix ?? ""}${e.firstName ?? ""} ${e.lastName ?? ""}`,
         positionType: e.positionType,
         position: e.positionLine,
         positionLevel: e.positionLevel,
         positionExecutive: e.positionExecutive,
         oc: e.organization,
-        createdAt:date2Thai(e.createdAt),
+        createdAt: date2Thai(e.createdAt),
       }));
     })
     .catch((e) => {
@@ -125,8 +126,6 @@ const fectListDecased = async () => {
     });
 };
 
-
-
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -219,11 +218,8 @@ const pagination = ref({
                 class="cursor-pointer"
                 @click="nextPage(props.row.personalId)"
               >
-                <!-- <q-td key="no" :props="props">
+                <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
-                </q-td> -->
-                <q-td key="prefix" :props="props">
-                  {{ props.row.prefix }}
                 </q-td>
                 <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
diff --git a/src/modules/06_retirement/components/resign/DetailByidDeceased.vue b/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
index f5ec7f42f..920e5cfda 100644
--- a/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
+++ b/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
@@ -10,7 +10,11 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
 
-import type { requestSendNoti,DataCopyOrder,ResponseOrganiz } from "@/modules/06_retirement/interface/response/Deceased";
+import type {
+  requestSendNoti,
+  DataCopyOrder,
+  ResponseOrganiz,
+} from "@/modules/06_retirement/interface/response/Deceased";
 import { useRouter, useRoute } from "vue-router";
 const router = useRouter();
 const route = useRoute();
@@ -26,14 +30,11 @@ const props = defineProps({
 });
 const profileId = ref<string>(route.params.id.toString());
 const next = () => props.next();
-const previous = () => props.previous();
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
-
-
 const myForm = ref<QForm | null>(null);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
@@ -157,23 +158,22 @@ const editRows = ref<DataCopyOrder[]>([]);
 
 onMounted(async () => {
   await getData();
-  // await getList();
 });
 
 const getList = async () => {
   showLoader();
-  await http.get(config.API.detailByidDeceased(profileId.value))
-  .then((res) => {
-    const data = res.data.result
-    console.log(data)
-  }).catch((e) => {
+  await http
+    .get(config.API.detailByidDeceased(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
       hideLoader();
     });
-
-}
+};
 const listModal = async (id: string) => {
   showLoader();
   await http
@@ -203,14 +203,12 @@ const listModal = async (id: string) => {
     });
 };
 
-
 const getData = async () => {
   showLoader();
   await http
     .get(config.API.detailByidDeceased(profileId.value))
     .then((res) => {
       const data = res.data.result;
-      //   console.log(data);
       let list: DataCopyOrder[] = [];
       data.map((r: any) => {
         let selectCopyOrder = [];
@@ -222,9 +220,9 @@ const getData = async () => {
         }
 
         list.push({
-          id:r.id,
+          id: r.id,
           personalId: r.profileId ?? "",
-          name:`${r.prefix}${r.firstName} ${r.lastName}`,
+          name: `${r.prefix}${r.firstName} ${r.lastName}`,
           idCard: r.citizenId ?? "",
           position: r.positionName ?? "",
           unit: r.organizationName ?? "-",
@@ -252,22 +250,22 @@ const getData = async () => {
 };
 
 const saveData = async () => {
-    showLoader();
-    const persons = selectedModal.value.map(item => ({ profileId: item.profileId }));
-    const dataToSend = { Persons: persons };
-    await http
-      .put(config.API.detailByidDeceased(profileId.value), dataToSend)
-      .then((res) => {
-
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        clickClose();
-        getData();
-        hideLoader();
-      });
+  showLoader();
+  const persons = selectedModal.value.map((item) => ({
+    profileId: item.profileId,
+  }));
+  const dataToSend = { Persons: persons };
+  await http
+    .put(config.API.detailByidDeceased(profileId.value), dataToSend)
+    .then((res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      clickClose();
+      getData();
+      hideLoader();
+    });
 };
 
 const resetFilter = () => {
@@ -299,11 +297,7 @@ const clickAdd = async () => {
 };
 
 const clickDelete = (id: string) => {
-  console.log(id)
-  dialogRemove(
-    $q,
-    () => deleteData(id),
-  );
+  dialogRemove($q, () => deleteData(id));
 };
 
 const nodeTree = async () => {
@@ -339,7 +333,6 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      //   hideLoader();
       await getData();
     });
 };
@@ -367,7 +360,7 @@ const fetchSaveCopyOrder = async () => {
 
   showLoader();
   await http
-    .put(config.API.notiDeceased(profileId.value), {Persons:list})
+    .put(config.API.notiDeceased(profileId.value), { Persons: list })
     .then((res: any) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
       next();
@@ -377,7 +370,7 @@ const fetchSaveCopyOrder = async () => {
     })
     .finally(() => {
       hideLoader();
-      getData()
+      getData();
     });
 };
 
@@ -387,7 +380,7 @@ const updateData = (row: DataCopyOrder) => {
 </script>
 
 <template>
-      <div class="toptitle text-dark col-12 row items-center">
+  <div class="toptitle text-dark col-12 row items-center">
     <q-btn
       icon="mdi-arrow-left"
       unelevated
@@ -510,7 +503,6 @@ const updateData = (row: DataCopyOrder) => {
                 </q-select>
               </q-td>
               <q-td auto-width>
-                
                 <q-btn
                   dense
                   size="12px"
@@ -537,7 +529,7 @@ const updateData = (row: DataCopyOrder) => {
         color="public"
         @click="saveDataCopyOrder"
         class="q-px-md"
-        >
+      >
       </q-btn>
     </div>
   </div>
@@ -625,7 +617,6 @@ const updateData = (row: DataCopyOrder) => {
               :filter="filterModal"
               row-key="profileId"
               selection="multiple"
-              
               v-model:selected="selectedModal"
             >
               <template v-slot:header-selection="scope">
diff --git a/src/modules/06_retirement/components/resign/DetailDeceased.vue b/src/modules/06_retirement/components/resign/DetailDeceased.vue
index 4141a006b..73d0db767 100644
--- a/src/modules/06_retirement/components/resign/DetailDeceased.vue
+++ b/src/modules/06_retirement/components/resign/DetailDeceased.vue
@@ -1,3 +1,89 @@
+<script setup lang="ts">
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const fullName = ref<string>("");
+const profileId = ref<string>(route.params.id.toString());
+const detail = ref<any>([]);
+
+onMounted(() => {
+  fectdata();
+});
+
+//นำข้อมูลจาก API มาแสดง
+const fectdata = async () => {
+  showLoader();
+  await http
+    .get(config.API.detailDeceased(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      detail.value = data;
+      fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+//กลับไปหน้า registry
+const redirectToRegistry = (id: string) => {
+  router.push(`/registry/${id}`);
+};
+
+//เปิดdetail ของ deceased
+const openDeceased = (id: string) => {
+  router.push(`/deceased/detail/${id}`);
+};
+
+//ไปหน้าถัดไป
+const nextPage = (page: string) => {
+  window.open(page, "_blank");
+};
+
+//downloadFile
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const fileDownload = async (type: string) => {
+  showLoader();
+  await http
+    .get(config.API.DeceasedReport(type, profileId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      downloadFile(
+        res,
+        `รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม-${fullName}.${type}`
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -146,86 +232,7 @@
     </div>
   </q-card>
 </template>
-<script setup lang="ts">
-import { useRouter, useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-const $q = useQuasar();
-const router = useRouter();
-const route = useRoute();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-const fullName = ref<string>("");
-const profileId = ref<string>(route.params.id.toString());
-const detail = ref<any>([]);
-
-onMounted(() => {
-  console.log(profileId.value);
-  fectdata();
-});
-const fectdata = async () => {
-  showLoader();
-  await http
-    .get(config.API.detailDeceased(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      detail.value = data;
-      fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
-      console.log(detail.value);
-    })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const redirectToRegistry = (id: string) => {
-  console.log(id);
-  router.push(`/registry/${id}`);
-};
-const openDeceased = (id: string) => {
-  router.push(`/deceased/detail/${id}`);
-};
-const nextPage = (page: string) => {
-  window.open(page, "_blank");
-};
-const downloadFile = (response: any, filename: string) => {
-  const link = document.createElement("a");
-  var fileName = filename;
-  link.href = window.URL.createObjectURL(new Blob([response.data]));
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-const fileDownload = async (type: string) => {
-  showLoader();
-  await http
-    .get(config.API.DeceasedReport(type, profileId.value), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      downloadFile(
-        res,
-        `รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม-${fullName}.${type}`
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index c58813040..afa888874 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -10,10 +10,11 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
 
+const RetirementData = useRetirementDataStore();
+const { statusText } = RetirementData;
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
-const RetirementData = useRetirementDataStore();
 const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
 
 const rows = ref<ResponseItems[]>([]);
@@ -157,17 +158,6 @@ const columns2 = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้า",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "fullname",
     align: "left",
@@ -250,7 +240,6 @@ const columns2 = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns2 = ref<string[]>([
   "no",
-  "prefix",
   "fullname",
   "positionTypeOld",
   "positionLevelOld",
@@ -324,8 +313,8 @@ const fecthlist = async () => {
           salary: r.salary ? r.salary : 0,
           sendDate: new Date(),
           status: r.status ?? "",
-          statustext: status(r.status ?? ""),
-          fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
         });
       });
 
@@ -340,7 +329,7 @@ const fecthlist = async () => {
     });
 };
 
-//บันทึกคำสั่ง
+//ส่งไปออกคำสั่ง
 const saveOrder = async () => {
   const id = selected.value.map((r) => r.id);
   const body = {
@@ -351,8 +340,6 @@ const saveOrder = async () => {
   await http
     .post(config.API.resignReport, body)
     .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
       success($q, "ส่งไปออกคำสั่งลาออกสำเร็จ");
       closeModal();
     })
@@ -365,28 +352,6 @@ const saveOrder = async () => {
     });
 };
 
-//แปลงข้อความ status
-const status = (val: string) => {
-  switch (val) {
-    case "WAITTING":
-      return "รอดำเนินการ";
-    case "PENDING":
-      return "เลือกตำแหน่งแล้ว";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ยับยั้ง";
-    case "DELETE":
-      return "ยกเลิกการลาออก";
-    case "REPORT":
-      return "ส่งรายชื่อไปออกคำสั่ง";
-    case "DONE":
-      return "ออกคำสั่งเสร็จแล้ว";
-    default:
-      return "-";
-  }
-};
-
 const pagination = ref({
   sortBy: "datetext",
   descending: true,
@@ -478,9 +443,6 @@ const pagination = ref({
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="prefix" :props="props">
-                  {{ props.row.prefix }}
-                </q-td>
                 <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
                 </q-td>
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 7a8691849..2f9499e88 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -11,12 +11,7 @@ import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
-
-import type {
-  ResponseItems,
-  TypeFile,
-} from "@/modules/06_retirement/interface/response/Main";
-
+import type { TypeFile } from "@/modules/06_retirement/interface/response/Main";
 import type { QTableProps } from "quasar";
 
 const $q = useQuasar();
@@ -149,7 +144,6 @@ const fetchData = async (id: string) => {
     .get(config.API.resingByid(id))
     .then((res: any) => {
       const data = res.data.result;
-      console.log(data);
       let list: TypeFile[] = [];
       if (data.docs.length > 0) {
         data.docs.map((doc: TypeFile) => {
@@ -172,29 +166,6 @@ const fetchData = async (id: string) => {
       location.value = data.location ?? "";
       status.value = data.status ?? "";
     })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const rowsFileDownload = ref<TypeFile[]>([
-  { fileName: "หนังสือลาออกจากราขการ", pathName: "" },
-]);
-const downloadAttachment = async (type: string, id: string) => {
-  showLoader();
-  await http
-    .get(config.API.reportResignList(type, id), {
-      responseType: "blob",
-    })
-    .then(async (res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list: TypeFile[] = [];
-      downloadFile(res, `หนังสือลาออกจากราขการ.${type}`);
-    })
     .catch((e) => {
       messageError($q, e);
     })
@@ -327,8 +298,6 @@ const saveData = async () => {
   await http
     .put(config.API.resingByid(id.value), formData)
     .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -551,57 +520,6 @@ const statusOrder = (val: boolean) => {
       </d-table>
     </div>
   </q-card>
-
-  <!-- <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">
-        แบบฟอร์มหนังสือขอลาออกจากราชการ
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rowsFileDownload"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn
-                flat
-                dense
-                round
-                color="red"
-                icon="picture_as_pdf"
-                @click="downloadAttachment('pdf', id)"
-              >
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-              </q-btn>
-              <q-btn
-                flat
-                dense
-                round
-                color="blue"
-                icon="mdi-file-word"
-                @click="downloadAttachment('docx', id)"
-              >
-                <q-tooltip>ไฟล์ WORD</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card> -->
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
@@ -774,7 +692,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -790,7 +708,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -806,7 +724,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -822,22 +740,8 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <!-- <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              /> -->
-
               <CurrencyInput
                 v-model="salary"
                 :edit="edit"
@@ -849,7 +753,7 @@ const statusOrder = (val: boolean) => {
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-4 row ">
+          <div class="col-xs-4 row">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -867,7 +771,7 @@ const statusOrder = (val: boolean) => {
               />
             </div>
           </div>
-          <div class="col-xs-4 row ">
+          <div class="col-xs-4 row">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -884,7 +788,7 @@ const statusOrder = (val: boolean) => {
                 }}</template>
                 <template #trigger>
                   <q-input
-                  :readonly="!edit"
+                    :readonly="!edit"
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -915,7 +819,7 @@ const statusOrder = (val: boolean) => {
               </datepicker>
             </div>
           </div>
-          <div class="col-xs-4 row ">
+          <div class="col-xs-4 row">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -932,7 +836,7 @@ const statusOrder = (val: boolean) => {
                 }}</template>
                 <template #trigger>
                   <q-input
-                  :readonly="!edit"
+                    :readonly="!edit"
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
@@ -1021,9 +925,6 @@ const statusOrder = (val: boolean) => {
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <!-- :rules="[
-                    (val) => !!val || `${'กรุณาเลือก วันสุดท้ายที่ยับยั้ง'}`,
-                  ]" -->
                 <q-input
                   outlined
                   dense
diff --git a/src/modules/06_retirement/components/resign/ResignOrder.vue b/src/modules/06_retirement/components/resign/ResignOrder.vue
index ad415e76a..256d80c95 100644
--- a/src/modules/06_retirement/components/resign/ResignOrder.vue
+++ b/src/modules/06_retirement/components/resign/ResignOrder.vue
@@ -1,791 +1,663 @@
-<template>
-    <div class="toptitle text-dark col-12 row items-center">คำสั่งลาออก</div>
-    <div>
-      <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-        <div class="row q-col-gutter-sm">
-          <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
-              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="searchFilterTable"
-            />
-            <div>
-              <q-btn
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-                @click="clickAdd"
-              >
-                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-                <!-- <q-menu>
-                  <q-list style="min-width: 100px">
-                    <q-item clickable @click="clickAdd">
-                      <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup disable>
-                      <q-item-section
-                        >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
-                      >
-                    </q-item>
-                  </q-list>
-                </q-menu> -->
-              </q-btn>
-            </div>
-            <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
-              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="col-xs-12 col-sm-3 col-md-2"
-            />
-          </div>
-          <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
-                  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)"
-                  >
-                    {{ props.row.Order }}
-                  </q-td>
-                  <q-td
-                    key="OrderNum"
-                    :props="props"
-                    @click="redirectToPage(props.row.Order)"
-                  >
-                    {{ props.row.OrderNum }}
-                  </q-td>
-                  <q-td
-                    key="OrderType"
-                    :props="props"
-                    @click="redirectToPage(props.row.OrderType)"
-                  >
-                    {{ props.row.OrderType }}
-                  </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)"
-                  >
-                    {{ props.row.OrderStatus }}
-                  </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>
-  </template>
-  
-  <script setup lang="ts">
-  import { onMounted, reactive, ref, useAttrs, computed } from "vue";
-  import type { QTableProps } from "quasar";
-  import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-  import type { DataOption } from "@/modules/05_placement/interface/index/Main";
-  import { useCounterMixin } from "@/stores/mixin";
-  import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
-  import router from "@/router";
-  import { useQuasar } from "quasar";
-  
-  const $q = useQuasar(); //ใช้ noti quasar
-  const DataStore = useOrderPlacementDataStore();
-  const pagination = ref({
-    sortBy: "desc",
-    descending: false,
-    page: 1,
-    rowsPerPage: 10,
-  });
-  
-  const mixin = useCounterMixin();
-  const { dateText } = mixin;
-  
-  // แปลงเวลา ค.ศ ให้เป็น พ.ศ
-  const textDate = (value: Date) => {
-    return dateText(value);
-  };
-  
-  const visibleColumns = ref<string[]>([
-    "Order",
-    "OrderType",
-    "OrderNum",
-    "OrderDate",
-    "OrderBy",
-    "Signer",
-    "OrderStatus",
-  ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-  
-  // หัวตาราง
-  const columns = ref<QTableProps["columns"]>([
-    {
-      name: "Order",
-      align: "left",
-      label: "คำสั่ง",
-      sortable: true,
-      field: "Order",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+<script setup lang="ts">
+import { onMounted, reactive, ref, useAttrs, computed } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
+import router from "@/router";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const DataStore = useOrderPlacementDataStore();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const mixin = useCounterMixin();
+const { dateText } = mixin;
+
+// แปลงเวลา ค.ศ ให้เป็น พ.ศ
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+const visibleColumns = ref<string[]>([
+  "Order",
+  "OrderType",
+  "OrderNum",
+  "OrderDate",
+  "OrderBy",
+  "Signer",
+  "OrderStatus",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "Order",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "Order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderNum",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "OrderNum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "OrderType",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "OrderType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderDate",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "OrderDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderBy",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "OrderBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Signer",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: false,
+    field: "Signer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderStatus",
+    align: "center",
+    label: "สถานะคำสั่ง",
+    sortable: false,
+    field: "OrderStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "fiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+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/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "รอลงนาม",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งย้าย",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+]);
+
+let OriginalData = ref<FormOrderPlacementMainData[]>([]);
+let UpdataData = ref<FormOrderPlacementMainData[]>([]);
+
+onMounted(async () => {
+  await OriginalDataFetch();
+  fiscalYearFilter();
+  searchFilterTable();
+  OrderStatusFilter();
+  OrderTypeFilter();
+});
+
+const OriginalDataFetch = async () => {
+  await DataStore.DataMainOrder(rows.value);
+  OriginalData.value = await DataStore.DataMainOrigOrder;
+  UpdataData.value = OriginalData.value;
+};
+
+// ดูรายการหน้าต่อไป
+const redirectToPage = (id?: number) => {
+  router.push(`/placement/order/detail`);
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
     },
-    {
-      name: "OrderNum",
-      align: "left",
-      label: "เลขที่คำสั่ง",
-      sortable: true,
-      field: "OrderNum",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "OrderType",
-      align: "left",
-      label: "ประเภท",
-      sortable: false,
-      field: "OrderType",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "OrderDate",
-      align: "left",
-      label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
-      sortable: true,
-      field: "OrderDate",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "OrderBy",
-      align: "left",
-      label: "คำสั่งโดย",
-      sortable: true,
-      field: "OrderBy",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "Signer",
-      align: "left",
-      label: "ผู้ลงนาม",
-      sortable: false,
-      field: "Signer",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "OrderStatus",
-      align: "center",
-      label: "สถานะคำสั่ง",
-      sortable: false,
-      field: "OrderStatus",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "fiscalYear",
-      align: "left",
-      label: "ปีงบประมาณ",
-      sortable: true,
-      field: "fiscalYear",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-  
-  // ข้อมูลตาราง (จำลอง)
-  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/2564",
-      fiscalYear: 2564,
-      OrderDate: "30 พ.ค. 2564",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "บัญชีแนบท้าย",
-      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2564",
-      fiscalYear: 2564,
-      OrderDate: "30 พ.ค. 2564",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "บัญชีแนบท้าย",
-      OrderType: "คำสั่งย้าย",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2564",
-      fiscalYear: 2564,
-      OrderDate: "30 พ.ค. 2564",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ส่งสำเนาคำสั่ง",
-      OrderType: "คำสั่งย้าย",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2564",
-      fiscalYear: 2564,
-      OrderDate: "30 พ.ค. 2564",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ส่งสำเนาคำสั่ง",
-      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2566",
-      fiscalYear: 2566,
-      OrderDate: "30 พ.ค. 2566",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "รอลงนาม",
-      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2566",
-      fiscalYear: 2566,
-      OrderDate: "30 พ.ค. 2566",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ออกคำสั่งแล้ว",
-      OrderType: "คำสั่งแต่งตั้ง",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2565",
-      fiscalYear: 2565,
-      OrderDate: "30 พ.ค. 2565",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ออกคำสั่งแล้ว",
-      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2566",
-      fiscalYear: 2566,
-      OrderDate: "30 พ.ค. 2566",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ออกคำสั่งแล้ว",
-      OrderType: "คำสั่งแต่งตั้ง",
-    },
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2566",
-      fiscalYear: 2566,
-      OrderDate: "30 พ.ค. 2566",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ออกคำสั่งแล้ว",
-      OrderType: "คำสั่งย้าย",
-    },
-  
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2564",
-      fiscalYear: 2564,
-      OrderDate: "30 พ.ค. 2564",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ออกคำสั่งแล้ว",
-      OrderType: "คำสั่งแต่งตั้ง",
-    },
-  
-    {
-      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-      OrderNum: "1/2566",
-      fiscalYear: 2566,
-      OrderDate: "30 พ.ค. 2566",
-      OrderBy: "สำนักงาน กทม.",
-      Signer: "นาม สมคิด ยอดใจ ",
-      OrderStatus: "ออกคำสั่งแล้ว",
-      OrderType: "คำสั่งแต่งตั้ง",
-    },
-  ]);
-  // const OrderStatusOption = [
-  //   "ทั้งหมด",
-  //   "ยังไม่ได้บรรจุ",
-  //   "บรรจุแล้ว",
-  //   "ยังไม่ได้ออกคำสั่ง",
-  // ];
-  
-  let OriginalData = ref<FormOrderPlacementMainData[]>([]);
-  let UpdataData = ref<FormOrderPlacementMainData[]>([]);
-  
-  onMounted(async () => {
-    await OriginalDataFetch();
-    fiscalYearFilter();
-    searchFilterTable();
-    OrderStatusFilter();
-    OrderTypeFilter();
-  });
-  
-  const OriginalDataFetch = async () => {
-    // API
-    // await http
-    //   .get(config.API.// ตัวอย่าง)
-    //   .then((res: any) => {
-    //   })
-    //   .catch((e: any) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(async () => {
-    //   });
-    await DataStore.DataMainOrder(rows.value);
-    OriginalData.value = await DataStore.DataMainOrigOrder;
-    UpdataData.value = OriginalData.value;
-  };
-  
-  // ดูรายการหน้าต่อไป
-  const redirectToPage = (id?: number) => {
-    // router.push({ name: "placementDetail" });
-    router.push(`/placement/order/detail`);
-  };
-  
-  const clickDelete = (id: string) => {
-    $q.dialog({
-      title: "ยืนยันการลบข้อมูล",
-      message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    })
-      .onOk(async () => {
-        //   await deleteData(id);
-      })
-      .onCancel(() => {})
-      .onDismiss(() => {});
-  };
-  
-  // const deleteData = async (id: string) => {
-  //   showLoader();
-  //   await http
-  //     .delete(config.API.orderReplace(id))
-  //     .then((res) => {
-  //       success($q, "ลบข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       hideLoader();
-  //       await fetchData();
-  //     });
-  // };
-  
-  const clickAdd = () => {
-    router.push({ name: "OrderplacementDetail" });
-  };
-  
-  // const viewDetail = (id: string, status: string) => {
-  //   if (status == "checkPayment") {
-  //     router.push(`${route.fullPath}/payment/${id}`);
-  //   } else {
-  //     router.push(`${route.fullPath}/profile/${id}`);
-  //   }
-  // };
-  
-  // เลือกปีงบประมาณ
-  const fiscalyear = ref<number | null>(0);
-  const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-  const addedfiscalYearValues: number[] = [];
-  const fiscalYearFilter = async () => {
-    // API
-    // await http
-    //   .get(config.API.// ตัวอย่าง)
-    //   .then((res: any) => {
-    //    DataStore.DataMainYearSet(rows.value);
-    //    fiscalyearOP.value = DataStore.DataMainYearGet;
-    //   })
-    //   .catch((e: any) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(async () => {
-    //   });
-    for (let data of OriginalData.value) {
-      const year = data.fiscalYear;
-      console.log(year);
-  
-      if (fiscalyear.value === null || year > fiscalyear.value) {
-        fiscalyear.value = year;
-      }
-  
-      if (!addedfiscalYearValues.includes(year)) {
-        fiscalyearOP.push({ id: year, name: year.toString() });
-        addedfiscalYearValues.push(year);
-      }
+    persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  router.push({ name: "OrderplacementDetail" });
+};
+
+// เลือกปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedfiscalYearValues: number[] = [];
+const fiscalYearFilter = async () => {
+  for (let data of OriginalData.value) {
+    const year = data.fiscalYear;
+
+    if (fiscalyear.value === null || year > fiscalyear.value) {
+      fiscalyear.value = year;
     }
-  };
-  
-  const OrderType = ref<string>("");
-  const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-  const addedOrderTypeValues: string[] = [];
-  const OrderTypeFilter = async () => {
-    // API
-    // await http
-    //   .get(config.API.// ตัวอย่าง)
-    //   .then((res: any) => {
-    //    DataStore.DataMainYearSet(rows.value);
-    //    fiscalyearOP.value = DataStore.DataMainYearGet;
-    //   })
-    //   .catch((e: any) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(async () => {
-    //   });
-    for (let data of OriginalData.value) {
-      const OrderTypeValue = data.OrderType;
-      console.log(OrderTypeValue);
-  
-      // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
-      //   OrderTypeValue = OrderType;
-      // }
-      if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-        OrderTypeOption.push({
-          // id: OrderTypeValue ?? 0,
-          id: OrderTypeOption.length,
-          name: OrderTypeValue,
-        });
-        addedOrderTypeValues.push(OrderTypeValue);
-      }
-      // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-      //   OrderTypeOption.push({
-      //     id: OrderTypeValue,
-      //     name: OrderTypeValue.toString(),
-      //   });
-      //   addedOrderTypeValues.push(OrderTypeValue);
-      // }
+
+    if (!addedfiscalYearValues.includes(year)) {
+      fiscalyearOP.push({ id: year, name: year.toString() });
+      addedfiscalYearValues.push(year);
     }
-  };
-  const OrderStatus = ref<string>("");
-  const OrderStatusText = ref<FormOrderPlacementMainData[]>(
-    DataStore.DataMainOrigOrder
+  }
+};
+
+const OrderType = ref<string>("");
+const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedOrderTypeValues: string[] = [];
+const OrderTypeFilter = async () => {
+  for (let data of OriginalData.value) {
+    const OrderTypeValue = data.OrderType;
+    console.log(OrderTypeValue);
+    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+      OrderTypeOption.push({
+        id: OrderTypeOption.length,
+        name: OrderTypeValue,
+      });
+      addedOrderTypeValues.push(OrderTypeValue);
+    }
+  }
+};
+const OrderStatus = ref<string>("");
+const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
+const addedOrderStatusValues: string[] = [];
+const OrderStatusFilter = async () => {
+  for (let data of OriginalData.value) {
+    const OrderStatusValue = data.OrderStatus;
+    console.log(OrderStatusValue);
+
+    if (
+      OrderStatusValue === null ||
+      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    ) {
+      OrderStatus.value = OrderStatusValue;
+    }
+
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      OrderStatusOption.push({
+        id: OrderStatusOption.length,
+        name: OrderStatusValue,
+      });
+      addedOrderStatusValues.push(OrderStatusValue);
+    }
+  }
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const searchFilterTable = async () => {
+  await DataStore.DataUpdateOrder(
+    OrderType.value,
+    OrderStatus.value,
+    fiscalyear.value
   );
-  const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
-  const addedOrderStatusValues: string[] = [];
-  const OrderStatusFilter = async () => {
-    // API
-    // await http
-    //   .get(config.API.// ตัวอย่าง)
-    //   .then((res: any) => {
-    //    DataStore.DataMainYearSet(rows.value);
-    //    fiscalyearOP.value = DataStore.DataMainYearGet;
-    //   })
-    //   .catch((e: any) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(async () => {
-    //   });
-    for (let data of OriginalData.value) {
-      const OrderStatusValue = data.OrderStatus;
-      console.log(OrderStatusValue);
-  
-      if (
-        OrderStatusValue === null ||
-        parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
-      ) {
-        OrderStatus.value = OrderStatusValue;
-      }
-  
-      if (!addedOrderStatusValues.includes(OrderStatusValue)) {
-        OrderStatusOption.push({
-          // id: OrderStatusValue,
-          id: OrderStatusOption.length,
-          name: OrderStatusValue,
-        });
-        addedOrderStatusValues.push(OrderStatusValue);
-      }
-    }
-  };
-  
-  // เลือกปีงบประมาณตาม API
-  const searchfiscalyear = () => {
-    console.log("Input value changed:", fiscalyear.value);
-    // API
-    // await http
-    //   .get(config.API.// ตัวอย่าง)
-    //   .then((res: any) => {
-    //   })
-    //   .catch((e: any) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(async () => {
-    //   });
-  };
-  
-  // ค้นหาในตาราง
-  const filterKeyword = ref<string>("");
-  const filterRef = ref<any>(null);
-  const resetFilter = () => {
-    filterKeyword.value = "";
-    filterRef.value.focus();
-  };
-  
-  const attrs = ref<any>(useAttrs());
-  
-  const searchFilterTable = async () => {
-    // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-    await DataStore.DataUpdateOrder(
-      OrderType.value,
-      OrderStatus.value,
-      fiscalyear.value
-    );
-    UpdataData.value = DataStore.DataMainUpdateOrder;
-  };
-  //   UpdataData.value = DataStore.DataMainUpdate;
-  // console.log("Input value changed:", OrderStatus.value, OrderType.value);
-  
-  const paging = ref<boolean>(true);
-  const paginationLabel = (start: string, end: string, total: string) => {
-    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-    else return start + "-" + end + " ใน " + total;
-  };
-  </script>
-  
-  <style lang="scss" scope>
-  .filter-card {
-    background-color: #f1f1f1b0;
+  UpdataData.value = DataStore.DataMainUpdateOrder;
+};
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">คำสั่งลาออก</div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-sm">
+        <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
+            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="searchFilterTable"
+          />
+          <div>
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+              @click="clickAdd"
+            >
+              <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"
+            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
+            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="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <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
+                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)"
+                >
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td
+                  key="OrderNum"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td
+                  key="OrderType"
+                  :props="props"
+                  @click="redirectToPage(props.row.OrderType)"
+                >
+                  {{ props.row.OrderType }}
+                </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)"
+                >
+                  {{ props.row.OrderStatus }}
+                </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>
+</template>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
   }
-  
-  .toggle-expired-account {
-    font-size: 12px;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 150%;
-    color: #35373c;
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
   }
-  
-  .icon-color {
-    color: #4154b3;
+
+  .q-table thead tr {
+    background: #ecebeb;
   }
-  
-  .custom-header-table {
-    max-height: 64vh;
-  
-    .q-table tr:nth-child(odd) td {
-      background: white;
-    }
-  
-    .q-table tr:nth-child(even) td {
-      background: #f8f8f8;
-    }
-  
-    .q-table thead tr {
-      background: #ecebeb;
-    }
-  
-    .q-table thead tr th {
-      position: sticky;
-      z-index: 1;
-    }
-  
-    /* this will be the loading indicator */
-    .q-table thead tr:last-child th {
-      /* height of all previous header rows */
-      top: 48px;
-    }
-  
-    .q-table thead tr:first-child th {
-      top: 0;
-    }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
   }
-  </style>
-  
\ No newline at end of file
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/06_retirement/interface/response/exitInterview.ts b/src/modules/06_retirement/interface/response/exitInterview.ts
index b0d3c8d4d..71ed3bb96 100644
--- a/src/modules/06_retirement/interface/response/exitInterview.ts
+++ b/src/modules/06_retirement/interface/response/exitInterview.ts
@@ -35,6 +35,7 @@ interface ResponseItems {
   suggestion: string;
   status: string;
   datetext: string | null;
+  fullname: string;
   appointDate: any;
 }