รวมข้อมูลสมัคึรสอบไว้หน้าเดียว

2023-03-28 14:51:48 +07:00 · 2023-03-28 14:51:48 +07:00 · 05d19419e7
commit 05d19419e7
parent a95c2fcbb4
11 changed files with 341 additions and 285 deletions
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@ -95,7 +95,7 @@ import type { Pagination } from '@/modules/01_exam/interface/index/Main'
 const attrs = ref<any>(useAttrs())
 const table = ref<any>(null)
 const filterRef = ref<any>(null)
-const editBtn = ref<boolean>(false)
+const editBtn = ref<boolean>(true)
 const initialPagination = ref<Pagination>({
  //   descending: false,
  rowsPerPage: 0
--- a/src/modules/01_exam/components/Conference.vue
+++ b/src/modules/01_exam/components/Conference.vue
@ -78,14 +78,19 @@
            จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย
            เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย
          </p>
+          <q-checkbox
+            v-model="acceptTermOfUse"
+            label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
+          />
        </q-card-section>
      </q-card>
    </div>
  </q-card-section>
  <q-separator />
  <q-card-actions align="right" class="bg-white text-teal justify-center">
-    <q-btn label="ยกเลิก" color="grey" @click="close" flat />
-    <q-btn label="ตกลง" color="primary" @click="ok" />
+    <!-- <q-btn label="ยกเลิก" color="grey" @click="close" flat /> -->
+    <!-- <q-space /> -->
+    <q-btn label="ตกลง" color="primary" @click="ok" :disable="!acceptTermOfUse" />
  </q-card-actions>
 </template>

@ -104,6 +109,8 @@ const props = defineProps({
 })

 const fullname = ref<string>('')
+const acceptTermOfUse = ref<boolean>(false)
+
 /**
 * ดิงชื่อผู้ใช้งานจาก keycloak
 */
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@ -1,7 +1,8 @@
 <!-- step กรอกข้อมูล -->
 <template>
  <div>
-    <q-splitter v-model="splitterModel" style="height: 450px">
+    <Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
+    <!-- <q-splitter v-model="splitterModel" style="height: 450px">
      <template v-slot:before>
        <q-tab-panels
          v-model="tab"
@ -10,23 +11,22 @@
          transition-prev="jump-up"
          transition-next="jump-up"
        >
-          <!-- swipeable -->
-          <!-- ข้อมูลส่วนบุคคล -->
+          ข้อมูลส่วนบุคคล
          <q-tab-panel name="profile">
            <Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
          </q-tab-panel>

-          <!-- ประวัติการศีกษา -->
-          <q-tab-panel name="education"
-            ><Education :loader="loader" v-model:statusEdit="statusEdit" :status="status"
-          /></q-tab-panel>
+          ประวัติการศีกษา
+          <q-tab-panel name="education">
+            <Education :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
+          </q-tab-panel>

-          <!-- ประวัติการทำงาน/ฝึกงาน -->
-          <q-tab-panel name="career"
-            ><Career :loader="loader" v-model:statusEdit="statusEdit" :status="status"
-          /></q-tab-panel>
+          ประวัติการทำงาน/ฝึกงาน
+          <q-tab-panel name="career">
+            <Career :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
+          </q-tab-panel>

-          <!-- ไฟล์ -->
+          ไฟล์
          <q-tab-panel name="document">
            <Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
          </q-tab-panel>
@ -40,19 +40,19 @@
          <q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
        </q-tabs>
      </template>
-    </q-splitter>
+    </q-splitter> -->

    <div>
      <q-checkbox
        v-model="acceptTermOfUse"
        :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
-        v-if="tab == 'document'"
        label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
      />
+      <!-- v-if="tab == 'document'" -->
    </div>

    <div class="row justify-center q-pa-md">
-      <q-btn
+      <!-- <q-btn
        color="primary"
        class="q-ml-md"
        label="กลับ"
@ -75,13 +75,21 @@
        "
        icon-right="mdi-chevron-right"
        :disable="statusEdit"
+      /> -->
+      <q-btn
+        color="primary"
+        class="q-ml-md"
+        label="บันทึกข้อมูล"
+        @click="okModalConfirm"
+        v-if="status === 'register' || status === 'rejectRegister'"
+        :disable="!acceptTermOfUse || statusEdit"
      />
      <q-btn
        color="primary"
        class="q-ml-md"
        label="สมัครสอบ"
        @click="okModalConfirm"
-        v-if="(status === 'register' || status === 'rejectRegister') && tab == 'document'"
+        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
    </div>
@ -113,8 +121,8 @@ const props = defineProps({
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { modalConfirm, modalError, success } = mixin
-const tab = ref<string>('profile')
-const splitterModel = ref<number>(90)
+// const tab = ref<string>('profile')
+// const splitterModel = ref<number>(90)
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
@ -154,36 +162,35 @@ const saveForm = async () => {
    })
 }

-const clickPreview = (val: string) => {
-  console.log(val)
-  switch (val) {
-    case 'profile':
-      return (tab.value = 'profile')
-    case 'education':
-      return (tab.value = 'profile')
-    case 'career':
-      return (tab.value = 'education')
-    case 'document':
-      return (tab.value = 'career')
-    default:
-      return (tab.value = 'profile')
-  }
-}
+// const clickPreview = (val: string) => {
+//   switch (val) {
+//     case 'profile':
+//       return (tab.value = 'profile')
+//     case 'education':
+//       return (tab.value = 'profile')
+//     case 'career':
+//       return (tab.value = 'education')
+//     case 'document':
+//       return (tab.value = 'career')
+//     default:
+//       return (tab.value = 'profile')
+//   }
+// }

-const clickNext = (val: string) => {
-  switch (val) {
-    case 'profile':
-      return (tab.value = 'education')
-    case 'education':
-      return (tab.value = 'career')
-    case 'career':
-      return (tab.value = 'document')
-    case 'document':
-      return (tab.value = 'profile')
-    default:
-      return (tab.value = 'profile')
-  }
-}
+// const clickNext = (val: string) => {
+//   switch (val) {
+//     case 'profile':
+//       return (tab.value = 'education')
+//     case 'education':
+//       return (tab.value = 'career')
+//     case 'career':
+//       return (tab.value = 'document')
+//     case 'document':
+//       return (tab.value = 'profile')
+//     default:
+//       return (tab.value = 'profile')
+//   }
+// }
 </script>

 <style lang="scss" scoped></style>
--- a/src/modules/01_exam/components/Form/Profile/Address.vue
+++ b/src/modules/01_exam/components/Form/Profile/Address.vue
@ -17,27 +17,27 @@
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-xs-12">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="addressData.address"
            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
          />
-          <!-- :filled="edit" -->
+          <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="addressData.provinceId"
@ -52,11 +52,11 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="addressData.districtId"
@ -71,11 +71,11 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="addressData.subdistrictId"
@ -90,13 +90,13 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            dense
            lazy-rules
            readonly
            borderless
            v-model="addressData.code"
-            :style="!edit ? '' : 'padding:0 12px;'"
+            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
            :label="`${'รหัสไปรษณีย์'}`"
          />
        </div>
@ -110,7 +110,7 @@
            val="1"
            label="ใช่"
            dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
          />
          <q-radio
            v-model="addressData.same"
@ -119,20 +119,20 @@
            val="0"
            label="ไม่"
            dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
          />
        </div>

        <div class="col-xs-12" v-if="addressData.same == '0'">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="addressData.addressC"
            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
            :label="`${'ที่อยู่ปัจจุบัน'}`"
@ -140,11 +140,11 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="addressData.provinceIdC"
@ -159,11 +159,11 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="addressData.districtIdC"
@ -178,11 +178,11 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="addressData.subdistrictIdC"
@ -197,13 +197,13 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            dense
            lazy-rules
            readonly
            borderless
            v-model="addressData.codeC"
-            :style="!edit ? '' : 'padding:0 12px;'"
+            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
            :label="`${'รหัสไปรษณีย์'}`"
          />
        </div>
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@ -1,6 +1,6 @@
 <!-- tab ประวัติการทำงาน/ฝึกงาน -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
    <q-form ref="myForm">
      <Table
        :rows="rows"
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@ -1,6 +1,6 @@
 <!-- card อัปโหลดเอกสาร -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
    <div class="col-12">
      <HeaderTop
        v-model:edit="edit"
@ -99,7 +99,7 @@ const props = defineProps({
  }
 })

-const edit = ref<boolean>(true)
+const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
 const name = ref<string>('')
 const files = ref<any>([
  {
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@ -1,6 +1,6 @@
 <!-- tab ประวัติการศึกษา -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
    <q-form ref="myForm">
      <Table
        :rows="rows"
--- a/src/modules/01_exam/components/Form/Profile/Family.vue
+++ b/src/modules/01_exam/components/Form/Profile/Family.vue
@ -24,7 +24,7 @@
            val="1"
            label="มี"
            dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
            @update:model-value="selectRadio"
          />
          <q-radio
@ -34,17 +34,17 @@
            val="0"
            label="ไม่มี"
            dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
            @update:model-value="selectRadio"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="familyData.prefixIdC"
@ -59,12 +59,12 @@

        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.firstnameC"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
@ -72,12 +72,12 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.lastnameC"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
@ -85,12 +85,12 @@
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.occupationC"
            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
            :label="`${'อาชีพ'}`"
@ -98,12 +98,12 @@
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.nationalityC"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
@ -113,11 +113,11 @@
        <div class="col-xs-12 text-weight-bold">• บิดา</div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="familyData.prefixIdM"
@ -132,12 +132,12 @@

        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.firstnameM"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
@ -145,12 +145,12 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.lastnameM"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
@ -158,12 +158,12 @@
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.occupationM"
            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
            :label="`${'อาชีพ'}`"
@ -171,12 +171,12 @@
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.nationalityM"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
@ -186,11 +186,11 @@
        <div class="col-xs-12 text-weight-bold">• มารดา</div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="familyData.prefixIdF"
@ -204,12 +204,12 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.firstnameF"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
@ -217,12 +217,12 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.lastnameF"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
@ -230,12 +230,12 @@
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.occupationF"
            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
            :label="`${'อาชีพ'}`"
@ -243,12 +243,12 @@
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="familyData.nationalityF"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
--- a/src/modules/01_exam/components/Form/Profile/Information.vue
+++ b/src/modules/01_exam/components/Form/Profile/Information.vue
@ -15,13 +15,13 @@
    <!-- :changeBtn="changeBtn" -->
    <q-form ref="myform" class="col-12 row">
      <div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="informaData.prefixId"
@ -33,27 +33,27 @@
            :label="`${'คำนำหน้า'}`"
          />
        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-5 col-md-5">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="informaData.firstname"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-5 col-md-5">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="informaData.lastname"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
@ -61,12 +61,12 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="informaData.nationality"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
@ -80,7 +80,7 @@
            :enableTimePicker="false"
            week-start="0"
            :max-date="new Date()"
-            :disabled="!edit"
+            :disabled="!(status == 'register' || status == 'rejectRegister')"
          >
            <template #year="{ year }">
              {{ year + 543 }}
@ -90,12 +90,12 @@
            </template>
            <template #trigger>
              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :outlined="status == 'register' || status == 'rejectRegister'"
                dense
                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
                :model-value="
                  informaData.birthDate == null ? null : date2Thai(informaData.birthDate)
                "
@ -106,7 +106,11 @@
                  <q-icon
                    name="event"
                    class="cursor-pointer"
-                    :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+                    :style="
+                      status == 'register' || status == 'rejectRegister'
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
+                    "
                  >
                  </q-icon>
                </template>
@ -116,23 +120,23 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            dense
            lazy-rules
            readonly
            borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
+            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
            :model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
            :label="`${'อายุ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="informaData.relationship"
@ -146,26 +150,13 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.email"
-            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
-            label="E-mail address"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            counter
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="informaData.cardid"
            maxlength="13"
            :rules="[
@ -177,11 +168,11 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="informaData.provinceId"
@ -196,23 +187,23 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <!-- <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="informaData.cardid"
            :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
            label="ออกให้ ณ อำเภอ"
          /> -->
          <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :rules="[(val) => !!val || `${'กรุณากรอกอำเภอ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            v-model="informaData.districtId"
@ -233,7 +224,7 @@
            :enableTimePicker="false"
            week-start="0"
            :max-date="new Date()"
-            :disabled="!edit"
+            :disabled="!(status == 'register' || status == 'rejectRegister')"
          >
            <template #year="{ year }">
              {{ year + 543 }}
@ -243,23 +234,27 @@
            </template>
            <template #trigger>
              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :outlined="status == 'register' || status == 'rejectRegister'"
                dense
                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
                :model-value="
                  informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
                "
-                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
-                :label="`${'วัน/เดือน/ปี'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
+                :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
-                    :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+                    :style="
+                      status == 'register' || status == 'rejectRegister'
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
+                    "
                  >
                  </q-icon>
                </template>
@ -269,15 +264,15 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            counter
            lazy-rules
            type="tel"
            maxlength="10"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="informaData.tel"
            :rules="[
              (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
@ -288,15 +283,15 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            counter
            lazy-rules
            type="tel"
            maxlength="10"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="informaData.phone"
            :rules="[
              (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
@ -305,16 +300,27 @@
            :label="`${'โทรศัพท์มือถือ'}`"
          />
        </div>
-        <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(false)"
+            :outlined="false"
            dense
            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="true"
+            :borderless="true"
+            v-model="informaData.email"
+            label="E-mail address"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-12">
+          <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="informaData.knowledge"
-            :rules="[(val) => !!val || `${'กรุณากรอก ความรู้ความสามารถพิเศษ'}`]"
            label="ความรู้ความสามารถพิเศษ"
            type="textarea"
          />
@ -326,11 +332,11 @@
            borderless
            v-model="fileData"
            stack-label
-            :readonly="statusEdit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
            @update:model-value="pickFile"
          >
            <q-img src="@/assets/avatar_user.jpg" class="col-12">
-              <div class="overlay" v-if="!statusEdit">
+              <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
                <q-icon name="mdi-camera" />
                <br />อัปเดต
              </div>
--- a/src/modules/01_exam/components/Form/Profile/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Profile/Occupation.vue
@ -17,17 +17,20 @@
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-12 row">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.official"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'official' || !edit"
+            :disable="
+              occupationData.status !== 'official' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
          >
            <template v-slot:before>
              <q-radio
@ -37,24 +40,27 @@
                val="official"
                label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
                dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.personnel"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'personnel' || !edit"
+            :disable="
+              occupationData.status !== 'personnel' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
          >
            <template v-slot:before>
              <q-radio
@ -64,24 +70,27 @@
                val="personnel"
                label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
                dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.officialsOther"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'officialsOther' || !edit"
+            :disable="
+              occupationData.status !== 'officialsOther' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
          >
            <template v-slot:before>
              <q-radio
@ -91,24 +100,27 @@
                val="officialsOther"
                label="ข้าราชการประเภทอื่น ตำแหน่ง"
                dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                size="md"
                style="font-size: 14px; color: black"
              />
            </template>
          </q-input>
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.employee"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'employee' || !edit"
+            :disable="
+              occupationData.status !== 'employee' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
          >
            <template v-slot:before>
              <q-radio
@ -118,7 +130,7 @@
                val="employee"
                label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
                dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                size="md"
                style="font-size: 14px; color: black"
              />
@ -131,22 +143,25 @@
            val="studying"
            label="กำลังศึกษาต่อ"
            dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
            size="md"
            style="font-size: 14px; color: black"
          />
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.other"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'other' || !edit"
+            :disable="
+              occupationData.status !== 'other' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
          >
            <template v-slot:before>
              <q-radio
@ -156,7 +171,7 @@
                val="other"
                label="อื่นๆ"
                dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                size="md"
                style="font-size: 14px; color: black"
              />
@ -165,15 +180,15 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.company"
            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
            :label="`${'สำนัก/บริษัท'}`"
@ -181,15 +196,15 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.department"
            :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
            :label="`${'กอง/ฝ่าย'}`"
@ -197,15 +212,15 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.email"
            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
            :label="`${'E-mail address'}`"
@ -213,15 +228,15 @@
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
            hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            type="textarea"
            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="occupationData.tel"
            :rules="[(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`]"
            :label="`${'โทรศัพท์'}`"
--- a/src/modules/01_exam/components/Form/Profile.vue
+++ b/src/modules/01_exam/components/Form/Profile.vue
@ -21,6 +21,24 @@
    :status="status"
  />
  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
+  <Education
+    :loader="loader"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :status="status"
+  />
+  <Career
+    :loader="loader"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :status="status"
+  />
+  <Document
+    :loader="loader"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :status="status"
+  />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@ -29,10 +47,13 @@ import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import type { DataOption } from '@/modules/01_exam/interface/index/Main'
-import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
-import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
-import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
-import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
+import Information from '@/modules/01_exam/components/Form/Information.vue'
+import Address from '@/modules/01_exam/components/Form/Address.vue'
+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 Document from '@/modules/01_exam/components/Form/Document.vue'

 const props = defineProps({
  loader: {