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

src/components/base/BaseUploadPhoto.vue

@@ -0,0 +1,73 @@
+<template lang="pug">
+  .flex.flex-col.items-center.justify-center(
+    :style="{padding: '153px 370px'}"
+  )
+    .avatar-wrapper.flex.relative
+      base-input(
+        circle,
+        type="file",
+        id="image-upload",
+        accept="image/*",
+        @change="(e)=>previewImage(e)",
+      )
+      .avatar.flex.absolute.items-center.gap-x-6
+        img.avatar.object-cover(for="image-upload", :src="image")
+        q-btn(
+          round,
+          color="primary",
+          @click="confirm",
+          icon="app:icon-ok"
+        )
+</template>
+
+<script>
+import BaseInput from "./BaseInput.vue";
+import addImageIcon from "@/assets/icons/photo.svg";
+import { v_model } from "@/shared/mixins/v-model";
+
+export default {
+  name: "BaseModalUploadPhoto",
+  components: { BaseInput, addImageIcon },
+  data() {
+    return {
+      image: addImageIcon,
+    };
+  },
+  mixins: [v_model],
+  props: {
+    confirmUpload: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  methods: {
+    previewImage(event) {
+      let picture = event.target.files;
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        this.image = e.target.result;
+      };
+      reader.readAsDataURL(picture[0]);
+    },
+    confirm() {
+      this.value = this.image;
+      this.confirmUpload();
+    },
+  },
+  created() {
+    if (this.value) {
+      this.image = this.value;
+    }
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.avatar-wrapper
+  width: 400px
+  height: 400px
+  border-radius: 50%
+.avatar
+  height: 100%
+  border-radius: 50%
+</style>

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

src/store/modules/medicalCard.js

@@ -31,7 +31,7 @@ const state = () => ({
 });
 
 const getters = {
-  getBasicData(state) {
+  getBasicData(state, rootState) {
     let registrationAddress =
       state.medicalCard?.person?.address?.find((el) => el.registration_flg) ||
       {};
@@ -49,7 +49,7 @@ const getters = {
         birth_date: person?.birth_date
           ? new Date(person?.birth_date)
           : new Date(),
-        photo: person?.photo,
+        photo: person?.photo ? rootState.getUrl + person?.photo : null,
       },
       registrationAddress: {
         region: registrationAddress?.region,