From 45fce1e58a0add8f60d17f8a20131b86224152ac Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 17:24:42 +0700
Subject: [PATCH 1/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20api=20?=
 =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 244b63653..51f162272 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,8 +26,8 @@ const config = ref<any>({
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
     API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
-    API_PROBATION_URI: "http://192.168.1.151:7776/v1",
+    API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
+    // API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",

From d09dbda153468d2a925323d29655aca778c2e910 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Aug 2023 17:56:01 +0700
Subject: [PATCH 2/4] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20push.router?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormReport.vue   |  25 +-
 .../10_order/components/step/step01.vue       | 307 ++++++++++++++----
 2 files changed, 260 insertions(+), 72 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 7fa0612c2..440d88e8d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -19,12 +19,12 @@ const {
   hideLoader,
 } = mixin;
 const route = useRoute();
-const router = useRouter();
 const assignId = ref<string>(route.params.form.toString());
 
 const assign = ref<any>([]);
 const mentors = ref<any>([]);
 const commander = ref<any>([]);
+const status = ref<boolean>(true);
 const evaluate = ref<any>([]);
 
 onMounted(() => {
@@ -39,6 +39,8 @@ const fecthAssign = async (id: string) => {
       console.log(res);
       assign.value = res.data.data.assign;
       mentors.value = res.data.data.mentors;
+      date_start.value = assign.value.date_start;
+      date_finish.value = assign.value.date_finish;
 
       director_id.value = res.data.data.commander.name;
       director_id2.value = mentors.value[0].name;
@@ -55,14 +57,14 @@ const fecthAssign = async (id: string) => {
       hideLoader();
     });
 };
-const date_start = ref<Date>(new Date("10-10-2023"));
+const date_start = ref<Date>(new Date());
 const date_finish = ref<Date>();
 const develop = ref<number>();
 const result = ref<number>();
 const reson = ref<string>("");
 const chairman_dated = ref<string>("");
-const director1_dated = ref<string>("");
-const director2_dated = ref<string>("");
+const director1_dated = ref<any>("");
+const director2_dated = ref<any>("");
 const fecthResult = async (id: string) => {
   await http
     .get(config.API.evaluateReport(id))
@@ -77,6 +79,7 @@ const fecthResult = async (id: string) => {
       chairman_dated.value = data.chairman_dated;
       director1_dated.value = data.director1_dated;
       director2_dated.value = data.director2_dated;
+      status.value = false;
     })
     .catch((e) => {
       console.log(e);
@@ -87,11 +90,11 @@ const fecthResult = async (id: string) => {
 
 const options = [
   { value: 1, label: "พัฒนาครบ 3 ส่วน" },
-  { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
 ];
 const optionsResult = [
   { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
-  { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+  { value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
 ];
 
 const director_id = ref<any>(null);
@@ -272,6 +275,7 @@ const postData = async () => {
             emit-value
             map-options
             option-label="label"
+            option-value="value"
             outlined
             v-model="result"
             label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
@@ -371,7 +375,6 @@ const postData = async () => {
               :options="optionDirector"
               label=""
               option-label="name"
-             
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
@@ -430,7 +433,6 @@ const postData = async () => {
               :options="optionDirector"
               label=""
               option-label="name"
-             
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
@@ -479,7 +481,12 @@ const postData = async () => {
 
       <q-toolbar class="text-primary">
         <q-space />
-        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          @click="savaForm"
+          v-if="status"
+        />
       </q-toolbar>
     </q-form>
   </div>
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 9ba307395..1eef3cc73 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/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,25 +154,55 @@
         <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'
           ) " -->
@@ -109,18 +216,39 @@
           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 +256,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 +282,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 +321,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>
@@ -199,14 +371,22 @@ import type {
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, success, dialogMessage } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
+const router = useRouter();
 
 const props = defineProps({
   next: {
@@ -398,7 +578,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
 const submit = async () => {
   const formdata = {
@@ -446,6 +626,7 @@ const createListOrder = async (formData: Object) => {
     .then((res) => {
       const data = res.data.result;
       localStorage.setItem("orderId", data.id);
+      router.push(`/order/detail/${data.id}?step=${2}`);
       next();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })

From d163ac8e1c90aa2fc667f51af1ea34a1c6958c60 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 23:47:18 +0700
Subject: [PATCH 3/4] =?UTF-8?q?-=20add=20common=20dialog=20(remove,=20conf?=
 =?UTF-8?q?irm=20&=20message=20notify)=20=E0=B9=81=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B9=83=E0=B8=8A=E0=B9=89=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87=20-=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20action=20=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=97=E0=B8=B8=E0=B8=81=E0=B8=AD=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=20-=20fix=20bug=20call=20function=20in=20cer?=
 =?UTF-8?q?tificate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Information/Certicate.vue      |   2 +-
 .../04_registry/components/Profile.vue        | 531 +++++--------
 .../components/OrderPlacement/step/step02.vue | 741 ------------------
 src/modules/10_order/components/Main.vue      |  10 +-
 .../10_order/components/step/step01.vue       | 310 ++------
 .../10_order/components/step/step02.vue       |  48 +-
 .../10_order/components/step/step03.vue       |  25 +-
 .../10_order/components/step/step04.vue       |  21 +-
 src/stores/mixin.ts                           |  75 ++
 9 files changed, 341 insertions(+), 1422 deletions(-)
 delete mode 100644 src/modules/05_placement/components/OrderPlacement/step/step02.vue

diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index 009b7a290..43bc56bed 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -292,7 +292,7 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index b2cda7dd5..2cde4cabd 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -6,17 +6,10 @@
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
         /> -->
-        <Information
-          v-model:statusEdit="statusEdit"
-          :fetchDataProfile="fetchData"
-        />
+        <Information v-model:statusEdit="statusEdit" :fetchDataProfile="fetchData" />
       </div>
       <div id="government" name="16" class="row col-12 q-mt-md">
-        <Government
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-          :employeeClass="employeeClass"
-        />
+        <Government v-model:statusEdit="statusEdit" :profileType="profileType" :employeeClass="employeeClass" />
       </div>
       <div id="address" name="17" class="row col-12 q-mt-md">
         <Address v-model:statusEdit="statusEdit" />
@@ -40,20 +33,11 @@
         <CoinedVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-        />
+        <AssessmentVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="position" name="7" class="row col-12 q-mt-md">
-        <SalaryVue
-          v-model:statusEdit="statusEdit"
-          v-if="profileType === 'officer'"
-        />
-        <SalaryEmployeeTempVue
-          v-model:statusEdit="statusEdit"
-          v-else-if="employeeClass === 'temp'"
-        />
+        <SalaryVue v-model:statusEdit="statusEdit" v-if="profileType === 'officer'" />
+        <SalaryEmployeeTempVue v-model:statusEdit="statusEdit" v-else-if="employeeClass === 'temp'" />
         <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
       </div>
       <div id="rule" name="8" class="row col-12 q-mt-md">
@@ -78,70 +62,29 @@
         <DocumentVue v-model:statusEdit="statusEdit" />
       </div>
     </div>
-    <q-page-sticky
-      position="top"
-      expand
-      class="bg-grey-2 text-white"
-      style="z-index: 99; padding: 0% 1% 0% 1%"
-    >
-      <div
-        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
-      >
-        <q-btn
-          flat
-          round
-          class="bg-teal-1 full-height"
-          color="primary"
-          icon="mdi-chevron-left"
-          dense
-          @click="router.go(-1)"
-        >
+    <q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
+      <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+        <q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
+          @click="router.go(-1)">
         </q-btn>
-        <q-avatar
-          v-if="imageUrl == null"
-          size="65px"
-          rounded
-          class="containerimage"
-        >
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="bg-grey-3"
-            style="object-fit: cover"
-          />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+        <q-avatar v-if="imageUrl == null" size="65px" rounded class="containerimage">
+          <img src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <q-avatar v-else size="65px" rounded class="containerimage">
           <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <div class="row items-center text-dark q-ml-md">
@@ -157,25 +100,25 @@
         <q-btn round flat color="blue" icon="mdi-file-document">
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="helpPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ช่วยราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="repatriationPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ส่งตัวกลับ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="appointPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>แต่งตั้ง-เลื่อน</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="relocationPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ย้าย</q-item-section>
@@ -187,25 +130,25 @@
                 <q-item-section>ถึงแก่กรรม</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="outPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ให้ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="dischargePost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ปลดออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="expulsionPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ไล่ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="otherPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>อื่นๆ</q-item-section>
@@ -215,15 +158,8 @@
           </q-menu>
         </q-btn>
 
-        <q-btn
-          round
-          flat
-          :color="reasonStatus ? 'primary' : 'pink-5'"
-          @click="clickRetire()"
-          :icon="
-            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
-          "
-        >
+        <q-btn round flat :color="reasonStatus ? 'primary' : 'pink-5'" @click="clickRetire()" :icon="reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
+          ">
           <q-tooltip>{{
             reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
           }}</q-tooltip>
@@ -237,9 +173,7 @@
                 <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
               </q-item>
               <q-item clickable v-close-popup @click="clickKp7Short()">
-                <q-item-section class="text-primary"
-                  >ประวัติแบบย่อ</q-item-section
-                >
+                <q-item-section class="text-primary">ประวัติแบบย่อ</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -251,20 +185,8 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ก.พ.7/ก.ก.1"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7" style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -279,20 +201,9 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7Short()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ประวัติแบบย่อ"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7Short"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7Short()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ประวัติแบบย่อ"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7Short"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -309,50 +220,28 @@
       <q-card-section class="q-py-sm row">
         <div class="text-h6">เลือกรูปภาพ</div>
         <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
+        <q-btn icon="close" unelevated round dense @click="closeImage" style="color: #ff8080; background-color: #ffdede">
           <q-tooltip>ปิดหน้านี้</q-tooltip>
         </q-btn>
       </q-card-section>
       <q-separator />
       <q-card-section class="col-12 row">
-        <div
-          class="row wrap items-start col-12 q-col-gutter-sm"
-          style="height: 320px; overflow: auto"
-        >
+        <div class="row wrap items-start col-12 q-col-gutter-sm" style="height: 320px; overflow: auto">
           <div class="col-3" @click="addNewImage">
-            <div
-              style="
+            <div style="
                 height: 160px;
                 max-width: 15vw;
                 display: flex !important;
                 justify-content: center;
                 align-items: center;
-              "
-              class="column rounded-borders cursor-pointer bg-active-image text-white"
-            >
+              " class="column rounded-borders cursor-pointer bg-active-image text-white">
               <q-icon name="add" size="60px" color="white" />
               <strong>อัปโหลดรูปภาพ</strong>
             </div>
           </div>
-          <div
-            v-for="n in images"
-            :key="n"
-            class="col-3"
-            @click="imageActive(n)"
-          >
+          <div v-for="n in images" :key="n" class="col-3" @click="imageActive(n)">
             <div :class="getClass(n)">
-              <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
-                :class="imageClass(n)"
-              >
+              <q-img v-if="n.avatar != null" :src="n.avatar" :class="imageClass(n)">
                 <!-- <div
                   class="absolute-top bg-transparent cursor-pointer text-right"
                   style="padding: 5px"
@@ -366,21 +255,11 @@
                     style="color: #ff8080"
                   />
                 </div> -->
-                <div
-                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
-                  style="padding: 5px"
-                >
+                <div class="absolute-bottom col-12 cursor-pointer flex justify-between items-center" style="padding: 5px">
                   {{ date2Thai(n.createdDate) }}
 
-                  <q-btn
-                    v-if="!n.isActive"
-                    icon="delete"
-                    unelevated
-                    dense
-                    @click="deletePhoto(n.id)"
-                    class="bg-white"
-                    style="color: #ff8080"
-                  />
+                  <q-btn v-if="!n.isActive" icon="delete" unelevated dense @click="deletePhoto(n.id)" class="bg-white"
+                    style="color: #ff8080" />
                 </div>
               </q-img>
             </div>
@@ -398,14 +277,7 @@
         >
           <q-tooltip>ลบรูปภาพ</q-tooltip>
         </q-btn> -->
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
+        <q-btn icon="check" dense flat round @click="selectAvatarHistory" color="positive">
           <q-tooltip>เลือกรูปภาพ</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -419,38 +291,18 @@
           <q-card-section class="q-py-sm row">
             <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-file
-                class="col-12 col-sm-6 col-md-5"
-                outlined
-                dense
-                v-model="filePassaway"
-                label="แนบใบมรณบัตร"
-                hide-bottom-space
-                lazy-rules
-              >
+              <q-file class="col-12 col-sm-6 col-md-5" outlined dense v-model="filePassaway" label="แนบใบมรณบัตร"
+                hide-bottom-space lazy-rules>
                 <q-separator />
                 <template v-slot:prepend>
                   <q-icon name="attach_file" />
                 </template>
               </q-file>
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="deathCertificateNo"
-                label="เลขที่ใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร" />
 
-              <datepicker
-                class="col-12 col-sm-6 col-md-5"
-                menu-class-name="modalfix"
-                v-model="dateDeath"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker class="col-12 col-sm-6 col-md-5" menu-class-name="modalfix" v-model="dateDeath" :locale="'th'"
+                autoApply borderless :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -458,63 +310,32 @@
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="
-                      dateDeath != null ? date2Thai(dateDeath) : null
-                    "
-                    :label="`${'วันที่เสียชีวิต'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
-                    ]"
-                  >
+                  <q-input outlined dense class="full-width datepicker" :model-value="dateDeath != null ? date2Thai(dateDeath) : 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>
                 </template>
               </datepicker>
 
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="placeDeathCertificate"
-                label="สถานที่ออกใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร" />
               <q-separator />
-              <q-input
-                class="col-12"
-                dense
-                outlined
-                v-model="reasonDeath"
-                label="เหตุผลการเสีบชีวิต"
-                type="textarea"
-              />
+              <q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสีบชีวิต" type="textarea" />
             </div>
             <q-space />
           </q-card-section>
           <q-separator />
           <div class="flex justify-end q-pa-sm q-gutter-sm">
-            <q-btn
-              unelevated
-              label="บันทึก"
-              color="public"
-              @click="clickSaveDeceased"
-              :disable="
-                filePassaway === null ||
-                deathCertificateNo === '' ||
-                placeDeathCertificate === '' ||
-                reasonDeath === ''
-              "
-            >
+            <q-btn unelevated label="บันทึก" color="public" @click="clickSaveDeceased" :disable="filePassaway === null ||
+              deathCertificateNo === '' ||
+              placeDeathCertificate === '' ||
+              reasonDeath === ''
+              ">
               <q-tooltip>บันทึก</q-tooltip>
             </q-btn>
           </div>
@@ -532,71 +353,34 @@
   <q-dialog v-model="dialogLeave" persistent>
     <q-card style="width: 600px">
       <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold"
-          >ประเภทการพ้นราชการ
+        <q-toolbar-title class="text-subtitle2 text-bold">ประเภทการพ้นราชการ
         </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeLeave"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense @click="closeLeave"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
 
       <q-separator />
       <q-card-section class="q-p-sm">
-        <div
-          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-        >
+        <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-select
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
-              hide-bottom-space
-              :label="`${'ประเภทการพ้นราชการ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="reasonOptions"
-              option-value="id"
-            />
+            <q-select class="full-width inputgreen cursor-pointer" outlined dense lazy-rules v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]" hide-bottom-space
+              :label="`${'ประเภทการพ้นราชการ'}`" emit-value map-options option-label="name" :options="reasonOptions"
+              option-value="id" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDate" :locale="'th'" autoApply :enableTimePicker="false"
+              week-start="0">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  :model-value="date2Thai(leaveDate)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่พ้นราชการ'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDate)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
+                  hide-bottom-space :label="`${'วันที่พ้นราชการ'}`">
                   <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>
@@ -604,64 +388,30 @@
             </datepicker>
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveDetail"
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow v-model="leaveDetail"
               :rules="[
                 (val) =>
                   !!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
-              ]"
-              hide-bottom-space
-              :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
-            />
+              ]" hide-bottom-space :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveNumberOrder"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
-              hide-bottom-space
-              :label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
-            />
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow
+              v-model="leaveNumberOrder" :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
+              hide-bottom-space :label="`${'คำสั่ง/เอกสารอ้างอิง'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDateOrder"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDateOrder" :locale="'th'" autoApply
+              :enableTimePicker="false" week-start="0">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  :model-value="date2Thai(leaveDateOrder)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่ออกคำสั่ง'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDateOrder)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
+                  hide-bottom-space :label="`${'วันที่ออกคำสั่ง'}`">
                   <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>
@@ -672,13 +422,7 @@
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn
-          flat
-          round
-          color="public"
-          @click="Retire"
-          icon="mdi-content-save-outline"
-        >
+        <q-btn flat round color="public" @click="Retire" icon="mdi-content-save-outline">
           <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -734,6 +478,7 @@ const {
   success,
   showLoader,
   hideLoader,
+  dialogConfirm
 } = mixin;
 const route = useRoute();
 const router = useRouter();
@@ -892,7 +637,7 @@ const uploadImage = async (e: any) => {
     showLoader();
     await http
       .post(config.API.profileAvatarId(profileId.value), formData)
-      .then((res) => {})
+      .then((res) => { })
       .catch((e) => {
         messageError($q, e);
       })
@@ -1016,13 +761,97 @@ const closeKp7Short = () => {
   dialogShort.value = false;
 };
 
-const postAdd = () => {
-  // router.push("/dismiss-order/add");
-};
+const helpPost = () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenHelpGov, formData);
+    },
+  );
+}
 
-const downloadKP7 = () => {};
+const repatriationPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenRepatriation, formData);
+    },
+  );
+}
 
-const downloadKP7Short = () => {};
+const appointPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenAppointment, formData);
+    },
+  );
+}
+
+const relocationPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenRelocation, formData);
+    },
+  );
+}
+
+const outPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementOut, formData);
+    },
+  );
+}
+
+const dischargePost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementDischarge, formData);
+    },
+  );
+}
+
+const expulsionPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementExpulsion, formData);
+    },
+  );
+}
+
+const otherPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenOther, formData);
+    },
+  );
+}
+
+const downloadKP7 = () => { };
+
+const downloadKP7Short = () => { };
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
@@ -1271,12 +1100,12 @@ const clickSaveDeceased = async () => {
           console.log(e);
           messageError($q, e);
         })
-        .finally(()=>{
+        .finally(() => {
           hideLoader();
         })
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 </script>
 <style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
deleted file mode 100644
index 34b0634df..000000000
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ /dev/null
@@ -1,741 +0,0 @@
-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-plus">
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-      </div>
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-
-            <q-th auto-width />
-            <q-th auto-width />
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectModal(props.row)"
-              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-            >
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                :disable="props.rowIndex + 1 == 1"
-                @click="upDown(props)"
-                icon="mdi-arrow-up-bold"
-              >
-                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
-              </q-btn>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                :disable="rows.length == props.rowIndex + 1"
-                @click="upDown(props, false)"
-                icon="mdi-arrow-down-bold"
-              >
-                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
-              </q-btn>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="dialogDeleteData(props.row.personalId)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="กรอกรายละเอียด"
-      >
-      </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="save"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-    </div>
-  </div>
-  <!--********************************** เงินเดือน ********************************** -->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 50vw; max-width: 50vw">
-      <q-form ref="myForm">
-        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12">
-              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.salaryAmount"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    :label="`${'เงินเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.positionSalaryAmount"
-                    :label="`${'เงินประจำตำแหน่ง'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                  <!-- :rules="[
-                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                    ]" -->
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.mouthSalaryAmount"
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                  <!-- :rules="[
-                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                    ]" -->
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModal"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <!--********************************** รายชื่อ ********************************** -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 50vw; max-width: 50vw">
-      <q-form ref="myFormAdd">
-        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <d-table
-            :rows="rows2"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-            selection="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, 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: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const next = () => props.next();
-const previous = () => props.previous();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
-
-const route = useRoute();
-const $q = useQuasar();
-
-const modalData = ref<any>({
-  salaryAmount: 0,
-  positionSalaryAmount: 0,
-  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", "education"]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "idCard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idCard",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "education",
-    align: "left",
-    label: "วุฒิการศึกษาในการออกคำสั่ง",
-    field: "education",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const selected = ref<ResponseData[]>([]);
-
-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.personsselectedOrder(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 ?? "",
-          personalId: r.personalId ?? "",
-          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-          sequence: r.sequence !== null ? r.sequence : 0,
-          refRecordId: r.refRecordId,
-        });
-      });
-      //   console.log("list", list);
-      rows.value = list;
-      selected.value = rows.value;
-    })
-    .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(async () => {
-      hideLoader();
-      await conditionData();
-    });
-};
-
-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) {
-    await swapUp(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
-    // rows.value[indexCurrent - 1] = value.row;
-  } else {
-    await swapDown(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
-    // rows.value[indexCurrent + 1] = value.row;
-  }
-};
-
-const saveModal = () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (result: boolean) => {
-      if (result) {
-        putSalary(modalData.value);
-      }
-    });
-  }
-};
-const personalId = ref<string>("");
-const selectModal = (e: any) => {
-  console.log(e);
-  titleName.value = e.name;
-  personalId.value = e.personalId;
-  // modalData.value = {
-  //   salaryAmount: 0,
-  //   positionSalaryAmount: 0,
-  //   mouthSalaryAmount: 0,
-  // };
-
-  modalOpenClose(e.personalId);
-};
-
-const modalOpenClose = async (personalId: string) => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    titleName.value = "";
-  }
-  if (modal.value == true) {
-    await fetchSalary(personalId);
-  }
-};
-const fetchSalary = async (personalId: string) => {
-  console.log(personalId);
-  showLoader();
-  await http
-    .get(config.API.salaryOrder(personalId))
-    .then((res: any) => {
-      console.log(res);
-      let salary = res.data.result;
-      modalData.value = {
-        salaryAmount: salary.salaryAmount,
-        positionSalaryAmount: salary.positionSalaryAmount,
-        mouthSalaryAmount: salary.monthSalaryAmount,
-      };
-    })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const putSalary = async (salary: any) => {
-  modalData.value = {
-    salaryAmount: Number(salary.salaryAmount),
-    positionSalaryAmount: Number(salary.positionSalaryAmount),
-    monthSalaryAmount: Number(salary.mouthSalaryAmount),
-  };
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูล",
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  }).onOk(async () => {
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-      });
-  });
-};
-
-const modalAddChange = async () => {
-  modalAdd.value = !modalAdd.value;
-  if (modalAdd.value == true) {
-    const id = route.params.orderid
-      ? route.params.orderid.toString()
-      : localStorage.getItem("orderId")
-      ? localStorage.getItem("orderId")
-      : null;
-    if (id !== null) {
-      await fetchaddlist(id);
-    }
-  } else await conditionData();
-};
-const fetchaddlist = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list = [];
-      list = data.map((r: ResponseData) => ({
-        education: r.education ?? "",
-        idCard: r.idCard ?? "",
-        name: r.name ?? "",
-        personalId: r.personalId ?? "",
-        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-        sequence: r.sequence !== null ? r.sequence : 0,
-        refRecordId: r.refRecordId,
-      }));
-      rows2.value = list;
-      selected.value = rows.value;
-      // rows2.value = list.filter((e: any) => e.selectStatus === false);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const saveModalAdd = () => {
-  if (myFormAdd.value !== null) {
-    myFormAdd.value.validate().then(async (result: boolean) => {
-      if (result && selected.value.length !== 0) {
-        $q.dialog({
-          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
-          },
-          persistent: true,
-        }).onOk(async () => {
-          let data = [];
-          data.push(...selected.value.map((e: any) => e.refRecordId));
-          // console.log(data);
-          addlist(data);
-        });
-      }
-    });
-  }
-};
-const addlist = async (data: Object) => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await http
-      .post(config.API.personsOrder(id), data)
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(() => {
-        modalAddChange();
-      });
-  }
-};
-
-const click = (e: any) => {
-  console.log(e);
-  console.log(rows.value.length);
-};
-
-const save = () => {
-  if (selected.value.length > 0) {
-    $q.dialog({
-      title: "ยืนยันการบันทึกข้อมูล",
-      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    }).onOk(async () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
-  } else {
-    dialogMessage(
-      $q,
-      "ข้อความแจ้งเตือน",
-      "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-  }
-};
-
-const selectData = (row: any) => {};
-
-const refresh = async () => {
-  // await conditionData();
-  modalAddChange();
-  selected.value = [];
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
-<style lang="scss"></style>
diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index c6b61430d..75f1ad406 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -125,7 +125,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogMessage } =
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogRemove } =
   mixin;
 const DataStore = useOrderPlacementDataStore();
 
@@ -314,15 +314,9 @@ const redirectToPage = (id?: string, status?: string) => {
 };
 
 const clickDelete = (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 
 };
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 1eef3cc73..0307b4fd6 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,24 +3,10 @@
     <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'
           ) " -->
@@ -29,73 +15,36 @@
         <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>
@@ -103,24 +52,12 @@
               {{ 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>
@@ -129,24 +66,10 @@
         </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'
           ) " -->
@@ -154,55 +77,25 @@
         <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'
           ) " -->
@@ -216,39 +109,18 @@
           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>
@@ -256,25 +128,13 @@
               {{ 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>
@@ -282,38 +142,18 @@
           </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>
@@ -321,25 +161,13 @@
               {{ 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>
@@ -382,7 +210,7 @@ const {
   showLoader,
   hideLoader,
   success,
-  dialogMessage,
+  dialogConfirm,
 } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
@@ -576,9 +404,9 @@ const fecthExamRoundOption = async () => {
     .get(config.API.examroundOrder())
     .then((res) => {
       examRoundOption.value = res.data.result;
-      console.log(examRoundOption.value);
+      // console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -599,13 +427,8 @@ const submit = async () => {
   };
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      dialogMessage(
+      dialogConfirm(
         $q,
-        "ยืนยันการบันทึกข้อมูล",
-        "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-        "info",
-        "ตกลง",
-        "public",
         () => {
           if (!orderId) {
             createListOrder(formdata);
@@ -614,13 +437,12 @@ const submit = async () => {
             updateOrder(formdata, orderIdString);
           }
         },
-        undefined
       );
     }
   });
 };
 const createListOrder = async (formData: Object) => {
-  // console.log(formData);
+  showLoader();
   await http
     .post(config.API.createOrder(), formData)
     .then((res) => {
@@ -639,7 +461,7 @@ const createListOrder = async (formData: Object) => {
 };
 
 const updateOrder = async (formData: Object, orderId: string) => {
-  // console.log(formData);
+  showLoader();
   await http
     .put(config.API.detailOrder(orderId), formData)
     .then((res) => {
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 2c83f6be2..12c4a3419 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -183,7 +183,7 @@ const props = defineProps({
 const next = () => props.next();
 const previous = () => props.previous();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+const { dialogMessageNotify, dialogConfirm, dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const route = useRoute();
 const $q = useQuasar();
@@ -306,15 +306,9 @@ const getData = async (id: string) => {
 // };
 
 const dialogDeleteData = async (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 };
 
@@ -442,14 +436,10 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  dialogMessage(
+  dialogConfirm(
     $q,
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    "info",
-    "ตกลง",
-    "public",
     async () => {
+      showLoader()
       await http
         .put(config.API.salaryOrder(personalId.value), modalData.value)
         .then((res: any) => {
@@ -463,9 +453,9 @@ const putSalary = async (salary: any) => {
         .finally(async () => {
           await conditionData();
           modal.value = false;
+          hideLoader()
         });
     },
-    undefined
   );
 };
 
@@ -514,20 +504,15 @@ const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
       if (result && selected.value.length !== 0) {
-        dialogMessage(
+        dialogConfirm(
           $q,
-          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          "info",
-          "ตกลง",
-          "public",
           () => {
             let data = [];
             data.push(...selected.value.map((e: any) => e.refRecordId));
-            // console.log(data);
             addlist(data);
           },
-          undefined
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
         );
 
       }
@@ -563,31 +548,18 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    dialogMessage(
+    dialogConfirm(
       $q,
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      "info",
-      "ตกลง",
-      "public",
       () => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         next();
       },
-      undefined
     );
 
   } else {
-    dialogMessage(
+    dialogMessageNotify(
       $q,
-      "ข้อความแจ้งเตือน",
       "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
     );
   }
 };
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index d95c3de90..3781bb3f9 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -343,7 +343,7 @@ const previous = () => props.previous();
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const route = useRoute();
 
@@ -598,22 +598,7 @@ const getClass = (val: boolean) => {
 };
 
 const clickClose = async () => {
-  //   if (editRow.value == true) {
-  //   dialogMessage(
-  //     $q,
-  //     "ข้อมูลมีการแก้ไข",
-  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
-  //     "mdi-help-circle-outline",
-  //     "ตกลง",
-  //     "orange",
-  //     () => (modal.value = false),
-  //     undefined
-  //   );
-  //   } else {
   modal.value = false;
-  //     next.value = false;
-  //     previous.value = false;
-  //   }
 };
 
 const clickAdd = async () => {
@@ -628,15 +613,9 @@ const clickAdd = async () => {
 };
 
 const clickDelete = (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 };
 
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 99e613d43..ece62438b 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -252,7 +252,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, dialogMessage } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -382,14 +382,8 @@ const save = () => {
   if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
-        // yay, models are correct
-        dialogMessage(
+        dialogConfirm(
           $q,
-          "ยืนยันการบันทึกข้อมูล",
-          "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-          "info",
-          "ตกลง",
-          "public",
           async () => {
             await putOrderData();
             await postfileOrder();
@@ -397,7 +391,6 @@ const save = () => {
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
           },
-          undefined
         );
 
       }
@@ -431,13 +424,8 @@ const postfileTailer = async () => {
   await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
-  dialogMessage(
+  dialogConfirm(
     $q,
-    "ยืนยันการออกคำสั่ง",
-    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
-    "info",
-    "ตกลง",
-    "public",
     async () => {
       await http
         .put(config.API.executeOrder(id))
@@ -448,7 +436,8 @@ const clickExecute = async (id: string) => {
           messageError($q, e);
         });
     },
-    undefined
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
   );
 };
 
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 2ae149e62..8a625357b 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -411,6 +411,77 @@ export const useCounterMixin = defineStore("mixin", () => {
       });
   };
 
+  //*** Dialog ***//
+  const dialogConfirm = (
+    q: any,
+    ok?: Function,
+    title?: string, // ถ้ามี cancel action ใส่เป็น null
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title && title != null ? title : "ยืนยันการบันทึก",
+        message:
+          desc && desc != null
+            ? desc
+            : "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        icon: "info",
+        color: "public",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
+
+  const dialogRemove = (q: any, ok?: Function, cancel?: Function) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: "ยืนยันการลบข้อมูล",
+        message: "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
+        icon: "delete",
+        color: "red",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
+
+  const dialogMessageNotify = (
+    q: any,
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: "ข้อความแจ้งเตือน",
+        message: desc && desc != null ? desc : "กรุณากรอกข้อมูลให้ครบ",
+        icon: "warning",
+        color: "orange",
+        textOk: "ตกลง",
+        onlycancel: true,
+      },
+    }).onCancel(() => {
+      if (cancel) cancel();
+    });
+  };
+  //*** END Dialog ***//
+
   const showLoader = () => {
     Loading.show({
       spinner: QSpinnerCube,
@@ -718,5 +789,9 @@ export const useCounterMixin = defineStore("mixin", () => {
     typeChangeName,
     statusLeave,
     modalWarning,
+    // common dialog
+    dialogConfirm,
+    dialogRemove,
+    dialogMessageNotify
   };
 });

From 265bc77553c46dda8b0c5d05668756d7e3012898 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 14 Aug 2023 16:45:23 +0700
Subject: [PATCH 4/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   1 +
 src/api/06_retirement/api.retirement.ts       |  39 +-
 .../components/Receive/receiveDetail2.vue     | 139 +++++
 .../components/Transfer/transferRegistry.vue  |   6 +-
 .../interface/response/Receive.ts             |  10 +
 src/modules/05_placement/router.ts            |   8 +-
 src/modules/05_placement/store.ts             |  12 +-
 .../components/resign/Resign.vue              | 549 +++++++++++++-----
 .../components/resign/ResignByid.vue          | 461 +++++++++++++--
 .../06_retirement/interface/response/Main.ts  |  37 +-
 src/modules/06_retirement/store.ts            |  24 +-
 11 files changed, 1022 insertions(+), 264 deletions(-)
 create mode 100644 src/modules/05_placement/components/Receive/receiveDetail2.vue
 create mode 100644 src/modules/05_placement/interface/response/Receive.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index fb6ec2ab0..ce1a69dc8 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -88,6 +88,7 @@ export default {
 
   //receive ระบบรับโอน
   receiveData: () => `${receive}`,
+  receiveReport: `${receive}/report`,
   receiveDataId: (id: string) => `${receive}/${id}`,
   receivePosition: (id: string) => `${receive}/position/${id}`,
 
diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 56df2a452..2b6c73a0e 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -1,25 +1,26 @@
 import env from "../index";
-const retirement = `${env.API_URI}/retirement`
-
+const retirement = `${env.API_URI}/retirement`;
 
 export default {
-    profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
-    profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
-    listRetire: (retireId: string) => `${retirement}/${retireId}`,
-    createnote: () => `${retirement}/edit`,
-    removeProfile: () => `${retirement}/remove`,
-    reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
-    retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
-    createProfile: () => `${retirement}/profile`,
+  profile: (type: string, year: string) =>
+    `${retirement}/profile/${type}/${year}`,
+  profileRetire: (retireProfileId: string) =>
+    `${retirement}/profile/${retireProfileId}`,
+  listRetire: (retireId: string) => `${retirement}/${retireId}`,
+  createnote: () => `${retirement}/edit`,
+  removeProfile: () => `${retirement}/remove`,
+  reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
+  retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
+  createProfile: () => `${retirement}/profile`,
 
-    //RetirementDeceased ถึงแก่กรรม
-    listDeceased: () => `${retirement}/deceased`,
-    detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
-
-    // RetirementResign ระบบลาออก
-    listResign: () => `${retirement}/resign`,
-    resingByid: (id: string) => `${retirement}/resign/${id}`,
-    resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
-    resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
+  //RetirementDeceased ถึงแก่กรรม
+  listDeceased: () => `${retirement}/deceased`,
+  detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
 
+  // RetirementResign ระบบลาออก
+  listResign: () => `${retirement}/resign`,
+  resignReport: `${retirement}/resign/report`,
+  resingByid: (id: string) => `${retirement}/resign/${id}`,
+  resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
+  resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 };
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
new file mode 100644
index 000000000..77c473d6d
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการรับโอนของ {{ title.fullname }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ title.fullname }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${paramsId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <!-- <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          /> -->
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ title.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ title.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ title.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const paramsId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveDataId(paramsId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+
+      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 81f8d5218..65ea2e171 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -489,9 +489,9 @@ const getData = async () => {
       responseData.value.salary = data.salary !== null ? data.salary : 0;
       responseData.value.status = data.status ?? "";
       responseData.value.avataPath = data.avataPath ?? "";
-      responseData.value.fullname = `${data.prefix ?? "-"} ${
-        data.firstName ?? "-"
-      } ${data.lastName ?? "-"}`;
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
 
       organizationPositionOld.value = data.organizationPositionOld ?? "";
       positionTypeOld.value = data.positionTypeOld ?? "";
diff --git a/src/modules/05_placement/interface/response/Receive.ts b/src/modules/05_placement/interface/response/Receive.ts
new file mode 100644
index 000000000..1c013c07d
--- /dev/null
+++ b/src/modules/05_placement/interface/response/Receive.ts
@@ -0,0 +1,10 @@
+import { type } from "os";
+
+interface ResponseTitle {
+  fullname: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionTypeOld: string;
+}
+
+export type { ResponseTitle };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 12cbb254e..6e845c966 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -38,9 +38,11 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-  const receiveDetail = () =>
+const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-  const ReceiveAdd = () =>
+const receiveDetail2 = () =>
+  import("@/modules/05_placement/components/Receive/receiveDetail2.vue");
+const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
 
 export default [
@@ -197,7 +199,7 @@ export default [
   {
     path: "/receive/:id",
     name: "receiveDetail",
-    component: receiveDetail,
+    component: receiveDetail2,
     meta: {
       Auth: true,
       Key: [6.3],
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 73c42cd6e..5f16b8424 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -316,17 +316,17 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
   const statusText = (val: string) => {
     switch (val) {
       case "WAITTING":
-        return "รออนุมัติ";
+        return "รอดำเนินการ";
       case "PENDING":
-        return "รออนุมัติ";
+        return "เลือกตำแหน่งแล้ว";
       case "APPROVE":
-        return "ผ่านการอนุมัติ";
+        return "อนุมัติ";
       case "REJECT":
-        return "ไม่ผ่านการอนุมัติ";
+        return "ไม่อนุมัติ";
       case "REPORT":
-        return "ส่งไปออกคำสั่ง";
+        return "ส่งรายชื่อไปออกคำสั่ง";
       case "DONE":
-        return "ออกคำสั่งสำเร็จ";
+        return "ออกคำสั่งเสร็จแล้ว";
 
       default:
         return "-";
diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index 0e76fbd8e..9f0b9664d 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -1,19 +1,37 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+
+const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
-const $q = useQuasar(); //ใช้ noti quasar
+const RetirementData = useRetirementDataStore();
 
-const rows = ref<any>([]);
+const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
+const { statusText } = RetirementData;
+
+const rows = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "prefix",
     align: "left",
@@ -22,6 +40,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "prefix",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -31,73 +51,211 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
-    name: "positionType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
+    name: "positionTypeOld",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "position",
+    field: "positionTypeOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionLevel",
+    name: "positionLevelOld",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "positionLevel",
+    field: "positionLevelOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionExecutive",
+    name: "positionNumberOld",
     align: "left",
-    label: "ตำแหน่งทางการบริหาร",
+    label: "เลขที่",
     sortable: true,
-    field: "positionExecutive",
+    field: "positionNumberOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
+  "no",
   "prefix",
   "fullname",
-  "positionType",
-  "position",
-  "positionLevel",
-  "positionExecutive",
-  "oc",
-  "status",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
 ]);
 
+const filters = ref<ResponseItems[]>([]);
+const rows2 = ref<ResponseItems[]>([]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "positionTypeOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionTypeOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelOld",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionNumberOld",
+    align: "left",
+    label: "เลขที่",
+    sortable: true,
+    field: "positionNumberOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "prefix",
+  "fullname",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
+]);
+
+const modal = ref<boolean>(false);
+const filterKeyword2 = ref<string>("");
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const selected = ref<ResponseItems[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseItems) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+
 onMounted(async () => {
   await fecthlist();
 });
@@ -107,23 +265,37 @@ const fecthlist = async () => {
   await http
     .get(config.API.listResign())
     .then((res: any) => {
-      console.log(res);
-      let data = res.data.result;
-      rows.value = data.map((e: any) => ({
-        personalId: e.id,
-        profileId: e.profileId,
-        prefix: e.prefix,
-        fullname: e.firstName + "   " + e.lastName,
-        positionType: e.positionType,
-        position: e.positionLine,
-        positionLevel: e.positionLevel,
-        positionExecutive: e.positionExecutive,
-        oc: e.organizationOrganization,
-        status: e.status,
-      }));
+      const data = res.data.result;
+      let list: ResponseItems[] = [];
+
+      data.map((r: ResponseItems) => {
+        list.push({
+          activeDate: new Date(),
+          createdAt: new Date(),
+          firstName: r.firstName ?? "",
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          lastName: r.lastName ?? "",
+          location: r.location ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          prefix: r.prefix ?? "",
+          profileId: r.profileId ?? "",
+          reason: r.reason ?? "",
+          salary: r.salary ? r.salary : 0,
+          sendDate: new Date(),
+          status: r.status ?? "",
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
+        });
+      });
+
+      rows.value = list;
+      filters.value = list;
     })
     .catch((e: any) => {
-      console.log(e);
       messageError($q, e);
     })
     .finally(() => {
@@ -131,28 +303,29 @@ const fecthlist = async () => {
     });
 };
 
-const paging = ref<boolean>(true);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
+const saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
 
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
+  showLoader();
+  await http
+    .post(config.API.resignReport, body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งลาออกสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fecthlist();
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
@@ -161,6 +334,17 @@ const resetFilter = () => {
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
+          <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
+          </q-btn>
+
           <q-space />
 
           <q-input
@@ -201,20 +385,12 @@ const resetFilter = () => {
           />
         </div>
         <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
+          <d-table
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="fullname"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
+            row-key="id"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -227,107 +403,158 @@ const resetFilter = () => {
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="
-                  router.push(`/retirement/resign/${props.row.personalId}`)
-                "
+                @click="router.push(`/retirement/resign/${props.row.id}`)"
               >
-                <!-- <q-td key="no" :props="props">
+                <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
-                </q-td> -->
+                </q-td>
                 <q-td key="prefix" :props="props">
                   {{ props.row.prefix }}
                 </q-td>
                 <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="positionType" :props="props">
-                  {{ props.row.positionType }}
+                <q-td key="positionTypeOld" :props="props">
+                  {{ props.row.positionTypeOld }}
                 </q-td>
-                <q-td key="position" :props="props">
-                  {{ props.row.position }}
+                <q-td key="positionLevelOld" :props="props">
+                  {{ props.row.positionLevelOld }}
                 </q-td>
-                <q-td key="positionLevel" :props="props">
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td key="positionExecutive" :props="props">
-                  {{ props.row.positionExecutive }}
-                </q-td>
-                <q-td key="oc" :props="props">
-                  {{ props.row.oc }}
+                <q-td key="positionNumberOld" :props="props">
+                  {{ props.row.positionNumberOld }}
                 </q-td>
 
-                <q-td key="status" :props="props">
-                  <q-icon
-                    size="20px"
-                    v-if="props.row.status == 'PENDING'"
-                    name="mdi-timer-sand"
-                    color="deep-orange"
-                  >
-                    <q-tooltip>รอดำเนินการ</q-tooltip>
-                  </q-icon>
-                  <q-icon
-                    size="20px"
-                    v-else-if="props.row.status == 'APPROVE'"
-                    name="mdi-check"
-                    color="teal"
-                  >
-                    <q-tooltip>เสร็จสิ้น</q-tooltip>
-                  </q-icon>
-                  <q-icon size="20px" v-else name="mdi-close" color="red">
-                    <q-tooltip>ยับยั้ง</q-tooltip>
-                  </q-icon>
-
-                  <!-- {{ props.row.status }} -->
+                <q-td key="organizationPositionOld" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                  </div>
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
+          </d-table>
         </div>
       </div>
     </div>
   </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          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: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 key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="prefix" :props="props">
+                {{ props.row.prefix }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="positionTypeOld" :props="props">
+                {{ props.row.positionTypeOld }}
+              </q-td>
+              <q-td key="positionLevelOld" :props="props">
+                {{ props.row.positionLevelOld }}
+              </q-td>
+              <q-td key="positionNumberOld" :props="props">
+                {{ props.row.positionNumberOld }}
+              </q-td>
+
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
-<style scoped lang="scss">
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 87822d692..a4a441b9a 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -38,20 +38,24 @@
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">{{ dataDetail.positionLine }}</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.positionTypeOld }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-2 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">{{ dataDetail.positionLevel }}</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.positionLevelOld }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
             <div class="col-12 text-detail">
-              {{ dataDetail.organizationOrganization }}
+              {{ dataDetail.organizationPositionOld }}
             </div>
           </div>
         </div>
@@ -59,20 +63,7 @@
           <div class="col-12">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
-              <q-icon
-                size="20px"
-                v-if="dataDetail.status == 'PENDING'"
-                name="mdi-timer-sand"
-                color="deep-orange"
-              />
-              <q-icon
-                size="20px"
-                v-else-if="dataDetail.status == 'APPROVE'"
-                name="mdi-check"
-                color="teal"
-              />
-              <q-icon size="20px" v-else name="mdi-close" color="red" />
-              {{ statusName(dataDetail.status) }}
+              {{ statusText(dataDetail.status) }}
             </div>
           </div>
         </div>
@@ -140,6 +131,268 @@
     </div>
   </q-card>
 
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลรายละเอียดการลาออก
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salary"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+                :label="`${'เงินเดือน'}`"
+                type="number"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-4 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="location"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'สถานที่ยื่นขอลาออกจากราชการ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-4 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-xs-4 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateLeave"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      dateLeave !== null ? date2Thai(dateLeave) : null
+                    "
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือก วันที่ขอลาออกจากราชการ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${' วันที่ขอลาออกจากราชการ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ '}`,
+              ]"
+              hide-bottom-space
+              :label="`${'เหตุผลที่ลาออกจากราชการ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+
   <!-- <q-dialog v-model="modalPass" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
@@ -208,30 +461,87 @@ import { ref, onMounted } from "vue";
 // import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 // import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const router = useRouter();
-const route = useRoute();
-const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
-const $q = useQuasar();
-const id = ref<string>(route.params.id.toString());
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
 
-const dataDetail = ref<any>([]);
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const RetirementData = useRetirementDataStore();
+
+const {
+  messageError,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
+const { statusText } = RetirementData;
+
+const id = ref<string>(route.params.id.toString());
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+const dataDetail = ref<ResponseItems>({
+  activeDate: new Date(),
+  createdAt: new Date(),
+  firstName: "",
+  id: "",
+  isActive: true,
+  lastName: "",
+  location: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  prefix: "",
+  profileId: "",
+  reason: "",
+  salary: 0,
+  sendDate: new Date(),
+  status: "",
+  statustext: "",
+  fullname: "",
+});
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const date = ref<Date | null>(null);
+const dateLeave = ref<Date | null>(null);
+const reason = ref<string>("");
+const location = ref<string>("");
 
 // const modalPass = ref<boolean>(false);
 // const modalPassNot = ref<boolean>(false);
 onMounted(() => {
   fetchData(id.value);
 });
+
 const fetchData = async (id: string) => {
   showLoader();
   await http
     .get(config.API.resingByid(id))
     .then((res: any) => {
-      dataDetail.value = res.data.result;
-      // console.log(dataDetail.value);
+      const data = res.data.result;
+      dataDetail.value = data;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ? data.salary : 0;
+      date.value = data.sendDate ? new Date(data.sendDate) : null;
+      dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+      reason.value = data.reason ?? "";
+      location.value = data.location ?? "";
     })
     .catch((e) => {
       console.log(e);
@@ -241,6 +551,7 @@ const fetchData = async (id: string) => {
       hideLoader();
     });
 };
+
 const popUp = (action: "pass" | "passNot") => {
   if (action === "pass") {
     $q.dialog({
@@ -268,6 +579,7 @@ const popUp = (action: "pass" | "passNot") => {
     });
   }
 };
+
 const confirmpopUp = async () => {
   await http
     .get(config.API.resignConfirm(id.value))
@@ -283,6 +595,7 @@ const confirmpopUp = async () => {
       fetchData(id.value);
     });
 };
+
 const rejectpopUp = async () => {
   console.log("ยกเลิก");
   await http
@@ -300,16 +613,59 @@ const rejectpopUp = async () => {
 const redirectToRegistry = (id: string) => {
   router.push(`/registry/${id}`);
 };
-const statusName = (val: string) => {
-  switch (val) {
-    case "PENDING":
-      return "รอดำเนินการ";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ยับยั้ง";
+
+const conditionSave = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลรายละเอียดการลาออก",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
   }
 };
+
+const saveData = async () => {
+  const formData = new FormData();
+  const send = date.value !== null ? new Date(date.value).toUTCString() : "";
+  const activeDate =
+    dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
+  formData.append("Location", location.value);
+  formData.append("SendDate", send);
+  formData.append("ActiveDate", activeDate);
+  formData.append("Reason", reason.value);
+  formData.append("OrganizationPositionOld", organizationPositionOld.value);
+  formData.append("PositionTypeOld", positionTypeOld.value);
+  formData.append("PositionLevelOld", positionLevelOld.value);
+  formData.append("PositionNumberOld", posNo.value);
+  formData.append("AmountOld", salary.value.toString());
+  salary;
+  showLoader();
+  await http
+    .put(config.API.resingByid(id.value), formData)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData(id.value);
+      hideLoader();
+    });
+};
+
 // const clickClose = () => {
 //   userNote.value = "";
 //   modalPass.value = false;
@@ -353,6 +709,13 @@ const statusName = (val: string) => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <style lang="scss" scope>
 .q-img {
@@ -367,34 +730,4 @@ const statusName = (val: string) => {
 .text-detail {
   font-weight: 500;
 }
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
 </style>
diff --git a/src/modules/06_retirement/interface/response/Main.ts b/src/modules/06_retirement/interface/response/Main.ts
index 4bc41e0f6..b76d87b7b 100644
--- a/src/modules/06_retirement/interface/response/Main.ts
+++ b/src/modules/06_retirement/interface/response/Main.ts
@@ -1,9 +1,32 @@
 interface resMain {
-    id: string;
-    createdAt: Date;
-    year: string;
-    round: number;
-    total: number;
-    typeReport: String;
+  id: string;
+  createdAt: Date;
+  year: string;
+  round: number;
+  total: number;
+  typeReport: String;
 }
-export type { resMain };
+
+interface ResponseItems {
+  activeDate: Date;
+  createdAt: Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  location: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  prefix: string;
+  profileId: string;
+  reason: string;
+  salary: number;
+  sendDate: Date;
+  status: string;
+  statustext: string;
+  fullname: string;
+}
+
+export type { resMain, ResponseItems };
diff --git a/src/modules/06_retirement/store.ts b/src/modules/06_retirement/store.ts
index aa81242e5..0a91a5198 100644
--- a/src/modules/06_retirement/store.ts
+++ b/src/modules/06_retirement/store.ts
@@ -1,5 +1,27 @@
 import { defineStore } from "pinia";
 
 export const useRetirementDataStore = defineStore("retirement", () => {
-  return {};
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รอดำเนินการ";
+      case "PENDING":
+        return "เลือกตำแหน่งแล้ว";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "REPORT":
+        return "ส่งรายชื่อไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งเสร็จแล้ว";
+
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
 });