- [x] หมดเขตรับสมัตรสอบ เพิ่ม icon กับสี

- [ ] ขาด รวมระยะเวลา > เพิ่ม row รวมระยะเวลา ในตารางในแล้ว เหลือแค่ต่อ api ค่ารวม
- [x] ปฏิทินเพิ่ม > ประวัติการทำงาน > ไม่สามารถลื่นลงมาข้างล่างได้ พอเอาเม้าส์ไปที่ bar ด้านข้าง ปฏิทินก้ปิด
- [x] เลขบัตร > เมื่อกดเข้ามาอีกครั้ง เลขควรติดมาด้วย
- [ ] เลขประจำตัวสอบ ไม่ออก
- [x] ลำดับที่สอบได้ รอแก้เอาออกจากรอบนี้
- [ ] อายุถ้าไม่ได้ใส่ค่า ระบบไม่เช็ค แต่ถ้าเลือกวัน มันจะเช็คช่วง
- [x] คัดเลือกสำเร็จ เปลี่ยนเป็น ผลการสอบ
- [x] สมัครสอบสำเร็จ เปลี่ยนเป็น ใบทานข้อมูลการสมัคร
- [ ] เพิ่ม ui ในใบสมัคร ข้อ 7 บุคคลที่สามารถติดต่อได้ และเรียงลำดับตามเอกสาร > เพิ่ม ข้อมูลส่วนบุคคลที่สามารถติดต่อได้แล้ว  เหลือแค่ต่อ api
- [x] เปลี่ยนข้อความเป็น กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง
- [x]  หัวข้อ ขาดระดับท้ายตำแหน่ง

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

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) }}

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

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>

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>
+  

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="เลขบัตรประจำตัวประชาชน"

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({

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 :style="$q.screen.gt.xs ? 'min-width: 30vw' : 'min-width: 80vw'" class=" q-pa-sm">
-      <q-card-section class="row items-center col-12 q-py-sm bg-grey-2">
+      <q-card-section class="row items-center col-12">
-        <div class="row col-12 justify-center">
+        <div class="column col-12 text-center">
-          <div class="text-bold text-subtitle1">หมดเขตรับสมัครสอบ</div>
+          <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>

src/stores/mixin.ts

@@ -495,7 +495,7 @@ export const useCounterMixin = defineStore('mixin', () => {
       case 'checkPoint':
         return 'รอเจ้าหน้าที่สรุปคะแนนสอบ'
       case 'done':
-        return 'คัดเลือกสำเร็จ'
+        return 'ผลการสอบ'
       case 'waiver':
         return 'สละสิทธิ์สอบ'
       default: