From e650e992aa1da23067a6605b79ab292491772057 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Tue, 8 Aug 2023 00:22:26 +0700
Subject: [PATCH] =?UTF-8?q?step2=20=E0=B8=A2=E0=B8=B1=E0=B8=87=E0=B9=84?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=88=E0=B9=80=E0=B8=AA=E0=B8=A3=E0=B9=87=E0=B8=88?=
 =?UTF-8?q?=20,step=203=20=E0=B9=80=E0=B8=AA=E0=B8=A3=E0=B9=87=E0=B8=88?=
 =?UTF-8?q?=E0=B9=81=E0=B8=A5=E0=B9=89=E0=B8=A7=20=E0=B8=AD=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  46 +-
 .../OrderPlacement/detailOrderPlacement.vue   |  11 +-
 .../components/OrderPlacement/step/step01.vue | 333 +++++--
 .../components/OrderPlacement/step/step02.vue | 419 +++++---
 .../components/OrderPlacement/step/step03.vue | 896 +++++++++---------
 .../05_placement/interface/request/Order.ts   |   7 +
 .../05_placement/interface/response/Order.ts  |  43 +
 src/modules/05_placement/store.ts             |  18 +-
 8 files changed, 1127 insertions(+), 646 deletions(-)
 create mode 100644 src/modules/05_placement/interface/request/Order.ts
 create mode 100644 src/modules/05_placement/interface/response/Order.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 94259b628..8231235bd 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -45,19 +45,55 @@ export default {
 
   //education
   placementEducationId: (id: string) => `${placement}/education/${id}`,
-  // position 
+  // position
   placementPosition: () => `${placement}/position/use`,
   // putPositiom
   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`,
-  createOrder: () => `${order}/order/detail`,
   listOrder: () => `${order}/order`,
-  detailOrder:(orderId:string) => `${order}/order/detail/${orderId}`,
-  deleteOrder:(orderId:string) => `${order}/order/${orderId}`,
+  deleteOrder: (orderId: string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
+
+  createOrder: () => `${order}/order/detail`,
+  detailOrder: (orderId: string) => `${order}/order/detail/${orderId}`,
   examroundOrder: () => `${order}/order/detail/exam-round`,
+
+  //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
+  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`,
+
+  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`,
+  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`,
+
+  //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
+  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`,
+  //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
+  swapDownOrder: (personalId: string) =>
+    `${order}/order/swap/down/${personalId}`,
+
+  //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
+  salaryOrder: (id: string) => `${order}/order/salary/${id}`,
+
+  // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
+  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`,
+
+  copyOrder: `${order}/order/copy-order`,
+
+  copyOrderId: (id: string) => `${order}/order/copy-order/${id}`,
+
+  attachmentId: (id: string) => `${order}/order/attachment/${id}`,
+
+  attachmentOrderId: (orderId: string) =>
+    `${order}/order/attachment/order-file/${orderId}`,
+
+  attachmentFileId: (orderId: string) =>
+    `${order}/order/attachment/file/${orderId}`,
+
+  orderReady: (id: string) => `${order}/order/ready/${id}`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 6c17f39fd..8b68a05df 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -48,6 +48,7 @@
         :name="4"
         title="รายละเอียดคำสั่งและแนบท้าย"
         prefix="4"
+        :done="step > 4"
         :header-nav="step > 4"
       />
       <template v-slot:message>
@@ -61,8 +62,12 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, defineAsyncComponent, onMounted } from "vue";
+import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
 import type { QStepper } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+const probationData = useProbationDataStore();
+const { stepOrder, setStepOrder } = probationData;
 
 const step01 = defineAsyncComponent(
   () =>
@@ -85,6 +90,10 @@ const router = useRouter();
 const step = ref<number>(1);
 const stepper = ref<QStepper>();
 
+onUnmounted(() => {
+  destroyLocalStorage();
+});
+
 const nextStep = () => {
   stepper.value!.next();
   localStorage.setItem("currentStep", step.value.toString());
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index eeddc482b..6f5ff7392 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -3,10 +3,24 @@
     <q-form ref="myForm" class="q-pa-md">
       <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            :options="typeOrderOption" option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="typeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
           ) " -->
@@ -15,36 +29,73 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
         </div>
 
         <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
           <div class="col-6">
-            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
-              hide-bottom-space type="number" />
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+              :label="`${'คำสั่ง'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+              type="number"
+            />
           </div>
-          <label class="col-1 flex justify-center items-center text-bold">/</label>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
           <div class="col-5">
-            <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
-              @update:modelValue="clickEditRow">
+            <datepicker
+              v-model="dateYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:modelValue="clickEditRow"
+            >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`" dense outlined>
+                <q-input
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
+                  dense
+                  outlined
+                >
                 </q-input>
               </template>
             </datepicker>
           </div>
         </div>
         <div class="col-xs-5 col-md-3">
-          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -52,12 +103,24 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
-                " :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateCommand != null ? date2Thai(dateCommand) : null
+                "
+                :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -66,10 +129,24 @@
         </div>
 
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
-            option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="byOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
           ) " -->
@@ -77,50 +154,115 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
         </div>
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
         </div>
         <div class="col-12">
           <q-separator />
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
-            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
         </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" />
+          <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" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="registerOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateRegister"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -128,13 +270,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
-                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateRegister != null ? date2Thai(dateRegister) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -142,18 +296,38 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
-            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
-            input-debounce="0" />
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="announceOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAnnounce"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -161,13 +335,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -198,13 +384,13 @@ import type {
 } 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";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 
@@ -398,7 +584,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
 const submit = async () => {
   const formdata = {
@@ -430,7 +616,7 @@ const submit = async () => {
       }).onOk(async () => {
         showLoader();
         if (!orderId) {
-        createListOrder(formdata);
+          createListOrder(formdata);
         } else {
           let orderIdString = orderId.toString();
           updateOrder(formdata, orderIdString);
@@ -444,11 +630,13 @@ const createListOrder = async (formData: Object) => {
   await http
     .post(config.API.createOrder(), formData)
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+      localStorage.setItem("orderId", data.id);
       next();
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
-      console.log(e);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -462,9 +650,10 @@ const updateOrder = async (formData: Object, orderId: string) => {
     .then((res) => {
       console.log(res);
       next();
+      success($q, "แก้ไขข้อมูลสำเร็จ");
     })
     .catch((e) => {
-      console.log(e);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 2b5a6285f..49eb96d11 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -1,9 +1,10 @@
+div
 <template>
   <div>
     <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
       <div class="col-12 row q-pb-sm items-center">
-        <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
-          <q-tooltip>อัปเดตข้อมูล</q-tooltip>
+        <q-btn flat round color="primary" @click="refresh" icon="mdi-plus">
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
         </q-btn>
         <q-space />
         <div class="items-center" style="display: flex">
@@ -52,46 +53,20 @@
         :visible-columns="visibleColumns"
         :filter="filter"
         row-key="name"
-        selection="multiple"
-        v-model:selected="selected"
       >
-        <!-- <template v-slot:header-selection="scope">
-          <q-checkbox
-            keep-color
-            color="primary"
-            dense
-            v-model="scope.selected"
-          />
-        </template> -->
-
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width>
-              <q-checkbox
-                keep-color
-                color="primary"
-                dense
-                v-model="props.selected"
-              />
-            </q-th>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
 
             <q-th auto-width />
             <q-th auto-width />
+            <q-th auto-width />
           </q-tr>
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td>
-              <q-checkbox
-                keep-color
-                color="primary"
-                dense
-                v-model="props.selected"
-              />
-            </q-td>
             <q-td
               v-for="col in props.cols"
               :key="col.name"
@@ -127,6 +102,19 @@
                 <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
               </q-btn>
             </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="dialogDeleteData(props.row.personId)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
           </q-tr>
         </template>
       </d-table>
@@ -158,21 +146,15 @@
       </q-btn> -->
     </div>
   </div>
-
+  <!--********************************** เงินเดือน ********************************** -->
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 70vw; max-width: 70vw">
+    <q-card style="width: 50vw; max-width: 50vw">
       <q-form ref="myForm">
         <DialogHeader :tittle="titleName" :close="modalOpenClose" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-6 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <!-- style="height: 70vh" -->
-                <q-scroll-area visible> </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-6">
+            <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
                   <q-input
@@ -236,14 +218,86 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <!--********************************** รายชื่อ ********************************** -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+            selection="multiple"
+            v-model:selected="selected"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-th>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+                >
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModalAdd"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import type { QInput } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps, QForm } from "quasar";
+import { useRoute } from "vue-router";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
   next: {
@@ -259,8 +313,9 @@ const props = defineProps({
 const next = () => props.next();
 const previous = () => props.previous();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
+const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
 
+const route = useRoute();
 const $q = useQuasar();
 
 const modalData = ref<any>({
@@ -269,19 +324,31 @@ const modalData = ref<any>({
   mouthSalaryAmount: 0,
 });
 const myForm = ref<QForm | null>(null);
+const myFormAdd = ref<QForm | null>(null);
 const modal = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
 const titleName = ref<string>("");
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
-const visibleColumns = ref<String[]>(["no", "idcard", "name", "educate"]);
+const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
 const columns = ref<QTableProps["columns"]>([
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
-    name: "idcard",
+    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",
+    field: "idCard",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "name",
@@ -289,94 +356,155 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ-สกุล",
     field: "name",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "educate",
+    name: "education",
     align: "left",
     label: "วุฒิการศึกษาในการออกคำสั่ง",
-    field: "educate",
+    field: "education",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
-const rows = ref<any>([
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางนัทธ์ เหล่าสกุล",
-    idcard: "9158455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
-    name: "นางขรรค์ จันทรสมบัติ",
-    idcard: "8558455632126",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
-    name: "นางโอภาส จรัสวงศ์",
-    idcard: "8158455635425",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
-    name: "นางธิญา หงษ์ทอง",
-    idcard: "4558455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางธนวิทย์ พิกุลเทพ",
-    idcard: "5542455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางหนึ่ง สตาภิรมย์",
-    idcard: "7448455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางสัจพร คมคาย",
-    idcard: "1236455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางตุลยากร ปรีดาศิริกุล",
-    idcard: "1523455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางบัลลังค์ จิรวาณิชย์",
-    idcard: "1258455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางคมคาย เรืองรังสรรค์",
-    idcard: "8548455632145",
-    educate: "ปริญญาตรี",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางพรทิพา คมคาย",
-    idcard: "6598455632145",
-    educate: "ปริญญาตรี",
-  },
-]);
+const rows = ref<ResponseData[]>([]);
 const selected = ref([]);
 
-const upDown = (value: any, up: boolean = true) => {
+onMounted(async () => {
+  await conditionData();
+});
+
+const conditionData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          education: r.education ?? "",
+          idCard: r.idCard ?? "",
+          name: r.name ?? "",
+          personId: r.personId ?? "",
+          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+          sequence: r.sequence !== null ? r.sequence : 0,
+        });
+      });
+      //   console.log("list", list);
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const saveSalary = async (id: string) => {
+  await http
+    .put(config.API.salaryOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const dialogDeleteData = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const swapUp = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapUpOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const swapDown = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapDownOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
   const indexCurrent = value.rowIndex;
   if (up) {
-    rows.value[indexCurrent] = rows.value[indexCurrent - 1];
-    rows.value[indexCurrent - 1] = value.row;
+    await swapUp(value.row.personId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
+    // rows.value[indexCurrent - 1] = value.row;
   } else {
-    rows.value[indexCurrent] = rows.value[indexCurrent + 1];
-    rows.value[indexCurrent + 1] = value.row;
+    await swapDown(value.row.personId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
+    // rows.value[indexCurrent + 1] = value.row;
   }
 };
 
@@ -407,32 +535,51 @@ const modalOpenClose = () => {
   }
 };
 
+const modalAddChange = () => {
+  modalAdd.value = !modalAdd.value;
+};
+
+const saveModalAdd = () => {
+  if (myFormAdd.value !== null) {
+    myFormAdd.value.validate().then(async (result: boolean) => {
+      if (result) {
+        modalAddChange();
+      }
+    });
+  }
+};
+
 const click = (e: any) => {
   console.log(e);
   console.log(rows.value.length);
 };
 
 const save = () => {
-  if (selected.value.length > 0) {
-    next();
-  } else {
-    dialogMessage(
-      $q,
-      "ข้อความแจ้งเตือน",
-      "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-  }
+  //   if (selected.value.length > 0) {
+  //     next();
+  //   } else {
+  //     dialogMessage(
+  //       $q,
+  //       "ข้อความแจ้งเตือน",
+  //       "กรุณาเลือกรายชื่อ",
+  //       "warning",
+  //       undefined,
+  //       "orange",
+  //       undefined,
+  //       undefined,
+  //       true
+  //     );
+  //   }
+  next();
 };
 
 const selectData = (row: any) => {};
 
-const refresh = () => {};
+const refresh = async () => {
+  await conditionData();
+  modalAddChange();
+  selected.value = [];
+};
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 8d58d929e..c71389d9e 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -46,82 +46,85 @@
           />
         </div>
       </div>
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="idcard" :props="props">
-              {{ props.row.idcard }}
-            </q-td>
-            <q-td key="name" :props="props">
-              {{ props.row.name }}
-            </q-td>
-            <q-td key="position" :props="props">
-              {{ props.row.position }}
-            </q-td>
-            <q-td key="agency" :props="props">
-              {{ props.row.agency }}
-            </q-td>
-            <q-td key="send" :props="props">
-              <q-select
-                :class="getClass(true)"
-                hide-bottom-space
-                multiple
-                :outlined="true"
-                dense
-                lazy-rules
-                v-model="props.row.mutiselect"
-                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
-                :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="optionSelect"
-                option-value="id"
-                input-debounce="0"
-                color="primary"
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-black">
-                      ไม่พบข้อมูลที่ค้นหา
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
+      <q-form ref="myForm">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="idCard"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="idCard" :props="props">
+                {{ props.row.idCard }}
+              </q-td>
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="unit" :props="props">
+                {{ props.row.unit }}
+              </q-td>
+              <q-td key="send" :props="props">
+                <q-select
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  :outlined="true"
+                  dense
+                  lazy-rules
+                  v-model="props.row.mutiselect"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
+                  :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="optionSelect"
+                  option-value="id"
+                  input-debounce="0"
+                  color="primary"
+                  @update:model-value="() => updateData(props.row)"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-black">
+                        ไม่พบข้อมูลที่ค้นหา
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.personalId)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-form>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
@@ -140,7 +143,7 @@
         unelevated
         label="บันทึก"
         color="public"
-        @click="next"
+        @click="saveDataCopyOrder"
         class="q-px-md"
         ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
@@ -153,101 +156,100 @@
 
   <q-dialog v-model="modal" persistent full-width>
     <q-card>
-      <q-form ref="myForm">
-        <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-5 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:selected="selected"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-7">
-              <div class="col-12 row q-py-sm items-center">
-                <q-space />
-                <div class="items-center" style="display: flex">
-                  <q-input
-                    standout
-                    dense
-                    v-model="filterModal"
-                    ref="filterRef"
-                    outlined
-                    debounce="300"
-                    placeholder="ค้นหา"
-                    style="max-width: 200px"
-                    class="q-ml-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon v-if="filterModal == ''" name="search" />
-                      <q-icon
-                        v-if="filterModal !== ''"
-                        name="clear"
-                        class="cursor-pointer"
-                        @click="resetFilter"
-                      />
-                    </template>
-                  </q-input>
+      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-5 row">
+            <q-card flat bordered class="fit q-pa-sm">
+              <q-scroll-area visible style="height: 70vh">
+                <q-input
+                  outlined
+                  dense
+                  v-model="search"
+                  placeholder="ค้นหา"
+                  class="q-mb-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon name="mdi-magnify" />
+                  </template>
+                </q-input>
+                <q-tree
+                  :nodes="nodesTree"
+                  dense
+                  node-key="id"
+                  v-model:selected="selected"
+                  v-model:expanded="expanded"
+                  no-selection-unset
+                  selected-color="primary"
+                  @update:selected="onSelected"
+                  default-expand-all
+                />
+              </q-scroll-area>
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-7">
+            <div class="col-12 row q-py-sm items-center">
+              <q-space />
+              <div class="items-center" style="display: flex">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterModal"
+                  ref="filterRef"
+                  outlined
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  style="max-width: 200px"
+                  class="q-ml-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="filterModal == ''" name="search" />
+                    <q-icon
+                      v-if="filterModal !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="resetFilter"
+                    />
+                  </template>
+                </q-input>
 
-                  <q-select
-                    v-model="visibleColumnsModal"
-                    :display-value="$q.lang.table.columns"
-                    multiple
-                    outlined
-                    dense
-                    :options="columnsModal"
-                    options-dense
-                    option-value="name"
-                    map-options
-                    emit-value
-                    style="min-width: 150px"
-                    class="gt-xs q-ml-sm"
-                  />
-                </div>
+                <q-select
+                  v-model="visibleColumnsModal"
+                  :display-value="$q.lang.table.columns"
+                  multiple
+                  outlined
+                  dense
+                  :options="columnsModal"
+                  options-dense
+                  option-value="name"
+                  map-options
+                  emit-value
+                  style="min-width: 150px"
+                  class="gt-xs q-ml-sm"
+                />
               </div>
-              <d-table
-                :rows="rowsModal"
-                :columns="columnsModal"
-                :visible-columns="visibleColumnsModal"
-                :filter="filterModal"
-                row-key="name"
-                selection="multiple"
-                v-model:selected="selectedModal"
-              >
-                <template v-slot:header-selection="scope">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template>
+            </div>
+            <d-table
+              :rows="rowsModal"
+              :columns="columnsModal"
+              :visible-columns="visibleColumnsModal"
+              :filter="filterModal"
+              row-key="profileId"
+              selection="multiple"
+              v-model:selected="selectedModal"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
 
-                <template v-slot:body-selection="scope">
-                  <!-- <q-checkbox
+              <template v-slot:body-selection="scope">
+                <!-- <q-checkbox
                     keep-color
                     color="primary"
                     dense
@@ -261,32 +263,32 @@
                       }
                     "
                   /> -->
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template>
+                <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>
+              <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 v-else>
+                    {{ props.value }}
+                  </div>
+                </q-td>
+              </template>
+            </d-table>
           </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <!-- <q-btn
             flat
             round
             color="public"
@@ -294,9 +296,16 @@
             @click="clickClose"
           >
             <q-tooltip>บันทึก</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
+          </q-btn> -->
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="saveData"
+          class="q-px-md"
+        />
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
@@ -310,6 +319,13 @@ import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
+import type {
+  ResponseOrganiz,
+  ResponseCopyOrder,
+  DataCopyOrder,
+} from "@/modules/05_placement/interface/response/Order";
+import type { RequestCopyOrder } from "@/modules/05_placement/interface/request/Order";
+import { useRoute } from "vue-router";
 
 const props = defineProps({
   next: {
@@ -327,142 +343,42 @@ const previous = () => props.previous();
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
+const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
 
-const myForm = ref<QForm>();
+const route = useRoute();
+
+const myForm = ref<QForm | null>(null);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
-const mutiselect = ref([]);
+
 const modal = ref<boolean>(false);
 const search = ref<string>("");
 const expanded = ref<string[]>([]);
 const selected = ref<string>("");
 const nodesTree = ref<treeTab[]>([]);
-const send = ref<String[]>([]);
-const selectedModal = ref([]);
-const test = ref([]);
+
+const selectedModal = ref<ResponseOrganiz[]>([]);
+
 const filterModal = ref<string>("");
-const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
+const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
 const columnsModal = ref<QTableProps["columns"]>([
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
-    name: "idcard",
+    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,
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-  },
-]);
-
-const rowsModal = [
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางนัทธ์ เหล่าสกุล",
-    idcard: "9158455632145",
-    educate: "",
-  },
-  {
-    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
-    name: "นางขรรค์ จันทรสมบัติ",
-    idcard: "8558455632126",
-    educate: "",
-  },
-  {
-    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
-    name: "นางโอภาส จรัสวงศ์",
-    idcard: "8158455635425",
-    educate: "",
-  },
-  {
-    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
-    name: "นางธิญา หงษ์ทอง",
-    idcard: "4558455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางธนวิทย์ พิกุลเทพ",
-    idcard: "5542455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางหนึ่ง สตาภิรมย์",
-    idcard: "7448455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางสัจพร คมคาย",
-    idcard: "1236455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางตุลยากร ปรีดาศิริกุล",
-    idcard: "1523455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางบัลลังค์ จิรวาณิชย์",
-    idcard: "1258455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางคมคาย เรืองรังสรรค์",
-    idcard: "8548455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางพรทิพา คมคาย",
-    idcard: "6598455632145",
-    educate: "",
-  },
-];
-
-const paginationModal = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const optionSelect = ref<any>([
-  { id: 1, name: "อีเมล" },
-  { id: 2, name: "กล่องข้อความ" },
-]);
-
-const visibleColumns = ref<String[]>([
-  "no",
-  "idcard",
-  "name",
-  "position",
-  "agency",
-  "send",
-]);
-const columns = ref<QTableProps["columns"]>([
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idcard",
+    field: "idCard",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "name",
@@ -470,6 +386,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ-สกุล",
     field: "name",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -477,13 +395,63 @@ const columns = ref<QTableProps["columns"]>([
     label: "ตำแหน่ง",
     field: "position",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const rowsModal = ref<ResponseOrganiz[]>([]);
+
+const optionSelect = ref<any>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "idCard",
+  "name",
+  "position",
+  "unit",
+  "send",
+]);
+const columns = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "agency",
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unit",
     align: "left",
     label: "หน่วยงาน",
-    field: "agency",
+    field: "unit",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "send",
@@ -491,120 +459,129 @@ const columns = ref<QTableProps["columns"]>([
     label: "ช่องทางการส่งสำเนา",
     field: "send",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
-const rows = ref([
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางนัทธ์ เหล่าสกุล",
-    idcard: "9158455632145",
-    send: "",
-    position: "ผู้อำนวยการ",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
-    name: "นางขรรค์ จันทรสมบัติ",
-    idcard: "8558455632126",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
-    name: "นางโอภาส จรัสวงศ์",
-    idcard: "8158455635425",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
-    name: "นางธิญา หงษ์ทอง",
-    idcard: "4558455632145",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางธนวิทย์ พิกุลเทพ",
-    idcard: "5542455632145",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางหนึ่ง สตาภิรมย์",
-    idcard: "7448455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางสัจพร คมคาย",
-    idcard: "1236455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางตุลยากร ปรีดาศิริกุล",
-    idcard: "1523455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางบัลลังค์ จิรวาณิชย์",
-    idcard: "1258455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางคมคาย เรืองรังสรรค์",
-    idcard: "8548455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางพรทิพา คมคาย",
-    idcard: "6598455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-]);
+const rows = ref<DataCopyOrder[]>([]);
+
+const editRows = ref<DataCopyOrder[]>([]);
 
 onMounted(async () => {
-  await nodeTree();
+  await conditionId();
 });
 
-const paginationLabel = (start: number, end: number, total: number) => {
-  //   if (props.paging == true)
-  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  //   else
-  return start + "-" + end + " ใน " + total;
+const listModal = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderPersonsId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let list: ResponseOrganiz[] = [];
+      data.map((r: ResponseOrganiz) => {
+        list.push({
+          firstName: r.firstName ?? "",
+          idCard: r.idCard ?? "",
+          lastName: r.lastName ?? "",
+          name: r.name ?? "",
+          position: r.position ?? "",
+          prefixId: r.prefixId ?? "",
+          profileId: r.profileId ?? "",
+          unit: r.unit ?? "",
+        });
+      });
+      rowsModal.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const conditionId = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderId(id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: DataCopyOrder[] = [];
+      data.map((r: ResponseCopyOrder) => {
+        let selectCopyOrder = [];
+        if (r.emailChannel) {
+          selectCopyOrder.push(1);
+        }
+        if (r.inboxChannel) {
+          selectCopyOrder.push(2);
+        }
+
+        list.push({
+          personalId: r.personalId ?? "",
+          name: r.name ?? "",
+          idCard: r.idCard ?? "",
+          position: r.position ?? "",
+          unit: r.unit ?? "",
+          send: "",
+          mutiselect: selectCopyOrder,
+        });
+      });
+      if (editRows.value.length > 0) {
+        list.map((r: DataCopyOrder) => {
+          editRows.value.map((e: DataCopyOrder) => {
+            if (r.personalId == e.personalId) {
+              r.mutiselect = e.mutiselect;
+            }
+          });
+        });
+      }
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const saveData = async () => {
+  //   console.log("select", selectedModal.value);
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    showLoader();
+    await http
+      .post(config.API.copyOrderPersonsId(id), selectedModal.value)
+      .then((res) => {
+        //   const data = res.data.result;
+        console.log(res);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionId();
+        clickClose();
+        // hideLoader();
+      });
+  }
 };
 
 const resetFilter = () => {
@@ -639,8 +616,15 @@ const clickClose = async () => {
   //   }
 };
 
-const clickAdd = () => {
+const clickAdd = async () => {
+  await nodeTree();
+  selected.value = "";
+  rowsModal.value = [];
+  selectedModal.value = [];
   modal.value = true;
+  if (myForm.value !== null) {
+    myForm.value.reset();
+  }
 };
 
 const clickDelete = (id: string) => {
@@ -676,9 +660,63 @@ const nodeTree = async () => {
 };
 
 const onSelected = async (id: string) => {
-  //   await fetchPositionNumber(id);
+  await listModal(id);
 };
 
-const deleteData = async (id: string) => {};
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.copyOrderId(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      //   hideLoader();
+      await conditionId();
+    });
+};
+
+const saveDataCopyOrder = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        await fetchSaveCopyOrder();
+      }
+    });
+  }
+};
+
+const fetchSaveCopyOrder = async () => {
+  let list: RequestCopyOrder[] = [];
+  rows.value.map((r: DataCopyOrder) => {
+    list.push({
+      personalId: r.personalId,
+      emailChannel: r.mutiselect.includes(1),
+      inboxChannel: r.mutiselect.includes(2),
+    });
+  });
+
+  showLoader();
+  await http
+    .put(config.API.copyOrder, list)
+    .then((res: any) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const updateData = (row: DataCopyOrder) => {
+  editRows.value.push(row);
+};
 </script>
 <style lang="scss"></style>
diff --git a/src/modules/05_placement/interface/request/Order.ts b/src/modules/05_placement/interface/request/Order.ts
new file mode 100644
index 000000000..d7e306c25
--- /dev/null
+++ b/src/modules/05_placement/interface/request/Order.ts
@@ -0,0 +1,7 @@
+interface RequestCopyOrder {
+  personalId: string;
+  emailChannel: boolean;
+  inboxChannel: boolean;
+}
+
+export type { RequestCopyOrder };
diff --git a/src/modules/05_placement/interface/response/Order.ts b/src/modules/05_placement/interface/response/Order.ts
new file mode 100644
index 000000000..6dc958ff1
--- /dev/null
+++ b/src/modules/05_placement/interface/response/Order.ts
@@ -0,0 +1,43 @@
+interface ResponseData {
+  education: string;
+  idCard: string;
+  name: string;
+  personId: string;
+  selectStatus: boolean;
+  sequence: number;
+}
+
+interface ResponseOrganiz {
+  firstName: string;
+  idCard: string;
+  lastName: string;
+  name: string;
+  position: string;
+  prefixId: string;
+  profileId: string;
+  unit: string;
+}
+
+interface ResponseCopyOrder {
+  emailChannel: boolean;
+  idCard: string;
+  inboxChannel: boolean;
+  name: string;
+  personalId: string;
+  position: string;
+  selectStatus: boolean;
+  sequence: number;
+  unit: string;
+}
+
+interface DataCopyOrder {
+  personalId: string;
+  name: string;
+  idCard: string;
+  position: string;
+  unit: string;
+  send: string;
+  mutiselect: number[];
+}
+
+export type { ResponseData, ResponseOrganiz, ResponseCopyOrder, DataCopyOrder };
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 0fca902c5..0ebbda72f 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -229,8 +229,6 @@ 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) {
@@ -269,7 +267,11 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
           item.OrderStatus === filter_2 &&
           item.fiscalYear === filterYear
       );
-    } else if (filter_1 == "ทั้งหมด" && filter_2 == "ทั้งหมด" && filterYear !== null) {
+    } else if (
+      filter_1 == "ทั้งหมด" &&
+      filter_2 == "ทั้งหมด" &&
+      filterYear !== null
+    ) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
     }
   };
@@ -294,8 +296,18 @@ export const useProbationDataStore = defineStore("probationDataStore", () => {
     "blue-9",
     "blue-10",
   ]);
+  const orderId = ref<string>("");
+
+  const stepOrder = ref<number>(2);
+
+  const setOrderId = (val: string) => (orderId.value = val);
+  const setStepOrder = (val: number) => (stepOrder.value = val);
 
   return {
     ratingColors,
+    orderId,
+    stepOrder,
+    setOrderId,
+    setStepOrder,
   };
 });