diff --git a/src/modules/13_salary/components/Command/detail.vue b/src/modules/13_salary/components/Command/detail.vue
new file mode 100644
index 000000000..ed7c7467e
--- /dev/null
+++ b/src/modules/13_salary/components/Command/detail.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref,onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+
+
+const router = useRouter();
+const route = useRoute();
+const orderId_params = route.params.id;
+const orderId = ref<string>('')
+const step = ref<number>(0);
+const step01 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step03.vue")
+);
+const step04 = defineAsyncComponent(
+  () => import("@/modules/13_salary/components/Command/step04.vue")
+);
+
+const nextStep = async () => {
+  localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.nextStep(orderId.value))
+      .then(() => {
+        router.push(
+          `/salary/command/detail/${orderId.value}?step=${step.value + 1}`
+        );
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
+};
+
+const previousStep = async () => {
+  localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.prevStep(orderId.value))
+      .then(() => {
+          router.push(
+            `/salary/command/detail/${orderId.value}?step=${step.value - 1}`
+          );
+       
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
+};
+
+function destroyLocalStorage(){
+  localStorage.clear();
+};
+
+onMounted(() => {
+    destroyLocalStorage()
+  if (route.query.step) {
+    step.value = Number(route.query.step);
+    localStorage.setItem("currentStep", step.value.toString());
+  } else {
+    const currentStep = localStorage.getItem("currentStep");
+    if (currentStep) {
+      step.value = Number(currentStep);
+    } else {
+      step.value = 1;
+    }
+  }
+  if (orderId_params !== undefined) {
+    orderId.value = orderId_params.toString();
+  }
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/salary/command`)"
+    />
+    ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง
+  </div>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      animated
+      class="step"
+      header-class="bg-grey-1"
+    >
+      <q-step
+        :name="1"
+        title="รายละเอียดการออกคำสั่ง"
+        prefix="1"
+        :done="step > 1"
+        :header-nav="step > 1"
+      />
+      <q-step
+        :name="2"
+        title="เลือกรายชื่อ"
+        prefix="2"
+        :done="step > 2"
+        :header-nav="step > 2"
+      />
+      <q-step
+        :name="3"
+        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
+        prefix="3"
+        :done="step > 3"
+        :header-nav="step > 3"
+      />
+      <q-step
+        :name="4"
+        title="รายละเอียดคำสั่งและแนบท้าย"
+        prefix="4"
+        :done="step > 4"
+        :header-nav="step > 4"
+      />
+      <template v-slot:message>
+        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+        <step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
+      </template>
+    </q-stepper>
+  </q-card>
+</template>
+<style>
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+
+.step .q-stepper__tab--done .q-stepper__title,
+.step .q-stepper__tab--active .q-stepper__title {
+  color: #35473c !important;
+  font-weight: 500;
+}
+
+.step .q-stepper__header--standard-labels .q-stepper__tab {
+  min-height: 60px;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/13_salary/components/Command/step01.vue b/src/modules/13_salary/components/Command/step01.vue
index ac2b1ab17..60310b31a 100644
--- a/src/modules/13_salary/components/Command/step01.vue
+++ b/src/modules/13_salary/components/Command/step01.vue
@@ -15,7 +15,6 @@ import type {
   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();
@@ -64,67 +63,10 @@ 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>("");
+// 33-34-35
+const input33 = ref<string>("");
+const input34 = ref<string>("");
+const input35 = ref<string>("");
 
 const typeOrderFilter = ref<any>({
   typeOrderOption: [],
@@ -155,18 +97,7 @@ watch(nameCommand, async () => {
   }
 });
 
-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 commandCodes = ref<string[]>(["C-PM-33", "C-PM-34", "C-PM-35"]);
 // เรียกคำสั่ง
 const fecthTypeOption = async (actions: string) => {
   showLoader();
@@ -219,7 +150,6 @@ const fetchdetailOrder = async () => {
       const data = res.data.result;
 
       const orderTypeCode = await data.orderTypeCode.toUpperCase();
-      await optionsData(orderTypeCode);
 
       typeOrder.value = typeOrderOption.value.find(
         (e) => e.id === data.orderTypeValue
@@ -231,66 +161,6 @@ const fetchdetailOrder = async () => {
       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);
@@ -312,158 +182,26 @@ const fecthCommand = async () => {
     });
 };
 
-const optionsData = async (commandCode: string) => {
-  const orderTypeCode = await commandCode.toUpperCase();
-  if (orderTypeCode === "C-PM-10") {
-    nodeTree();
-  }
-  nameOrder.value = DataStore.nameOrderFilter(orderTypeCode);
+function casePm(val: string){
+    switch (val) {
+      case "C-PM-33":
+        return "เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญ ได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง";
+      case "C-PM-34":
+        return "ให้ข้าราชการกรุงเทพมหานครสามัญได้รับค่าตอบแทนพิเศษ";
+      case "C-PM-35":
+        return `เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ พ.ศ. ${new Date().getFullYear()+543} ได้รับเงินเดือนสูงกว่าชั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง`;
+      default:
+        return null;
+    }}
 
-  // บรรจุ แต่งตั้ง ย้าย 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) => {
+async function selectCMP(selectOrder: OrederResult) {
   if (selectOrder != null) {
     const orderTypeCode = await selectOrder.commandCode.toUpperCase();
-    optionsData(orderTypeCode);
+    nameOrder.value = casePm(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;
@@ -497,121 +235,16 @@ const submit = async () => {
     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"
+    typeOrder.value.commandCode == "C-PM-33" ||
+    typeOrder.value.commandCode == "C-PM-34" ||
+    typeOrder.value.commandCode == "C-PM-35"
   ) {
     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,
+      // examRound: examRound.value,
+      // conclusionRegisterNo: conclusionRegisterNo.value,
+      // conclusionRegisterDate: conclusionRegisterDate.value,
+      // conclusionResultNo: conclusionResultNo.value.toString(),
+      // conclusionResultDate: conclusionResultDate.value,
     });
   }
 
@@ -640,14 +273,8 @@ const createListOrder = async (formData: Object, type: string) => {
       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
-      }
+      router.push(`/salary/command/detail/${data.id}?step=${2}`); // สร้างเสร็จแล้วให้ไป Step 2
+
       next();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
@@ -658,6 +285,7 @@ const createListOrder = async (formData: Object, type: string) => {
       hideLoader();
     });
 };
+
 const updateOrder = async (formData: Object, orderId: string, type: string) => {
   showLoader();
   await http
@@ -673,144 +301,25 @@ const updateOrder = async (formData: Object, orderId: string, type: string) => {
       hideLoader();
     });
 };
-// dialog 10
-const search = ref<string>("");
-const nodesTree = ref<treeTab[]>([]);
-const expanded = ref<string[]>([]);
-const selected = ref<string>("");
-const selectedModal = ref<ResponseOrganiz[]>([]);
-const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
-const columnsModal = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "idCard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idCard",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    field: "position",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rowsModal = ref<ResponseOrganiz[]>([]);
-const clickAction = ref<string>("");
-const filterModal = ref<string>("");
-// โหลด 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) => {
+function 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) => {
+function 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">
@@ -842,6 +351,8 @@ const getClass = (val: boolean) => {
           <q-input
             :class="getClass(true)"
             outlined
+            readonly
+            autogrow
             dense
             v-model="nameOrder"
             :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
@@ -1017,1241 +528,6 @@ const getClass = (val: boolean) => {
             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>
@@ -2262,114 +538,6 @@ const getClass = (val: boolean) => {
       <q-tooltip>บันทึกข้อมูล</q-tooltip>
     </q-btn>
   </div>
-
-  <q-dialog v-model="dialogVisible">
-    <q-card style="width: 900px; max-width: 80vw">
-      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" v-close-popup />
-      <q-separator />
-      <q-card-section class="q-pa-sm bg-grey-1">
-        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-xs-12 col-sm-5 row">
-            <q-card flat bordered class="fit q-pa-sm">
-              <q-scroll-area visible style="height: 70vh">
-                <q-input
-                  outlined
-                  dense
-                  v-model="search"
-                  placeholder="ค้นหา"
-                  class="q-mb-sm"
-                >
-                  <template v-slot:append>
-                    <q-icon name="mdi-magnify" />
-                  </template>
-                </q-input>
-                <q-tree
-                  :nodes="nodesTree"
-                  dense
-                  node-key="id"
-                  :filter="search"
-                  v-model:selected="selected"
-                  v-model:expanded="expanded"
-                  no-selection-unset
-                  selected-color="primary"
-                  @update:selected="onSelected"
-                  default-expand-all
-                />
-              </q-scroll-area>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7">
-            <div class="col-12 row q-py-sm items-center">
-              <q-space />
-              <div class="items-center" style="display: flex">
-                <q-input
-                  standout
-                  dense
-                  v-model="filterModal"
-                  ref="filterRef"
-                  outlined
-                  debounce="300"
-                  placeholder="ค้นหา"
-                  style="max-width: 200px"
-                  class="q-ml-sm"
-                >
-                  <template v-slot:append>
-                    <q-icon v-if="filterModal == ''" name="search" />
-                    <q-icon
-                      v-if="filterModal !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                    />
-                  </template>
-                </q-input>
-              </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>
diff --git a/src/modules/13_salary/components/Command/step02.vue b/src/modules/13_salary/components/Command/step02.vue
index c8e74d31f..2ba27dd4a 100644
--- a/src/modules/13_salary/components/Command/step02.vue
+++ b/src/modules/13_salary/components/Command/step02.vue
@@ -718,9 +718,7 @@ const pagination = ref({
             :visible-columns="visibleColumns"
             :filter="filter"
             row-key="name"
-            :selection="
-              routeName === 'disciplineOrderDatail' ? 'single' : 'multiple'
-            "
+            :selection="'multiple' "
             v-model:selected="selected"
           >
             <template v-slot:header="props">
diff --git a/src/modules/13_salary/components/Command/step04.vue b/src/modules/13_salary/components/Command/step04.vue
index 027decfd3..366e4ba26 100644
--- a/src/modules/13_salary/components/Command/step04.vue
+++ b/src/modules/13_salary/components/Command/step04.vue
@@ -23,7 +23,7 @@ const {
 const route = useRoute();
 const $q = useQuasar();
 
-const orderId_params = route.params.orderid;
+const orderId_params = route.params.id;
 const dialog = ref<boolean>(false);
 const dialogFileUpload = ref<boolean>(false);
 const splitterModel = ref<number>(70);
@@ -48,13 +48,7 @@ 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(() => {
@@ -81,16 +75,9 @@ const attachmentStatus = computed(() => {
 
 // เช็คว่าต้องไป 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"
+  return code.value == "c-pm-33" ||
+    code.value == "c-pm-34" ||
+    code.value == "c-pm-35"
     ? true
     : false;
 });
@@ -151,23 +138,7 @@ const downloadCover = async (type: string) => {
   }
 };
 
-// โหลด เอกสารแนบท้าย
-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
@@ -493,10 +464,17 @@ const viewFileUpload = async (url: string) => {
 
   dialogFileUpload.value = true;
 };
+
+onMounted(async () => {
+  if (orderId.value) {
+    await fetchAttachment(orderId.value);
+    await fecthstatusOrder();
+    await getCommandDetail();
+  }
+});
 </script>
 
 <template>
-  <div>
     <div style="min-height: 70vh">
       <q-splitter
         v-model="splitterModel"
@@ -549,54 +527,6 @@ const viewFileUpload = async (url: string) => {
                 </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"
@@ -1120,7 +1050,6 @@ const viewFileUpload = async (url: string) => {
         </q-card-section>
       </q-card>
     </q-dialog>
-  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/13_salary/router.ts b/src/modules/13_salary/router.ts
index 265b12855..cf318cde5 100644
--- a/src/modules/13_salary/router.ts
+++ b/src/modules/13_salary/router.ts
@@ -11,6 +11,9 @@ const salaryEmployeeLists = () =>
 const commandSalary = () =>
   import("@/modules/13_salary/views/commandSalary.vue");
 
+  const commandSalaryAdd = () => import("@/modules/13_salary/components/Command/detail.vue");
+  // const commandSalary = () => import("@/modules/13_salary/views/commandSalary.vue");
+  // const commandSalary = () => import("@/modules/13_salary/views/commandSalary.vue");
 export default [
   {
     path: "/salary",
@@ -92,4 +95,24 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary/command/add",
+    name: "commandSalaryAdd",
+    component: commandSalaryAdd,
+    meta: {
+      Auth: true,
+      Key: [1.5],
+      Role: "salary",
+    },
+  },
+  {
+    path: "/salary/command/detail/:id",
+    name: "commandSalaryDatail",
+    component: commandSalaryAdd,
+    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
index 8d6f86d19..9c815dc3e 100644
--- a/src/modules/13_salary/views/commandSalary.vue
+++ b/src/modules/13_salary/views/commandSalary.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import router from "@/router";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -18,14 +18,121 @@ import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrderPlacementDataStore } from "@/modules/10_order/store";
 
+const rows = ref<any>([])
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const DataStore = useOrderPlacementDataStore();
 const stroe = useOrderStore();
 const { showLoader, hideLoader, messageError } = mixin;
+/** pagination */
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 const commandCodes = ref<string[]>(["C-PM-33", "C-PM-34", "C-PM-35"]);
 
+/** ข้อมูลที่เเสดงใน คอลัม */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderName",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "orderName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "orderNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "orderNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderTypeName",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "orderTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderDate",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "orderDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderByOrganization",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "orderByOrganization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "signatoryBy",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: true,
+    field: "signatoryBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderStatusName",
+    align: "center",
+    label: "สถานะคำสั่ง",
+    sortable: true,
+    field: "orderStatusName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+/** หัวตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "orderName",
+  "orderNo",
+  "orderTypeName",
+  "orderDate",
+  "orderByOrganization",
+  "signatoryBy",
+  "orderStatusName",
+]);
+
 onMounted(async () => {
   await fiscalYearFilter();
   await OrderTypeFilter();
@@ -57,7 +164,7 @@ async function fetchOrderlist() {
 
 // สร้างคำสั่งใหม่
 const clickAdd = () => {
-  router.push({ name: "disciplineOrderAdd" });
+  router.push(`/salary/command/add`);
 };
 
 // รายการข้อมูลปีงบประมาณ
@@ -185,6 +292,25 @@ function filterSelector(val: any, update: Function, refData: string) {
       break;
   }
 }
+
+function redirectToPage(id:string,status:string){
+  let step = 1;
+  switch (status) {
+    case "จัดทำร่างคำสั่ง":
+      step = 1;
+      break;
+    case "บัญชีแนบท้าย":
+      step = 2;
+      break;
+    case "เลือกผู้ได้รับสำเนาคำสั่ง":
+      step = 3;
+      break;
+    default:
+      step = 4;
+      break;
+  }
+  router.push(`/salary/command/detail/${id}?step=${step}`);
+}
 </script>
 
 <template>
@@ -260,7 +386,7 @@ function filterSelector(val: any, update: Function, refData: string) {
           </q-input>
 
           <q-select
-            v-model="stroe.visibleColumns"
+            v-model="visibleColumns"
             multiple
             outlined
             dense
@@ -268,7 +394,7 @@ function filterSelector(val: any, update: Function, refData: string) {
             :display-value="$q.lang.table.columns"
             emit-value
             map-options
-            :options="stroe.columns"
+            :options="columns"
             option-value="name"
             options-cover
             style="min-width: 150px"
@@ -346,7 +472,47 @@ function filterSelector(val: any, update: Function, refData: string) {
           </q-card>
         </div>
         <div class="col-12">
-          <TableOrder :filterTable="filterKeyword" />
+          <d-table
+            for="table"
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="subject"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  @click="
+                    redirectToPage(props.row.id, props.row.status)
+                  "
+                >
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
         </div>
       </div>
     </q-card>