From cea4c2d0b57e5da223b7257d3483e7357c14f78a Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 14:06:28 +0700
Subject: [PATCH 01/11] add api placement & retire

---
 src/api/05_placement/api.placement.ts   | 16 ++++++++++++++++
 src/api/06_retirement/api.retirement.ts | 13 ++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index fb6ec2ab0..9aa185ea7 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -4,6 +4,10 @@ const orgTree = `${env.API_URI_ORG_TREE}`;
 const order = `${env.API_PLACEMENT_URI}`;
 const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
 const transfer = `${placement}/transfer`;
+const placemenHelpGov = `${placement}/officer`;
+const placemenRepatriation = `${placement}/repatriation`;
+const placemenRelocation = `${placement}/relocation`;
+const placemenOther = `${env.API_URI}/retirement/other`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -98,4 +102,16 @@ export default {
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
+
+  // ช่วยราชการ
+  placemenHelpGov,
+
+  // ส่งตัวกลับ
+  placemenRepatriation,
+
+  // ขอย้าย
+  placemenRelocation,
+
+  // อื่นๆ
+  placemenOther,
 };
diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 56df2a452..4ad20b606 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -1,6 +1,8 @@
 import env from "../index";
 const retirement = `${env.API_URI}/retirement`
-
+const retirementDischarge = `${retirement}/discharge`
+const retirementExpulsion = `${retirement}/expulsion`
+const retirementOut = `${retirement}/out`
 
 export default {
     profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
@@ -22,4 +24,13 @@ export default {
     resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
     resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 
+    // ปลดออก
+    retirementDischarge,
+
+    // ไล่ออก
+    retirementExpulsion,
+
+    // ให้ออก
+    retirementOut
+
 };

From 875bc2bd878119f239f67286d4190f5a00f8d356 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 14:10:03 +0700
Subject: [PATCH 02/11] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20api=20post=20=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87-=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 9aa185ea7..f69824fe8 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -8,6 +8,7 @@ const placemenHelpGov = `${placement}/officer`;
 const placemenRepatriation = `${placement}/repatriation`;
 const placemenRelocation = `${placement}/relocation`;
 const placemenOther = `${env.API_URI}/retirement/other`;
+const placemenAppointment = `${env.API_URI}/retirement/appointment`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -103,6 +104,9 @@ export default {
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
 
+  // แต่งตั้ง-เลื่อน
+  placemenAppointment,
+
   // ช่วยราชการ
   placemenHelpGov,
 

From 84f61e70d271367df3f2916bde3f793a561ea88f Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 15:03:45 +0700
Subject: [PATCH 03/11] =?UTF-8?q?edit=20path=20=E0=B9=84=E0=B8=A5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=20=E0=B8=9B=E0=B8=A5=E0=B8=94?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=20=E0=B9=83=E0=B8=AB=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index ab401c6ff..ad8f16e68 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -125,7 +125,7 @@ const menuList = readonly<any[]>([
     activeIcon: "order",
     label: "ออกคำสั่ง",
     path: "order",
-    role: "placement",
+    role: "order",
   },
   {
     key: 5,
@@ -253,7 +253,7 @@ const menuList = readonly<any[]>([
       {
         key: 6.9,
         label: "รายการย้าย" /* */,
-        path: "move-list",
+        path: "relocation",
         role: "placement",
       },
       {
@@ -311,13 +311,13 @@ const menuList = readonly<any[]>([
       {
         key: 7.6,
         label: "รายการปลดออก",
-        path: "dismiss-order",
+        path: "discharged",
         role: "retirement",
       },
       {
         key: 7.7,
         label: "รายการไล่ออก",
-        path: "dismiss-order",
+        path: "expulsion",
         role: "retirement",
       },
     ],

From 5358cc3d0855006aa78942b0a3c41bba1321d41d Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 11 Aug 2023 15:11:36 +0700
Subject: [PATCH 04/11] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=8A=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   3 +
 .../helpgovernment/governmentDetail.vue       | 293 ++++++++
 .../components/helpgovernment/mainHelp.vue    | 688 ++++++++++++++++++
 .../interface/response/officer.ts             |  23 +
 src/modules/05_placement/router.ts            |  23 +-
 5 files changed, 1029 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/05_placement/components/helpgovernment/governmentDetail.vue
 create mode 100644 src/modules/05_placement/components/helpgovernment/mainHelp.vue
 create mode 100644 src/modules/05_placement/interface/response/officer.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index b29f33155..5123b7716 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -97,4 +97,7 @@ export default {
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
+  officerMain: () => `${placement}/officer`,
+  officerDetail: (id:string) => `${placement}/officer/${id}`,
+  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
 };
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
new file mode 100644
index 000000000..08c864fc6
--- /dev/null
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -0,0 +1,293 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการขอโอนช่วยราชการ {{ fullname }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-5 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </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>
+      <q-space />
+      <q-btn
+        v-if="!roleAdmin"
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+        @click=""
+      />
+      <q-btn
+        v-else
+        outline
+        color="primary"
+        dense
+        icon-right="download"
+        class="q-px-sm"
+        label="ดาวน์โหลด"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organization }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps } from "quasar";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/05_placement/interface/response/Transfer";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const personId = route.params.id as string;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const roleAdmin = ref<boolean>(false);
+
+const name = ref<string>("นายสมคิด ยอดใจ");
+const level = ref<string>("ชำนาญการพิเศษ");
+const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+const fullname = ref<string>("")
+const id = ref<string>("");
+const prefix = ref<string>("");
+const firstName = ref<string>("");
+const lastName = ref<string>("");
+const position = ref<string>("");
+const posNo = ref<string>("");
+const positionLevel = ref<string>("");
+const createdAt = ref<string>("");
+const organization = ref<string>("");
+const reason = ref<string>("");
+const status = ref<string>("");
+const date = ref<string>("");
+const salary = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const positionNumberOld = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const isActive = ref<string>("");
+const responseData = ref<ResponseDataDetail>({
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+});
+
+const rows = ref<TypeFile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.officerDetail(personId))
+    .then((res: any) => {
+      const data = res.data.result;
+      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`,
+      id.value = data.id;
+      prefix.value = data.prefix;
+      firstName.value = data.firstName;
+      lastName.value = data.lastName;
+      position.value = data.position;
+      posNo.value = data.posNo;
+      positionLevel.value = data.positionLevel;
+      createdAt.value = data.createdAt;
+      organization.value = data.organization;
+      reason.value = data.reason;
+      status.value = data.status;
+      date.value = data.date;
+      salary.value = data.salary;
+      positionTypeOld.value = data.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      positionNumberOld.value = data.positionNumberOld;
+      organizationPositionOld.value = data.organizationPositionOld;
+      isActive.value = data.isActive;
+    })
+    .catch((e) => {
+    //   messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+//   const confirmMessage = async () => {
+//     dialogMessage(
+//       $q,
+//       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+//       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+//       "mdi-help-circle-outline",
+//       "ยืนยัน",
+//       "primary",
+//       () => sendConfirm(),
+//       undefined
+//     );
+//   };
+
+//   const sendConfirm = async () => {
+//     showLoader();
+//     await http
+//       .get(config.API.transferConfirmId(personId.toString()))
+//       .then((res: any) => {
+//         //   const data = res.data.result;
+//         //   console.log(data);
+//         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+//       })
+//       .catch((e) => {
+//         messageError($q, e);
+//       })
+//       .finally(async () => {
+//         await getData();
+//         hideLoader();
+//       });
+//   };
+onMounted(async () => {
+  await getData();
+});
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
new file mode 100644
index 000000000..a36b8a59d
--- /dev/null
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@@ -0,0 +1,688 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+  
+} = mixin;
+
+const modal = ref<boolean>(false);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "posNo",
+  "positionLevel",
+  "organization",
+  "reason",
+  "status",
+  "date",
+  "salary",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "createdAt",
+  "btn",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<officerType[]>([]);
+const rows2 = ref<any>([
+  {
+    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
+    fullname: "นางสาวอย พชช",
+    position: "นักบริหาร",
+    positionLevel: "ต้น",
+    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+    agency: "กลุ่มงานกุมารเวชกรรม",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันเวลาที่ขอย้าย",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionTypeOld",
+    align: "left",
+    label: "ตำแหน่งในสายงานก่อนหน้า",
+    sortable: true,
+    field: "positionTypeOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionNumberOld",
+    align: "left",
+    label: "เลขที่ตำเเหน่งก่อนหน้า",
+    sortable: true,
+    field: "positionNumberOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevelOld",
+    align: "left",
+    label: "ระดับก่อนหน้า",
+    sortable: true,
+    field: "positionLevelOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "หน่วยงานก่อนหน้า",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือนก่อนหน้า",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผลที่ย้ายหน่วยงาน",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำเเหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btn",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "btn",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "agency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+//--------------(ปุ่มลบ)----------------//
+
+const openDetail = (id:string) => {
+  router.push(`/help-government/detail/${id}`)
+}
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.officerMain())
+    .then((res: any) => {
+      const data = res.data.result;
+      console.log("data==>", data);
+      rows.value = data.map((item: officerType) => ({
+        id: item.id,
+        fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
+        position: item.position,
+        posNo: item.posNo,
+        positionLevel: item.positionLevel,
+        createdAt: date2Thai(item.createdAt),
+        organization: item.organization,
+        reason: item.reason,
+        status: item.status,
+        date: item.date,
+        salary: item.salary,
+        positionTypeOld: item.positionTypeOld,
+        positionLevelOld: item.positionLevelOld,
+        positionNumberOld: item.positionNumberOld,
+        organizationPositionOld: item.organizationPositionOld,
+        isActive: item.isActive,
+      })
+      );
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const deleteData = async (id:string) => {
+  await http
+  .delete(config.API.officerMainDelete(id))
+  .then((res)=>{
+    success($q, "ลบข้อมูลสำเร็จ");
+    console.log(res)
+  })
+  .catch((e) => {
+          messageError($q, e);
+        })
+  .finally(async () => {
+          await getData();
+        });
+}
+const clickDelete = async (name:string,id:string) => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูลของ ${name}`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await deleteData(id)
+    ,
+    async () => await getData()
+    
+  );
+};
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการช่วยราชการ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            @click="openModal"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งโอนออก</q-tooltip>
+          </q-btn>
+
+          <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 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <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-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td key="no" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.createdAt }}
+                </q-td>
+                <q-td key="positionTypeOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionTypeOld }}
+                </q-td>
+                <q-td key="positionNumberOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionNumberOld }}
+                </q-td>
+                <q-td key="positionLevelOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionLevelOld }}
+                </q-td>
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.organizationPositionOld }}
+                </q-td>
+                <q-td key="salary" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.salary }}
+                </q-td>
+                <q-td key="reason" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.reason }}
+                </q-td>
+                <q-td key="position" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.posNo }}
+                </q-td>
+                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="organization" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.organization }}
+                </q-td>
+                <q-td key="agency" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.agency }}
+                </q-td>
+                <q-td key="status" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.status }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    icon="mdi-dots-vertical"
+                    size="12px"
+                    color="grey-7"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 100px">
+
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="clickDelete(props.row.fullname,props.row.id)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบ</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="personalId"
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <!-- <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template> -->
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="oc" :props="props">
+                {{ props.row.oc }}
+              </q-td>
+              <q-td key="agency" :props="props">
+                {{ props.row.agency }}
+              </q-td>
+              <q-td key="status" :props="props">
+                {{ props.row.status }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click=""
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/interface/response/officer.ts b/src/modules/05_placement/interface/response/officer.ts
new file mode 100644
index 000000000..64d298641
--- /dev/null
+++ b/src/modules/05_placement/interface/response/officer.ts
@@ -0,0 +1,23 @@
+interface officerType {
+    no:number,
+    id: string,
+    prefix: string,
+    firstName: string,
+    lastName: string,
+    position: string,
+    posNo: string,
+    positionLevel: string,
+    createdAt: Date,
+    organization: string,
+    reason: string,
+    status: string,
+    date: Date,
+    salary: number,
+    positionTypeOld: string,
+    positionLevelOld: string,
+    positionNumberOld: string,
+    organizationPositionOld: string,
+    isActive: true
+}
+
+export type { officerType};
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 12cbb254e..216bfdf50 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -42,7 +42,8 @@ const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
   const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
-
+const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
+const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
 export default [
   {
     path: "/placement",
@@ -204,4 +205,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/help-government",
+    name: "help-government",
+    component: helpgovernment,
+    meta: {
+      Auth: true,
+      Key: [6.6],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/help-government/detail/:id",
+    name: "help-governmentbyId",
+    component: helpgovernmentbyId,
+    meta: {
+      Auth: true,
+      Key: [6.6],
+      Role: "placement",
+    },
+  },
 ];

From 0849b873f67ed6cc2a1f255e4d57944965130e24 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 15:20:29 +0700
Subject: [PATCH 05/11] =?UTF-8?q?fix=20bug=20=E0=B8=AA=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B9=84=E0=B8=9B=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87=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/modules/05_placement/components/PersonalList/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 40c9ee9ec..147b024d7 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -256,7 +256,7 @@ const getTable = async () => {
         (e: any) =>
           e.draft == "รอส่งตัว" &&
           e.positionNumber !== null &&
-          e.statusName == " เตรียมบรรจุ"
+          e.statusName == "เตรียมบรรจุ"
       );
       console.log(rowsFilter.value);
     })

From a3ccc67bdd12c3ec5dab90f54c76cab3a0927933 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 16:19:49 +0700
Subject: [PATCH 06/11] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20popup=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20fix=20bug=20?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_order/components/Main.vue      |  27 +-
 .../10_order/components/step/step01.vue       | 328 ++++-------------
 .../10_order/components/step/step02.vue       | 344 ++++++------------
 .../10_order/components/step/step03.vue       |   2 +-
 .../10_order/components/step/step04.vue       |  59 ++-
 src/modules/10_order/router.ts                |  20 +-
 6 files changed, 242 insertions(+), 538 deletions(-)

diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index f5ed2ae12..c6b61430d 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -125,7 +125,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success } =
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogMessage } =
   mixin;
 const DataStore = useOrderPlacementDataStore();
 
@@ -314,20 +314,17 @@ const redirectToPage = (id?: string, status?: string) => {
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      await deleteData(id);
-    })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-delete",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+
 };
 
 const deleteData = async (id: string) => {
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 4f63bc851..9ba307395 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,24 +3,10 @@
     <q-form ref="myForm" class="q-pa-md">
       <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-            hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="typeOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
+            :options="typeOrderOption" option-value="id" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
           ) " -->
@@ -29,73 +15,36 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
 
         <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
           <div class="col-6">
-            <q-input
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
-              :label="`${'คำสั่ง'}`"
-              @update:modelValue="clickEditRow"
-              hide-bottom-space
-              type="number"
-            />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
+              hide-bottom-space type="number" />
           </div>
-          <label class="col-1 flex justify-center items-center text-bold"
-            >/</label
-          >
+          <label class="col-1 flex justify-center items-center text-bold">/</label>
           <div class="col-5">
-            <datepicker
-              v-model="dateYear"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:modelValue="clickEditRow"
-            >
+            <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
+              @update:modelValue="clickEditRow">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  :model-value="dateYear + 543"
-                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`"
-                  dense
-                  outlined
-                >
+                <q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`" dense outlined>
                 </q-input>
               </template>
             </datepicker>
           </div>
         </div>
         <div class="col-xs-5 col-md-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateCommand"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -103,24 +52,12 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateCommand != null ? date2Thai(dateCommand) : null
-                "
-                :label="`${'วันที่มีผลออกคำสั่ง'}`"
-                :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
+                " :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -129,24 +66,10 @@
         </div>
 
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="byOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
-            hide-bottom-space
-            :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="byOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
+            option-value="id" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
           ) " -->
@@ -154,55 +77,25 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
         <div class="col-12">
           <q-separator />
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="examRoundName"
-            :options="examRoundOption"
-            option-value="examRoundValue"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
+            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -216,39 +109,18 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="registerOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
+            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateRegister"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -256,25 +128,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateRegister != null ? date2Thai(dateRegister) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
+                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -282,38 +142,18 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="announce"
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="announceOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
+            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
+            input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAnnounce"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -321,25 +161,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -376,7 +204,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, success, dialogMessage } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 
@@ -570,7 +398,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -591,23 +419,23 @@ const submit = async () => {
   };
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      $q.dialog({
-        title: "ยืนยันการบันทึกข้อมูล",
-        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-        cancel: {
-          flat: true,
-          color: "negative",
+      dialogMessage(
+        $q,
+        "ยืนยันการบันทึกข้อมูล",
+        "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        "info",
+        "ตกลง",
+        "public",
+        () => {
+          if (!orderId) {
+            createListOrder(formdata);
+          } else {
+            let orderIdString = orderId.toString();
+            updateOrder(formdata, orderIdString);
+          }
         },
-        persistent: true,
-      }).onOk(async () => {
-        showLoader();
-        if (!orderId) {
-          createListOrder(formdata);
-        } else {
-          let orderIdString = orderId.toString();
-          updateOrder(formdata, orderIdString);
-        }
-      });
+        undefined
+      );
     }
   });
 };
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index a64b88f85..2c83f6be2 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -9,51 +9,20 @@ div
         <q-space />
         <div class="items-center" style="display: flex">
           <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
+          <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
+            style="max-width: 200px" class="q-ml-sm">
             <template v-slot:append>
               <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
             </template>
           </q-input>
           <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
+          <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
+            :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
+            class="gt-xs q-ml-sm" />
         </div>
       </div>
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
+      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -67,51 +36,23 @@ div
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectModal(props.row)"
-              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectModal(props.row)">{{ col.name ==
+              "no" ? props.rowIndex + 1 : col.value }}</q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                :disable="props.rowIndex + 1 == 1"
-                @click="upDown(props)"
-                icon="mdi-arrow-up-bold"
-              >
+              <q-btn dense size="12px" flat round :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1" @click="upDown(props)" icon="mdi-arrow-up-bold">
                 <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                :disable="rows.length == props.rowIndex + 1"
-                @click="upDown(props, false)"
-                icon="mdi-arrow-down-bold"
-              >
+              <q-btn dense size="12px" flat round :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1" @click="upDown(props, false)" icon="mdi-arrow-down-bold">
                 <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="dialogDeleteData(props.row.personalId)"
-                icon="mdi-delete"
-              >
+              <q-btn dense size="12px" flat round color="red" @click="dialogDeleteData(props.row.personalId)"
+                icon="mdi-delete">
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
@@ -121,24 +62,9 @@ div
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="กรอกรายละเอียด"
-      >
+      <q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md" label="กรอกรายละเอียด">
       </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="save"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
+      <q-btn dense unelevated label="บันทึก" color="public" @click="save" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
@@ -157,43 +83,22 @@ div
             <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.salaryAmount"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    :label="`${'เงินเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.salaryAmount"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :label="`${'เงินเดือน'}`" type="number"
+                    hide-bottom-space />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.positionSalaryAmount"
-                    :label="`${'เงินประจำตำแหน่ง'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`" type="number" hide-bottom-space />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                     ]" -->
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.mouthSalaryAmount"
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.mouthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`" type="number" hide-bottom-space />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                     ]" -->
@@ -204,14 +109,7 @@ div
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModal"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModal" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -225,24 +123,12 @@ div
         <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
-          <d-table
-            :rows="rows2"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-            selection="multiple"
-            v-model:selected="selected"
-          >
+          <d-table :rows="rows2" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name"
+            selection="multiple" v-model:selected="selected">
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
                 </q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
@@ -252,33 +138,17 @@ div
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-                >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.name == "no" ? props.rowIndex + 1 :
+                  col.value }}</q-td>
               </q-tr>
             </template>
           </d-table>
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModalAdd"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModalAdd" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -372,7 +242,6 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const selected = ref<ResponseData[]>([]);
-const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -382,8 +251,8 @@ const conditionData = async () => {
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
+      ? localStorage.getItem("orderId")
+      : null;
   if (id !== null) {
     await getData(id);
   }
@@ -441,7 +310,7 @@ const dialogDeleteData = async (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),
@@ -573,36 +442,44 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูล",
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
+  dialogMessage(
+    $q,
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    "info",
+    "ตกลง",
+    "public",
+    async () => {
+      await http
+        .put(config.API.salaryOrder(personalId.value), modalData.value)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await conditionData();
+          modal.value = false;
+        });
     },
-    persistent: true,
-  }).onOk(async () => {
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-      });
-  });
+    undefined
+  );
 };
 
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    await fetchaddlist(orderId.value);
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+        ? localStorage.getItem("orderId")
+        : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
   } else await conditionData();
 };
 const fetchaddlist = async (id: string) => {
@@ -637,37 +514,46 @@ const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
       if (result && selected.value.length !== 0) {
-        $q.dialog({
-          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
+        dialogMessage(
+          $q,
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          "info",
+          "ตกลง",
+          "public",
+          () => {
+            let data = [];
+            data.push(...selected.value.map((e: any) => e.refRecordId));
+            // console.log(data);
+            addlist(data);
           },
-          persistent: true,
-        }).onOk(async () => {
-          let data = [];
-          data.push(...selected.value.map((e: any) => e.refRecordId));
-          // console.log(data);
-          addlist(data);
-        });
+          undefined
+        );
+
       }
     });
   }
 };
 const addlist = async (data: Object) => {
-  await http
-    .post(config.API.personsOrder(orderId.value), data)
-    .then(() => {
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      modalAddChange();
-    });
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+  if (id !== null) {
+    await http
+      .post(config.API.personsOrder(id), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
 };
 
 const click = (e: any) => {
@@ -677,18 +563,20 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    $q.dialog({
-      title: "ยืนยันการบันทึกข้อมูล",
-      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
+    dialogMessage(
+      $q,
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+      "info",
+      "ตกลง",
+      "public",
+      () => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        next();
       },
-      persistent: true,
-    }).onOk(async () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
+      undefined
+    );
+
   } else {
     dialogMessage(
       $q,
@@ -704,8 +592,6 @@ const save = () => {
   }
 };
 
-const selectData = (row: any) => {};
-
 const refresh = async () => {
   // await conditionData();
   modalAddChange();
@@ -725,4 +611,4 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index c71389d9e..d95c3de90 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -632,7 +632,7 @@ const clickDelete = (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index f6945d914..99e613d43 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -6,8 +6,8 @@
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download"
-                :disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
+              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
+                :color="tab !== 'main' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -25,8 +25,8 @@
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn v-show="TailerPDF == ''" size="12px" flat dense
-                :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
+              <q-btn v-show="TailerPDF == ''" size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'"
+                icon="mdi-download" :disable="tab !== 'second'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -252,7 +252,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogMessage } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -383,24 +383,23 @@ const save = () => {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
         // yay, models are correct
-        $q.dialog({
-          title: "ยืนยันการบันทึกข้อมูล",
-          message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
-          },
-          persistent: true,
-        })
-          .onOk(async () => {
+        dialogMessage(
+          $q,
+          "ยืนยันการบันทึกข้อมูล",
+          "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+          "info",
+          "ตกลง",
+          "public",
+          async () => {
             await putOrderData();
             await postfileOrder();
             await postfileTailer();
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
-          })
-          .onCancel(() => { })
-          .onDismiss(() => { });
+          },
+          undefined
+        );
+
       }
     });
   }
@@ -432,16 +431,14 @@ const postfileTailer = async () => {
   await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการออกคำสั่ง",
-    message: "ต้องการยืนยันการออกคำสั่งข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
+  dialogMessage(
+    $q,
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
+    "info",
+    "ตกลง",
+    "public",
+    async () => {
       await http
         .put(config.API.executeOrder(id))
         .then((res) => {
@@ -450,9 +447,9 @@ const clickExecute = async (id: string) => {
         .catch((e) => {
           messageError($q, e);
         });
-    })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+    },
+    undefined
+  );
 };
 
 const validateForm = () => {
diff --git a/src/modules/10_order/router.ts b/src/modules/10_order/router.ts
index a059df203..b42e3161d 100644
--- a/src/modules/10_order/router.ts
+++ b/src/modules/10_order/router.ts
@@ -1,12 +1,6 @@
-/**
- * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
- */
-
-const AddPage = () =>
-  import("@/modules/10_order/components/Add.vue");
+// const AddPage = () => import("@/modules/10_order/components/Add.vue");
 const MainOrder = () => import("@/modules/10_order/components/Main.vue");
-const DetailPage = () =>
-  import("@/modules/10_order/components/Detail.vue");
+const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
 
 export default [
   {
@@ -16,16 +10,17 @@ export default [
     meta: {
       Auth: true,
       Key: [10],
-      Role: "placement",
+      Role: "order",
     },
   },
   {
     path: "/order/add",
     name: "OrderAdd",
-    component: AddPage,
+    component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
   {
@@ -34,7 +29,8 @@ export default [
     component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
 ];

From 97aa9fd3de81dab4d340df972e21444d3d335a1a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Aug 2023 16:54:42 +0700
Subject: [PATCH 07/11] =?UTF-8?q?api=20=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         |   34 +-
 src/api/index.ts                              |    3 +-
 .../probation/FormEvaluation/FormEvaluate.vue |  173 ++-
 .../FormEvaluation/FormEvaluateScore.vue      |  305 +++-
 .../probation/FormEvaluation/FormReport.vue   |  379 ++++-
 .../FormEvaluation/FormSaveResult.vue         |  181 ++-
 .../FormEvaluation/FormSaveResultAdd.vue      | 1306 +++++++++++++++++
 .../probation/FormEvaluation/Header.vue       |   41 +-
 .../probation/FormEvaluation/Template1.vue    |  143 +-
 .../probation/FormEvaluation/Template2.vue    |    4 +-
 .../FormEvaluation/Template2Format2.vue       |   28 +-
 .../components/probation/MainDetail.vue       |    2 +-
 src/modules/05_placement/router.ts            |   15 +-
 13 files changed, 2422 insertions(+), 192 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 1d3f01bfb..d4460f43d 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -3,6 +3,8 @@ const dataOptions = `${env.API_PROBATION_URI}/data-options`;
 const personal = `${env.API_PROBATION_URI}/personal`;
 const calculate = `${env.API_PROBATION_URI}/calculate`;
 const finish = `${env.API_PROBATION_URI}/assign`;
+const evaluate = `${env.API_PROBATION_URI}`;
+
 
 export default {
   competencyOptions: (personalId: string) =>
@@ -23,7 +25,35 @@ export default {
   saveFinish: (personalId: string) =>
     `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
-  probationGetAssignList: (personalId:string) => 
-  `${finish}/probation-assign-list?personal_id=${personalId}`
+  probationGetAssignList: (personalId: string) =>
+    `${finish}/probation-assign-list?personal_id=${personalId}`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
+
+  // บันทึกผล
+  formevaluate: (id: string) => `${evaluate}/evaluate-record?assign_id=${id}`,
+  formevaluateround: (id: string, no: string) => `${evaluate}/evaluate-record?assign_id=${id}&evaluate_no=${no}`,
+  formevaluateRecord: (id: string) => `${evaluate}/evaluate-record/create?assign_id=${id}`,
+  createformevaluate: (id: string) => `${evaluate}/evaluate-record?id=${id}`,
+
+  //แบบประเมินผล (ผู้บังคับบัญชา)
+  evaluateCreate: (id: string) => `${evaluate}/evaluate/create?assign_id=${id}`,
+  evaluatecommader: (id: string, no: string) => `${evaluate}/evaluate?assign_id=${id}&evaluate_no=${no}`,
+  createformCommader: (id: string) => `${evaluate}/evaluate?id=${id}`,
+
+  //แบบประเมินผล (คณะกรรมการ)
+  evaluateChairman: (id: string) => `${evaluate}/evaluate-chairman/create?assign_id=${id}`,
+  evaluateRoundChairman: (id: string, no: string) => `${evaluate}/evaluate-chairman?assign_id=${id}&evaluate_no=${no}`,
+  createformChairman: (id: string) => `${evaluate}/evaluate-chairman?id=${id}`,
+
+  //แบบรายงาน
+  evaluateReportcreate: (id: string) => `${evaluate}/evaluate-result/create?assign_id=${id}`,
+  evaluateReport: (id: string) => `${evaluate}/evaluate-result?assign_id=${id}`,
+  createformReport: (id: string) => `${evaluate}/evaluate-result?id=${id}`,
+
+
+
+
+
+
+
 };
diff --git a/src/api/index.ts b/src/api/index.ts
index 4b6fabe6d..244b63653 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,8 @@ const config = ref<any>({
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
     API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
+    // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
+    API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 5afcc2e7a..c9e40bc45 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -1,12 +1,40 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const commander = ref<any>([]);
+const round = ref<any>();
+const status = ref<boolean>(true);
+
+const props = defineProps({
+  tab: String,
+});
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -53,14 +81,104 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
+onMounted(async () => {
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+  // console.log(round.value);
+  // console.log(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateCreate(id))
+    .then((res: any) => {
+      // console.log(res);
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      commander.value = res.data.data.commander;
+      option.value.push(commander.value);
+      Autherise.value = commander.value.name;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  // showLoader();
+  await http
+    .get(config.API.evaluatecommader(id, round))
+    .then((res: any) => {
+      // console.log(res);
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavio_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      console.log(e);
+    })
+    .finally(() => {
+      // hideLoader();
+    });
+};
 
-const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
+// const dateToday = ref<Date>(new Date("10-10-2023"));
+// const dateEnd = ref<Date>(new Date("12-10-2023"));
+// const period = ref<number>(1);
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
+const option = ref<any>([]);
 
 // part 1
 const knowledge_level = ref<number>(0);
@@ -80,7 +198,7 @@ const behavio_orther = ref<any>({ text: "", level: 0 });
 const behavio_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<num>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -136,6 +254,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     knowledge_level: knowledge_level.value,
     skill_level: skill_level.value,
     competency_level: competency_level.value,
@@ -155,13 +276,14 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_orther: behavio_orther.value,
+    behavior_strength_desc: behavio_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    commander_dated: dateToISO(dateAutherise.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -174,6 +296,15 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformCommader(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -182,21 +313,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -891,9 +1029,7 @@ const putformData = () => {
     <!-- Footer -->
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row">
-        <div class="col-12 text-top2 row items-center">
-          ผู้บังคับบัญชา
-        </div>
+        <div class="col-12 text-top2 row items-center">ผู้บังคับบัญชา</div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
             class="col-xs-12 col-sm-8"
@@ -902,6 +1038,7 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -948,7 +1085,7 @@ const putformData = () => {
     <!-- <Footer /> -->
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 4410a1b04..f3bc20646 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -1,12 +1,133 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, computed } from "vue";
+import { ref, defineAsyncComponent, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  dateToISO,
+  success,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+// const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const chairman = ref<any>([]);
+const commander = ref<any>([]);
+const mentors = ref<any>([{ name: "" }, { name: "" }]);
+
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+onMounted(() => {
+  console.log(props);
+  console.log(assignId.value);
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateChairman(id))
+    .then((res: any) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      chairman.value = res.data.data.chairman;
+      commander.value = res.data.data.commander;
+      mentors.value = res.data.data.mentors;
+      console.log(mentors.value[0].name);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateRoundChairman(id, round))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      learn_level.value = data.knowledge_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      orientation.value = data.develop_orientation_score;
+      self_learning.value = data.develop_self_learning_score;
+      training_seminar.value = data.develop_training_seminar_score;
+      other_training.value = data.develop_other_training_score;
+      orientation_percent.value = data.develop_orientation_percent;
+      self_learning_percent.value = data.develop_self_learning_percent;
+      training_seminar_percent.value = data.develop_training_seminar_percent;
+      other_training_percent.value = data.develop_other_training_percent;
+
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -54,8 +175,6 @@ const list2_3 = [
   },
 ];
 
-const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -73,14 +192,23 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 
 // part 3
-const orientation = ref<number>(null);
-const self_learning = ref<number>(null);
-const training_seminar = ref<number>(null);
-const other_training = ref<number>(null);
+const orientation = ref<number>(0);
+const self_learning = ref<number>(0);
+const training_seminar = ref<number>(0);
+const other_training = ref<number>(0);
+const orientation_percent = ref<number>(0);
+const self_learning_percent = ref<number>(0);
+const training_seminar_percent = ref<number>(0);
+const other_training_percent = ref<number>(0);
+const develop_result = ref<any>();
+const develop_result_option = ref<any>([
+  { name: "ไม่ผ่านการทดลองงาน", value: 0 },
+  { name: "ผ่านการทดลองงาน", value: 1 },
+]);
 // footer
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+// const option = ref<any>([]);
 
 // score
 const score1 = computed(() => {
@@ -98,6 +226,22 @@ const score1 = computed(() => {
   }
   return learn_level.value + apply_level.value + success_level.value;
 });
+const achievement_score_total: any = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return 20;
+  }
+  return 15;
+});
+const achievement_result: any = computed(() => {
+  if (percent_score1.value > 60) {
+    return 1;
+  }
+  return 0;
+});
 const score2 = computed(() => {
   let sum_conduct = conduct_level.value.reduce(
     (sum: number, level: number) => sum + level,
@@ -121,7 +265,22 @@ const score2 = computed(() => {
     );
   } else return sum_conduct + sum_moral + sum_discipline;
 });
-const percent_score1: number = computed(() => {
+const behavior_score_total: any = computed(() => {
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return 65;
+  } else return 60;
+});
+const behavior_result: any = computed(() => {
+  if (percent_score2.value > 60) {
+    return 1;
+  }
+  return 0;
+});
+const percent_score1: any = computed(() => {
   let num = 0;
   if (etc.value === true) {
     num = 20;
@@ -129,7 +288,7 @@ const percent_score1: number = computed(() => {
   let percent1 = (score1.value / num) * 100;
   return percent1.toFixed(2);
 });
-const percent_score2: number = computed(() => {
+const percent_score2: any = computed(() => {
   let num = 0;
   if (etc2.value === true) {
     num = 65;
@@ -149,6 +308,14 @@ const score4 = computed(() => {
     Number(other_training.value)
   );
 });
+const score5 = computed(() => {
+  return (
+    Number(orientation_percent.value) +
+    Number(self_learning_percent.value) +
+    Number(training_seminar_percent.value) +
+    Number(other_training_percent.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
@@ -185,7 +352,10 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    learn_level: learn_level.value,
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    knowledge_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
     achievement_other: achievement_other.value,
@@ -201,13 +371,27 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
-    orientation: Number(orientation.value),
-    self_learning: Number(self_learning.value),
-    training_seminar: Number(training_seminar.value),
-    other_training: Number(other_training.value),
-    total_experiment: Number(score1.value),
-    total_behavior: Number(score2.value),
+    behavior_orther: behavio_orther.value,
+    develop_orientation_score: Number(orientation.value),
+    develop_self_learning_score: Number(self_learning.value),
+    develop_training_seminar_score: Number(training_seminar.value),
+    develop_other_training_score: Number(other_training.value),
+    develop_orientation_percent: Number(orientation_percent.value),
+    develop_self_learning_percent: Number(self_learning_percent.value),
+    develop_training_seminar_percent: Number(training_seminar_percent.value),
+    develop_other_training_percent: Number(other_training_percent.value),
+    achievement_score: Number(score1.value),
+    achievement_percent: Number(percent_score1.value),
+    achievement_score_total: Number(achievement_score_total.value),
+    achievement_result: Number(achievement_result.value),
+    behavior_score: Number(score2.value),
+    behavior_percent: Number(percent_score2.value),
+    behavior_score_total: Number(behavior_score_total.value),
+    behavior_result: Number(behavior_result.value),
+    sum_score: Number(score1.value) + Number(score2.value),
+    sum_percent: Number(percent_score1.value) + Number(percent_score2.value),
+    chairman_dated: dateToISO(dateAutherise.value),
+    develop_result: develop_result.value,
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -220,6 +404,19 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformChairman(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(() => {
+          fetchEvaluate(assignId.value, round.value);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -228,21 +425,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (คณะกรรมการ)</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -829,7 +1033,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="orientation" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="orientation_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -839,7 +1043,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="self_learning" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="self_learning_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -849,7 +1053,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="training_seminar" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="training_seminar_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -861,7 +1065,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="other_training" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="other_training_percent" />
             </div>
           </div>
           <!-- <q-list dense>
@@ -969,13 +1173,36 @@ const putformData = () => {
             <div class="row q-gutter-md">
               <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
               <div class="col">{{ score4 }}</div>
-              <div class="col">ร้อยละ</div>
+              <div class="col">{{ score5 }}</div>
             </div>
           </div>
         </q-card>
       </div>
     </div>
 
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <!-- <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar> -->
+          สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-select
+            class="col-xs-12"
+            dense
+            v-model="develop_result"
+            outlined
+            :options="develop_result_option"
+            option-label="name"
+            option-value="value"
+            label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
+            map-options
+            emit-value
+          />
+        </div>
+      </div>
+    </div>
+
     <!-- Footer -->
     <!-- <Footer /> -->
     <div class="row col-12 q-gutter-lg no-margin">
@@ -987,10 +1214,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="commander.name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1036,10 +1263,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[0].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1085,10 +1312,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[1].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1135,17 +1362,15 @@ const putformData = () => {
 
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row">
-        <div class="col-12 text-top2 row items-center">
-          คณะกรรมการ
-        </div>
+        <div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="chairman.name"
             outlined
-            :options="option"
             label="คณะกรรมการ"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1192,7 +1417,7 @@ const putformData = () => {
 
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 88123d2de..7fa0612c2 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -1,31 +1,104 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const myForm = ref<QForm>();
 const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
-const develop = ref<number>();
-const result = ref<number>();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const assignId = ref<string>(route.params.form.toString());
 
-// part new
+const assign = ref<any>([]);
+const mentors = ref<any>([]);
+const commander = ref<any>([]);
+const evaluate = ref<any>([]);
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+  fecthResult(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateReportcreate(id))
+    .then((res) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      mentors.value = res.data.data.mentors;
+
+      director_id.value = res.data.data.commander.name;
+      director_id2.value = mentors.value[0].name;
+      director_id3.value = mentors.value[1].name;
+
+      commander.value.push(res.data.data.commander);
+      optionDirector.value = mentors.value;
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const date_start = ref<Date>(new Date("10-10-2023"));
 const date_finish = ref<Date>();
+const develop = ref<number>();
+const result = ref<number>();
 const reson = ref<string>("");
+const chairman_dated = ref<string>("");
+const director1_dated = ref<string>("");
+const director2_dated = ref<string>("");
+const fecthResult = async (id: string) => {
+  await http
+    .get(config.API.evaluateReport(id))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      date_start.value = data.date_start;
+      date_finish.value = data.date_finish;
+      develop.value = Number(data.develop_complete);
+      result.value = Number(data.pass_result);
+      reson.value = data.reson;
+      chairman_dated.value = data.chairman_dated;
+      director1_dated.value = data.director1_dated;
+      director2_dated.value = data.director2_dated;
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
 
-const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
-const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+// part new
+
+const options = [
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" },
+];
+const optionsResult = [
+  { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
+  { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+];
 
 const director_id = ref<any>(null);
-const director_dated = ref<any>();
+
 const director_id2 = ref<any>(null);
-const director_dated2 = ref<any>();
 const director_id3 = ref<any>(null);
-const director_dated3 = ref<any>();
-const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const optionDirector = ref<any>([]);
 
 const savaForm = async () => {
   await myForm.value!.validate().then((result: boolean) => {
@@ -41,40 +114,56 @@ const savaForm = async () => {
       })
         .onOk(async () => {
           postData();
-
         })
-        .onCancel(() => { })
-        .onDismiss(() => { });
+        .onCancel(() => {})
+        .onDismiss(() => {});
     }
   });
-
 };
 
 const postData = async () => {
   const data = await {
-    date_start: date_start.value,
+    start_date: date_start.value,
     date_finish: date_finish.value,
-    director_id: director_id.value,
-    director_dated: director_dated.value,
-    director_id2: director_id2.value,
-    director_dated2: director_dated2.value,
-    director_id3: director_id3.value,
-    director_dated3: director_dated3.value,
-  }
+    develop_complete: develop.value,
+    pass_result: result.value,
+    reson: reson.value,
+    chairman_dated: chairman_dated.value,
+    director1_dated: director1_dated.value,
+    director2_dated: director2_dated.value,
+  };
 
-  console.log("postData===>", data)
+  console.log("postData===>", data);
+  await http
+    .post(config.API.createformReport(assignId.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    });
 };
 </script>
 
 <template>
   <div class="row col-12 q-mr-md">
     <q-form ref="myForm">
-
+      <div class="toptitle text-dark col-12 row items-center">
+        <div>แบบรายงานการประเมินฯ</div>
+      </div>
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -82,12 +171,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
-  ]">
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -95,8 +194,15 @@ const postData = async () => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -104,12 +210,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  " :label="`${'ถึงวันที่'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
-  ]">
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -121,24 +237,62 @@ const postData = async () => {
 
       <div class="col-12 row q-mt-xs">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
-            :options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
-            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="options"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
       <div class="col-12 row q-mt-lg">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
-            :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
-            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
-
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="optionsResult"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            outlined
+            v-model="result"
+            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
 
       <div class="col-12 row q-mt-lg">
         <div class="col-12">
-          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
-            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+          <q-input
+            hide-bottom-space
+            :readonly="edit"
+            dense
+            borderless
+            :outlined="!edit"
+            class="bg-white"
+            type="textarea"
+            v-model="reson"
+            label="เหตุผล"
+            :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
+          />
         </div>
       </div>
 
@@ -152,11 +306,26 @@ const postData = async () => {
             ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label=""
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -164,10 +333,22 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -182,11 +363,26 @@ const postData = async () => {
             ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -194,10 +390,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -212,11 +422,26 @@ const postData = async () => {
             ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -224,10 +449,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -266,4 +505,4 @@ const postData = async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index d390c77db..de36f904d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -1,14 +1,127 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { formatDate } from "@fullcalendar/core";
+// import { formatDate } from "@fullcalendar/core";
+
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
+const route = useRoute();
 const probationStore = useProbationDataStore();
-
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  notifyError,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+
+onMounted(async () => {
+  console.log(props.tab);
+  await fecthFormdata(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    await fecthFormRound(assignId.value, round.value);
+  }
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      // console.log(res);
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director.name;
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+};
+const fecthFormRound = async (id: string, no: string) => {
+  showLoader();
+  await http
+    .get(config.API.formevaluateround(id, no))
+    .then((res: any) => {
+      console.log(res);
+      let data = res.data.data.evaluate;
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      achievement_strength_desc.value = data.achievement_strength_desc;
+      achievement_improve_desc.value = data.achievement_improve_desc;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavior_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list1_1 = [
   { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
@@ -69,10 +182,8 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const option = ref<any>([]);
 
-const mixin = useCounterMixin();
-const { date2Thai, success, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -112,10 +223,10 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 // const etc_text2 = ref<string>("");
 // const ext_value2 = ref<number>(0);
-const behavio_strength_desc = ref<string>("");
+const behavior_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<nu>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -166,13 +277,13 @@ const savaForm = () => {
     competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
-    success_level.value === 0 ||
+    // success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
     achievement_improve_desc.value === "" ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
+    behavior_strength_desc.value === "" ||
     behavior_improve_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
@@ -200,6 +311,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -207,7 +321,7 @@ const putformData = () => {
     competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
-    success_level: success_level.value,
+    // success_level: success_level.value,
     achievement_other: achievement_other.value,
     // achievement_other_desc: etc_text.value,
     // achievement_other_level: ext_value.value,
@@ -228,13 +342,13 @@ const putformData = () => {
     // behavio_orther_desc: etc_text2.value,
     // behavio_orther_level: ext_value2.value,
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_strength_desc: behavior_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-
+    assessor_dated: dateToISO(dateAutherise.value),
     // commander_dated: dateAutherise.value,
   };
   $q.dialog({
@@ -248,29 +362,48 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      saveformdata(data);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.createformevaluate(assignId.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
 </script>
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบบันทึกผล</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -590,7 +723,7 @@ const putformData = () => {
         </q-list>
       </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+      <!-- <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
           <q-item dense tag="label" v-ripple>
             <q-item-section>
@@ -627,7 +760,7 @@ const putformData = () => {
             </q-item-section>
           </q-item>
         </q-list>
-      </q-card>
+      </q-card> -->
 
       <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
@@ -635,7 +768,7 @@ const putformData = () => {
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.8 อื่นๆ
+                1.7 อื่นๆ
                 <q-checkbox
                   class="q-ml-sm"
                   dense
@@ -965,7 +1098,7 @@ const putformData = () => {
           <q-input
             outlined
             dense
-            v-model="behavio_strength_desc"
+            v-model="behavior_strength_desc"
             class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
             lazy-rules
             type="textarea"
@@ -1129,6 +1262,8 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            option-label="name"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1174,7 +1309,7 @@ const putformData = () => {
     </div>
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
new file mode 100644
index 000000000..d665e8273
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -0,0 +1,1306 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+// import { formatDate } from "@fullcalendar/core";
+
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const probationStore = useProbationDataStore();
+const mixin = useCounterMixin();
+const { date2Thai, success, notifyError, dateToISO, messageError } = mixin;
+const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const round = ref<number>();
+
+onMounted(async () => {
+  await fecthFormdata(assignId.value);
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      console.log(res);
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      round.value = res.data.data.evaluate_no;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director.name;
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+};
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+const option = ref<any>([]);
+
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+
+// part 1
+const evaluate_expenct_level = ref<any>([
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
+]);
+const evaluate_ouptut = ref<any>([
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+]);
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false); // checkBox 1.8
+const achievement_other = ref<any>({ text: "", level: 0 });
+// const etc_text = ref<string>("");
+// const ext_value = ref<number>(0);
+const achievement_strength_desc = ref<string>("");
+const achievement_improve_desc = ref<string>("");
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>({ text: "", level: 0 });
+// const etc_text2 = ref<string>("");
+// const ext_value2 = ref<number>(0);
+const behavior_strength_desc = ref<string>("");
+const behavior_improve_desc = ref<string>("");
+// part 3
+const orientation = ref<any>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+
+//rules
+const evaluate_ouptutRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
+];
+const achievement_strengthRef = ref<any>(null);
+const achievement_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const achievement_inproveRef = ref<any>(null);
+const achievement_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  achievement_strengthRef.value.validate();
+  achievement_inproveRef.value.validate();
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+
+  let hasError = false;
+  const filterlevel1_1 = evaluate_expenct_level.value.filter(
+    (e: any) => e.level == 0
+  );
+  const filter_ouptut1_2 = evaluate_ouptut.value.filter(
+    (e: any) => e.level == 0 || e.text == ""
+  );
+
+  if (
+    filterlevel1_1.length != 0 ||
+    filter_ouptut1_2.length != 0 ||
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    achievement_strength_desc.value === "" ||
+    achievement_improve_desc.value === "" ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavior_strength_desc.value === "" ||
+    behavior_improve_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === "" ||
+        behavio_orther.value.text == undefined ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    evaluate_expenct_level: evaluate_expenct_level.value,
+    evaluate_ouptut: evaluate_ouptut.value,
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    // achievement_other_desc: etc_text.value,
+    // achievement_other_level: ext_value.value,
+    achievement_strength_desc: achievement_strength_desc.value,
+    achievement_improve_desc: achievement_improve_desc.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    // behavio_orther_desc: etc_text2.value,
+    // behavio_orther_level: ext_value2.value,
+    behavio_orther: behavio_orther.value,
+    behavior_strength_desc: behavior_strength_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+    assessor_dated: dateToISO(dateAutherise.value),
+    // commander_dated: dateAutherise.value,
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+      saveformdata(data);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.createformevaluate(assignId.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+</script>
+
+<template>
+  <q-card class="my-card" flat bordered>
+    <q-item>
+      <q-item-section>
+        <q-toolbar>
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="router.go(-1)"
+            />
+            การทดลองปฏิบัติหน้าที่ราชการของ {{ person.name }}
+          </div>
+        </q-toolbar>
+      </q-item-section>
+    </q-item>
+
+    <q-separator />
+
+    <q-card-section>
+      <q-separator vertical />
+
+      <q-card-section class="col-4">
+        <div class="row col-12 q-gutter-lg no-margin">
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_start)
+              }}</span>
+              ถึงวันที
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              <span class="text-black q-px-sm">{{
+                "ครั้งที่" + round
+              }}</span>
+              ระหว่างวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(start_date)
+              }}</span>
+              ถึงวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 q-pt-md">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+              ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+            </div>
+            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+              1.ผลผลิตของงานที่คาดหวัง
+            </div>
+            <q-card
+              flat
+              bordered
+              class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+            >
+              <q-list dense v-for="(list, i) in list1_1" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>{{ list.label }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="evaluate_expenct_level[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+              </q-list>
+            </q-card>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              1.2 ความสำเร็จของงานที่ได้รับมอบหมาย
+            </div>
+            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+              1.ผลผลิตของงานที่เกิดขึ้น
+            </div>
+            <q-card
+              flat
+              bordered
+              class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+            >
+              <q-list dense v-for="(list, i) in list1_2" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                    <q-input
+                      outlined
+                      dense
+                      v-model="evaluate_ouptut[i].text"
+                      class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                      lazy-rules
+                      type="textarea"
+                      label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                      hide-bottom-space
+                      :row="1"
+                      :rules="evaluate_ouptutRules"
+                    />
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="evaluate_ouptut[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
+              </q-list>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.2. ความรู้ความสามารถ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="knowledge_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. ทักษะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="skill_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="competency_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.6.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="success_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.8 อื่นๆ
+                      <q-checkbox
+                        class="q-ml-sm"
+                        dense
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section class="q-ml-md">
+                    <q-item-label>
+                      <q-input
+                        v-model="achievement_other.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="achievement_other.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                จุดเด่น (ไม่เกิน 5 บรรทัด)
+              </div>
+              <q-input
+                outlined
+                dense
+                v-model="achievement_strength_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="กรอกจุดเด่น"
+                hide-bottom-space
+                :row="5"
+                :rules="achievement_strengthRules"
+                ref="achievement_strengthRef"
+              />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+              </div>
+              <q-input
+                outlined
+                dense
+                v-model="achievement_improve_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                hide-bottom-space
+                label="กรอกสิ่งที่ควรปรับปรุง"
+                :row="5"
+                :rules="achievement_inproveRules"
+                ref="achievement_inproveRef"
+              />
+            </div>
+          </div>
+
+          <!-- Part 2 -->
+          <!-- <Part2 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.1 ความประพฤติ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_1" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="conduct_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.2 ความมีคุณธรรมจริยธรรม
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_2" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="moral_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.3 การรักษาวินัย
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_3" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="discipline_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.4 อื่นๆ
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc2"
+                  @click="
+                    (behavio_orther.text = ''), (behavio_orther.level = 0)
+                  "
+                />
+              </div>
+              <q-card
+                v-if="etc2"
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        <q-input
+                          v-model="behavio_orther.text"
+                          label="กรอกอื่นๆ"
+                          dense
+                          lazy-rules
+                          autogrow
+                          hide-bottom-space
+                          outlined
+                          class="bg-white"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                          ]"
+                        />
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="behavio_orther.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <!-- <FormComment /> -->
+            <div class="row col-12 q-gutter-lg no-margin">
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  จุดเด่น (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavior_strength_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  label="กรอกจุดเด่น"
+                  hide-bottom-space
+                  :row="5"
+                  :rules="behavio_strengthRules"
+                  ref="behavio_strengthRef"
+                />
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavior_improve_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  hide-bottom-space
+                  label="กรอกสิ่งที่ควรปรับปรุง"
+                  :row="5"
+                  :rules="behavio_inproveRules"
+                  ref="behavio_inproveRef"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Part 3 -->
+          <!-- <Part3 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row justify-center">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label
+                        >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                        (ถ้ามี)</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <!-- <Footer /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                ผู้บังคับบัญชา/ผู้มอบหมายงาน
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="Autherise"
+                  outlined
+                  :options="option"
+                  label="ผู้บังคับบัญชา"
+                  option-label="name"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        class="full-width datepicker col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : null
+                        "
+                        :label="`${'ลงวันที่'}`"
+                        :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      >
+                        <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>
+            </div>
+          </div>
+          <q-toolbar class="text-primary">
+            <q-space />
+            <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+          </q-toolbar>
+        </div>
+      </q-card-section>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index 5e87f4d44..05c1dcc30 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -1,23 +1,43 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-const tabHead = ref<string>("save1");
+import { ref, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
+const router = useRouter();
+
+const tabHead = ref<string>("save1");
 const props = defineProps({
   changeTab: {
     type: Function,
     default() {
-      return 'Default function'
-    }
-  }
-})
+      return "Default function";
+    },
+  },
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props);
+});
 
 watch(tabHead, () => {
-  props.changeTab(tabHead.value)
+  console.log(props);
+
+  props.changeTab(tabHead.value);
 });
+const nextPage = () => {
+  if (props.activeTab) {
+    router.push(
+      "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
+    );
+  }
+
+  // const url =
+  //   "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
+  // window.open(url, "_blank");
+};
 </script>
 
 <template>
-      <q-header class="bg-grey-1">
+  <q-header class="bg-grey-1">
     <div class="bg-grey-1">
       <div class="col-12 row q-gutter-x-md items-center">
         <q-tabs
@@ -103,7 +123,7 @@ watch(tabHead, () => {
             </q-btn> -->
         </q-tabs>
         <div>
-          <q-btn color="blue" flat dense icon="mdi-plus">
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
             <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
@@ -111,5 +131,4 @@ watch(tabHead, () => {
       <q-separator />
     </div>
   </q-header>
-
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
index 251df64ee..d930a13b9 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
@@ -1,31 +1,152 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, watch, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, success } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+
+const evaluate = ref<any>([]);
+const tabHead = ref<string>("save1");
+const tabs = ref<any>([]);
 const tab = ref<string>("save1");
+const activeTab = ref<string>("tab2");
+
+const props = defineProps({
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props.activeTab);
+  // fecthAssign(assignId.value);
+});
+watch(props, () => {
+  console.log(props);
+});
+// const fecthAssign = async (id: string) => {
+//   showLoader();
+//   await http
+//     .get(config.API.formevaluate(id))
+//     .then((res: any) => {
+//       evaluate.value = res.data.data.evaluate;
+//       tabs.value = evaluate.value;
+
+//       console.log(tabs.value);
+//     })
+//     .catch((e: any) => {
+//       console.log(e);
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+  console.log(tabVal);
+  tab.value = tabVal;
+};
+const nextPage = () => {
+  const newTabLabel = tabs.value.length + 1;
+  tabs.value.push({ no: newTabLabel });
+};
 
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormSaveResult = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
+    )
+);
+</script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <Header :change-tab="changeTab" :activeTab="activeTab" />
+  <!-- <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-xs-md items-center">
+        <q-tabs
+          dense
+          v-model="tabHead"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab
+            v-for="tabData in tabs"
+            :key="tabData.no"
+            :name="tabData.no"
+            :label="'ครั้งที่' + tabData.no"
+            @click="changeTab('save' + tabData.no)"
+          >
+            <q-btn
+              size="12px"
+              flat
+              dense
+              icon="mdi-download"
+              :disable="tabHead !== tabData.no"
+              :color="tabHead !== tabData.no ? 'grey' : 'add'"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar
+                      ><q-icon color="red" name="mdi-file-pdf"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .PDF</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar
+                      ><q-icon color="blue" name="mdi-file-word"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .docx</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-tab>
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
+            <q-tooltip> เพิ่ม </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header> -->
+  <!-- <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="tabName in tabs"
+        :key="tabName"
+        :name="'save' + tabName.no"
+      >
+        <FormSaveResult :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container> -->
 
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
index 72f5cc6db..8c7ac36af 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
@@ -18,11 +18,11 @@ const FormEvaluate = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab"/>
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 3e5e91bdf..85be758b1 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -2,15 +2,21 @@
 import { ref, defineAsyncComponent } from "vue";
 const tab = ref<string>("save1");
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+  tab.value = tabVal;
+};
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormEvaluateScore = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
+    )
+);
+</script>
 
 <template>
   <Header :change-tab="changeTab" />
@@ -18,12 +24,12 @@ const FormEvaluateScore = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluateScore />
+        <FormEvaluateScore :tab="tab" />
       </q-tab-panel>
 
-      <!-- <q-tab-panel name="save2">
-        <FormEvaluateScore />
-      </q-tab-panel> -->
+      <q-tab-panel name="save2">
+        <FormEvaluateScore :tab="tab" />
+      </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 0eade7fc3..8ad5c3a0f 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -112,7 +112,7 @@ const activeTab = ref<string>("tab1");
             </q-tab-panel>
 
             <q-tab-panel name="tab2">
-              <TabsTemplate1 />
+              <TabsTemplate1 :activeTab="activeTab"/>
             </q-tab-panel>
 
             <q-tab-panel name="tab3">
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 614adfb7c..81d7b1e73 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -50,10 +50,11 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-  const receiveDetail = () =>
+const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-  const ReceiveAdd = () =>
+const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
+const FormSaveResultAdd = () => import("/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue")
 
 export default [
   {
@@ -156,6 +157,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/detail/add/:id/:form",
+    name: "probationFormAdd",
+    component: FormSaveResultAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
   {
     path: "/probation/work/add",
     name: "probationWorkAdd",

From 8710baa6438862ced1ecf7e636b82e8638ed3987 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 11 Aug 2023 17:09:10 +0700
Subject: [PATCH 08/11] =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20ui?=
 =?UTF-8?q?=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  13 +-
 .../components/Repatriate/RepatriateMain.vue  | 610 ++++++++++++++++++
 .../components/Repatriate/RepatriatebyId.vue  | 508 +++++++++++++++
 .../helpgovernment/governmentDetail.vue       | 402 +++++++++---
 .../components/helpgovernment/mainHelp.vue    | 256 +++-----
 src/modules/05_placement/router.ts            |  28 +-
 6 files changed, 1549 insertions(+), 268 deletions(-)
 create mode 100644 src/modules/05_placement/components/Repatriate/RepatriateMain.vue
 create mode 100644 src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 66d662813..f86b18453 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -103,19 +103,24 @@ export default {
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
-  officerMain: () => `${placement}/officer`,
-  officerDetail: (id:string) => `${placement}/officer/${id}`,
-  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
+
 
   // แต่งตั้ง-เลื่อน
   placemenAppointment,
 
   // ช่วยราชการ
   placemenHelpGov,
+  officerMain: () => `${placement}/officer`,
+  officerDetail: (id:string) => `${placement}/officer/${id}`,
+  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
+  officerMainReport: () => `${placement}/officer/report`,
 
   // ส่งตัวกลับ
   placemenRepatriation,
-
+  repatriationMain: () => `${placement}/repatriation`,
+  repatriationDetail: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationMainDelete: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationMainReport: () => `${placement}/repatriation/report`,
   // ขอย้าย
   placemenRelocation,
 
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
new file mode 100644
index 000000000..2deb571b2
--- /dev/null
+++ b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
@@ -0,0 +1,610 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+const selected = ref<officerType[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+
+  
+} = mixin;
+
+const modal = ref<boolean>(false);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
+  "btn",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<officerType[]>([]);
+const rows2 = ref<any>([
+  {
+    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
+    fullname: "นางสาวอย พชช",
+    position: "นักบริหาร",
+    positionLevel: "ต้น",
+    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+    agency: "กลุ่มงานกุมารเวชกรรม",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btn",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "btn",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+//--------------(ปุ่มลบ)----------------//
+
+const openDetail = (id:string) => {
+  router.push(`/repatriate/detail/${id}`)
+}
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+const openModalOrder = () => {
+  openModal();
+  const row = rows.value.filter(
+    (item: officerType) =>
+      item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.repatriationMain())
+    .then((res: any) => {
+      const data = res.data.result;
+      console.log("data==>", data);
+      rows.value = data.map((item: officerType) => ({
+        id: item.id,
+        fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
+        position: item.position,
+        posNo: item.posNo,
+        positionLevel: item.positionLevel,
+        createdAt: date2Thai(item.createdAt),
+        organization: item.organization,
+        reason: item.reason,
+        status: item.status,
+        statusText:statusText(item.status),
+        date: item.date,
+        salary: item.salary,
+        positionTypeOld: item.positionTypeOld,
+        positionLevelOld: item.positionLevelOld,
+        positionNumberOld: item.positionNumberOld,
+        organizationPositionOld: item.organizationPositionOld,
+        isActive: item.isActive,
+      })
+      );
+      console.log(rows.value )
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const saveOrder = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.repatriationMainReport(), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งส่งตัวกลับสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+const deleteData = async (id:string) => {
+  await http
+  .delete(config.API.repatriationMainDelete(id))
+  .then((res)=>{
+    success($q, "ลบข้อมูลสำเร็จ");
+    console.log(res)
+  })
+  .catch((e) => {
+          messageError($q, e);
+        })
+  .finally(async () => {
+          await getData();
+        });
+}
+
+
+const clickDelete = async (name:string,id:string) => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูลของ ${name}`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await deleteData(id)
+    ,
+    async () => await getData()
+    
+  );
+};
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการส่งตัวกลับ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งส่งตัวกลับ</q-tooltip>
+          </q-btn>
+
+          <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 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <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-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td key="no" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td key="position" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+                </q-td>
+                <q-td key="organization" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+                </q-td>
+                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.statusText }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    icon="delete"
+                    size="14px"
+                    color="red-7"
+                    flat
+                    round
+                    dense
+                    @click="clickDelete(props.row.fullname,props.row.id)"
+                  >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งส่งตัวกลับ" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="personalId"
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <!-- <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template> -->
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organizationPositionOld }}
+              </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organization }}
+              </div>
+              </q-td>
+              <q-td key="statusText" :props="props">
+                {{ props.row.statusText }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
new file mode 100644
index 000000000..2f214ec16
--- /dev/null
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -0,0 +1,508 @@
+<template>
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      รายละเอียดการส่งตัวกลับ {{ fullname }}
+    </div>
+    <q-card bordered class="row col-12 text-dark">
+      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
+        <q-space />
+        <q-btn
+          outline
+          color="blue"
+          dense
+          icon-right="mdi-open-in-new"
+          class="q-px-sm"
+          label="ดูข้อมูลทะเบียนประวัติ"
+          @click="router.push(`/registry/${personId}`)"
+        />
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-3 col-sm-2 col-md-1 row">
+            <q-img src="@/assets/avatar_user.jpg" />
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12 q-pl-md">
+              <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+              <div class="col-12 text-detail">
+                {{ positionTypeOld }}
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <div class="col-12 text-top">ระดับ</div>
+              <div class="col-12 text-detail">
+                {{ positionLevelOld }}
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <div class="col-12 text-top">สังกัด</div>
+              <div class="col-12 text-detail">
+                {{ organizationPositionOld }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </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>
+        <q-space />
+        <div class="q-gutter-sm" v-if="!edit">
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="conditionSave"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
+        </div>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <q-form ref="myForm">
+        <div class="row col-12 q-pa-md">
+          <div class="col-12 row bg-white q-col-gutter-md">
+            <div class="col-xs-12 row items-center">
+              <div class="col-12">
+                <div class="text-weight-bold text-grey">
+                  ตำแหน่งและหน่วยงานเดิม
+                </div>
+              </div>
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="organizationPositionOld"
+                  :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionTypeOld"
+                  :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่งประเภท'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionLevelOld"
+                  :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                  hide-bottom-space
+                  :label="`${'ระดับ'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="posNo"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row items-center">
+              <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"
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-6 col-sm-6 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="organization"
+                  :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'โอนไปสังกัด'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-6 row items-center">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  :readonly="!edit"
+                  v-model="date"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  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="date !== null ? date2Thai(date) : null"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      hide-bottom-space
+                      :label="`${'ตั้งแต่วัน'}`"
+                    >
+                      <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>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+                hide-bottom-space
+                :label="`${'หมายเหตุ '}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </div>
+      </q-form>
+    </q-card>
+  </template>
+  <script setup lang="ts">
+  import { onMounted, ref } from "vue";
+  import { useQuasar } from "quasar";
+  import { useRoute, useRouter } from "vue-router";
+  import { useCounterMixin } from "@/stores/mixin";
+  
+  import http from "@/plugins/http";
+  import config from "@/app.config";
+  import keycloak from "@/plugins/keycloak";
+  
+  import type { QTableProps, QForm } from "quasar";
+  // import type {
+  //   TypeFile,
+  //   ResponseDataDetail,
+  // } from "@/modules/05_placement/interface/response/Transfer";
+  
+  const $q = useQuasar();
+  const route = useRoute();
+  const router = useRouter();
+  const mixin = useCounterMixin();
+  const edit = ref<boolean>(false);
+  const personId = route.params.id as string;
+  const {
+    date2Thai,
+    dialogMessage,
+    messageError,
+    showLoader,
+    hideLoader,
+    success,
+  } = mixin;
+  
+  const roleAdmin = ref<boolean>(false);
+  const myForm = ref<QForm | null>(null);
+  const name = ref<string>("นายสมคิด ยอดใจ");
+  const level = ref<string>("ชำนาญการพิเศษ");
+  const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+  const fullname = ref<string>("");
+  const id = ref<string>("");
+  const prefix = ref<string>("");
+  const firstName = ref<string>("");
+  const lastName = ref<string>("");
+  const position = ref<string>("");
+  const posNo = ref<string>("");
+  const positionLevel = ref<string>("");
+  const createdAt = ref<string>("");
+  const organization = ref<string>("");
+  const reason = ref<string>("");
+  const status = ref<string>("");
+  const date = ref<Date | null>(null);
+  const salary = ref<string>("");
+  const positionTypeOld = ref<string>("");
+  const positionLevelOld = ref<string>("");
+  const positionNumberOld = ref<string>("");
+  const organizationPositionOld = ref<string>("");
+  const isActive = ref<string>("");
+  // const responseData = ref<ResponseDataDetail>({
+  //   createdAt: new Date(),
+  //   date: new Date(),
+  //   id: "",
+  //   organization: "",
+  //   organizationPositionOld: "",
+  //   positionLevelOld: "",
+  //   positionNumberOld: "",
+  //   positionTypeOld: "",
+  //   reason: "",
+  //   salary: 0,
+  //   status: "",
+  // });
+  
+  // const rows = ref<TypeFile[]>([]);
+  // const columns = ref<QTableProps["columns"]>([
+  //   {
+  //     name: "no",
+  //     align: "left",
+  //     label: "ลำดับ",
+  //     sortable: true,
+  //     field: "no",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //   },
+  //   {
+  //     name: "fileName",
+  //     align: "left",
+  //     label: "ชื่อไฟล์",
+  //     sortable: true,
+  //     field: "fileName",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //   },
+  //   {
+  //     name: "btnMicrosoft",
+  //     align: "right",
+  //     label: "ปุ่ม",
+  //     sortable: true,
+  //     field: "btnMicrosoft",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //   },
+  // ]);
+  
+  const getData = async () => {
+    showLoader();
+    await http
+      .get(config.API.repatriationDetail(personId))
+      .then((res: any) => {
+        const data = res.data.result;
+        (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
+          (id.value = data.id);
+        prefix.value = data.prefix;
+        firstName.value = data.firstName;
+        lastName.value = data.lastName;
+        position.value = data.position;
+        posNo.value = data.posNo;
+        positionLevel.value = data.positionLevel;
+        createdAt.value = data.createdAt;
+        organization.value = data.organization;
+        reason.value = data.reason;
+        status.value = data.status;
+        date.value = data.date;
+        salary.value = data.salary;
+        positionTypeOld.value = data.positionTypeOld;
+        positionLevelOld.value = data.positionLevelOld;
+        positionNumberOld.value = data.positionNumberOld;
+        organizationPositionOld.value = data.organizationPositionOld;
+        isActive.value = data.isActive;
+      })
+      .catch((e) => {
+        //   messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  };
+  const getClass = (val: boolean) => {
+    return {
+      "full-width inputgreen cursor-pointer": val,
+      "full-width cursor-pointer": !val,
+    };
+  };
+  //
+  const conditionSave = async () => {
+    if (myForm.value !== null) {
+      myForm.value.validate().then((success: any) => {
+        if (success) {
+          dialogMessage(
+            $q,
+            "ต้องการแก้ไขข้อมูลหรือไม่?",
+            "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+            "mdi-help-circle-outline",
+            "ตกลง",
+            "public",
+            async () => await saveData(),
+            undefined
+          );
+        }
+      });
+    }
+  };
+  const saveData = async () => {
+    const body = {
+      organization: organization.value,
+      reason: reason.value,
+      organizationPositionOld: organizationPositionOld.value,
+      date: date.value,
+      positionTypeOld: positionTypeOld.value,
+      positionLevelOld: positionLevelOld.value,
+      positionNumberOld: posNo.value,
+      amountOld: salary.value,
+    };
+    showLoader();
+    await http
+      .put(config.API.transferId(personId.toString()), body)
+      .then((res: any) => {
+        //   const data = res.data.result;
+        //   console.log(data);
+        success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+        edit.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await getData();
+        hideLoader();
+      });
+  };
+  
+  // const confirmMessage = async () => {
+  //     dialogMessage(
+  //       $q,
+  //       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+  //       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+  //       "mdi-help-circle-outline",
+  //       "ยืนยัน",
+  //       "primary",
+  //       () => sendConfirm(),
+  //       undefined
+  //     );
+  //   };
+  // const sendConfirm = async () => {
+  //     showLoader();
+  //     await http
+  //       .get(config.API.transferConfirmId(personId.toString()))
+  //       .then((res: any) => {
+  //         //   const data = res.data.result;
+  //         //   console.log(data);
+  //         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+  //       })
+  //       .catch((e) => {
+  //         messageError($q, e);
+  //       })
+  //       .finally(async () => {
+  //         await getData();
+  //         hideLoader();
+  //       });
+  //   };
+  onMounted(async () => {
+    await getData();
+  });
+  </script>
+  <style lang="scss" scope>
+  .q-img {
+    border-radius: 5px;
+    height: 70px;
+  }
+  .text-top {
+    color: gray;
+    font-weight: 400;
+    padding-bottom: 3px;
+  }
+  .text-detail {
+    font-weight: 500;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 08c864fc6..716269933 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -10,7 +10,7 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการขอโอนช่วยราชการ {{ fullname }}
+    รายละเอียดการช่วยราชการ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
@@ -48,7 +48,7 @@
             </div>
           </div>
         </div>
-        <div class="col-xs-6 col-sm-5 row items-center">
+        <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
             <div class="col-12 text-detail">
@@ -63,50 +63,212 @@
   <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>
       <q-space />
-      <q-btn
-        v-if="!roleAdmin"
-        outline
-        color="primary"
-        dense
-        icon-right="arrow_forward"
-        class="q-px-sm"
-        label="ส่งคำร้องไปยัง สกจ."
-        @click=""
-      />
-      <q-btn
-        v-else
-        outline
-        color="primary"
-        dense
-        icon-right="download"
-        class="q-px-sm"
-        label="ดาวน์โหลด"
-      />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
-            <div class="col-12 text-detail">
-              {{ responseData.organization }}
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
-            <div class="col-12 text-detail">
-              {{ responseData.reason }}
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <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"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'โอนไปสังกัด'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                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="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <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>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </q-form>
   </q-card>
 </template>
 <script setup lang="ts">
@@ -119,17 +281,17 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
-import type { QTableProps } from "quasar";
-import type {
-  TypeFile,
-  ResponseDataDetail,
-} from "@/modules/05_placement/interface/response/Transfer";
+import type { QTableProps, QForm } from "quasar";
+// import type {
+//   TypeFile,
+//   ResponseDataDetail,
+// } from "@/modules/05_placement/interface/response/Transfer";
 
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-
+const edit = ref<boolean>(false);
 const personId = route.params.id as string;
 const {
   date2Thai,
@@ -141,11 +303,11 @@ const {
 } = mixin;
 
 const roleAdmin = ref<boolean>(false);
-
+const myForm = ref<QForm | null>(null);
 const name = ref<string>("นายสมคิด ยอดใจ");
 const level = ref<string>("ชำนาญการพิเศษ");
 const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const fullname = ref<string>("")
+const fullname = ref<string>("");
 const id = ref<string>("");
 const prefix = ref<string>("");
 const firstName = ref<string>("");
@@ -157,57 +319,57 @@ const createdAt = ref<string>("");
 const organization = ref<string>("");
 const reason = ref<string>("");
 const status = ref<string>("");
-const date = ref<string>("");
+const date = ref<Date | null>(null);
 const salary = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const isActive = ref<string>("");
-const responseData = ref<ResponseDataDetail>({
-  createdAt: new Date(),
-  date: new Date(),
-  id: "",
-  organization: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  reason: "",
-  salary: 0,
-  status: "",
-});
+// const responseData = ref<ResponseDataDetail>({
+//   createdAt: new Date(),
+//   date: new Date(),
+//   id: "",
+//   organization: "",
+//   organizationPositionOld: "",
+//   positionLevelOld: "",
+//   positionNumberOld: "",
+//   positionTypeOld: "",
+//   reason: "",
+//   salary: 0,
+//   status: "",
+// });
 
-const rows = ref<TypeFile[]>([]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fileName",
-    align: "left",
-    label: "ชื่อไฟล์",
-    sortable: true,
-    field: "fileName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "btnMicrosoft",
-    align: "right",
-    label: "ปุ่ม",
-    sortable: true,
-    field: "btnMicrosoft",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
+// const rows = ref<TypeFile[]>([]);
+// const columns = ref<QTableProps["columns"]>([
+//   {
+//     name: "no",
+//     align: "left",
+//     label: "ลำดับ",
+//     sortable: true,
+//     field: "no",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "fileName",
+//     align: "left",
+//     label: "ชื่อไฟล์",
+//     sortable: true,
+//     field: "fileName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "btnMicrosoft",
+//     align: "right",
+//     label: "ปุ่ม",
+//     sortable: true,
+//     field: "btnMicrosoft",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+// ]);
 
 const getData = async () => {
   showLoader();
@@ -215,8 +377,8 @@ const getData = async () => {
     .get(config.API.officerDetail(personId))
     .then((res: any) => {
       const data = res.data.result;
-      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`,
-      id.value = data.id;
+      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
+        (id.value = data.id);
       prefix.value = data.prefix;
       firstName.value = data.firstName;
       lastName.value = data.lastName;
@@ -236,14 +398,67 @@ const getData = async () => {
       isActive.value = data.isActive;
     })
     .catch((e) => {
-    //   messageError($q, e);
+      //   messageError($q, e);
     })
     .finally(() => {
       hideLoader();
     });
 };
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+//
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success: any) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.transferId(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
 
-//   const confirmMessage = async () => {
+// const confirmMessage = async () => {
 //     dialogMessage(
 //       $q,
 //       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
@@ -255,8 +470,7 @@ const getData = async () => {
 //       undefined
 //     );
 //   };
-
-//   const sendConfirm = async () => {
+// const sendConfirm = async () => {
 //     showLoader();
 //     await http
 //       .get(config.API.transferConfirmId(personId.toString()))
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
index a36b8a59d..26c1e5a24 100644
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@@ -4,16 +4,17 @@ import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
-const selected = ref([]);
+const selected = ref<officerType[]>([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -31,6 +32,7 @@ const {
   hideLoader,
   success,
   dialogMessage,
+
   
 } = mixin;
 
@@ -39,18 +41,10 @@ const visibleColumns = ref<string[]>([
   "no",
   "fullname",
   "position",
-  "posNo",
   "positionLevel",
-  "organization",
-  "reason",
-  "status",
-  "date",
-  "salary",
-  "positionTypeOld",
-  "positionLevelOld",
-  "positionNumberOld",
   "organizationPositionOld",
-  "createdAt",
+  "organization",
+  "statusText",
   "btn",
 ]);
 const visibleColumns2 = ref<string[]>([
@@ -58,9 +52,9 @@ const visibleColumns2 = ref<string[]>([
   "fullname",
   "position",
   "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -141,70 +135,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันเวลาที่ขอย้าย",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionTypeOld",
-    align: "left",
-    label: "ตำแหน่งในสายงานก่อนหน้า",
-    sortable: true,
-    field: "positionTypeOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionNumberOld",
-    align: "left",
-    label: "เลขที่ตำเเหน่งก่อนหน้า",
-    sortable: true,
-    field: "positionNumberOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevelOld",
-    align: "left",
-    label: "ระดับก่อนหน้า",
-    sortable: true,
-    field: "positionLevelOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "หน่วยงานก่อนหน้า",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือนก่อนหน้า",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "reason",
-    align: "left",
-    label: "เหตุผลที่ย้ายหน่วยงาน",
-    sortable: true,
-    field: "reason",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
   {
     name: "position",
     align: "left",
@@ -214,18 +144,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
-  {
-    name: "posNo",
-    align: "left",
-    label: "เลขที่ตำเเหน่ง",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-
   {
     name: "positionLevel",
     align: "left",
@@ -235,7 +153,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "organization",
     align: "left",
@@ -246,11 +172,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statusText",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statusText",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -302,29 +228,29 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "agency",
+    name: "organization",
     align: "left",
     label: "หน่วยงานที่ขอโอนไป",
     sortable: true,
-    field: "agency",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statusText",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statusText",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -337,7 +263,14 @@ const openDetail = (id:string) => {
 }
 const openModal = () => (modal.value = true);
 const closeModal = () => (modal.value = false);
-
+const openModalOrder = () => {
+  openModal();
+  const row = rows.value.filter(
+    (item: officerType) =>
+      item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
+  );
+  rows2.value = row;
+};
 const getData = async () => {
   showLoader();
   await http
@@ -355,6 +288,7 @@ const getData = async () => {
         organization: item.organization,
         reason: item.reason,
         status: item.status,
+        statusText:statusText(item.status),
         date: item.date,
         salary: item.salary,
         positionTypeOld: item.positionTypeOld,
@@ -364,6 +298,7 @@ const getData = async () => {
         isActive: item.isActive,
       })
       );
+      console.log(rows.value )
     })
     .catch((e) => {
       // messageError($q, e);
@@ -372,7 +307,29 @@ const getData = async () => {
       hideLoader();
     });
 };
+const saveOrder = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
 
+  showLoader();
+  await http
+    .post(config.API.officerMainReport(), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
 const deleteData = async (id:string) => {
   await http
   .delete(config.API.officerMainDelete(id))
@@ -387,6 +344,8 @@ const deleteData = async (id:string) => {
           await getData();
         });
 }
+
+
 const clickDelete = async (name:string,id:string) => {
   dialogMessage(
     $q,
@@ -413,14 +372,14 @@ onMounted(async () => {
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="openModal"
+            @click="openModalOrder"
             size="14px"
             flat
             round
             color="add"
             icon="mdi-account-arrow-right"
           >
-            <q-tooltip>ส่งไปออกคำสั่งโอนออก</q-tooltip>
+            <q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
           </q-btn>
 
           <q-space />
@@ -485,77 +444,36 @@ onMounted(async () => {
                 <q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td key="positionTypeOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionTypeOld }}
-                </q-td>
-                <q-td key="positionNumberOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionNumberOld }}
-                </q-td>
-                <q-td key="positionLevelOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionLevelOld }}
-                </q-td>
-                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.organizationPositionOld }}
-                </q-td>
-                <q-td key="salary" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.salary }}
-                </q-td>
-                <q-td key="reason" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.reason }}
-                </q-td>
                 <q-td key="position" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.position }}
                 </q-td>
-                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.posNo }}
-                </q-td>
                 <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.positionLevel }}
                 </q-td>
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+                </q-td>
                 <q-td key="organization" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
                   {{ props.row.organization }}
+                </div>
                 </q-td>
-                <q-td key="agency" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.agency }}
-                </q-td>
-                <q-td key="status" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.status }}
+                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
                   <q-btn
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
+                    icon="delete"
+                    size="14px"
+                    color="red-7"
                     flat
                     round
                     dense
+                    @click="clickDelete(props.row.fullname,props.row.id)"
                   >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 100px">
-
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="clickDelete(props.row.fullname,props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
               </q-tr>
@@ -568,7 +486,7 @@ onMounted(async () => {
 
   <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
+      <DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
@@ -660,14 +578,18 @@ onMounted(async () => {
               <q-td key="positionLevel" :props="props">
                 {{ props.row.positionLevel }}
               </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organizationPositionOld }}
+              </div>
               </q-td>
-              <q-td key="agency" :props="props">
-                {{ props.row.agency }}
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organization }}
+              </div>
               </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
+              <q-td key="statusText" :props="props">
+                {{ props.row.statusText }}
               </q-td>
             </q-tr>
           </template>
@@ -677,7 +599,7 @@ onMounted(async () => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="ส่งไปออกคำสั่ง"
-          @click=""
+          @click="saveOrder"
           :disable="checkSelected"
           color="public"
         />
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 216bfdf50..d3c92e87f 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -33,7 +33,10 @@ const RepatriationOrder = () =>
   import("@/modules/05_placement/components/RepatriationOrder/List.vue");
 const RepatriationOrderAdd = () =>
   import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
-
+  const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
+  const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
+  const repatriate = () => import("@/modules/05_placement/components/Repatriate/RepatriateMain.vue")
+  const repatriatebyId = () => import("@/modules/05_placement/components/Repatriate/RepatriatebyId.vue")
 //รับโอน
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
@@ -42,8 +45,7 @@ const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
   const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
-const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
-const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
+
 export default [
   {
     path: "/placement",
@@ -225,4 +227,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/repatriate",
+    name: "repatriate",
+    component: repatriate,
+    meta: {
+      Auth: true,
+      Key: [6.7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/repatriate/detail/:id",
+    name: "repatriatebyId",
+    component: repatriatebyId,
+    meta: {
+      Auth: true,
+      Key: [6.7],
+      Role: "placement",
+    },
+  },
 ];

From 45fce1e58a0add8f60d17f8a20131b86224152ac Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 17:24:42 +0700
Subject: [PATCH 09/11] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20api=20?=
 =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 244b63653..51f162272 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,8 +26,8 @@ const config = ref<any>({
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
     API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
-    API_PROBATION_URI: "http://192.168.1.151:7776/v1",
+    API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
+    // API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",

From d09dbda153468d2a925323d29655aca778c2e910 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Aug 2023 17:56:01 +0700
Subject: [PATCH 10/11] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20push.router?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormReport.vue   |  25 +-
 .../10_order/components/step/step01.vue       | 307 ++++++++++++++----
 2 files changed, 260 insertions(+), 72 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 7fa0612c2..440d88e8d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -19,12 +19,12 @@ const {
   hideLoader,
 } = mixin;
 const route = useRoute();
-const router = useRouter();
 const assignId = ref<string>(route.params.form.toString());
 
 const assign = ref<any>([]);
 const mentors = ref<any>([]);
 const commander = ref<any>([]);
+const status = ref<boolean>(true);
 const evaluate = ref<any>([]);
 
 onMounted(() => {
@@ -39,6 +39,8 @@ const fecthAssign = async (id: string) => {
       console.log(res);
       assign.value = res.data.data.assign;
       mentors.value = res.data.data.mentors;
+      date_start.value = assign.value.date_start;
+      date_finish.value = assign.value.date_finish;
 
       director_id.value = res.data.data.commander.name;
       director_id2.value = mentors.value[0].name;
@@ -55,14 +57,14 @@ const fecthAssign = async (id: string) => {
       hideLoader();
     });
 };
-const date_start = ref<Date>(new Date("10-10-2023"));
+const date_start = ref<Date>(new Date());
 const date_finish = ref<Date>();
 const develop = ref<number>();
 const result = ref<number>();
 const reson = ref<string>("");
 const chairman_dated = ref<string>("");
-const director1_dated = ref<string>("");
-const director2_dated = ref<string>("");
+const director1_dated = ref<any>("");
+const director2_dated = ref<any>("");
 const fecthResult = async (id: string) => {
   await http
     .get(config.API.evaluateReport(id))
@@ -77,6 +79,7 @@ const fecthResult = async (id: string) => {
       chairman_dated.value = data.chairman_dated;
       director1_dated.value = data.director1_dated;
       director2_dated.value = data.director2_dated;
+      status.value = false;
     })
     .catch((e) => {
       console.log(e);
@@ -87,11 +90,11 @@ const fecthResult = async (id: string) => {
 
 const options = [
   { value: 1, label: "พัฒนาครบ 3 ส่วน" },
-  { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
 ];
 const optionsResult = [
   { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
-  { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+  { value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
 ];
 
 const director_id = ref<any>(null);
@@ -272,6 +275,7 @@ const postData = async () => {
             emit-value
             map-options
             option-label="label"
+            option-value="value"
             outlined
             v-model="result"
             label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
@@ -371,7 +375,6 @@ const postData = async () => {
               :options="optionDirector"
               label=""
               option-label="name"
-             
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
@@ -430,7 +433,6 @@ const postData = async () => {
               :options="optionDirector"
               label=""
               option-label="name"
-             
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
@@ -479,7 +481,12 @@ const postData = async () => {
 
       <q-toolbar class="text-primary">
         <q-space />
-        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          @click="savaForm"
+          v-if="status"
+        />
       </q-toolbar>
     </q-form>
   </div>
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 9ba307395..1eef3cc73 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,10 +3,24 @@
     <q-form ref="myForm" class="q-pa-md">
       <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            :options="typeOrderOption" option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="typeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
           ) " -->
@@ -15,36 +29,73 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
         </div>
 
         <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
           <div class="col-6">
-            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
-              hide-bottom-space type="number" />
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+              :label="`${'คำสั่ง'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+              type="number"
+            />
           </div>
-          <label class="col-1 flex justify-center items-center text-bold">/</label>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
           <div class="col-5">
-            <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
-              @update:modelValue="clickEditRow">
+            <datepicker
+              v-model="dateYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:modelValue="clickEditRow"
+            >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`" dense outlined>
+                <q-input
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
+                  dense
+                  outlined
+                >
                 </q-input>
               </template>
             </datepicker>
           </div>
         </div>
         <div class="col-xs-5 col-md-3">
-          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -52,12 +103,24 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
-                " :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateCommand != null ? date2Thai(dateCommand) : null
+                "
+                :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -66,10 +129,24 @@
         </div>
 
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
-            option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="byOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
           ) " -->
@@ -77,25 +154,55 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
         </div>
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
         </div>
         <div class="col-12">
           <q-separator />
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
-            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -109,18 +216,39 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
-            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="registerOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateRegister"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -128,13 +256,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
-                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateRegister != null ? date2Thai(dateRegister) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -142,18 +282,38 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
-            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
-            input-debounce="0" />
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="announceOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAnnounce"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -161,13 +321,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -199,14 +371,22 @@ import type {
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, success, dialogMessage } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
+const router = useRouter();
 
 const props = defineProps({
   next: {
@@ -398,7 +578,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
 const submit = async () => {
   const formdata = {
@@ -446,6 +626,7 @@ const createListOrder = async (formData: Object) => {
     .then((res) => {
       const data = res.data.result;
       localStorage.setItem("orderId", data.id);
+      router.push(`/order/detail/${data.id}?step=${2}`);
       next();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })

From d163ac8e1c90aa2fc667f51af1ea34a1c6958c60 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 23:47:18 +0700
Subject: [PATCH 11/11] =?UTF-8?q?-=20add=20common=20dialog=20(remove,=20co?=
 =?UTF-8?q?nfirm=20&=20message=20notify)=20=E0=B9=81=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B9=83=E0=B8=8A=E0=B9=89=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87=20-=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20action=20=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=97=E0=B8=B8=E0=B8=81=E0=B8=AD=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=20-=20fix=20bug=20call=20function=20in=20cer?=
 =?UTF-8?q?tificate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Information/Certicate.vue      |   2 +-
 .../04_registry/components/Profile.vue        | 531 +++++--------
 .../components/OrderPlacement/step/step02.vue | 741 ------------------
 src/modules/10_order/components/Main.vue      |  10 +-
 .../10_order/components/step/step01.vue       | 310 ++------
 .../10_order/components/step/step02.vue       |  48 +-
 .../10_order/components/step/step03.vue       |  25 +-
 .../10_order/components/step/step04.vue       |  21 +-
 src/stores/mixin.ts                           |  75 ++
 9 files changed, 341 insertions(+), 1422 deletions(-)
 delete mode 100644 src/modules/05_placement/components/OrderPlacement/step/step02.vue

diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index 009b7a290..43bc56bed 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -292,7 +292,7 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index b2cda7dd5..2cde4cabd 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -6,17 +6,10 @@
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
         /> -->
-        <Information
-          v-model:statusEdit="statusEdit"
-          :fetchDataProfile="fetchData"
-        />
+        <Information v-model:statusEdit="statusEdit" :fetchDataProfile="fetchData" />
       </div>
       <div id="government" name="16" class="row col-12 q-mt-md">
-        <Government
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-          :employeeClass="employeeClass"
-        />
+        <Government v-model:statusEdit="statusEdit" :profileType="profileType" :employeeClass="employeeClass" />
       </div>
       <div id="address" name="17" class="row col-12 q-mt-md">
         <Address v-model:statusEdit="statusEdit" />
@@ -40,20 +33,11 @@
         <CoinedVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-        />
+        <AssessmentVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="position" name="7" class="row col-12 q-mt-md">
-        <SalaryVue
-          v-model:statusEdit="statusEdit"
-          v-if="profileType === 'officer'"
-        />
-        <SalaryEmployeeTempVue
-          v-model:statusEdit="statusEdit"
-          v-else-if="employeeClass === 'temp'"
-        />
+        <SalaryVue v-model:statusEdit="statusEdit" v-if="profileType === 'officer'" />
+        <SalaryEmployeeTempVue v-model:statusEdit="statusEdit" v-else-if="employeeClass === 'temp'" />
         <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
       </div>
       <div id="rule" name="8" class="row col-12 q-mt-md">
@@ -78,70 +62,29 @@
         <DocumentVue v-model:statusEdit="statusEdit" />
       </div>
     </div>
-    <q-page-sticky
-      position="top"
-      expand
-      class="bg-grey-2 text-white"
-      style="z-index: 99; padding: 0% 1% 0% 1%"
-    >
-      <div
-        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
-      >
-        <q-btn
-          flat
-          round
-          class="bg-teal-1 full-height"
-          color="primary"
-          icon="mdi-chevron-left"
-          dense
-          @click="router.go(-1)"
-        >
+    <q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
+      <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+        <q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
+          @click="router.go(-1)">
         </q-btn>
-        <q-avatar
-          v-if="imageUrl == null"
-          size="65px"
-          rounded
-          class="containerimage"
-        >
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="bg-grey-3"
-            style="object-fit: cover"
-          />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+        <q-avatar v-if="imageUrl == null" size="65px" rounded class="containerimage">
+          <img src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <q-avatar v-else size="65px" rounded class="containerimage">
           <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <div class="row items-center text-dark q-ml-md">
@@ -157,25 +100,25 @@
         <q-btn round flat color="blue" icon="mdi-file-document">
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="helpPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ช่วยราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="repatriationPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ส่งตัวกลับ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="appointPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>แต่งตั้ง-เลื่อน</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="relocationPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ย้าย</q-item-section>
@@ -187,25 +130,25 @@
                 <q-item-section>ถึงแก่กรรม</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="outPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ให้ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="dischargePost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ปลดออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="expulsionPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ไล่ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="otherPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>อื่นๆ</q-item-section>
@@ -215,15 +158,8 @@
           </q-menu>
         </q-btn>
 
-        <q-btn
-          round
-          flat
-          :color="reasonStatus ? 'primary' : 'pink-5'"
-          @click="clickRetire()"
-          :icon="
-            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
-          "
-        >
+        <q-btn round flat :color="reasonStatus ? 'primary' : 'pink-5'" @click="clickRetire()" :icon="reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
+          ">
           <q-tooltip>{{
             reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
           }}</q-tooltip>
@@ -237,9 +173,7 @@
                 <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
               </q-item>
               <q-item clickable v-close-popup @click="clickKp7Short()">
-                <q-item-section class="text-primary"
-                  >ประวัติแบบย่อ</q-item-section
-                >
+                <q-item-section class="text-primary">ประวัติแบบย่อ</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -251,20 +185,8 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ก.พ.7/ก.ก.1"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7" style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -279,20 +201,9 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7Short()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ประวัติแบบย่อ"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7Short"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7Short()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ประวัติแบบย่อ"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7Short"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -309,50 +220,28 @@
       <q-card-section class="q-py-sm row">
         <div class="text-h6">เลือกรูปภาพ</div>
         <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
+        <q-btn icon="close" unelevated round dense @click="closeImage" style="color: #ff8080; background-color: #ffdede">
           <q-tooltip>ปิดหน้านี้</q-tooltip>
         </q-btn>
       </q-card-section>
       <q-separator />
       <q-card-section class="col-12 row">
-        <div
-          class="row wrap items-start col-12 q-col-gutter-sm"
-          style="height: 320px; overflow: auto"
-        >
+        <div class="row wrap items-start col-12 q-col-gutter-sm" style="height: 320px; overflow: auto">
           <div class="col-3" @click="addNewImage">
-            <div
-              style="
+            <div style="
                 height: 160px;
                 max-width: 15vw;
                 display: flex !important;
                 justify-content: center;
                 align-items: center;
-              "
-              class="column rounded-borders cursor-pointer bg-active-image text-white"
-            >
+              " class="column rounded-borders cursor-pointer bg-active-image text-white">
               <q-icon name="add" size="60px" color="white" />
               <strong>อัปโหลดรูปภาพ</strong>
             </div>
           </div>
-          <div
-            v-for="n in images"
-            :key="n"
-            class="col-3"
-            @click="imageActive(n)"
-          >
+          <div v-for="n in images" :key="n" class="col-3" @click="imageActive(n)">
             <div :class="getClass(n)">
-              <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
-                :class="imageClass(n)"
-              >
+              <q-img v-if="n.avatar != null" :src="n.avatar" :class="imageClass(n)">
                 <!-- <div
                   class="absolute-top bg-transparent cursor-pointer text-right"
                   style="padding: 5px"
@@ -366,21 +255,11 @@
                     style="color: #ff8080"
                   />
                 </div> -->
-                <div
-                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
-                  style="padding: 5px"
-                >
+                <div class="absolute-bottom col-12 cursor-pointer flex justify-between items-center" style="padding: 5px">
                   {{ date2Thai(n.createdDate) }}
 
-                  <q-btn
-                    v-if="!n.isActive"
-                    icon="delete"
-                    unelevated
-                    dense
-                    @click="deletePhoto(n.id)"
-                    class="bg-white"
-                    style="color: #ff8080"
-                  />
+                  <q-btn v-if="!n.isActive" icon="delete" unelevated dense @click="deletePhoto(n.id)" class="bg-white"
+                    style="color: #ff8080" />
                 </div>
               </q-img>
             </div>
@@ -398,14 +277,7 @@
         >
           <q-tooltip>ลบรูปภาพ</q-tooltip>
         </q-btn> -->
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
+        <q-btn icon="check" dense flat round @click="selectAvatarHistory" color="positive">
           <q-tooltip>เลือกรูปภาพ</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -419,38 +291,18 @@
           <q-card-section class="q-py-sm row">
             <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-file
-                class="col-12 col-sm-6 col-md-5"
-                outlined
-                dense
-                v-model="filePassaway"
-                label="แนบใบมรณบัตร"
-                hide-bottom-space
-                lazy-rules
-              >
+              <q-file class="col-12 col-sm-6 col-md-5" outlined dense v-model="filePassaway" label="แนบใบมรณบัตร"
+                hide-bottom-space lazy-rules>
                 <q-separator />
                 <template v-slot:prepend>
                   <q-icon name="attach_file" />
                 </template>
               </q-file>
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="deathCertificateNo"
-                label="เลขที่ใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร" />
 
-              <datepicker
-                class="col-12 col-sm-6 col-md-5"
-                menu-class-name="modalfix"
-                v-model="dateDeath"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker class="col-12 col-sm-6 col-md-5" menu-class-name="modalfix" v-model="dateDeath" :locale="'th'"
+                autoApply borderless :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -458,63 +310,32 @@
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="
-                      dateDeath != null ? date2Thai(dateDeath) : null
-                    "
-                    :label="`${'วันที่เสียชีวิต'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
-                    ]"
-                  >
+                  <q-input outlined dense class="full-width datepicker" :model-value="dateDeath != null ? date2Thai(dateDeath) : null
+                    " :label="`${'วันที่เสียชีวิต'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
+  ]">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                       </q-icon>
                     </template>
                   </q-input>
                 </template>
               </datepicker>
 
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="placeDeathCertificate"
-                label="สถานที่ออกใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร" />
               <q-separator />
-              <q-input
-                class="col-12"
-                dense
-                outlined
-                v-model="reasonDeath"
-                label="เหตุผลการเสีบชีวิต"
-                type="textarea"
-              />
+              <q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสีบชีวิต" type="textarea" />
             </div>
             <q-space />
           </q-card-section>
           <q-separator />
           <div class="flex justify-end q-pa-sm q-gutter-sm">
-            <q-btn
-              unelevated
-              label="บันทึก"
-              color="public"
-              @click="clickSaveDeceased"
-              :disable="
-                filePassaway === null ||
-                deathCertificateNo === '' ||
-                placeDeathCertificate === '' ||
-                reasonDeath === ''
-              "
-            >
+            <q-btn unelevated label="บันทึก" color="public" @click="clickSaveDeceased" :disable="filePassaway === null ||
+              deathCertificateNo === '' ||
+              placeDeathCertificate === '' ||
+              reasonDeath === ''
+              ">
               <q-tooltip>บันทึก</q-tooltip>
             </q-btn>
           </div>
@@ -532,71 +353,34 @@
   <q-dialog v-model="dialogLeave" persistent>
     <q-card style="width: 600px">
       <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold"
-          >ประเภทการพ้นราชการ
+        <q-toolbar-title class="text-subtitle2 text-bold">ประเภทการพ้นราชการ
         </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeLeave"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense @click="closeLeave"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
 
       <q-separator />
       <q-card-section class="q-p-sm">
-        <div
-          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-        >
+        <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-select
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
-              hide-bottom-space
-              :label="`${'ประเภทการพ้นราชการ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="reasonOptions"
-              option-value="id"
-            />
+            <q-select class="full-width inputgreen cursor-pointer" outlined dense lazy-rules v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]" hide-bottom-space
+              :label="`${'ประเภทการพ้นราชการ'}`" emit-value map-options option-label="name" :options="reasonOptions"
+              option-value="id" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDate" :locale="'th'" autoApply :enableTimePicker="false"
+              week-start="0">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  :model-value="date2Thai(leaveDate)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่พ้นราชการ'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDate)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
+                  hide-bottom-space :label="`${'วันที่พ้นราชการ'}`">
                   <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                     </q-icon>
                   </template>
                 </q-input>
@@ -604,64 +388,30 @@
             </datepicker>
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveDetail"
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow v-model="leaveDetail"
               :rules="[
                 (val) =>
                   !!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
-              ]"
-              hide-bottom-space
-              :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
-            />
+              ]" hide-bottom-space :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveNumberOrder"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
-              hide-bottom-space
-              :label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
-            />
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow
+              v-model="leaveNumberOrder" :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
+              hide-bottom-space :label="`${'คำสั่ง/เอกสารอ้างอิง'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDateOrder"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDateOrder" :locale="'th'" autoApply
+              :enableTimePicker="false" week-start="0">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  :model-value="date2Thai(leaveDateOrder)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่ออกคำสั่ง'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDateOrder)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
+                  hide-bottom-space :label="`${'วันที่ออกคำสั่ง'}`">
                   <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                     </q-icon>
                   </template>
                 </q-input>
@@ -672,13 +422,7 @@
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn
-          flat
-          round
-          color="public"
-          @click="Retire"
-          icon="mdi-content-save-outline"
-        >
+        <q-btn flat round color="public" @click="Retire" icon="mdi-content-save-outline">
           <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -734,6 +478,7 @@ const {
   success,
   showLoader,
   hideLoader,
+  dialogConfirm
 } = mixin;
 const route = useRoute();
 const router = useRouter();
@@ -892,7 +637,7 @@ const uploadImage = async (e: any) => {
     showLoader();
     await http
       .post(config.API.profileAvatarId(profileId.value), formData)
-      .then((res) => {})
+      .then((res) => { })
       .catch((e) => {
         messageError($q, e);
       })
@@ -1016,13 +761,97 @@ const closeKp7Short = () => {
   dialogShort.value = false;
 };
 
-const postAdd = () => {
-  // router.push("/dismiss-order/add");
-};
+const helpPost = () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenHelpGov, formData);
+    },
+  );
+}
 
-const downloadKP7 = () => {};
+const repatriationPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenRepatriation, formData);
+    },
+  );
+}
 
-const downloadKP7Short = () => {};
+const appointPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenAppointment, formData);
+    },
+  );
+}
+
+const relocationPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenRelocation, formData);
+    },
+  );
+}
+
+const outPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementOut, formData);
+    },
+  );
+}
+
+const dischargePost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementDischarge, formData);
+    },
+  );
+}
+
+const expulsionPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementExpulsion, formData);
+    },
+  );
+}
+
+const otherPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenOther, formData);
+    },
+  );
+}
+
+const downloadKP7 = () => { };
+
+const downloadKP7Short = () => { };
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
@@ -1271,12 +1100,12 @@ const clickSaveDeceased = async () => {
           console.log(e);
           messageError($q, e);
         })
-        .finally(()=>{
+        .finally(() => {
           hideLoader();
         })
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 </script>
 <style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
deleted file mode 100644
index 34b0634df..000000000
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ /dev/null
@@ -1,741 +0,0 @@
-div
-<template>
-  <div>
-    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
-      <div class="col-12 row q-pb-sm items-center">
-        <q-btn flat round color="primary" @click="refresh" icon="mdi-plus">
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-      </div>
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
-        <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-th auto-width />
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectModal(props.row)"
-              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-            >
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                :disable="props.rowIndex + 1 == 1"
-                @click="upDown(props)"
-                icon="mdi-arrow-up-bold"
-              >
-                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
-              </q-btn>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                :disable="rows.length == props.rowIndex + 1"
-                @click="upDown(props, false)"
-                icon="mdi-arrow-down-bold"
-              >
-                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
-              </q-btn>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="dialogDeleteData(props.row.personalId)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="กรอกรายละเอียด"
-      >
-      </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="save"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-    </div>
-  </div>
-  <!--********************************** เงินเดือน ********************************** -->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 50vw; max-width: 50vw">
-      <q-form ref="myForm">
-        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
-        <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">
-              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.salaryAmount"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    :label="`${'เงินเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.positionSalaryAmount"
-                    :label="`${'เงินประจำตำแหน่ง'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                  <!-- :rules="[
-                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                    ]" -->
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.mouthSalaryAmount"
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                  <!-- :rules="[
-                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                    ]" -->
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModal"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <!--********************************** รายชื่อ ********************************** -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 50vw; max-width: 50vw">
-      <q-form ref="myFormAdd">
-        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <d-table
-            :rows="rows2"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-            selection="multiple"
-            v-model:selected="selected"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
-                </q-th>
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
-                </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-                >
-              </q-tr>
-            </template>
-          </d-table>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModalAdd"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import type { QInput } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps, QForm } from "quasar";
-import { useRoute } from "vue-router";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const next = () => props.next();
-const previous = () => props.previous();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
-
-const route = useRoute();
-const $q = useQuasar();
-
-const modalData = ref<any>({
-  salaryAmount: 0,
-  positionSalaryAmount: 0,
-  mouthSalaryAmount: 0,
-});
-const myForm = ref<QForm | null>(null);
-const myFormAdd = ref<QForm | null>(null);
-const modal = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const titleName = ref<string>("");
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "idCard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idCard",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "education",
-    align: "left",
-    label: "วุฒิการศึกษาในการออกคำสั่ง",
-    field: "education",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const selected = ref<ResponseData[]>([]);
-
-onMounted(async () => {
-  await conditionData();
-});
-
-const conditionData = async () => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await getData(id);
-  }
-};
-
-const getData = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsselectedOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list: ResponseData[] = [];
-      data.map((r: ResponseData) => {
-        list.push({
-          education: r.education ?? "",
-          idCard: r.idCard ?? "",
-          name: r.name ?? "",
-          personalId: r.personalId ?? "",
-          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-          sequence: r.sequence !== null ? r.sequence : 0,
-          refRecordId: r.refRecordId,
-        });
-      });
-      //   console.log("list", list);
-      rows.value = list;
-      selected.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// const saveSalary = async (id: string) => {
-//   await http
-//     .put(config.API.salaryOrder(id))
-//     .then((res) => {
-//       //   const data = res.data.result;
-//       //   console.log(res);
-//       success($q, "บันทึกข้อมูลสำเร็จ");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-const dialogDeleteData = async (id: string) => {
-  dialogMessage(
-    $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
-    "ตกลง",
-    "red",
-    () => deleteData(id),
-    undefined
-  );
-};
-
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.personsOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await conditionData();
-    });
-};
-
-const swapUp = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapUpOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const swapDown = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapDownOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const upDown = async (value: any, up: boolean = true) => {
-  const indexCurrent = value.rowIndex;
-  if (up) {
-    await swapUp(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
-    // rows.value[indexCurrent - 1] = value.row;
-  } else {
-    await swapDown(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
-    // rows.value[indexCurrent + 1] = value.row;
-  }
-};
-
-const saveModal = () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (result: boolean) => {
-      if (result) {
-        putSalary(modalData.value);
-      }
-    });
-  }
-};
-const personalId = ref<string>("");
-const selectModal = (e: any) => {
-  console.log(e);
-  titleName.value = e.name;
-  personalId.value = e.personalId;
-  // modalData.value = {
-  //   salaryAmount: 0,
-  //   positionSalaryAmount: 0,
-  //   mouthSalaryAmount: 0,
-  // };
-
-  modalOpenClose(e.personalId);
-};
-
-const modalOpenClose = async (personalId: string) => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    titleName.value = "";
-  }
-  if (modal.value == true) {
-    await fetchSalary(personalId);
-  }
-};
-const fetchSalary = async (personalId: string) => {
-  console.log(personalId);
-  showLoader();
-  await http
-    .get(config.API.salaryOrder(personalId))
-    .then((res: any) => {
-      console.log(res);
-      let salary = res.data.result;
-      modalData.value = {
-        salaryAmount: salary.salaryAmount,
-        positionSalaryAmount: salary.positionSalaryAmount,
-        mouthSalaryAmount: salary.monthSalaryAmount,
-      };
-    })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const putSalary = async (salary: any) => {
-  modalData.value = {
-    salaryAmount: Number(salary.salaryAmount),
-    positionSalaryAmount: Number(salary.positionSalaryAmount),
-    monthSalaryAmount: Number(salary.mouthSalaryAmount),
-  };
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูล",
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  }).onOk(async () => {
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-      });
-  });
-};
-
-const modalAddChange = async () => {
-  modalAdd.value = !modalAdd.value;
-  if (modalAdd.value == true) {
-    const id = route.params.orderid
-      ? route.params.orderid.toString()
-      : localStorage.getItem("orderId")
-      ? localStorage.getItem("orderId")
-      : null;
-    if (id !== null) {
-      await fetchaddlist(id);
-    }
-  } else await conditionData();
-};
-const fetchaddlist = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list = [];
-      list = data.map((r: ResponseData) => ({
-        education: r.education ?? "",
-        idCard: r.idCard ?? "",
-        name: r.name ?? "",
-        personalId: r.personalId ?? "",
-        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-        sequence: r.sequence !== null ? r.sequence : 0,
-        refRecordId: r.refRecordId,
-      }));
-      rows2.value = list;
-      selected.value = rows.value;
-      // rows2.value = list.filter((e: any) => e.selectStatus === false);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const saveModalAdd = () => {
-  if (myFormAdd.value !== null) {
-    myFormAdd.value.validate().then(async (result: boolean) => {
-      if (result && selected.value.length !== 0) {
-        $q.dialog({
-          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
-          },
-          persistent: true,
-        }).onOk(async () => {
-          let data = [];
-          data.push(...selected.value.map((e: any) => e.refRecordId));
-          // console.log(data);
-          addlist(data);
-        });
-      }
-    });
-  }
-};
-const addlist = async (data: Object) => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await http
-      .post(config.API.personsOrder(id), data)
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(() => {
-        modalAddChange();
-      });
-  }
-};
-
-const click = (e: any) => {
-  console.log(e);
-  console.log(rows.value.length);
-};
-
-const save = () => {
-  if (selected.value.length > 0) {
-    $q.dialog({
-      title: "ยืนยันการบันทึกข้อมูล",
-      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    }).onOk(async () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
-  } else {
-    dialogMessage(
-      $q,
-      "ข้อความแจ้งเตือน",
-      "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-  }
-};
-
-const selectData = (row: any) => {};
-
-const refresh = async () => {
-  // await conditionData();
-  modalAddChange();
-  selected.value = [];
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
-<style lang="scss"></style>
diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index c6b61430d..75f1ad406 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -125,7 +125,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogMessage } =
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogRemove } =
   mixin;
 const DataStore = useOrderPlacementDataStore();
 
@@ -314,15 +314,9 @@ const redirectToPage = (id?: string, status?: string) => {
 };
 
 const clickDelete = (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 
 };
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 1eef3cc73..0307b4fd6 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,24 +3,10 @@
     <q-form ref="myForm" class="q-pa-md">
       <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-            hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="typeOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
+            :options="typeOrderOption" option-value="id" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
           ) " -->
@@ -29,73 +15,36 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
 
         <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
           <div class="col-6">
-            <q-input
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
-              :label="`${'คำสั่ง'}`"
-              @update:modelValue="clickEditRow"
-              hide-bottom-space
-              type="number"
-            />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
+              hide-bottom-space type="number" />
           </div>
-          <label class="col-1 flex justify-center items-center text-bold"
-            >/</label
-          >
+          <label class="col-1 flex justify-center items-center text-bold">/</label>
           <div class="col-5">
-            <datepicker
-              v-model="dateYear"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:modelValue="clickEditRow"
-            >
+            <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
+              @update:modelValue="clickEditRow">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  :model-value="dateYear + 543"
-                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`"
-                  dense
-                  outlined
-                >
+                <q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`" dense outlined>
                 </q-input>
               </template>
             </datepicker>
           </div>
         </div>
         <div class="col-xs-5 col-md-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateCommand"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -103,24 +52,12 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateCommand != null ? date2Thai(dateCommand) : null
-                "
-                :label="`${'วันที่มีผลออกคำสั่ง'}`"
-                :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
+                " :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -129,24 +66,10 @@
         </div>
 
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="byOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
-            hide-bottom-space
-            :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="byOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
+            option-value="id" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
           ) " -->
@@ -154,55 +77,25 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
         <div class="col-12">
           <q-separator />
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="examRoundName"
-            :options="examRoundOption"
-            option-value="examRoundValue"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
+            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -216,39 +109,18 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="registerOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
+            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateRegister"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -256,25 +128,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateRegister != null ? date2Thai(dateRegister) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
+                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -282,38 +142,18 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="announce"
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="announceOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
+            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
+            input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAnnounce"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -321,25 +161,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -382,7 +210,7 @@ const {
   showLoader,
   hideLoader,
   success,
-  dialogMessage,
+  dialogConfirm,
 } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
@@ -576,9 +404,9 @@ const fecthExamRoundOption = async () => {
     .get(config.API.examroundOrder())
     .then((res) => {
       examRoundOption.value = res.data.result;
-      console.log(examRoundOption.value);
+      // console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -599,13 +427,8 @@ const submit = async () => {
   };
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      dialogMessage(
+      dialogConfirm(
         $q,
-        "ยืนยันการบันทึกข้อมูล",
-        "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-        "info",
-        "ตกลง",
-        "public",
         () => {
           if (!orderId) {
             createListOrder(formdata);
@@ -614,13 +437,12 @@ const submit = async () => {
             updateOrder(formdata, orderIdString);
           }
         },
-        undefined
       );
     }
   });
 };
 const createListOrder = async (formData: Object) => {
-  // console.log(formData);
+  showLoader();
   await http
     .post(config.API.createOrder(), formData)
     .then((res) => {
@@ -639,7 +461,7 @@ const createListOrder = async (formData: Object) => {
 };
 
 const updateOrder = async (formData: Object, orderId: string) => {
-  // console.log(formData);
+  showLoader();
   await http
     .put(config.API.detailOrder(orderId), formData)
     .then((res) => {
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 2c83f6be2..12c4a3419 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -183,7 +183,7 @@ const props = defineProps({
 const next = () => props.next();
 const previous = () => props.previous();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+const { dialogMessageNotify, dialogConfirm, dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const route = useRoute();
 const $q = useQuasar();
@@ -306,15 +306,9 @@ const getData = async (id: string) => {
 // };
 
 const dialogDeleteData = async (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 };
 
@@ -442,14 +436,10 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  dialogMessage(
+  dialogConfirm(
     $q,
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    "info",
-    "ตกลง",
-    "public",
     async () => {
+      showLoader()
       await http
         .put(config.API.salaryOrder(personalId.value), modalData.value)
         .then((res: any) => {
@@ -463,9 +453,9 @@ const putSalary = async (salary: any) => {
         .finally(async () => {
           await conditionData();
           modal.value = false;
+          hideLoader()
         });
     },
-    undefined
   );
 };
 
@@ -514,20 +504,15 @@ const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
       if (result && selected.value.length !== 0) {
-        dialogMessage(
+        dialogConfirm(
           $q,
-          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          "info",
-          "ตกลง",
-          "public",
           () => {
             let data = [];
             data.push(...selected.value.map((e: any) => e.refRecordId));
-            // console.log(data);
             addlist(data);
           },
-          undefined
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
         );
 
       }
@@ -563,31 +548,18 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    dialogMessage(
+    dialogConfirm(
       $q,
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      "info",
-      "ตกลง",
-      "public",
       () => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         next();
       },
-      undefined
     );
 
   } else {
-    dialogMessage(
+    dialogMessageNotify(
       $q,
-      "ข้อความแจ้งเตือน",
       "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
     );
   }
 };
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index d95c3de90..3781bb3f9 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -343,7 +343,7 @@ const previous = () => props.previous();
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const route = useRoute();
 
@@ -598,22 +598,7 @@ const getClass = (val: boolean) => {
 };
 
 const clickClose = async () => {
-  //   if (editRow.value == true) {
-  //   dialogMessage(
-  //     $q,
-  //     "ข้อมูลมีการแก้ไข",
-  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
-  //     "mdi-help-circle-outline",
-  //     "ตกลง",
-  //     "orange",
-  //     () => (modal.value = false),
-  //     undefined
-  //   );
-  //   } else {
   modal.value = false;
-  //     next.value = false;
-  //     previous.value = false;
-  //   }
 };
 
 const clickAdd = async () => {
@@ -628,15 +613,9 @@ const clickAdd = async () => {
 };
 
 const clickDelete = (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 };
 
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 99e613d43..ece62438b 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -252,7 +252,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, dialogMessage } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -382,14 +382,8 @@ const save = () => {
   if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
-        // yay, models are correct
-        dialogMessage(
+        dialogConfirm(
           $q,
-          "ยืนยันการบันทึกข้อมูล",
-          "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-          "info",
-          "ตกลง",
-          "public",
           async () => {
             await putOrderData();
             await postfileOrder();
@@ -397,7 +391,6 @@ const save = () => {
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
           },
-          undefined
         );
 
       }
@@ -431,13 +424,8 @@ const postfileTailer = async () => {
   await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
-  dialogMessage(
+  dialogConfirm(
     $q,
-    "ยืนยันการออกคำสั่ง",
-    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
-    "info",
-    "ตกลง",
-    "public",
     async () => {
       await http
         .put(config.API.executeOrder(id))
@@ -448,7 +436,8 @@ const clickExecute = async (id: string) => {
           messageError($q, e);
         });
     },
-    undefined
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
   );
 };
 
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 2ae149e62..8a625357b 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -411,6 +411,77 @@ export const useCounterMixin = defineStore("mixin", () => {
       });
   };
 
+  //*** Dialog ***//
+  const dialogConfirm = (
+    q: any,
+    ok?: Function,
+    title?: string, // ถ้ามี cancel action ใส่เป็น null
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title && title != null ? title : "ยืนยันการบันทึก",
+        message:
+          desc && desc != null
+            ? desc
+            : "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        icon: "info",
+        color: "public",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
+
+  const dialogRemove = (q: any, ok?: Function, cancel?: Function) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: "ยืนยันการลบข้อมูล",
+        message: "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
+        icon: "delete",
+        color: "red",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
+
+  const dialogMessageNotify = (
+    q: any,
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: "ข้อความแจ้งเตือน",
+        message: desc && desc != null ? desc : "กรุณากรอกข้อมูลให้ครบ",
+        icon: "warning",
+        color: "orange",
+        textOk: "ตกลง",
+        onlycancel: true,
+      },
+    }).onCancel(() => {
+      if (cancel) cancel();
+    });
+  };
+  //*** END Dialog ***//
+
   const showLoader = () => {
     Loading.show({
       spinner: QSpinnerCube,
@@ -718,5 +789,9 @@ export const useCounterMixin = defineStore("mixin", () => {
     typeChangeName,
     statusLeave,
     modalWarning,
+    // common dialog
+    dialogConfirm,
+    dialogRemove,
+    dialogMessageNotify
   };
 });