แยกปุ่มอัพโหลด

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

@@ -8,9 +8,11 @@
       v-model:statusEdit="statusEdit"
       :notiNoEdit="notiNoEdit"
       :status="status"
+      :btnSave="btnSave"
+      v-model:form="formInformation"
     />
   </div>
-  
+
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
     <Address
@@ -18,6 +20,8 @@
       v-model:statusEdit="statusEdit"
       :notiNoEdit="notiNoEdit"
       :status="status"
+      :btnSave="btnSave"
+      v-model:form="formAddress"
     />
   </div>
 
@@ -28,47 +32,58 @@
       v-model:statusEdit="statusEdit"
       :notiNoEdit="notiNoEdit"
       :status="status"
+      :btnSave="btnSave"
+      v-model:form="formFamily"
     />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
-  </div>
-  
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-  <Education
-    :loader="loader"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
+    <Occupation
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+      v-model:form="formOccupation"
+    />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-  <Career
-    :loader="loader"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
+    <Education
+      :loader="loader"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+    />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-  <Document
-    :loader="loader"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
+    <Career
+      :loader="loader"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+    />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Document
+      :loader="loader"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+      :btnSave="btnSave"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import { useQuasar } from 'quasar'
+import { QForm, useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -94,6 +109,26 @@ const props = defineProps({
   status: {
     type: String,
     required: true
+  },
+  btnSave: {
+    type: Boolean,
+    required: true
+  },
+  formInformation: {
+    type: Object,
+    required: true
+  },
+  formAddress: {
+    type: Object,
+    required: true
+  },
+  formFamily: {
+    type: Object,
+    required: true
+  },
+  formOccupation: {
+    type: Object,
+    required: true
   }
 })
 
@@ -105,13 +140,40 @@ const statusEdit = ref<boolean>(false)
 const prefixOptions = ref<DataOption[]>([])
 const relationshipOptions = ref<DataOption[]>([])
 const provinceOptions = ref<DataOption[]>([])
+const formInformation = ref<any>({})
+const formAddress = ref<any>({})
+const formFamily = ref<any>({})
+const formOccupation = ref<any>({})
 
-const emit = defineEmits(['update:loader', 'update:statusEdit'])
+const emit = defineEmits([
+  'update:loader',
+  'update:statusEdit',
+  'update:formInformation',
+  'update:formAddress',
+  'update:formFamily',
+  'update:formOccupation'
+])
 
 watch(statusEdit, (count: boolean, prevCount: boolean) => {
   emit('update:statusEdit', count)
 })
 
+watch(formInformation, async (count: Object, prevCount: Object) => {
+  emit('update:formInformation', count)
+})
+
+watch(formAddress, async (count: Object, prevCount: Object) => {
+  emit('update:formAddress', count)
+})
+
+watch(formFamily, async (count: Object, prevCount: Object) => {
+  emit('update:formFamily', count)
+})
+
+watch(formOccupation, async (count: Object, prevCount: Object) => {
+  emit('update:formOccupation', count)
+})
+
 onMounted(() => {
   fetchPrefix()
   fetchRelationship()
@@ -143,7 +205,6 @@ const fetchRelationship = async () => {
     .then((res) => {
       const data = res.data.result
       let option: DataOption[] = []
-      //   console.log(data);
       data.map((r: any) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })
       })
@@ -162,7 +223,6 @@ const fetchProvince = async () => {
     .then((res) => {
       const data = res.data.result
       let option: DataOption[] = []
-      //   console.log(data);
       data.map((r: any) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })
       })