WIP Подтянула картинки из стора

src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue

@@ -5,31 +5,43 @@
     :is-edit="isEdit",
     :cancel="cancelEdit",
     :open-edit="openEdit",
+    :save="saveChange"
   )
     .form-wrap.gap-24.w-full
-      .data-section.flex.flex-col.gap-4(v-for="data in configData")
+      .data-section.flex.flex-col.gap-4(v-for="data in configData", :key="data.dataLabel")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
-        .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
+        .flex.w-full.justify-between.items-center.gap-4(
+          v-for="field in data.fields",
+          :key="field.label"
+        )
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
-            img.photo.object-cover(
-              v-if="docData[data.dataKey][field.key]",
-              :src="docData[data.dataKey][field.key]",
+            img.h-10.w-10.object-cover(
+              v-if="docData[data.dataKey][field.key]?.photo",
+              :src="docData[data.dataKey][field.key]?.photo",
               :alt="docData[data.dataKey][field.label]",
             )
             .replace-photo.font-medium.text-base.cursor-pointer(
-              v-if="isEdit"
-            ) {{ docData[data.dataKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+              v-if="isEdit",
+              @click="openModal(data.dataKey)",
+            ) {{ docData[data.dataKey][field.key]?.photo ? "Заменить фото" : "Добавить фото"}}
+            base-modal(v-model="showModal", title="Загрузить изображение" v-if="photoId === data.dataKey")
+              base-upload-photo(
+                v-model="docData[photoId][field.key]",
+                :confirm-upload="confirmChangePhoto",
+              )
           base-input(
             v-else,
             v-model="docData[data.dataKey][field.key]",
             @update:model-value="checkChangeDocData"
             :disabled="!isEdit",
+            :type="field.type",
             :width="278",
             :standout="!isEdit",
             :outlined="isEdit", 
             :rule="field.rules",
             text-color="black",
+            :mask="field?.inputMask"
           )
 </template>
 
@@ -38,10 +50,17 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra
 import { documentForm } from "@/pages/newMedicalCard/utils/medicalConfig";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
-import BaseLoader from "@/components/Loader/BaseLoader.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 export default {
   name: "DocumentsForm",
-  components: { MedicalFormWrapper, BaseInput, BaseAvatar, BaseLoader },
+  components: {
+    MedicalFormWrapper,
+    BaseInput,
+    BaseAvatar,
+    BaseModal,
+    BaseUploadPhoto,
+  },
   data() {
     return {
       configData: documentForm,
@@ -68,6 +87,8 @@ export default {
           photo_tax_identification_number: null,
         },
       },
+      showModal: false,
+      photoId: "",
     };
   },
   computed: {
@@ -78,7 +99,10 @@ export default {
   methods: {
     cancelEdit() {
       this.docData = JSON.parse(JSON.stringify(this.initialDocData));
+      this.docData.passport.issued_by_date =
+        this.initialDocData?.passport?.issued_by_date;
       this.isEdit = false;
+      this.isCheckChange = false;
     },
     openEdit() {
       this.isEdit = true;
@@ -87,15 +111,28 @@ export default {
       this.isCheckChange =
         JSON.stringify(this.docData) !== JSON.stringify(this.initialDocData);
     },
+    openModal(id) {
+      this.photoId = id;
+      this.showModal = true;
+    },
+    confirmChangePhoto() {
+      this.showModal = false;
+      this.isCheckChange = true;
+    },
+    saveChange() {
+      //console.log(this.docData);
+    },
   },
   watch: {
     initialDocData: {
       deep: true,
       immediate: true,
       handler(value) {
-        if (Object.keys(value).length)
+        if (Object.keys(value).length) {
           this.docData = JSON.parse(JSON.stringify(this.initialDocData));
-        else this.docData = this.initializationData;
+          this.docData.passport.issued_by_date =
+            this.initialDocData?.passport?.issued_by_date;
+        } else this.docData = this.initializationData;
       },
     },
   },
@@ -118,6 +155,4 @@ export default {
   color: var(--btn-blue-color)
 .photo-field
   min-width: 302px
-.photo
-  height: 100%
 </style>