From fa6ff957f632086c6b00a36d2b3e3898be476fbd Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 20 Mar 2024 11:59:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?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=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99/=E0=B8=84=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |    6 +
 .../13_salary/components/Command/step01.vue   | 2407 +++++++++++++++++
 .../13_salary/components/Command/step02.vue   |  776 ++++++
 .../13_salary/components/Command/step03.vue   |  665 +++++
 .../13_salary/components/Command/step04.vue   | 1183 ++++++++
 src/modules/13_salary/router.ts               |   12 +
 src/modules/13_salary/views/commandSalary.vue |  403 +++
 7 files changed, 5452 insertions(+)
 create mode 100644 src/modules/13_salary/components/Command/step01.vue
 create mode 100644 src/modules/13_salary/components/Command/step02.vue
 create mode 100644 src/modules/13_salary/components/Command/step03.vue
 create mode 100644 src/modules/13_salary/components/Command/step04.vue
 create mode 100644 src/modules/13_salary/views/commandSalary.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 8aacd7725..53e6c1786 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -664,6 +664,12 @@ const menuList = readonly<any[]>([
         path: "salaryEmployeeLists",
         role: "salary",
       },
+      {
+        key: 12.6,
+        label: "ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง",
+        path: "commandSalary",
+        role: "salary",
+      },
     ],
   },
   {
diff --git a/src/modules/13_salary/components/Command/step01.vue b/src/modules/13_salary/components/Command/step01.vue
new file mode 100644
index 000000000..ac2b1ab17
--- /dev/null
+++ b/src/modules/13_salary/components/Command/step01.vue
@@ -0,0 +1,2407 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QForm } from "quasar";
+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 { complaintLists } from "@/modules/10_order/interface/response/Order";
+import type { QTableProps } from "quasar";
+import type {
+  DataOption1,
+  OrederResult,
+} from "@/modules/10_order/interface/index/Main";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import { useOrderPlacementDataStore } from "@/modules/10_order/store";
+
+const DataStore = useOrderPlacementDataStore();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+  dialogMessageNotify,
+} = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+const route = useRoute();
+const router = useRouter();
+
+const orderId = route.params.orderid;
+const orderId_paramsName = route.name;
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+
+const myForm = ref<QForm>();
+//option
+const typeOrderOption = ref<DataOption1[]>([]);
+const byOrderOption = ref<DataOption1[]>([]);
+const CommandOption = ref<DataOption1[]>([]);
+
+//Main
+const typeOrder = ref<any>([]);
+const nameOrder = ref<any>("");
+const command = ref<number | "">();
+const dateYear = ref<number>(new Date().getFullYear());
+const dateCommand = ref<Date>(new Date());
+const byOrder = ref<string>("");
+const nameCommand = ref<any>([]);
+const positionCommand = ref<string>("");
+
+//form  C-PM-01 - 04
+const examRound = ref<string>("");
+const examRoundOption = ref<DataOption1[]>([]);
+const conclusionRegisterNo = ref<string>("");
+const conclusionRegisterDate = ref<Date>(new Date());
+const conclusionResultNo = ref<string>("");
+const conclusionResultDate = ref<Date>(new Date());
+// C-PM-05 - 06
+const meeting = ref<string>("");
+const dateMeeting = ref<Date>(new Date());
+//  C-PM-08
+const conclusionReturnNo = ref<string>("");
+const conclusionReturnDate = ref<Date>(new Date());
+// C-PM-09
+const organizations = ref<string>("");
+const order = ref<string>("");
+const orderDate = ref<Date>(new Date());
+const book = ref<string>("");
+const bookDate = ref<Date>(new Date());
+// C-PM-10
+const dialogVisible = ref<boolean>(false);
+const organizationsOld = ref<string>("");
+const orderOld = ref<string>("");
+const orderOldDate = ref<Date>(new Date());
+const locationname = ref<string>("");
+const experimentOc = ref<string>("");
+const experimentformDate = ref<Date>(new Date());
+const experimenttoDate = ref<Date>(new Date());
+const chairman = ref<string>("");
+const director = ref<string>("");
+const director2 = ref<string>("");
+
+// C-PM-11-12
+const committeeOc = ref<string>("");
+const committeeOrder = ref<string>("");
+const committeeDate = ref<Date>(new Date());
+// C-PM-13
+const receiveOc = ref<string>("");
+// C-PM-14
+const transferOrganizationName = ref<string>("");
+const conclusionReceive = ref<string>("");
+const conclusionReceiveDate = ref<Date>(new Date());
+// C-PM-16
+const orderNumber = ref<string>();
+const orderNumberDate = ref<Date>(new Date());
+// C-PM-18-20
+const fault = ref<string>("");
+const guiltyBasis = ref<string>("");
+const conclusionFireNo = ref<string>("");
+const conclusionFireDate = ref<Date>(new Date());
+const conclusionFireResolution = ref<string>("");
+// C-PM-24
+const conclusionTranferNo = ref<string>("");
+const conclusionTranferDate = ref<Date>(new Date());
+
+// C-PM-25-32
+const faultLevel = ref<string>("");
+const caseFault = ref<string>("");
+const result = ref<string>("");
+const refRaw = ref<string>("");
+const complaintId = ref<string>("");
+
+const typeOrderFilter = ref<any>({
+  typeOrderOption: [],
+});
+
+onMounted(async () => {
+  if (orderId) {
+    await fecthTypeOption("hasData");
+  } else {
+    await fecthTypeOption("noData");
+  }
+});
+// เลือกคำสั่งโดย
+watch(byOrder, async () => {
+  await http
+    .get(config.API.approverOC(byOrder.value))
+    .then((res) => {
+      CommandOption.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+});
+//เลือกผู้ลงนาม
+watch(nameCommand, async () => {
+  if (positionCommand.value === "" || positionCommand.value === undefined) {
+    positionCommand.value = nameCommand.value.positionName;
+  }
+});
+
+const commandCodes = ref<string[]>([
+  "C-PM-19",
+  "C-PM-20",
+  "C-PM-25",
+  "C-PM-26",
+  "C-PM-27",
+  "C-PM-28",
+  "C-PM-29",
+  "C-PM-30",
+  "C-PM-31",
+  "C-PM-32",
+]);
+// เรียกคำสั่ง
+const fecthTypeOption = async (actions: string) => {
+  showLoader();
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      const response = res.data.result;
+      const filterRes = response.filter((e: any) =>
+        commandCodes.value.includes(e.commandCode)
+      );
+
+      const data =
+        orderId_paramsName === "OrderDetail" ||
+        orderId_paramsName === "OrderAdd"
+          ? response
+          : filterRes;
+
+      typeOrderOption.value = data.map((e: OrederResult) => ({
+        id: e.id,
+        name: e.name,
+        category: e.category,
+        commandCode: e.commandCode,
+        fullname: e.commandCode + "   " + e.name,
+      }));
+      typeOrderFilter.value = data.map((e: OrederResult) => ({
+        id: e.id,
+        name: e.name,
+        category: e.category,
+        commandCode: e.commandCode,
+        fullname: e.commandCode + "   " + e.name,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fecthCommand();
+      if (actions == "hasData") {
+        await fetchdetailOrder(); // เมื่อแก้ไขจะเรียกข้อมูลรายละเอียด
+      }
+      hideLoader();
+    });
+};
+// เรียกรายละเอียดของคำสั่ง
+const fetchdetailOrder = async () => {
+  let orderIdString = orderId.toString();
+  await http
+    .get(config.API.detailOrder(orderIdString))
+    .then(async (res: any) => {
+      const data = res.data.result;
+
+      const orderTypeCode = await data.orderTypeCode.toUpperCase();
+      await optionsData(orderTypeCode);
+
+      typeOrder.value = typeOrderOption.value.find(
+        (e) => e.id === data.orderTypeValue
+      );
+      nameOrder.value = data.orderTitle;
+      command.value = data.orderNo;
+      dateYear.value = Number(data.orderYear);
+      dateCommand.value = data.orderDate;
+      byOrder.value = data.orderBy;
+      nameCommand.value = data.signatoryBy;
+      positionCommand.value = data.signatoryPosition;
+      examRound.value = data.examRound;
+      conclusionRegisterNo.value = data.conclusionRegisterNo;
+      conclusionRegisterDate.value = data.conclusionRegisterDate;
+      conclusionResultNo.value = data.conclusionResultNo;
+      conclusionResultDate.value = data.conclusionResultDate;
+      // 05 -06
+      meeting.value = data.conclusionMeetingNo;
+      dateMeeting.value = data.conclusionMeetingDate;
+      // 08
+      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.militaryCommanDate;
+      //10
+      if (data.orderTypeCode === "c-pm-10") {
+        nodeTree();
+      }
+      organizationsOld.value = data.placementCommandIssuer;
+      orderOld.value = data.placementCommandNo;
+      orderOldDate.value = data.placementCommandDate;
+      locationname.value = data.placementPositionName;
+      experimentOc.value = data.placementOrganizationName;
+      experimentformDate.value = data.probationStartDate;
+      experimenttoDate.value = data.probationEndDate;
+      chairman.value = data.chairManFullName;
+      director.value = data.member1FullName;
+      director2.value = data.member2FullName;
+      //11-12
+      committeeOc.value = data.placementCommandIssuer;
+      committeeOrder.value = data.placementCommandNo;
+      committeeDate.value = data.placementCommandDate;
+      //13
+      receiveOc.value = data.receiveOrganizationName;
+      //14
+      transferOrganizationName.value = data.transferOrganizationName;
+      conclusionReceive.value = data.conclusionReceiveNo;
+      conclusionReceiveDate.value = data.conclusionReceiveDate;
+      //16
+      orderNumber.value = data.govAidCommandNo;
+      orderNumberDate.value = data.govAidCommandDate;
+      //18-20
+      fault.value = data.fault;
+      guiltyBasis.value = data.guiltyBasis;
+      conclusionFireNo.value = data.conclusionFireNo;
+      conclusionFireDate.value = data.conclusionFireDate;
+      conclusionFireResolution.value = data.conclusionFireResolution;
+      // 24
+      conclusionTranferNo.value = data.conclusionTranferNo;
+      conclusionTranferDate.value = data.conclusionTranferDate;
+
+      // 19, 20 และ 25-32
+      faultLevel.value = data.faultLevel;
+      caseFault.value = data.caseFault;
+      result.value = data.result;
+      refRaw.value = data.refRaw;
+      complaintId.value = data.complaintId;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      // await fecthCommand();
+      hideLoader();
+    });
+};
+
+const fecthCommand = async () => {
+  await http
+    .get(config.API.organizationsOrder())
+    .then((res) => {
+      byOrderOption.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const optionsData = async (commandCode: string) => {
+  const orderTypeCode = await commandCode.toUpperCase();
+  if (orderTypeCode === "C-PM-10") {
+    nodeTree();
+  }
+  nameOrder.value = DataStore.nameOrderFilter(orderTypeCode);
+
+  // บรรจุ แต่งตั้ง ย้าย 01 - 04
+  if (
+    orderTypeCode == "C-PM-01" ||
+    orderTypeCode == "C-PM-02" ||
+    orderTypeCode == "C-PM-03" ||
+    orderTypeCode == "C-PM-04"
+  ) {
+    fecthExamRoundOption(orderTypeCode);
+  }
+
+  // คำสั่งวินัย
+  if (
+    route.name == "disciplineOrderDatail" ||
+    route.name == "disciplineOrderAdd"
+  ) {
+    await getComplaint();
+  }
+
+  // console.log(DataStore.complaintLists)
+  DataStore.complaintOption = [];
+  if (orderTypeCode == "C-PM-25" || orderTypeCode == "C-PM-26") {
+    await DataStore.complaintLists
+      .filter((x: complaintLists) => x.isDisciplinary === true)
+      .map((val: complaintLists) => {
+        DataStore.complaintOption.push({ id: val.id, name: val.title });
+      });
+  } else if (orderTypeCode == "C-PM-32") {
+    await DataStore.complaintLists
+      .filter(
+        (x: complaintLists) =>
+          x.isInvestigate === true ||
+          x.isDisciplinary === true ||
+          x.isResult === true
+      )
+      .map((val: complaintLists) => {
+        DataStore.complaintOption.push({ id: val.id, name: val.title });
+      });
+  } else if (
+    orderTypeCode == "C-PM-19" ||
+    orderTypeCode == "C-PM-20" ||
+    orderTypeCode == "C-PM-27" ||
+    orderTypeCode == "C-PM-28" ||
+    orderTypeCode == "C-PM-29" ||
+    orderTypeCode == "C-PM-30" ||
+    orderTypeCode == "C-PM-31"
+  ) {
+    await DataStore.complaintLists
+      .filter((x: complaintLists) => x.isResult === true)
+      .map((val: complaintLists) => {
+        DataStore.complaintOption.push({ id: val.id, name: val.title });
+      });
+  }
+};
+
+const selectCMP = async (selectOrder: OrederResult) => {
+  if (selectOrder != null) {
+    const orderTypeCode = await selectOrder.commandCode.toUpperCase();
+    optionsData(orderTypeCode);
+  }
+  //01-04
+  examRound.value = "";
+  conclusionRegisterNo.value = "";
+  conclusionRegisterDate.value = new Date();
+  conclusionResultNo.value = "";
+  conclusionResultDate.value = new Date();
+  // 05-06
+  meeting.value = "";
+  dateMeeting.value = new Date();
+  //08
+  conclusionReceive.value = "";
+  conclusionReceiveDate.value = new Date();
+  //09
+  organizations.value = "";
+  order.value = "";
+  orderDate.value = new Date();
+  book.value = "";
+  bookDate.value = new Date();
+  //10
+  organizationsOld.value, (orderOld.value = "");
+  orderOldDate.value = new Date();
+  locationname.value = "";
+  experimentOc.value = "";
+  experimentformDate.value = new Date();
+  experimenttoDate.value = new Date();
+  chairman.value = "";
+  director.value = "";
+  director2.value = "";
+  //11-12
+  committeeOc.value = "";
+  committeeOrder.value = "";
+  committeeDate.value = new Date();
+  //13
+  receiveOc.value = "";
+  //14
+  transferOrganizationName.value = "";
+  conclusionReceive.value = "";
+  conclusionReceiveDate.value = new Date();
+  //16
+  orderNumber.value = "";
+  orderNumberDate.value = new Date();
+  //18-20
+  fault.value = "";
+  guiltyBasis.value = "";
+  conclusionFireNo.value = "";
+  conclusionFireDate.value = new Date();
+  conclusionFireResolution.value = "";
+  // 24
+  conclusionTranferNo.value = "";
+  conclusionTranferDate.value = new Date();
+  // 19, 20 & 25-32
+  faultLevel.value = "";
+  caseFault.value = "";
+  result.value = "";
+  refRaw.value = "";
+
+  complaintId.value = "";
+};
+
+// เรียกรอบการสอบ
+const fecthExamRoundOption = async (commandCode: string) => {
+  await http
+    .get(config.API.examroundOrder(commandCode))
+    .then((res) => {
+      examRoundOption.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+/**
+ * ดึงรายการเรื่องร้องเรียนจาก API
+ */
+async function getComplaint() {
+  await http
+    .get(config.API.disciplineReportList)
+    .then((res: any) => {
+      const dataArr = res.data.result;
+      DataStore.complaintLists = dataArr;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+// บันทึกข้อมูล
+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
+    );
+    signBy = await name2?.name;
+  }
+
+  const orderByOrganizationName = await byOrderOption.value.find(
+    (x: any) => x.id == byOrder.value
+  )?.name;
+
+  const formdata = {
+    orderTypeValue: typeOrder.value.id,
+    orderTitle: nameOrder.value,
+    orderNo:
+      command.value == undefined || command.value == "" ? "" : command.value,
+    orderYear: dateYear.value,
+    orderDate: dateCommand.value,
+    orderBy: byOrder.value,
+    orderByOrganizationName: orderByOrganizationName,
+    registerPosition: "",
+    signatoryBy: signBy === "" ? nameCommand.value : signBy,
+    signatoryPosition: positionCommand.value,
+  };
+  if (
+    typeOrder.value.commandCode == "C-PM-01" ||
+    typeOrder.value.commandCode == "C-PM-02" ||
+    typeOrder.value.commandCode == "C-PM-03" ||
+    typeOrder.value.commandCode == "C-PM-04"
+  ) {
+    Object.assign(formdata, {
+      examRound: examRound.value,
+      conclusionRegisterNo: conclusionRegisterNo.value,
+      conclusionRegisterDate: conclusionRegisterDate.value,
+      conclusionResultNo: conclusionResultNo.value.toString(),
+      conclusionResultDate: conclusionResultDate.value,
+    });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-05" ||
+    typeOrder.value.commandCode == "C-PM-06"
+  ) {
+    Object.assign(formdata, {
+      conclusionMeetingNo: meeting.value,
+      conclusionMeetingDate: dateMeeting.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-08") {
+    Object.assign(formdata, {
+      conclusionReturnNo: conclusionReturnNo.value,
+      conclusionReturnDate: conclusionReturnDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-09") {
+    Object.assign(formdata, {
+      sourceOrganizationName: organizations.value,
+      conclusionReturnNo: order.value,
+      conclusionReturnDate: orderDate.value,
+      militaryCommandNo: book.value,
+      militaryCommandDate: bookDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-10") {
+    Object.assign(formdata, {
+      placementCommandIssuer: organizationsOld.value,
+      placementCommandNo: orderOld.value,
+      placementCommandDate: orderOldDate.value,
+      placementPositionName: locationname.value,
+      placementOrganizationName: experimentOc.value,
+      probationStartDate: experimentformDate.value,
+      probationEndDate: experimenttoDate.value,
+      chairManFullName: chairman.value,
+      member1FullName: director.value,
+      member2FullName: director2.value,
+    });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-11" ||
+    typeOrder.value.commandCode == "C-PM-12"
+  ) {
+    Object.assign(formdata, {
+      placementCommandIssuer: committeeOc.value,
+      placementCommandNo: committeeOrder.value,
+      placementCommandDate: committeeDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-13") {
+    Object.assign(formdata, {
+      receiveOrganizationName: receiveOc.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-14") {
+    Object.assign(formdata, {
+      transferOrganizationName: transferOrganizationName.value,
+      conclusionReceiveNo: conclusionReceive.value,
+      conclusionReceiveDate: conclusionReceiveDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-16") {
+    Object.assign(formdata, {
+      govAidCommandNo: orderNumber.value,
+      govAidCommandDate: orderNumberDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-18") {
+    Object.assign(formdata, {
+      fault: fault.value,
+      guiltyBasis: guiltyBasis.value,
+      conclusionFireNo: conclusionFireNo.value,
+      conclusionFireDate: conclusionFireDate.value,
+      conclusionFireResolution: conclusionFireResolution.value,
+    });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-19" ||
+    typeOrder.value.commandCode == "C-PM-20"
+  ) {
+    Object.assign(formdata, {
+      complaintId: complaintId.value,
+      fault: "-",
+      guiltyBasis: "-",
+      conclusionFireNo: conclusionFireNo.value,
+      conclusionFireDate: conclusionFireDate.value,
+      conclusionFireResolution: conclusionFireResolution.value,
+      faultLevel: faultLevel.value,
+      caseFault: caseFault.value,
+      result: result.value,
+      refRaw: refRaw.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-24") {
+    Object.assign(formdata, {
+      conclusionTranferNo: conclusionTranferNo.value,
+      conclusionTranferDate: conclusionTranferDate.value,
+    });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-25" ||
+    typeOrder.value.commandCode == "C-PM-26" ||
+    typeOrder.value.commandCode == "C-PM-27" ||
+    typeOrder.value.commandCode == "C-PM-28" ||
+    typeOrder.value.commandCode == "C-PM-29" ||
+    typeOrder.value.commandCode == "C-PM-30" ||
+    typeOrder.value.commandCode == "C-PM-31" ||
+    typeOrder.value.commandCode == "C-PM-32"
+  ) {
+    Object.assign(formdata, {
+      complaintId: complaintId.value,
+      faultLevel: faultLevel.value,
+      caseFault: caseFault.value,
+      result: result.value,
+      refRaw: refRaw.value,
+    });
+  }
+
+  // เช็คค่าว่าง
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      dialogConfirm($q, () => {
+        // ถ้ามี orderId ให้ อัพเดท ไม่มีให้สร้าง
+        if (!orderId) {
+          createListOrder(formdata, typeOrder.value.commandCode);
+        } else {
+          let orderIdString = orderId.toString();
+          updateOrder(formdata, orderIdString, typeOrder.value.commandCode);
+        }
+      });
+    }
+  });
+};
+
+// สร้างคำสัง
+const createListOrder = async (formData: Object, type: string) => {
+  showLoader();
+  await http
+    .post(config.API.orderCPM(type), formData)
+    .then((res) => {
+      const data = res.data.result;
+      localStorage.setItem("orderId", data.id);
+
+      if (
+        route.name == "disciplineOrderDatail" ||
+        route.name == "disciplineOrderAdd"
+      ) {
+        router.push(`/discipline-order/detail/${data.id}?step=${2}`); // สร้างเสร็จแล้วให้ไป Step 2
+      } else {
+        router.push(`/order/detail/${data.id}?step=${2}`); // สร้างเสร็จแล้วให้ไป Step 2
+      }
+      next();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const updateOrder = async (formData: Object, orderId: string, type: string) => {
+  showLoader();
+  await http
+    .put(config.API.orderCPMUpdate(type, orderId), formData)
+    .then(() => {
+      next(); // แก้ไขเสร็จแล้วให้ไป Step 2
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      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>("");
+// โหลด tree
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      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();
+    });
+};
+// เปิด POPUP เลือกรายชื่อตามหน่วยงาน
+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, "โปรดเลือกรายชื่อ");
+};
+
+const filterSelector = (val: any, update: Function, fullname: any) => {
+  update(() => {
+    typeOrderOption.value = typeOrderFilter.value.filter(
+      (v: any) => v.fullname.toLowerCase().indexOf(val.toLowerCase()) > -1
+    );
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<template>
+  <div style="max-height: 68vh; overflow-y: scroll">
+    <!-- Main -->
+    <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">
+          <q-select
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="typeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            map-options
+            option-label="fullname"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @update:model-value="selectCMP(typeOrder)"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="row col-xs-7 col-md-3">
+          <div class="col-6">
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              v-model="command"
+              hide-bottom-space
+              :label="`${'คำสั่งเลขที่'}`"
+            />
+          </div>
+          <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"
+            >
+              <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>
+              </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"
+          >
+            <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"
+                :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>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="byOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            emit-value
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @update:model-value="(nameCommand = ''), (positionCommand = '')"
+          />
+        </div>
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
+        >
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="nameCommand"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกผู้มีอำนาจลงนาม'}`]"
+            hide-bottom-space
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            map-options
+            option-label="name"
+            :options="CommandOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          >
+            <template v-if="CommandOption.length === 0" v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-primary">
+                  กรุณาเลือกคำสั่งโดยก่อน
+                </q-item-section>
+              </q-item>
+            </template>
+          </selector>
+        </div>
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
+        >
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+            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
+            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
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div
+          class="col-12 q-mb-md"
+          v-if="typeOrder != null && typeOrder.commandCode"
+        >
+          <q-separator />
+        </div>
+      </div>
+
+      <!-- C-PM-01-04 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder != null &&
+          (typeOrder.commandCode === 'C-PM-01' ||
+            typeOrder.commandCode === 'C-PM-02' ||
+            typeOrder.commandCode === 'C-PM-03' ||
+            typeOrder.commandCode === 'C-PM-04')
+        "
+      >
+        <div class="col-xs-12 col-md-12">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionRegisterNo"
+            :rules="[
+              (val) =>
+                !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`,
+            ]"
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionRegisterDate"
+            :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"
+                :model-value="
+                  conclusionRegisterDate != null
+                    ? date2Thai(conclusionRegisterDate)
+                    : 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 class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionResultNo"
+            :rules="[
+              (val) =>
+                !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`,
+            ]"
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionResultDate"
+            :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"
+                :model-value="
+                  conclusionResultDate != null
+                    ? date2Thai(conclusionResultDate)
+                    : 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>
+
+      <!-- C-PM-05-06 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder != null &&
+          (typeOrder.commandCode === 'C-PM-05' ||
+            typeOrder.commandCode === 'C-PM-06')
+        "
+      >
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="meeting"
+            :rules="[(val) => !!val || `${'กรุณากรอกการประชุม ครั้งที่'}`]"
+            :label="`${'การประชุม ครั้งที่'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateMeeting"
+            :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"
+                :model-value="
+                  dateMeeting != null ? date2Thai(dateMeeting) : 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>
+      <!-- C-PM-08 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-08'"
+      >
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionReturnNo"
+            :rules="[
+              (val) =>
+                !!val ||
+                `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`,
+            ]"
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionReturnDate"
+            :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"
+                :model-value="
+                  conclusionReturnDate != null
+                    ? date2Thai(conclusionReturnDate)
+                    : 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>
+
+      <!-- C-PM-09 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-09'"
+      >
+        <div class="col-xs-12 col-md-12">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="organizations"
+            :rules="[(val) => !!val || `${'กรุณากกรอกหน่วยงาน'}`]"
+            :label="`${'หน่วยงาน'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="order"
+            :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]"
+            :label="`${'คำสั่งที่'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="orderDate"
+            :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"
+                :model-value="orderDate != null ? date2Thai(orderDate) : 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 class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="book"
+            :rules="[
+              (val) => !!val || `${'กรุณากกรอกหนังสือสำนักงาน ก.พ. ที่ นร'}`,
+            ]"
+            :label="`${'หนังสือสำนักงาน ก.พ. ที่ นร'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="bookDate"
+            :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"
+                :model-value="bookDate != null ? date2Thai(bookDate) : 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>
+
+      <!-- C-PM-10 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-10'"
+      >
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="organizationsOld"
+            :rules="[(val) => !!val || `${'กรุณากรอกหน่วยงาน  (ต้นทาง)'}`]"
+            :label="`${'ชื่อหน่วยงาน (ต้นทาง)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="orderOld"
+            :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]"
+            :label="`${'คำสั่งที่ (ต้นทาง)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="orderOldDate"
+            :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"
+                :model-value="
+                  orderOldDate != null ? date2Thai(orderOldDate) : 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 class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="locationname"
+            :rules="[(val) => !!val || `${'กรุณากรอกให้ดำรงตำแหน่ง ณ'}`]"
+            :label="`${'ให้ดำรงตำแหน่ง ณ'}`"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="experimentOc"
+            :rules="[
+              (val) =>
+                !!val ||
+                `${'กรุณากรอกหน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`,
+            ]"
+            :label="`${'หน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-md-4"></div>
+
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="experimentformDate"
+            :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"
+                :model-value="
+                  experimentformDate != null
+                    ? date2Thai(experimentformDate)
+                    : 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 class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="experimenttoDate"
+            :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"
+                :model-value="
+                  experimenttoDate != null ? date2Thai(experimenttoDate) : 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 class="col-md-4"></div>
+
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="chairman"
+            :rules="[(val) => !!val || `${'กรุณากรอกชื่อประธาน'}`]"
+            :label="`${'ประธาน'}`"
+            hide-bottom-space
+            @click="openDialog('chairman')"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="director"
+            :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
+            :label="`${'กรรมการ'}`"
+            hide-bottom-space
+            @click="openDialog('director')"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="director2"
+            :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
+            :label="`${'กรรมการ'}`"
+            hide-bottom-space
+            @click="openDialog('director2')"
+          />
+        </div>
+      </div>
+
+      <!-- C-PM-11 - 12 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder != null &&
+          (typeOrder.commandCode === 'C-PM-11' ||
+            typeOrder.commandCode === 'C-PM-12')
+        "
+      >
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="committeeOc"
+            :rules="[
+              (val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`,
+            ]"
+            :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="committeeOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกอนุสนธิคำสั่งที่'}`]"
+            :label="`${'อนุสนธิคำสั่งที่'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="committeeDate"
+            :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"
+                :model-value="
+                  committeeDate != null ? date2Thai(committeeDate) : 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>
+
+      <!-- C-PM-13 -->
+      <div
+        class="row col-6 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-13'"
+      >
+        <div class="col-xs-12 col-md-12">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="receiveOc"
+            :rules="[(val) => !!val || `${'กรุณากรอกหน่วยงาน'}`]"
+            :label="`${'ชื่อหน่วยงาน'}`"
+            hide-bottom-space
+          />
+        </div>
+      </div>
+
+      <!-- C-PM-14 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-14'"
+      >
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="transferOrganizationName"
+            :rules="[(val) => !!val || `${'กรุณากรอกส่วนราชการที่ให้โอน'}`]"
+            :label="`${'ส่วนราชการที่ให้โอน'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionReceive"
+            :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
+            :label="`${'มติ กก. ครั้งที่'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionReceiveDate"
+            :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"
+                :model-value="
+                  conclusionReceiveDate != null
+                    ? date2Thai(conclusionReceiveDate)
+                    : 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>
+
+      <!-- C-PM-16 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-16'"
+      >
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="orderNumber"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอกคำสั่งให้ช่วยราชการเลขที่'}`,
+            ]"
+            :label="`${'คำสั่งให้ช่วยราชการเลขที่'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="orderNumberDate"
+            :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"
+                :model-value="
+                  orderNumberDate != null ? date2Thai(orderNumberDate) : 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>
+
+      <!-- C-PM-18-20 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-18'"
+      >
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="fault"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอกรายละเอียดการกระทำความผิด'}`,
+            ]"
+            :label="`${'รายละเอียดการกระทำความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="guiltyBasis"
+            :rules="[(val) => !!val || `${'กรุณากรอกฐานความผิด'}`]"
+            :label="`${'ฐานความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionFireNo"
+            :rules="[
+              (val) =>
+                !!val || `${'กรุณากรอกครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`,
+            ]"
+            :label="`${'ครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionFireDate"
+            :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"
+                :model-value="
+                  conclusionFireDate != null
+                    ? date2Thai(conclusionFireDate)
+                    : 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 class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionFireResolution"
+            :rules="[
+              (val) =>
+                !!val ||
+                `${'กรุณากรอก มติที่ประชุม(เรื่องการดำเนินการทางวินัย)'}`,
+            ]"
+            :label="`${'มติที่ประชุม (เรื่องการดำเนินการทางวินัย)'}`"
+            hide-bottom-space
+          />
+        </div>
+      </div>
+
+      <!-- C-PM-18-19 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder != null &&
+          (typeOrder.commandCode === 'C-PM-19' ||
+            typeOrder.commandCode === 'C-PM-20')
+        "
+      >
+        <div class="row col-12">
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              v-model="complaintId"
+              :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
+              emit-value
+              hide-bottom-space
+              :label="`${'เรื่องร้องเรียน'}`"
+              map-options
+              option-label="name"
+              :options="DataStore.complaintOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+            />
+          </div>
+        </div>
+
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionFireNo"
+            :rules="[
+              (val) =>
+                !!val || `${'กรุณากรอกครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`,
+            ]"
+            :label="`${'ครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionFireDate"
+            :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"
+                :model-value="
+                  conclusionFireDate != null
+                    ? date2Thai(conclusionFireDate)
+                    : 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 class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionFireResolution"
+            :rules="[
+              (val) =>
+                !!val ||
+                `${'กรุณากรอก มติที่ประชุม(เรื่องการดำเนินการทางวินัย)'}`,
+            ]"
+            :label="`${'มติที่ประชุม (เรื่องการดำเนินการทางวินัย)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="faultLevel"
+            :rules="[(val) => !!val || `${'กรุณากรอกระดับความผิด'}`]"
+            :label="`${'ระดับความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="caseFault"
+            :rules="[(val) => !!val || `${'กรุณากรอกกรณีความผิด'}`]"
+            :label="`${'กรณีความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="result"
+            :rules="[(val) => !!val || `${'กรุณากรอกผลดำเนินการพิจารณา'}`]"
+            :label="`${'ผลดำเนินการพิจารณา'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="refRaw"
+            :rules="[(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`]"
+            :label="`${'อ้างอิงมาตราตามกฎหมาย'}`"
+            hide-bottom-space
+          />
+        </div>
+      </div>
+
+      <!-- C-PM-24 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-24'"
+      >
+        <div class="col-xs-12 col-md-3">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="conclusionTranferNo"
+            :rules="[(val) => !!val || `${'กรุณากรอกครั่งที่'}`]"
+            hide-bottom-space
+            :label="`${'ครั้งที่'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-md-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionTranferDate"
+            :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"
+                :model-value="
+                  conclusionTranferDate != null
+                    ? date2Thai(conclusionTranferDate)
+                    : 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>
+
+      <!-- C-PM-25 -32 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder != null &&
+          (typeOrder.commandCode === 'C-PM-25' ||
+            typeOrder.commandCode === 'C-PM-26' ||
+            typeOrder.commandCode === 'C-PM-27' ||
+            typeOrder.commandCode === 'C-PM-28' ||
+            typeOrder.commandCode === 'C-PM-29' ||
+            typeOrder.commandCode === 'C-PM-30' ||
+            typeOrder.commandCode === 'C-PM-31' ||
+            typeOrder.commandCode === 'C-PM-32')
+        "
+      >
+        <div class="row col-12">
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              v-model="complaintId"
+              :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
+              emit-value
+              hide-bottom-space
+              :label="`${'เรื่องร้องเรียน'}`"
+              map-options
+              option-label="name"
+              :options="DataStore.complaintOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+            />
+          </div>
+        </div>
+
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="faultLevel"
+            :rules="[(val) => !!val || `${'กรุณากรอกระดับความผิด'}`]"
+            :label="`${'ระดับความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="caseFault"
+            :rules="[(val) => !!val || `${'กรุณากรอกกรณีความผิด'}`]"
+            :label="`${'กรณีความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="result"
+            :rules="[(val) => !!val || `${'กรุณากรอกผลดำเนินการพิจารณา'}`]"
+            :label="`${'ผลดำเนินการพิจารณา'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            v-model="refRaw"
+            :rules="[(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`]"
+            :label="`${'อ้างอิงมาตราตามกฎหมาย'}`"
+            hide-bottom-space
+          />
+        </div>
+      </div>
+    </q-form>
+  </div>
+
+  <q-separator />
+  <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <q-btn unelevated label="บันทึก" color="public" @click="submit">
+      <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>
+              </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/13_salary/components/Command/step02.vue b/src/modules/13_salary/components/Command/step02.vue
new file mode 100644
index 000000000..c8e74d31f
--- /dev/null
+++ b/src/modules/13_salary/components/Command/step02.vue
@@ -0,0 +1,776 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
+import type { QInput } from "quasar";
+import type { QTableProps, QForm } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
+
+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 {
+  dialogMessageNotify,
+  dialogConfirm,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const route = useRoute();
+const $q = useQuasar();
+
+const routeName = ref<string>(route.name ? route.name.toString() : "");
+const modalData = ref<any>({
+  salaryAmount: null,
+  positionSalaryAmount: null,
+  monthSalaryAmount: null,
+  remarkVertical: "",
+  remarkHorizontal: "",
+});
+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: false,
+  },
+  {
+    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[]>([]);
+const orderTypeCode = ref<string>("");
+
+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);
+    await fetchOrder(id);
+  }
+};
+// เรียกรายชื่อออกคำสั่ง
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsselectedOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      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,
+          salaryAmount: r.salaryAmount,
+          positionSalaryAmount: r.positionSalaryAmount,
+          monthSalaryAmount: r.monthSalaryAmount,
+        });
+      });
+      rows.value = list;
+      selected.value = rows.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+//เรียกรายละเอียดของคำสั่ง
+const fetchOrder = async (id: string) => {
+  await http
+    .get(config.API.detailOrder(id))
+    .then((res) => {
+      let data = res.data.result;
+      orderTypeCode.value = data.orderTypeCode;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+};
+// เช็คคำสั่ง
+const statuscode = computed(() => {
+  if (
+    orderTypeCode.value === "c-pm-01" ||
+    orderTypeCode.value === "c-pm-02" ||
+    orderTypeCode.value === "c-pm-03" ||
+    orderTypeCode.value === "c-pm-04" ||
+    orderTypeCode.value === "c-pm-05" ||
+    orderTypeCode.value === "c-pm-06" ||
+    orderTypeCode.value === "c-pm-07" ||
+    orderTypeCode.value === "c-pm-08" ||
+    orderTypeCode.value === "c-pm-09" ||
+    orderTypeCode.value === "c-pm-14" ||
+    orderTypeCode.value === "c-pm-21" ||
+    orderTypeCode.value === "c-pm-22"
+  ) {
+    return false;
+  }
+  return true;
+});
+// เช็คหมายเหตุ
+const checkNote = computed(() => {
+  if (
+    orderTypeCode.value === "c-pm-01" ||
+    orderTypeCode.value === "c-pm-02" ||
+    orderTypeCode.value === "c-pm-03" ||
+    orderTypeCode.value === "c-pm-04"
+  ) {
+    return true;
+  }
+  return false;
+});
+// ยืนยันลบข้อมูลราชชื่อ
+const dialogDeleteData = async (id: string) => {
+  dialogRemove($q, () => deleteData(id));
+};
+// ลบข้อมูลราชชื่อ API
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then(() => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await conditionData();
+    });
+};
+// ปรับราชชื่อขึ้น
+const swapUp = async (id: string) => {
+  await http
+    .put(config.API.swapUpOrder(id))
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+// ปรับราชชื่อลง
+const swapDown = async (id: string) => {
+  await http
+    .put(config.API.swapDownOrder(id))
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
+  if (up) {
+    await swapUp(value.row.personalId);
+  } else {
+    await swapDown(value.row.personalId);
+  }
+};
+// บันทึกเงินเดือน
+const saveModal = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        putSalary(modalData.value);
+      }
+    });
+  }
+};
+const personalId = ref<string>("");
+// เปิด popup เงินเดือน
+const selectModal = (e: any) => {
+  titleName.value = e.name;
+  personalId.value = e.personalId;
+  modalOpenClose(e.personalId);
+};
+// เปิด popup เงินเดือน
+const modalOpenClose = async (personalId: string) => {
+  modal.value = !modal.value;
+  if (modal.value) {
+    await fetchSalary(personalId);
+  } else {
+    titleName.value = "";
+  }
+  myForm.value?.reset();
+};
+// เรียกข้อมูลเงินเดือนตาม personalId
+const fetchSalary = async (personalId: string) => {
+  showLoader();
+  await http
+    .get(config.API.salaryOrder(personalId))
+    .then((res: any) => {
+      const data = res.data.result;
+      modalData.value = {
+        salaryAmount:
+          data.salaryAmount === 0 &&
+          data.positionSalaryAmount === 0 &&
+          data.monthSalaryAmount === 0
+            ? null
+            : data.salaryAmount,
+        positionSalaryAmount:
+          data.salaryAmount === 0 &&
+          data.positionSalaryAmount === 0 &&
+          data.monthSalaryAmount === 0
+            ? null
+            : data.positionSalaryAmount,
+        monthSalaryAmount:
+          data.salaryAmount === 0 &&
+          data.positionSalaryAmount === 0 &&
+          data.monthSalaryAmount === 0
+            ? null
+            : data.monthSalaryAmount,
+        remarkVertical: data.remarkVertical,
+        remarkHorizontal: data.remarkHorizontal,
+      };
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+// ยืนยันการแก้ไขข้อมูลเงินเดือน
+const putSalary = async (salary: any) => {
+  dialogConfirm($q, async () => {
+    showLoader();
+    if (modalData.value.salaryAmount === null) {
+      modalData.value.salaryAmount = 0;
+    }
+    if (modalData.value.positionSalaryAmount === null) {
+      modalData.value.positionSalaryAmount = 0;
+    }
+    if (modalData.value.monthSalaryAmount === null) {
+      modalData.value.monthSalaryAmount = 0;
+    }
+    await http
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionData();
+        modal.value = false;
+        hideLoader();
+      });
+  });
+};
+// เปิด popup เพิ่มข้อมูลราชชื่อ
+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;
+      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;
+    })
+    .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) {
+        dialogConfirm(
+          $q,
+          () => {
+            let data = [];
+            data.push(...selected.value.map((e: any) => e.refRecordId));
+            addlist(data);
+          },
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
+        );
+      }
+    });
+  }
+};
+// เพิ่มราชชื่อ API
+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) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
+};
+// บันทึกข้อมูล step 2
+const save = async () => {
+  const check = rows.value.find((x: any) => x.salaryAmount == 0);
+  if (
+    (selected.value.length > 0 && !check) ||
+    (statuscode.value === true && selected.value.length > 0)
+  ) {
+    dialogConfirm($q, () => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    });
+  } else if (check && statuscode.value === false) {
+    dialogMessageNotify($q, "ระบุรายละเอียดการเงินไม่ครบ");
+  } else {
+    dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
+  }
+};
+
+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,
+  };
+};
+const pagination = ref({
+  // sortBy: "OrderDate,OrderType",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="max-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-th auto-width v-if="statuscode !== true" />
+          </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">{{
+              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 v-if="statuscode !== true">
+              <q-btn
+                v-if="props.row.salaryAmount === 0"
+                dense
+                size="12px"
+                flat
+                round
+                color="blue"
+                @click="selectModal(props.row)"
+                icon="mdi-cash-multiple"
+              >
+                <q-tooltip>เงินเดือน</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-else
+                dense
+                size="12px"
+                flat
+                round
+                color="primary"
+                @click="selectModal(props.row)"
+                icon="mdi-information-outline"
+              >
+                <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"
+      >
+      <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 q-col-gutter-sm">
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.salaryAmount"
+                    :label="`${'เงินเดือน'}`"
+                    :rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    hide-bottom-space
+                  />
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.monthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
+                  <q-input
+                    dense
+                    outlined
+                    v-model="modalData.remarkVertical"
+                    label="หมายเหตุแนวตั้ง"
+                    type="textarea"
+                    rows="2"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
+                  <q-input
+                    dense
+                    outlined
+                    v-model="modalData.remarkHorizontal"
+                    type="textarea"
+                    label="หมายเหตุแนวนอน"
+                    rows="2"
+                  />
+                </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="
+              routeName === 'disciplineOrderDatail' ? 'single' : '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"
+          >
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/13_salary/components/Command/step03.vue b/src/modules/13_salary/components/Command/step03.vue
new file mode 100644
index 000000000..fab066146
--- /dev/null
+++ b/src/modules/13_salary/components/Command/step03.vue
@@ -0,0 +1,665 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { QInput, QForm } from "quasar";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+import type {
+  ResponseOrganiz,
+  ResponseCopyOrder,
+  DataCopyOrder,
+} from "@/modules/10_order/interface/response/Order";
+import type { RequestCopyOrder } from "@/modules/05_placement/interface/request/Order";
+import { useRoute } from "vue-router";
+import type { DataOption } from "@/modules/10_order/interface/index/Main";
+
+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 $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+
+const route = useRoute();
+
+const myForm = ref<QForm | null>(null);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+
+const modal = ref<boolean>(false);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+
+const selectedModal = ref<ResponseOrganiz[]>([]);
+
+const filterModal = ref<string>("");
+const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
+const columnsModal = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: false,
+  },
+  {
+    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 optionSelect = ref<DataOption[]>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "idCard",
+  "name",
+  "position",
+  "unit",
+  "send",
+]);
+const columns = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: false },
+  {
+    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" }),
+  },
+  {
+    name: "unit",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "unit",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "send",
+    align: "left",
+    label: "ช่องทางการส่งสำเนา",
+    field: "send",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const rows = ref<DataCopyOrder[]>([]);
+
+const editRows = ref<DataCopyOrder[]>([]);
+
+onMounted(async () => {
+  await conditionId();
+});
+
+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();
+    });
+};
+// เช็คค่า orderid
+const conditionId = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+// เรียก้อมูลใน Table
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let list: DataCopyOrder[] = [];
+      data.map((r: ResponseCopyOrder) => {
+        let selectCopyOrder = [];
+        if (r.emailChannel) {
+          selectCopyOrder.push(1);
+        }
+        if (r.inboxChannel) {
+          selectCopyOrder.push(2);
+        }
+        list.push({
+          personalId: r.personalId ?? "",
+          name: r.name ?? "",
+          idCard: r.idCard ?? "",
+          position: r.position ?? "",
+          unit: r.unit ?? "",
+          send: "",
+          mutiselect: selectCopyOrder,
+        });
+      });
+      if (editRows.value.length > 0) {
+        list.map((r: DataCopyOrder) => {
+          editRows.value.map((e: DataCopyOrder) => {
+            if (r.personalId == e.personalId) {
+              r.mutiselect = e.mutiselect;
+            }
+          });
+        });
+      }
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+// เลือกราชชื่อจากหน่วยงาน
+const saveData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    showLoader();
+    await http
+      .post(config.API.copyOrderPersonsId(id), selectedModal.value)
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionId();
+        clickClose();
+        // hideLoader();
+      });
+  }
+};
+
+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,
+  };
+};
+
+const clickClose = async () => {
+  modal.value = false;
+};
+// เปิด popup เพิ่มข้อมูล
+const clickAdd = async () => {
+  await nodeTree();
+  selected.value = "";
+  rowsModal.value = [];
+  selectedModal.value = [];
+  modal.value = true;
+  if (myForm.value !== null) {
+    myForm.value.reset();
+  }
+};
+// ยืนยันการลบข้อมูล
+const clickDelete = (id: string) => {
+  dialogRemove($q, () => deleteData(id));
+};
+// โหลดโครงสร้าง tree
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      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 deleteData = async (id: string) => {
+  await http
+    .delete(config.API.copyOrderId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      //   hideLoader();
+      await conditionId();
+    });
+};
+// บันทึกข้อมูล step 3
+const saveDataCopyOrder = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        await fetchSaveCopyOrder();
+      }
+    });
+  }
+};
+// บันทึกข้อมูล step 3 API
+const fetchSaveCopyOrder = async () => {
+  let list: RequestCopyOrder[] = [];
+  rows.value.map((r: DataCopyOrder) => {
+    list.push({
+      personalId: r.personalId,
+      emailChannel: r.mutiselect.includes(1),
+      inboxChannel: r.mutiselect.includes(2),
+    });
+  });
+
+  showLoader();
+  await http
+    .put(config.API.copyOrder, list)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const updateData = (row: DataCopyOrder) => {
+  editRows.value.push(row);
+};
+</script>
+
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="max-height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-py-sm items-center">
+        <q-btn flat round color="primary" @click="clickAdd" 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>
+      <q-form ref="myForm">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="idCard"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="idCard" :props="props">
+                {{ props.row.idCard }}
+              </q-td>
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="unit" :props="props">
+                {{ props.row.unit }}
+              </q-td>
+              <q-td key="send" :props="props">
+                <q-select
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  :outlined="true"
+                  dense
+                  v-model="props.row.mutiselect"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                    (val) =>
+                      val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                  ]"
+                  :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="optionSelect"
+                  option-value="id"
+                  input-debounce="0"
+                  color="primary"
+                  @update:model-value="() => updateData(props.row)"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-black">
+                        ไม่พบข้อมูลที่ค้นหา
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.personalId)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-form>
+    </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="saveDataCopyOrder"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-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"
+                  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"
+                      @click="resetFilter"
+                    />
+                  </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"
+              :filter="filterModal"
+              row-key="profileId"
+              selection="multiple"
+              v-model:selected="selectedModal"
+            >
+              <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-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-separator />
+      <q-card-actions align="right">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="saveData"
+          class="q-px-md"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/13_salary/components/Command/step04.vue b/src/modules/13_salary/components/Command/step04.vue
new file mode 100644
index 000000000..027decfd3
--- /dev/null
+++ b/src/modules/13_salary/components/Command/step04.vue
@@ -0,0 +1,1183 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import axios from "axios";
+import genReport from "@/plugins/genreport";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
+const route = useRoute();
+const $q = useQuasar();
+
+const orderId_params = route.params.orderid;
+const dialog = ref<boolean>(false);
+const dialogFileUpload = ref<boolean>(false);
+const splitterModel = ref<number>(70);
+const tab = ref<string>("main");
+
+const order = ref<string>("");
+const code = ref<string>("");
+const years = ref<number>(new Date().getDate());
+const date = ref<Date | null>(null);
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const OrderPDFUpload = ref<string>("");
+const TailerPDFUpload = ref<string>("");
+
+const orderCoverPdf = ref<any>();
+const orderAttachmentPdf = ref<string>("");
+
+const statusOrder = ref<string>();
+const orderName = ref<string>("");
+const orderStatusName = ref<string>("");
+const dataGen = ref<any>();
+
+const orderId = ref<string>(orderId_params.toString());
+onMounted(async () => {
+  if (orderId.value) {
+    await fetchAttachment(orderId.value);
+    await fecthstatusOrder();
+    await getCommandDetail();
+  }
+});
+
+// เช็คว่าต้องมีแนบท้ายไหม code ที่เพิ่มคืออันที่ไม่มีแนบท้าย
+const attachmentStatus = computed(() => {
+  return code.value != "c-pm-10" &&
+    code.value != "c-pm-11" &&
+    code.value != "c-pm-12" &&
+    code.value != "c-pm-16" &&
+    code.value != "c-pm-18" &&
+    code.value != "c-pm-19" &&
+    code.value != "c-pm-20" &&
+    code.value != "c-pm-21" &&
+    code.value != "c-pm-23" &&
+    code.value != "c-pm-25" &&
+    code.value != "c-pm-26" &&
+    code.value != "c-pm-27" &&
+    code.value != "c-pm-28" &&
+    code.value != "c-pm-29" &&
+    code.value != "c-pm-30" &&
+    code.value != "c-pm-31" &&
+    code.value != "c-pm-32"
+    ? true
+    : false;
+});
+
+// เช็คว่าต้องไป gen report ที่ server เพิ่มไหม code ที่เพิ่มคือคำสั่งใหม่ที่ต้องไป gen report อีกรอบ
+const genReportStatus = computed(() => {
+  return code.value == "c-pm-19" ||
+    code.value == "c-pm-20" ||
+    code.value == "c-pm-25" ||
+    code.value == "c-pm-26" ||
+    code.value == "c-pm-27" ||
+    code.value == "c-pm-28" ||
+    code.value == "c-pm-29" ||
+    code.value == "c-pm-30" ||
+    code.value == "c-pm-31" ||
+    code.value == "c-pm-32"
+    ? true
+    : false;
+});
+
+// เรียกข้อมูลคำสั่ง
+const getCommandDetail = async () => {
+  showLoader();
+  await http
+    .get(config.API.detailOrder(orderId.value))
+    .then(async (res) => {
+      const data = await res.data.result;
+      const orderTypeCode = await data.orderTypeCode;
+      code.value = orderTypeCode ?? "";
+      orderName.value = res.data.result.orderTitle;
+      orderStatusName.value = data.orderStatusName;
+
+      fetchReportCover("pdf", orderId.value);
+
+      if (attachmentStatus.value) {
+        fetchReportAttachment("pdf", orderId.value);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// โหลดคำสั่ง
+const downloadCover = async (type: string) => {
+  showLoader();
+
+  if (!genReportStatus.value) {
+    await http
+      .get(config.API.fileCover(code.value, type, orderId.value), {
+        responseType: "blob",
+      })
+      .then(async (res) => {
+        downloadFile(res, `คำสั่ง ${orderName.value}.${type}`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  } else if (type === "docx") {
+    genReport(dataGen.value, `คำสั่ง ${orderName.value}`, "docx");
+  } else {
+    const link = document.createElement("a");
+    var fileName = `คำสั่ง ${orderName.value}.${
+      type === "docx" ? "docx" : "pdf"
+    }`;
+    link.href = orderCoverPdf.value;
+    link.setAttribute("download", fileName);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    hideLoader();
+  }
+};
+
+// โหลด เอกสารแนบท้าย
+const downloadAttachment = async (type: string) => {
+  showLoader();
+  await http
+    .get(config.API.fileAttachment(code.value, type, orderId.value), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      downloadFile(res, `เอกสารแนบท้าย ${orderName.value}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+// เรียกไฟล์ คำสั่ง
+const fetchReportCover = async (type: string, orderId: string) => {
+  await http
+    .get(
+      config.API.reportOrderCover(type, orderId, code.value),
+      !genReportStatus.value
+        ? {
+            responseType: "blob",
+          }
+        : {}
+    )
+    .then(async (res: any) => {
+      if (!genReportStatus.value) {
+        const blob = new Blob([res.data]);
+        const objectUrl = URL.createObjectURL(blob);
+        orderCoverPdf.value = objectUrl;
+        if (tab.value == "main") {
+          viewPDF(orderCoverPdf.value);
+        }
+      } else {
+        // report template
+        dataGen.value = res.data.result;
+        await axios
+          .post(`${config.API.reportTemplate}/docx`, res.data.result, {
+            headers: {
+              accept: "application/pdf",
+              "content-Type": "application/json",
+            },
+            responseType: "blob",
+          })
+          .then((resReport) => {
+            const data = resReport.data;
+            if (data) {
+              const blob = new Blob([data]);
+              const objectUrl = URL.createObjectURL(blob);
+              orderCoverPdf.value = objectUrl;
+              viewPDF(orderCoverPdf.value);
+            }
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {});
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// เรียกไฟล์ เอกสารแนบท้าย
+const fetchReportAttachment = async (type: string, orderId: string) => {
+  await http
+    .get(config.API.reportOrderAttachment(type, orderId, code.value), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      orderAttachmentPdf.value = objectUrl;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// Fetch file upload & detail
+const fetchAttachment = async (orderId: string) => {
+  await http
+    .get(config.API.attachmentOrder(orderId))
+    .then(async (res) => {
+      let response = res.data.result;
+      order.value = response.orderNo;
+      years.value = Number(response.orderYear);
+      if (response.signDate !== undefined && response.signDate != "") {
+        date.value = response.signDate;
+      }
+      if (response.orderFileUrl !== null) {
+        OrderPDFUpload.value = response.orderFileUrl;
+      }
+      if (response.attachmentFileUrl !== null) {
+        TailerPDFUpload.value = response.attachmentFileUrl;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// สถานะคำสั่ง
+const fecthstatusOrder = async () => {
+  await http
+    .get(config.API.orderReady(orderId.value))
+    .then((res) => {
+      let status = res.data.result;
+      statusOrder.value = status.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// แสดงไฟล์ PDF
+const viewPDF = async (pdf: string) => {
+  const pdfData = await usePDF(`${pdf}`);
+  showLoader();
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+    hideLoader();
+  }, 1500);
+};
+// แสดงไฟล์อัพโหล PDF
+const viewPDFUpload = async (pdf: string) => {
+  const pdfData = await usePDF(`${pdf}`);
+  showLoader();
+  setTimeout(() => {
+    pdfFileUploadSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+    hideLoader();
+  }, 1500);
+};
+
+watch(tab, () => {
+  if (tab.value === "main") {
+    viewPDF(orderCoverPdf.value);
+  }
+  if (tab.value === "second") {
+    viewPDF(orderAttachmentPdf.value);
+  }
+});
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const pdfFileUploadSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+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: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+// const next = () => props.next();
+const previous = () => props.previous();
+
+const onchangePage = () => {
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
+};
+// ดาวน์โหลดไฟล์
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+// การอัพโหลดไฟล์คำสั่งและเอกสารแนบท้าย
+const saveUpload = () => {
+  if (myFormUpload.value !== null) {
+    myFormUpload.value!.validate().then((success: Boolean) => {
+      if (success) {
+        dialogConfirm($q, async () => {
+          showLoader();
+          await postfileOrder();
+          if (attachmentStatus.value) {
+            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 fetchReportCover("pdf", orderId.value); // ดึงรายงานคำสั่งใหม่
+
+          // เช็คประเภทคำสั่งถ้าไม่ใช่ type เหล่านี้จะมีแนบท้าย
+          if (attachmentStatus.value) {
+            // ดึงรายงานในส่วนของแนบท้ายมาใหม่
+            await fetchReportAttachment("pdf", orderId.value);
+
+            // เช็คว่าถ้าอยู่ใน tab ของแนบท้ายไหมถ้าอยู่เข้าเงื่อนไขนี้
+            if (tab.value == "second") {
+              // แสดงผลส่วนของแนบท้ายใหม่
+              await viewPDF(orderAttachmentPdf.value);
+            }
+          }
+
+          // ดึงข้อมูลสถานะการออกคำสั่ง (Y = ออกคำสั่งได้แล้ว, N = เงื่อนไขยังไม่ครบไม่สามารถกดออกคำสั่งได้)
+          await fecthstatusOrder();
+
+          hideLoader();
+        });
+      }
+    });
+  }
+};
+
+// ฟังก์ชั่นการบันทึกข้อมูลในส่วนของรายละเอียด
+const putOrderData = async () => {
+  const orderData = {
+    orderNo: order.value,
+    orderYear: years.value.toString(),
+    signDate: date.value,
+  };
+  await http
+    .put(config.API.attachmentOrder(orderId.value), orderData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// บันทึกไฟล์คำสั่ง
+const postfileOrder = async () => {
+  const formData = new FormData();
+  formData.append("File", fileOrder.value);
+  await http
+    .post(config.API.attachmentOrderId(orderId.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .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(() => {
+      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) => {
+          success($q, "ออกคำสั่งสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fecthstatusOrder();
+          await getCommandDetail();
+          hideLoader();
+        });
+    },
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?"
+  );
+};
+const validateFormUpload = () => {
+  if (
+    attachmentStatus.value &&
+    fileOrder.value !== null &&
+    fileTailer.value !== null
+  ) {
+    return true;
+  } else if (fileOrder.value !== null) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+const validateForm = () => {
+  return (
+    order.value.trim() !== "" && years.value !== null && date.value !== null
+  );
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+};
+const setTab = (val: string) => {
+  tab.value = val;
+  page.value = 1;
+};
+
+const viewFileUpload = async (url: string) => {
+  pdfFileUploadSrc.value = undefined;
+  await viewPDFUpload(url);
+
+  dialogFileUpload.value = true;
+};
+</script>
+
+<template>
+  <div>
+    <div style="min-height: 70vh">
+      <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
+                v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                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')"
+                    >
+                      <!-- type="a"
+                      :href="orderCoverPdf"
+                      target="_blank" -->
+                      <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')"
+                    >
+                      <!-- type="a"
+                      :href="orderCoverDocs"
+                      target="_blank" -->
+                      <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="attachmentStatus"
+              @click="setTab('second')"
+              :class="getClass(tab == 'second')"
+            >
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
+              <q-btn
+                v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                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')"
+                    >
+                      <!-- type="a"
+                      :href="orderAttachmentPdf"
+                      target="_blank" -->
+                      <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')"
+                    >
+                      <!-- 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>ไฟล์ .xls</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <q-space />
+            <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-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <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 />
+              <!-- <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-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <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>
+          </q-card>
+        </template>
+
+        <template v-slot:separator>
+          <q-avatar
+            color="primary"
+            text-color="white"
+            size="30px"
+            icon="drag_indicator"
+          />
+        </template>
+
+        <template v-slot:after>
+          <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 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-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <q-file
+                      v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                      outlined
+                      dense
+                      v-model="fileOrder"
+                      label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
+                      accept=".pdf"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                  <div v-if="attachmentStatus">
+                    <label class="text-file">เอกสารแนบท้าย</label>
+                    <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-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
+                      </q-btn>
+                    </div>
+
+                    <q-file
+                      v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                      outlined
+                      dense
+                      v-model="fileTailer"
+                      label="เลือกไฟล์เอกสารแนบท้าย"
+                      hide-bottom-space
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                      accept=".pdf"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+
+                  <!-- บันทึกอัพโหลดเอกสาร  -->
+                  <div
+                    v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                    class="row col-12 q-mt-md"
+                  >
+                    <q-space></q-space>
+                    <q-btn
+                      unelevated
+                      label="บันทึก"
+                      :color="
+                        validateFormUpload() &&
+                        orderStatusName != 'ออกคำสั่งแล้ว'
+                          ? 'public'
+                          : 'grey'
+                      "
+                      :disable="
+                        !validateFormUpload() ||
+                        orderStatusName == 'ออกคำสั่งแล้ว'
+                      "
+                      @click="saveUpload"
+                    >
+                    </q-btn>
+                  </div>
+                </div>
+              </fieldset>
+            </q-form>
+
+            <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
+                      :readonly="!true"
+                      :borderless="!true"
+                      v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                      :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
+                    />
+                  </div>
+                  <div>
+                    <label class="text-file">ปีที่ออกคำสั่ง</label>
+                    <datepicker
+                      :disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
+                      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
+                          :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
+                          outlined
+                          dense
+                          :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>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div>
+                    <label class="text-file">วันที่ลงนาม</label>
+                    <datepicker
+                      :disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
+                      menu-class-name="modalfix"
+                      v-model="date"
+                      :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
+                          :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
+                          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>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <!-- บันทึกรายละเอียดคำสั่ง  -->
+                  <div
+                    v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                    class="row col-12 q-mt-md"
+                  >
+                    <q-space></q-space>
+                    <q-btn
+                      unelevated
+                      label="บันทึก"
+                      :color="
+                        validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
+                          ? 'public'
+                          : 'grey'
+                      "
+                      :disable="
+                        !validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
+                      "
+                      @click="saveDetail"
+                    >
+                    </q-btn>
+                  </div>
+                </div>
+              </fieldset>
+            </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>
+
+      <!-- ออกคำสั่ง -->
+      <q-btn
+        v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
+        :disable="statusOrder == 'N'"
+        unelevated
+        label="ออกคำสั่ง"
+        :color="statusOrder == 'Y' ? '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>
+
+      <q-btn
+        v-else
+        disable
+        unelevated
+        label="ออกคำสั่งเสร็จสิ้น"
+        color="green"
+      ></q-btn>
+    </div>
+
+    <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
+          />
+        </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-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <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 :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-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <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>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
+    <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
+          />
+        </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-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <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 :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-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <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>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.border {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+}
+
+.text-header {
+  color: #34373c;
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+.text-file {
+  padding-top: 5px;
+  color: #34373c;
+  font-weight: 500;
+}
+
+.space {
+  background-color: #e9eaec61;
+  display: flex;
+  z-index: 3;
+}
+
+.card-header {
+  margin-top: 5px;
+  background-color: transparent;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  align-items: center;
+}
+
+.card-header-active {
+  margin-top: 5px;
+  margin-left: -1px;
+  background-color: white;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  border: 1px solid #e9eaec;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  border-bottom-style: none;
+  font-weight: 600;
+  align-items: center;
+}
+
+.card-pdf {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+  background-color: #e9eaec61;
+  //   height: 60vh;
+}
+</style>
diff --git a/src/modules/13_salary/router.ts b/src/modules/13_salary/router.ts
index f9a0fa041..265b12855 100644
--- a/src/modules/13_salary/router.ts
+++ b/src/modules/13_salary/router.ts
@@ -8,6 +8,8 @@ const salaryRound = () => import("@/modules/13_salary/views/salaryRound.vue");
 const salaryLists = () => import("@/modules/13_salary/views/salaryLists.vue");
 const salaryEmployeeLists = () =>
   import("@/modules/13_salary/views/salaryEmployeeLists.vue");
+const commandSalary = () =>
+  import("@/modules/13_salary/views/commandSalary.vue");
 
 export default [
   {
@@ -80,4 +82,14 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary/command",
+    name: "commandSalary",
+    component: commandSalary,
+    meta: {
+      Auth: true,
+      Key: [1.5],
+      Role: "salary",
+    },
+  },
 ];
diff --git a/src/modules/13_salary/views/commandSalary.vue b/src/modules/13_salary/views/commandSalary.vue
new file mode 100644
index 000000000..8d6f86d19
--- /dev/null
+++ b/src/modules/13_salary/views/commandSalary.vue
@@ -0,0 +1,403 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import router from "@/router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/10_order/interface/index/Main";
+
+// import PopupHistory from "@/modules/10_order/components/PopupHistory.vue";
+import TableOrder from "@/modules/11_discipline/components/9_Order/TableOrder.vue";
+
+import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrderPlacementDataStore } from "@/modules/10_order/store";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const DataStore = useOrderPlacementDataStore();
+const stroe = useOrderStore();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const commandCodes = ref<string[]>(["C-PM-33", "C-PM-34", "C-PM-35"]);
+
+onMounted(async () => {
+  await fiscalYearFilter();
+  await OrderTypeFilter();
+  await fetchOrderlist();
+  await OrderStatusFilter();
+});
+
+async function fetchOrderlist() {
+  showLoader();
+  await http
+    .get(config.API.listOrder())
+    .then((res: any) => {
+      const data = res.data.result;
+      const typeid = OrderTypeOption.value.map((e) => e.id);
+
+      const filterListOrder = data.filter((e: any) =>
+        typeid.includes(e.orderTypeValue)
+      );
+
+      stroe.fetchOrder(filterListOrder);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+// สร้างคำสั่งใหม่
+const clickAdd = () => {
+  router.push({ name: "disciplineOrderAdd" });
+};
+
+// รายการข้อมูลปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = ref<any>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyearFilter1 = ref<any>([]);
+const fiscalYearFilter = async () => {
+  await http.get(config.API.yearOptionsOrder()).then((res) => {
+    const response = res.data.result;
+    fiscalyearOP.value = [{ id: 0, name: "ทั้งหมด" }];
+    response.map((r: any) => {
+      fiscalyearOP.value.push({ id: r.id, name: r.name.toString() });
+    });
+
+    fiscalyearFilter1.value = [{ id: 0, name: "ทั้งหมด" }];
+    response.map((r: any) => {
+      fiscalyearFilter1.value.push({
+        id: r.id,
+        name: r.name.toString(),
+      });
+    });
+  });
+};
+
+// รายการข้อมูลประเภทคำสั่ง
+const OrderType = ref<string>("");
+const OrderTypeFilter1 = ref<any>([]);
+const OrderTypeOption = ref<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
+
+// รายการข้อมูลสถานะคำสั่ง
+const OrderStatus = ref<string>("ทั้งหมด");
+const OrderStatusOption = ref<DataOption1[]>([
+  { id: "ทั้งหมด", name: "ทั้งหมด" },
+]);
+const OrderStatusFilter1 = ref<DataOption1[]>([
+  { id: "ทั้งหมด", name: "ทั้งหมด" },
+]);
+const addedOrderStatusValues: string[] = [];
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+
+function resetFilter() {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+}
+
+async function OrderTypeFilter() {
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      const response = res.data.result;
+      const filterRes = response.filter((e: any) =>
+        commandCodes.value.includes(e.commandCode)
+      );
+
+      OrderTypeOption.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeOption.value.push(...filterRes);
+
+      OrderTypeFilter1.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeFilter1.value.push(...filterRes);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/** ฟังชั่นฟิลเตอร์ตามค่า ประเภท สถานะ ปี */
+async function searchFilterTable() {
+  stroe.filterListOrder(OrderType.value, OrderStatus.value, fiscalyear.value);
+}
+
+async function OrderStatusFilter() {
+  for (let data of stroe.mainData) {
+    const OrderStatusValue = data.orderStatusName;
+
+    if (
+      OrderStatusValue === null ||
+      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    ) {
+      OrderStatus.value = OrderStatusValue;
+    }
+
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      OrderStatusFilter1.value.push({
+        id: OrderStatusFilter1.value.length.toString(),
+        name: OrderStatusValue,
+      });
+      addedOrderStatusValues.push(OrderStatusValue);
+    }
+  }
+}
+
+/**
+ * ฟิลเตอร์ข้อมูลจาก input
+ * @param val ค่าที่ป้อนให้ input
+ * @param update function จาก quasar
+ * @param refData type ที่กำหนด ของ input นั้นๆ
+ */
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "fiscalyearOP":
+      update(() => {
+        fiscalyearOP.value = fiscalyearFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "OrderTypeOption":
+      update(() => {
+        OrderTypeOption.value = OrderTypeFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "OrderStatusOption":
+      update(() => {
+        OrderStatusOption.value = OrderStatusFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            class="col-xs-12 col-sm-3 col-md-"
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
+            dense
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            use-input
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            @update:model-value="searchFilterTable"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
+                      ) "
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <!-- use-input -->
+          <div>
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+              @click="clickAdd"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+          <q-space />
+
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="stroe.visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="stroe.columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-3 col-md-4">
+                <q-select
+                  v-model="OrderType"
+                  label="ประเภท"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderTypeOption"
+                  option-value="id"
+                  lazy-rules
+                  use-input
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
+                    ) "
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-xs-12 col-sm-3 col-md-3">
+                <q-select
+                  v-model="OrderStatus"
+                  label="สถานะ"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderStatusOption"
+                  option-value="name"
+                  lazy-rules
+                  use-input
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'OrderStatusOption'
+                      ) "
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <q-space />
+              <!-- <div><PopupHistory :OrderTypeOption="OrderTypeOption" /></div> -->
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <TableOrder :filterTable="filterKeyword" />
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>