From 1fc820eb3d412d5f07eac3afd43ca76e674bc0f1 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 18 Aug 2023 15:15:43 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?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

---
 .../probation/FormEvaluation/Footer.vue       |  83 ---
 .../FormEvaluation/FormSaveResult.vue         |  47 +-
 .../probation/FormEvaluation/Header.vue       |  20 -
 .../components/probation/form/formEva1.vue    | 472 ------------------
 .../components/probation/form/formEva2.vue    | 289 -----------
 .../components/probation/form/formEva3.vue    | 130 -----
 .../probation/form/formEvaOrder.vue           |  83 ---
 .../probation/form/formEvacomment.vue         |  45 --
 .../components/probation/tabs/tabs2.vue       | 116 -----
 .../components/probation/tabs/tabs3.vue       | 116 -----
 .../components/probation/tabs/tabs4.vue       | 116 -----
 11 files changed, 42 insertions(+), 1475 deletions(-)
 delete mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Footer.vue
 delete mode 100644 src/modules/05_placement/components/probation/form/formEva1.vue
 delete mode 100644 src/modules/05_placement/components/probation/form/formEva2.vue
 delete mode 100644 src/modules/05_placement/components/probation/form/formEva3.vue
 delete mode 100644 src/modules/05_placement/components/probation/form/formEvaOrder.vue
 delete mode 100644 src/modules/05_placement/components/probation/form/formEvacomment.vue
 delete mode 100644 src/modules/05_placement/components/probation/tabs/tabs2.vue
 delete mode 100644 src/modules/05_placement/components/probation/tabs/tabs3.vue
 delete mode 100644 src/modules/05_placement/components/probation/tabs/tabs4.vue

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Footer.vue b/src/modules/05_placement/components/probation/FormEvaluation/Footer.vue
deleted file mode 100644
index 20f98ed57..000000000
--- a/src/modules/05_placement/components/probation/FormEvaluation/Footer.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top2 row items-center">
-        ผู้บังคับบัญชาผู้มอบหมายงาน
-      </div>
-      <div class="col-12 row q-col-gutter-md">
-        <q-select
-          class="col-xs-12 col-sm-8"
-          dense
-          v-model="Autherise"
-          outlined
-          :options="option"
-          label="ผู้บังคับบัญชา"
-        />
-        <div class="col-xs-12 col-sm-4">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAutherise"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker col-3"
-                :model-value="
-                  dateAutherise != null ? date2Thai(dateAutherise) : null
-                "
-                :label="`${'ลงวันที่'}`"
-                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-const Autherise = ref<any>(null);
-
-const dateAutherise = ref<any>(new Date());
-
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
-</script>
-<style lang="scss" scoped>
-.text-top2 {
-  font-weight: 500;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 15dde4bc2..6ae8a75d0 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -41,7 +41,7 @@ const props = defineProps({
 });
 
 onMounted(async () => {
-  console.log("tab===>", props.tab);
+  // console.log("tab===>", props.tab);
 
   if (props.tab !== undefined) {
     round.value = props.tab.charAt(4);
@@ -50,6 +50,7 @@ onMounted(async () => {
   }
   await fecthFormdata(assignId.value);
 });
+
 const fecthFormdata = async (id: string) => {
   await http
     .get(config.API.formevaluateRecord(id))
@@ -64,13 +65,14 @@ const fecthFormdata = async (id: string) => {
       option.value.push(res.data.data.director);
       Autherise.value = res.data.data.director.name;
       list1_1.value = res.data.data.assign_output;
-      evaluate_expenct_level.value = res.data.data.assign_output.map((e) => ({
+      evaluate_expenct_level.value = res.data.data.assign_output.map((e: any) => ({
         id: e.id,
         labal: e.output_desc,
       }));
-      evaluate_ouptut.value = res.data.data.assign_output.map((e) => ({
+      evaluate_ouptut.value = res.data.data.assign_output.map((e: any) => ({
         id: e.id,
       }));
+
       checkArray.value = list1_1.value.length;
 
       console.log(res.data.data.evaluate_no, round.value);
@@ -87,7 +89,7 @@ const fecthFormRound = async (id: string, no: string) => {
   showLoader();
   await http
     .get(config.API.formevaluateround(id, no))
-    .then((res: any) => {
+    .then(async(res: any) => {
       // console.log(res);
       let data = res.data.data.evaluate;
       start_date.value = data.date_start;
@@ -133,6 +135,14 @@ const fecthFormRound = async (id: string, no: string) => {
       ) {
         etc2.value = true;
       }
+
+      if (data.achievements) {
+        await data.achievements.map((e: any, index: number) => {
+          evaluate_expenct_level.value[index].level = e.evaluate_expect_level
+          evaluate_ouptut.value[index].text = e.evaluate_output_desc
+          evaluate_ouptut.value[index].level = e.evaluate_output_level
+        });
+      }
       status.value = false;
     })
     .catch((e) => {
@@ -405,7 +415,7 @@ const saveformdata = async (data: any) => {
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่ " + round }}</span>
         ระหว่างวันที่
         <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
@@ -447,6 +457,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -498,6 +509,7 @@ const saveformdata = async (data: any) => {
                 hide-bottom-space
                 :row="1"
                 :rules="evaluate_ouptutRules"
+                :disable="!status"
               />
             </q-item-section>
             <q-item-section side>
@@ -509,6 +521,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -551,6 +564,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -590,6 +604,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -629,6 +644,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -668,6 +684,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -707,6 +724,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -782,6 +800,7 @@ const saveformdata = async (data: any) => {
                   @click="
                     (achievement_other.text = ''), (achievement_other.level = 0)
                   "
+                  :disable="!status"
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -805,6 +824,7 @@ const saveformdata = async (data: any) => {
                   :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                   ]"
+                  :disable="!status"
                 />
               </q-item-label>
             </q-item-section>
@@ -816,6 +836,7 @@ const saveformdata = async (data: any) => {
                 color="grey"
                 :color-selected="ratingColors"
                 label="ระดับการประเมินพฤติกรรม"
+                :disable="!status"
               >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -857,6 +878,7 @@ const saveformdata = async (data: any) => {
           :row="5"
           :rules="achievement_strengthRules"
           ref="achievement_strengthRef"
+          :disable="!status"
         />
       </div>
       <div class="col-12 row">
@@ -876,6 +898,7 @@ const saveformdata = async (data: any) => {
           :row="5"
           :rules="achievement_inproveRules"
           ref="achievement_inproveRef"
+          :disable="!status"
         />
       </div>
     </div>
@@ -911,6 +934,7 @@ const saveformdata = async (data: any) => {
                   color="grey"
                   :color-selected="ratingColors"
                   label="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
                 >
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -958,6 +982,7 @@ const saveformdata = async (data: any) => {
                   color="grey"
                   :color-selected="ratingColors"
                   label="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
                 >
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -1005,6 +1030,7 @@ const saveformdata = async (data: any) => {
                   color="grey"
                   :color-selected="ratingColors"
                   label="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
                 >
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -1037,6 +1063,7 @@ const saveformdata = async (data: any) => {
             dense
             v-model="etc2"
             @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+            :disable="!status"
           />
         </div>
         <q-card
@@ -1061,6 +1088,7 @@ const saveformdata = async (data: any) => {
                     :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                     ]"
+                    :disable="!status"
                   />
                 </q-item-label>
               </q-item-section>
@@ -1072,6 +1100,7 @@ const saveformdata = async (data: any) => {
                   color="grey"
                   :color-selected="ratingColors"
                   label="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
                 >
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@@ -1113,6 +1142,7 @@ const saveformdata = async (data: any) => {
             :row="5"
             :rules="behavio_strengthRules"
             ref="behavio_strengthRef"
+            :disable="!status"
           />
         </div>
         <div class="col-12 row">
@@ -1132,6 +1162,7 @@ const saveformdata = async (data: any) => {
             :row="5"
             :rules="behavio_inproveRules"
             ref="behavio_inproveRef"
+            :disable="!status"
           />
         </div>
       </div>
@@ -1163,6 +1194,7 @@ const saveformdata = async (data: any) => {
                     v-model="orientation"
                     val="1"
                     label="ดำเนินการเเล้ว"
+                    :disable="!status"
                   />
                   <q-radio
                     checked-icon="task_alt"
@@ -1170,6 +1202,7 @@ const saveformdata = async (data: any) => {
                     v-model="orientation"
                     val="0"
                     label=" ยังไม่ได้ดำเนินการ"
+                    :disable="!status"
                   />
                 </div>
               </q-item-section>
@@ -1194,6 +1227,7 @@ const saveformdata = async (data: any) => {
                     v-model="self_learning"
                     val="0"
                     label=" ยังไม่ได้ดำเนินการ"
+                    :disable="!status"
                   />
                 </div>
               </q-item-section>
@@ -1218,6 +1252,7 @@ const saveformdata = async (data: any) => {
                     v-model="training_seminar"
                     val="0"
                     label=" ยังไม่ได้ดำเนินการ"
+                    :disable="!status"
                   />
                 </div>
               </q-item-section>
@@ -1237,6 +1272,7 @@ const saveformdata = async (data: any) => {
                     v-model="other_training"
                     val="1"
                     label="ดำเนินการเเล้ว"
+                    :disable="!status"
                   />
                   <q-radio
                     checked-icon="task_alt"
@@ -1297,6 +1333,7 @@ const saveformdata = async (data: any) => {
                   "
                   :label="`${'ลงวันที่'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  :disable="!status"
                 >
                   <template v-slot:prepend>
                     <q-icon
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index 3052c883c..a81d5f0fd 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -75,26 +75,6 @@ const nextPage = () => {
               </q-menu>
             </q-btn>
           </q-tab>
-
-          <!-- <q-tab name="save3" label="ครั้งที่ 3" />
-            <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
-                :color="tab !== 'save3' ? 'grey' : 'add'">
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-                <q-menu>
-                    <q-list style="min-width: 150px">
-                        <q-item clickable v-close-popup>
-                            <q-item-section avatar><q-icon color="red"
-                                    name="mdi-file-pdf" /></q-item-section>
-                            <q-item-section>ไฟล์ .PDF</q-item-section>
-                        </q-item>
-                        <q-item clickable v-close-popup>
-                            <q-item-section avatar><q-icon color="blue"
-                                    name="mdi-file-word" /></q-item-section>
-                            <q-item-section>ไฟล์ .docx</q-item-section>
-                        </q-item>
-                    </q-list>
-                </q-menu>
-            </q-btn> -->
         </q-tabs>
         <div>
           <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
diff --git a/src/modules/05_placement/components/probation/form/formEva1.vue b/src/modules/05_placement/components/probation/form/formEva1.vue
deleted file mode 100644
index c5f777842..000000000
--- a/src/modules/05_placement/components/probation/form/formEva1.vue
+++ /dev/null
@@ -1,472 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
-      </div>
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
-      </div>
-      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
-        1.ผลผลิตของงานที่คาดหวัง
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list1_1" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
-      </div>
-      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
-        1.ผลผลิตของงานที่เกิดขึ้น
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list1_2" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
-              <q-input
-                outlined
-                dense
-                v-model="text2_1"
-                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-                lazy-rules
-                type="textarea"
-                label="ผลผลิตของงานที่เกิดขึ้นจริง"
-                hide-bottom-space
-                :row="1"
-              />
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model1"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.2 ความรู้ความสามารถ
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>ความรู้ความสามารถ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model1_2"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.3 ทักษะ
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>ทักษะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model1_3"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.4 สมรรถนะ
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>สมรรถนะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model1_4"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.5 ความสามารถในการเรียนรู้งาน
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model1_5"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label
-                >ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
-              >
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model1_6"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.7 อื่นๆ
-        <q-checkbox class="q-ml-sm" dense v-model="etc" />
-      </div>
-      <q-card
-        v-if="etc"
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-input
-                  v-model="etc_text"
-                  label="กรอกอื่นๆ"
-                  dense
-                  lazy-rules
-                  autogrow
-                  hide-bottom-space
-                  outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
-                />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="modelEtc"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <FormComment />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-import { useQuasar } from "quasar";
-
-import { useProbationDataStore } from "@/modules/05_placement/store";
-
-const FormComment = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
-    )
-);
-
-const $q = useQuasar();
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
-];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
-</script>
-
-<style lang="scss" scoped>
-.text-top2 {
-  font-weight: 500;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.q-rating__icon {
-  text-shadow: transparent !important;
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/form/formEva2.vue b/src/modules/05_placement/components/probation/form/formEva2.vue
deleted file mode 100644
index 0b4771475..000000000
--- a/src/modules/05_placement/components/probation/form/formEva2.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-      </div>
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.1 ความประพฤติ
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list2_1" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.2 ความมีคุณธรรมจริยธรรม
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list2_2" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.3 การรักษาวินัย
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list2_3" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.4 อื่นๆ
-        <q-checkbox class="q-ml-sm" dense v-model="etc_4" />
-      </div>
-      <q-card
-        v-if="etc_4"
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-input
-                  v-model="etc_text2"
-                  label="กรอกอื่นๆ"
-                  dense
-                  lazy-rules
-                  autogrow
-                  hide-bottom-space
-                  outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
-                />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="modelEtc"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <FormComment />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-import { useQuasar } from "quasar";
-
-import { useProbationDataStore } from "@/modules/05_placement/store";
-const FormComment = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
-    )
-);
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list2_1 = [
-  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
-  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
-  {
-    id: "3",
-    label:
-      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
-  },
-  {
-    id: "4",
-    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
-  },
-];
-const list2_2 = [
-  {
-    id: "1",
-    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
-  },
-  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
-  {
-    id: "3",
-    label:
-      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
-  },
-];
-
-const list2_3 = [
-  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
-  {
-    id: "2",
-    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
-  },
-  {
-    id: "3",
-    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
-  },
-  {
-    id: "4",
-    label:
-      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
-  },
-  {
-    id: "5",
-    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
-  },
-];
-
-const etc_text2 = ref<any>(null);
-const modelEtc = ref<any>(0);
-const etc_4 = ref<any>(false);
-const model = ref<any>(0);
-</script>
-<style lang="scss" scoped>
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.q-rating__icon {
-  text-shadow: transparent !important;
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/form/formEva3.vue b/src/modules/05_placement/components/probation/form/formEva3.vue
deleted file mode 100644
index e368f2dc6..000000000
--- a/src/modules/05_placement/components/probation/form/formEva3.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row justify-center">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>1. การปฐมนิเทศ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_1"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_1"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" />
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_2"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_2"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" />
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_3"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_3"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" />
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label
-                >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
-              >
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_4"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_4"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-const radio_1 = ref<any>(null);
-const radio_2 = ref<any>(null);
-const radio_3 = ref<any>(null);
-const radio_4 = ref<any>(null);
-</script>
-
-<style lang="scss" scoped>
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/form/formEvaOrder.vue b/src/modules/05_placement/components/probation/form/formEvaOrder.vue
deleted file mode 100644
index 2a0c7f662..000000000
--- a/src/modules/05_placement/components/probation/form/formEvaOrder.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top2 row items-center">
-        ผู้บังคับบัญชาผู้มอบหมายงาน
-      </div>
-      <div class="col-12 row q-col-gutter-md">
-        <q-select
-          class="col-xs-12 col-sm-8"
-          dense
-          v-model="Autherise"
-          outlined
-          :options="option"
-          label="ผู้บังคับบัญชา"
-        />
-        <div class="col-xs-12 col-sm-4">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAutherise"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker col-3"
-                :model-value="
-                  dateAutherise != null ? date2Thai(dateAutherise) : null
-                "
-                :label="`${'ลงวันที่'}`"
-                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-const Autherise = ref<any>(null);
-
-const dateAutherise = ref<any>(new Date());
-
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
-</script>
-<style lang="scss" scoped>
-.text-top2 {
-  font-weight: 500;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/form/formEvacomment.vue b/src/modules/05_placement/components/probation/form/formEvacomment.vue
deleted file mode 100644
index 5dc58496c..000000000
--- a/src/modules/05_placement/components/probation/form/formEvacomment.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        จุดเด่น (ไม่เกิน 5 บรรทัด)
-      </div>
-      <q-input
-        outlined
-        dense
-        v-model="text2_1"
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-        lazy-rules
-        type="textarea"
-        label="กรอกจุดเด่น"
-        hide-bottom-space
-        :row="5"
-        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-      />
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
-      </div>
-      <q-input
-        outlined
-        dense
-        v-model="text2_2"
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-        lazy-rules
-        type="textarea"
-        hide-bottom-space
-        label="กรอกสิ่งที่ควรปรับปรุง"
-        :row="5"
-        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-const text2_1 = ref<string>("");
-const text2_2 = ref<string>("");
-</script>
diff --git a/src/modules/05_placement/components/probation/tabs/tabs2.vue b/src/modules/05_placement/components/probation/tabs/tabs2.vue
deleted file mode 100644
index 60ed911ee..000000000
--- a/src/modules/05_placement/components/probation/tabs/tabs2.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <q-header class="bg-grey-1">
-    <div class="bg-grey-1">
-      <div class="col-12 row q-gutter-x-md items-center">
-        <q-tabs
-          dense
-          v-model="tab"
-          active-class="text-primary text-weight-medium"
-          indicator-color="grey-1"
-          class="text-grey-7"
-        >
-          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tab !== 'save1'"
-            :color="tab !== 'save1' ? 'grey' : 'add'"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .docx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-
-          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tab !== 'save2'"
-            :color="tab !== 'save2' ? 'grey' : 'add'"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .docx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
-                        <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
-                            :color="tab !== 'save3' ? 'grey' : 'add'">
-                            <q-tooltip>ดาวน์โหลด</q-tooltip>
-                            <q-menu>
-                                <q-list style="min-width: 150px">
-                                    <q-item clickable v-close-popup>
-                                        <q-item-section avatar><q-icon color="red"
-                                                name="mdi-file-pdf" /></q-item-section>
-                                        <q-item-section>ไฟล์ .PDF</q-item-section>
-                                    </q-item>
-                                    <q-item clickable v-close-popup>
-                                        <q-item-section avatar><q-icon color="blue"
-                                                name="mdi-file-word" /></q-item-section>
-                                        <q-item-section>ไฟล์ .docx</q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-menu>
-                        </q-btn> -->
-        </q-tabs>
-        <div>
-          <q-btn color="blue" flat dense icon="mdi-plus">
-            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
-          </q-btn>
-        </div>
-      </div>
-      <q-separator />
-    </div>
-  </q-header>
-
-  <q-page-container>
-    <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="save1">
-        <Form />
-      </q-tab-panel>
-
-      <q-tab-panel name="save2">
-        <Form />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-page-container>
-</template>
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-const Form = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
-);
-const tab = ref<string>("save1");
-</script>
diff --git a/src/modules/05_placement/components/probation/tabs/tabs3.vue b/src/modules/05_placement/components/probation/tabs/tabs3.vue
deleted file mode 100644
index 62cebf32c..000000000
--- a/src/modules/05_placement/components/probation/tabs/tabs3.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <q-header class="bg-grey-1">
-    <div class="bg-grey-1">
-      <div class="col-12 row q-gutter-x-md items-center">
-        <q-tabs
-          dense
-          v-model="tab"
-          active-class="text-primary text-weight-medium"
-          indicator-color="grey-1"
-          class="text-grey-7"
-        >
-          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tab !== 'save1'"
-            :color="tab !== 'save1' ? 'grey' : 'add'"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .docx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-
-          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tab !== 'save2'"
-            :color="tab !== 'save2' ? 'grey' : 'add'"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .docx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
-                          <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
-                              :color="tab !== 'save3' ? 'grey' : 'add'">
-                              <q-tooltip>ดาวน์โหลด</q-tooltip>
-                              <q-menu>
-                                  <q-list style="min-width: 150px">
-                                      <q-item clickable v-close-popup>
-                                          <q-item-section avatar><q-icon color="red"
-                                                  name="mdi-file-pdf" /></q-item-section>
-                                          <q-item-section>ไฟล์ .PDF</q-item-section>
-                                      </q-item>
-                                      <q-item clickable v-close-popup>
-                                          <q-item-section avatar><q-icon color="blue"
-                                                  name="mdi-file-word" /></q-item-section>
-                                          <q-item-section>ไฟล์ .docx</q-item-section>
-                                      </q-item>
-                                  </q-list>
-                              </q-menu>
-                          </q-btn> -->
-        </q-tabs>
-        <div>
-          <q-btn color="blue" flat dense icon="mdi-plus">
-            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
-          </q-btn>
-        </div>
-      </div>
-      <q-separator />
-    </div>
-  </q-header>
-
-  <q-page-container>
-    <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="save1">
-        <Form />
-      </q-tab-panel>
-
-      <q-tab-panel name="save2">
-        <Form />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-page-container>
-</template>
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-const Form = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
-);
-const tab = ref<string>("save1");
-</script>
diff --git a/src/modules/05_placement/components/probation/tabs/tabs4.vue b/src/modules/05_placement/components/probation/tabs/tabs4.vue
deleted file mode 100644
index 62cebf32c..000000000
--- a/src/modules/05_placement/components/probation/tabs/tabs4.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <q-header class="bg-grey-1">
-    <div class="bg-grey-1">
-      <div class="col-12 row q-gutter-x-md items-center">
-        <q-tabs
-          dense
-          v-model="tab"
-          active-class="text-primary text-weight-medium"
-          indicator-color="grey-1"
-          class="text-grey-7"
-        >
-          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tab !== 'save1'"
-            :color="tab !== 'save1' ? 'grey' : 'add'"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .docx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-
-          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tab !== 'save2'"
-            :color="tab !== 'save2' ? 'grey' : 'add'"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .docx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
-                          <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
-                              :color="tab !== 'save3' ? 'grey' : 'add'">
-                              <q-tooltip>ดาวน์โหลด</q-tooltip>
-                              <q-menu>
-                                  <q-list style="min-width: 150px">
-                                      <q-item clickable v-close-popup>
-                                          <q-item-section avatar><q-icon color="red"
-                                                  name="mdi-file-pdf" /></q-item-section>
-                                          <q-item-section>ไฟล์ .PDF</q-item-section>
-                                      </q-item>
-                                      <q-item clickable v-close-popup>
-                                          <q-item-section avatar><q-icon color="blue"
-                                                  name="mdi-file-word" /></q-item-section>
-                                          <q-item-section>ไฟล์ .docx</q-item-section>
-                                      </q-item>
-                                  </q-list>
-                              </q-menu>
-                          </q-btn> -->
-        </q-tabs>
-        <div>
-          <q-btn color="blue" flat dense icon="mdi-plus">
-            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
-          </q-btn>
-        </div>
-      </div>
-      <q-separator />
-    </div>
-  </q-header>
-
-  <q-page-container>
-    <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="save1">
-        <Form />
-      </q-tab-panel>
-
-      <q-tab-panel name="save2">
-        <Form />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-page-container>
-</template>
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-const Form = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
-);
-const tab = ref<string>("save1");
-</script>

From 23dcc41f5944712af10b454a23b62a9d71a6e6cb Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 18 Aug 2023 15:29:21 +0700
Subject: [PATCH 2/3] =?UTF-8?q?change=20layout=20menu=20=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/probation/MainDetail.vue        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 8ad5c3a0f..b5059231d 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -76,7 +76,7 @@ const activeTab = ref<string>("tab1");
               </q-item-section> -->
 
               <q-item-section>
-                แบบประเมินผล (ผู้บังคับบัญชา)
+                แบบประเมินผล<br/>(ผู้บังคับบัญชา)
               </q-item-section>
             </q-item>
 
@@ -87,7 +87,7 @@ const activeTab = ref<string>("tab1");
               </q-item-section> -->
 
               <q-item-section>
-                แบบประเมินผล (คณะกรรมการ)
+                แบบประเมินผล<br/>(คณะกรรมการ)
               </q-item-section>
             </q-item>
 
@@ -98,7 +98,7 @@ const activeTab = ref<string>("tab1");
               </q-item-section> -->
 
               <q-item-section>
-                แบบรายงานการประเมินฯ
+                แบบรายงาน<br/>การประเมินฯ
               </q-item-section>
             </q-item>
           </q-list>

From 2f8f1246a5df747fa16b2c4baaba75d9f9f64c54 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 18 Aug 2023 16:53:35 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A0=E0=B8=97=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   14 +-
 .../10_order/components/step/step01.vue       | 2153 ++++++++++++++---
 2 files changed, 1822 insertions(+), 345 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index f844d90b4..e6c6e0847 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -61,6 +61,8 @@ export default {
     `${placement}/position/clear/${personalId}`,
 
   // order
+  organizationsOrder: () => `${order}/order/organizations`,
+  approverOC: (id: string) => `${order}/order/approver/${id}`,
   yearOptionsOrder: () => `${order}/order/fiscal-year`,
   listOrder: () => `${order}/order`,
   detailOrder: (orderId: string) => `${order}/order/detail/${orderId}`,
@@ -120,7 +122,7 @@ export default {
   officerDetail: (id: string) => `${placement}/officer/${id}`,
   officerMainDelete: (id: string) => `${placement}/officer/${id}`,
   officerMainReport: () => `${placement}/officer/report`,
-  officerMainEdit: (id:string) => `${placemenHelpGov}/${id}`,
+  officerMainEdit: (id: string) => `${placemenHelpGov}/${id}`,
 
   // ส่งตัวกลับ
   placemenRepatriation,
@@ -128,15 +130,15 @@ export default {
   repatriationDetail: (id: string) => `${placement}/repatriation/${id}`,
   repatriationMainDelete: (id: string) => `${placement}/repatriation/${id}`,
   repatriationMainReport: () => `${placement}/repatriation/report`,
-  repatriationMainEdit: (id:string) => `${placemenRepatriation}/${id}`,
+  repatriationMainEdit: (id: string) => `${placemenRepatriation}/${id}`,
   // ขอย้าย
   placemenRelocation,
   relocationMain: () => `${placement}/relocation`,
-  relocationDetail: (id:string) => `${placement}/relocation/${id}`,
-  relocationMainDelete: (id:string) => `${placement}/relocation/${id}`,
+  relocationDetail: (id: string) => `${placement}/relocation/${id}`,
+  relocationMainDelete: (id: string) => `${placement}/relocation/${id}`,
   relocationMainReport: () => `${placement}/relocation/report`,
-  relocationMainPut: (id:string) => `${placement}/relocation/position/${id}`,
-  relocationMainEdit: (id:string) => `${placemenRelocation}/${id}`,
+  relocationMainPut: (id: string) => `${placement}/relocation/position/${id}`,
+  relocationMainEdit: (id: string) => `${placemenRelocation}/${id}`,
   // อื่นๆ
   placemenOther,
   otherMain: () => `${placemenOther}`,
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 4005a2ba4..73d358cf5 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -1,197 +1,6 @@
-<template>
-  <div style="max-height: 68vh; overflow-y: scroll">
-    <q-form ref="myForm" class="q-pa-md">
-      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
-        <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            :options="typeOrderOption" option-value="id" use-input input-debounce="0" />
-          <!-- @filter="(inputValue:string,
-          doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
-          ) " -->
-        </div>
-
-        <div class="col-xs-12 col-md-6">
-          <!-- :readonly="!edit"
-                :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
-        </div>
-
-        <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
-          <div class="col-6">
-            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
-              hide-bottom-space type="number" />
-          </div>
-          <label class="col-1 flex justify-center items-center text-bold">/</label>
-          <div class="col-5">
-            <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
-              @update:modelValue="clickEditRow">
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`" dense outlined>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-        </div>
-        <div class="col-xs-5 col-md-3">
-          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
-                " :label="`${'วันที่คำสั่งมีผล'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`,
-  ]">
-                <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-
-        <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
-            option-value="id" use-input input-debounce="0" />
-          <!-- @filter="(inputValue:string,
-          doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
-          ) " -->
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <!-- :readonly="!edit"
-                :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <!-- :readonly="!edit"
-                :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
-        </div>
-        <div class="col-12">
-          <q-separator />
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
-            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
-          <!-- @filter="(inputValue:string,
-          doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
-          ) " -->
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="position"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]" hide-bottom-space
-            :label="`${'ตำแหน่งรับสมัคร'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            :options="positionOption" option-value="id" use-input input-debounce="0" /> -->
-          <!-- @filter="(inputValue:string, doneFn:Function) =>
-          filterSelector(inputValue, doneFn,'positionOption' ) " -->
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
-            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
-        </div>
-        <!-- @filter="(inputValue:string,
-        doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
-        ) " -->
-
-        <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
-                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-  ]">
-                <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
-            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
-            input-debounce="0" />
-          <!-- @filter="(inputValue:string,
-          doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
-          ) "  -->
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-  ]">
-                <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-      </div>
-    </q-form>
-  </div>
-  <q-separator />
-  <div class="flex justify-end q-pa-sm q-gutter-sm">
-    <q-btn unelevated label="บันทึก" color="public" @click="submit">
-      <q-tooltip>บันทึก</q-tooltip>
-    </q-btn>
-    <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
-        <q-tooltip>ย้อนกลับ</q-tooltip>
-      </q-btn> -->
-    <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-  </div>
-</template>
+divdiv
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type {
   DataOption1,
   DataOption,
@@ -227,145 +36,233 @@ const props = defineProps({
   },
 });
 const next = () => props.next();
-const previous = () => props.previous();
 const orderId = route.params.orderid;
 
 const myForm = ref<QForm>();
+const myForm2 = ref<QForm>();
 
-const editRow = ref<boolean>(false);
+//option
+const typeOrderOption = ref<DataOption1[]>([]);
+const byOrderOption = ref<DataOption1[]>([]);
+const CommandOption = ref<DataOption1[]>([]);
 
+//Main
+const typeOrder = ref<any>([]);
 const nameOrder = ref<string>("");
-const nameCommand = ref<string>("");
-const positionCommand = ref<string>("");
+const command = ref<number | "">();
 const dateYear = ref<number>(new Date().getFullYear());
-const command = ref<number>();
 const dateCommand = ref<Date>(new Date());
-const dateRegister = ref<Date>(new Date());
-const dateAnnounce = ref<Date>(new Date());
-
-const typeOrder = ref<number>();
-const typeOrderOption = ref<DataOption1[]>([
-  { name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const typeOrderOptionFilter = ref<DataOption1[]>([]);
-
 const byOrder = ref<string>("");
-const byOrderOption = ref<DataOption1[]>([
-  { name: "นายดด นน", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const byOrderOptionFilter = ref<DataOption1[]>([]);
-
-const register = ref<string>("");
-const registerOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const registerOptionFilter = ref<DataOption[]>([]);
-
-const announce = ref<string>("");
-const announceOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const announceOptionFilter = ref<DataOption[]>([]);
-
-const position = ref<string>("");
-const positionOption = ref<DataOption1[]>([
-  { name: "ผู้ช่วย", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const positionOptionFilter = ref<DataOption[]>([]);
+const nameCommand = ref<any>([]);
+const positionCommand = ref<string>("");
 
+//form  C-PM-01 - 04
 const examRound = ref<string>("");
 const examRoundOption = ref<DataOption1[]>([]);
-const testOptionFilter = ref<DataOption[]>([]);
+const conclusionRegisterNo = ref<string>("");
+const conclusionRegisterDate = ref<Date>(new Date());
+const registerOption = ref<DataOption1[]>([
+  {
+    name: "รับสมคัรสอบ ครั้งที่ 1",
+    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  },
+]);
+const conclusionResultNo = ref<string>("");
+const conclusionResultDate = ref<Date>(new Date());
+const announceOption = ref<DataOption1[]>([
+  {
+    name: "ผลการสอบแข่งขั้น ครั้งที่ 1",
+    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  },
+]);
 
-const clickEditRow = () => (editRow.value = true);
+// C-PM-05 - 06
+const conclusion1 = ref<string>("");
+const conclusionDate1 = ref<Date>(new Date());
+const conclusion1Option = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const conclusion2 = ref<string>("");
+const conclusionDate2 = ref<Date>(new Date());
+const conclusion2Option = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const meeting = ref<string>("");
+const dateMeeting = ref<Date>(new Date());
+const meetingOption = ref<DataOption1[]>([
+  { name: "การประชุมครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 
-// const filterSelector = (val: any, update: Function, filtername: string) => {
-//   switch (filtername) {
-//     case "typeOrderOption":
-//       update(() => {
-//         typeOrderOption.value = typeOrderOptionFilter.value.filter(
-//           (v: DataOption) => v.name!.indexOf(val) > -1
-//         );
-//       });
-//       break;
-//     case "byOrderOption":
-//       update(() => {
-//         byOrderOption.value = byOrderOptionFilter.value.filter(
-//           (v: DataOption) => v.name!.indexOf(val) > -1
-//         );
-//       });
-//       break;
+// C-PM-07
+const conclusionRelocation1 = ref<string>("");
+const conclusionRelocationDate1 = ref<Date>(new Date());
+const RelocationOption1 = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const conclusionRelocation2 = ref<string>("");
+const conclusionRelocationDate2 = ref<Date>(new Date());
+const RelocationOption2 = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 
-//     case "registerOption":
-//       update(() => {
-//         registerOption.value = registerOptionFilter.value.filter(
-//           (v: DataOption) => v.name!.indexOf(val) > -1
-//         );
-//       });
-//       break;
+//  C-PM-08 && 14
+const conclusion = ref<string>("");
+const conclusionDate = ref<Date>(new Date());
+const conclusionOption = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const conclusionLeave = ref<string>("");
+const conclusionLeaveDate = ref<Date>(new Date());
+const LeaveOption = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const conclusionReceive = ref<string>("");
+const conclusionReceiveDate = ref<Date>(new Date());
+const ReceiveOption = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 
-//     case "announceOption":
-//       update(() => {
-//         announceOption.value = announceOptionFilter.value.filter(
-//           (v: DataOption) => v.name!.indexOf(val) > -1
-//         );
-//       });
-//       break;
+// C-PM-09
+const organizations = ref<string>("");
+const organizationsOption = ref<DataOption1[]>([
+  { name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const order = ref<string>("");
+const orderDate = ref<Date>(new Date());
+const orderOption = ref<DataOption1[]>([
+  { name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const book = ref<string>("");
+const bookDate = ref<Date>(new Date());
+const bookOption = ref<DataOption1[]>([
+  { name: "หนังสือ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+
+// C-PM-10
+const organizationsOld = ref<string>("");
+const organizationsOldOption = ref<DataOption1[]>([
+  { name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const orderOld = ref<string>("");
+const orderOldDate = ref<Date>(new Date());
+const orderOldOption = ref<DataOption1[]>([
+  { name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const locationname = ref<string>("");
+const experimentOc = ref<string>("");
+const experimentformDate = ref<Date>(new Date());
+const experimenttoDate = ref<Date>(new Date());
+const chairman = ref<string>("");
+const chairmanOption = ref<DataOption1[]>([
+  { name: "ประธาน ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const director = ref<string>("");
+const directorOption = ref<DataOption1[]>([
+  { name: "กรรมการ 1 ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+  { name: "กรรมการ 2 ", id: "3fa85f64-5717-4562-e24k-2c963f66afa6" },
+]);
+const director2 = ref<string>("");
+const director2Option = ref<DataOption1[]>([
+  { name: "กรรมการ 1 ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+  { name: "กรรมการ 2 ", id: "3fa85f64-5717-4562-e24k-2c963f66afa6" },
+]);
+
+// C-PM-11-12
+const committeeOc = ref<string>("");
+const committeeOcOption = ref<DataOption1[]>([
+  {
+    name: "หน่วยงาน (อนุสนธิคำสั่ง) ",
+    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  },
+]);
+const committeeOrder = ref<string>("");
+const committeeOrderOption = ref<DataOption1[]>([
+  {
+    name: "คำสั่ง (อนุสนธิคำสั่ง) ",
+    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  },
+]);
+const committeeDate = ref<Date>(new Date());
+
+// C-PM-13
+const receiveOc = ref<string>("");
+const receiveOcOption = ref<DataOption1[]>([
+  {
+    name: "คำสั่งโอน ",
+    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  },
+]);
+
+// C-PM-16
+const orderNumber = ref<string>();
+const orderNumberDate = ref<Date>(new Date());
 
-//     case "positionOption":
-//       update(() => {
-//         positionOption.value = positionOptionFilter.value.filter(
-//           (v: DataOption) => v.name!.indexOf(val) > -1
-//         );
-//       });
-//       break;
-//     case "testOption":
-//       update(() => {
-//         testOption.value = testOptionFilter.value.filter(
-//           (v: DataOption) => v.name!.indexOf(val) > -1
-//         );
-//       });
-//       break;
-//     default:
-//       break;
-//   }
-// };
 onMounted(async () => {
   if (orderId) {
-    await fetchdetailOrder();
+    fecthTypeOption("hasData");
   } else {
-    fecthTypeOption();
-    fecthExamRoundOption();
+    fecthTypeOption("noData");
   }
-
-  // const data = localStorage.getItem("formData");
-  // if (data) {
-  //   const parsedData = JSON.parse(data);
-  //   typeOrder.value = parsedData.orderTypeValue;
-  //   nameOrder.value = parsedData.orderTitle;
-  //   command.value = parsedData.orderNo;
-  //   dateYear.value = parsedData.orderYear;
-  //   dateCommand.value = parsedData.orderDate;
-  //   byOrder.value = parsedData.orderBy;
-  //   nameCommand.value = parsedData.signatoryBy;
-  //   positionCommand.value = parsedData.signatoryPosition;
-  //   test.value = parsedData.examRound;
-  //   position.value = parsedData.registerPosition;
-  //   register.value = parsedData.conclusionRegisterNo;
-  //   dateRegister.value = parsedData.conclusionRegisterDate;
-  //   announce.value = parsedData.conclusionResultNo;
-  //   dateAnnounce.value = parsedData.conclusionResultDate;
+});
+watch(byOrder, async () => {
+  await http
+    .get(config.API.approverOC(byOrder.value))
+    .then((res: any) => {
+      CommandOption.value = res.data.result;
+      console.log(CommandOption.value);
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+});
+watch(nameCommand, async () => {
+  console.log(nameCommand.value);
+  console.log(positionCommand.value);
+  
+  
+  if (positionCommand.value === "" || positionCommand.value === undefined) {
+    positionCommand.value = nameCommand.value.positionName;
+  }
+  // if (nameCommand.value === "") {
+  //   positionCommand.value = "";
   // }
 });
-const fetchdetailOrder = async () => {
+const fecthTypeOption = async (actions: string) => {
   showLoader();
-  // console.log(orderId);
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      typeOrderOption.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.name,
+        category: e.category,
+        commandCode: e.commandCode,
+        fullname: e.commandCode + "   " + e.name,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      if (actions == "hasData") {
+        await fetchdetailOrder();
+      }
+      await fecthCommand();
+      await fecthExamRoundOption();
+      hideLoader();
+    });
+};
+const fetchdetailOrder = async () => {
   let orderIdString = orderId.toString();
   await http
     .get(config.API.detailOrder(orderIdString))
     .then((res: any) => {
+      console.log(typeOrderOption.value);
+
       const data = res.data.result;
-      typeOrder.value = data.orderTypeValue;
+      typeOrder.value = typeOrderOption.value.find(
+        (e) => e.id === data.orderTypeValue
+      );
       nameOrder.value = data.orderTitle;
       command.value = data.orderNo;
       dateYear.value = Number(data.orderYear);
@@ -373,30 +270,32 @@ const fetchdetailOrder = async () => {
       byOrder.value = data.orderBy;
       nameCommand.value = data.signatoryBy;
       positionCommand.value = data.signatoryPosition;
+      console.log(nameCommand.value);
+
       examRound.value = data.examRound;
-      // position.value = data.registerPosition;
-      register.value = data.conclusionRegisterNo;
-      dateRegister.value = data.conclusionRegisterDate;
-      announce.value = data.conclusionResultNo;
-      dateAnnounce.value = data.conclusionResultDate;
+      conclusionRegisterNo.value = data.conclusionRegisterNo;
+      conclusionRegisterDate.value = data.conclusionRegisterDate;
+      conclusionResultNo.value = data.conclusionResultNo;
+      conclusionResultDate.value = data.conclusionResultDate;
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
+    .finally(async () => {
+      await fecthExamRoundOption();
+      await fecthCommand();
       hideLoader();
-      fecthTypeOption();
-      fecthExamRoundOption();
     });
 };
-const fecthTypeOption = async () => {
+const fecthCommand = async () => {
   await http
-    .get(config.API.typeOrder())
-    .then((res) => {
-      typeOrderOption.value = res.data.result;
+    .get(config.API.organizationsOrder())
+    .then((res: any) => {
+      console.log(res);
+      byOrderOption.value = res.data.result;
     })
-    .catch((e) => {
-      messageError($q, e);
+    .catch((e: any) => {
+      console.log(e);
     });
 };
 const fecthExamRoundOption = async () => {
@@ -406,38 +305,125 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       // console.log(examRoundOption.value);
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
+
 const submit = async () => {
   const formdata = {
-    orderTypeValue: typeOrder.value,
+    orderTypeValue: typeOrder.value.id,
     orderTitle: nameOrder.value,
-    orderNo: Number(command.value),
+    orderNo:
+      command.value == undefined || command.value == ""
+        ? ""
+        : command.value,
     orderYear: dateYear.value,
     orderDate: dateCommand.value,
     orderBy: byOrder.value,
-    signatoryBy: nameCommand.value,
+    registerPosition: "",
+    signatoryBy:
+      nameCommand.value.id === undefined
+        ? nameCommand.value
+        : nameCommand.value.id,
     signatoryPosition: positionCommand.value,
-    examRound: examRound.value,
-    registerPosition: position.value,
-    conclusionRegisterNo: register.value,
-    conclusionRegisterDate: dateRegister.value,
-    conclusionResultNo: announce.value.toString(),
-    conclusionResultDate: dateAnnounce.value,
   };
+  if (
+    typeOrder.value.commandCode == "C-PM-01" ||
+    typeOrder.value.commandCode == "C-PM-02" ||
+    typeOrder.value.commandCode == "C-PM-03" ||
+    typeOrder.value.commandCode == "C-PM-04"
+  ) {
+    Object.assign(formdata, {
+      examRound: examRound.value,
+      conclusionRegisterNo: conclusionRegisterNo.value,
+      conclusionRegisterDate: conclusionRegisterDate.value,
+      conclusionResultNo: conclusionResultNo.value.toString(),
+      conclusionResultDate: conclusionResultDate.value,
+    });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-04" ||
+    typeOrder.value.commandCode == "C-PM-05"
+  ) {
+    Object.assign(formdata, {
+      conclusionRegisterNo: conclusion1.value,
+      conclusionRegisterDate: conclusionDate1.value,
+      conclusionResultNo: conclusion2.value,
+      conclusionResultDate: conclusionDate2.value,
+      meeting: meeting.value,
+      dateMeeting: dateMeeting.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-07") {
+    Object.assign(formdata, {
+      conclusionRelocation1: conclusionRelocation1.value,
+      conclusionRelocationDate1: conclusionRelocationDate1.value,
+      conclusionRelocation2: conclusionRelocation2.value,
+      conclusionRelocationDate2: conclusionRelocationDate2.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-08") {
+    Object.assign(formdata, {
+      conclusion: conclusion.value,
+      conclusionDate: conclusionDate.value,
+      conclusionLeave: conclusionLeave.value,
+      conclusionLeaveDate: conclusionLeaveDate.value,
+      conclusionReceive: conclusionReceive.value,
+      conclusionReceiveDate: conclusionReceiveDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-09") {
+    Object.assign(formdata, {
+      organizations: organizations.value,
+      order: order.value,
+      orderDate: orderDate.value,
+      book: book.value,
+      bookDate: bookDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-10") {
+    Object.assign(formdata, {
+      organizationsOld: organizationsOld.value,
+      orderOld: orderOld.value,
+      orderOldDate: orderOldDate.value,
+      locationname: locationname.value,
+      experimentOc: experimentOc.value,
+      experimentformDate: experimentformDate.value,
+      experimenttoDate: experimenttoDate.value,
+      chairman: chairman.value,
+      director: director.value,
+      director2: director2.value,
+    });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-11" ||
+    typeOrder.value.commandCode == "C-PM-12"
+  ) {
+    Object.assign(formdata, {
+      committeeOc: committeeOc.value,
+      committeeOrder: committeeOrder.value,
+      committeeDate: committeeDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-13") {
+    Object.assign(formdata, {
+      receiveOc: receiveOc.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-14") {
+    Object.assign(formdata, {
+      conclusionReceive: conclusionReceive.value,
+      conclusionReceiveDate: conclusionReceiveDate.value,
+    });
+  } else if (typeOrder.value.commandCode == "C-PM-16") {
+    Object.assign(formdata, {
+      orderNumber: orderNumber.value,
+      orderNumberDate: orderNumberDate.value,
+    });
+  }
+  console.log(formdata);
+
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      dialogConfirm(
-        $q,
-        () => {
-          if (!orderId) {
-            createListOrder(formdata);
-          } else {
-            let orderIdString = orderId.toString();
-            updateOrder(formdata, orderIdString);
-          }
-        },
-      );
+      dialogConfirm($q, () => {
+        if (!orderId) {
+          createListOrder(formdata);
+        } else {
+          let orderIdString = orderId.toString();
+          updateOrder(formdata, orderIdString);
+        }
+      });
     }
   });
 };
@@ -459,7 +445,6 @@ const createListOrder = async (formData: Object) => {
       hideLoader();
     });
 };
-
 const updateOrder = async (formData: Object, orderId: string) => {
   showLoader();
   await http
@@ -488,6 +473,1496 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+<template>
+  <div style="max-height: 68vh; overflow-y: scroll">
+    <!-- Main -->
+    <q-form ref="myForm" class="q-pa-md">
+      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="typeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            map-options
+            option-label="fullname"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            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"
+              hide-bottom-space
+            />
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
+          <div class="col-5">
+            <datepicker
+              v-model="dateYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
+                  dense
+                  outlined
+                >
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div class="col-xs-5 col-md-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateCommand != null ? date2Thai(dateCommand) : null
+                "
+                :label="`${'วันที่คำสั่งมีผล'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="byOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            emit-value
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @update:model-value="(nameCommand = ''), (positionCommand = '')"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกผู้มีอำนาจลงนาม'}`]"
+            hide-bottom-space
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            map-options
+            option-label="name"
+            :options="CommandOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          >
+            <template v-if="CommandOption.length === 0" v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-primary">
+                  กรุณาเลือกคำสั่งโดยก่อน
+                </q-item-section>
+              </q-item>
+            </template>
+          </selector>
+
+          <!-- <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+          /> -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+            disable
+          />
+        </div>
+        <div class="col-12">
+          <!-- <q-separator /> -->
+        </div>
+      </div>
+      <!-- C-PM-01-04 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder.commandCode === 'C-PM-01' ||
+          typeOrder.commandCode === 'C-PM-02' ||
+          typeOrder.commandCode === 'C-PM-03' ||
+          typeOrder.commandCode === 'C-PM-04'
+        "
+      >
+        <div class="col-xs-12 col-md-12">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionRegisterNo"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="registerOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionRegisterDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionRegisterDate != null
+                    ? date2Thai(conclusionRegisterDate)
+                    : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionResultNo"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="announceOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionResultDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionResultDate != null
+                    ? date2Thai(conclusionResultDate)
+                    : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+
+      <!-- C-PM-05-06 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder.commandCode === 'C-PM-05' ||
+          typeOrder.commandCode === 'C-PM-06'
+        "
+      >
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusion1"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="conclusion1Option"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionDate1"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionDate1 != null ? date2Thai(conclusionDate1) : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusion2"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ '}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="conclusion2Option"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionDate2"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionDate2 != null ? date2Thai(conclusionDate2) : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="meeting"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกการประชุม ครั้งที่ '}`]"
+            hide-bottom-space
+            :label="`${'การประชุมครั้งที่ '}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="meetingOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateMeeting"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateMeeting != null ? date2Thai(dateMeeting) : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+
+      <!-- C-PM-07 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder.commandCode === 'C-PM-07'"
+      >
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionRelocation1"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="RelocationOption1"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionRelocationDate1"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionRelocationDate1 != null
+                    ? date2Thai(conclusionRelocationDate1)
+                    : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionRelocation2"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ '}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="RelocationOption2"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionRelocationDate2"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionRelocationDate2 != null
+                    ? date2Thai(conclusionRelocationDate2)
+                    : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+
+      <!-- C-PM-08 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder.commandCode === 'C-PM-08'"
+      >
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusion"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="conclusionOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionDate != null ? date2Thai(conclusionDate) : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionLeave"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่องราชการออกจากราชการไปแล้ว)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่องราชการออกจากราชการไปแล้ว) '}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="LeaveOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionLeaveDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionLeaveDate != null
+                    ? date2Thai(conclusionLeaveDate)
+                    : null
+                "
+                :label="`${'ลงวันที่ (เรื่องราชการออกจากราชการไปแล้ว)'}`"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${'กรุณาเลือกลงวันที่ (เรื่องราชการออกจากราชการไปแล้ว)'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionReceive"
+            :rules="[(val: string) => !!val || `${'มติ กก. ครั้งที่ (กลับเข้าราชการ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (กลับเข้าราชการ)'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="ReceiveOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionReceiveDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionReceiveDate != null
+                    ? date2Thai(conclusionReceiveDate)
+                    : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+
+      <!-- C-PM-09 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder.commandCode === 'C-PM-09'"
+      >
+        <div class="col-xs-12 col-md-12">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="organizations"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+            hide-bottom-space
+            :label="`${'ชื่อหน่วยงาน'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="organizationsOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="order"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งที่'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="orderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="orderDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="orderDate != null ? date2Thai(orderDate) : null"
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="book"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือก หนังสือสำนักงาน ก.พ. ที่ นร'}`]"
+            hide-bottom-space
+            :label="`${'หนังสือสำนักงาน ก.พ. ที่ นร'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="bookOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="bookDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="bookDate != null ? date2Thai(bookDate) : null"
+                :label="`${'ลงวันที่'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+
+      <!-- C-PM-10 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder.commandCode === 'C-PM-10'"
+      >
+        <div class="col-xs-12 col-md-4">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="organizationsOld"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน (ต้นทาง)'}`]"
+            hide-bottom-space
+            :label="`${'ชื่อหน่วยงาน (ต้นทาง)'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="organizationsOldOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="orderOld"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งที่ (ต้นทาง)'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="orderOldOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="orderOldDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  orderOldDate != null ? date2Thai(orderOldDate) : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="locationname"
+            :rules="[(val) => !!val || `${'กรุณากรอกให้ดำรงตำแหน่ง ณ'}`]"
+            :label="`${'ให้ดำรงตำแหน่ง ณ'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="experimentOc"
+            :rules="[
+              (val) =>
+                !!val ||
+                `${'กรุณากรอกหน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`,
+            ]"
+            :label="`${'หน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-2">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="experimentformDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  experimentformDate != null
+                    ? date2Thai(experimentformDate)
+                    : null
+                "
+                :label="`${'ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${'กรุณาเลือกลงวันที่ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-2">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="experimenttoDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  experimenttoDate != null ? date2Thai(experimenttoDate) : null
+                "
+                :label="`${'ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${'กรุณาเลือกลงวันที่ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="chairman"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประธาน'}`]"
+            hide-bottom-space
+            :label="`${'ประธาน'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="chairmanOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="director"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกกรรมการ'}`]"
+            hide-bottom-space
+            :label="`${'กรรมการ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="directorOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="director2"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกกรรมการ'}`]"
+            hide-bottom-space
+            :label="`${'กรรมการ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="director2Option"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+      </div>
+
+      <!-- C-PM-11 - 12 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder.commandCode === 'C-PM-11' ||
+          typeOrder.commandCode === 'C-PM-12'
+        "
+      >
+        <div class="col-xs-12 col-md-4">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="committeeOc"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน (อนุสนธิคำสั่ง)'}`]"
+            hide-bottom-space
+            :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="committeeOcOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="committeeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]"
+            hide-bottom-space
+            :label="`${'อนุสนธิคำสั่งที่'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="committeeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="committeeDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  committeeDate != null ? date2Thai(committeeDate) : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+
+      <!-- C-PM-13 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder.commandCode === 'C-PM-13'"
+      >
+        <div class="col-xs-12 col-md-12">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="receiveOc"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+            hide-bottom-space
+            :label="`${'ชื่อหน่วยงาน'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="receiveOcOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+      </div>
+
+      <!-- C-PM-14 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder.commandCode === 'C-PM-14'"
+      >
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionReceive"
+            :rules="[(val: string) => !!val || `${'มติ กก. ครั้งที่ '}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ '}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="ReceiveOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionReceiveDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionReceiveDate != null
+                    ? date2Thai(conclusionReceiveDate)
+                    : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+
+      <!-- C-PM-16 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="typeOrder.commandCode === 'C-PM-16'"
+      >
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="orderNumber"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอกคำสั่งให้ช่วยราชการเลขที่'}`,
+            ]"
+            :label="`${'คำสั่งให้ช่วยราชการเลขที่'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="orderNumberDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  orderNumberDate != null ? date2Thai(orderNumberDate) : null
+                "
+                :label="`${'ลงวันที่ '}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่ '}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+    </q-form>
+  </div>
+
+  <q-separator />
+  <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <q-btn unelevated label="บันทึก" color="public" @click="submit">
+      <q-tooltip>บันทึก</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+
 <style>
 .q-field--with-bottom {
   padding-bottom: 0px;