From 1f18f7c7073a53bc53a3df0eba1021ea60e0ced7 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 5 Oct 2023 14:31:39 +0700
Subject: [PATCH] =?UTF-8?q?-=20[x]=20=E0=B8=AB=E0=B8=A1=E0=B8=94=E0=B9=80?=
 =?UTF-8?q?=E0=B8=82=E0=B8=95=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=AA=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20icon=20?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B8=AA=E0=B8=B5=20-=20[=20]=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=B2=E0=B8=94=20=E0=B8=A3=E0=B8=A7=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=A2=E0=B8=B0=E0=B9=80=E0=B8=A7=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=20>=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20row=20=E0=B8=A3=E0=B8=A7=E0=B8=A1=E0=B8=A3=E0=B8=B0=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2=20=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B8=95=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=87=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B9=81=E0=B8=A5=E0=B9=89=E0=B8=A7=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B9=81=E0=B8=84=E0=B9=88?=
 =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=20api=20=E0=B8=84=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A7=E0=B8=A1=20-=20[x]=20=E0=B8=9B=E0=B8=8F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=97=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20>=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=87=E0=B8=B2=E0=B8=99=20>=20=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AA=E0=B8=B2=E0=B8=A1=E0=B8=B2=E0=B8=A3=E0=B8=96?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=99=E0=B8=A5=E0=B8=87=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=A5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B9=84=E0=B8=94=E0=B9=89=20=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=AD=E0=B9=80=E0=B8=AD=E0=B8=B2=E0=B9=80=E0=B8=A1=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=AA=E0=B9=8C=E0=B9=84=E0=B8=9B=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=20bar=20=E0=B8=94=E0=B9=89=E0=B8=B2=E0=B8=99=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=20=E0=B8=9B=E0=B8=8F=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B4=E0=B8=99=E0=B8=81=E0=B9=89=E0=B8=9B=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=94=20-=20[x]=20=E0=B9=80=E0=B8=A5=E0=B8=82=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=A3=20>=20=E0=B9=80=E0=B8=A1=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=81=E0=B8=94=E0=B9=80=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A1=E0=B8=B2=E0=B8=AD=E0=B8=B5=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B9=89=E0=B8=87=20=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=82=E0=B8=84=E0=B8=A7=E0=B8=A3=E0=B8=95=E0=B8=B4=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=94=E0=B9=89=E0=B8=A7=E0=B8=A2=20-=20[?=
 =?UTF-8?q?=20]=20=E0=B9=80=E0=B8=A5=E0=B8=82=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B3=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=AA=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=20=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=AD=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=20-=20[x]=20=E0=B8=A5=E0=B8=B3=E0=B8=94=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=84=E0=B8=94=E0=B9=89=20=E0=B8=A3=E0=B8=AD=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=80=E0=B8=AD=E0=B8=B2=E0=B8=AD=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B8=B2=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B5=E0=B9=89=20-=20[=20]=20=E0=B8=AD=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=B8=E0=B8=96=E0=B9=89=E0=B8=B2=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89=E0=B9=83=E0=B8=AA=E0=B9=88?=
 =?UTF-8?q?=E0=B8=84=E0=B9=88=E0=B8=B2=20=E0=B8=A3=E0=B8=B0=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=80=E0=B8=8A=E0=B9=87?=
 =?UTF-8?q?=E0=B8=84=20=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=96=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=20=E0=B8=A1=E0=B8=B1=E0=B8=99=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=8A=E0=B9=87=E0=B8=84=E0=B8=8A=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=87=20-=20[x]=20=E0=B8=84=E0=B8=B1=E0=B8=94?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=AA=E0=B8=B3?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A3=E0=B9=87=E0=B8=88=20=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B9=87=E0=B8=99=20=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A=20-=20[x]=20=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B1=E0=B8=84=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B3=E0=B9=80=E0=B8=A3=E0=B9=87=E0=B8=88=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=20=E0=B9=83=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=84=E0=B8=A3=20-=20[=20]=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=20ui=20=E0=B9=83=E0=B8=99=E0=B9=83?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AA=E0=B8=A1=E0=B8=B1=E0=B8=84=E0=B8=A3=20?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=207=20=E0=B8=9A=E0=B8=B8=E0=B8=84?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A5=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=A3=E0=B8=96=E0=B8=95=E0=B8=B4=E0=B8=94?=
 =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=E0=B9=84=E0=B8=94=E0=B9=89=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A5=E0=B8=B3=E0=B8=94=E0=B8=B1=E0=B8=9A=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A1=E0=B9=80=E0=B8=AD=E0=B8=81=E0=B8=AA=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=20>=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=9A=E0=B8=B8=E0=B8=84?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A5=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=A3=E0=B8=96=E0=B8=95=E0=B8=B4=E0=B8=94?=
 =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=E0=B9=84=E0=B8=94=E0=B9=89=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=89=E0=B8=A7=20=20=E0=B9=80=E0=B8=AB=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B9=81=E0=B8=84=E0=B9=88=E0=B8=95=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=20api=20-=20[x]=20=E0=B9=80=E0=B8=9B=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B9=80=E0=B8=9B=E0=B9=87?=
 =?UTF-8?q?=E0=B8=99=20=E0=B8=81=E0=B8=A3=E0=B8=B8=E0=B8=93=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=81=E0=B9=80=E0=B8=A5=E0=B8=82?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88=E0=B8=B3=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=8A=E0=B8=B2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=99=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=96=E0=B8=B9=E0=B8=81?=
 =?UTF-8?q?=E0=B8=95=E0=B9=89=E0=B8=AD=E0=B8=87=20-=20[x]=20=20=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=A7=E0=B8=82=E0=B9=89=E0=B8=AD=20=E0=B8=82?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=94=E0=B8=A3=E0=B8=B0=E0=B8=94=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=97=E0=B9=89=E0=B8=B2=E0=B8=A2=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table.vue                      |   4 +
 src/modules/01_exam/components/ExamCard.vue   |   4 +-
 .../01_exam/components/ExamFinished.vue       |   2 +-
 .../01_exam/components/Form/Career.vue        |  17 +-
 .../01_exam/components/Form/Contact.vue       | 153 ++++++++++++++++++
 .../01_exam/components/Form/Information.vue   |   5 +-
 .../01_exam/components/Form/Profile.vue       |  20 ++-
 src/modules/01_exam/views/ExamDetail.vue      |  32 ++--
 src/stores/mixin.ts                           |   2 +-
 9 files changed, 203 insertions(+), 36 deletions(-)
 create mode 100644 src/modules/01_exam/components/Form/Contact.vue

diff --git a/src/components/Table.vue b/src/components/Table.vue
index 52e85d0..0f1f610 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -77,6 +77,9 @@
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
+    <template v-slot:bottom v-if="bottom ==  true">
+      <slot v-bind="props" name="bottom"></slot>
+    </template>
   </q-table>
 </template>
 <script setup lang="ts">
@@ -91,6 +94,7 @@ const props = defineProps({
   inputvisible: Array,
   editvisible: Boolean,
   nameHeader: Boolean,
+  bottom:Boolean,
   addData: {
     type: Boolean,
     defualt: true
diff --git a/src/modules/01_exam/components/ExamCard.vue b/src/modules/01_exam/components/ExamCard.vue
index a9aa9a0..ff710fc 100644
--- a/src/modules/01_exam/components/ExamCard.vue
+++ b/src/modules/01_exam/components/ExamCard.vue
@@ -116,10 +116,10 @@
       <div class="col-xs-6 col-sm-7 q-pr-xs">
         {{ positionLevel }}
       </div>
-      <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
+      <!-- <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
       <div class="col-xs-6 col-sm-7 q-pr-xs">
         {{ number }}
-      </div>
+      </div> -->
       <div class="col-xs-6 col-sm-5 text-grey-7">วันหมดอายุบัญชีคัดเลือก</div>
       <div class="col-xs-6 col-sm-7 q-pr-xs">
         {{ score_expired == null ? '' : date2Thai(score_expired) }}
diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index 30c9b6a..4f2f829 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -24,7 +24,7 @@
             size="22px"
             color="green"
             class="q-mr-sm"
-          />สมัครสอบสำเร็จ
+          />ใบทานข้อมูลการสมัคร
         </div>
         <div v-else class="text-orange-6 text-bold">
           <q-icon
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 654d8f6..f166299 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -12,6 +12,7 @@
       :add="clickAdd"
       :edit="clickEdit"
       :addData="false"
+      :bottom="true"
       :editData="status == 'register' || status == 'rejectRegister'"
       name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
       icon="mdi-briefcase"
@@ -45,6 +46,11 @@
           </q-td>
         </q-tr>
       </template>
+      <template #bottom="props">
+          <div :props="props" class="row col-11 justify-end">
+            <span class="text-weight-medium text-subtitle2">รวมระยะเวลา : <span class="q-pl-sm">{{ total }} วัน</span></span>
+          </div>
+      </template>
     </Table>
   </q-form>
   <q-dialog v-model="modal" persistent>
@@ -120,7 +126,9 @@
               />
             </div> -->
             <div class="col-xs-12 col-sm-6 col-md-6">
+              <div class="col-xs-12 col-sm-12 col-md-12">
               <datepicker
+                menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="startDate"
                 :locale="'th'"
@@ -158,9 +166,11 @@
                   </q-input>
                 </template>
               </datepicker>
+              </div>
             </div>
             <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
+                menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="endDate"
                 :locale="'th'"
@@ -276,6 +286,7 @@ const org = ref<string | null>()
 const startDate = ref<Date>(new Date())
 const endDate = ref<Date>(new Date())
 const rangeDate = ref<string | null>()
+const total = ref<string>('0')
 const myForm = ref<any>() //form data input
 const edit = ref<boolean>(true) //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false) //modal add detail
@@ -707,8 +718,12 @@ const getClass = (val: boolean) => {
   }
 }
 </script>
-<style lang="scss">
+<style>
 .modalfix {
   position: fixed !important;
+  top: auto !important;
+  transform: none !important;
+  left:auto !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/01_exam/components/Form/Contact.vue b/src/modules/01_exam/components/Form/Contact.vue
new file mode 100644
index 0000000..389714a
--- /dev/null
+++ b/src/modules/01_exam/components/Form/Contact.vue
@@ -0,0 +1,153 @@
+<!-- card บุคคลที่สามารถติดต่อได้ -->
+<template>
+    <HeaderTop
+        v-model:edit="edit"
+        header="บุคคลที่สามารถติดต่อได้"
+        icon="mdi-account-circle"
+        :addData="true"
+        :editOnly="false"
+        :editData="false"
+    />
+    <q-form ref="myform">
+        <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+            <div class="col-xs-12 col-sm-3 col-md-2">
+                <q-select
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
+                :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+                :outlined="status == 'register' || status == 'rejectRegister'"
+                dense
+                lazy-rules
+                v-model="prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="prefixOptions"
+                option-value="id"
+                :label="`${'คำนำหน้า'}`"
+                @update:model-value="(value) => selectPrefix()"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-3">
+                <q-input
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :outlined="status == 'register' || status == 'rejectRegister'"
+                dense
+                lazy-rules
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
+                v-model="firstname"
+                :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+                :label="`${'ชื่อ'}`"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-3">
+                <q-input
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :outlined="status == 'register' || status == 'rejectRegister'"
+                dense
+                lazy-rules
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
+                v-model="lastname"
+                :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+                :label="`${'นามสกุล'}`"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-4">
+                <q-input
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :outlined="status == 'register' || status == 'rejectRegister'"
+                dense
+                lazy-rules
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
+                v-model="relations"
+                :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
+                :label="`${'เกี่ยวข้องเป็น'}`"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-4">
+                <q-input
+                    :outlined="status == 'register' || status == 'rejectRegister'"
+                    dense
+                    :counter="status == 'register' || status == 'rejectRegister' ? true : false"
+                    lazy-rules
+                    type="tel"
+                    mask="##########"
+                    maxlength="10"
+                    :class="getClass(status == 'register' || status == 'rejectRegister')"
+                    :readonly="!(status == 'register' || status == 'rejectRegister')"
+                    :borderless="!(status == 'register' || status == 'rejectRegister')"
+                    v-model="tel"
+                    :label="`${'โทรศัพท์'}`"
+                    :rules="[
+                        (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
+                        (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
+                    ]"
+                />
+            </div>
+        </div>
+    </q-form>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useDataStore } from '@/stores/data'
+import { useQuasar } from 'quasar'
+import type { Occupation } from '@/modules/01_exam/interface/index/Main'
+import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
+
+const props = defineProps({
+status: {
+    type: String,
+    required: true
+},
+form: {
+    type: Object,
+    required: true
+}
+})
+const emit = defineEmits(['update:form'])
+
+const $q = useQuasar()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const edit = ref<boolean>(true)
+const myform = ref<any>({})
+
+const prefixId = ref<string>('')
+const prefixOptions = ref<any>({})
+const firstname = ref<string>('')
+const lastname = ref<string>('')
+const relations = ref<string>('')
+const tel = ref<string>('')
+
+
+watch(myform, async (count: any, prevCount: any) => {
+emit('update:form', count)
+})
+
+watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
+await changeData('occupation', count)
+})
+
+onMounted(async () => {
+await fetchData()
+})
+
+const fetchData = async () => {
+loaderPage(true)
+}
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
+</script>
+  
\ No newline at end of file
diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index e64bd45..671e10c 100644
--- a/src/modules/01_exam/components/Form/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -23,7 +23,7 @@
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           :rules="[
-            (val) => (val != null && val.length == 13) || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+            (val) => (val != null && val.length == 13) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
             (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
           ]"
           v-model="defaultInformation.cardid"
@@ -145,7 +145,6 @@
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
         <datepicker
-          menu-class-name="modalfix"
           v-model="defaultInformation.birthDate"
           :locale="'th'"
           autoApply
@@ -334,7 +333,7 @@
             v-model="cardid1"
             maxlength="13"
             :rules="[
-              (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+              (val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
               (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
             ]"
             label="เลขบัตรประจำตัวประชาชน"
diff --git a/src/modules/01_exam/components/Form/Profile.vue b/src/modules/01_exam/components/Form/Profile.vue
index 0e1e075..c40c205 100644
--- a/src/modules/01_exam/components/Form/Profile.vue
+++ b/src/modules/01_exam/components/Form/Profile.vue
@@ -10,11 +10,6 @@
     />
   </div>
 
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-    <Address :provinceOptions="provinceOptions" :status="status" v-model:form="formAddress" />
-  </div>
-
   <!-- <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
     <Family :prefixOptions="prefixOptions" :status="status" v-model:form="formFamily" />
@@ -40,9 +35,19 @@
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
-  <!-- <div class="q-px-sm">
+  <div class="q-px-sm">
+    <Address :provinceOptions="provinceOptions" :status="status" v-model:form="formAddress" />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Contact  :status="status" />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
     <Document :status="status" />
-  </div> -->
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -58,6 +63,7 @@ import Family from '@/modules/01_exam/components/Form/Family.vue'
 import Occupation from '@/modules/01_exam/components/Form/Occupation.vue'
 import Education from '@/modules/01_exam/components/Form/Education.vue'
 import Career from '@/modules/01_exam/components/Form/Career.vue'
+import Contact from '@/modules/01_exam/components/Form/Contact.vue'
 import Document from '@/modules/01_exam/components/Form/Document.vue'
 
 const props = defineProps({
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index c973ae6..182e224 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -7,7 +7,7 @@
         {{ `ครั้งที่${round}/${yearly == null ? '' : yearly + 543}` }}
       </div>
       <div class="col-12">
-        {{ position }}
+        {{ position }} ระดับ{{ positionLevel }}
       </div>
     </q-toolbar-title>
   </q-toolbar>
@@ -76,33 +76,23 @@
     </q-step>
   </q-stepper>
   <q-dialog :model-value="modalConsend" persistent>
-    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
+    <q-card :style="$q.screen.gt.xs ? 'min-width: 50vw' : 'min-width: 80vw'">
       <Consendform :ok="consendOk" :editorCondition="editorCondition" />
     </q-card>
   </q-dialog>
   <q-dialog :model-value="timeout" persistent>
-    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
-      <q-card-section class="row items-center col-12 q-py-sm bg-grey-2">
-        <div class="row col-12 justify-center">
-          <div class="text-bold text-subtitle1">หมดเขตรับสมัครสอบ</div>
+    <q-card :style="$q.screen.gt.xs ? 'min-width: 30vw' : 'min-width: 80vw'" class=" q-pa-sm">
+      <q-card-section class="row items-center col-12">
+        <div class="column col-12 text-center">
+          <div><q-icon name="mdi-alert-outline" size="50px" color="pink" /></div>
+
+          <div class="text-bold text-pink text-subtitle1 q-mb-md">หมดเขตรับสมัครสอบ !</div>
+          ไม่สามารถทำรายการได้ เนื่องจากหมดเขตรับสมัครแล้ว
+          <!-- {{ dateThaiRange([registerEndDate, registerStartDate]) }} -->
         </div>
       </q-card-section>
-      <q-separator />
-      <q-card-section style="max-height: 70vh" class="scroll q-pb-sm">
-        <div class="text-center row justify-center">
-          <q-card class="col-xs-12 col-sm-11 row text-left q-py-sm" flat>
-            <div class="col-12 items-center">
-              <!-- <p> -->
-              ไม่สามารถทำรายการได้ เนื่องจากหมดช่วงเวลาวันสมัครแล้ว
-              <!-- {{ dateThaiRange([registerEndDate, registerStartDate]) }} -->
-              <!-- </p> -->
-            </div>
-          </q-card>
-        </div>
-      </q-card-section>
-      <q-separator />
       <q-card-actions align="right" class="bg-white text-teal justify-center">
-        <q-btn label="ตกลง" color="primary" style="width: 150px" @click="logout" />
+        <q-btn label="ตกลง" unelevated color="primary" style="width: 200px" @click="logout" />
       </q-card-actions>
     </q-card>
   </q-dialog>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 0ea931a..7dbe8d0 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -495,7 +495,7 @@ export const useCounterMixin = defineStore('mixin', () => {
       case 'checkPoint':
         return 'รอเจ้าหน้าที่สรุปคะแนนสอบ'
       case 'done':
-        return 'คัดเลือกสำเร็จ'
+        return 'ผลการสอบ'
       case 'waiver':
         return 'สละสิทธิ์สอบ'
       default: