consend form

src/modules/01_exam/components/ExamForm.vue

@@ -1,7 +1,7 @@
 <!-- step กรอกข้อมูล -->
 <template>
   <div>
-    <q-splitter v-model="splitterModel" style="height: 500px">
+    <q-splitter v-model="splitterModel" style="height: 450px">
       <template v-slot:before>
         <q-tab-panels
           v-model="tab"
@@ -80,19 +80,6 @@
       />
     </div>
   </div>
-  <NotifyConfirm
-    :modal="modalConfirm"
-    :tittle="modalConfirmTittle"
-    :detail="modalConfirmDetail"
-    :ok="applyCandidate"
-    :cancel="cancelModalConfirm"
-  />
-  <NotifyError
-    :modal="modalNoEdit"
-    :Tittle="modalNoEditTittle"
-    :Detail="modalNoEditDetail"
-    :close="closeModalError"
-  />
 </template>
 
 <script setup lang="ts">
@@ -101,8 +88,8 @@ 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 NotifyError from '@/components/NotifyError.vue'
-import NotifyConfirm from '@/components/NotifyConfirm.vue'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
 
 const props = defineProps({
   fetchStep: {
@@ -115,18 +102,14 @@ 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 tabRaw = ref<string>('profile')
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
-const modalConfirm = ref<boolean>(false)
-const modalConfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
-const modalConfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
-const modalNoEdit = ref<boolean>(false)
-const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
-const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
 
 onMounted(async () => {
   if (props.step > 2) {
@@ -136,23 +119,20 @@ onMounted(async () => {
 
 const okModalConfirm = () => {
   if (statusEdit.value == true) {
-    modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
-    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
-    modalNoEdit.value = true
+    modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
   } else {
-    modalConfirm.value = true
+    modalConfirm(
+      $q,
+      'ยืนยันการสมัครสอบ?',
+      'เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้',
+      saveForm
+    )
   }
 }
 
-const cancelModalConfirm = () => {
-  modalConfirm.value = false
-}
-
-const closeModalError = () => {
-  modalNoEdit.value = false
-}
-
-const applyCandidate = () => {
+const saveForm = () => {
+  //saveform
+  success($q, 'บันทึกข้อมูลสำเร็จ')
   props.fetchStep()
 }
 
@@ -186,17 +166,6 @@ const clickNext = (val: string) => {
       return (tab.value = 'profile')
   }
 }
-
-const changeTab = () => {
-  if (statusEdit.value == true) {
-    modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
-    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
-    tab.value = tabRaw.value
-    modalNoEdit.value = true
-  } else {
-    tabRaw.value = tab.value
-  }
-}
 </script>
 
 <style lang="scss" scoped></style>