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

src/components/base/BaseInput.vue

@@ -88,9 +88,12 @@ export default {
   computed: {
     value: {
       get() {
-        return this.type === "date"
+        if (this.type === "date") {
-          ? this.modelValue?.toISOString().split("T")[0]
+          return this.modelValue
-          : this.modelValue;
+            ? this.modelValue?.toISOString().split("T")[0]
+            : null;
+        }
+        return this.modelValue;
       },
       set(value) {
         this.type === "date"

src/components/base/BaseUploadPhoto.vue

@@ -57,7 +57,7 @@ export default {
     },
   },
   created() {
-    if (this.value.photo) {
+    if (this.value?.photo) {
       this.image = this.value.photo;
     }
   },

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(
+            img.h-10.w-10.object-cover(
-              v-if="docData[data.dataKey][field.key]",
+              v-if="docData[data.dataKey][field.key]?.photo",
-              :src="docData[data.dataKey][field.key]",
+              :src="docData[data.dataKey][field.key]?.photo",
               :alt="docData[data.dataKey][field.label]",
             )
             .replace-photo.font-medium.text-base.cursor-pointer(
-              v-if="isEdit"
+              v-if="isEdit",
-            ) {{ docData[data.dataKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+              @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>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -314,11 +314,13 @@ export const documentForm = [
         key: "series",
         label: "Серия",
         type: "text",
+        inputMask: "####",
       },
       {
         key: "number",
         label: "Номер",
         type: "text",
+        inputMask: "######",
       },
       {
         key: "issued_by_org",
@@ -329,6 +331,7 @@ export const documentForm = [
         key: "issued_by_org_code",
         label: "Код подраздел.",
         type: "text",
+        inputMask: "###-###",
       },
       {
         key: "issued_by_date",
@@ -350,6 +353,7 @@ export const documentForm = [
         key: "insurance_number",
         label: "Номер СНИЛС",
         type: "text",
+        inputMask: "###-###-### ##",
       },
       {
         key: "photo_insurance_number",
@@ -365,7 +369,8 @@ export const documentForm = [
       {
         key: "tax_identification_number",
         label: "Номер ИНН",
-        type: "text",
+        type: "number",
+        inputMask: "############",
       },
       {
         key: "photo_tax_identification_number",

src/store/modules/medicalCard.js

@@ -131,6 +131,48 @@ const getters = {
       },
     };
   },
+  getDocumentsData(state, rootState) {
+    let person = state.medicalCard?.person;
+    const passport = person?.identity_document.find(
+      (el) => el.kind === "PASSPORT"
+    );
+    return {
+      passport: {
+        id: passport?.id,
+        series: passport?.series,
+        number: passport?.number,
+        issued_by_org: passport?.issued_by_org,
+        issued_by_org_code: passport?.issued_by_org_code,
+        issued_by_date: passport?.issued_by_date
+          ? new Date(passport?.issued_by_date)
+          : null,
+        photo: passport?.photo
+          ? {
+              photo: rootState.getUrl + passport.photo,
+              file: null,
+            }
+          : {},
+      },
+      insurance_number: {
+        insurance_number: person?.insurance_number,
+        photo_insurance_number: person?.photo_insurance_number
+          ? {
+              photo: rootState.getUrl + person.photo_insurance_number,
+              file: null,
+            }
+          : {},
+      },
+      tax_identification_number: {
+        tax_identification_number: person?.tax_identification_number,
+        photo_tax_identification_number: person?.photo_tax_identification_number
+          ? {
+              photo: rootState.getUrl + person?.photo_tax_identification_number,
+              file: null,
+            }
+          : {},
+      },
+    };
+  },
   getContactsData(state) {
     let phones = state.medicalCard.person.contacts
       .filter((el) => el.kind === "PHONE")
@@ -171,7 +213,7 @@ const actions = {
         commit("setMedicalCard", res);
         commit("setBasicData");
         commit("setContactsData");
-        commit("setDocumentData", res.person);
+        commit("setDocumentsData");
       });
   },
   returnInitData({ commit }) {
@@ -241,33 +283,8 @@ const mutations = {
   setContactsData(state) {
     state.contactsData = { ...this.getters.getContactsData };
   },
-  setDocumentData(state, data, rootState) {
+  setDocumentsData(state) {
-    const passport = data?.identity_document.find(
+    state.documents = { ...this.getters.getDocumentsData };
-      (el) => el.kind === "PASSPORT"
-    );
-    state.documents = {
-      passport: {
-        id: passport?.id,
-        series: passport?.series,
-        number: passport?.number,
-        issued_by_org: passport?.issued_by_org,
-        issued_by_org_code: passport?.issued_by_org_code,
-        issued_by_date: passport?.issued_by_date,
-        photo: passport?.photo ? rootState.getUrl + passport.photo : "",
-      },
-      insurance_number: {
-        insurance_number: data?.insurance_number,
-        photo_insurance_number: data?.photo_insurance_number
-          ? rootState.getUrl + data.photo_insurance_number
-          : "",
-      },
-      tax_identification_number: {
-        tax_identification_number: data?.tax_identification_number,
-        photo_tax_identification_number: data?.photo_tax_identification_number
-          ? rootState.getUrl + data?.photo_tax_identification_number
-          : "",
-      },
-    };
   },
 };