ต่อ api ประวัติการศึกษา

2023-03-24 20:47:01 +07:00 · 2023-03-24 20:47:01 +07:00 · 0760ae1981
commit 0760ae1981
parent 8d2b93b6a3
9 changed files with 357 additions and 222 deletions
--- a/src/api/exam/api.candidate.ts
+++ b/src/api/exam/api.candidate.ts
@ -4,5 +4,12 @@ const candidate = `${env.API_URI}/candidate/`
 export default {
  candidateInformation: (examId: string) => `${candidate}information/${examId}`,
  candidateAddress: (examId: string) => `${candidate}address/${examId}`,
+  candidateFamily: (examId: string) => `${candidate}family/${examId}`,
+  candidateOccupation: (examId: string) => `${candidate}occupation/${examId}`,
+  candidateEducation: (examId: string) => `${candidate}education/${examId}`,
+  candidateCareer: (examId: string) => `${candidate}career/${examId}`,
+  candidateCheckCreate: (examId: string) => `${candidate}check/${examId}`,
+  candidateRegister: (examId: string) => `${candidate}register/${examId}`,
+  candidatePayment: (examId: string) => `${candidate}payment/${examId}`,
  candidate
 }
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@ -90,6 +90,8 @@ import Career from '@/modules/01_exam/components/Form/Career.vue'
 import Document from '@/modules/01_exam/components/Form/Document.vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import http from '@/plugins/http'
+import config from '@/app.config'

 const props = defineProps({
  fetchStep: {
@ -110,6 +112,7 @@ const splitterModel = ref<number>(90)
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')

 onMounted(async () => {
  if (props.step > 2) {
@ -130,10 +133,19 @@ const okModalConfirm = () => {
  }
 }

-const saveForm = () => {
+const saveForm = async () => {
  //saveform
-  success($q, 'บันทึกข้อมูลสำเร็จ')
-  props.fetchStep()
+  loader.value = true
+  await http
+    .get(config.API.candidateRegister(candidateId.value))
+    .then(() => {
+      success($q, 'สมัครสอบสำเร็จสำเร็จ')
+    })
+    .catch(() => {})
+    .finally(async () => {
+      await props.fetchStep()
+      loader.value = false
+    })
 }

 const clickPreview = (val: string) => {
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@ -18,7 +18,7 @@
      </div>
    </div>
    <div class="q-pa-md text-center col-12">
-      <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
+      <q-btn color="primary" @click="clickPayment" label="ส่งหลักฐานการชำระเงิน" />
    </div>
    <div class="text-black text-center q-pb-lg col-12">
      ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ***
@ -31,6 +31,10 @@

 <script setup lang="ts">
 import { ref } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
+import http from '@/plugins/http'
+import config from '@/app.config'

 const props = defineProps({
  fetchStep: {
@ -43,10 +47,15 @@ const props = defineProps({
  }
 })

+const $q = useQuasar()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { success } = mixin
 const status = ref<string>('')
 const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
 const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
 const fileData = ref<any>()
+const loader = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')

 const uploadImg = (file: any) => {
  fileData.value = null
@ -56,11 +65,26 @@ const uploadImg = (file: any) => {
    'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
 }

-const setStatus = (val: string) => {
+const setStatus = async (val: string) => {
  status.value = val
  if (val == 'next') props.fetchStep()
 }

+const clickPayment = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidatePayment(candidateId.value))
+    .then(() => {
+      success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
+    })
+    .catch(() => {})
+    .finally(async () => {
+      loader.value = false
+      props.fetchStep()
+    })
+  status.value = 'processing'
+}
+
 const getClass = (val: string) => {
  switch (val) {
    case 'processing':
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@ -219,11 +219,11 @@ const props = defineProps({

 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm } = mixin
+const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
-const id = ref<string>()
+const id = ref<string>('')
 const location = ref<string>()
 const position = ref<string>()
 const salary = ref<number | null>()
@ -241,27 +241,11 @@ const editRow = ref<boolean>(false) //เช็คมีการแก้ไข
 const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
 const modalConsend = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')

 const emit = defineEmits(['update:loader', 'update:statusEdit'])

-const rows = ref<RequestItemsObject[]>([
-  {
-    id: '1',
-    location: 'แอดวานซ์ อินโฟร์ เซอร์วิส',
-    position: 'Direct Sales Staff',
-    salary: 30000,
-    duration: [new Date('1995-04-15'), new Date('1999-02-25')],
-    reason: 'ไล่ออก'
-  },
-  {
-    id: '2',
-    location: 'บริษัท ทรู คอร์ปอเรชั่น จำกัด (มหาชน)',
-    position: 'Direct Sales Staff',
-    salary: 40000,
-    duration: [new Date('2020-06-30'), new Date('2023-10-14')],
-    reason: '-'
-  }
-])
+const rows = ref<RequestItemsObject[]>([])

 const filter = ref<string>('') //search data table

@ -332,11 +316,28 @@ watch(edit, (count: boolean, prevCount: boolean) => {
 })

 onMounted(async () => {
-  //   await fetchData()
+  await fetchData()
 })

 const fetchData = async () => {
-  editRow.value = false
+  loader.value = true
+  await http
+    .get(config.API.candidateCareer(candidateId.value))
+    .then((res) => {
+      const data = res.data.result
+      rows.value = []
+      data.map((r: any) => {
+        rows.value.push({
+          ...r,
+          location: r.name,
+          duration: [r.durationStart, r.durationEnd]
+        })
+      })
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loader.value = false
+    })
 }

 /**
@ -410,9 +411,28 @@ const checkDelete = (row: RequestItemsObject) => {
 /**
 * ลบข้อมูลใน table
 */
-function clickDeleteRow() {
-  rows.value = rows.value.filter((val: any) => val.id != rawItem.value?.id)
-  edit.value = false
+const clickDeleteRow = async () => {
+  if (rawItem.value != null) {
+    loader.value = true
+    await http
+      .delete(config.API.candidateCareer(rawItem.value.id))
+      .then(() => {
+        success($q, 'ลบข้อมูลสำเร็จ')
+      })
+      .catch((e) => {
+        //   modalError.value = true
+        //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+        //   modalErrorDetail.value = e.response.data.message
+        statusCode.value = e.response.data.status
+      })
+      .finally(async () => {
+        await fetchData()
+        edit.value = false
+      })
+  } else {
+    await fetchData()
+    edit.value = false
+  }
 }

 /**
@ -440,24 +460,29 @@ const clickSave = async () => {
 const saveData = async () => {
  edit.value = false
  modal.value = false
-  //   loader.value = true;
-  //   await http
-  //     .post(config.API.xxxxxxxxxxxxxxx, {
-  //       xxx: "xxx",
-  //     })
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       modalError.value = true;
-  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
-  //       modalErrorDetail.value = e.response.data.message;
-  //       statusCode.value = e.response.data.status;
-  //     })
-  //     .finally(async () => {
-  //       modal.value = false;
-  //       await fetchData();
-  //     });
+  loader.value = true
+  await http
+    .post(config.API.candidateCareer(candidateId.value), {
+      name: location.value,
+      position: position.value,
+      salary: salary.value,
+      durationStart: dateToISO(new Date(duration.value[0])),
+      durationEnd: dateToISO(new Date(duration.value[1])),
+      reason: reason.value
+    })
+    .then((res) => {
+      success($q, 'บันทึกข้อมูลสำเร็จ')
+    })
+    .catch((e) => {
+      //   modalError.value = true
+      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+      //   modalErrorDetail.value = e.response.data.message
+      statusCode.value = e.response.data.status
+    })
+    .finally(async () => {
+      modal.value = false
+      await fetchData()
+    })
 }

 /**
@ -466,24 +491,29 @@ const saveData = async () => {
 const editData = async () => {
  edit.value = false
  modal.value = false
-  //   loader.value = true;
-  //   await http
-  //     .post(config.API.xxxxxxxxxxxxxxx(id.value), {
-  //       xxx: "xxx",
-  //     })
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       modalError.value = true;
-  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
-  //       modalErrorDetail.value = e.response.data.message;
-  //       statusCode.value = e.response.data.status;
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       await fetchData();
-  //     });
+  loader.value = true
+  await http
+    .put(config.API.candidateCareer(id.value), {
+      name: location.value,
+      position: position.value,
+      salary: salary.value,
+      durationStart: dateToISO(new Date(duration.value[0])),
+      durationEnd: dateToISO(new Date(duration.value[1])),
+      reason: reason.value
+    })
+    .then((res) => {
+      success($q, 'บันทึกข้อมูลสำเร็จ')
+    })
+    .catch((e) => {
+      //   modalError.value = true
+      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+      //   modalErrorDetail.value = e.response.data.message
+      statusCode.value = e.response.data.status
+    })
+    .finally(async () => {
+      edit.value = false
+      await fetchData()
+    })
 }

 const checkClose = async () => {
@ -500,6 +530,7 @@ const checkClose = async () => {
 */
 const clickClose = async () => {
  modal.value = false
+  editRow.value = false
  next.value = false
  previous.value = false
 }
@ -511,7 +542,7 @@ const clickClose = async () => {
 const selectData = (props: DataProps) => {
  modalEdit.value = true
  modal.value = true
-  //   edit.value = false
+  editRow.value = false
  rawItem.value = props.row
  rowIndex.value = props.rowIndex
  location.value = props.row.location
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@ -67,7 +67,7 @@
                lazy-rules
                :readonly="!edit"
                :borderless="!edit"
-                v-model="educationLevel"
+                v-model="educationLevelId"
                :rules="[(val) => !!val || `${'กรุณาเลือกวุฒิที่ได้รับ'}`]"
                :label="`${'วุฒิที่ได้รับ'}`"
                @update:modelValue="clickEditRow"
@ -221,14 +221,13 @@ const props = defineProps({

 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm } = mixin
+const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
-const id = ref<string>()
+const id = ref<string>('')
 const educationLevel = ref<string>()
-const qualification = ref<string>()
-const qualificationId = ref<string>()
+const educationLevelId = ref<string>()
 const educationLevelOptions = ref<DataOption[]>([])
 const major = ref<string>()
 const scores = ref<number | null>()
@ -246,45 +245,26 @@ 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 candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')

 const emit = defineEmits(['update:loader', 'update:statusEdit'])

-const rows = ref<RequestItemsObject[]>([
-  {
-    id: '1',
-    qualificationId: 'ปริญญาตรี',
-    qualification: 'ปริญญาตรี',
-    major: 'คอมพิวเตอร์',
-    scores: 3.99,
-    name: 'มหาลัยเอ',
-    duration: [new Date('1995-04-15'), new Date('1999-02-25')]
-  },
-  {
-    id: '2',
-    qualificationId: 'ปริญญาเอก',
-    qualification: 'ปริญญาเอก',
-    major: 'คอมพิวเตอร์',
-    scores: 3.54,
-    name: 'มหาลัยบี',
-    duration: [new Date('2020-06-30'), new Date('2023-10-14')]
-  }
-])
-
 const filter = ref<string>('') //search data table

 const visibleColumns = ref<String[]>([])

 examData.education.columns.length == 0
-  ? (visibleColumns.value = ['qualification', 'major', 'scores', 'name', 'duration'])
+  ? (visibleColumns.value = ['educationLevel', 'major', 'scores', 'name', 'duration'])
  : (visibleColumns.value = examData.education.columns)

 const columns = ref<Columns>([
  {
-    name: 'qualification',
+    name: 'educationLevel',
    align: 'left',
    label: 'วุฒิที่ได้รับ',
    sortable: true,
-    field: 'qualification',
+    field: 'educationLevel',
    headerStyle: 'font-size: 14px',
    style: 'font-size: 14px'
  },
@ -340,11 +320,28 @@ watch(edit, (count: boolean, prevCount: boolean) => {

 onMounted(async () => {
  await fetchData()
-  //   await fetchQualification()
  await fetcheducationLevel()
 })
-const fetchData = () => {
-  educationLevel.value = 'e4e6a4f8-39c6-467f-bd84-7650d105fc4c'
+const fetchData = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateEducation(candidateId.value))
+    .then((res) => {
+      const data = res.data.result
+      rows.value = []
+      data.map((r: any) => {
+        rows.value.push({
+          ...r,
+          educationLevelId: r.educationLevel.id,
+          educationLevel: r.educationLevel.name,
+          duration: [r.durationStart, r.durationEnd]
+        })
+      })
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loader.value = false
+    })
 }

 const fetcheducationLevel = async () => {
@ -365,28 +362,6 @@ const fetcheducationLevel = async () => {
    })
 }

-const fetchQualification = async () => {
-  //   loader.value = true;
-  //   await http
-  //     .get(config.API.educationQualification)
-  //     .then((res) => {
-  //       const data = res.data.result
-  //       let option: DataOption[] = []
-  //       data.map((r: any) => {
-  //         option.push({ id: r.id.toString(), name: r.name.toString() })
-  //       })
-  //       qualificationOptions.value = option
-  //     })
-  //     .catch((e: any) => {})
-  //     .finally(() => {
-  //       //   loader.value = false;
-  //     })
-}
-
-// const fetchData = async () => {
-//   editRow.value = false
-// }
-
 /**
 * กดดูข้อมูลก่อนหน้า
 */
@ -394,8 +369,8 @@ const clickPrevious = () => {
  //   edit.value = false
  rowIndex.value -= 1
  const row = rows.value[rowIndex.value]
-  qualification.value = row.qualification
-  qualificationId.value = row.qualificationId
+  educationLevel.value = row.educationLevel
+  educationLevelId.value = row.educationLevelId
  major.value = row.major
  scores.value = row.scores
  name.value = row.name
@ -411,8 +386,8 @@ const clickNext = () => {
  //   edit.value = false
  rowIndex.value += 1
  const row = rows.value[rowIndex.value]
-  qualification.value = row.qualification
-  qualificationId.value = row.qualificationId
+  educationLevel.value = row.educationLevel
+  educationLevelId.value = row.educationLevelId
  major.value = row.major
  scores.value = row.scores
  name.value = row.name
@ -460,9 +435,28 @@ const checkDelete = (row: RequestItemsObject) => {
 /**
 * ลบข้อมูลใน table
 */
-function clickDeleteRow() {
-  rows.value = rows.value.filter((val: any) => val.id != rawItem.value?.id)
-  edit.value = false
+const clickDeleteRow = async () => {
+  if (rawItem.value != null) {
+    loader.value = true
+    await http
+      .delete(config.API.candidateEducation(rawItem.value.id))
+      .then(() => {
+        success($q, 'ลบข้อมูลสำเร็จ')
+      })
+      .catch((e) => {
+        //   modalError.value = true
+        //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+        //   modalErrorDetail.value = e.response.data.message
+        statusCode.value = e.response.data.status
+      })
+      .finally(async () => {
+        await fetchData()
+        edit.value = false
+      })
+  } else {
+    await fetchData()
+    edit.value = false
+  }
 }

 /**
@ -488,52 +482,60 @@ const clickSave = async () => {
 * บันทึกเพิ่มข้อมูล
 */
 const saveData = async () => {
-  edit.value = false
-  modal.value = false
-  //   loader.value = true;
-  //   await http
-  //     .post(config.API.xxxxxxxxxxxxxxx, {
-  //       xxx: "xxx",
-  //     })
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       modalError.value = true;
-  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
-  //       modalErrorDetail.value = e.response.data.message;
-  //       statusCode.value = e.response.data.status;
-  //     })
-  //     .finally(async () => {
-  //       modal.value = false;
-  //       await fetchData();
-  //     });
+  loader.value = true
+  await http
+    .post(config.API.candidateEducation(candidateId.value), {
+      educationLevelId: educationLevelId.value,
+      major: major.value,
+      scores: scores.value,
+      name: name.value,
+      durationStart: dateToISO(new Date(duration.value[0])),
+      durationEnd: dateToISO(new Date(duration.value[1]))
+    })
+    .then((res) => {
+      success($q, 'บันทึกข้อมูลร่างสำเร็จ')
+    })
+    .catch((e) => {
+      //   modalError.value = true
+      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+      //   modalErrorDetail.value = e.response.data.message
+      statusCode.value = e.response.data.status
+    })
+    .finally(async () => {
+      modal.value = false
+      await fetchData()
+    })
 }

 /**
 * บันทึกแก้ไขข้อมูล
 */
 const editData = async () => {
-  edit.value = false
-  modal.value = false
-  //   loader.value = true;
-  //   await http
-  //     .post(config.API.xxxxxxxxxxxxxxx(id.value), {
-  //       xxx: "xxx",
-  //     })
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       modalError.value = true;
-  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
-  //       modalErrorDetail.value = e.response.data.message;
-  //       statusCode.value = e.response.data.status;
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       await fetchData();
-  //     });
+  loader.value = true
+  await http
+    .put(config.API.candidateEducation(id.value), {
+      educationLevelId: educationLevelId.value,
+      major: major.value,
+      scores: scores.value,
+      name: name.value,
+      durationStart: dateToISO(new Date(duration.value[0])),
+      durationEnd: dateToISO(new Date(duration.value[1]))
+    })
+    .then((res) => {
+      success($q, 'บันทึกข้อมูลร่างสำเร็จ')
+    })
+    .catch((e) => {
+      //   modalError.value = true
+      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+      //   modalErrorDetail.value = e.response.data.message
+      statusCode.value = e.response.data.status
+    })
+    .finally(async () => {
+      edit.value = false
+      edit.value = false
+      modal.value = false
+      await fetchData()
+    })
 }

 const checkClose = async () => {
@ -550,6 +552,7 @@ const checkClose = async () => {
 */
 const clickClose = async () => {
  modal.value = false
+  editRow.value = false
  next.value = false
  previous.value = false
 }
@ -561,11 +564,11 @@ const clickClose = async () => {
 const selectData = (props: DataProps) => {
  modalEdit.value = true
  modal.value = true
-  //   edit.value = false
+  editRow.value = false
  rawItem.value = props.row
  rowIndex.value = props.rowIndex
-  qualification.value = props.row.qualification
-  qualificationId.value = props.row.qualificationId
+  educationLevel.value = props.row.educationLevel
+  educationLevelId.value = props.row.educationLevelId
  major.value = props.row.major
  scores.value = props.row.scores
  name.value = props.row.name
@ -586,8 +589,8 @@ const addRow = () => {
  modalEdit.value = false
  modal.value = true
  //   edit.value = true
-  qualification.value = ''
-  qualificationId.value = ''
+  educationLevel.value = ''
+  educationLevelId.value = ''
  major.value = ''
  scores.value = null
  name.value = ''
--- a/src/modules/01_exam/components/Form/Profile/Family.vue
+++ b/src/modules/01_exam/components/Form/Profile/Family.vue
@ -48,7 +48,7 @@
            :outlined="edit"
            dense
            lazy-rules
-            v-model="prefixRelation"
+            v-model="familyData.prefixIdC"
            emit-value
            map-options
            option-label="name"
@ -126,7 +126,7 @@
            :outlined="edit"
            dense
            lazy-rules
-            v-model="prefixDad"
+            v-model="familyData.prefixIdM"
            emit-value
            map-options
            option-label="name"
@ -204,7 +204,7 @@
            :outlined="edit"
            dense
            lazy-rules
-            v-model="prefixMom"
+            v-model="familyData.prefixIdF"
            emit-value
            map-options
            option-label="name"
@ -281,6 +281,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import type { PropType } from 'vue'
+import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
 import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
@ -290,12 +291,10 @@ import { useExamDataStore } from '@/modules/01_exam/store'
 import http from '@/plugins/http'
 import config from '@/app.config'

+const $q = useQuasar()
 const mixin = useCounterMixin()
 const store = useExamDataStore()
-const { date2Thai, calAge } = mixin
-const prefixRelation = ref<string>()
-const prefixMom = ref<string>()
-const prefixDad = ref<string>()
+const { date2Thai, calAge, success } = mixin
 const prefixDadOptions = ref<DataOption[]>([])
 const prefixMomOptions = ref<DataOption[]>([])
 const prefixRelationOptions = ref<DataOption[]>([])
@ -304,6 +303,8 @@ const myform = ref<any>()
 const familyData = ref<Family>(defaultFamily)
 const statusOptions = ref<DataOption[]>([])
 const modalConsend = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+const loader = ref<boolean>(false)

 // const prefixOptions = ref<any>([
 //   { id: "1", name: "นาย" },
@ -338,10 +339,33 @@ onMounted(async () => {
  await fetchprefixDad()
  await fetchprefixRelation()
 })
-const fetchData = () => {
-  prefixRelation.value = 'e4e6a4f8-39c6-467f-bd84-7650d105fc4c'
-  prefixDad.value = '02fbc0e3-1da0-45b5-90da-783d344b5896'
-  prefixMom.value = '362405f7-9ca2-4f3a-b5ac-08b56c24555d'
+const fetchData = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateFamily(candidateId.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
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loader.value = false
+    })
 }

 const fetchprefixMom = async () => {
@ -399,31 +423,63 @@ const fetchprefixRelation = async () => {
 }

 const saveData = async () => {
-  if (store.consend == true) {
-    edit.value = false
-    emit('update:statusEdit', false)
-  } else {
-    modalConsend.value = true
-  }
-}
-
-const changeBtn = async () => {
  await myform.value.validate().then(async (success: boolean) => {
    if (success) {
-      if (edit.value == true) {
-        if (props.statusEdit === true) {
-          edit.value = false
-          props.notiNoEdit()
-        } else {
-          emit('update:statusEdit', true)
-        }
+      if (store.consend == true) {
+        loader.value = true
+        await http
+          .post(config.API.candidateFamily(candidateId.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
+          })
+          .then((res) => {
+            success($q, 'บันทึกข้อมูลครอบครัวสำเร็จ')
+            edit.value = false
+            emit('update:statusEdit', false)
+          })
+          .catch((e) => {
+            //   modalError.value = true
+            //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+            //   modalErrorDetail.value = e.response.data.message
+            // statusCode.value = e.response.data.status
+          })
+          .finally(async () => {
+            await fetchData()
+          })
      } else {
-        emit('update:statusEdit', false)
+        modalConsend.value = true
      }
    }
  })
 }

+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const selectRadio = (e: boolean, i: any) => {
  if (!e) {
    familyData.value.prefixIdC = ''
@ -437,7 +493,7 @@ const consenClose = () => {
  modalConsend.value = false
 }

-const consendOk = () => {
+const consendOk = async () => {
  modalConsend.value = false
  store.consend = true
  saveData()
--- a/src/modules/01_exam/interface/index/Main.ts
+++ b/src/modules/01_exam/interface/index/Main.ts
@ -56,7 +56,7 @@ interface Family {
  lastnameF: string
  occupationF: string
  nationalityF: string
-  same: string
+  same: string | null
 }

 interface Occupation {
--- a/src/modules/01_exam/interface/request/Education.ts
+++ b/src/modules/01_exam/interface/request/Education.ts
@ -6,8 +6,8 @@ interface DataProps {
 //ข้อมูล
 interface RequestItemsObject {
  id: string
-  qualificationId: string
-  qualification: string
+  educationLevelId: string
+  educationLevel: string
  major: string
  scores: number | null
  name: string
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@ -73,35 +73,37 @@ import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
 import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
 import keycloak from '@/plugins/keycloak'
 import { useQuasar } from 'quasar'
+import { useExamDataStore } from '@/modules/01_exam/store'
+import http from '@/plugins/http'
+import config from '@/app.config'

 const $q = useQuasar()
+const store = useExamDataStore()
 const examId = ref<string>('zxc')
 const step = ref<number>(2)
 const stepRaw = ref<number>(2)
 const examPost = ref<any>()
-const test = ref<any>()
-const loading = ref<boolean>(false)
 const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว ทดสอบ')
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+const loader = ref<boolean>(false)

 onMounted(() => {
-  loadCandidate()
+  candidateCheck()
  fetchExams()
 })

-const loadCandidate = () => {
-  //   this.loader = true
-  //   this.$http
-  //     .get(this.$config.API.getCandidateCurrentStep(this.examId, this.$keycloak.tokenParsed.sub))
-  //     .then((res) => {
-  //       this.step = res.data.items
-  //       this.stepRaw = res.data.items
-  //     })
-  //     .catch((e) => {
-  //       this.step = 1
-  //     })
-  //     .finally(() => {
-  //       this.loader = false
-  //     })
+const candidateCheck = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateCheckCreate(candidateId.value))
+    .then((res) => {
+      const data = res.data.result
+      store.consend = data
+    })
+    .catch(() => {})
+    .finally(() => {
+      loader.value = false
+    })
 }

 const fetchExams = () => {