เช็คค่าก่อนเปลี่ยน tab

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

@@ -8,6 +8,7 @@
       active-color="primary"
       indicator-color="primary"
       align="justify"
+      @update:model-value="changeTab"
     >
       <q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
       <q-tab name="education" label="ประวัติการศีกษา" />
@@ -16,49 +17,127 @@
     </q-tabs>
     <q-tab-panels v-model="tab" animated class="bg-white">
       <!-- ข้อมูลส่วนบุคคล -->
-      <q-tab-panel name="profile"><Profile /></q-tab-panel>
+      <q-tab-panel name="profile">
+        <Profile :loader="loader" v-model:statusEdit="statusEditProfile" :step="step" />
+      </q-tab-panel>
 
       <!-- ประวัติการศีกษา -->
-      <q-tab-panel name="education"><Education :loader="loader" /> </q-tab-panel>
+      <q-tab-panel name="education"><Education :loader="loader" :step="step" /></q-tab-panel>
 
       <!-- ประวัติการทำงาน/ฝึกงาน -->
-      <q-tab-panel name="career"><Career :loader="loader" /></q-tab-panel>
+      <q-tab-panel name="career"><Career :loader="loader" :step="step" /></q-tab-panel>
 
       <!-- ไฟล์ -->
-      <q-tab-panel name="document"><Document :loader="loader" /> </q-tab-panel>
+      <q-tab-panel name="document">
+        <Document :loader="loader" v-model:statusEdit="statusEditDocument" :step="step" />
+      </q-tab-panel>
     </q-tab-panels>
 
-    <!-- <div>
+    <div>
       <q-checkbox
-        v-if="allowEditProp"
         v-model="acceptTermOfUse"
-        :disable="!allowEdit"
-        :label="formLabel.acceptTermOfUse"
+        :disable="step !== 2"
+        label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
       />
     </div>
 
     <div class="row justify-center q-pa-md">
-      <q-btn color="warning" label="บันทึก" @click="saveForm" :disable="applyState === 3" />
       <q-btn
         color="primary"
         class="q-ml-md"
         label="สมัครสอบ"
-        @click="applyCandidate"
-        :disable="!acceptTermOfUse || applyState === 3"
+        @click="okModalComfirm"
+        v-if="step === 2"
+        :disable="!acceptTermOfUse"
       />
-    </div> -->
+    </div>
   </div>
+  <NotifyConfirm
+    :modal="modalComfirm"
+    :modalTittle="modalComfirmTittle"
+    :modalDetail="modalComfirmDetail"
+    :ok="applyCandidate"
+    :cancel="cancelModalComfirm"
+  />
+  <NotifyError
+    :modalError="modalNoEdit"
+    :modalErrorTittle="modalNoEditTittle"
+    :modalErrorDetail="modalNoEditDetail"
+    :close="closeModalError"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import Profile from './Profile.vue'
-import Education from './Education.vue'
-import Career from './Career.vue'
-import Document from './Document.vue'
+import { onMounted, ref, watch } from 'vue'
+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'
+
+const props = defineProps({
+  fetchStep: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
 
 const tab = ref<string>('profile')
+const tabRaw = ref<string>('profile')
 const loader = ref<boolean>(false)
+const statusEditProfile = ref<boolean>(false)
+const statusEditDocument = ref<boolean>(false)
+const acceptTermOfUse = ref<boolean>(false)
+const modalComfirm = ref<boolean>(false)
+const modalComfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
+const modalComfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
+const modalNoEdit = ref<boolean>(false)
+const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
+const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
+
+onMounted(async () => {
+  if (props.step > 2) {
+    acceptTermOfUse.value = true
+  }
+})
+
+const okModalComfirm = () => {
+  if (statusEditProfile.value == true || statusEditDocument.value == true) {
+    modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
+    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
+    modalNoEdit.value = true
+  } else {
+    modalComfirm.value = true
+  }
+}
+
+const cancelModalComfirm = () => {
+  modalComfirm.value = false
+}
+
+const closeModalError = () => {
+  modalNoEdit.value = false
+}
+
+const applyCandidate = () => {
+  props.fetchStep()
+}
+
+const changeTab = () => {
+  if (statusEditProfile.value == true || statusEditDocument.value == true) {
+    modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
+    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
+    tab.value = tabRaw.value
+    modalNoEdit.value = true
+  } else {
+    tabRaw.value = tab.value
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>