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

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

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

From e74bf95d0eae446055d7e4d5d8ea65062af9c4ac Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 18 Aug 2023 17:34:37 +0700
Subject: [PATCH 02/11] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A5=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=8A=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Repatriate/RepatriatebyId.vue  |  6 +-
 .../helpgovernment/governmentDetail.vue       | 85 +++++++++++++++----
 2 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index fe939736d..e53d85afa 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -63,11 +63,11 @@
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+        แก้ไขข้อมูลเพื่อลงบัญชี
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn
+        <!-- <q-btn
           outline
           color="primary"
           dense
@@ -76,7 +76,7 @@
           label="แก้ไข"
           style="width: 80px"
           @click="edit = !edit"
-        />
+        /> -->
       </div>
       <div class="q-gutter-sm" v-else>
         <q-btn
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 7b5a538ae..253f2f775 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -100,7 +100,7 @@
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm">
+    <q-form ref="myForm " class="window-width">
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
@@ -120,12 +120,12 @@
                 v-model="organizationPositionOld"
                 :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
                 hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
+                :label="`${'ตำแหน่ง'}`"
                 type="textarea"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row items-center">
+          <!-- <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -189,9 +189,9 @@
                 type="number"
               />
             </div>
-          </div>
+          </div> -->
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -203,16 +203,16 @@
                 v-model="organization"
                 :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
                 hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`"
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
                 :readonly="!edit"
-                v-model="date"
+                v-model="dateStart"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -227,9 +227,10 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
+                    :readonly="!edit"
                     lazy-rules
                     :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
+                    :model-value="dateStart !== null ? date2Thai(dateStart) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
                     hide-bottom-space
                     :label="`${'ตั้งแต่วัน'}`"
@@ -251,6 +252,51 @@
               </datepicker>
             </div>
           </div>
+          <div class="col-xs-6 col-sm-4 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                  :readonly="!edit"
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ถึงวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
           <div class="col-12">
             <q-input
               :class="getClass(edit)"
@@ -319,7 +365,8 @@ const createdAt = ref<string>("");
 const organization = ref<string>("");
 const reason = ref<string>("");
 const status = ref<string>("");
-const date = ref<Date | null>(null);
+const dateStart = ref<Date | null>(null);
+const dateEnd = ref<Date | null>(null);
 const salary = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
@@ -389,7 +436,8 @@ const getData = async () => {
       organization.value = data.organization;
       reason.value = data.reason;
       status.value = data.status;
-      date.value = data.date;
+      dateStart.value = data.dateStart;
+      dateEnd.value = data.dateEnd;
       salary.value = data.salary;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
@@ -412,9 +460,9 @@ const getClass = (val: boolean) => {
 };
 //
 const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
+  // if (myForm.value !== null) {
+  //   myForm.value.validate().then((success: any) => {
+  //     if (success) {
         dialogConfirm(
           $q,
           async () => await saveData(),
@@ -422,9 +470,9 @@ const conditionSave = async () => {
           "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
         );
       }
-    });
-  }
-};
+//     });
+//   }
+// };
 const cancelBtn = () => {
   edit.value = !edit;
   getData();
@@ -434,7 +482,8 @@ const saveData = async () => {
     organization: organization.value,
     reason: reason.value,
     organizationPositionOld: organizationPositionOld.value,
-    date: date.value,
+    dateStart: dateStart.value,
+    dateEnd: dateEnd.value,
     positionTypeOld: positionTypeOld.value,
     positionLevelOld: positionLevelOld.value,
     positionNumberOld: posNo.value,

From 51d5f3e27ebce7b9ac74bd6d129ddf75ec4d11f8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 18 Aug 2023 18:07:15 +0700
Subject: [PATCH 03/11] no message

---
 src/api/07_insignia/api.insignia.ts           |   3 +
 .../components/2_Manage/listManage.vue        | 614 +-----------------
 .../10_order/components/step/step01.vue       |   8 +-
 3 files changed, 34 insertions(+), 591 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 3d233fec5..f05e19bca 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -8,4 +8,7 @@ export default {
   listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
   editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   RoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  // manage
+  insigniaManage: (type: string) => `${insignia}/manage/${type}`,
+
 };
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 8221935d7..285698187 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { onMounted, ref, useAttrs, reactive, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import type { QTableProps } from "quasar";
 import type {
   FormMainProbation,
   FormMainProbation2,
 } from "@/modules/05_placement/interface/request/Main";
+import type { DataOption1 } from "@/modules/05_placement/interface/index/Main";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -12,7 +13,7 @@ import config from "@/app.config";
 import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import type { resMain } from "@/modules/06_retirement/interface/response/Main";
-const yearOptions = reactive<any[]>([]);
+
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
 import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue";
 import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue";
@@ -27,330 +28,12 @@ const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
   mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
-const modal = ref<boolean>(false);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const round = ref<string>("รอบการเสนอพระราชทานเครื่องราชปี 2556");
-const optionRound = [
-  "รอบการเสนอพระราชทานเครื่องราชปี 2557",
-  "รอบการเสนอพระราชทานเครื่องราชปี 2558",
-  "รอบการเสนอพระราชทานเครื่องราชปี 2556",
-];
-const visibleColumns = ref<string[]>([
-  "no",
-  "citizenId",
-  "name",
-  "position",
-  "level",
-  "salary",
-  "organization",
-  "insigniaType",
-  "insigniaSend",
-  "insigniaLevel",
-  "dateSend",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขบัตรประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "level",
-    align: "left",
-    label: "อันดับ/ระดับ",
-    sortable: true,
-    field: "level",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ประเภทเครื่องราชฯ ปัจจุบัน",
-    sortable: true,
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "insigniaSend",
-    align: "left",
-    label: "ประเภทเครื่องราชฯ ที่ยื่นขอ",
-    sortable: true,
-    field: "insigniaSend",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "insigniaLevel",
-    align: "left",
-    label: "ชั้นเครื่องราชฯ",
-    sortable: true,
-    field: "insigniaLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "dateSend",
-    align: "left",
-    label: "วันที่ยื่นขอ",
-    sortable: true,
-    field: "dateSend",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
+const round = ref<string>("");
 
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<any[]>([
-  {
-    no: "1",
-    citizenId: "1xxxxxxxxxx",
-    name: "นายใจดี ยอดใจ ",
-    position: "นักวิชาการพัสดุ",
-    level: "1",
-    salary: "15000",
-    organization: "บริหาร",
-    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
-    insigniaSend: "ตริตาภรณ์ช้างเผือก",
-    insigniaLevel: "ต่ำกว่าสายสะพาย",
-    dateSend: "31 ม.ค. 2566",
-  },
-  {
-    no: "2",
-    citizenId: "1xxxxxxxxxx",
-    name: "นายจักกริน บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    salary: "15000",
-    organization: "บริหาร",
-    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
-    insigniaSend: "ตริตาภรณ์ช้างเผือก",
-    insigniaLevel: "ต่ำกว่าสายสะพาย",
-    dateSend: "31 ม.ค. 2566",
-  },
-  {
-    no: "3",
-    citizenId: "1xxxxxxxxxx",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    salary: "15000",
-    organization: "บริหาร",
-    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
-    insigniaSend: "ตริตาภรณ์ช้างเผือก",
-    insigniaLevel: "ต่ำกว่าสายสะพาย",
-    dateSend: "31 ม.ค. 2566",
-  },
-  {
-    no: "4",
-    citizenId: "1xxxxxxxxxx",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    salary: "15000",
-    organization: "บริหาร",
-    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
-    insigniaSend: "ตริตาภรณ์ช้างเผือก",
-    insigniaLevel: "ต่ำกว่าสายสะพาย",
-    dateSend: "31 ม.ค. 2566",
-  },
-]);
+const optionRound = ref<DataOption1[]>([]);
 
-// ข้อมูลตาราง (จำลอง)
-const currentYear = new Date().getFullYear();
 const tab = ref<any>("haveInsignia");
-const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
-// หัวตาราง2
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "retireNumber",
-    align: "left",
-    label: "จำนวนผู้เกษียณ",
-    sortable: true,
-    field: "total",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows2 = ref<FormMainProbation2[]>([
-  {
-    no: "1",
-    name: "นายใจดี ยอดใจ ",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    no: "2",
-    name: "นายจักกริน บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    no: "3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-  {
-    no: "4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-  {
-    no: "5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-]);
-
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {})
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-const clickNote = () => {
-  addNote.value = true;
-};
-const clickAdd = () => {
-  //   modal.value = true;
-  $q.dialog({
-    title: "เพิ่มประกาศ",
-    message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",
-    options: {
-      type: "radio",
-      model: "opt1",
-      // inline: true
-      items: [
-        { label: "ประกาศเพิ่มผู้เกษียณ", value: "ADD" },
-        { label: "ประกาศแก้ไขข้อมูลผู้เกษียน", value: "EDIT" },
-        { label: "ประกาศยกเลิกผู้เกษียณ", value: "REMOVE" },
-      ],
-    },
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk((data) => {
-      console.log("option===>", data);
-      router.push(`/retirement/list/${type.value}/${currentYear}`);
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-  /* $q.dialog({
-      title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
-      message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    })
-      .onOk(async () => {
-        router.push(`/retirement/list/${type.value}/${currentYear}`);
-      })
-      .onCancel(() => {})
-      .onDismiss(() => {}); */
-};
-const clickClose = async () => {
-  addNote.value = false;
-};
-const organization = ref<string>();
-const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
 const stat = ref<any>({
   total: 0,
   sendName: 0,
@@ -358,54 +41,22 @@ const stat = ref<any>({
   personSend: 0,
   disclaim: 0,
 });
-
-const saveNote = async () => {
-  if (saveWriteNote.value.length == 0) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถบันทึกข้อมูลได้",
-      "กรุณาเพิ่มหมายเหตุ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  } else {
-    await saveTextNote();
-  }
-};
-
-const saveTextNote = async () => {};
-
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const filterKeyword2 = ref<string>("");
-const filterRef2 = ref<any>(null);
-const resetFilter2 = () => {
-  filterKeyword2.value = "";
-  filterRef2.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const nextPage = (prop: any) => {
-  // console.log(prop.id);
-
-  router.push(`/retirement/listretire/${prop.id}/${type.value}`);
+onMounted(async () => {
+  await fecthlistRound();
+});
+const fecthlistRound = async () => {
+  await http
+    .get(config.API.listRoundInsignia("insignia"))
+    .then((res: any) => {
+      optionRound.value = res.data.result.map((e) => ({
+        id: e.period_id,
+        year: e.period_year,
+        name: `รอบการเสนอพระราชทานเครื่องราช ${e.period_name}  ปี ${e.period_year} `,
+      }));
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 };
 </script>
 
@@ -417,7 +68,14 @@ const nextPage = (prop: any) => {
     <div class="bg-grey-2 col-12 row items-center">
       <div class="q-pl-sm q-mr-md text-weight-bold text-grey">รอบ</div>
 
-      <q-select borderless v-model="round" :options="optionRound" />
+      <q-select
+        borderless
+        v-model="round"
+        :options="optionRound"
+        map-options
+        option-value="id"
+        option-label="name"
+      />
     </div>
     <div class="col-12 row bg-white">
       <div class="fit q-px-md q-py-sm">
@@ -479,221 +137,7 @@ const nextPage = (prop: any) => {
         <tab4 />
       </q-tab-panel>
     </q-tab-panels>
-
-    <!-- <div class="col-12 row q-pa-md">
-      <div class="row col-12">
-        <div class="row col-12 q-col-gutter-sm">
-          <q-select
-            v-model="organization"
-            label="หน่วยงาน"
-            dense
-            emit-value
-            map-options
-            :options="organizationOptions"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            style="min-width: 150px"
-          />
-          <div>
-            <q-btn
-              @click="clickAdd()"
-              size="12px"
-              flat
-              round
-              color="add"
-              icon="mdi-plus"
-            >
-              <q-tooltip>เพิ่ม</q-tooltip>
-            </q-btn>
-            <q-btn size="md" icon="mdi-download" flat round color="primary">
-              <q-tooltip>ดาวน์โหลด</q-tooltip>
-            </q-btn> -->
-    <!-- <q-menu>
-                <q-list style="min-width: 100px">
-                  <q-item clickable @click="clickAdd">
-                    <q-item-section>ขรก.กทม.สามัญ</q-item-section>
-                  </q-item>
-                  <q-item clickable @click="clickAdd">
-                    <q-item-section>ลูกจ้างประจำ</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu> -->
-    <!-- </div>
-          <q-space />
-
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2"
-          />
-        </div>
-        <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="name"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
-            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-                <q-th auto-width />
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="nextPage(props.row)"
-              >
-                <q-td key="no" :props="props">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td key="citizenId" :props="props">
-                  {{ props.row.citizenId }}
-                </q-td>
-                <q-td key="name" :props="props">
-                  {{ props.row.name }}
-                </q-td>
-                <q-td key="position" :props="props">
-                  {{ props.row.position }}
-                </q-td>
-                <q-td key="level" :props="props">
-                  {{ props.row.level }}
-                </q-td>
-                <q-td key="salary" :props="props">
-                  {{ props.row.salary }}
-                </q-td>
-                <q-td key="organization" :props="props">
-                  {{ props.row.organization }}
-                </q-td>
-                <q-td key="insigniaType" :props="props">
-                  {{ props.row.insigniaType }}
-                </q-td>
-                <q-td key="insigniaSend" :props="props">
-                  {{ props.row.insigniaSend }}
-                </q-td>
-                <q-td key="insigniaLevel" :props="props">
-                  {{ props.row.insigniaLevel }}
-                </q-td>
-                <q-td key="dateSend" :props="props">
-                  {{ props.row.dateSend }}
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="blue"
-                    @click="clickNote(props.row.id)"
-                    icon="mdi-alert-circle-outline"
-                  >
-                    <q-tooltip>หมายเหตุ</q-tooltip>
-                  </q-btn>
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click="clickDelete(props.row.id)"
-                    icon="mdi-delete"
-                  >
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
-        </div>
-      </div>
-    </div> -->
   </q-card>
-
-  <q-dialog v-model="addNote" persistent>
-    <q-card style="min-width: 350px">
-      <DialogHeader tittle="หมายเหตุ " :close="clickClose" />
-
-      <q-card-section class="q-pt-none">
-        <q-input
-          dense
-          type="textarea"
-          label="กรอกหมายเหตุ"
-          v-model="Note"
-          autofocus
-          @keyup.enter="addNote = false"
-        />
-      </q-card-section>
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" @click="saveNote" color="public" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 73d358cf5..9eb506f07 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -1,4 +1,3 @@
-divdiv
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import type {
@@ -218,8 +217,7 @@ watch(byOrder, async () => {
 watch(nameCommand, async () => {
   console.log(nameCommand.value);
   console.log(positionCommand.value);
-  
-  
+
   if (positionCommand.value === "" || positionCommand.value === undefined) {
     positionCommand.value = nameCommand.value.positionName;
   }
@@ -313,9 +311,7 @@ const submit = async () => {
     orderTypeValue: typeOrder.value.id,
     orderTitle: nameOrder.value,
     orderNo:
-      command.value == undefined || command.value == ""
-        ? ""
-        : command.value,
+      command.value == undefined || command.value == "" ? "" : command.value,
     orderYear: dateYear.value,
     orderDate: dateCommand.value,
     orderBy: byOrder.value,

From 7aee41aca42358aa58df0d70b1b765efd2f929c9 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 19 Aug 2023 00:33:42 +0700
Subject: [PATCH 04/11] =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=9E=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=E0=B8=95=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_order/components/step/step01.vue       | 1987 +++++------------
 .../10_order/components/step/step02.vue       |  838 ++++---
 .../10_order/components/step/step03.vue       |  624 +++---
 .../10_order/components/step/step04.vue       |  537 +++--
 4 files changed, 1619 insertions(+), 2367 deletions(-)

diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 9eb506f07..7ad36f7e0 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -303,7 +303,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       // console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 
 const submit = async () => {
@@ -475,84 +475,37 @@ const getClass = (val: boolean) => {
     <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"
-          />
+          <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
-          />
+          <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
-            />
+            <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
-          >
+          <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"
-            >
+            <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 :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`" dense outlined>
                 </q-input>
               </template>
             </datepicker>
           </div>
         </div>
         <div class="col-xs-5 col-md-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateCommand"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -560,22 +513,10 @@ const getClass = (val: boolean) => {
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateCommand != null ? date2Thai(dateCommand) : null
-                "
-                :label="`${'วันที่คำสั่งมีผล'}`"
-                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
+                " :label="`${'วันที่คำสั่งมีผล'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -583,42 +524,16 @@ const getClass = (val: boolean) => {
           </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 = '')"
-          />
+          <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"
-          >
+          <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">
@@ -640,1312 +555,612 @@ const getClass = (val: boolean) => {
           /> -->
         </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
-          />
+          <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 /> -->
+          <q-separator v-if="typeOrder.commandCode"/>
         </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' ||
+
+        <!-- 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 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>
 
-        <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' ||
+        <!-- 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 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>
-        <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"
-          />
+        <!-- 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>
-        <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"
-          />
+        <!-- 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>
-        <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"
-          />
+        <!-- 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>
-        <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="[
+        <!-- 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
-          />
+            ]" :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>
-        <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' ||
+        <!-- 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 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>
-        <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"
-          />
+        <!-- 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>
-      </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"
-          />
+        <!-- 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>
-        <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="[
+        <!-- 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>
+            ]" :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>
       </div>
     </q-form>
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 6881d8598..8a7efbc7c 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -1,4 +1,406 @@
-div
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import type { QInput } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps, QForm } from "quasar";
+import { useRoute } from "vue-router";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  dialogMessageNotify,
+  dialogConfirm,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const route = useRoute();
+const $q = useQuasar();
+const modalData = ref<any>({
+  salaryAmount: null,
+  positionSalaryAmount: null,
+  mouthSalaryAmount: null,
+});
+const myForm = ref<QForm | null>(null);
+const myFormAdd = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
+const titleName = ref<string>("");
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "education",
+    align: "left",
+    label: "วุฒิการศึกษาในการออกคำสั่ง",
+    field: "education",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const selected = ref<ResponseData[]>([]);
+
+onMounted(async () => {
+  await conditionData();
+});
+
+const conditionData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsselectedOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          education: r.education ?? "",
+          idCard: r.idCard ?? "",
+          name: r.name ?? "",
+          personalId: r.personalId ?? "",
+          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+          sequence: r.sequence !== null ? r.sequence : 0,
+          refRecordId: r.refRecordId,
+          salaryAmount: r.salaryAmount !== 0 ? r.salaryAmount : null,
+          positionSalaryAmount: r.positionSalaryAmount!== 0 ? r.positionSalaryAmount : null,
+          monthSalaryAmount: r.monthSalaryAmount!== 0 ? r.monthSalaryAmount : null,
+        });
+      });
+      // console.log("list", list);
+      rows.value = list;
+      selected.value = rows.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const dialogDeleteData = async (id: string) => {
+  dialogRemove($q, () => deleteData(id));
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await conditionData();
+    });
+};
+
+const swapUp = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapUpOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const swapDown = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapDownOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
+  const indexCurrent = value.rowIndex;
+  if (up) {
+    await swapUp(value.row.personalId);
+  } else {
+    await swapDown(value.row.personalId);
+  }
+};
+
+const saveModal = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        putSalary(modalData.value);
+      }
+    });
+  }
+};
+const personalId = ref<string>("");
+const selectModal = (e: any) => {
+  console.log(e);
+  titleName.value = e.name;
+  personalId.value = e.personalId;
+  modalOpenClose(e.personalId);
+};
+
+const modalOpenClose = async (personalId: string) => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    titleName.value = "";
+  }
+  if (modal.value == true) {
+    await fetchSalary(personalId);
+  }
+};
+const fetchSalary = async (personalId: string) => {
+  console.log(personalId);
+  showLoader();
+  await http
+    .get(config.API.salaryOrder(personalId))
+    .then((res: any) => {
+      console.log(res);
+      const data = res.data.result;
+      modalData.value = {
+        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
+        positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
+        mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
+      };
+      console.log("data", modalData.value);
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const putSalary = async (salary: any) => {
+  modalData.value = {
+    salaryAmount: Number(salary.salaryAmount),
+    positionSalaryAmount: Number(salary.positionSalaryAmount),
+    monthSalaryAmount: Number(salary.mouthSalaryAmount),
+  };
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
+      .then((res: any) => {
+        // console.log(res);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        // console.log(e);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionData();
+        modal.value = false;
+        hideLoader();
+      });
+  });
+};
+
+const modalAddChange = async () => {
+  modalAdd.value = !modalAdd.value;
+  if (modalAdd.value == true) {
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
+  } else await conditionData();
+};
+
+const fetchaddlist = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list = [];
+      list = data.map((r: ResponseData) => ({
+        education: r.education ?? "",
+        idCard: r.idCard ?? "",
+        name: r.name ?? "",
+        personalId: r.personalId ?? "",
+        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+        sequence: r.sequence !== null ? r.sequence : 0,
+        refRecordId: r.refRecordId,
+      }));
+      rows2.value = list;
+      selected.value = rows.value;
+      // rows2.value = list.filter((e: any) => e.selectStatus === false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const saveModalAdd = () => {
+  if (myFormAdd.value !== null) {
+    myFormAdd.value.validate().then(async (result: boolean) => {
+      if (result && selected.value.length !== 0) {
+        dialogConfirm(
+          $q,
+          () => {
+            let data = [];
+            data.push(...selected.value.map((e: any) => e.refRecordId));
+            addlist(data);
+          },
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
+        );
+      }
+    });
+  }
+};
+
+const addlist = async (data: Object) => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await http
+      .post(config.API.personsOrder(id), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
+};
+
+const save = async () => {
+  // console.log("save===>", rows.value)
+  const check = rows.value.find((x:any) => x.salaryAmount==null);
+  if (selected.value.length > 0 && !check) {
+    dialogConfirm($q, () => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    });
+  } else if (check) {
+    dialogMessageNotify($q, "ระบุรายละเอียดการเงินไม่ครบ");
+  } else {
+    dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
+  }
+};
+
+const refresh = async () => {
+  // await conditionData();
+  modalAddChange();
+  selected.value = [];
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
 <template>
   <div>
     <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
@@ -162,12 +564,8 @@ div
         color="public"
         @click="save"
         class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
+        >
       </q-btn>
-      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
     </div>
   </div>
   <!--********************************** เงินเดือน ********************************** -->
@@ -311,431 +709,3 @@ div
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import type { QInput } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps, QForm } from "quasar";
-import { useRoute } from "vue-router";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const next = () => props.next();
-const previous = () => props.previous();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  dialogMessageNotify,
-  dialogConfirm,
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-} = mixin;
-
-const route = useRoute();
-const $q = useQuasar();
-const salaryAmount = ref<number>();
-const positionSalaryAmount = ref<number>();
-const mouthSalaryAmount = ref<number>();
-const modalData = ref<any>({
-  salaryAmount: null,
-  positionSalaryAmount: null,
-  mouthSalaryAmount: null,
-});
-const myForm = ref<QForm | null>(null);
-const myFormAdd = ref<QForm | null>(null);
-const modal = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const titleName = ref<string>("");
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "idCard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idCard",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "education",
-    align: "left",
-    label: "วุฒิการศึกษาในการออกคำสั่ง",
-    field: "education",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const selected = ref<ResponseData[]>([]);
-
-onMounted(async () => {
-  await conditionData();
-});
-
-const conditionData = async () => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await getData(id);
-  }
-};
-
-const getData = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsselectedOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list: ResponseData[] = [];
-      data.map((r: ResponseData) => {
-        list.push({
-          education: r.education ?? "",
-          idCard: r.idCard ?? "",
-          name: r.name ?? "",
-          personalId: r.personalId ?? "",
-          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-          sequence: r.sequence !== null ? r.sequence : 0,
-          refRecordId: r.refRecordId,
-          salaryAmount: r.salaryAmount !== 0 ? r.salaryAmount : null,
-          positionSalaryAmount: r.positionSalaryAmount!== 0 ? r.positionSalaryAmount : null,
-          monthSalaryAmount: r.monthSalaryAmount!== 0 ? r.monthSalaryAmount : null,
-        });
-      });
-      console.log("list", list);
-      rows.value = list;
-      selected.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// const saveSalary = async (id: string) => {
-//   await http
-//     .put(config.API.salaryOrder(id))
-//     .then((res) => {
-//       //   const data = res.data.result;
-//       //   console.log(res);
-//       success($q, "บันทึกข้อมูลสำเร็จ");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-const dialogDeleteData = async (id: string) => {
-  dialogRemove($q, () => deleteData(id));
-};
-
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.personsOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await conditionData();
-    });
-};
-
-const swapUp = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapUpOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const swapDown = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapDownOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const upDown = async (value: any, up: boolean = true) => {
-  const indexCurrent = value.rowIndex;
-  if (up) {
-    await swapUp(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
-    // rows.value[indexCurrent - 1] = value.row;
-  } else {
-    await swapDown(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
-    // rows.value[indexCurrent + 1] = value.row;
-  }
-};
-
-const saveModal = () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (result: boolean) => {
-      if (result) {
-        putSalary(modalData.value);
-      }
-    });
-  }
-};
-const personalId = ref<string>("");
-const selectModal = (e: any) => {
-  console.log(e);
-  titleName.value = e.name;
-  personalId.value = e.personalId;
-  // modalData.value = {
-  //   salaryAmount: 0,
-  //   positionSalaryAmount: 0,
-  //   mouthSalaryAmount: 0,
-  // };
-
-  modalOpenClose(e.personalId);
-};
-
-const modalOpenClose = async (personalId: string) => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    titleName.value = "";
-  }
-  if (modal.value == true) {
-    await fetchSalary(personalId);
-  }
-};
-const fetchSalary = async (personalId: string) => {
-  console.log(personalId);
-  showLoader();
-  await http
-    .get(config.API.salaryOrder(personalId))
-    .then((res: any) => {
-      console.log(res);
-      const data = res.data.result;
-      modalData.value = {
-        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
-        positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
-        mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
-      };
-      console.log("data", modalData.value);
-    })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const putSalary = async (salary: any) => {
-  modalData.value = {
-    salaryAmount: Number(salary.salaryAmount),
-    positionSalaryAmount: Number(salary.positionSalaryAmount),
-    monthSalaryAmount: Number(salary.mouthSalaryAmount),
-  };
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-        hideLoader();
-      });
-  });
-};
-
-const modalAddChange = async () => {
-  modalAdd.value = !modalAdd.value;
-  if (modalAdd.value == true) {
-    const id = route.params.orderid
-      ? route.params.orderid.toString()
-      : localStorage.getItem("orderId")
-      ? localStorage.getItem("orderId")
-      : null;
-    if (id !== null) {
-      await fetchaddlist(id);
-    }
-  } else await conditionData();
-};
-const fetchaddlist = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list = [];
-      list = data.map((r: ResponseData) => ({
-        education: r.education ?? "",
-        idCard: r.idCard ?? "",
-        name: r.name ?? "",
-        personalId: r.personalId ?? "",
-        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-        sequence: r.sequence !== null ? r.sequence : 0,
-        refRecordId: r.refRecordId,
-      }));
-      rows2.value = list;
-      selected.value = rows.value;
-      // rows2.value = list.filter((e: any) => e.selectStatus === false);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const saveModalAdd = () => {
-  if (myFormAdd.value !== null) {
-    myFormAdd.value.validate().then(async (result: boolean) => {
-      if (result && selected.value.length !== 0) {
-        dialogConfirm(
-          $q,
-          () => {
-            let data = [];
-            data.push(...selected.value.map((e: any) => e.refRecordId));
-            addlist(data);
-          },
-          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
-        );
-      }
-    });
-  }
-};
-const addlist = async (data: Object) => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await http
-      .post(config.API.personsOrder(id), data)
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(() => {
-        modalAddChange();
-      });
-  }
-};
-
-const click = (e: any) => {
-  console.log(e);
-  console.log(rows.value.length);
-};
-
-const save = () => {
-  if (selected.value.length > 0) {
-    dialogConfirm($q, () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
-  } else {
-    dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
-  }
-};
-
-const refresh = async () => {
-  // await conditionData();
-  modalAddChange();
-  selected.value = [];
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
-<style lang="scss"></style>
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index 3781bb3f9..290cffccf 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -1,314 +1,3 @@
-<template>
-  <div>
-    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
-      <div class="col-12 row q-py-sm items-center">
-        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-      </div>
-      <q-form ref="myForm">
-        <d-table
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :filter="filter"
-          row-key="idCard"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="idCard" :props="props">
-                {{ props.row.idCard }}
-              </q-td>
-              <q-td key="name" :props="props">
-                {{ props.row.name }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="unit" :props="props">
-                {{ props.row.unit }}
-              </q-td>
-              <q-td key="send" :props="props">
-                <q-select
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  multiple
-                  :outlined="true"
-                  dense
-                  lazy-rules
-                  v-model="props.row.mutiselect"
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
-                  :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="optionSelect"
-                  option-value="id"
-                  input-debounce="0"
-                  color="primary"
-                  @update:model-value="() => updateData(props.row)"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-black">
-                        ไม่พบข้อมูลที่ค้นหา
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="red"
-                  @click="clickDelete(props.row.personalId)"
-                  icon="mdi-delete"
-                >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-form>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อ"
-      >
-      </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="saveDataCopyOrder"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-    </div>
-  </div>
-
-  <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
-      <q-separator />
-      <q-card-section class="q-pa-sm bg-grey-1">
-        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-xs-12 col-sm-5 row">
-            <q-card flat bordered class="fit q-pa-sm">
-              <q-scroll-area visible style="height: 70vh">
-                <q-input
-                  outlined
-                  dense
-                  v-model="search"
-                  placeholder="ค้นหา"
-                  class="q-mb-sm"
-                >
-                  <template v-slot:append>
-                    <q-icon name="mdi-magnify" />
-                  </template>
-                </q-input>
-                <q-tree
-                  :nodes="nodesTree"
-                  dense
-                  node-key="id"
-                  v-model:selected="selected"
-                  v-model:expanded="expanded"
-                  no-selection-unset
-                  selected-color="primary"
-                  @update:selected="onSelected"
-                  default-expand-all
-                />
-              </q-scroll-area>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7">
-            <div class="col-12 row q-py-sm items-center">
-              <q-space />
-              <div class="items-center" style="display: flex">
-                <q-input
-                  standout
-                  dense
-                  v-model="filterModal"
-                  ref="filterRef"
-                  outlined
-                  debounce="300"
-                  placeholder="ค้นหา"
-                  style="max-width: 200px"
-                  class="q-ml-sm"
-                >
-                  <template v-slot:append>
-                    <q-icon v-if="filterModal == ''" name="search" />
-                    <q-icon
-                      v-if="filterModal !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="resetFilter"
-                    />
-                  </template>
-                </q-input>
-
-                <q-select
-                  v-model="visibleColumnsModal"
-                  :display-value="$q.lang.table.columns"
-                  multiple
-                  outlined
-                  dense
-                  :options="columnsModal"
-                  options-dense
-                  option-value="name"
-                  map-options
-                  emit-value
-                  style="min-width: 150px"
-                  class="gt-xs q-ml-sm"
-                />
-              </div>
-            </div>
-            <d-table
-              :rows="rowsModal"
-              :columns="columnsModal"
-              :visible-columns="visibleColumnsModal"
-              :filter="filterModal"
-              row-key="profileId"
-              selection="multiple"
-              v-model:selected="selectedModal"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-
-              <template v-slot:body-selection="scope">
-                <!-- <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    :model-value="scope.selected"
-                    @update:model-value="
-                      (val, evt) => {
-                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
-                          val,
-                          evt
-                        );
-                      }
-                    "
-                  /> -->
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-
-              <template v-slot:body-cell="props">
-                <q-td :props="props">
-                  <div v-if="props.col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
-
-                  <div v-else>
-                    {{ props.value }}
-                  </div>
-                </q-td>
-              </template>
-            </d-table>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <!-- <q-btn
-            flat
-            round
-            color="public"
-            icon="mdi-content-save-outline"
-            @click="clickClose"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
-          </q-btn> -->
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="saveData"
-          class="q-px-md"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
@@ -698,4 +387,315 @@ const updateData = (row: DataCopyOrder) => {
   editRows.value.push(row);
 };
 </script>
-<style lang="scss"></style>
+
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-py-sm items-center">
+        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            v-model="visibleColumns"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <q-form ref="myForm">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="idCard"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="idCard" :props="props">
+                {{ props.row.idCard }}
+              </q-td>
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="unit" :props="props">
+                {{ props.row.unit }}
+              </q-td>
+              <q-td key="send" :props="props">
+                <q-select
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  :outlined="true"
+                  dense
+                  lazy-rules
+                  v-model="props.row.mutiselect"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
+                  :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="optionSelect"
+                  option-value="id"
+                  input-debounce="0"
+                  color="primary"
+                  @update:model-value="() => updateData(props.row)"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-black">
+                        ไม่พบข้อมูลที่ค้นหา
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.personalId)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-form>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อ"
+      >
+      </q-btn>
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        color="public"
+        @click="saveDataCopyOrder"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-5 row">
+            <q-card flat bordered class="fit q-pa-sm">
+              <q-scroll-area visible style="height: 70vh">
+                <q-input
+                  outlined
+                  dense
+                  v-model="search"
+                  placeholder="ค้นหา"
+                  class="q-mb-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon name="mdi-magnify" />
+                  </template>
+                </q-input>
+                <q-tree
+                  :nodes="nodesTree"
+                  dense
+                  node-key="id"
+                  v-model:selected="selected"
+                  v-model:expanded="expanded"
+                  no-selection-unset
+                  selected-color="primary"
+                  @update:selected="onSelected"
+                  default-expand-all
+                />
+              </q-scroll-area>
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-7">
+            <div class="col-12 row q-py-sm items-center">
+              <q-space />
+              <div class="items-center" style="display: flex">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterModal"
+                  ref="filterRef"
+                  outlined
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  style="max-width: 200px"
+                  class="q-ml-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="filterModal == ''" name="search" />
+                    <q-icon
+                      v-if="filterModal !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="resetFilter"
+                    />
+                  </template>
+                </q-input>
+
+                <q-select
+                  v-model="visibleColumnsModal"
+                  :display-value="$q.lang.table.columns"
+                  multiple
+                  outlined
+                  dense
+                  :options="columnsModal"
+                  options-dense
+                  option-value="name"
+                  map-options
+                  emit-value
+                  style="min-width: 150px"
+                  class="gt-xs q-ml-sm"
+                />
+              </div>
+            </div>
+            <d-table
+              :rows="rowsModal"
+              :columns="columnsModal"
+              :visible-columns="visibleColumnsModal"
+              :filter="filterModal"
+              row-key="profileId"
+              selection="multiple"
+              v-model:selected="selectedModal"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body-selection="scope">
+                <!-- <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :model-value="scope.selected"
+                    @update:model-value="
+                      (val, evt) => {
+                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
+                          val,
+                          evt
+                        );
+                      }
+                    "
+                  /> -->
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body-cell="props">
+                <q-td :props="props">
+                  <div v-if="props.col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div v-else>
+                    {{ props.value }}
+                  </div>
+                </q-td>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <!-- <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            @click="clickClose"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn> -->
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="saveData"
+          class="q-px-md"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index ce35a30c6..402c3d72c 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -1,3 +1,238 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+const route = useRoute();
+const $q = useQuasar();
+
+const orderId_params = route.params.orderid;
+const dialog = ref<boolean>(false);
+const dialogFileUpload = ref<boolean>(false);
+const splitterModel = ref<number>(70);
+const tab = ref<string>("main");
+
+const order = ref<string>("");
+const years = ref<number>(new Date().getDate());
+const date = ref<Date>(new Date());
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const OrderPDF = ref<string>("");
+const TailerPDF = ref<string>("");
+const OrderPDFUpload = ref<string>("");
+const TailerPDFUpload = ref<string>("");
+const statusOrder = ref<string>();
+
+const orderId = ref<string>(orderId_params.toString());
+onMounted(async () => {
+  if (orderId.value) {
+    fetchAttachment(orderId.value);
+    fecthstatusOrder(orderId.value);
+  }
+});
+
+const fetchAttachment = async (orderId: string) => {
+  showLoader();
+  await http
+    .get(config.API.attachmentOrder(orderId))
+    .then(async (res) => {
+      let response = res.data.result;
+      // console.log(response);
+      order.value = response.orderNo;
+      years.value = Number(response.orderYear);
+      if (response.date !== undefined) {
+        date.value = response.date;
+      }
+      if (response.orderFileUrl !== null) {
+        // OrderPDF.value = response.orderFileUrl;
+        OrderPDFUpload.value = response.orderFileUrl;
+
+        viewPDF(OrderPDF.value);
+      }
+      if (response.attachmentFileUrl !== null) {
+        // TailerPDF.value = response.attachmentFileUrl;
+        TailerPDFUpload.value = response.attachmentFileUrl;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fecthstatusOrder = async (orderId: string) => {
+  await http
+    .get(config.API.orderReady(orderId))
+    .then((res) => {
+      let status = res.data.result;
+      statusOrder.value = status.result;
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
+const viewPDF = async (pdf: string) => {
+  const pdfData = await usePDF(`${pdf}`);
+  showLoader();
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+    hideLoader();
+  }, 1500);
+};
+
+const viewPDFUpload = async (pdf: string) => {
+  const pdfData = await usePDF(`${pdf}`);
+  showLoader();
+  setTimeout(() => {
+    pdfFileUploadSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+    hideLoader();
+  }, 1500);
+};
+
+watch(tab, () => {
+  // console.log(tab.value);
+  if (tab.value === "main") {
+    viewPDF(OrderPDF.value);
+  }
+  if (tab.value === "second") {
+    viewPDF(TailerPDF.value);
+  }
+});
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const pdfFileUploadSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
+
+const myForm = ref<QForm | null>(null);
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+// const next = () => props.next();
+const previous = () => props.previous();
+
+const onchangePage = (val: any) => {
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
+};
+
+const save = () => {
+  if (myForm.value !== null) {
+    myForm.value!.validate().then((success: Boolean) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => {
+            await putOrderData();
+            await postfileOrder();
+            await postfileTailer();
+            await fetchAttachment(orderId.value);
+            await fecthstatusOrder(orderId.value);
+          },
+        );
+
+      }
+    });
+  }
+};
+const putOrderData = async () => {
+  const orderData = {
+    orderNo: order.value,
+    orderYear: years.value.toString(),
+    signDate: date.value,
+  };
+  await http
+    .put(config.API.attachmentOrder(orderId.value), orderData)
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
+
+const postfileOrder = async () => {
+  const formData = new FormData();
+  formData.append("File", fileOrder.value);
+  await http.post(config.API.attachmentOrderId(orderId.value), formData).then(() => {
+    // fileOrder.value = null 
+  });
+};
+const postfileTailer = async () => {
+  const formData = new FormData();
+  formData.append("File", fileTailer.value);
+  await http.post(config.API.attachmentFileId(orderId.value), formData).then(() => { //fileTailer.value = null 
+  });
+};
+
+const clickExecute = async (id: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      await http
+        .put(config.API.executeOrder(id))
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        });
+    },
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
+  );
+};
+
+const validateForm = () => {
+  return (
+    fileOrder.value !== null &&
+    fileOrder.value !== null &&
+    order.value.trim() !== ""
+  );
+};
+const getClass = (val: boolean) => {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+};
+const setTab = (val: string) => {
+  tab.value = val;
+  page.value = 1;
+};
+
+const viewFileUpload = async (url: string) => {
+  pdfFileUploadSrc.value = undefined
+  await viewPDFUpload(url);
+
+  dialogFileUpload.value = true
+}
+</script>
+
 <template>
   <div>
     <div style="min-height: 70vh">
@@ -6,7 +241,7 @@
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
+              <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
                 :color="tab !== 'main' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
@@ -25,8 +260,8 @@
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn v-show="TailerPDF == ''" size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'"
-                icon="mdi-download" :disable="tab !== 'second'">
+              <q-btn size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download"
+                :disable="tab !== 'second'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -92,8 +327,17 @@
                 <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">คำสั่ง</label>
+                    <div class="text-right">
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(OrderPDFUpload)">
+                        <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                      </q-btn>
+                      <q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download" target="_blank">
+                        <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
+                      </q-btn>
+                    </div>
                     <q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -101,8 +345,18 @@
                   </div>
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
+                    <div class="text-right">
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(TailerPDFUpload)">
+                        <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                      </q-btn>
+                      <q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download" target="_blank">
+                        <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
+                      </q-btn>
+                    </div>
+
                     <q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
-                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
+                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -184,22 +438,10 @@
       <q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
         @click="save">
       </q-btn>
-
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-          <q-tooltip>ต่อไป</q-tooltip>
-        </q-btn> -->
     </div>
 
     <q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
       <q-card class="bg-white text-white">
-        <!-- <q-bar>
-            <q-space />
-  
-            <q-btn dense flat icon="close" v-close-popup>
-              <q-tooltip>ปิดหน้าต่าง</q-tooltip>
-            </q-btn>
-          </q-bar> -->
-
         <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
           <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
             v-close-popup />
@@ -238,227 +480,52 @@
         </q-card-section>
       </q-card>
     </q-dialog>
+
+    <q-dialog v-model="dialogFileUpload" persistent :maximized="true" transition-show="slide-up"
+      transition-hide="slide-down">
+      <q-card class="bg-white text-white">
+        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+          <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
+            v-close-popup />
+        </div>
+        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+          <div class="justify-between items-center align-center q-pb-sm row">
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+          <div class="pdfWidth">
+            <VuePDF ref="vuePDFRef" :pdf="pdfFileUploadSrc" :page="page" fit-parent :scale="0.1" />
+            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+          </div>
+          <div class="justify-between items-center align-center q-pt-sm row">
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
   </div>
 </template>
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
-const route = useRoute();
-const $q = useQuasar();
-
-const orderId_params = route.params.orderid;
-const dialog = ref<boolean>(false);
-const splitterModel = ref<number>(70);
-const tab = ref<string>("main");
-
-const order = ref<string>("");
-const years = ref<number>(new Date().getDate());
-const date = ref<Date>(new Date());
-const fileOrder = ref<any>(null);
-const fileTailer = ref<any>(null);
-
-const OrderPDF = ref<string>("");
-const TailerPDF = ref<string>("");
-const statusOrder = ref<string>();
-
-const orderId = ref<string>(orderId_params.toString());
-onMounted(async () => {
-  if (orderId.value) {
-    fetchAttachment(orderId.value);
-    fecthstatusOrder(orderId.value);
-  }
-
-  //   const pdfData = usePDF();
-
-  //   setTimeout(() => {
-  //     pdfSrc.value = pdfData.pdf.value;
-  //     numOfPages.value = pdfData.pages.value;
-  //   }, 1000);
-});
-
-const fetchAttachment = async (orderId: string) => {
-  showLoader();
-  await http
-    .get(config.API.attachmentOrder(orderId))
-    .then(async (res) => {
-      let response = res.data.result;
-      // console.log(response);
-      order.value = response.orderNo;
-      years.value = Number(response.orderYear);
-      if (response.date !== undefined) {
-        date.value = response.date;
-      }
-      if (response.orderFileUrl !== null) {
-        OrderPDF.value = response.orderFileUrl;
-        viewPDF(OrderPDF.value);
-      }
-      if (response.attachmentFileUrl !== null) {
-        TailerPDF.value = response.attachmentFileUrl;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const fecthstatusOrder = async (orderId: string) => {
-  await http
-    .get(config.API.orderReady(orderId))
-    .then((res) => {
-      let status = res.data.result;
-      statusOrder.value = status.result;
-    })
-    .catch((e) => {
-      console.log(e);
-    });
-};
-const viewPDF = async (pdf: string) => {
-  const pdfData = await usePDF(`${pdf}`);
-  showLoader();
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-    hideLoader();
-  }, 1500);
-};
-watch(tab, () => {
-  // console.log(tab.value);
-  if (tab.value === "main") {
-    viewPDF(OrderPDF.value);
-  }
-  if (tab.value === "second") {
-    viewPDF(TailerPDF.value);
-  }
-});
-
-// const myEventHandler = (e: any) => {
-//   console.log("e", e.target.innerWidth);
-//   if (vuePDFRef !== null) {
-//     vuePDFRef.value.reload();
-//   }
-// };
-
-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const vuePDFRef = ref<any>(null);
-
-const myForm = ref<QForm | null>(null);
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-// const next = () => props.next();
-const previous = () => props.previous();
-
-const onchangePage = (val: any) => {
-  //   console.log(val);
-  if (vuePDFRef !== null) {
-    vuePDFRef.value.reload();
-  }
-};
-
-const save = () => {
-  if (myForm.value !== null) {
-    myForm.value!.validate().then((success: Boolean) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => {
-            await putOrderData();
-            await postfileOrder();
-            await postfileTailer();
-            await fetchAttachment(orderId.value);
-            await fecthstatusOrder(orderId.value);
-          },
-        );
-
-      }
-    });
-  }
-};
-const putOrderData = async () => {
-  const orderData = {
-    orderNo: order.value,
-    orderYear: years.value.toString(),
-    signDate: date.value,
-  };
-  await http
-    .put(config.API.attachmentOrder(orderId.value), orderData)
-    .then((res) => {
-      console.log(res);
-    })
-    .catch((e) => {
-      console.log(e);
-    });
-};
-
-const postfileOrder = async () => {
-  const formData = new FormData();
-  formData.append("File", fileOrder.value);
-  await http.post(config.API.attachmentOrderId(orderId.value), formData);
-};
-const postfileTailer = async () => {
-  const formData = new FormData();
-  formData.append("File", fileTailer.value);
-  await http.post(config.API.attachmentFileId(orderId.value), formData);
-};
-const clickExecute = async (id: string) => {
-  dialogConfirm(
-    $q,
-    async () => {
-      await http
-        .put(config.API.executeOrder(id))
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((e) => {
-          messageError($q, e);
-        });
-    },
-    "ยืนยันการออกคำสั่ง",
-    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
-  );
-};
-
-const validateForm = () => {
-  return (
-    fileOrder.value !== null &&
-    fileOrder.value !== null &&
-    order.value.trim() !== ""
-  );
-};
-const getClass = (val: boolean) => {
-  return {
-    "card-header-active q-px-lg q-py-md cursor-pointer": val,
-    "card-header q-px-lg q-py-md cursor-pointer": !val,
-  };
-};
-const setTab = (val: string) => {
-  tab.value = val;
-  page.value = 1;
-};
-</script>
 <style lang="scss" scoped>
 .border {
   border-radius: 10px;

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 05/11] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=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>

From a646ad3d6d6b0a3dcf65dc165b9a640cc6d08dff Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 19 Aug 2023 13:36:39 +0700
Subject: [PATCH 06/11] fix bug send profileId to registry

---
 src/api/05_placement/api.placement.ts         |   4 +
 .../AppointMent/AppointmentModal.vue          |  42 ++-
 .../components/AppointMent/Detail.vue         | 206 +++----------
 .../05_placement/components/Other/Detail.vue  |   7 +-
 .../components/Receive/receiveDetail2.vue     |   8 +-
 .../components/Receive/receiveModal.vue       |   2 +-
 .../components/Relocation/RelocationModal.vue |   2 +-
 .../components/Relocation/RelocationbyId.vue  |  40 +--
 .../components/Repatriate/RepatriatebyId.vue  | 283 +++---------------
 .../components/Transfer/transferRegistry.vue  |  12 +-
 .../helpgovernment/governmentDetail.vue       | 272 +++--------------
 .../components/probation/ProbationDetail.vue  |   1 +
 .../interface/response/Transfer.ts            |   1 +
 src/modules/05_placement/router.ts            |   4 +-
 .../Discharged/dischargedRegistry.vue         | 123 +-------
 .../components/DismissOrder/outRegistry.vue   | 125 +-------
 .../Expulsion/expulsionRegistry.vue           | 123 +-------
 .../interface/response/discharged.ts          |   1 +
 .../interface/response/expulsion.ts           |   1 +
 19 files changed, 205 insertions(+), 1052 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index e6c6e0847..775d8d572 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -98,6 +98,7 @@ export default {
   receiveReport: `${receive}/report`,
   receiveDataId: (id: string) => `${receive}/${id}`,
   receivePosition: (id: string) => `${receive}/position/${id}`,
+  receiveDataPosition: () => `${receive}/use`,
 
   //tranfer ระบบคำขอโอน
   transfer,
@@ -115,6 +116,7 @@ export default {
   appointmentDelete: (id: string) => `${placement}/appointment/${id}`,
   appointmentPosition: (id: string) => `${placement}/appointment/position/${id}`,
   apppointmentReport: (id: string) => `${placement}/appointment/report/${id}`,
+  apppointmentPosition: () => `${placement}/appointment/use`,
 
   // ช่วยราชการ
   placemenHelpGov,
@@ -139,6 +141,8 @@ export default {
   relocationMainReport: () => `${placement}/relocation/report`,
   relocationMainPut: (id: string) => `${placement}/relocation/position/${id}`,
   relocationMainEdit: (id: string) => `${placemenRelocation}/${id}`,
+  relocationMainPosition: () => `${placement}/relocation/use`,
+
   // อื่นๆ
   placemenOther,
   otherMain: () => `${placemenOther}`,
diff --git a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
index 8625c2b2a..64d377c5f 100644
--- a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
+++ b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
@@ -30,15 +30,12 @@ let dataForm = reactive({
   positionLineId: "",
   positionPathSideId: "",
   positionTypeId: "",
-  // salaryAmount: null,
-  // mouthSalaryAmount: null,
-  // positionSalaryAmount: null,
 });
 
 onMounted(async () => {
   await fetchPublishFile();
   await loadTreeData();
-  // await fetchplacementPosition();
+  await fetchplacementPosition();
 });
 const fetchPublishFile = async () => {
   await http
@@ -90,17 +87,17 @@ function filterByPersonIdNull(obj: any) {
 }
 
 // โหลด position
-// const placementPosition = ref<any>([]);
-// const fetchplacementPosition = async () => {
-//   await http
-//     .get(config.API.placementPosition())
-//     .then((res: any) => {
-//       placementPosition.value = res.data.result;
-//     })
-//     .catch((e: any) => {
-//       messageError($q, e);
-//     });
-// };
+const placementPosition = ref<any>([]);
+const fetchplacementPosition = async () => {
+  await http
+    .get(config.API.apppointmentPosition())
+    .then((res: any) => {
+      placementPosition.value = res.data.result;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
 
 const search = ref<string>("");
 //reset Tree Filter
@@ -191,7 +188,7 @@ const saveAppoint = async () => {
           // await resetFilter();
           await fetchPublishFile();
           await loadTreeData();
-          // await fetchplacementPosition();
+          await fetchplacementPosition();
           hideLoader();
         });
     }
@@ -367,10 +364,10 @@ const selectedPosition = async (data: any) => {
   console.log("dataForm", dataForm);
 };
 
-// const checkPosition = (val: string) => {
-//   const num = placementPosition.value.findIndex((e: string) => e === val);
-//   return num;
-// };
+const checkPosition = (val: string) => {
+  const num = placementPosition.value.findIndex((e: string) => e === val);
+  return num;
+};
 const personal = ref<any>();
 const expanded = ref<string[]>([]);
 
@@ -506,13 +503,12 @@ function findByPerson(element: any): any {
                           :active="selected == prop.node.keyId"
                           @click="selectedPosition(prop.node)"
                           :disable="
-                            prop.node.name != null 
-                         
+                            prop.node.name != null ||
+                            checkPosition(prop.node.positionNumId) != -1
                           "
                           active-class="my-list-link text-primary text-weight-medium"
                           class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                         >
-                          <!-- checkPosition(prop.node.positionNumId) != -1 -->
                           <img
                             v-if="
                               prop.node.avatar == '' ||
diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index c06310ff1..e95135d42 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -33,6 +33,7 @@ const title = ref<ResponseTitle>({
 const appointment = ref<any>([]);
 
 const edit = ref<boolean>(false);
+const profileId = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
@@ -53,8 +54,9 @@ const fecthappointmentByid = async () => {
     .then((res: any) => {
       const data = res.data.result;
       appointment.value = data;
-      console.log(data);
+      // console.log(data);
 
+      profileId.value = data.profileId;
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
@@ -131,16 +133,7 @@ const getClass = (val: boolean) => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
     รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -149,15 +142,8 @@ const getClass = (val: boolean) => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${paramsId}`)"
-      />
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)" />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -204,36 +190,12 @@ const getClass = (val: boolean) => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn
-          outline
-          color="primary"
-          dense
-          icon-right="mdi-file-edit-outline"
-          class="q-px-sm"
-          label="แก้ไข"
-          style="width: 80px"
-          @click="edit = !edit"
-        />
+        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" class="q-px-sm" label="แก้ไข"
+          style="width: 80px" @click="edit = !edit" />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn
-          outline
-          color="public"
-          dense
-          class="q-px-sm"
-          label="บันทึก"
-          style="width: 80px"
-          @click="clickSave"
-        />
-        <q-btn
-          outline
-          color="red"
-          dense
-          class="q-px-sm"
-          label="ยกเลิก"
-          style="width: 80px"
-          @click="edit = !edit"
-        />
+        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="clickSave" />
+        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="edit = !edit" />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -243,19 +205,9 @@ const getClass = (val: boolean) => {
           <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
         </div>
         <div class="col-12">
-          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="educationOld"
-            :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-            hide-bottom-space
-            :label="`${'วุฒิการศึกษา'}`"
-            type="text"
-          />
+          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+            v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
+            :label="`${'วุฒิการศึกษา'}`" type="text" />
         </div>
       </div>
       <div class="row col-12 q-pa-md">
@@ -268,85 +220,38 @@ const getClass = (val: boolean) => {
             </div>
 
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
             </div>
           </div>
 
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space
-                :label="`${'ระดับ'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
+                :label="`${'ระดับ'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
+                :label="`${'เลขที่'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
+                :label="`${'เงินเดือน'}`" type="number" />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
@@ -368,41 +273,22 @@ const getClass = (val: boolean) => {
           </div> -->
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
+                :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
+                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
-                  >
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
+                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
+                      <q-icon name="event" class="cursor-pointer" :style="edit
+                          ? 'color: var(--q-primary)'
+                          : 'color: var(--q-grey)'
+                        ">
                       </q-icon>
                     </template>
                   </q-input>
@@ -411,19 +297,9 @@ const getClass = (val: boolean) => {
             </div>
           </div>
           <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
+              :label="`${'หมายเหตุ '}`" type="textarea" />
           </div>
         </div>
       </div>
@@ -435,11 +311,13 @@ const getClass = (val: boolean) => {
   border-radius: 5px;
   height: 70px;
 }
+
 .text-top {
   color: gray;
   font-weight: 400;
   padding-bottom: 3px;
 }
+
 .text-detail {
   font-weight: 500;
 }
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index 6f7e31dec..5ea290e72 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -6,7 +6,6 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type {
-  TypeFile,
   ResponseDataDetail,
 } from "@/modules/05_placement/interface/response/Transfer";
 import type { QTableProps, QForm } from "quasar";
@@ -37,6 +36,7 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 const responseData = ref<ResponseDataDetail>({
+  profileId: "",
   avataPath: "",
   createdAt: new Date(),
   date: new Date(),
@@ -78,13 +78,14 @@ const fecthOther = async () => {
     .then((res: any) => {
       const data = res.data.result;
       Otherdata.value = res.data.result;
-      console.log(data);
+      // console.log(data);
 
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
 
+      responseData.value.profileId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.date =
         data.date !== null ? new Date(data.date) : new Date();
@@ -189,7 +190,7 @@ const getClass = (val: boolean) => {
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${paramsId}`)"
+        @click="router.push(`/registry/${responseData.profileId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index add0f7ae2..9bae15e65 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -25,7 +25,7 @@
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${paramsId}`)"
+        @click="router.push(`/registry/${profileId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
@@ -618,14 +618,15 @@ const title = ref<ResponseTitle>({
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
 
+const profileId = ref<string>("");
 const educationOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const posNo = ref<string>("");
 const salary = ref<number>(0);
-const organization = ref<string>("");
-const date = ref<Date | null>(null);
+// const organization = ref<string>("");
+// const date = ref<Date | null>(null);
 const reason = ref<string>("");
 
 const informaData = ref<Information>(defaultInformation);
@@ -738,6 +739,7 @@ const getData = async () => {
     .then(async (res: any) => {
       const data = res.data.result;
 
+      profileId.value = data.profileId;
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
diff --git a/src/modules/05_placement/components/Receive/receiveModal.vue b/src/modules/05_placement/components/Receive/receiveModal.vue
index b0181ad2f..b6a86d393 100644
--- a/src/modules/05_placement/components/Receive/receiveModal.vue
+++ b/src/modules/05_placement/components/Receive/receiveModal.vue
@@ -100,7 +100,7 @@ function filterByPersonIdNull(obj: any) {
 const placementPosition = ref<any>([]);
 const fetchplacementPosition = async () => {
   await http
-    .get(config.API.placementPosition())
+    .get(config.API.receiveDataPosition())
     .then((res: any) => {
       placementPosition.value = res.data.result;
     })
diff --git a/src/modules/05_placement/components/Relocation/RelocationModal.vue b/src/modules/05_placement/components/Relocation/RelocationModal.vue
index b470205cd..4651480d3 100644
--- a/src/modules/05_placement/components/Relocation/RelocationModal.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationModal.vue
@@ -100,7 +100,7 @@ function filterByPersonIdNull(obj: any) {
 const placementPosition = ref<any>([]);
 const fetchplacementPosition = async () => {
   await http
-    .get(config.API.placementPosition())
+    .get(config.API.relocationMainPosition())
     .then((res: any) => {
       placementPosition.value = res.data.result;
     })
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
index 5010c6c3f..07bf9456e 100644
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -19,7 +19,7 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 const edit = ref<boolean>(false);
-const personId = route.params.id as string;
+const dataId = route.params.id as string;
 const {
   date2Thai,
   dialogMessage,
@@ -36,7 +36,7 @@ const name = ref<string>("นายสมคิด ยอดใจ");
 const level = ref<string>("ชำนาญการพิเศษ");
 const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
 const fullname = ref<string>("");
-const id = ref<string>("");
+const profileId = ref<string>("");
 const prefix = ref<string>("");
 const prefixId = ref<string>("");
 const firstname = ref<string>("");
@@ -114,9 +114,10 @@ const isActive = ref<string>("");
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.relocationDetail(personId))
+    .get(config.API.relocationDetail(dataId))
     .then((res: any) => {
       const data = res.data.result;
+      profileId.value = data.profileId;
       citizenId.value = data.citizenId;
       fullname.value = `${data.prefix}${data.firstname} ${data.lastname}`;
       prefixId.value = data.prefixId;
@@ -205,7 +206,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.relocationMainEdit(personId.toString()), body)
+    .put(config.API.relocationMainEdit(dataId), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
@@ -221,35 +222,6 @@ const saveData = async () => {
     });
 };
 
-// const confirmMessage = async () => {
-//     dialogMessage(
-//       $q,
-//       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-//       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
-//       "mdi-help-circle-outline",
-//       "ยืนยัน",
-//       "primary",
-//       () => sendConfirm(),
-//       undefined
-//     );
-//   };
-// const sendConfirm = async () => {
-//     showLoader();
-//     await http
-//       .get(config.API.transferConfirmId(personId.toString()))
-//       .then((res: any) => {
-//         //   const data = res.data.result;
-//         //   console.log(data);
-//         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
-//       })
-//       .catch((e) => {
-//         messageError($q, e);
-//       })
-//       .finally(async () => {
-//         await getData();
-//         hideLoader();
-//       });
-//   };
 onMounted(async () => {
   await getData();
 });
@@ -279,7 +251,7 @@ onMounted(async () => {
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
+        @click="router.push(`/registry/${profileId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index e53d85afa..ece92154d 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -1,30 +1,14 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
     รายละเอียดการส่งตัวกลับ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
       <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
-      />
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)" />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -79,24 +63,8 @@
         /> -->
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn
-          outline
-          color="public"
-          dense
-          class="q-px-sm"
-          label="บันทึก"
-          style="width: 80px"
-          @click="conditionSave"
-        />
-        <q-btn
-          outline
-          color="red"
-          dense
-          class="q-px-sm"
-          label="ยกเลิก"
-          style="width: 80px"
-          @click="cancelBtn"
-        />
+        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="conditionSave" />
+        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancelBtn" />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -110,140 +78,64 @@
               </div>
             </div>
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัด'}`"
-                type="textarea"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                hide-bottom-space
-                :label="`${'ระดับ'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
+                :label="`${'ระดับ'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
+                :label="`${'เลขที่'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
+                :label="`${'เงินเดือน'}`" type="number" />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
+                :label="`${'โอนไปสังกัด'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
+                :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
+                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ตั้งแต่วัน'}`"
-                  >
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ตั้งแต่วัน'}`">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
+                      <q-icon name="event" class="cursor-pointer" :style="edit
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
+                        ">
                       </q-icon>
                     </template>
                   </q-input>
@@ -252,19 +144,9 @@
             </div>
           </div>
           <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
+              :label="`${'หมายเหตุ '}`" type="textarea" />
           </div>
         </div>
       </div>
@@ -282,17 +164,13 @@ import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
 import type { QTableProps, QForm } from "quasar";
-// import type {
-//   TypeFile,
-//   ResponseDataDetail,
-// } from "@/modules/05_placement/interface/response/Transfer";
 
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 const edit = ref<boolean>(false);
-const personId = route.params.id as string;
+const dataId = route.params.id as string;
 const {
   date2Thai,
   dialogMessage,
@@ -303,11 +181,9 @@ const {
   dialogConfirm,
 } = mixin;
 
-const roleAdmin = ref<boolean>(false);
 const myForm = ref<QForm | null>(null);
-const name = ref<string>("นายสมคิด ยอดใจ");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+
+const personId = ref<string>("");
 const fullname = ref<string>("");
 const id = ref<string>("");
 const prefix = ref<string>("");
@@ -327,59 +203,16 @@ const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const isActive = ref<string>("");
-// const responseData = ref<ResponseDataDetail>({
-//   createdAt: new Date(),
-//   date: new Date(),
-//   id: "",
-//   organization: "",
-//   organizationPositionOld: "",
-//   positionLevelOld: "",
-//   positionNumberOld: "",
-//   positionTypeOld: "",
-//   reason: "",
-//   salary: 0,
-//   status: "",
-// });
-
-// const rows = ref<TypeFile[]>([]);
-// const columns = ref<QTableProps["columns"]>([
-//   {
-//     name: "no",
-//     align: "left",
-//     label: "ลำดับ",
-//     sortable: true,
-//     field: "no",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "fileName",
-//     align: "left",
-//     label: "ชื่อไฟล์",
-//     sortable: true,
-//     field: "fileName",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "btnMicrosoft",
-//     align: "right",
-//     label: "ปุ่ม",
-//     sortable: true,
-//     field: "btnMicrosoft",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-// ]);
 
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.repatriationDetail(personId))
+    .get(config.API.repatriationDetail(dataId))
     .then((res: any) => {
       const data = res.data.result;
       (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
         (id.value = data.id);
+      personId.value = data.profileId;
       prefix.value = data.prefix;
       firstName.value = data.firstName;
       lastName.value = data.lastName;
@@ -399,19 +232,20 @@ const getData = async () => {
       isActive.value = data.isActive;
     })
     .catch((e) => {
-      //   messageError($q, e);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
     });
 };
+
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
 };
-//
+
 const conditionSave = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success: any) => {
@@ -443,7 +277,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.repatriationMainEdit(personId.toString()), body)
+    .put(config.API.repatriationMainEdit(dataId), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
@@ -459,35 +293,6 @@ const saveData = async () => {
     });
 };
 
-// const confirmMessage = async () => {
-//     dialogMessage(
-//       $q,
-//       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-//       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
-//       "mdi-help-circle-outline",
-//       "ยืนยัน",
-//       "primary",
-//       () => sendConfirm(),
-//       undefined
-//     );
-//   };
-// const sendConfirm = async () => {
-//     showLoader();
-//     await http
-//       .get(config.API.transferConfirmId(personId.toString()))
-//       .then((res: any) => {
-//         //   const data = res.data.result;
-//         //   console.log(data);
-//         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
-//       })
-//       .catch((e) => {
-//         messageError($q, e);
-//       })
-//       .finally(async () => {
-//         await getData();
-//         hideLoader();
-//       });
-//   };
 onMounted(async () => {
   await getData();
 });
@@ -497,11 +302,13 @@ onMounted(async () => {
   border-radius: 5px;
   height: 70px;
 }
+
 .text-top {
   color: gray;
   font-weight: 400;
   padding-bottom: 3px;
 }
+
 .text-detail {
   font-weight: 500;
 }
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 05a1fb05f..b58a81fd6 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -25,7 +25,7 @@
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
+        @click="router.push(`/registry/${responseData.profileId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
@@ -380,7 +380,7 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const personId = route.params.id;
+const dataId = route.params.id;
 const {
   date2Thai,
   dialogMessage,
@@ -405,6 +405,7 @@ const date = ref<Date | null>(null);
 const reason = ref<string>("");
 
 const responseData = ref<ResponseDataDetail>({
+  profileId: "",
   avataPath: "",
   createdAt: new Date(),
   date: new Date(),
@@ -462,7 +463,7 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.transferId(personId.toString()))
+    .get(config.API.transferId(dataId.toString()))
     .then((res: any) => {
       const data = res.data.result;
       //   console.log(data);
@@ -476,6 +477,7 @@ const getData = async () => {
         });
       }
       rows.value = list;
+      responseData.value.profileId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.date =
         data.date !== null ? new Date(data.date) : new Date();
@@ -523,7 +525,7 @@ const confirmMessage = async () => {
 const sendConfirm = async () => {
   showLoader();
   await http
-    .get(config.API.transferConfirmId(personId.toString()))
+    .get(config.API.transferConfirmId(dataId.toString()))
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
@@ -566,7 +568,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.transferId(personId.toString()), body)
+    .put(config.API.transferId(dataId.toString()), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 253f2f775..cbf1bab25 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -1,30 +1,14 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
     รายละเอียดการช่วยราชการ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
       <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
-      />
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)" />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -67,36 +51,12 @@
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn
-          outline
-          color="primary"
-          dense
-          icon-right="mdi-file-edit-outline"
-          class="q-px-sm"
-          label="แก้ไข"
-          style="width: 80px"
-          @click="edit = !edit"
-        />
+        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" class="q-px-sm" label="แก้ไข"
+          style="width: 80px" @click="edit = !edit" />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn
-          outline
-          color="public"
-          dense
-          class="q-px-sm"
-          label="บันทึก"
-          style="width: 80px"
-          @click="conditionSave"
-        />
-        <q-btn
-          outline
-          color="red"
-          dense
-          class="q-px-sm"
-          label="ยกเลิก"
-          style="width: 80px"
-          @click="cancelBtn"
-        />
+        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="conditionSave" />
+        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancelBtn" />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -110,19 +70,9 @@
               </div>
             </div>
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่ง'}`"
-                type="textarea"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space :label="`${'ตำแหน่ง'}`" type="textarea" />
             </div>
           </div>
           <!-- <div class="col-xs-6 col-sm-3 row items-center">
@@ -193,58 +143,28 @@
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
-              />
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
             </div>
           </div>
           <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateStart"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateStart" :locale="'th'" autoApply
+                :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    :readonly="!edit"
-                    lazy-rules
-                    :borderless="!edit"
+                  <q-input :class="getClass(edit)" :outlined="edit" dense :readonly="!edit" lazy-rules :borderless="!edit"
                     :model-value="dateStart !== null ? date2Thai(dateStart) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ตั้งแต่วัน'}`"
-                  >
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ตั้งแต่วัน'}`">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
+                      <q-icon name="event" class="cursor-pointer" :style="edit
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
+                        ">
                       </q-icon>
                     </template>
                   </q-input>
@@ -254,42 +174,21 @@
           </div>
           <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateEnd"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateEnd" :locale="'th'" autoApply
+                :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input
-                  :readonly="!edit"
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
+                  <q-input :readonly="!edit" :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
                     :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
-                    :label="`${'ถึงวันที่'}`"
-                  >
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ถึงวันที่'}`">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
+                      <q-icon name="event" class="cursor-pointer" :style="edit
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
+                        ">
                       </q-icon>
                     </template>
                   </q-input>
@@ -298,19 +197,9 @@
             </div>
           </div>
           <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
+              :label="`${'หมายเหตุ '}`" type="textarea" />
           </div>
         </div>
       </div>
@@ -338,7 +227,7 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 const edit = ref<boolean>(false);
-const personId = route.params.id as string;
+const dataId = route.params.id as string;
 const {
   date2Thai,
   dialogConfirm,
@@ -355,6 +244,7 @@ const level = ref<string>("ชำนาญการพิเศษ");
 const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
 const fullname = ref<string>("");
 const id = ref<string>("");
+const profileId = ref<string>("");
 const prefix = ref<string>("");
 const firstName = ref<string>("");
 const lastName = ref<string>("");
@@ -373,59 +263,16 @@ const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const isActive = ref<string>("");
-// const responseData = ref<ResponseDataDetail>({
-//   createdAt: new Date(),
-//   date: new Date(),
-//   id: "",
-//   organization: "",
-//   organizationPositionOld: "",
-//   positionLevelOld: "",
-//   positionNumberOld: "",
-//   positionTypeOld: "",
-//   reason: "",
-//   salary: 0,
-//   status: "",
-// });
-
-// const rows = ref<TypeFile[]>([]);
-// const columns = ref<QTableProps["columns"]>([
-//   {
-//     name: "no",
-//     align: "left",
-//     label: "ลำดับ",
-//     sortable: true,
-//     field: "no",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "fileName",
-//     align: "left",
-//     label: "ชื่อไฟล์",
-//     sortable: true,
-//     field: "fileName",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "btnMicrosoft",
-//     align: "right",
-//     label: "ปุ่ม",
-//     sortable: true,
-//     field: "btnMicrosoft",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-// ]);
 
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.officerDetail(personId))
+    .get(config.API.officerDetail(dataId))
     .then((res: any) => {
       const data = res.data.result;
       (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
         (id.value = data.id);
+      profileId.value = data.profileId;
       prefix.value = data.prefix;
       firstName.value = data.firstName;
       lastName.value = data.lastName;
@@ -463,13 +310,13 @@ const conditionSave = async () => {
   // if (myForm.value !== null) {
   //   myForm.value.validate().then((success: any) => {
   //     if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
+  dialogConfirm(
+    $q,
+    async () => await saveData(),
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+}
 //     });
 //   }
 // };
@@ -491,7 +338,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.officerMainEdit(personId.toString()), body)
+    .put(config.API.officerMainEdit(dataId), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
@@ -507,35 +354,6 @@ const saveData = async () => {
     });
 };
 
-// const confirmMessage = async () => {
-//     dialogMessage(
-//       $q,
-//       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-//       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
-//       "mdi-help-circle-outline",
-//       "ยืนยัน",
-//       "primary",
-//       () => sendConfirm(),
-//       undefined
-//     );
-//   };
-// const sendConfirm = async () => {
-//     showLoader();
-//     await http
-//       .get(config.API.transferConfirmId(personId.toString()))
-//       .then((res: any) => {
-//         //   const data = res.data.result;
-//         //   console.log(data);
-//         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
-//       })
-//       .catch((e) => {
-//         messageError($q, e);
-//       })
-//       .finally(async () => {
-//         await getData();
-//         hideLoader();
-//       });
-//   };
 onMounted(async () => {
   await getData();
 });
@@ -545,11 +363,13 @@ onMounted(async () => {
   border-radius: 5px;
   height: 70px;
 }
+
 .text-top {
   color: gray;
   font-weight: 400;
   padding-bottom: 3px;
 }
+
 .text-detail {
   font-weight: 500;
 }
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index a99da640e..adf848a96 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -23,6 +23,7 @@
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personalId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
diff --git a/src/modules/05_placement/interface/response/Transfer.ts b/src/modules/05_placement/interface/response/Transfer.ts
index 8a575f438..c554c52ee 100644
--- a/src/modules/05_placement/interface/response/Transfer.ts
+++ b/src/modules/05_placement/interface/response/Transfer.ts
@@ -27,6 +27,7 @@ interface TypeFile {
 }
 
 interface ResponseDataDetail {
+  profileId: string;
   avataPath: string;
   createdAt: Date;
   date: Date;
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index adc8da847..bbabe5770 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -55,8 +55,8 @@ const relocationbyId = () => import("@/modules/05_placement/components/Relocatio
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-const receiveDetail = () =>
-  import("@/modules/05_placement/components/Receive/receiveDetail.vue");
+// const receiveDetail = () =>
+//   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
 const receiveDetail2 = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail2.vue");
 const ReceiveAdd = () =>
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
index d6ef47acd..5c156480c 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@@ -25,7 +25,7 @@
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
+        @click="router.push(`/registry/${responseData.personId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
@@ -66,88 +66,6 @@
     </div>
   </q-card>
 
-  <!-- <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการปลดออก</div>
-      <q-space />
-      <q-btn
-        v-if="!roleAdmin"
-        outline
-        color="primary"
-        dense
-        icon-right="arrow_forward"
-        class="q-px-sm"
-        label="ส่งคำร้องไปยัง สกจ."
-        @click="confirmMessage"
-      />
-      <q-btn
-        v-else
-        outline
-        color="primary"
-        dense
-        icon-right="download"
-        class="q-px-sm"
-        label="ดาวน์โหลด"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">หน่วยงานที่ปลดออกไป</div>
-            <div class="col-12 text-detail">
-              {{ responseData.organization }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ปลดออก</div>
-            <div class="col-12 text-detail">
-              {{ responseData.reason }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn flat dense round color="red" icon="picture_as_pdf">
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-              <q-btn flat dense round color="blue" icon="mdi-file-word">
-                <q-tooltip>ไฟล์ WORD</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card> -->
-
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
@@ -380,7 +298,7 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const personId = route.params.id;
+const dataId = route.params.id.toString();
 const {
   date2Thai,
   dialogMessage,
@@ -404,6 +322,7 @@ const date = ref<Date | null>(null);
 const reason = ref<string>("");
 
 const responseData = ref<ResponseDataDetail>({
+  personId: "",
   avataPath: "",
   createdAt: new Date(),
   date: new Date(),
@@ -461,10 +380,11 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.dischargeByid(personId.toString()))
+    .get(config.API.dischargeByid(dataId))
     .then((res: any) => {
       const data = res.data.result;
 
+      responseData.value.personId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.date =
         data.date !== null ? new Date(data.date) : new Date();
@@ -500,37 +420,6 @@ const getData = async () => {
     });
 };
 
-const confirmMessage = async () => {
-  dialogMessage(
-    $q,
-    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
-    "mdi-help-circle-outline",
-    "ยืนยัน",
-    "primary",
-    () => sendConfirm(),
-    undefined
-  );
-};
-
-const sendConfirm = async () => {
-  showLoader();
-  await http;
-  //   .get(config.API.transferConfirmId(personId.toString()))
-  //   .then((res: any) => {
-  //     //   const data = res.data.result;
-  //     //   console.log(data);
-  //     success($q, "ส่งคำร้องข้อมูลสำเร็จ");
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     await getData();
-  //     hideLoader();
-  //   });
-};
-
 const conditionSave = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -563,7 +452,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.dischargeByid(personId.toString()), body)
+    .put(config.API.dischargeByid(dataId), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index b05ebdda3..33535a08b 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -25,7 +25,7 @@
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
+        @click="router.push(`/registry/${responseData.personId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
@@ -66,88 +66,6 @@
     </div>
   </q-card>
 
-  <!-- <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการให้ออก</div>
-      <q-space />
-      <q-btn
-        v-if="!roleAdmin"
-        outline
-        color="primary"
-        dense
-        icon-right="arrow_forward"
-        class="q-px-sm"
-        label="ส่งคำร้องไปยัง สกจ."
-        @click="confirmMessage"
-      />
-      <q-btn
-        v-else
-        outline
-        color="primary"
-        dense
-        icon-right="download"
-        class="q-px-sm"
-        label="ดาวน์โหลด"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">หน่วยงานที่ให้ออก</div>
-            <div class="col-12 text-detail">
-              {{ responseData.organization }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ให้ออก</div>
-            <div class="col-12 text-detail">
-              {{ responseData.reason }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn flat dense round color="red" icon="picture_as_pdf">
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-              <q-btn flat dense round color="blue" icon="mdi-file-word">
-                <q-tooltip>ไฟล์ WORD</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card> -->
-
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
@@ -380,7 +298,7 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const personId = route.params.id;
+const dataId = route.params.id.toString();
 const {
   date2Thai,
   dialogMessage,
@@ -404,6 +322,7 @@ const date = ref<Date | null>(null);
 const reason = ref<string>("");
 
 const responseData = ref<ResponseDataDetail>({
+  personId: "",
   avataPath: "",
   createdAt: new Date(),
   date: new Date(),
@@ -461,10 +380,11 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.outByid(personId.toString()))
+    .get(config.API.outByid(dataId))
     .then((res: any) => {
       const data = res.data.result;
-
+      
+      responseData.value.personId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.date =
         data.date !== null ? new Date(data.date) : new Date();
@@ -500,37 +420,6 @@ const getData = async () => {
     });
 };
 
-const confirmMessage = async () => {
-  dialogMessage(
-    $q,
-    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
-    "mdi-help-circle-outline",
-    "ยืนยัน",
-    "primary",
-    () => sendConfirm(),
-    undefined
-  );
-};
-
-const sendConfirm = async () => {
-  showLoader();
-  await http;
-  //   .get(config.API.transferConfirmId(personId.toString()))
-  //   .then((res: any) => {
-  //     //   const data = res.data.result;
-  //     //   console.log(data);
-  //     success($q, "ส่งคำร้องข้อมูลสำเร็จ");
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     await getData();
-  //     hideLoader();
-  //   });
-};
-
 const conditionSave = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -563,7 +452,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.outByid(personId.toString()), body)
+    .put(config.API.outByid(dataId), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index 7a86eb44a..f99705f62 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -25,7 +25,7 @@
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
+        @click="router.push(`/registry/${responseData.personId}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
@@ -66,88 +66,6 @@
     </div>
   </q-card>
 
-  <!-- <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการไล่ออก</div>
-      <q-space />
-      <q-btn
-        v-if="!roleAdmin"
-        outline
-        color="primary"
-        dense
-        icon-right="arrow_forward"
-        class="q-px-sm"
-        label="ส่งคำร้องไปยัง สกจ."
-        @click="confirmMessage"
-      />
-      <q-btn
-        v-else
-        outline
-        color="primary"
-        dense
-        icon-right="download"
-        class="q-px-sm"
-        label="ดาวน์โหลด"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">หน่วยงานที่ไล่ออก</div>
-            <div class="col-12 text-detail">
-              {{ responseData.organization }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ไล่ออก</div>
-            <div class="col-12 text-detail">
-              {{ responseData.reason }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn flat dense round color="red" icon="picture_as_pdf">
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-              <q-btn flat dense round color="blue" icon="mdi-file-word">
-                <q-tooltip>ไฟล์ WORD</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card> -->
-
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
@@ -387,7 +305,7 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const personId = route.params.id;
+const dataId = route.params.id.toString();
 const {
   date2Thai,
   dialogMessage,
@@ -411,6 +329,7 @@ const date = ref<Date | null>(null);
 const reason = ref<string>("");
 
 const responseData = ref<ResponseDataDetail>({
+  personId: "",
   avataPath: "",
   createdAt: new Date(),
   date: new Date(),
@@ -468,10 +387,11 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.expulsionByid(personId.toString()))
+    .get(config.API.expulsionByid(dataId))
     .then((res: any) => {
       const data = res.data.result;
 
+      responseData.value.personId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.date =
         data.date !== null ? new Date(data.date) : new Date();
@@ -508,37 +428,6 @@ const getData = async () => {
     });
 };
 
-const confirmMessage = async () => {
-  dialogMessage(
-    $q,
-    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
-    "mdi-help-circle-outline",
-    "ยืนยัน",
-    "primary",
-    () => sendConfirm(),
-    undefined
-  );
-};
-
-const sendConfirm = async () => {
-  showLoader();
-  await http;
-  //   .get(config.API.transferConfirmId(personId.toString()))
-  //   .then((res: any) => {
-  //     //   const data = res.data.result;
-  //     //   console.log(data);
-  //     success($q, "ส่งคำร้องข้อมูลสำเร็จ");
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     await getData();
-  //     hideLoader();
-  //   });
-};
-
 const conditionSave = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -571,7 +460,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.expulsionByid(personId.toString()), body)
+    .put(config.API.expulsionByid(dataId), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
diff --git a/src/modules/06_retirement/interface/response/discharged.ts b/src/modules/06_retirement/interface/response/discharged.ts
index 8a575f438..62d22a496 100644
--- a/src/modules/06_retirement/interface/response/discharged.ts
+++ b/src/modules/06_retirement/interface/response/discharged.ts
@@ -27,6 +27,7 @@ interface TypeFile {
 }
 
 interface ResponseDataDetail {
+  personId: string;
   avataPath: string;
   createdAt: Date;
   date: Date;
diff --git a/src/modules/06_retirement/interface/response/expulsion.ts b/src/modules/06_retirement/interface/response/expulsion.ts
index 8a575f438..62d22a496 100644
--- a/src/modules/06_retirement/interface/response/expulsion.ts
+++ b/src/modules/06_retirement/interface/response/expulsion.ts
@@ -27,6 +27,7 @@ interface TypeFile {
 }
 
 interface ResponseDataDetail {
+  personId: string;
   avataPath: string;
   createdAt: Date;
   date: Date;

From c5286182d96929a21ad3b6ed0c90a3ea5f848b4c Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 19 Aug 2023 20:14:41 +0700
Subject: [PATCH 07/11] =?UTF-8?q?fix=20bug=20&=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainDetail.vue       |  14 +-
 .../08_registryEmployee/views/Main.vue        | 317 ++++--------------
 2 files changed, 84 insertions(+), 247 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index b5059231d..687270aa0 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -76,7 +76,7 @@ const activeTab = ref<string>("tab1");
               </q-item-section> -->
 
               <q-item-section>
-                แบบประเมินผล<br/>(ผู้บังคับบัญชา)
+                แบบประเมินผล<br />(ผู้บังคับบัญชา)
               </q-item-section>
             </q-item>
 
@@ -87,7 +87,7 @@ const activeTab = ref<string>("tab1");
               </q-item-section> -->
 
               <q-item-section>
-                แบบประเมินผล<br/>(คณะกรรมการ)
+                แบบประเมินผล<br />(คณะกรรมการ)
               </q-item-section>
             </q-item>
 
@@ -98,9 +98,15 @@ const activeTab = ref<string>("tab1");
               </q-item-section> -->
 
               <q-item-section>
-                แบบรายงาน<br/>การประเมินฯ
+                แบบรายงาน<br />การประเมินฯ
               </q-item-section>
             </q-item>
+            <q-item>
+              <q-item-section>
+                ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ
+              </q-item-section>
+            </q-item>
+
           </q-list>
         </q-scroll-area>
       </q-drawer>
@@ -112,7 +118,7 @@ const activeTab = ref<string>("tab1");
             </q-tab-panel>
 
             <q-tab-panel name="tab2">
-              <TabsTemplate1 :activeTab="activeTab"/>
+              <TabsTemplate1 :activeTab="activeTab" />
             </q-tab-panel>
 
             <q-tab-panel name="tab3">
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index acb3d0e6c..044186379 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -7,62 +7,26 @@
       <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="mdi-account-arrow-right"
-        @click="clickAddOrder"
-      />
+      <q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="clickAddOrder" />
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
-        <q-input
-          standout
-          dense
-          v-model="filter"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
+        <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
+          style="max-width: 200px" class="q-ml-sm">
           <template v-slot:append>
             <q-icon v-if="filter == ''" name="search" />
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
-        <q-select
-          v-model="visibleColumnsEmployeeTemp"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
+        <q-select v-model="visibleColumnsEmployeeTemp" :display-value="$q.lang.table.columns" multiple outlined dense
+          :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
+          class="gt-xs q-ml-sm" />
       </div>
     </div>
     <div class="col-12 q-pt-sm">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumnsEmployeeTemp"
-        :filter="filter"
-        row-key="id"
-      >
+      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumnsEmployeeTemp" :filter="filter"
+        row-key="id">
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -76,25 +40,13 @@
             <q-td key="no" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.rowIndex + 1 }}
             </q-td>
-            <q-td
-              key="fullname"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="fullname" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.fullname }}
             </q-td>
-            <q-td
-              key="newAgency"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
-              <div
-                class="col-12"
-                v-if="
-                  props.row.draftOrganizationOrganization == null &&
-                  props.row.draftPositionEmployee == null
-                "
-              >
+            <q-td key="newAgency" :props="props" @click="redirectToPage(props.row.id)">
+              <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
+                props.row.draftPositionEmployee == null
+                ">
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -108,15 +60,8 @@
                 </div>
               </div>
             </q-td>
-            <q-td
-              key="currentAgency"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
-              <div
-                class="col-12"
-                v-if="props.row.oc == null && props.row.position == null"
-              >
+            <q-td key="currentAgency" :props="props" @click="redirectToPage(props.row.id)">
+              <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -161,124 +106,53 @@
             <q-td key="oc" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.oc }}
             </q-td> -->
-            <q-td
-              key="amount"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="amount" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.amount }}
             </q-td>
-            <q-td
-              key="govAge"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="govAge" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.govAge }}
             </q-td>
-            <q-td
-              key="dateAppoint"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="dateAppoint" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.dateAppoint }}
             </q-td>
-            <q-td
-              key="dateStart"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="dateStart" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.dateStart }}
             </q-td>
-            <q-td
-              key="salaryDate"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="salaryDate" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.salaryDate }}
             </q-td>
-            <q-td
-              key="refSalary"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="refSalary" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.refSalary }}
             </q-td>
-            <q-td
-              key="age"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="age" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.age }}
             </q-td>
-            <q-td
-              key="fullnameOld"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="fullnameOld" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.fullnameOld }}
             </q-td>
-            <q-td
-              key="createdAt"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="createdAt" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.createdAt }}
             </q-td>
-            <q-td
-              key="isLeave"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="isLeave" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.isLeave }}
             </q-td>
-            <q-td
-              key="leaveDateOrder"
-              :props="props"
-              @click="redirectToPage(props.row.id)"
-            >
+            <q-td key="leaveDateOrder" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.leaveDateOrder }}
             </q-td>
 
             <q-td auto-width>
-              <q-btn
-                icon="mdi-dots-vertical"
-                size="12px"
-                color="grey-7"
-                flat
-                round
-                dense
-              >
+              <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
                 <q-menu transition-show="jump-down" transition-hide="jump-up">
                   <q-list dense style="min-width: 160px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon
-                          color="blue"
-                          size="xs"
-                          name="mdi-account-settings"
-                        />
+                    <q-item clickable v-close-popup @click="editDetail(props.row)">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon color="blue" size="xs" name="mdi-account-settings" />
                       </q-item-section>
                       <q-item-section>กำหนดตำแหน่ง</q-item-section>
                     </q-item>
                     <q-separator />
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="clickDelete(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
+                    <q-item clickable v-close-popup @click="clickDelete(props.row.id)">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                         <q-icon color="red" size="xs" name="mdi-delete" />
                       </q-item-section>
                       <q-item-section>ลบ</q-item-section>
@@ -299,34 +173,16 @@
       <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
       <q-separator />
       <q-card-section class="q-pa-sm">
-        <d-table
-          :rows="rowsPosition"
-          :columns="columnsPosition"
-          row-key="id"
-          selection="single"
-          v-model:selected="selectedPosition"
-          :visible-columns="visibleColumnsPosition"
-        >
+        <d-table :rows="rowsPosition" :columns="columnsPosition" row-key="id" selection="single"
+          v-model:selected="selectedPosition" :visible-columns="visibleColumnsPosition">
           <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
+            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
           </template>
         </d-table>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="checkSave"
-          class="q-px-md"
-          ><!-- icon="mdi-content-save-outline"
+        <q-btn dense unelevated label="บันทึก" color="public" @click="checkSave" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
         </q-btn>
       </q-card-actions>
@@ -336,24 +192,14 @@
   <!-- dialog ส่งรายชื่อไปออกคำสั่ง -->
   <q-dialog v-model="modaladdOrder">
     <q-card style="width: 900px; max-width: 80vw">
-      <DialogHeader
-        tittle="ส่งรายชื่อไปออกคำสั่ง"
-        :close="clickCloseSendModal"
-      />
+      <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="clickCloseSendModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
           <div class="col-5">
             <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filter"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
+              <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา"
+                style="width: 850px; max-width: auto">
                 <template v-slot:append>
                   <q-icon name="search" />
                 </template>
@@ -362,32 +208,15 @@
           </div>
         </div>
 
-        <d-table
-          :rows="rowsOrder"
-          :columns="columnsOrder"
-          :visible-columns="visibleColumnsOrder"
-          :filter="filter"
-          row-key="id"
-          selection="single"
-          v-model:selected="selectedToOrder"
-        >
+        <d-table :rows="rowsOrder" :columns="columnsOrder" :visible-columns="visibleColumnsOrder" :filter="filter"
+          row-key="id" selection="single" v-model:selected="selectedToOrder">
           <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
+            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
+                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
               </q-td>
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
@@ -1168,8 +997,8 @@ const checkNull = (text: string) =>
   text == null
     ? ""
     : text == "00000000-0000-0000-0000-000000000000"
-    ? ""
-    : text;
+      ? ""
+      : text;
 
 const getPosition = async (id: string) => {
   showLoader();
@@ -1251,7 +1080,7 @@ const getPosition = async (id: string) => {
 const clickAddOrder = () => {
   modaladdOrder.value = true;
   const filteredRows = rowsOrder.value.filter(
-    (row) => row.positionEmployeePosition !== null
+    (row) => row.draftPositionEmployee !== null
   );
   rowsOrder.value = filteredRows;
 };
@@ -1259,8 +1088,8 @@ const clickAddOrder = () => {
 const clickCloseSendModal = () => {
   modaladdOrder.value = false;
 };
-const checkSave = () =>{
-  dialogConfirm($q,async() => await saveData())
+const checkSave = () => {
+  dialogConfirm($q, async () => await saveData())
 }
 const saveData = async () => {
   if (selectedPosition.value.length == 0) {
@@ -1280,8 +1109,8 @@ const saveData = async () => {
     await savePosition();
   }
 };
-const checkSaveOrder = () =>{
-  dialogConfirm($q,async() => await SaveOrder())
+const checkSaveOrder = () => {
+  dialogConfirm($q, async () => await SaveOrder())
 }
 const SaveOrder = async () => {
   if (selectedToOrder.value.length == 0) {
@@ -1298,7 +1127,8 @@ const SaveOrder = async () => {
     );
     return;
   } else {
-    await saveOrder();
+    // ส่งไปออกคำสั่ง
+    await sendToOrder();
   }
 };
 
@@ -1321,7 +1151,8 @@ const savePosition = async () => {
     });
 };
 
-const saveOrder = async () => {
+const sendToOrder = async () => {
+  modaladdOrder.value = false;
   //   showLoader();
   //   const data = {
   //     organizationEmployeeId: selectedPosition.value[0].id,
@@ -1349,9 +1180,9 @@ const modalOpenClose = () => {
   }
 };
 
-const next = (id: string) => {
-  router.push(`/registry-employee/${id}`);
-};
+// const next = (id: string) => {
+//   router.push(`/registry-employee/${id}`);
+// };
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@@ -1404,24 +1235,24 @@ const editDetail = async (row: any) => {
 };
 
 
-const clickDelete = (id: string) =>{
-  dialogRemove($q,async () => await deleteData(id))
+const clickDelete = (id: string) => {
+  dialogRemove($q, async () => await deleteData(id))
 }
 
-const deleteData = async(id: string) => {
-      showLoader();
-      await http
-        .delete(config.API.profileInforId(id))
-        .then((res) => {
-          success($q, "ลบข้อมูลการสอบสำเร็จ");
-          showEmployeeTemp();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        })
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.profileInforId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลการสอบสำเร็จ");
+      showEmployeeTemp();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    })
 };
 
 const nodeTree = async () => {

From b2a7e7dee5debc15cd1bc1d5c5ae3a427890a4cf Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 19 Aug 2023 21:04:49 +0700
Subject: [PATCH 08/11] fix import

---
 .../05_placement/components/probation/MainDetail.vue     | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 687270aa0..7872a1f65 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -17,15 +17,6 @@ const TabsTemplate2Format2 = defineAsyncComponent(
 const TabsTemplate3 = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
 );
-// const Tabs2 = defineAsyncComponent(
-//   () => import("@/modules/05_placement/components/probation/tabs/tabs2.vue")
-// );
-const Tabs3 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/tabs/tabs3.vue")
-);
-const Tabs4 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/tabs/tabs4.vue")
-);
 
 const router = useRouter();
 const drawer = ref<boolean>(true);

From 0f96b24df255a0d942556f9c8e3a955bbbc4946f Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 19 Aug 2023 21:56:00 +0700
Subject: [PATCH 09/11] =?UTF-8?q?-=20=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B9=84?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=A7=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7?=
 =?UTF-8?q?=20-=20=E0=B9=81=E0=B8=81=E0=B9=89=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.treelist.ts     |   2 +
 .../components/AppointMent/Main.vue           |  30 +--
 .../08_registryEmployee/views/Main.vue        | 229 ++++++++----------
 3 files changed, 106 insertions(+), 155 deletions(-)

diff --git a/src/api/02_organizational/api.treelist.ts b/src/api/02_organizational/api.treelist.ts
index 215036604..063b8af04 100644
--- a/src/api/02_organizational/api.treelist.ts
+++ b/src/api/02_organizational/api.treelist.ts
@@ -89,4 +89,6 @@ export default {
 
   organizationEmployeePositionId: (profileId: string) =>
     `${organizationEmployee}position/${profileId}`,
+  organizationEmployeeSendOrder: `${organizationEmployee}report`,
+
 };
diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
index 3104f9c59..3f0854ee7 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -131,32 +131,8 @@ const fecthTypeOption = async () => {
     });
 };
 
-const rows = ref<any>([
-  // {
-  //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-  //   citizenId: "1234444332222",
-  //   fullname: "นางสาวอย พชช",
-  //   organizationName: "นักจัดการงานทั่วไป",
-  //   orgName: "กลุ่มงานช่วยนักบริหาร",
-  //   organizationShortName: "สกจ.",
-  //   positionNumber: "กก. 1",
-  //   positionPath: "นักจัดการงานทั่วไป",
-  //   birthday: dateText(new Date("1989-09-03")),
-  // },
-]);
-const rows2 = ref<any>([
-  // {
-  //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-  //   citizenId: "1234444332222",
-  //   fullname: "นางสาวอย พชช",
-  //   organizationName: "นักจัดการงานทั่วไป",
-  //   orgName: "กลุ่มงานช่วยนักบริหาร",
-  //   organizationShortName: "สกจ.",
-  //   positionNumber: "กก. 1",
-  //   positionPath: "นักจัดการงานทั่วไป",
-  //   birthday: dateText(new Date("1989-09-03")),
-  // },
-]);
+const rows = ref<any>([]);
+const rows2 = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -714,7 +690,7 @@ const status = (val: string) => {
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
-          label="ส่งไปรายการแต่งตั้ง-เลื่อน"
+          label="ส่งไปออกคำสั่ง"
           @click="clickAddlist"
           color="public"
           :disable="checkSelected"
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 044186379..4011c8fb4 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -278,7 +278,7 @@
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" @click="checkSaveOrder" color="public" />
+        <q-btn label="ส่งไปออกคำสั่ง" @click="checkSaveOrder" color="public" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -1110,26 +1110,35 @@ const saveData = async () => {
   }
 };
 const checkSaveOrder = () => {
-  dialogConfirm($q, async () => await SaveOrder())
+  dialogConfirm($q, () => SaveOrder())
 }
 const SaveOrder = async () => {
-  if (selectedToOrder.value.length == 0) {
-    dialogMessageNotify(
-      $q,
-      "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง",
-      // "กรุณาเลือกตำแหน่ง",
-      // "warning",
-      // undefined,
-      // "orange",
-      // undefined,
-      // undefined,
-      // true
-    );
-    return;
-  } else {
-    // ส่งไปออกคำสั่ง
-    await sendToOrder();
-  }
+  // ส่งไปออกคำสั่ง
+  let pId: string[] = [];
+  selectedToOrder.value.forEach((e: any) => {
+    pId.push(e.id);
+  });
+  let data = {
+    id: pId,
+  };
+  console.log(data);
+  showLoader();
+  await http
+    .post(config.API.organizationEmployeeSendOrder, data)
+    .then((res: any) => {
+      // console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      // console.log(e);
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      modaladdOrder.value = false;
+      await showEmployeeTemp();
+      selectedToOrder.value = [];
+    });
 };
 
 const savePosition = async () => {
@@ -1151,26 +1160,6 @@ const savePosition = async () => {
     });
 };
 
-const sendToOrder = async () => {
-  modaladdOrder.value = false;
-  //   showLoader();
-  //   const data = {
-  //     organizationEmployeeId: selectedPosition.value[0].id,
-  //   };
-  //   await http
-  //     .put(config.API.organizationEmployeePositionId(id.value), data)
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       await nodeTree();
-  //       modalOpenClose();
-  //     });
-};
-
 const modalOpenClose = () => {
   modal.value = !modal.value;
   if (!modal.value) {
@@ -1190,31 +1179,12 @@ const resetFilter = () => {
   filterRef.value!.focus();
 };
 
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-
-const clickClose = async () => {
-  //   if (editRow.value == true) {
-  //   dialogMessage(
-  //     $q,
-  //     "ข้อมูลมีการแก้ไข",
-  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
-  //     "mdi-help-circle-outline",
-  //     "ตกลง",
-  //     "orange",
-  //     () => (modal.value = false),
-  //     undefined
-  //   );
-  //   } else {
-  modal.value = false;
-  //     next.value = false;
-  //     previous.value = false;
-  //   }
-};
+// const getClass = (val: boolean) => {
+//   return {
+//     "full-width inputgreen cursor-pointer": val,
+//     "full-width cursor-pointer": !val,
+//   };
+// };
 
 const clickAdd = () => {
   //   modal.value = true;
@@ -1271,11 +1241,13 @@ const nodeTree = async () => {
     .finally(async () => {
       hideLoader();
       await showEmployeeTemp();
-      await showEmployeeTempOrder();
+      // await showEmployeeTempOrder();
     });
 };
 
 const showEmployeeTemp = async () => {
+  showLoader();
+
   let cirteria = [];
 
   cirteria.push({
@@ -1288,8 +1260,7 @@ const showEmployeeTemp = async () => {
     criteriaValue: "false",
   });
 
-  if (selected.value == null || selected.value == "") return;
-  showLoader();
+  if (selected.value == null) return;
   await http
     .post(config.API.searchProfileTemp("all"), {
       criterias: cirteria,
@@ -1329,6 +1300,8 @@ const showEmployeeTemp = async () => {
           draftPositionEmployee: e.draftPositionEmployee,
           draftOrganizationOrganization: e.draftOrganizationOrganization,
         });
+
+        rowsOrder.value = rows.value.filter((e: any) => e.draftPositionEmployee !== null);
       });
     })
     .catch((e) => {
@@ -1339,70 +1312,70 @@ const showEmployeeTemp = async () => {
     });
 };
 
-const showEmployeeTempOrder = async () => {
-  let cirteria = [];
+// const showEmployeeTempOrder = async () => {
+//   let cirteria = [];
 
-  cirteria.push({
-    criteriaType: "employee_class",
-    criteriaValue: "temp",
-  });
+//   cirteria.push({
+//     criteriaType: "employee_class",
+//     criteriaValue: "temp",
+//   });
 
-  cirteria.push({
-    criteriaType: "is_retire",
-    criteriaValue: "false",
-  });
+//   cirteria.push({
+//     criteriaType: "is_retire",
+//     criteriaValue: "false",
+//   });
 
-  if (selected.value == null || selected.value == "") return;
-  showLoader();
-  await http
-    .post(config.API.searchProfileTemp("all"), {
-      criterias: cirteria,
-    })
-    .then((res) => {
-      let data = res.data.result;
-      rowsOrder.value = [];
-      data.map((e: ResponseEmployeeTemp) => {
-        rowsOrder.value.push({
-          id: e.id,
-          fullname: e.fullname,
-          fullnameOld: e.fullnameOld,
-          position: e.position,
-          positionPathSide: e.positionPathSide,
-          positionLine: e.positionLine,
-          govAge: e.govAge,
-          positionEmployeePosition: e.positionEmployeePosition,
-          positionEmployeePositionSide: e.positionEmployeePositionSide,
-          positionEmployeeGroup: e.positionEmployeeGroup,
-          oc: e.oc,
-          age: e.age,
-          amount: e.amount == null ? "" : e.amount.toLocaleString(),
-          refSalary: e.refSalary,
-          dateAppoint:
-            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
-          dateStart:
-            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
-          createdAt:
-            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
-          isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
-          leaveDateOrder:
-            e.leaveDateOrder == null
-              ? null
-              : date2Thai(new Date(e.leaveDateOrder)),
-          newAgency: "",
-          currentAgency: "",
-          draftPositionEmployee: e.draftPositionEmployee,
-          draftOrganizationOrganization: e.draftOrganizationOrganization,
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      //   console.log(rowsOrder);
-    });
-};
+//   if (selected.value == null || selected.value == "") return;
+//   showLoader();
+//   await http
+//     .post(config.API.searchProfileTemp("all"), {
+//       criterias: cirteria,
+//     })
+//     .then((res) => {
+//       let data = res.data.result;
+//       rowsOrder.value = [];
+//       data.map((e: ResponseEmployeeTemp) => {
+//         rowsOrder.value.push({
+//           id: e.id,
+//           fullname: e.fullname,
+//           fullnameOld: e.fullnameOld,
+//           position: e.position,
+//           positionPathSide: e.positionPathSide,
+//           positionLine: e.positionLine,
+//           govAge: e.govAge,
+//           positionEmployeePosition: e.positionEmployeePosition,
+//           positionEmployeePositionSide: e.positionEmployeePositionSide,
+//           positionEmployeeGroup: e.positionEmployeeGroup,
+//           oc: e.oc,
+//           age: e.age,
+//           amount: e.amount == null ? "" : e.amount.toLocaleString(),
+//           refSalary: e.refSalary,
+//           dateAppoint:
+//             e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
+//           dateStart:
+//             e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
+//           createdAt:
+//             e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
+//           isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
+//           leaveDateOrder:
+//             e.leaveDateOrder == null
+//               ? null
+//               : date2Thai(new Date(e.leaveDateOrder)),
+//           newAgency: "",
+//           currentAgency: "",
+//           draftPositionEmployee: e.draftPositionEmployee,
+//           draftOrganizationOrganization: e.draftOrganizationOrganization,
+//         });
+//       });
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//       //   console.log(rowsOrder);
+//     });
+// };
 
 const onSelected = async (id: string) => {
   //   await fetchPositionNumber(id);

From 7dbbfd5fcf4b4d3150356a37e07a5ee2d62c596d Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 21 Aug 2023 07:24:56 +0700
Subject: [PATCH 10/11] fix label

---
 src/modules/04_registry/components/Profile.vue | 2 +-
 src/modules/08_registryEmployee/views/Main.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 2cde4cabd..89dd207f6 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -325,7 +325,7 @@
               <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="placeDeathCertificate"
                 label="สถานที่ออกใบมรณบัตร" />
               <q-separator />
-              <q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสีบชีวิต" type="textarea" />
+              <q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสียชีวิต" type="textarea" />
             </div>
             <q-space />
           </q-card-section>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 4011c8fb4..78d7a400c 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1214,7 +1214,7 @@ const deleteData = async (id: string) => {
   await http
     .delete(config.API.profileInforId(id))
     .then((res) => {
-      success($q, "ลบข้อมูลการสอบสำเร็จ");
+      success($q, "ลบข้อมูลสำเร็จ");
       showEmployeeTemp();
     })
     .catch((e) => {

From fd1f5ce8e4826bb404650aea9caa19e5bf111820 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 21 Aug 2023 11:55:57 +0700
Subject: [PATCH 11/11] no message

---
 src/api/07_insignia/api.insignia.ts           |  7 ++
 .../components/1_Proposals/listProposals.vue  | 43 +++++++++-
 .../07_insignia/components/2_Manage/Tab1.vue  | 37 +++++++++
 .../components/2_Manage/listManage.vue        | 78 ++++++++++++-------
 src/modules/07_insignia/store.ts              |  6 +-
 5 files changed, 140 insertions(+), 31 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index f05e19bca..41ccd6778 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -3,12 +3,19 @@
  */
 import env from "../index";
 const insignia = `${env.API_URI}/insignia`;
+const Organization = `${env.API_URI}/Organization`
 export default {
   getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
   editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   RoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  requestInsignia: (insigniaPeriodId: string) => `${insignia}/request/${insigniaPeriodId}`,
+  // Type
+  typeOc: () => `${Organization}/history/type/หน่วยงาน`,
+
+
   // manage
   insigniaManage: (type: string) => `${insignia}/manage/${type}`,
+  insigniaList: (insigniaPeriodId: any, ocId: string, role: string, status: any) => `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}`
 
 };
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index c558d3d48..74139883e 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -20,6 +20,7 @@ const {
   dateToISO,
   showLoader,
   hideLoader,
+  dialogConfirm,
 } = mixin;
 const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
@@ -232,6 +233,32 @@ const clickProposals = (file: string) => {
     window.open(file);
   }
 };
+const clickListInsignia = async (propsId: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      await getRequest(propsId);
+    },
+    "ยืนยันการคำนวณราชชื่อผู้ได้รับเครื่องราช",
+    "ต้องการยืนยันการคำนวณราชชื่อผู้ได้รับเครื่องราชนี้หรือไม่ ?"
+  );
+};
+const getRequest = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.requestInsignia(id))
+    .then((res) => {
+      console.log(res);
+      success($q, "ยืนยันสำเร็จ");
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
@@ -338,6 +365,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
               </q-th>
               <q-th auto-width />
               <q-th auto-width />
+              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -390,6 +418,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   @click="clickEdit(props.row)"
                 />
               </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="primary"
+                  @click="clickListInsignia(props.row.id)"
+                  icon="mdi-account-star"
+                >
+                  <q-tooltip>ผู้ได้รับเครื่องราชฯ</q-tooltip>
+                </q-btn>
+              </q-td>
               <q-td auto-width>
                 <q-btn
                   dense
@@ -436,8 +477,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
   </q-card>
 </template>
 
-
-
 <style lang="scss" scope>
 .filter-card {
   background-color: #f1f1f1b0;
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 10d8a7f18..39f7588c5 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -3,10 +3,14 @@ import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
 const { dialogRemove, dialogConfirm } = mixin;
 const $q = useQuasar();
+const DataStore = useInsigniaDataStore();
 
 const modalNote = ref<boolean>(false);
 const organization = ref<number>(1);
@@ -187,6 +191,39 @@ const titleModal = ref<string>("");
 const actionModal = ref<string>("");
 const person = ref<any>([]);
 
+const props = defineProps({
+  tab: {
+    type: String,
+  },
+  roundId: {
+    type: String,
+  },
+});
+onMounted(async () => {
+  console.log(props);
+
+  organizationOptions.value = DataStore.optionsTypeOc;
+  console.log(organizationOptions.value);
+  await fecthInsignia();
+});
+
+const fecthInsignia = async () => {
+  for (const item of DataStore.optionsTypeOc) {
+    console.log(item.index);
+
+    // await http
+    //   .get(
+    //     config.API.insigniaList(props.roundId, item["id"], "officer", props.tab)
+    //   )
+    //   .then((res) => {
+    //     console.log(res);
+    //   })
+    //   .catch((err) => {
+    //     console.log(err);
+    //   });
+  }
+};
+
 const clickAction = (props: any, action: string) => {
   Note.value = "";
   person.value = props;
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 285698187..d0cb2e24c 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -1,18 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import type { QTableProps } from "quasar";
-import type {
-  FormMainProbation,
-  FormMainProbation2,
-} from "@/modules/05_placement/interface/request/Main";
-import type { DataOption1 } from "@/modules/05_placement/interface/index/Main";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
+
 import { useCounterMixin } from "@/stores/mixin";
-import type { resMain } from "@/modules/06_retirement/interface/response/Main";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
 import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue";
@@ -20,20 +14,20 @@ import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue";
 import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue";
 import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue";
 
-const Note = ref<string>("");
-const addNote = ref<boolean>(false);
-const saveWriteNote = ref<any[]>([]);
+const DataStore = useInsigniaDataStore();
 const mixin = useCounterMixin();
 const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
   mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 
+const loading = ref<boolean>(false);
 const round = ref<string>("");
+const optionRound = ref<any>([]);
+// const typeOc = ref<string>("kljkljk");
+const optiontypeOc = ref<any>([]);
 
-const optionRound = ref<DataOption1[]>([]);
-
-const tab = ref<any>("haveInsignia");
+const tab = ref<any>("pending");
 const stat = ref<any>({
   total: 0,
   sendName: 0,
@@ -42,20 +36,48 @@ const stat = ref<any>({
   disclaim: 0,
 });
 onMounted(async () => {
+  console.log(DataStore.optionsTypeOc);
+
   await fecthlistRound();
+  await fecthType();
 });
 const fecthlistRound = async () => {
   await http
     .get(config.API.listRoundInsignia("insignia"))
     .then((res: any) => {
-      optionRound.value = res.data.result.map((e) => ({
+      optionRound.value = res.data.result.map((e: any) => ({
         id: e.period_id,
         year: e.period_year,
         name: `รอบการเสนอพระราชทานเครื่องราช ${e.period_name}  ปี ${e.period_year} `,
       }));
+      console.log(optionRound.value);
+      // const lastIndex = optionRound.value.length;
+      const lastValue = optionRound.value[0];
+      round.value = lastValue.id.toString();
     })
     .catch((err) => {
       console.log(err);
+      // messageError($q, err);
+    });
+};
+const fecthType = async () => {
+  await http
+    .get(config.API.typeOc())
+    .then((res) => {
+      console.log(res);
+      optiontypeOc.value = res.data.result.map((e: any) => ({
+        id: e.organizationId,
+        name: e.organizationName,
+      }));
+      console.log(typeof optiontypeOc.value);
+      DataStore.optionsTypeOc = optiontypeOc.value;
+    })
+    .catch((err) => {
+      console.log(err);
+      // messageError($q, err);
+    })
+    .finally(() => {
+      loading.value = true;
     });
 };
 </script>
@@ -105,7 +127,7 @@ const fecthlistRound = async () => {
     </div>
   </q-card>
 
-  <q-card flat bordered class="col-12 q-mt-sm">
+  <q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
     <div class="row col-12">
       <q-tabs
         v-model="tab"
@@ -116,25 +138,25 @@ const fecthlistRound = async () => {
         indicator-color="primary"
         align="left"
       >
-        <q-tab name="haveInsignia" label="ผู้ที่ได้รับพระราชทานเครื่องราชฯ" />
-        <q-tab name="personNotapply" label="คนที่ไม่ยื่นขอ" />
-        <q-tab name="personRemoved" label="คนที่ถูกลบออก" />
-        <q-tab name="nonInsignia" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
+        <q-tab name="pending" label="ผู้ที่ได้รับพระราชทานเครื่องราชฯ" />
+        <q-tab name="reject" label="คนที่ไม่ยื่นขอ" />
+        <q-tab name="delete" label="คนที่ถูกลบออก" />
+        <q-tab name="organization" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
       </q-tabs>
     </div>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="haveInsignia">
-        <tab1 />
+      <q-tab-panel name="pending">
+        <tab1 :tab="tab" :roundId="round" />
       </q-tab-panel>
-      <q-tab-panel name="personNotapply">
-        <tab2 />
+      <q-tab-panel name="reject">
+        <tab2 :tab="tab" />
       </q-tab-panel>
-      <q-tab-panel name="personRemoved">
-        <tab3 />
+      <q-tab-panel name="delete">
+        <tab3 :tab="tab" />
       </q-tab-panel>
-      <q-tab-panel name="nonInsignia">
-        <tab4 />
+      <q-tab-panel name="organization">
+        <tab4 :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
   </q-card>
diff --git a/src/modules/07_insignia/store.ts b/src/modules/07_insignia/store.ts
index 2e0d140be..5f7bbf6ec 100644
--- a/src/modules/07_insignia/store.ts
+++ b/src/modules/07_insignia/store.ts
@@ -1,5 +1,9 @@
 import { defineStore } from "pinia";
+import { ref, } from "vue";
 
 export const useInsigniaDataStore = defineStore("insignia", () => {
-  return {};
+  let optionsTypeOc = ref<any>([]);
+  return {
+    optionsTypeOc
+  };
 });