diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 6be4c2dde..5ca86af6d 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -1,6 +1,7 @@
 import env from "../index";
 const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
+const order = `${env.API_PLACEMENT_URI}`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -47,7 +48,13 @@ export default {
   // position 
   placementPosition: () => `${placement}/position/use`,
   // putPositiom
-  putPosition: (id:any) => `${placement}/position/${id}`,
+  putPosition: (id: any) => `${placement}/position/${id}`,
   // clear Position
-  clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
+  clearPosition: (personalId: string) => `${placement}/position/clear/${personalId}`,
+
+  // order
+  yearOptionsOrder: () => `${order}/order/fiscal-year`,
+  listOrder: () => `${order}/order`,
+  typeOrder: () => `${order}/order/order-type`,
+  examroundOrder: () => `${order}/order/detail/exam-round`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 6894b70cd..efc769971 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -97,7 +97,7 @@
                 map-options
                 option-label="name"
                 :options="OrderTypeOption"
-                option-value="id"
+                option-value="name"
                 lazy-rules
                 hide-bottom-space
                 :readonly="false"
@@ -115,7 +115,7 @@
                 map-options
                 option-label="name"
                 :options="OrderStatusOption"
-                option-value="id"
+                option-value="name"
                 lazy-rules
                 hide-bottom-space
                 :readonly="false"
@@ -153,54 +153,30 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="Order"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="redirectToPage(props.row.Order)"
+              >
+                <q-td key="Order" :props="props">
                   {{ props.row.Order }}
                 </q-td>
-                <q-td
-                  key="OrderNum"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderNum" :props="props">
                   {{ props.row.OrderNum }}
                 </q-td>
-                <q-td
-                  key="OrderType"
-                  :props="props"
-                  @click="redirectToPage(props.row.OrderType)"
-                >
+                <q-td key="OrderType" :props="props">
                   {{ props.row.OrderType }}
                 </q-td>
-                <q-td
-                  key="OrderDate"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderDate" :props="props">
                   {{ props.row.OrderDate }}
                 </q-td>
-                <q-td
-                  key="OrderBy"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderBy" :props="props">
                   {{ props.row.OrderBy }}
                 </q-td>
-                <q-td
-                  key="Signer"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="Signer" :props="props">
                   {{ props.row.Signer }}
                 </q-td>
-                <q-td
-                  key="OrderStatus"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderStatus" :props="props">
                   {{ props.row.OrderStatus }}
                 </q-td>
                 <q-td auto-width>
@@ -210,7 +186,7 @@
                     flat
                     round
                     color="red"
-                    @click="clickDelete(props.row.id)"
+                    @click.stop="clickDelete(props.row.id)"
                     icon="mdi-delete"
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -246,9 +222,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, dateText } = mixin;
 const DataStore = useOrderPlacementDataStore();
+
+
+
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -256,9 +239,6 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-const mixin = useCounterMixin();
-const { dateText } = mixin;
-
 // แปลงเวลา ค.ศ ให้เป็น พ.ศ
 const textDate = (value: Date) => {
   return dateText(value);
@@ -518,13 +498,12 @@ onMounted(async () => {
 
 const OriginalDataFetch = async () => {
   // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
+  // await http.get(config.API.listOrder()).then((res: any) => {
+  //   console.log("list", res);
+  // });
+  // .catch((e: any) => {
+  //   messageError($q, e);
+  // })
   //   .finally(async () => {
   //   });
   await DataStore.DataMainOrder(rows.value);
@@ -533,9 +512,9 @@ const OriginalDataFetch = async () => {
 };
 
 // ดูรายการหน้าต่อไป
-const redirectToPage = (id?: number) => {
-  // router.push({ name: "placementDetail" });
-  router.push(`/placement/order/detail`);
+const redirectToPage = (id?: string) => {
+  console.log(id);
+  router.push(`/placement/order/detail/${id}`);
 };
 
 const clickDelete = (id: string) => {
@@ -572,7 +551,7 @@ const clickDelete = (id: string) => {
 // };
 
 const clickAdd = () => {
-  router.push({ name: "OrderplacementDetail" });
+  router.push({ name: "Orderplacementadd" });
 };
 
 // const viewDetail = (id: string, status: string) => {
@@ -588,6 +567,16 @@ const fiscalyear = ref<number | null>(0);
 const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
+  await http.get(config.API.yearOptionsOrder()).then((res) => {
+    console.log(res);
+    const response = res.data.result;
+    fiscalyearOP.push(...response);
+    // const maxNumber = fiscalyearOP.reduce((max: any, e: any) => {
+    //   return e.id > max ? e.id : max;
+    // }, "");
+    // fiscalyear.value = maxNumber;
+    // console.log(fiscalyear.value);
+  });
   // API
   // await http
   //   .get(config.API.// ตัวอย่าง)
@@ -600,25 +589,37 @@ const fiscalYearFilter = async () => {
   //   })
   //   .finally(async () => {
   //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear;
-    console.log(year);
+  // for (let data of OriginalData.value) {
+  //   console.log(OriginalData.value);
 
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
+  //   const year = data.fiscalYear;
+  //   console.log(year);
 
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
+  //   if (fiscalyear.value === null || year > fiscalyear.value) {
+  //     fiscalyear.value = year;
+  //   }
+
+  //   if (!addedfiscalYearValues.includes(year)) {
+  //     fiscalyearOP.push({ id: year, name: year.toString() });
+  //     addedfiscalYearValues.push(year);
+  //   }
+  // }
 };
 
 const OrderType = ref<string>("");
 const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedOrderTypeValues: string[] = [];
 const OrderTypeFilter = async () => {
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      console.log(res.data);
+      const response = res.data.result;
+      OrderTypeOption.push(...response);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
   // API
   // await http
   //   .get(config.API.// ตัวอย่าง)
@@ -631,29 +632,29 @@ const OrderTypeFilter = async () => {
   //   })
   //   .finally(async () => {
   //   });
-  for (let data of OriginalData.value) {
-    const OrderTypeValue = data.OrderType;
-    console.log(OrderTypeValue);
+  // for (let data of OriginalData.value) {
+  //   const OrderTypeValue = data.OrderType;
+  //   console.log(OrderTypeValue);
 
-    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
-    //   OrderTypeValue = OrderType;
-    // }
-    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-      OrderTypeOption.push({
-        // id: OrderTypeValue ?? 0,
-        id: OrderTypeOption.length,
-        name: OrderTypeValue,
-      });
-      addedOrderTypeValues.push(OrderTypeValue);
-    }
-    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-    //   OrderTypeOption.push({
-    //     id: OrderTypeValue,
-    //     name: OrderTypeValue.toString(),
-    //   });
-    //   addedOrderTypeValues.push(OrderTypeValue);
-    // }
-  }
+  // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
+  //   OrderTypeValue = OrderType;
+  // }
+  // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+  //   OrderTypeOption.push({
+  //     // id: OrderTypeValue ?? 0,
+  //     id: OrderTypeOption.length,
+  //     name: OrderTypeValue,
+  //   });
+  //   addedOrderTypeValues.push(OrderTypeValue);
+  // }
+  // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+  //   OrderTypeOption.push({
+  //     id: OrderTypeValue,
+  //     name: OrderTypeValue.toString(),
+  //   });
+  //   addedOrderTypeValues.push(OrderTypeValue);
+  // }
+  // }
 };
 const OrderStatus = ref<string>("");
 const OrderStatusText = ref<FormOrderPlacementMainData[]>(
@@ -697,8 +698,12 @@ const OrderStatusFilter = async () => {
 };
 
 // เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
-  console.log("Input value changed:", fiscalyear.value);
+const searchfiscalyear = async () => {
+  const yearNum = fiscalyear.value! + 543;
+
+  await DataStore.DataUpdateOrder(OrderType.value, OrderStatus.value, yearNum);
+  UpdataData.value = DataStore.DataMainUpdateOrder;
+
   // API
   // await http
   //   .get(config.API.// ตัวอย่าง)
@@ -722,6 +727,11 @@ const resetFilter = () => {
 const attrs = ref<any>(useAttrs());
 
 const searchFilterTable = async () => {
+  if (fiscalyear.value !== null && fiscalyear.value !== 0) {
+    fiscalyear.value += 543;
+  }
+  console.log(fiscalyear.value, OrderType.value, OrderStatus.value);
+
   // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
   await DataStore.DataUpdateOrder(
     OrderType.value,
@@ -729,6 +739,7 @@ const searchFilterTable = async () => {
     fiscalyear.value
   );
   UpdataData.value = DataStore.DataMainUpdateOrder;
+  console.log(UpdataData.value);
 };
 //   UpdataData.value = DataStore.DataMainUpdate;
 // console.log("Input value changed:", OrderStatus.value, OrderType.value);
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 790db1c27..6c17f39fd 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -8,7 +8,7 @@
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.go(-1)"
+      @click="router.go(-1), destroyLocalStorage()"
     />
     ออกคำสั่ง
   </div>
@@ -61,7 +61,7 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
 import type { QStepper } from "quasar";
 
 const step01 = defineAsyncComponent(
@@ -87,11 +87,22 @@ const stepper = ref<QStepper>();
 
 const nextStep = () => {
   stepper.value!.next();
+  localStorage.setItem("currentStep", step.value.toString());
 };
 
 const previousStep = () => {
   stepper.value!.previous();
+  localStorage.setItem("currentStep", step.value.toString());
 };
+const destroyLocalStorage = () => {
+  localStorage.clear();
+};
+onMounted(() => {
+  const currentStep = localStorage.getItem("currentStep");
+  if (currentStep) {
+    step.value = Number(currentStep);
+  }
+});
 </script>
 <style>
 .q-stepper--horizontal .q-stepper__step-inner {
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index b9d1489f8..250093399 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -1,394 +1,398 @@
 <template>
-    <div style="max-height: 68vh; overflow-y: scroll;">
-      <q-form ref="myForm" class="q-pa-md">
-        <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
-          <div class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="typeOrder"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-              hide-bottom-space
-              :label="`${'ประเภทคำสั่ง'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="typeOrderOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
-                      ) "
-            />
-          </div>
+  <div style="max-height: 68vh; overflow-y: scroll">
+    <q-form ref="myForm" class="q-pa-md">
+      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="typeOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string,
+          doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+          ) " -->
+        </div>
 
-          <div class="col-xs-12 col-md-6">
-            <!-- :readonly="!edit"
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
                 :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
+          <div class="col-6">
             <q-input
               :class="getClass(true)"
               outlined
               dense
               lazy-rules
-              v-model="nameOrder"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-              :label="`${'คำสั่งเรื่อง'}`"
+              v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+              :label="`${'คำสั่ง'}`"
               @update:modelValue="clickEditRow"
               hide-bottom-space
+              type="number"
             />
           </div>
-
-          <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
-            <div class="col-6">
-              <q-input
-                :class="getClass(true)"
-                outlined
-                dense
-                lazy-rules
-                v-model="command"
-                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
-                :label="`${'คำสั่ง'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-                type="number"
-              />
-            </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"
-                @update:modelValue="clickEditRow"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :model-value="dateYear + 543"
-                    :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                    :label="`${'พ.ศ.'}`"
-                    dense
-                    outlined
-                  >
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-          <div class="col-xs-5 col-md-3">
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
+          <div class="col-5">
             <datepicker
-              menu-class-name="modalfix"
-              v-model="dateCommand"
+              v-model="dateYear"
               :locale="'th'"
               autoApply
-              borderless
+              year-picker
               :enableTimePicker="false"
-              week-start="0"
+              @update:modelValue="clickEditRow"
             >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
               <template #trigger>
                 <q-input
-                  outlined
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
                   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
-              lazy-rules
-              v-model="byOrder"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
-              hide-bottom-space
-              :label="`${'คำสั่งโดย'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="byOrderOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <!-- :readonly="!edit"
-                :borderless="!edit" -->
-            <q-input
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="nameCommand"
-              :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
-              :label="`${'ผู้มีอำนาจลงนาม'}`"
-              @update:modelValue="clickEditRow"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <!-- :readonly="!edit"
-                :borderless="!edit" -->
-            <q-input
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="positionCommand"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`,
-              ]"
-              :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-              @update:modelValue="clickEditRow"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col-12">
-            <q-separator />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="test"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-              hide-bottom-space
-              :label="`${'รอบการสอบ'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="testOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="position"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
-              hide-bottom-space
-              :label="`${'ตำแหน่งรับสมัคร'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="positionOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="register"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-              hide-bottom-space
-              :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="registerOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
-                      ) "
-            />
-          </div>
-
-          <div class="col-xs-12 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateRegister"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <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="
-                    dateRegister != null ? date2Thai(dateRegister) : null
-                  "
-                  :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                  ]"
                 >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="announce"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-              hide-bottom-space
-              :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="announceOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateAnnounce"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <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="
-                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                  "
-                  :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                  :rules="[
-                    (val) =>
-                      !!val ||
-                      `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                  ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
                 </q-input>
               </template>
             </datepicker>
           </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"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
+        <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
+            lazy-rules
+            v-model="byOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string,
+          doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
+          ) " -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-12">
+          <q-separator />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="examRound"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string,
+          doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
+          ) " -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="position"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
+            hide-bottom-space
+            :label="`${'ตำแหน่งรับสมัคร'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string, doneFn:Function) =>
+          filterSelector(inputValue, doneFn,'positionOption' ) " -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="register"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="registerOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <!-- @filter="(inputValue:string,
+        doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
+        ) " -->
+
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateRegister"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <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="
+                  dateRegister != null ? date2Thai(dateRegister) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="announce"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="announceOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string,
+          doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
+          ) "  -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAnnounce"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <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="
+                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </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>
+    <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
         <q-tooltip>ย้อนกลับ</q-tooltip>
       </q-btn> -->
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+    <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
         <q-tooltip>ต่อไป</q-tooltip>
       </q-btn> -->
-    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { ref, onMounted } from "vue";
+import type {
+  DataOption1,
+  DataOption,
+} from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
+import http from "@/plugins/http";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+const route = useRoute();
 
 const props = defineProps({
   next: {
@@ -402,6 +406,7 @@ const props = defineProps({
 });
 const next = () => props.next();
 const previous = () => props.previous();
+const orderId = route.params.orderid;
 
 const myForm = ref<QForm>();
 
@@ -411,98 +416,198 @@ const nameOrder = ref<string>("");
 const nameCommand = ref<string>("");
 const positionCommand = ref<string>("");
 const dateYear = ref<number>(new Date().getFullYear());
-const command = ref<string>("");
+const command = ref<number>();
 const dateCommand = ref<Date>(new Date());
 const dateRegister = ref<Date>(new Date());
 const dateAnnounce = ref<Date>(new Date());
 
-const typeOrder = ref<string>("");
-const typeOrderOption = ref<DataOption[]>([]);
-const typeOrderOptionFilter = ref<DataOption[]>([]);
+const typeOrder = ref<number>();
+const typeOrderOption = ref<DataOption1[]>([
+  { name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const typeOrderOptionFilter = ref<DataOption1[]>([]);
 
 const byOrder = ref<string>("");
-const byOrderOption = ref<DataOption[]>([]);
-const byOrderOptionFilter = ref<DataOption[]>([]);
+const byOrderOption = ref<DataOption1[]>([
+  { name: "นายคำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const byOrderOptionFilter = ref<DataOption1[]>([]);
 
 const register = ref<string>("");
-const registerOption = ref<DataOption[]>([]);
+const registerOption = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 const registerOptionFilter = ref<DataOption[]>([]);
 
 const announce = ref<string>("");
-const announceOption = ref<DataOption[]>([]);
+const announceOption = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 const announceOptionFilter = ref<DataOption[]>([]);
 
 const position = ref<string>("");
-const positionOption = ref<DataOption[]>([]);
+const positionOption = ref<DataOption1[]>([
+  { name: "นายก", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 const positionOptionFilter = ref<DataOption[]>([]);
 
-const test = ref<string>("");
-const testOption = ref<DataOption[]>([]);
+const examRound = ref<string>("");
+const examRoundOption = ref<DataOption1[]>([]);
 const testOptionFilter = ref<DataOption[]>([]);
 
 const clickEditRow = () => (editRow.value = true);
 
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "typeOrderOption":
-      update(() => {
-        typeOrderOption.value = typeOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    case "byOrderOption":
-      update(() => {
-        byOrderOption.value = byOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
+// const filterSelector = (val: any, update: Function, filtername: string) => {
+//   switch (filtername) {
+//     case "typeOrderOption":
+//       update(() => {
+//         typeOrderOption.value = typeOrderOptionFilter.value.filter(
+//           (v: DataOption) => v.name!.indexOf(val) > -1
+//         );
+//       });
+//       break;
+//     case "byOrderOption":
+//       update(() => {
+//         byOrderOption.value = byOrderOptionFilter.value.filter(
+//           (v: DataOption) => v.name!.indexOf(val) > -1
+//         );
+//       });
+//       break;
 
-    case "registerOption":
-      update(() => {
-        registerOption.value = registerOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
+//     case "registerOption":
+//       update(() => {
+//         registerOption.value = registerOptionFilter.value.filter(
+//           (v: DataOption) => v.name!.indexOf(val) > -1
+//         );
+//       });
+//       break;
 
-    case "announceOption":
-      update(() => {
-        announceOption.value = announceOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
+//     case "announceOption":
+//       update(() => {
+//         announceOption.value = announceOptionFilter.value.filter(
+//           (v: DataOption) => v.name!.indexOf(val) > -1
+//         );
+//       });
+//       break;
 
-    case "positionOption":
-      update(() => {
-        positionOption.value = positionOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    case "testOption":
-      update(() => {
-        testOption.value = testOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    default:
-      break;
+//     case "positionOption":
+//       update(() => {
+//         positionOption.value = positionOptionFilter.value.filter(
+//           (v: DataOption) => v.name!.indexOf(val) > -1
+//         );
+//       });
+//       break;
+//     case "testOption":
+//       update(() => {
+//         testOption.value = testOptionFilter.value.filter(
+//           (v: DataOption) => v.name!.indexOf(val) > -1
+//         );
+//       });
+//       break;
+//     default:
+//       break;
+//   }
+// };
+onMounted(async () => {
+  if (orderId) {
+    await fetchdetailOrder();
   }
-};
+  fecthTypeOption();
+  fecthExamRoundOption();
 
+  // const data = localStorage.getItem("formData");
+  // if (data) {
+  //   const parsedData = JSON.parse(data);
+  //   typeOrder.value = parsedData.orderTypeValue;
+  //   nameOrder.value = parsedData.orderTitle;
+  //   command.value = parsedData.orderNo;
+  //   dateYear.value = parsedData.orderYear;
+  //   dateCommand.value = parsedData.orderDate;
+  //   byOrder.value = parsedData.orderBy;
+  //   nameCommand.value = parsedData.signatoryBy;
+  //   positionCommand.value = parsedData.signatoryPosition;
+  //   test.value = parsedData.examRound;
+  //   position.value = parsedData.registerPosition;
+  //   register.value = parsedData.conclusionRegisterNo;
+  //   dateRegister.value = parsedData.conclusionRegisterDate;
+  //   announce.value = parsedData.conclusionResultNo;
+  //   dateAnnounce.value = parsedData.conclusionResultDate;
+  // }
+});
+const fetchdetailOrder = async () => {
+  showLoader();
+  console.log(orderId);
+};
+const fecthTypeOption = async () => {
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      typeOrderOption.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const fecthExamRoundOption = async () => {
+  await http
+    .get(config.API.examroundOrder())
+    .then((res) => {
+      examRoundOption.value = res.data.result;
+      console.log(examRoundOption.value);
+    })
+    .catch((e) => {});
+};
 const submit = async () => {
-  next();
-  //   await myForm.value!.validate().then((result: boolean) => {
-  //     if (result) {
-  //       next();
-  //     }
-  //   });
+  const formdata = {
+    orderTypeValue: typeOrder.value,
+    orderTitle: nameOrder.value,
+    orderNo: Number(command.value),
+    orderYear: dateYear.value,
+    orderDate: dateCommand.value,
+    orderBy: byOrder.value,
+    signatoryBy: nameCommand.value,
+    signatoryPosition: positionCommand.value,
+    examRound: test.value,
+    registerPosition: position.value,
+    conclusionRegisterNo: register.value,
+    conclusionRegisterDate: dateRegister.value,
+    conclusionResultNo: announce.value.toString(),
+    conclusionResultDate: dateAnnounce.value,
+  };
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      $q.dialog({
+        title: "ยืนยันการบันทึกข้อมูล",
+        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        cancel: {
+          flat: true,
+          color: "negative",
+        },
+        persistent: true,
+      }).onOk(async () => {
+        showLoader();
+        // localStorage.setItem("formData", JSON.stringify(formdata));
+        createListOrder(formdata);
+        // next();
+      });
+    }
+  });
+};
+const createListOrder = async (formData: Object) => {
+  console.log(formData);
+  await http
+    .post(config.API.listOrder(), formData)
+    .then((res) => {
+      console.log(res);
+      next();
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
-
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 93d3af33f..b0ed8b479 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -92,7 +92,17 @@ export default [
     },
   },
   {
-    path: "/placement/order/detail",
+    path: "/placement/order/add",
+    name: "Orderplacementadd",
+    component: detailOrderReplace,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/placement/order/detail/:orderid",
     name: "OrderplacementDetail",
     component: detailOrderReplace,
     meta: {
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 29f73c9b7..283530593 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -229,6 +229,8 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
   ) => {
     DataMainUpdateOrder.value = [];
 
+
+
     if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
     } else if (filter_1 !== "" && filter_2 === "" && filterYear === 0) {