ต่อapiคนสมัครกรอกข้อมูลสมัครสอบ

src/modules/01_exam/components/Form/Profile/Occupation.vue

@@ -10,7 +10,7 @@
       :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
-      :editData="step == 2"
+      :editData="status == 'register' || status == 'rejectRegister'"
       :disable="statusEdit"
     />
     <q-form ref="myform">
@@ -237,22 +237,16 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-
+import { ref, onMounted } from 'vue'
+import { 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 HeaderTop from '@/components/top.vue'
 import Conference from '@/modules/01_exam/components/Conference.vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
-
-const store = useExamDataStore()
-
-const edit = ref<boolean>(false)
-const occupationData = ref<Occupation>(defaultOccupation)
-const myform = ref<any>()
-const modalConsend = ref<boolean>(false)
 
 const props = defineProps({
   statusEdit: {
@@ -263,42 +257,112 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
 
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const store = useExamDataStore()
+const { success } = mixin
+const edit = ref<boolean>(false)
+const occupationData = ref<Occupation>(defaultOccupation)
+const myform = ref<any>()
+const modalConsend = ref<boolean>(false)
+const loader = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+
 const emit = defineEmits(['update:statusEdit'])
 
-onMounted(() => {})
+onMounted(async () => {
+  await fetchData()
+})
 
-const saveData = async () => {
-  if (store.consend == true) {
-    edit.value = false
-    emit('update:statusEdit', false)
-  } else {
-    modalConsend.value = true
-  }
+const fetchData = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateOccupation(candidateId.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 =
+        data.occupationType == 'official' ? data.occupationPosition : null
+      occupationData.value.personnel =
+        data.occupationType == 'personnel' ? data.occupationPosition : null
+      occupationData.value.officialsOther =
+        data.occupationType == 'officialsOther' ? data.occupationPosition : null
+      occupationData.value.employee =
+        data.occupationType == 'employee' ? data.occupationPosition : null
+      occupationData.value.other = data.occupationType == 'other' ? data.occupationPosition : null
+    })
+    .catch(() => {})
+    .finally(() => {
+      loader.value = false
+    })
 }
 
-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)
-        }
+const saveData = async () => {
+  await myform.value.validate().then(async (suc: boolean) => {
+    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
+        loader.value = true
+        await http
+          .post(config.API.candidateOccupation(candidateId.value), {
+            occupationType: occupationData.value.status,
+            occupationCompany: occupationData.value.company,
+            occupationDepartment: occupationData.value.department,
+            occupationEmail: occupationData.value.email,
+            occupationTelephone: occupationData.value.tel,
+            occupationPosition: type.value
+          })
+          .then(() => {
+            success($q, 'บันทึกข้อมูลอาชีพสำเร็จ')
+            edit.value = false
+            emit('update:statusEdit', false)
+          })
+          .catch(() => {
+            //   modalError.value = true
+            //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+            //   modalErrorDetail.value = e.response.data.message
+            // statusCode.value = e.response.data.status
+          })
+          .finally(async () => {
+            loader.value = false
+            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 consenClose = () => {
   modalConsend.value = false
 }