From f829dc2098f6fdbcdfa467685d6efa87864dfeb1 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 19 Aug 2023 10:22:22 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=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

---
 .../10_order/components/step/step01.vue       | 260 +++++++++++-------
 1 file changed, 153 insertions(+), 107 deletions(-)

diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 7ad36f7e0..60a60e0db 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -60,20 +60,20 @@ const examRound = ref<string>("");
 const examRoundOption = ref<DataOption1[]>([]);
 const conclusionRegisterNo = ref<string>("");
 const conclusionRegisterDate = ref<Date>(new Date());
-const registerOption = ref<DataOption1[]>([
-  {
-    name: "รับสมคัรสอบ ครั้งที่ 1",
-    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-  },
-]);
+// 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 announceOption = ref<DataOption1[]>([
+//   {
+//     name: "ผลการสอบแข่งขั้น ครั้งที่ 1",
+//     id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+//   },
+// ]);
 
 // C-PM-05 - 06
 const conclusion1 = ref<string>("");
@@ -486,7 +486,7 @@ const getClass = (val: boolean) => {
         </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 />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command" hide-bottom-space :label="`${'คำสั่งเลขที่'}`"/>
           </div>
           <label class="col-1 flex justify-center items-center text-bold">/</label>
           <div class="col-5">
@@ -560,7 +560,7 @@ const getClass = (val: boolean) => {
             hide-bottom-space disable />
         </div>
         <div class="col-12">
-          <q-separator v-if="typeOrder.commandCode"/>
+          <q-separator v-if="typeOrder.commandCode" />
         </div>
 
         <!-- C-PM-01-04 -->
@@ -577,10 +577,14 @@ const getClass = (val: boolean) => {
           </div>
 
           <div class="col-xs-12 col-md-6">
-            <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRegisterNo"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRegisterNo"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+              :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" hide-bottom-space />
+
+            <!-- <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" />
+              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
@@ -608,10 +612,14 @@ const getClass = (val: boolean) => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-md-6">
-            <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionResultNo"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionResultNo"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`]"
+              :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`" hide-bottom-space />
+
+            <!-- <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" />
+              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
@@ -626,9 +634,9 @@ const getClass = (val: boolean) => {
                 <q-input outlined dense class="full-width datepicker" :model-value="conclusionResultDate != null
                   ? date2Thai(conclusionResultDate)
                   : null
-                  " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
+                  " :label="`${'ลงวันที่ (เรื่อง ผลการสอบฯ)'}`" :rules="[
     (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบฯ)'}`,
   ]">
                   <template v-slot:prepend>
                     <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
@@ -645,10 +653,14 @@ const getClass = (val: boolean) => {
           typeOrder.commandCode === 'C-PM-06'
           ">
           <div class="col-xs-12 col-md-6">
-            <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusion1"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusion1"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
+              hide-bottom-space />
+
+            <!-- <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" />
+              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
@@ -671,10 +683,11 @@ const getClass = (val: boolean) => {
             </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" />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusion2"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
+              hide-bottom-space />
+
+            <!-- <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
@@ -697,10 +710,14 @@ const getClass = (val: boolean) => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-md-6">
-            <selector :class="getClass(true)" outlined dense lazy-rules v-model="meeting"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
+              :rules="[(val) => !!val || `${'กรุณากรอกการประชุม ครั้งที่'}`]" :label="`${'การประชุม ครั้งที่'}`"
+              hide-bottom-space />
+
+            <!-- <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" />
+              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
@@ -727,10 +744,11 @@ const getClass = (val: boolean) => {
         <!-- 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" />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRelocation1"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
+              hide-bottom-space />
+
+            <!-- <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
@@ -755,10 +773,11 @@ const getClass = (val: boolean) => {
             </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" />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRelocation2"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
+              hide-bottom-space />
+
+            <!-- <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
@@ -787,10 +806,11 @@ const getClass = (val: boolean) => {
         <!-- 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" />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusion"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
+              hide-bottom-space />
+
+            <!-- <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
@@ -813,10 +833,11 @@ const getClass = (val: boolean) => {
             </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" />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionLeave"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ออกจากราชการ)'}`]"
+              :label="`${'มติ กก. ครั้งที่ (เรื่อง ออกจากราชการ)'}`" hide-bottom-space />
+
+            <!-- <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
@@ -831,10 +852,10 @@ const getClass = (val: boolean) => {
                 <q-input outlined dense class="full-width datepicker" :model-value="conclusionLeaveDate != null
                   ? date2Thai(conclusionLeaveDate)
                   : null
-                  " :label="`${'ลงวันที่ (เรื่องราชการออกจากราชการไปแล้ว)'}`" :rules="[
+                  " :label="`${'ลงวันที่ (เรื่อง ออกจากราชการ)'}`" :rules="[
     (val) =>
       !!val ||
-      `${'กรุณาเลือกลงวันที่ (เรื่องราชการออกจากราชการไปแล้ว)'}`,
+      `${'กรุณาเลือกลงวันที่ (เรื่อง ออกจากราชการ)'}`,
   ]">
                   <template v-slot:prepend>
                     <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
@@ -845,10 +866,14 @@ const getClass = (val: boolean) => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-md-6">
-            <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`]"
+              :label="`${'มติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`" hide-bottom-space />
+
+            <!-- <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" />
+              :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
@@ -883,10 +908,13 @@ const getClass = (val: boolean) => {
               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"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="order"
+              :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]" :label="`${'คำสั่งที่'}`" hide-bottom-space />
+
+            <!-- <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" />
+              input-debounce="0" /> -->
           </div>
           <div class="col-xs-12 col-md-6">
             <datepicker menu-class-name="modalfix" v-model="orderDate" :locale="'th'" autoApply borderless
@@ -947,10 +975,14 @@ const getClass = (val: boolean) => {
               :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"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="orderOld"
+              :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]" :label="`${'คำสั่งที่ (ต้นทาง)'}`"
+              hide-bottom-space />
+
+            <!-- <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" />
+              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
@@ -977,6 +1009,7 @@ const getClass = (val: boolean) => {
               :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) =>
@@ -984,56 +1017,61 @@ const getClass = (val: boolean) => {
                 `${'กรุณากรอกหน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`,
             ]" :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="[
+          <div class="col-md-4"></div>
+
+            <div class="col-xs-12 col-md-4">
+              <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="[
+                    <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">
+              <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>
+                    <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-md-4"></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="`${'ประธาน'}`"
@@ -1059,16 +1097,20 @@ const getClass = (val: boolean) => {
           typeOrder.commandCode === 'C-PM-12'
           ">
           <div class="col-xs-12 col-md-4">
-            <selector :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc" :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`]" :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`" hide-bottom-space />
+
+            <!-- <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" />
+              :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"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOrder" :rules="[(val) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]" :label="`${'อนุสนธิคำสั่งที่'}`" hide-bottom-space />
+
+            <!-- <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" />
+              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
@@ -1093,22 +1135,28 @@ const getClass = (val: boolean) => {
         </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="row col-6 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"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="receiveOc" :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน'}`]" :label="`${'ชื่อหน่วยงาน'}`" hide-bottom-space />
+
+            <!-- <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" />
+              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"
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
+              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]" :label="`${'มติ กก. ครั้งที่'}`"
+              hide-bottom-space />
+
+            <!-- <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" />
+              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
@@ -1174,8 +1222,6 @@ const getClass = (val: boolean) => {
   </div>
 </template>
 
-<style>
-.q-field--with-bottom {
+<style>.q-field--with-bottom {
   padding-bottom: 0px;
-}
-</style>
+}</style>