diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 4b874ec33..a59ba2207 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -216,7 +216,7 @@ const menuList = readonly<any[]>([
       // },
       {
         key: 6.3,
-        label: "การทดลองงาน",
+        label: "การทดลองปฏิบัติหน้าที่ราชการ",
         path: "probation",
         role: "probation",
       },
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 37cce33fe..a53f176b6 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -76,7 +76,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "probation_no",
     align: "center",
-    label: "ครั้งที่ทดลองงาน",
+    label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
     sortable: true,
     field: "probation_no",
     headerStyle: "font-size: 14px",
@@ -94,7 +94,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "probation_status",
     align: "left",
-    label: "สถานะการทดลองงาน",
+    label: "สถานะ",
     sortable: true,
     field: "probation_status",
     headerStyle: "font-size: 14px",
@@ -153,7 +153,7 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "status",
     align: "left",
-    label: "สะถานะทดลองงาน",
+    label: "สถานะ",
     sortable: true,
     field: "status",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 21401632f..cd1e9bfa6 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -185,8 +185,8 @@ const selectStatus = async () => {
           getpersonalList();
         });
     },
-    "ยืนยันการเปลี่ยนสถานะทดลองงาน",
-    "ต้องการเปลี่ยนสถานะทดลองงานข้อมูลนี้หรือไม่ ?",
+    "ยืนยันการเปลี่ยนสถานะการทดลองปฏิบัติหน้าที่ราชการ",
+    "ต้องการเปลี่ยนสถานะการทดลองปฏิบัติหน้าที่ราชการข้อมูลนี้หรือไม่ ?",
     () => {
       probation_status.value = probation_statusold.value;
     }
@@ -272,7 +272,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
         </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-top">สถานะการทดลองปฏิบัติหน้าที่ราชการ</div>
             <div class="col-12 text-detail">
               <q-select
                 dense
diff --git a/src/modules/08_registryEmployee/views/Information/Tempinformation.vue b/src/modules/08_registryEmployee/views/Information/Tempinformation.vue
index 464a29614..74a1e51b4 100644
--- a/src/modules/08_registryEmployee/views/Information/Tempinformation.vue
+++ b/src/modules/08_registryEmployee/views/Information/Tempinformation.vue
@@ -5,12 +5,11 @@
       header="ข้อมูลลูกจ้างชั่วคราว"
       icon="mdi-account"
       :save="saveData"
-      :history="!statusAdd()"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
-      :historyClick="clickHistory"
       :addEmployee="statusAdd()"
+      :history="!statusAdd()"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@@ -199,7 +198,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 import { defaultTempInformation } from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import HeaderTop from "@/modules/08_registryEmployee/views/topEmployeeTemp.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute } from "vue-router";
 import type { QTableProps } from "quasar";
@@ -421,36 +420,38 @@ const fetchDataSelector = async () => {
 /**
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileEmployeeTempId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: any) => {
-        rowsHistory.value.push({
-          EmployeeMoneyIncrease: e.employeeMoneyIncrease,
-          EmployeeMoneyAllowance: e.employeeMoneyAllowance,
-          EmployeeMoneyEmployee: e.employeeMoneyEmployee,
-          EmployeeMoneyEmployer: e.employeeMoneyEmployer,
-          PositionEmployeeGroupId: e.positionEmployeeGroupId,
-          PositionEmployeePositionId: e.positionEmployeePositionId,
-          PositionEmployeeLineId: e.positionEmployeeLineId,
-          EmployeeTypeIndividual: e.employeeTypeIndividual,
-          EmployeeOc: e.employeeOc,
-          EmployeeWage: e.employeeWage,
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
+// const clickHistory = async () => {
+//   modalHistory.value = true;
+//   showLoader();
+//   await http
+//     .get(config.API.profileEmployeeTempId(route.params.id.toString()))
+//     .then((res) => {
+//       let data = res.data.result;
+//       rowsHistory.value = [];
+//       data.map((e: any) => {
+//         rowsHistory.value.push({
+//           employeeMoneyIncrease: e.employeeMoneyIncrease,
+//           employeeMoneyAllowance: e.employeeMoneyAllowance,
+//           employeeMoneyEmployee: e.employeeMoneyEmployee,
+//           employeeMoneyEmployer: e.employeeMoneyEmployer,
+//           positionEmployeeGroupId: e.positionEmployeeGroupId,
+//           positionEmployeePositionId: e.positionEmployeePositionId,
+//           positionEmployeeLineId: e.positionEmployeeLineId,
+//           employeeTypeIndividual: e.employeeTypeIndividual,
+//           employeeOc: e.employeeOc,
+//           employeeWage: e.employeeWage,
+//           createdFullName: e.createdFullName,
+//           createdAt: new Date(e.createdAt),
+//         });
+//       });
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
 
 const refreshData = async () => {
   myform.value.reset();
@@ -603,6 +604,7 @@ const addData = async () => {
     employeeMoneyIncrease: employeeMoneyIncrease.value,
     employeeMoneyAllowance: employeeMoneyAllowance.value,
     employeeMoneyEmployee: employeeMoneyEmployee.value,
+    employeeMoneyEmployer: employeeMoneyEmployer.value,
     positionEmployeeGroupId: positionEmployeeGroupId.value,
     positionEmployeePositionId: positionEmployeePositionId.value,
     positionEmployeeLineId: positionEmployeeLineId.value,
diff --git a/src/modules/08_registryEmployee/views/topEmployeeTemp.vue b/src/modules/08_registryEmployee/views/topEmployeeTemp.vue
new file mode 100644
index 000000000..ac620aba9
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/topEmployeeTemp.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+    <!-- <q-btn
+      color="info"
+      flat
+      dense
+      round
+      size="14px"
+      icon="mdi-history"
+      v-if="history"
+      @click="historyClick"
+    >
+      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
+    </q-btn> -->
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
+<style scoped></style>
diff --git a/src/modules/10_order/components/Detail.vue b/src/modules/10_order/components/Detail.vue
index 57a149cc5..735d88888 100644
--- a/src/modules/10_order/components/Detail.vue
+++ b/src/modules/10_order/components/Detail.vue
@@ -32,13 +32,14 @@ onUnmounted(() => {
 });
 
 const nextStep = async () => {
-  stepper.value!.next();
+  // stepper.value!.next();
+
   localStorage.setItem("currentStep", step.value.toString());
   if (orderId.value) {
     await http
       .put(config.API.nextStep(orderId.value))
       .then(() => {
-        router.push(`/order/detail/${orderId.value}?step=${step.value}`);
+        router.push(`/order/detail/${orderId.value}?step=${step.value + 1}`);
       })
       .catch((e) => {
         console.log(e);
@@ -46,13 +47,13 @@ const nextStep = async () => {
   }
 };
 const previousStep = async () => {
-  stepper.value!.previous();
+  // stepper.value!.previous();
   localStorage.setItem("currentStep", step.value.toString());
   if (orderId.value) {
     await http
       .put(config.API.prevStep(orderId.value))
       .then(() => {
-        router.push(`/order/detail/${orderId.value}?step=${step.value}`);
+        router.push(`/order/detail/${orderId.value}?step=${step.value - 1}`);
       })
       .catch((e) => {
         console.log(e);
@@ -62,7 +63,6 @@ const previousStep = async () => {
 const destroyLocalStorage = () => {
   localStorage.clear();
 };
-
 onMounted(() => {
   // console.log("route query===>", route.query)
   if (route.query.step) {
@@ -79,7 +79,7 @@ onMounted(() => {
 
   if (orderId_params !== undefined) {
     orderId.value = orderId_params.toString();
-    //   console.log(orderId.value);
+    // console.log("orderId.value");
   }
 });
 </script>
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 03006b381..ecf7c3d5b 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -10,6 +10,11 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import type { ResponseOrganiz } from "@/modules/05_placement/interface/response/Order";
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 
 const mixin = useCounterMixin();
 const {
@@ -19,6 +24,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  dialogMessageNotify,
 } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
@@ -60,66 +66,17 @@ const examRound = ref<string>("");
 const examRoundOption = ref<DataOption1[]>([]);
 const conclusionRegisterNo = ref<string>("");
 const conclusionRegisterDate = ref<Date>(new Date());
-// const registerOption = ref<DataOption1[]>([
-//   {
-//     name: "รับสมคัรสอบ ครั้งที่ 1",
-//     id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-//   },
-// ]);
+
 const conclusionResultNo = ref<string>("");
 const conclusionResultDate = ref<Date>(new Date());
-// const announceOption = ref<DataOption1[]>([
-//   {
-//     name: "ผลการสอบแข่งขั้น ครั้งที่ 1",
-//     id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-//   },
-// ]);
 
 // C-PM-05 - 06
-const conclusion1 = ref<string>("");
-const conclusionDate1 = ref<Date>(new Date());
-const conclusion1Option = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusion2 = ref<string>("");
-const conclusionDate2 = ref<Date>(new Date());
-const conclusion2Option = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
 const meeting = ref<string>("");
 const dateMeeting = ref<Date>(new Date());
-const meetingOption = ref<DataOption1[]>([
-  { name: "การประชุมครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
 
-// C-PM-07
-const conclusionRelocation1 = ref<string>("");
-const conclusionRelocationDate1 = ref<Date>(new Date());
-const RelocationOption1 = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusionRelocation2 = ref<string>("");
-const conclusionRelocationDate2 = ref<Date>(new Date());
-const RelocationOption2 = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-
-//  C-PM-08 && 14
-const conclusion = ref<string>("");
-const conclusionDate = ref<Date>(new Date());
-const conclusionOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusionLeave = ref<string>("");
-const conclusionLeaveDate = ref<Date>(new Date());
-const LeaveOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusionReceive = ref<string>("");
-const conclusionReceiveDate = ref<Date>(new Date());
-const ReceiveOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
+//  C-PM-08
+const conclusionReturnNo = ref<string>("");
+const conclusionReturnDate = ref<Date>(new Date());
 
 // C-PM-09
 const organizations = ref<string>("");
@@ -138,6 +95,7 @@ const bookOption = ref<DataOption1[]>([
 ]);
 
 // C-PM-10
+const dialogVisible = ref<boolean>(false);
 const organizationsOld = ref<string>("");
 const organizationsOldOption = ref<DataOption1[]>([
   { name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
@@ -193,6 +151,8 @@ const receiveOcOption = ref<DataOption1[]>([
 ]);
 // C-PM-14
 const transferOrganizationName = ref<string>("");
+const conclusionReceive = ref<string>("");
+const conclusionReceiveDate = ref<Date>(new Date());
 
 // C-PM-16
 const orderNumber = ref<string>();
@@ -260,10 +220,10 @@ const fetchdetailOrder = async () => {
   await http
     .get(config.API.detailOrder(orderIdString))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res);
 
       const data = res.data.result;
-      console.log(data);
+      // console.log(data);
       typeOrder.value = typeOrderOption.value.find(
         (e) => e.id === data.orderTypeValue
       );
@@ -286,17 +246,20 @@ const fetchdetailOrder = async () => {
       dateMeeting.value = data.conclusionMeetingDate;
 
       // 08
-      conclusionReceive.value = data.conclusionReturnNo;
-      conclusionReceiveDate.value = data.conclusionReturnDate;
+      conclusionReturnNo.value = data.conclusionReturnNo;
+      conclusionReturnDate.value = data.conclusionReturnDate;
 
       //09
       organizations.value = data.sourceOrganizationName;
       order.value = data.conclusionReturnNo;
       orderDate.value = data.conclusionReturnDate;
       book.value = data.militaryCommandNo;
-      bookDate.value = data.militaryCommandDate;
+      bookDate.value = data.militaryCommanDate;
 
       //10
+      if (data.orderTypeCode === "c-pm-10") {
+        nodeTree();
+      }
       organizationsOld.value = data.placementCommandIssuer;
       orderOld.value = data.placementCommandNo;
       orderOldDate.value = data.placementCommandDate;
@@ -356,6 +319,9 @@ const fecthCommand = async () => {
 };
 const selectCMP = (selectOrder: any) => {
   fecthExamRoundOption(selectOrder.commandCode);
+  if (selectOrder.commandCode === "C-PM-10") {
+    nodeTree();
+  }
   //01-04
   examRound.value = "";
   conclusionRegisterNo.value = "";
@@ -422,6 +388,8 @@ const submit = async () => {
   let signBy = null;
   if (!nameCommand.value.length) {
     signBy = await nameCommand.value.name;
+  } else if (nameCommand.value !== "") {
+    signBy = await nameCommand.value;
   } else {
     const name2 = await CommandOption.value.find(
       (x: any) => x.name == nameCommand.value
@@ -429,6 +397,7 @@ const submit = async () => {
     signBy = await name2?.name;
     console.log("signBy", signBy);
   }
+  console.log(signBy);
 
   const orderByOrganizationName = await byOrderOption.value.find(
     (x: any) => x.id == byOrder.value
@@ -470,8 +439,8 @@ const submit = async () => {
     });
   } else if (typeOrder.value.commandCode == "C-PM-08") {
     Object.assign(formdata, {
-      conclusionReturnNo: conclusionReceive.value,
-      conclusionReturnDate: conclusionReceiveDate.value,
+      conclusionReturnNo: conclusionReturnNo.value,
+      conclusionReturnDate: conclusionReturnDate.value,
     });
   } else if (typeOrder.value.commandCode == "C-PM-09") {
     Object.assign(formdata, {
@@ -582,6 +551,120 @@ const updateOrder = async (formData: Object, orderId: string, type: string) => {
       hideLoader();
     });
 };
+// dialog 10
+const search = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const selectedModal = ref<ResponseOrganiz[]>([]);
+const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
+const columnsModal = 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: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rowsModal = ref<ResponseOrganiz[]>([]);
+const clickAction = ref<string>("");
+const filterModal = ref<string>("");
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const onSelected = async (id: string) => {
+  await listModal(id);
+};
+const listModal = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderPersonsId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let list: ResponseOrganiz[] = [];
+      data.map((r: ResponseOrganiz) => {
+        list.push({
+          firstName: r.firstName ?? "",
+          idCard: r.idCard ?? "",
+          lastName: r.lastName ?? "",
+          name: r.name ?? "",
+          position: r.position ?? "",
+          prefixId: r.prefixId ?? "",
+          profileId: r.profileId ?? "",
+          unit: r.unit ?? "",
+        });
+      });
+      rowsModal.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+const openDialog = (action: string) => {
+  dialogVisible.value = true;
+  clickAction.value = action;
+  selectedModal.value = [];
+};
+const clickSavelist = () => {
+  if (selectedModal.value.length > 0) {
+    if (clickAction.value === "chairman") {
+      chairman.value = selectedModal.value[0].name;
+    } else if (clickAction.value === "director") {
+      director.value = selectedModal.value[0].name;
+    } else if (clickAction.value === "director2") {
+      director2.value = selectedModal.value[0].name;
+    }
+    dialogVisible.value = false;
+  } else dialogMessageNotify($q, "โปรดเลือกรายชื่อ");
+};
 
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
@@ -729,7 +812,10 @@ const getClass = (val: boolean) => {
             @update:model-value="(nameCommand = ''), (positionCommand = '')"
           />
         </div>
-        <div class="col-xs-12 col-md-6">
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
+        >
           <selector
             :class="getClass(true)"
             outlined
@@ -766,7 +852,10 @@ const getClass = (val: boolean) => {
             hide-bottom-space
           /> -->
         </div>
-        <div class="col-xs-12 col-md-6">
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
+        >
           <q-input
             :class="getClass(true)"
             outlined
@@ -779,6 +868,36 @@ const getClass = (val: boolean) => {
             disable
           />
         </div>
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
+        >
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
+        >
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+          />
+        </div>
         <div class="col-12">
           <q-separator v-if="typeOrder.commandCode" />
         </div>
@@ -1354,7 +1473,7 @@ const getClass = (val: boolean) => {
               outlined
               dense
               lazy-rules
-              v-model="conclusionReceive"
+              v-model="conclusionReturnNo"
               :rules="[
                 (val) =>
                   !!val ||
@@ -1372,7 +1491,7 @@ const getClass = (val: boolean) => {
           <div class="col-xs-12 col-md-6">
             <datepicker
               menu-class-name="modalfix"
-              v-model="conclusionReceiveDate"
+              v-model="conclusionReturnDate"
               :locale="'th'"
               autoApply
               borderless
@@ -1391,8 +1510,8 @@ const getClass = (val: boolean) => {
                   dense
                   class="full-width datepicker"
                   :model-value="
-                    conclusionReceiveDate != null
-                      ? date2Thai(conclusionReceiveDate)
+                    conclusionReturnDate != null
+                      ? date2Thai(conclusionReturnDate)
                       : null
                   "
                   :label="`${'ลงวันที่ '}`"
@@ -1811,6 +1930,7 @@ const getClass = (val: boolean) => {
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อประธาน'}`]"
               :label="`${'ประธาน'}`"
               hide-bottom-space
+              @click="openDialog('chairman')"
             />
           </div>
           <div class="col-xs-12 col-md-4">
@@ -1840,6 +1960,7 @@ const getClass = (val: boolean) => {
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
               :label="`${'กรรมการ'}`"
               hide-bottom-space
+              @click="openDialog('director')"
             />
           </div>
           <div class="col-xs-12 col-md-4">
@@ -1869,6 +1990,7 @@ const getClass = (val: boolean) => {
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
               :label="`${'กรรมการ'}`"
               hide-bottom-space
+              @click="openDialog('director2')"
             />
           </div>
         </div>
@@ -2247,10 +2369,161 @@ const getClass = (val: boolean) => {
       <q-tooltip>บันทึก</q-tooltip>
     </q-btn>
   </div>
+
+  <q-dialog v-model="dialogVisible">
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" v-close-popup />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-5 row">
+            <q-card flat bordered class="fit q-pa-sm">
+              <q-scroll-area visible style="height: 70vh">
+                <q-input
+                  outlined
+                  dense
+                  v-model="search"
+                  placeholder="ค้นหา"
+                  class="q-mb-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon name="mdi-magnify" />
+                  </template>
+                </q-input>
+                <q-tree
+                  :nodes="nodesTree"
+                  dense
+                  node-key="id"
+                  :filter="search"
+                  v-model:selected="selected"
+                  v-model:expanded="expanded"
+                  no-selection-unset
+                  selected-color="primary"
+                  @update:selected="onSelected"
+                  default-expand-all
+                />
+              </q-scroll-area>
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-7">
+            <div class="col-12 row q-py-sm items-center">
+              <q-space />
+              <div class="items-center" style="display: flex">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterModal"
+                  ref="filterRef"
+                  outlined
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  style="max-width: 200px"
+                  class="q-ml-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="filterModal == ''" name="search" />
+                    <q-icon
+                      v-if="filterModal !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+
+                <!-- <q-select
+                  v-model="visibleColumnsModal"
+                  :display-value="$q.lang.table.columns"
+                  multiple
+                  outlined
+                  dense
+                  :options="columnsModal"
+                  options-dense
+                  option-value="name"
+                  map-options
+                  emit-value
+                  style="min-width: 150px"
+                  class="gt-xs q-ml-sm"
+                /> -->
+              </div>
+            </div>
+            <d-table
+              :rows="rowsModal"
+              :columns="columnsModal"
+              :visible-columns="visibleColumnsModal"
+              row-key="profileId"
+              selection="single"
+              v-model:selected="selectedModal"
+              no-data-label="ไม่มีข้อมูล"
+              :filter="filterModal"
+            >
+              <template v-slot:body-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body-cell="props">
+                <q-td :props="props">
+                  <div v-if="props.col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div v-else>
+                    {{ props.value }}
+                  </div>
+                </q-td>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="clickSavelist"
+          class="q-px-md"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style>
 .q-field--with-bottom {
   padding-bottom: 0px;
 }
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
 </style>
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index b2747c8cd..0ac4959ff 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -8,6 +8,7 @@ import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { aW } from "@fullcalendar/core/internal-common";
 
 const mixin = useCounterMixin();
 const {
@@ -47,23 +48,24 @@ const orderStatusName = ref<string>("");
 const orderId = ref<string>(orderId_params.toString());
 onMounted(async () => {
   if (orderId.value) {
-    fetchAttachment(orderId.value);
-    fecthstatusOrder(orderId.value);
-    getType();
+    showLoader()
+    await fetchAttachment(orderId.value);
+    await fecthstatusOrder();
+    await getCommandDetail();
+    hideLoader()
   }
 });
 
-const getType = async () => {
-  showLoader();
+const getCommandDetail = async () => {
   await http
     .get(config.API.detailOrder(orderId.value))
     .then(async (res) => {
-      const data = res.data.result;
-      const orderTypeCode = data.orderTypeCode;
+      const data = await res.data.result;
+      const orderTypeCode = await data.orderTypeCode;
       code.value = orderTypeCode ?? "";
       orderName.value = res.data.result.orderTitle;
       orderStatusName.value = data.orderStatusName;
-      console.log(orderStatusName.value);
+      // console.log(orderStatusName.value);
 
       fetchReportCover("pdf", orderId.value);
       fetchReportAttachment("pdf", orderId.value);
@@ -71,9 +73,6 @@ const getType = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
 };
 
 const downloadCover = async (type: string) => {
@@ -111,27 +110,22 @@ const downloadAttachment = async (type: string) => {
 };
 
 const fetchReportCover = async (type: string, orderId: string) => {
-  showLoader();
   await http
     .get(config.API.reportOrderCover(type, orderId, code.value), {
       responseType: "blob",
     })
-    .then(async (res) => {
+    .then((res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
       orderCoverPdf.value = objectUrl;
       viewPDF(orderCoverPdf.value);
     })
     .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
 };
 
 const fetchReportAttachment = async (type: string, orderId: string) => {
-  showLoader();
   await http
     .get(config.API.reportOrderAttachment(type, orderId, code.value), {
       responseType: "blob",
@@ -142,15 +136,12 @@ const fetchReportAttachment = async (type: string, orderId: string) => {
       orderAttachmentPdf.value = objectUrl;
     })
     .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
 };
 
+// Fetch file upload & detail
 const fetchAttachment = async (orderId: string) => {
-  showLoader();
   await http
     .get(config.API.attachmentOrder(orderId))
     .then(async (res) => {
@@ -171,14 +162,11 @@ const fetchAttachment = async (orderId: string) => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
 };
 
-const fecthstatusOrder = async (orderId: string) => {
+const fecthstatusOrder = async () => {
   await http
-    .get(config.API.orderReady(orderId))
+    .get(config.API.orderReady(orderId.value))
     .then((res) => {
       let status = res.data.result;
       statusOrder.value = status.result;
@@ -187,6 +175,7 @@ const fecthstatusOrder = async (orderId: string) => {
       messageError($q, e);
     });
 };
+
 const viewPDF = async (pdf: string) => {
   const pdfData = await usePDF(`${pdf}`);
   showLoader();
@@ -224,6 +213,7 @@ const page = ref<number>(1);
 const vuePDFRef = ref<any>(null);
 
 const myForm = ref<QForm | null>(null);
+const myFormUpload = ref<QForm | null>(null);
 
 const props = defineProps({
   next: {
@@ -256,16 +246,33 @@ const downloadFile = (response: any, filename: string) => {
   document.body.removeChild(link);
 };
 
-const save = () => {
+const saveUpload = () => {
+  if (myFormUpload.value !== null) {
+    myFormUpload.value!.validate().then((success: Boolean) => {
+      if (success) {
+        dialogConfirm($q, async () => {
+          showLoader()
+          await postfileOrder();
+          await postfileTailer();
+          await fetchAttachment(orderId.value);
+          await fecthstatusOrder();
+          hideLoader()
+        });
+      }
+    });
+  }
+};
+
+const saveDetail = () => {
   if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
         dialogConfirm($q, async () => {
+          showLoader();
           await putOrderData();
-          await postfileOrder();
-          await postfileTailer();
-          await fetchAttachment(orderId.value);
-          await fecthstatusOrder(orderId.value);
+          await fetchReportCover("pdf", orderId.value);
+          await fecthstatusOrder();
+          hideLoader();
         });
       }
     });
@@ -293,45 +300,60 @@ const postfileOrder = async () => {
   formData.append("File", fileOrder.value);
   await http
     .post(config.API.attachmentOrderId(orderId.value), formData)
-    .then(() => {
-      // fileOrder.value = null
-    });
+    .catch((e) => {
+      messageError($q, e)
+    })
 };
+
 const postfileTailer = async () => {
   const formData = new FormData();
   formData.append("File", fileTailer.value);
   await http
     .post(config.API.attachmentFileId(orderId.value), formData)
-    .then(() => {
-      //fileTailer.value = null
-    });
+    .then(()=>{
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e)
+    })
 };
 
 const clickExecute = async (id: string) => {
   dialogConfirm(
     $q,
     async () => {
+      showLoader()
       await http
         .put(config.API.executeOrder(id))
         .then((res) => {
-          console.log(res);
+          success($q, "ออกคำสั่งสำเร็จ");
         })
         .catch((e) => {
           messageError($q, e);
-        });
+        }).finally(async()=> {
+          await fecthstatusOrder()
+          await getCommandDetail()
+          hideLoader();
+        })
     },
     "ยืนยันการออกคำสั่ง",
     "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?"
   );
 };
 
-const validateForm = () => {
+const validateFormUpload = () => {
   return (
     fileOrder.value !== null &&
-    fileOrder.value !== null &&
+    fileTailer.value !== null
+  );
+};
+
+const validateForm = () => {
+  return (
     order.value.trim() !== ""
   );
 };
+
 const getClass = (val: boolean) => {
   return {
     "card-header-active q-px-lg q-py-md cursor-pointer": val,
@@ -354,105 +376,60 @@ const viewFileUpload = async (url: string) => {
 <template>
   <div>
     <div style="min-height: 70vh">
-      <q-splitter
-        v-model="splitterModel"
-        style="height: 70vh"
-        @update:model-value="onchangePage"
-      >
+      <q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
         <template v-slot:before>
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn
-                size="12px"
-                flat
-                dense
-                icon="mdi-download"
-                :disable="tab !== 'main'"
-                :color="tab !== 'main' ? 'grey' : 'add'"
-              >
+              <q-btn 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">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadCover('pdf')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadCover('pdf')">
                       <!-- type="a"
                       :href="orderCoverPdf"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
+                      <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
-                      @click="downloadCover('docx')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadCover('docx')">
                       <!-- type="a"
                       :href="orderCoverDocs"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="blue" name="mdi-file-word"
-                      /></q-item-section>
+                      <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>
             </div>
-            <div
-              v-if="
-                code != 'c-pm-10' &&
-                code != 'c-pm-11' &&
-                code != 'c-pm-12' &&
-                code != 'c-pm-16' &&
-                code != 'c-pm-18' &&
-                code != 'c-pm-19' &&
-                code != 'c-pm-20'
-              "
-              @click="setTab('second')"
-              :class="getClass(tab == 'second')"
-            >
+            <div v-if="code != 'c-pm-10' &&
+              code != 'c-pm-11' &&
+              code != 'c-pm-12' &&
+              code != 'c-pm-16' &&
+              code != 'c-pm-18' &&
+              code != 'c-pm-19' &&
+              code != 'c-pm-20'
+              " @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn
-                size="12px"
-                flat
-                dense
-                :color="tab !== 'second' ? 'grey' : 'add'"
-                icon="mdi-download"
-                :disable="tab !== 'second'"
-              >
+              <q-btn 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">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadAttachment('pdf')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadAttachment('pdf')">
                       <!-- type="a"
                       :href="orderAttachmentPdf"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
+                      <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
-                      @click="downloadAttachment('xlsx')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadAttachment('xlsx')">
                       <!-- type="a"
                       :href="orderAttachmentXlsx"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
@@ -460,24 +437,12 @@ const viewFileUpload = async (url: string) => {
               </q-btn>
             </div>
             <q-space />
-            <q-btn
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
+            <q-btn class="text-dark" flat dense icon="mdi-fullscreen" color="add" @click="dialog = true" />
           </div>
           <q-separator style="margin-top: -1px; z-index: 1" />
           <q-card bordered class="card-pdf q-ma-md q-pa-md">
             <div class="justify-between items-center align-center q-pb-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -485,12 +450,7 @@ const viewFileUpload = async (url: string) => {
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
                 <q-icon name="mdi-chevron-right" />
               </q-btn>
             </div>
@@ -499,12 +459,7 @@ const viewFileUpload = async (url: string) => {
               <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
             </div>
             <div class="justify-between items-center align-center q-pt-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -512,12 +467,7 @@ const viewFileUpload = async (url: string) => {
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
                 <q-icon name="mdi-chevron-right" />
               </q-btn>
             </div>
@@ -525,166 +475,98 @@ const viewFileUpload = async (url: string) => {
         </template>
 
         <template v-slot:separator>
-          <q-avatar
-            color="primary"
-            text-color="white"
-            size="30px"
-            icon="drag_indicator"
-          />
+          <q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
         </template>
 
         <template v-slot:after>
-          <q-form ref="myForm">
-            <div class="q-pa-md q-gutter-y-md">
-              <fieldset class="border q-px-lg q-py-md">
+          <div class="q-pa-md q-gutter-y-md">
+            <q-form ref="myFormUpload">
+              <fieldset class="border q-px-lg q-py-sm">
                 <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
                 <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">คำสั่ง</label>
-                    <div class="text-right">
-                      <q-btn
-                        size="12px"
-                        flat
-                        dense
-                        color="primary"
-                        icon="mdi-eye"
-                        @click="viewFileUpload(OrderPDFUpload)"
-                      >
+                    <div v-if="OrderPDFUpload != ''" class="text-right">
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(OrderPDFUpload)">
                         <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                       </q-btn>
-                      <q-btn
-                        type="a"
-                        :href="OrderPDFUpload"
-                        size="12px"
-                        flat
-                        dense
-                        color="red"
-                        icon="mdi-download"
-                        target="_blank"
-                      >
+                      <q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
+                        target="_blank">
                         <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
                       </q-btn>
                     </div>
-                    <q-file
-                      outlined
-                      dense
-                      v-model="fileOrder"
-                      label="เลือกไฟล์คำสั่ง"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
-                      accept=".pdf"
-                    >
+                    <q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
                     </q-file>
                   </div>
-                  <div
-                    v-if="
-                      code != 'c-pm-10' &&
-                      code != 'c-pm-11' &&
-                      code != 'c-pm-12' &&
-                      code != 'c-pm-16' &&
-                      code != 'c-pm-18' &&
-                      code != 'c-pm-19' &&
-                      code != 'c-pm-20'
-                    "
-                  >
+                  <div v-if="code != 'c-pm-10' &&
+                    code != 'c-pm-11' &&
+                    code != 'c-pm-12' &&
+                    code != 'c-pm-16' &&
+                    code != 'c-pm-18' &&
+                    code != 'c-pm-19' &&
+                    code != 'c-pm-20'
+                    ">
                     <label class="text-file">เอกสารแนบท้าย</label>
-                    <div class="text-right">
-                      <q-btn
-                        size="12px"
-                        flat
-                        dense
-                        color="primary"
-                        icon="mdi-eye"
-                        @click="viewFileUpload(TailerPDFUpload)"
-                      >
+                    <div v-if="TailerPDFUpload != ''" class="text-right">
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(TailerPDFUpload)">
                         <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
                       </q-btn>
-                      <q-btn
-                        type="a"
-                        :href="TailerPDFUpload"
-                        size="12px"
-                        flat
-                        dense
-                        color="red"
-                        icon="mdi-download"
-                        target="_blank"
-                      >
+                      <q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
+                        target="_blank">
                         <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                       </q-btn>
                     </div>
 
-                    <q-file
-                      outlined
-                      dense
-                      v-model="fileTailer"
-                      label="เลือกไฟล์เอกสารแนบท้าย"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                      accept=".pdf"
-                    >
+                    <q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
+                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
                     </q-file>
+
+                    <!-- บันทึกอัพโหลดเอกสาร  -->
+                    <div class="row col-12 q-mt-md">
+                      <q-space></q-space>
+                      <q-btn unelevated label="บันทึก" :color="validateFormUpload() ? 'public' : 'grey'"
+                        :disable="!validateFormUpload() || orderStatusName == 'ออกคำสั่งแล้ว'" @click="saveUpload">
+                      </q-btn>
+                    </div>
+
                   </div>
                 </div>
               </fieldset>
+            </q-form>
 
-              <fieldset class="border q-px-lg q-py-md">
+            <q-form ref="myForm">
+              <fieldset class="border q-px-lg q-py-sm">
                 <legend class="text-header q-px-sm">รายละเอียด</legend>
                 <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">เลขที่คำสั่ง</label>
-                    <q-input
-                      :outlined="true"
-                      dense
-                      lazy-rules
-                      :readonly="!true"
-                      :borderless="!true"
-                      v-model="order"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                      hide-bottom-space
-                      :label="`${'เลขที่คำสั่ง'}`"
-                    />
+                    <q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`" />
                   </div>
                   <div>
                     <label class="text-file">ปีที่ออกคำสั่ง</label>
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="years"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
+                    <datepicker menu-class-name="modalfix" v-model="years" :locale="'th'" autoApply year-picker
+                      :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
-                          lazy-rules
-                          :model-value="years + 543"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'ปีที่ออกคำสั่ง'}`"
-                        >
+                        <q-input outlined dense lazy-rules :model-value="years + 543" :rules="[
+                          (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                        ]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
                           <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
+                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
                             </q-icon>
                           </template>
                         </q-input>
@@ -693,15 +575,8 @@ const viewFileUpload = async (url: string) => {
                   </div>
                   <div>
                     <label class="text-file">วันที่ลงนาม</label>
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="date"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
+                    <datepicker menu-class-name="modalfix" v-model="date" :locale="'th'" autoApply borderless
+                      :enableTimePicker="false" week-start="0">
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -709,106 +584,66 @@ const viewFileUpload = async (url: string) => {
                         {{ parseInt(value + 543) }}
                       </template>
                       <template #trigger>
-                        <q-input
-                          outlined
-                          dense
-                          class="full-width datepicker"
-                          hide-bottom-space
-                          :model-value="date != null ? date2Thai(date) : null"
-                          :label="`${'วันที่ลงนาม'}`"
-                          :rules="[
+                        <q-input outlined dense class="full-width datepicker" hide-bottom-space
+                          :model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่ลงนาม'}`" :rules="[
                             (val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
-                          ]"
-                        >
+                          ]">
                           <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
+                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
                             </q-icon>
                           </template>
                         </q-input>
                       </template>
                     </datepicker>
                   </div>
+
+                  <!-- บันทึกรายละเอียดคำสั่ง  -->
+                  <div class="row col-12 q-mt-md">
+                    <q-space></q-space>
+                    <q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'"
+                      :disable="!validateForm()" @click="saveDetail">
+                    </q-btn>
+                  </div>
+
                 </div>
               </fieldset>
-              <div class="flex justify-around">
-                <q-btn
-                  unelevated
-                  label="ออกคำสั่ง"
-                  :color="validateForm() ? 'public' : 'grey'"
-                  :disable="
-                    statusOrder == 'N' || orderStatusName === 'ออกคำสั่งแล้ว'
-                  "
-                  @click="clickExecute(orderId)"
-                />
-                <q-btn
-                  class="text-dark"
-                  unelevated
-                  label="ส่งไปลงนาม"
-                  color="grey"
-                  :disable="
-                    statusOrder == 'N' || orderStatusName === 'ออกคำสั่งแล้ว'
-                  "
-                />
-              </div>
-            </div>
-          </q-form>
+            </q-form>
+
+          </div>
         </template>
       </q-splitter>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อส่งสำเนา"
-      >
+      <q-btn v-if="orderStatusName !== 'ออกคำสั่งแล้ว'" dense outline color="primary" icon="chevron_left"
+        @click="previous" class="q-pr-md" label="เลือกรายชื่อส่งสำเนา">
       </q-btn>
-      <q-btn
-        unelevated
-        label="บันทึก"
-        :color="validateForm() ? 'public' : 'grey'"
-        :disable="!validateForm()"
-        @click="save"
-      >
+
+      <!-- ออกคำสั่ง -->
+      <q-btn :disable="statusOrder == 'N' || orderStatusName === 'ออกคำสั่งแล้ว'" unelevated label="ออกคำสั่ง" :color="statusOrder == 'Y' && orderStatusName !== 'ออกคำสั่งแล้ว' ? 'public' : 'grey'">
+        <q-menu>
+          <q-list style="min-width: 150px">
+            <q-item clickable v-close-popup @click="clickExecute(orderId)">
+              <q-item-section>ออกคำสั่งทันที</q-item-section>
+            </q-item>
+            <q-item clickable v-close-popup disabled>
+              <q-item-section>ส่งไปลงนาม</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
       </q-btn>
+
     </div>
 
-    <q-dialog
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
+    <q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
       <q-card class="bg-white text-white">
         <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
+          <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
+            v-close-popup />
         </div>
         <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
           <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -816,32 +651,16 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
           <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
+            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent :scale="0.1" />
             <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
           </div>
           <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -849,12 +668,7 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
@@ -862,33 +676,16 @@ const viewFileUpload = async (url: string) => {
       </q-card>
     </q-dialog>
 
-    <q-dialog
-      v-model="dialogFileUpload"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
+    <q-dialog v-model="dialogFileUpload" persistent :maximized="true" transition-show="slide-up"
+      transition-hide="slide-down">
       <q-card class="bg-white text-white">
         <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
+          <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
+            v-close-popup />
         </div>
         <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
           <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -896,32 +693,16 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
           <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfFileUploadSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
+            <VuePDF ref="vuePDFRef" :pdf="pdfFileUploadSrc" :page="page" fit-parent :scale="0.1" />
             <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
           </div>
           <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -929,12 +710,7 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>