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

src/modules/01_exam/components/Form/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>

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"

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

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"

src/modules/01_exam/components/Form/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="`${'สัญชาติ'}`"

src/modules/01_exam/components/Form/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>

src/modules/01_exam/components/Form/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="`${'โทรศัพท์'}`"

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