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

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

@@ -0,0 +1,86 @@
+<!-- tab ข้อมูลส่วนบุคคล -->
+<template>
+  <Information
+    :prefixOptions="prefixOptions"
+    :genderOptions="genderOptions"
+    :bloodOptions="bloodOptions"
+    :statusOptions="statusOptions"
+    :religionOptions="religionOptions"
+    :provinceOptions="provinceOptions"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :step="step"
+  />
+  <Address v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
+  <Family
+    :prefixOptions="prefixOptions"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :step="step"
+  />
+  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
+  <NotifyError
+    :modalError="modalNoEdit"
+    :modalErrorTittle="modalNoEditTittle"
+    :modalErrorDetail="modalNoEditDetail"
+    :close="closeModalError"
+  />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import type { DataOption } from '@/modules/01_exam/interface/index/Main'
+import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
+import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
+import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
+import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
+import NotifyError from '@/components/NotifyError.vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+const props = defineProps({
+  loader: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
+  },
+  step: {
+    type: Number,
+    required: true
+  }
+})
+
+const loader = ref<boolean>(true)
+const statusEdit = ref<boolean>(false)
+const modalNoEdit = ref<boolean>(false)
+// const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
+// const modalNoEditDetail = ref<string>(
+//   'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
+// )
+const modalNoEditTittle = ref<string>('ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?')
+const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
+
+const prefixOptions = ref<DataOption[]>([])
+const bloodOptions = ref<DataOption[]>([])
+const genderOptions = ref<DataOption[]>([])
+const statusOptions = ref<DataOption[]>([])
+const religionOptions = ref<DataOption[]>([])
+const provinceOptions = ref<DataOption[]>([])
+
+const emit = defineEmits(['update:loader', 'update:statusEdit'])
+
+watch(statusEdit, (count: boolean, prevCount: boolean) => {
+  emit('update:statusEdit', count)
+})
+
+const closeModalError = () => {
+  modalNoEdit.value = false
+}
+
+const notiNoEdit = () => {
+  modalNoEdit.value = true
+}
+</script>