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;