WIP Добавил модальное окно для редактирования фото

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -7,13 +7,18 @@
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
-              img(
+              img.avatar.object-cover(
                 v-if="basic[data.dataKey][field.key]" 
-                :src="url + basic[data.dataKey][field.key]" 
+                :src="basic[data.dataKey][field.key]" 
                 alt="AV"
                 )
               span(v-else) {{ avatar }}
-            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit") Заменить фото
+            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit" @click="showModal = true") Заменить фото
+            base-modal(v-model="showModal" title="Загрузить изображение")
+              base-upload-photo(
+                v-model="basic[data.dataKey][field.key]"
+                :confirm-upload="confirmCahngeAvatar" 
+              )
           .select(v-else-if="field.type === 'select'")
             base-select(
               v-model="basic[data.dataKey][field.key]"
@@ -41,6 +46,8 @@
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import {
   baseDataForm,
@@ -50,9 +57,17 @@ import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "BasicDataForm",
-  components: { MedicalFormWrapper, BaseInput, BaseAvatar, BaseSelect },
+  components: {
+    MedicalFormWrapper,
+    BaseInput,
+    BaseAvatar,
+    BaseSelect,
+    BaseModal,
+    BaseUploadPhoto,
+  },
   data() {
     return {
+      showModal: false,
       isEdit: false,
       genderOptions: genderOptions,
       configData: baseDataForm,
@@ -68,9 +83,12 @@ export default {
     }),
   },
   methods: {
+    confirmCahngeAvatar() {
+      this.showModal = false;
+    },
     cancelEdit() {
-      this.isEdit = false;
       this.$store.dispatch("returnInitData");
+      this.isEdit = false;
     },
     saveChange() {
       this.isEdit = false;
@@ -87,6 +105,9 @@ export default {
   width: 324px
 .avatar-field
   min-width: 324px
+.avatar
+  height: 100%
+  border-radius: 50%
 .replace-photo
   color: var(--btn-blue-color)
 .input