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

src/modules/01_exam/views/ExamDetail.vue

@@ -7,42 +7,58 @@
   </q-toolbar>
   <q-card flat class="">
     <div class="justify-center">
+      <!-- done-color="deep-orange"
+        active-color="purple"
+        inactive-color="secondary" -->
       <q-stepper
         v-model="step"
         ref="stepper"
         alternative-labels
         header-nav
-        color="primary"
         animated
+        done-color="positive"
+        active-color="amber-7"
+        inactive-color="positive"
       >
-        <q-step :done="step > 1" :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
-          <ExamDetail />
+        <q-step
+          :done="step > 1"
+          :disable="stepRaw < 1"
+          :name="1"
+          title="อ่านคำชี้แจง"
+          :icon="stepRaw >= 1 ? 'check' : 'edit'"
+        >
+          <ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
-        <q-step :done="step > 2" :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
-          <ExamForm />
+        <q-step
+          :done="step > 2"
+          :disable="stepRaw < 2"
+          :name="2"
+          title="กรอกข้อมูล"
+          :icon="stepRaw >= 2 ? 'check' : 'edit'"
+        >
+          <ExamForm :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
         <q-step
           :done="step > 3"
+          :disable="stepRaw < 3"
           :name="3"
           title="ชำระค่าธรรมเนียมการสอบ"
-          icon="edit"
-          done-color="positive"
+          :icon="stepRaw >= 3 ? 'check' : 'edit'"
         >
-          <ExamPayment />
+          <ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
-        <q-step :done="step > 4" :name="4" title="สำเร็จ" icon="edit" done-color="positive">
-          <ExamFinished />
+        <q-step
+          :done="step > 4"
+          :disable="stepRaw < 4"
+          :name="4"
+          title="สำเร็จ"
+          :icon="stepRaw >= 4 ? 'check' : 'edit'"
+        >
+          <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
       </q-stepper>
     </div>
   </q-card>
-  <notifyConfirm
-    :modal="modalConfirm"
-    :modalTittle="modalConfirmTittle"
-    :modalDetail="modalConfirmDetail"
-    :ok="closeModalConfirm"
-    :cancel="closeModalCancel"
-  />
 </template>
 
 <script setup lang="ts">
@@ -51,7 +67,6 @@ import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
 import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
 import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
 import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
-import NotifyConfirm from '@/components/NotifyConfirm.vue'
 
 const examId = ref<string>('zxc')
 const step = ref<number>(1)
@@ -60,11 +75,6 @@ const examPost = ref<any>()
 const test = ref<any>()
 const loading = ref<boolean>(false)
 const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว')
-const modalConfirm = ref<boolean>(true)
-const modalConfirmTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
-const modalConfirmDetail = ref<string>(
-  'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
-)
 
 onMounted(() => {
   loadCandidate()
@@ -104,10 +114,8 @@ const fetchExams = () => {
   //     .finally(() => (this.loading = false))
 }
 
-const closeModalConfirm = () => {
-  modalConfirm.value = false
-}
-const closeModalCancel = () => {
-  modalConfirm.value = false
+const fetchStep = () => {
+  stepRaw.value += 1
+  step.value += 1
 }
 </script>