From abe8e9186c3e3d2e0f7b660d3f3683e8e863b31b Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Thu, 30 Mar 2023 13:42:08 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=A2=E0=B8=81=E0=B8=9B=E0=B8=B8?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=E0=B8=AD=E0=B8=B1=E0=B8=9E=E0=B9=82=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/exam/api.candidate.ts                 |   1 +
 src/modules/01_exam/components/ExamForm.vue   | 233 ++++----
 .../01_exam/components/Form/Address.vue       | 534 +++++++++---------
 .../01_exam/components/Form/Career.vue        |  13 +-
 .../01_exam/components/Form/Document.vue      |  18 +-
 .../01_exam/components/Form/Education.vue     |  17 +-
 .../01_exam/components/Form/Family.vue        | 153 ++---
 .../01_exam/components/Form/Information.vue   | 155 +++--
 .../01_exam/components/Form/Occupation.vue    | 123 ++--
 .../01_exam/components/Form/Profile.vue       | 116 +++-
 src/modules/01_exam/interface/index/Main.ts   |  31 +-
 11 files changed, 809 insertions(+), 585 deletions(-)

diff --git a/src/api/exam/api.candidate.ts b/src/api/exam/api.candidate.ts
index 525d267..a1a235b 100644
--- a/src/api/exam/api.candidate.ts
+++ b/src/api/exam/api.candidate.ts
@@ -14,5 +14,6 @@ export default {
   candidatePayment: (examId: string) => `${candidate}payment/${examId}`,
   candidateStatus: (examId: string) => `${candidate}status/${examId}`,
   periodExamId: (examId: string) => `${periodExam}${examId}`,
+  candidateId: (examId: string) => `${candidate}${examId}`,
   candidate
 }
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 892930a..f7d4803 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -1,87 +1,32 @@
 <!-- step กรอกข้อมูล -->
 <template>
   <div>
-    <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"
-          animated
-          vertical
-          transition-prev="jump-up"
-          transition-next="jump-up"
-        >
-          ข้อมูลส่วนบุคคล
-          <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="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>
-        </q-tab-panels>
-      </template>
-      <template v-slot:after>
-        <q-tabs v-model="tab" vertical class="text-teal">
-          <q-tab name="profile" label="ข้อมูลส่วนบุคคล" :disable="statusEdit" />
-          <q-tab name="education" label="ประวัติการศีกษา" :disable="statusEdit" />
-          <q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" :disable="statusEdit" />
-          <q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
-        </q-tabs>
-      </template>
-    </q-splitter> -->
+    <Profile
+      :loader="loader"
+      v-model:statusEdit="statusEdit"
+      :status="status"
+      :btnSave="btnSave"
+      v-model:formInformation="formInformation"
+      v-model:formAddress="formAddress"
+      v-model:formFamily="formFamily"
+      v-model:formOccupation="formOccupation"
+    />
     <div class="text-center q-pt-sm">
       <q-checkbox
         v-model="acceptTermOfUse"
         :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
         label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
       />
-      <!-- v-if="tab == 'document'" -->
     </div>
 
     <div class="row justify-center q-pa-md">
-      <!-- <q-btn
-        color="primary"
-        class="q-ml-md"
-        label="กลับ"
-        @click="clickPreview(tab)"
-        v-if="
-          (status === 'register' || status === 'rejectRegister') &&
-          (tab == 'education' || tab == 'career' || tab == 'document')
-        "
-        icon="mdi-chevron-left"
-        :disable="statusEdit"
-      />
-      <q-btn
-        color="primary"
-        class="q-ml-md"
-        label="ต่อไป"
-        @click="clickNext(tab)"
-        v-if="
-          (status === 'register' || status === 'rejectRegister') &&
-          (tab == 'profile' || tab == 'education' || tab == 'career')
-        "
-        icon-right="mdi-chevron-right"
-        :disable="statusEdit"
-      /> -->
       <q-btn
         color="blue"
         class="q-ml-md"
         label="บันทึกข้อมูล"
         outline
         icon="mdi-content-save"
-        @click="okModalConfirm"
+        @click="saveData"
         v-if="status === 'register' || status === 'rejectRegister'"
         :disable="!acceptTermOfUse || statusEdit"
       />
@@ -105,10 +50,13 @@ import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import Profile from '@/modules/01_exam/components/Form/Profile.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'
 import { useRoute } from 'vue-router'
+import {
+  defaultInformation,
+  defaultOccupation,
+  defaultAddress,
+  defaultFamily
+} from '@/modules/01_exam/interface/index/Main'
 
 const props = defineProps({
   fetchStep: {
@@ -123,14 +71,17 @@ 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 { modalConfirm, modalError, success, dateToISO } = mixin
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const btnSave = ref<boolean>(false)
+const formInformation = ref<any>({})
+const formAddress = ref<any>({})
+const formFamily = ref<any>({})
+const formOccupation = ref<any>({})
 
 onMounted(async () => {
   if (props.status !== 'register') {
@@ -166,35 +117,115 @@ const saveForm = async () => {
     })
 }
 
-// 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 saveData = async () => {
+  await formInformation.value.validate().then(async (suc: boolean) => {
+    if (suc) {
+      await formAddress.value.validate().then(async (suc: boolean) => {
+        if (suc) {
+          await formFamily.value.validate().then(async (suc: boolean) => {
+            if (suc) {
+              await formOccupation.value.validate().then(async (suc: boolean) => {
+                if (suc) {
+                  const type = ref<string | null>('')
+                  if (defaultOccupation.value.status == 'official')
+                    type.value = defaultOccupation.value.official
+                  if (defaultOccupation.value.status == 'personnel')
+                    type.value = defaultOccupation.value.personnel
+                  if (defaultOccupation.value.status == 'officialsOther')
+                    type.value = defaultOccupation.value.officialsOther
+                  if (defaultOccupation.value.status == 'employee')
+                    type.value = defaultOccupation.value.employee
+                  if (defaultOccupation.value.status == 'other')
+                    type.value = defaultOccupation.value.other
+                  loader.value = true
+                  await http
+                    .post(config.API.candidateId(examId.value), {
+                      prefixId: defaultInformation.value.prefixId,
+                      lastName: defaultInformation.value.lastname,
+                      citizenProvinceId: defaultInformation.value.provinceId,
+                      citizenDistrictId: defaultInformation.value.districtId,
+                      dateOfBirth:
+                        defaultInformation.value.birthDate == null
+                          ? null
+                          : dateToISO(defaultInformation.value.birthDate),
+                      citizenDate:
+                        defaultInformation.value.cardIdDate == null
+                          ? null
+                          : dateToISO(defaultInformation.value.cardIdDate),
+                      citizenId: defaultInformation.value.cardid,
+                      firstName: defaultInformation.value.firstname,
+                      relationshipId: defaultInformation.value.relationship,
+                      nationality: defaultInformation.value.nationality,
+                      email: defaultInformation.value.email,
+                      mobilePhone: defaultInformation.value.phone,
+                      telephone: defaultInformation.value.tel,
+                      knowledge: defaultInformation.value.knowledge,
+                      occupationType: defaultOccupation.value.status,
+                      occupationCompany: defaultOccupation.value.company,
+                      occupationDepartment: defaultOccupation.value.department,
+                      occupationEmail: defaultOccupation.value.email,
+                      occupationTelephone: defaultOccupation.value.tel,
+                      occupationPosition: type.value,
+                      registAddress: defaultAddress.value.address,
+                      currentAddress: defaultAddress.value.addressC,
+                      registProvinceId: defaultAddress.value.provinceId,
+                      currentProvinceId: defaultAddress.value.provinceIdC,
+                      registDistrictId: defaultAddress.value.districtId,
+                      currentDistrictId: defaultAddress.value.districtIdC,
+                      registSubDistrictId: defaultAddress.value.subdistrictId,
+                      currentSubDistrictId: defaultAddress.value.subdistrictIdC,
+                      registZipCode: defaultAddress.value.code,
+                      currentZipCode: defaultAddress.value.codeC,
+                      registSame:
+                        defaultAddress.value.same == '1'
+                          ? true
+                          : defaultAddress.value.same == '0'
+                          ? false
+                          : null,
+                      marryPrefixId: defaultFamily.value.prefixIdC,
+                      marryFirstName: defaultFamily.value.firstnameC,
+                      marryLastName: defaultFamily.value.lastnameC,
+                      marryOccupation: defaultFamily.value.occupationC,
+                      marryNationality: defaultFamily.value.nationalityC,
+                      fatherPrefixId: defaultFamily.value.prefixIdM,
+                      fatherFirstName: defaultFamily.value.firstnameM,
+                      fatherLastName: defaultFamily.value.lastnameM,
+                      fatherOccupation: defaultFamily.value.occupationM,
+                      fatherNationality: defaultFamily.value.nationalityM,
+                      motherPrefixId: defaultFamily.value.prefixIdF,
+                      motherFirstName: defaultFamily.value.firstnameF,
+                      motherLastName: defaultFamily.value.lastnameF,
+                      motherOccupation: defaultFamily.value.occupationF,
+                      motherNationality: defaultFamily.value.nationalityF,
+                      marry:
+                        defaultFamily.value.same == '1'
+                          ? true
+                          : defaultFamily.value.same == '0'
+                          ? false
+                          : null
+                    })
+                    .then(() => {
+                      success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
+                    })
+                    .catch(() => {
+                      //   modalError.value = true
+                      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+                      //   modalErrorDetail.value = e.response.data.message
+                      // statusCode.value = e.response.data.status
+                    })
+                    .finally(async () => {
+                      loader.value = false
+                      await props.fetchStep()
+                    })
+                }
+              })
+            }
+          })
+        }
+      })
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/modules/01_exam/components/Form/Address.vue b/src/modules/01_exam/components/Form/Address.vue
index ed912bc..fabc6e4 100644
--- a/src/modules/01_exam/components/Form/Address.vue
+++ b/src/modules/01_exam/components/Form/Address.vue
@@ -1,212 +1,212 @@
 <!-- card ข้อมูลที่อยู่ -->
 <template>
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลที่อยู่"
-      icon="mdi-map-marker"
-      :save="saveData"
-      :addData="true"
-      :editOnly="false"
-      :cancel="cancelData"
-      :editData="status == 'register' || status == 'rejectRegister'"
-      :disable="statusEdit"
-    />
-    <!-- :changeBtn="changeBtn" -->
-    <q-form ref="myform">
-      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-        <div class="col-xs-12">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="addressData.address"
-            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
-            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
-          />
-          <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <q-select
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            v-model="addressData.provinceId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="provinceOptions"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value) => selectProvince(value, '1')"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <q-select
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            v-model="addressData.districtId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="districtOptions"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value) => selectDistrict(value, '1')"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <q-select
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            v-model="addressData.subdistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="subdistrictOptions"
-            option-value="id"
-            :label="`${'ตำบล / แขวง'}`"
-            @update:model-value="(value) => selectSubDistrict(value, '1')"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.code"
-            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
-        </div>
-        <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
-          <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
-          <q-radio
-            v-model="addressData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="ใช่"
-            dense
-            :disable="!(status == 'register' || status == 'rejectRegister')"
-          />
-          <q-radio
-            v-model="addressData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่"
-            dense
-            :disable="!(status == 'register' || status == 'rejectRegister')"
-          />
-        </div>
-
-        <div class="col-xs-12" v-if="addressData.same == '0'">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="addressData.addressC"
-            :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
-            :label="`${'ที่อยู่ปัจจุบัน'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <q-select
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            v-model="addressData.provinceIdC"
-            emit-value
-            map-options
-            option-label="name"
-            :options="provinceOptions"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value) => selectProvince(value, '2')"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <q-select
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            v-model="addressData.districtIdC"
-            emit-value
-            map-options
-            option-label="name"
-            :options="districtCOptions"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value) => selectDistrict(value, '2')"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <q-select
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            v-model="addressData.subdistrictIdC"
-            emit-value
-            map-options
-            option-label="name"
-            :options="subdistrictCOptions"
-            option-value="id"
-            :label="`${'ตำบล / แขวง'}`"
-            @update:model-value="(value) => selectSubDistrict(value, '2')"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.codeC"
-            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
-        </div>
+  <HeaderTop
+    v-model:edit="edit"
+    header="ข้อมูลที่อยู่"
+    icon="mdi-map-marker"
+    :save="saveData"
+    :addData="true"
+    :editOnly="false"
+    :cancel="cancelData"
+    :editData="false"
+    :disable="statusEdit"
+  />
+  <!-- :changeBtn="changeBtn" -->
+  <q-form ref="myform">
+    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+      <div class="col-xs-12">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="defaultAddress.address"
+          :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+          :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+        />
+        <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
       </div>
-    </q-form>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultAddress.provinceId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="provinceOptions"
+          option-value="id"
+          :label="`${'จังหวัด'}`"
+          @update:model-value="(value) => selectProvince(value, '1')"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultAddress.districtId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="districtOptions"
+          option-value="id"
+          :label="`${'เขต / อำเภอ'}`"
+          @update:model-value="(value) => selectDistrict(value, '1')"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultAddress.subdistrictId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="subdistrictOptions"
+          option-value="id"
+          :label="`${'ตำบล / แขวง'}`"
+          @update:model-value="(value) => selectSubDistrict(value, '1')"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          dense
+          lazy-rules
+          readonly
+          borderless
+          v-model="defaultAddress.code"
+          :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
+          :label="`${'รหัสไปรษณีย์'}`"
+        />
+      </div>
+      <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
+        <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
+        <q-radio
+          v-model="defaultAddress.same"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="1"
+          label="ใช่"
+          dense
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+        />
+        <q-radio
+          v-model="defaultAddress.same"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="0"
+          label="ไม่"
+          dense
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+        />
+      </div>
+
+      <div class="col-xs-12" v-if="defaultAddress.same == '0'">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="defaultAddress.addressC"
+          :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+          :label="`${'ที่อยู่ปัจจุบัน'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultAddress.provinceIdC"
+          emit-value
+          map-options
+          option-label="name"
+          :options="provinceOptions"
+          option-value="id"
+          :label="`${'จังหวัด'}`"
+          @update:model-value="(value) => selectProvince(value, '2')"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultAddress.districtIdC"
+          emit-value
+          map-options
+          option-label="name"
+          :options="districtCOptions"
+          option-value="id"
+          :label="`${'เขต / อำเภอ'}`"
+          @update:model-value="(value) => selectDistrict(value, '2')"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultAddress.subdistrictIdC"
+          emit-value
+          map-options
+          option-label="name"
+          :options="subdistrictCOptions"
+          option-value="id"
+          :label="`${'ตำบล / แขวง'}`"
+          @update:model-value="(value) => selectSubDistrict(value, '2')"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          dense
+          lazy-rules
+          readonly
+          borderless
+          v-model="defaultAddress.codeC"
+          :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
+          :label="`${'รหัสไปรษณีย์'}`"
+        />
+      </div>
+    </div>
+  </q-form>
   <!-- <q-dialog :model-value="modalConsend" persistent>
     <q-card style="min-width: 800px">
       <Conference :ok="consendOk" :close="consenClose" />
@@ -214,15 +214,15 @@
   </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useQuasar } from 'quasar'
+import { ref, onMounted, watch } from 'vue'
+import { QForm, useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import type { PropType } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import type { Address, DataOption } from '@/modules/01_exam/interface/index/Main'
-import { defaultAddress } from '@/modules/01_exam/interface/index/Main'
+import { defaultAddress, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 import { useRoute } from 'vue-router'
 
@@ -244,6 +244,14 @@ const props = defineProps({
   status: {
     type: String,
     required: true
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
+  },
+  form: {
+    type: Object,
+    required: true
   }
 })
 
@@ -254,25 +262,38 @@ const { success } = mixin
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const edit = ref<boolean>(true)
-const addressData = ref<Address>(defaultAddress)
-const myform = ref<any>()
-// const modalConsend = ref<boolean>(false)
+// const defaultAddress = ref<Address>(defaultAddress)
+const myform = ref<any>({})
 const loader = ref<boolean>(false)
 const districtOptions = ref<DataOption[]>([])
 const districtCOptions = ref<DataOption[]>([])
 const subdistrictOptions = ref<DataOption[]>([])
 const subdistrictCOptions = ref<DataOption[]>([])
 
-const emit = defineEmits(['update:statusEdit'])
+const emit = defineEmits(['update:statusEdit', 'update:form'])
+
+watch(props, async (count: any, prevCount: any) => {
+  //   if (props.btnSave == true) await saveData()
+})
+
+watch(myform, async (count: any, prevCount: any) => {
+  emit('update:form', count)
+})
+
+watch(defaultAddress, async (count: Address, prevCount: Address) => {
+  await changeData('address', count)
+})
 
 onMounted(async () => {
   await fetchData()
-  if (addressData.value.provinceId != null) await fetchDistrict(addressData.value.provinceId, '1')
-  if (addressData.value.provinceIdC != null) await fetchDistrict(addressData.value.provinceIdC, '2')
-  if (addressData.value.districtId != null)
-    await fetchSubDistrict(addressData.value.districtId, '1')
-  if (addressData.value.districtIdC != null)
-    await fetchSubDistrict(addressData.value.districtIdC, '2')
+  if (defaultAddress.value.provinceId != null)
+    await fetchDistrict(defaultAddress.value.provinceId, '1')
+  if (defaultAddress.value.provinceIdC != null)
+    await fetchDistrict(defaultAddress.value.provinceIdC, '2')
+  if (defaultAddress.value.districtId != null)
+    await fetchSubDistrict(defaultAddress.value.districtId, '1')
+  if (defaultAddress.value.districtIdC != null)
+    await fetchSubDistrict(defaultAddress.value.districtIdC, '2')
 })
 
 const fetchData = async () => {
@@ -280,17 +301,18 @@ const fetchData = async () => {
     .get(config.API.candidateAddress(examId.value))
     .then((res) => {
       const data = res.data.result
-      addressData.value.address = data.registAddress
-      addressData.value.addressC = data.currentAddress
-      addressData.value.provinceId = data.registProvinceId
-      addressData.value.provinceIdC = data.currentProvinceId
-      addressData.value.districtId = data.registDistrictId
-      addressData.value.districtIdC = data.currentDistrictId
-      addressData.value.subdistrictId = data.registSubDistrictId
-      addressData.value.subdistrictIdC = data.currentSubDistrictId
-      addressData.value.code = data.registZipCode
-      addressData.value.codeC = data.currentZipCode
-      addressData.value.same = data.registSame == true ? '1' : data.registSame == false ? '0' : null
+      defaultAddress.value.address = data.registAddress
+      defaultAddress.value.addressC = data.currentAddress
+      defaultAddress.value.provinceId = data.registProvinceId
+      defaultAddress.value.provinceIdC = data.currentProvinceId
+      defaultAddress.value.districtId = data.registDistrictId
+      defaultAddress.value.districtIdC = data.currentDistrictId
+      defaultAddress.value.subdistrictId = data.registSubDistrictId
+      defaultAddress.value.subdistrictIdC = data.currentSubDistrictId
+      defaultAddress.value.code = data.registZipCode
+      defaultAddress.value.codeC = data.currentZipCode
+      defaultAddress.value.same =
+        data.registSame == true ? '1' : data.registSame == false ? '0' : null
     })
     .catch(() => {})
     .finally(() => {
@@ -305,21 +327,25 @@ const saveData = async () => {
       loader.value = true
       await http
         .post(config.API.candidateAddress(examId.value), {
-          registAddress: addressData.value.address,
-          currentAddress: addressData.value.addressC,
-          registProvinceId: addressData.value.provinceId,
-          currentProvinceId: addressData.value.provinceIdC,
-          registDistrictId: addressData.value.districtId,
-          currentDistrictId: addressData.value.districtIdC,
-          registSubDistrictId: addressData.value.subdistrictId,
-          currentSubDistrictId: addressData.value.subdistrictIdC,
-          registZipCode: addressData.value.code,
-          currentZipCode: addressData.value.codeC,
+          registAddress: defaultAddress.value.address,
+          currentAddress: defaultAddress.value.addressC,
+          registProvinceId: defaultAddress.value.provinceId,
+          currentProvinceId: defaultAddress.value.provinceIdC,
+          registDistrictId: defaultAddress.value.districtId,
+          currentDistrictId: defaultAddress.value.districtIdC,
+          registSubDistrictId: defaultAddress.value.subdistrictId,
+          currentSubDistrictId: defaultAddress.value.subdistrictIdC,
+          registZipCode: defaultAddress.value.code,
+          currentZipCode: defaultAddress.value.codeC,
           registSame:
-            addressData.value.same == '1' ? true : addressData.value.same == '0' ? false : null
+            defaultAddress.value.same == '1'
+              ? true
+              : defaultAddress.value.same == '0'
+              ? false
+              : null
         })
         .then(() => {
-          success($q, 'บันทึกข้อมูลที่อยู่สำเร็จ')
+          //   success($q, 'บันทึกข้อมูลที่อยู่สำเร็จ')
           // edit.value = false
           emit('update:statusEdit', false)
         })
@@ -355,13 +381,13 @@ const saveData = async () => {
 
 const selectProvince = (e: string, name: string) => {
   if (name == '1') {
-    addressData.value.districtId = ''
-    addressData.value.subdistrictId = ''
-    addressData.value.code = null
+    defaultAddress.value.districtId = ''
+    defaultAddress.value.subdistrictId = ''
+    defaultAddress.value.code = null
   } else {
-    addressData.value.districtIdC = ''
-    addressData.value.subdistrictIdC = ''
-    addressData.value.codeC = null
+    defaultAddress.value.districtIdC = ''
+    defaultAddress.value.subdistrictIdC = ''
+    defaultAddress.value.codeC = null
   }
   myform.value.resetValidation()
   fetchDistrict(e, name)
@@ -369,11 +395,11 @@ const selectProvince = (e: string, name: string) => {
 
 const selectDistrict = (e: string, name: string) => {
   if (name == '1') {
-    addressData.value.subdistrictId = ''
-    addressData.value.code = null
+    defaultAddress.value.subdistrictId = ''
+    defaultAddress.value.code = null
   } else {
-    addressData.value.subdistrictIdC = ''
-    addressData.value.codeC = null
+    defaultAddress.value.subdistrictIdC = ''
+    defaultAddress.value.codeC = null
   }
   myform.value.resetValidation()
   fetchSubDistrict(e, name)
@@ -383,11 +409,11 @@ const selectSubDistrict = (e: string, name: string) => {
   if (name == '1') {
     const findcode = subdistrictOptions.value.filter((r) => r.id == e)
     const namecode = findcode.length > 0 ? findcode[0].zipCode : null
-    addressData.value.code = namecode
+    defaultAddress.value.code = namecode
   } else {
     const findcode = subdistrictCOptions.value.filter((r) => r.id == e)
     const namecode = findcode.length > 0 ? findcode[0].zipCode : null
-    addressData.value.codeC = namecode
+    defaultAddress.value.codeC = namecode
   }
 }
 
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 1595220..bea50ae 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -129,7 +129,11 @@
                     :model-value="dateThaiRange(duration)"
                   >
                     <template v-slot:prepend>
-                      <q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="mdi-calendar-outline"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -192,7 +196,6 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Career
 import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
-import Conference from '@/modules/01_exam/components/Conference.vue'
 import { useRoute } from 'vue-router'
 
 const props = defineProps({
@@ -212,6 +215,10 @@ const props = defineProps({
   notiNoEdit: {
     type: Function,
     default: () => console.log('not function')
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
   }
 })
 
@@ -236,9 +243,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
-const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
-// const modalConsend = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const rows = ref<RequestItemsObject[]>([])
diff --git a/src/modules/01_exam/components/Form/Document.vue b/src/modules/01_exam/components/Form/Document.vue
index 1d635cb..ff18d51 100644
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -50,15 +50,7 @@
             <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
               <q-tooltip>ดาวน์โหลด</q-tooltip>
             </q-btn>
-            <q-btn
-              size="12px"
-              flat
-              dense
-              round
-              color="red"
-              icon="mdi-delete-outline"
-              v-if="edit"
-            >
+            <q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
               <q-tooltip>ลบไฟล์</q-tooltip>
             </q-btn>
           </div>
@@ -88,6 +80,10 @@ const props = defineProps({
   status: {
     type: String,
     required: true
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
   }
 })
 
@@ -109,6 +105,10 @@ const files = ref<any>([
 ])
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
+// watch(props, async (count: any, prevCount: any) => {
+//     if (props.btnSave == true) await saveData()
+// })
+
 watch(edit, (count: boolean, prevCount: boolean) => {
   emit('update:statusEdit', count)
 })
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index d310de7..54a7c1b 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -145,7 +145,11 @@
                     :model-value="dateThaiRange(duration)"
                   >
                     <template v-slot:prepend>
-                      <q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="mdi-calendar-outline"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -194,7 +198,6 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Educat
 import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
-import Conference from '@/modules/01_exam/components/Conference.vue'
 import { useRoute } from 'vue-router'
 
 const props = defineProps({
@@ -214,6 +217,10 @@ const props = defineProps({
   notiNoEdit: {
     type: Function,
     default: () => console.log('not function')
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
   }
 })
 
@@ -240,9 +247,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
-const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
-// const modalConsend = ref<boolean>(false)
 const rows = ref<RequestItemsObject[]>([])
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
@@ -304,6 +309,10 @@ const columns = ref<Columns>([
   }
 ])
 
+// watch(props, async (count: any, prevCount: any) => {
+//   if (props.btnSave == true) await saveData()
+// })
+
 watch(loader, (count: boolean, prevCount: boolean) => {
   emit('update:loader', count)
 })
diff --git a/src/modules/01_exam/components/Form/Family.vue b/src/modules/01_exam/components/Form/Family.vue
index d38a4d1..07c7088 100644
--- a/src/modules/01_exam/components/Form/Family.vue
+++ b/src/modules/01_exam/components/Form/Family.vue
@@ -8,7 +8,7 @@
     :addData="true"
     :editOnly="false"
     :cancel="cancelData"
-    :editData="status == 'register' || status == 'rejectRegister'"
+    :editData="false"
     :disable="statusEdit"
   />
   <!-- :changeBtn="changeBtn" -->
@@ -17,7 +17,7 @@
       <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
         <label class="text-weight-bold">• คู่สมรส</label>
         <q-radio
-          v-model="familyData.same"
+          v-model="defaultFamily.same"
           checked-icon="task_alt"
           unchecked-icon="panorama_fish_eye"
           val="1"
@@ -27,7 +27,7 @@
           @update:model-value="selectRadio"
         />
         <q-radio
-          v-model="familyData.same"
+          v-model="defaultFamily.same"
           checked-icon="task_alt"
           unchecked-icon="panorama_fish_eye"
           val="0"
@@ -37,7 +37,7 @@
           @update:model-value="selectRadio"
         />
       </div>
-      <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+      <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
         <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -46,7 +46,7 @@
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
-          v-model="familyData.prefixIdC"
+          v-model="defaultFamily.prefixIdC"
           emit-value
           map-options
           option-label="name"
@@ -56,7 +56,7 @@
         />
       </div>
 
-      <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
@@ -64,12 +64,12 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.firstnameC"
+          v-model="defaultFamily.firstnameC"
           :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
           :label="`${'ชื่อ'}`"
         />
       </div>
-      <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
@@ -77,12 +77,12 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.lastnameC"
+          v-model="defaultFamily.lastnameC"
           :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
           :label="`${'นามสกุล'}`"
         />
       </div>
-      <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+      <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
@@ -90,12 +90,12 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.occupationC"
+          v-model="defaultFamily.occupationC"
           :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
           :label="`${'อาชีพ'}`"
         />
       </div>
-      <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+      <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
@@ -103,7 +103,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.nationalityC"
+          v-model="defaultFamily.nationalityC"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
@@ -119,7 +119,7 @@
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
-          v-model="familyData.prefixIdM"
+          v-model="defaultFamily.prefixIdM"
           emit-value
           map-options
           option-label="name"
@@ -137,7 +137,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.firstnameM"
+          v-model="defaultFamily.firstnameM"
           :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
           :label="`${'ชื่อ'}`"
         />
@@ -150,7 +150,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.lastnameM"
+          v-model="defaultFamily.lastnameM"
           :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
           :label="`${'นามสกุล'}`"
         />
@@ -163,7 +163,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.occupationM"
+          v-model="defaultFamily.occupationM"
           :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
           :label="`${'อาชีพ'}`"
         />
@@ -176,7 +176,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.nationalityM"
+          v-model="defaultFamily.nationalityM"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
@@ -192,7 +192,7 @@
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
-          v-model="familyData.prefixIdF"
+          v-model="defaultFamily.prefixIdF"
           emit-value
           map-options
           option-label="name"
@@ -209,7 +209,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.firstnameF"
+          v-model="defaultFamily.firstnameF"
           :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
           :label="`${'ชื่อ'}`"
         />
@@ -222,7 +222,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.lastnameF"
+          v-model="defaultFamily.lastnameF"
           :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
           :label="`${'นามสกุล'}`"
         />
@@ -235,7 +235,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.occupationF"
+          v-model="defaultFamily.occupationF"
           :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
           :label="`${'อาชีพ'}`"
         />
@@ -248,7 +248,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="familyData.nationalityF"
+          v-model="defaultFamily.nationalityF"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
@@ -263,16 +263,15 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { useQuasar } from 'quasar'
+import { QForm, useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import type { PropType } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
-import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
+import { defaultFamily, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
-import Conference from '@/modules/01_exam/components/Conference.vue'
 import { useRoute } from 'vue-router'
 
 const props = defineProps({
@@ -291,6 +290,14 @@ const props = defineProps({
   status: {
     type: String,
     required: true
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
+  },
+  form: {
+    type: Object,
+    required: true
   }
 })
 
@@ -299,14 +306,25 @@ const mixin = useCounterMixin()
 const store = useExamDataStore()
 const { success } = mixin
 const edit = ref<boolean>(true)
-const myform = ref<any>()
-const familyData = ref<Family>(defaultFamily)
-// const modalConsend = ref<boolean>(false)
+const myform = ref<any>({})
+// const defaultFamily = ref<Family>(defaultFamily)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const loader = ref<boolean>(false)
 
-const emit = defineEmits(['update:statusEdit'])
+const emit = defineEmits(['update:statusEdit', 'update:form'])
+
+watch(props, async (count: any, prevCount: any) => {
+  //   if (props.btnSave == true) await saveData()
+})
+
+watch(myform, async (count: any, prevCount: any) => {
+  emit('update:form', count)
+})
+
+watch(defaultFamily, async (count: Family, prevCount: Family) => {
+  await changeData('family', count)
+})
 
 onMounted(async () => {
   await fetchData()
@@ -318,22 +336,22 @@ const fetchData = async () => {
     .get(config.API.candidateFamily(examId.value))
     .then((res) => {
       const data = res.data.result
-      familyData.value.prefixIdC = data.marryPrefixId
-      familyData.value.firstnameC = data.marryFirstName
-      familyData.value.lastnameC = data.marryLastName
-      familyData.value.occupationC = data.marryOccupation
-      familyData.value.nationalityC = data.marryNationality
-      familyData.value.prefixIdM = data.fatherPrefixId
-      familyData.value.firstnameM = data.fatherFirstName
-      familyData.value.lastnameM = data.fatherLastName
-      familyData.value.occupationM = data.fatherOccupation
-      familyData.value.nationalityM = data.fatherNationality
-      familyData.value.prefixIdF = data.motherPrefixId
-      familyData.value.firstnameF = data.motherFirstName
-      familyData.value.lastnameF = data.motherLastName
-      familyData.value.occupationF = data.motherOccupation
-      familyData.value.nationalityF = data.motherNationality
-      familyData.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null
+      defaultFamily.value.prefixIdC = data.marryPrefixId
+      defaultFamily.value.firstnameC = data.marryFirstName
+      defaultFamily.value.lastnameC = data.marryLastName
+      defaultFamily.value.occupationC = data.marryOccupation
+      defaultFamily.value.nationalityC = data.marryNationality
+      defaultFamily.value.prefixIdM = data.fatherPrefixId
+      defaultFamily.value.firstnameM = data.fatherFirstName
+      defaultFamily.value.lastnameM = data.fatherLastName
+      defaultFamily.value.occupationM = data.fatherOccupation
+      defaultFamily.value.nationalityM = data.fatherNationality
+      defaultFamily.value.prefixIdF = data.motherPrefixId
+      defaultFamily.value.firstnameF = data.motherFirstName
+      defaultFamily.value.lastnameF = data.motherLastName
+      defaultFamily.value.occupationF = data.motherOccupation
+      defaultFamily.value.nationalityF = data.motherNationality
+      defaultFamily.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null
     })
     .catch(() => {})
     .finally(() => {
@@ -348,25 +366,26 @@ const saveData = async () => {
       loader.value = true
       await http
         .post(config.API.candidateFamily(examId.value), {
-          marryPrefixId: familyData.value.prefixIdC,
-          marryFirstName: familyData.value.firstnameC,
-          marryLastName: familyData.value.lastnameC,
-          marryOccupation: familyData.value.occupationC,
-          marryNationality: familyData.value.nationalityC,
-          fatherPrefixId: familyData.value.prefixIdM,
-          fatherFirstName: familyData.value.firstnameM,
-          fatherLastName: familyData.value.lastnameM,
-          fatherOccupation: familyData.value.occupationM,
-          fatherNationality: familyData.value.nationalityM,
-          motherPrefixId: familyData.value.prefixIdF,
-          motherFirstName: familyData.value.firstnameF,
-          motherLastName: familyData.value.lastnameF,
-          motherOccupation: familyData.value.occupationF,
-          motherNationality: familyData.value.nationalityF,
-          marry: familyData.value.same == '1' ? true : familyData.value.same == '0' ? false : null
+          marryPrefixId: defaultFamily.value.prefixIdC,
+          marryFirstName: defaultFamily.value.firstnameC,
+          marryLastName: defaultFamily.value.lastnameC,
+          marryOccupation: defaultFamily.value.occupationC,
+          marryNationality: defaultFamily.value.nationalityC,
+          fatherPrefixId: defaultFamily.value.prefixIdM,
+          fatherFirstName: defaultFamily.value.firstnameM,
+          fatherLastName: defaultFamily.value.lastnameM,
+          fatherOccupation: defaultFamily.value.occupationM,
+          fatherNationality: defaultFamily.value.nationalityM,
+          motherPrefixId: defaultFamily.value.prefixIdF,
+          motherFirstName: defaultFamily.value.firstnameF,
+          motherLastName: defaultFamily.value.lastnameF,
+          motherOccupation: defaultFamily.value.occupationF,
+          motherNationality: defaultFamily.value.nationalityF,
+          marry:
+            defaultFamily.value.same == '1' ? true : defaultFamily.value.same == '0' ? false : null
         })
         .then(() => {
-          success($q, 'บันทึกข้อมูลครอบครัวสำเร็จ')
+          //   success($q, 'บันทึกข้อมูลครอบครัวสำเร็จ')
           // edit.value = false
           emit('update:statusEdit', false)
         })
@@ -402,10 +421,10 @@ const saveData = async () => {
 
 const selectRadio = (e: boolean) => {
   if (!e) {
-    familyData.value.prefixIdC = ''
-    familyData.value.firstnameC = ''
-    familyData.value.lastnameC = ''
-    familyData.value.occupationC = ''
+    defaultFamily.value.prefixIdC = ''
+    defaultFamily.value.firstnameC = ''
+    defaultFamily.value.lastnameC = ''
+    defaultFamily.value.occupationC = ''
   }
 }
 
diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index 5d43fd4..812577b 100644
--- a/src/modules/01_exam/components/Form/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -8,7 +8,7 @@
     :addData="true"
     :editOnly="false"
     :cancel="cancelData"
-    :editData="status == 'register' || status == 'rejectRegister'"
+    :editData="false"
     :disable="statusEdit"
   />
   <!-- :changeBtn="changeBtn" -->
@@ -23,7 +23,7 @@
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
-          v-model="informaData.prefixId"
+          v-model="defaultInformation.prefixId"
           emit-value
           map-options
           option-label="name"
@@ -40,7 +40,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="informaData.firstname"
+          v-model="defaultInformation.firstname"
           :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
           :label="`${'ชื่อ'}`"
         />
@@ -53,7 +53,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="informaData.lastname"
+          v-model="defaultInformation.lastname"
           :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
           :label="`${'นามสกุล'}`"
         />
@@ -66,14 +66,14 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="informaData.nationality"
+          v-model="defaultInformation.nationality"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
         <datepicker
-          v-model="informaData.birthDate"
+          v-model="defaultInformation.birthDate"
           :locale="'th'"
           autoApply
           :enableTimePicker="false"
@@ -95,7 +95,11 @@
               lazy-rules
               :readonly="!(status == 'register' || status == 'rejectRegister')"
               :borderless="!(status == 'register' || status == 'rejectRegister')"
-              :model-value="informaData.birthDate == null ? null : date2Thai(informaData.birthDate)"
+              :model-value="
+                defaultInformation.birthDate == null
+                  ? null
+                  : date2Thai(defaultInformation.birthDate)
+              "
               :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
               :label="`${'วัน/เดือน/ปี เกิด'}`"
             >
@@ -124,7 +128,9 @@
           readonly
           borderless
           :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
-          :model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
+          :model-value="
+            defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
+          "
           :label="`${'อายุ'}`"
         />
       </div>
@@ -137,7 +143,7 @@
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
-          v-model="informaData.relationship"
+          v-model="defaultInformation.relationship"
           emit-value
           map-options
           option-label="name"
@@ -156,7 +162,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="informaData.cardid"
+          v-model="defaultInformation.cardid"
           maxlength="13"
           :rules="[
             (val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@@ -174,7 +180,7 @@
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
-          v-model="informaData.provinceId"
+          v-model="defaultInformation.provinceId"
           emit-value
           map-options
           option-label="name"
@@ -193,7 +199,7 @@
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="informaData.cardid"
+          v-model="defaultInformation.cardid"
           :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
           label="ออกให้ ณ อำเภอ"
         /> -->
@@ -205,7 +211,7 @@
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
-          v-model="informaData.districtId"
+          v-model="defaultInformation.districtId"
           emit-value
           map-options
           option-label="name"
@@ -217,7 +223,7 @@
 
       <div class="col-xs-12 col-sm-3 col-md-3">
         <datepicker
-          v-model="informaData.cardIdDate"
+          v-model="defaultInformation.cardIdDate"
           :locale="'th'"
           autoApply
           :enableTimePicker="false"
@@ -240,7 +246,9 @@
               :readonly="!(status == 'register' || status == 'rejectRegister')"
               :borderless="!(status == 'register' || status == 'rejectRegister')"
               :model-value="
-                informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
+                defaultInformation.cardIdDate == null
+                  ? null
+                  : date2Thai(defaultInformation.cardIdDate)
               "
               :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
               :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
@@ -272,7 +280,7 @@
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="informaData.tel"
+          v-model="defaultInformation.tel"
           :rules="[
             (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
             (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
@@ -291,7 +299,7 @@
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="informaData.phone"
+          v-model="defaultInformation.phone"
           :rules="[
             (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
             (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
@@ -307,7 +315,7 @@
           lazy-rules
           :readonly="true"
           :borderless="true"
-          v-model="informaData.email"
+          v-model="defaultInformation.email"
           label="E-mail address"
         />
       </div>
@@ -343,7 +351,7 @@
         lazy-rules
         :readonly="!(status == 'register' || status == 'rejectRegister')"
         :borderless="!(status == 'register' || status == 'rejectRegister')"
-        v-model="informaData.knowledge"
+        v-model="defaultInformation.knowledge"
         label="ความรู้ความสามารถพิเศษ"
         type="textarea"
       />
@@ -356,17 +364,16 @@
   </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useQuasar } from 'quasar'
+import { ref, onMounted, watch } from 'vue'
+import { QForm, useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import type { PropType } from 'vue'
 import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
-import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
+import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
-import Conference from '@/modules/01_exam/components/Conference.vue'
 import { useRoute } from 'vue-router'
 import keycloak from '@/plugins/keycloak'
 
@@ -394,6 +401,14 @@ const props = defineProps({
   status: {
     type: String,
     required: true
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
+  },
+  form: {
+    type: Object,
+    required: true
   }
 })
 
@@ -405,19 +420,32 @@ const districtOptions = ref<DataOption[]>([])
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const edit = ref<boolean>(true)
-const informaData = ref<Information>(defaultInformation)
-const myform = ref<any>()
+// const defaultInformation = ref<Information>(defaultInformation)
+const myform = ref<any>({})
 const imageUrl = ref<string | null>(null)
 const disabledPic = ref<boolean>(false)
 // const modalConsend = ref<boolean>(false)
 const fileData = ref<File | null>()
 const loader = ref<boolean>(false)
 
-const emit = defineEmits(['update:statusEdit'])
+const emit = defineEmits(['update:statusEdit', 'update:form'])
+
+watch(props, async (count: any, prevCount: any) => {
+  //   if (props.btnSave == true) await saveData()
+})
+
+watch(myform, async (count: any, prevCount: any) => {
+  emit('update:form', count)
+})
+
+watch(defaultInformation, async (count: Information, prevCount: Information) => {
+  await changeData('information', count)
+})
 
 onMounted(async () => {
   await fetchData()
-  if (informaData.value.provinceId != null) await fetchDistrict(informaData.value.provinceId)
+  if (defaultInformation.value.provinceId != null)
+    await fetchDistrict(defaultInformation.value.provinceId)
 })
 
 const fetchData = async () => {
@@ -426,26 +454,29 @@ const fetchData = async () => {
     .get(config.API.candidateInformation(examId.value))
     .then((res) => {
       const data = res.data.result
-      informaData.value.prefixId = data.prefixId
-      informaData.value.lastname = data.lastName
-      informaData.value.provinceId = data.citizenProvinceId
-      informaData.value.districtId = data.citizenDistrictId
-      informaData.value.birthDate = data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
-      informaData.value.cardIdDate = data.citizenDate == null ? null : new Date(data.citizenDate)
-      informaData.value.cardid = data.citizenId
-      informaData.value.firstname = data.firstName
-      informaData.value.relationship = data.relationshipId
-      informaData.value.nationality = data.nationality
-      informaData.value.email = data.email
-      informaData.value.phone = data.mobilePhone
-      informaData.value.tel = data.telephone
-      informaData.value.knowledge = data.knowledge
+      defaultInformation.value.prefixId = data.prefixId
+      defaultInformation.value.lastname = data.lastName
+      defaultInformation.value.provinceId = data.citizenProvinceId
+      defaultInformation.value.districtId = data.citizenDistrictId
+      defaultInformation.value.birthDate =
+        data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
+      defaultInformation.value.cardIdDate =
+        data.citizenDate == null ? null : new Date(data.citizenDate)
+      defaultInformation.value.cardid = data.citizenId
+      defaultInformation.value.firstname = data.firstName
+      defaultInformation.value.relationship = data.relationshipId
+      defaultInformation.value.nationality = data.nationality
+      defaultInformation.value.email = data.email
+      defaultInformation.value.phone = data.mobilePhone
+      defaultInformation.value.tel = data.telephone
+      defaultInformation.value.knowledge = data.knowledge
     })
     .catch(() => {
-      informaData.value.email = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
-      informaData.value.firstname =
+      defaultInformation.value.email =
+        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
+      defaultInformation.value.firstname =
         keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
-      informaData.value.lastname =
+      defaultInformation.value.lastname =
         keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
     })
     .finally(() => {
@@ -454,7 +485,7 @@ const fetchData = async () => {
 }
 
 const selectProvince = (val: string) => {
-  informaData.value.districtId = ''
+  defaultInformation.value.districtId = ''
   myform.value.resetValidation()
   fetchDistrict(val)
 }
@@ -466,25 +497,29 @@ const saveData = async () => {
       loader.value = true
       await http
         .post(config.API.candidateInformation(examId.value), {
-          prefixId: informaData.value.prefixId,
-          lastName: informaData.value.lastname,
-          citizenProvinceId: informaData.value.provinceId,
-          citizenDistrictId: informaData.value.districtId,
+          prefixId: defaultInformation.value.prefixId,
+          lastName: defaultInformation.value.lastname,
+          citizenProvinceId: defaultInformation.value.provinceId,
+          citizenDistrictId: defaultInformation.value.districtId,
           dateOfBirth:
-            informaData.value.birthDate == null ? null : dateToISO(informaData.value.birthDate),
+            defaultInformation.value.birthDate == null
+              ? null
+              : dateToISO(defaultInformation.value.birthDate),
           citizenDate:
-            informaData.value.cardIdDate == null ? null : dateToISO(informaData.value.cardIdDate),
-          citizenId: informaData.value.cardid,
-          firstName: informaData.value.firstname,
-          relationshipId: informaData.value.relationship,
-          nationality: informaData.value.nationality,
-          email: informaData.value.email,
-          mobilePhone: informaData.value.phone,
-          telephone: informaData.value.tel,
-          knowledge: informaData.value.knowledge
+            defaultInformation.value.cardIdDate == null
+              ? null
+              : dateToISO(defaultInformation.value.cardIdDate),
+          citizenId: defaultInformation.value.cardid,
+          firstName: defaultInformation.value.firstname,
+          relationshipId: defaultInformation.value.relationship,
+          nationality: defaultInformation.value.nationality,
+          email: defaultInformation.value.email,
+          mobilePhone: defaultInformation.value.phone,
+          telephone: defaultInformation.value.tel,
+          knowledge: defaultInformation.value.knowledge
         })
         .then(() => {
-          success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
+          //   success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
           // edit.value = false
           emit('update:statusEdit', false)
         })
diff --git a/src/modules/01_exam/components/Form/Occupation.vue b/src/modules/01_exam/components/Form/Occupation.vue
index ef31129..b0f1794 100644
--- a/src/modules/01_exam/components/Form/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Occupation.vue
@@ -8,7 +8,7 @@
     :addData="true"
     :editOnly="false"
     :cancel="cancelData"
-    :editData="status == 'register' || status == 'rejectRegister'"
+    :editData="false"
     :disable="statusEdit"
   />
   <!-- :changeBtn="changeBtn" -->
@@ -24,16 +24,16 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.official"
+          v-model="defaultOccupation.official"
           :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
           :disable="
-            occupationData.status !== 'official' ||
+            defaultOccupation.status !== 'official' ||
             !(status == 'register' || status == 'rejectRegister')
           "
         >
           <template v-slot:before>
             <q-radio
-              v-model="occupationData.status"
+              v-model="defaultOccupation.status"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="official"
@@ -54,16 +54,16 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.personnel"
+          v-model="defaultOccupation.personnel"
           :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
           :disable="
-            occupationData.status !== 'personnel' ||
+            defaultOccupation.status !== 'personnel' ||
             !(status == 'register' || status == 'rejectRegister')
           "
         >
           <template v-slot:before>
             <q-radio
-              v-model="occupationData.status"
+              v-model="defaultOccupation.status"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="personnel"
@@ -84,16 +84,16 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.officialsOther"
+          v-model="defaultOccupation.officialsOther"
           :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
           :disable="
-            occupationData.status !== 'officialsOther' ||
+            defaultOccupation.status !== 'officialsOther' ||
             !(status == 'register' || status == 'rejectRegister')
           "
         >
           <template v-slot:before>
             <q-radio
-              v-model="occupationData.status"
+              v-model="defaultOccupation.status"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="officialsOther"
@@ -114,16 +114,16 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.employee"
+          v-model="defaultOccupation.employee"
           :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
           :disable="
-            occupationData.status !== 'employee' ||
+            defaultOccupation.status !== 'employee' ||
             !(status == 'register' || status == 'rejectRegister')
           "
         >
           <template v-slot:before>
             <q-radio
-              v-model="occupationData.status"
+              v-model="defaultOccupation.status"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="employee"
@@ -136,7 +136,7 @@
           </template>
         </q-input>
         <q-radio
-          v-model="occupationData.status"
+          v-model="defaultOccupation.status"
           checked-icon="task_alt"
           unchecked-icon="panorama_fish_eye"
           val="studying"
@@ -155,16 +155,16 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.other"
+          v-model="defaultOccupation.other"
           :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
           :disable="
-            occupationData.status !== 'other' ||
+            defaultOccupation.status !== 'other' ||
             !(status == 'register' || status == 'rejectRegister')
           "
         >
           <template v-slot:before>
             <q-radio
-              v-model="occupationData.status"
+              v-model="defaultOccupation.status"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="other"
@@ -187,7 +187,7 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.company"
+          v-model="defaultOccupation.company"
           :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
           :label="`${'สำนัก/บริษัท'}`"
         />
@@ -202,7 +202,7 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.department"
+          v-model="defaultOccupation.department"
           :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
           :label="`${'กอง/ฝ่าย'}`"
         />
@@ -217,7 +217,7 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.email"
+          v-model="defaultOccupation.email"
           :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
           :label="`${'E-mail address'}`"
         />
@@ -234,7 +234,7 @@
           autogrow
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="occupationData.tel"
+          v-model="defaultOccupation.tel"
           :rules="[
             (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
             (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
@@ -251,16 +251,15 @@
   </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useQuasar } from 'quasar'
+import { ref, onMounted, watch } from 'vue'
+import { QForm, useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import type { Occupation } from '@/modules/01_exam/interface/index/Main'
-import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
+import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
-import Conference from '@/modules/01_exam/components/Conference.vue'
 import { useRoute } from 'vue-router'
 
 const props = defineProps({
@@ -275,6 +274,14 @@ const props = defineProps({
   status: {
     type: String,
     required: true
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
+  },
+  form: {
+    type: Object,
+    required: true
   }
 })
 
@@ -283,14 +290,26 @@ const mixin = useCounterMixin()
 const store = useExamDataStore()
 const { success } = mixin
 const edit = ref<boolean>(true)
-const occupationData = ref<Occupation>(defaultOccupation)
-const myform = ref<any>()
+// const defaultOccupation = ref<Occupation>(defaultOccupation)
+const myform = ref<any>({})
 // const modalConsend = ref<boolean>(false)
 const loader = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 
-const emit = defineEmits(['update:statusEdit'])
+const emit = defineEmits(['update:statusEdit', 'update:form'])
+
+watch(props, async (count: any, prevCount: any) => {
+  //   if (props.btnSave == true) await saveData()
+})
+
+watch(myform, async (count: any, prevCount: any) => {
+  emit('update:form', count)
+})
+
+watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
+  await changeData('occupation', count)
+})
 
 onMounted(async () => {
   await fetchData()
@@ -302,20 +321,21 @@ const fetchData = async () => {
     .get(config.API.candidateOccupation(examId.value))
     .then((res) => {
       const data = res.data.result
-      occupationData.value.status = data.occupationType
-      occupationData.value.company = data.occupationCompany
-      occupationData.value.department = data.occupationDepartment
-      occupationData.value.email = data.occupationEmail
-      occupationData.value.tel = data.occupationTelephone
-      occupationData.value.official =
+      defaultOccupation.value.status = data.occupationType
+      defaultOccupation.value.company = data.occupationCompany
+      defaultOccupation.value.department = data.occupationDepartment
+      defaultOccupation.value.email = data.occupationEmail
+      defaultOccupation.value.tel = data.occupationTelephone
+      defaultOccupation.value.official =
         data.occupationType == 'official' ? data.occupationPosition : null
-      occupationData.value.personnel =
+      defaultOccupation.value.personnel =
         data.occupationType == 'personnel' ? data.occupationPosition : null
-      occupationData.value.officialsOther =
+      defaultOccupation.value.officialsOther =
         data.occupationType == 'officialsOther' ? data.occupationPosition : null
-      occupationData.value.employee =
+      defaultOccupation.value.employee =
         data.occupationType == 'employee' ? data.occupationPosition : null
-      occupationData.value.other = data.occupationType == 'other' ? data.occupationPosition : null
+      defaultOccupation.value.other =
+        data.occupationType == 'other' ? data.occupationPosition : null
     })
     .catch(() => {})
     .finally(() => {
@@ -328,24 +348,27 @@ const saveData = async () => {
     if (suc) {
       //   if (store.consend == true) {
       const type = ref<string | null>('')
-      if (occupationData.value.status == 'official') type.value = occupationData.value.official
-      if (occupationData.value.status == 'personnel') type.value = occupationData.value.personnel
-      if (occupationData.value.status == 'officialsOther')
-        type.value = occupationData.value.officialsOther
-      if (occupationData.value.status == 'employee') type.value = occupationData.value.employee
-      if (occupationData.value.status == 'other') type.value = occupationData.value.other
+      if (defaultOccupation.value.status == 'official')
+        type.value = defaultOccupation.value.official
+      if (defaultOccupation.value.status == 'personnel')
+        type.value = defaultOccupation.value.personnel
+      if (defaultOccupation.value.status == 'officialsOther')
+        type.value = defaultOccupation.value.officialsOther
+      if (defaultOccupation.value.status == 'employee')
+        type.value = defaultOccupation.value.employee
+      if (defaultOccupation.value.status == 'other') type.value = defaultOccupation.value.other
       loader.value = true
       await http
         .post(config.API.candidateOccupation(examId.value), {
-          occupationType: occupationData.value.status,
-          occupationCompany: occupationData.value.company,
-          occupationDepartment: occupationData.value.department,
-          occupationEmail: occupationData.value.email,
-          occupationTelephone: occupationData.value.tel,
+          occupationType: defaultOccupation.value.status,
+          occupationCompany: defaultOccupation.value.company,
+          occupationDepartment: defaultOccupation.value.department,
+          occupationEmail: defaultOccupation.value.email,
+          occupationTelephone: defaultOccupation.value.tel,
           occupationPosition: type.value
         })
         .then(() => {
-          success($q, 'บันทึกข้อมูลอาชีพสำเร็จ')
+          //   success($q, 'บันทึกข้อมูลอาชีพสำเร็จ')
           // edit.value = false
           emit('update:statusEdit', false)
         })
diff --git a/src/modules/01_exam/components/Form/Profile.vue b/src/modules/01_exam/components/Form/Profile.vue
index 829a930..274abf1 100644
--- a/src/modules/01_exam/components/Form/Profile.vue
+++ b/src/modules/01_exam/components/Form/Profile.vue
@@ -8,9 +8,11 @@
       v-model:statusEdit="statusEdit"
       :notiNoEdit="notiNoEdit"
       :status="status"
+      :btnSave="btnSave"
+      v-model:form="formInformation"
     />
   </div>
-  
+
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
     <Address
@@ -18,6 +20,8 @@
       v-model:statusEdit="statusEdit"
       :notiNoEdit="notiNoEdit"
       :status="status"
+      :btnSave="btnSave"
+      v-model:form="formAddress"
     />
   </div>
 
@@ -28,47 +32,58 @@
       v-model:statusEdit="statusEdit"
       :notiNoEdit="notiNoEdit"
       :status="status"
+      :btnSave="btnSave"
+      v-model:form="formFamily"
     />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
-  </div>
-  
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-  <Education
-    :loader="loader"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
+    <Occupation
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+      v-model:form="formOccupation"
+    />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-  <Career
-    :loader="loader"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
+    <Education
+      :loader="loader"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+    />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-  <Document
-    :loader="loader"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
+    <Career
+      :loader="loader"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+    />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Document
+      :loader="loader"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import { useQuasar } from 'quasar'
+import { QForm, useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -94,6 +109,26 @@ const props = defineProps({
   status: {
     type: String,
     required: true
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
+  },
+  formInformation: {
+    type: Object,
+    required: true
+  },
+  formAddress: {
+    type: Object,
+    required: true
+  },
+  formFamily: {
+    type: Object,
+    required: true
+  },
+  formOccupation: {
+    type: Object,
+    required: true
   }
 })
 
@@ -105,13 +140,40 @@ const statusEdit = ref<boolean>(false)
 const prefixOptions = ref<DataOption[]>([])
 const relationshipOptions = ref<DataOption[]>([])
 const provinceOptions = ref<DataOption[]>([])
+const formInformation = ref<any>({})
+const formAddress = ref<any>({})
+const formFamily = ref<any>({})
+const formOccupation = ref<any>({})
 
-const emit = defineEmits(['update:loader', 'update:statusEdit'])
+const emit = defineEmits([
+  'update:loader',
+  'update:statusEdit',
+  'update:formInformation',
+  'update:formAddress',
+  'update:formFamily',
+  'update:formOccupation'
+])
 
 watch(statusEdit, (count: boolean, prevCount: boolean) => {
   emit('update:statusEdit', count)
 })
 
+watch(formInformation, async (count: Object, prevCount: Object) => {
+  emit('update:formInformation', count)
+})
+
+watch(formAddress, async (count: Object, prevCount: Object) => {
+  emit('update:formAddress', count)
+})
+
+watch(formFamily, async (count: Object, prevCount: Object) => {
+  emit('update:formFamily', count)
+})
+
+watch(formOccupation, async (count: Object, prevCount: Object) => {
+  emit('update:formOccupation', count)
+})
+
 onMounted(() => {
   fetchPrefix()
   fetchRelationship()
@@ -143,7 +205,6 @@ const fetchRelationship = async () => {
     .then((res) => {
       const data = res.data.result
       let option: DataOption[] = []
-      //   console.log(data);
       data.map((r: any) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })
       })
@@ -162,7 +223,6 @@ const fetchProvince = async () => {
     .then((res) => {
       const data = res.data.result
       let option: DataOption[] = []
-      //   console.log(data);
       data.map((r: any) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })
       })
diff --git a/src/modules/01_exam/interface/index/Main.ts b/src/modules/01_exam/interface/index/Main.ts
index 7203127..e37c614 100644
--- a/src/modules/01_exam/interface/index/Main.ts
+++ b/src/modules/01_exam/interface/index/Main.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue'
 interface Pagination {
   rowsPerPage: number
 }
@@ -201,7 +202,7 @@ const defaultCard: ExamCard[] = [
   }
 ]
 
-const defaultAddress: Address = {
+const defaultAddress = ref<Address>({
   address: null,
   provinceId: null,
   districtId: null,
@@ -213,9 +214,9 @@ const defaultAddress: Address = {
   subdistrictIdC: null,
   //   codeC: ,
   same: '1'
-}
+})
 
-const defaultInformation: Information = {
+const defaultInformation = ref<Information>({
   cardid: null,
   prefix: null,
   prefixId: null,
@@ -237,9 +238,9 @@ const defaultInformation: Information = {
   districtId: null,
   provinceId: null,
   statusId: null
-}
+})
 
-const defaultFamily: Family = {
+const defaultFamily = ref<Family>({
   prefixC: null,
   prefixIdC: null,
   firstnameC: null,
@@ -259,9 +260,9 @@ const defaultFamily: Family = {
   occupationF: null,
   nationalityF: null,
   same: '0'
-}
+})
 
-const defaultOccupation: Occupation = {
+const defaultOccupation = ref<Occupation>({
   status: null,
   company: null,
   department: null,
@@ -272,9 +273,23 @@ const defaultOccupation: Occupation = {
   officialsOther: null,
   employee: null,
   other: null
+})
+
+const changeData = (system: String, val: any) => {
+  if (system == 'information') defaultInformation.value = val
+  if (system == 'address') defaultAddress.value = val
+  if (system == 'famliy') defaultFamily.value = val
+  if (system == 'occupation') defaultOccupation.value = val
 }
 
-export { defaultInformation, defaultFamily, defaultAddress, defaultOccupation, defaultCard }
+export {
+  defaultInformation,
+  defaultFamily,
+  defaultAddress,
+  defaultOccupation,
+  defaultCard,
+  changeData
+}
 export type {
   Pagination,
   DataOption,