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

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

@@ -1,6 +1,10 @@
 <template lang="pug">
   medical-form-wrapper(
-    title="Документы"
+    title="Документы",
+    :is-check-change="isCheckChange",
+    :is-edit="isEdit",
+    :cancel="cancelEdit",
+    :open-edit="openEdit",
   )
     .form-wrap.gap-24.w-full
       .data-section.flex.flex-col.gap-4(v-for="data in configData")
@@ -8,24 +12,24 @@
         .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
-            base-avatar(
+            img.photo.object-cover(
-              v-if="photo",
+              v-if="docData[data.dataKey][field.key]",
-              :size="40",
+              :src="docData[data.dataKey][field.key]",
+              :alt="docData[data.dataKey][field.label]",
             )
-              img.object-cover(
+            .replace-photo.font-medium.text-base.cursor-pointer(
-                :src="url + photo" 
+              v-if="isEdit"
-                alt="photo"
+            ) {{ docData[data.dataKey][field.key] ? "Заменить фото" : "Добавить фото"}}
-              )
-            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit && photo") Заменить фото
-            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit && !photo") Добавить фото
           base-input(
-            v-else
+            v-else,
-            :disabled="!isEdit"
+            v-model="docData[data.dataKey][field.key]",
-            :width="278" 
+            @update:model-value="checkChangeDocData"
-            :standout="!isEdit" 
+            :disabled="!isEdit",
-            :outlined="isEdit" 
+            :width="278",
-            :rule="field.rules"
+            :standout="!isEdit",
-            text-color="black"
+            :outlined="isEdit", 
+            :rule="field.rules",
+            text-color="black",
           )
 </template>
 
@@ -34,19 +38,65 @@ 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";
 export default {
   name: "DocumentsForm",
-  components: { MedicalFormWrapper, BaseInput, BaseAvatar },
+  components: { MedicalFormWrapper, BaseInput, BaseAvatar, BaseLoader },
   data() {
     return {
       configData: documentForm,
       isEdit: false,
+      docData: null,
+      isCheckChange: false,
+      isLoadingData: true,
+      initializationData: {
+        passport: {
+          id: null,
+          series: null,
+          number: null,
+          issued_by_org: null,
+          issued_by_org_code: null,
+          issued_by_date: null,
           photo: null,
+        },
+        insurance_number: {
+          insurance_number: null,
+          photo_insurance_number: null,
+        },
+        tax_identification_number: {
+          tax_identification_number: null,
+          photo_tax_identification_number: null,
+        },
+      },
     };
   },
   computed: {
-    url() {
+    initialDocData() {
-      return this.$store.state.url;
+      return this.$store.state.medical?.documents;
+    },
+  },
+  methods: {
+    cancelEdit() {
+      this.docData = JSON.parse(JSON.stringify(this.initialDocData));
+      this.isEdit = false;
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+    checkChangeDocData() {
+      this.isCheckChange =
+        JSON.stringify(this.docData) !== JSON.stringify(this.initialDocData);
+    },
+  },
+  watch: {
+    initialDocData: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (Object.keys(value).length)
+          this.docData = JSON.parse(JSON.stringify(this.initialDocData));
+        else this.docData = this.initializationData;
+      },
     },
   },
 };
@@ -68,4 +118,6 @@ export default {
   color: var(--btn-blue-color)
 .photo-field
   min-width: 302px
+.photo
+  height: 100%
 </style>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -299,7 +299,7 @@ export const documentForm = [
   },
   {
     dataLabel: "СНИЛС",
-    dataKey: "insuranceNumber",
+    dataKey: "insurance_number",
     fields: [
       {
         key: "insurance_number",
@@ -315,7 +315,7 @@ export const documentForm = [
   },
   {
     dataLabel: "ИНН",
-    dataKey: "taxIdentificationNumber",
+    dataKey: "tax_identification_number",
     fields: [
       {
         key: "tax_identification_number",

src/shared/utils/changesObjects.js

@@ -23,9 +23,11 @@ export function getObjectChangeField(objInit, objUpdate) {
 export function checkChangeData(dataInit, dataChange) {
   let initData = JSON.stringify(dataInit);
   let changeData = JSON.stringify(dataChange);
-  if (initData !== changeData) {
+  return initData !== changeData;
+  //Алексей, какого черта!?
+  /*if (initData !== changeData) {
     return true;
   } else {
     return false;
-  }
+  }*/
 }

src/store/modules/medicalCard.js

@@ -51,24 +51,7 @@ const state = () => ({
       photo: null,
     },
   },
-  documents: {
+  documents: {},
-    passport: {
-      series: null,
-      number: null,
-      issued_by_org: null,
-      issued_by_org_code: null,
-      issued_by_date: null,
-      photo: null,
-    },
-    insurance_number: {
-      insurance_number: null,
-      photo_insurance_number: null,
-    },
-    tax_identification_number: {
-      tax_identification_number: null,
-      photo_tax_identification_number: null,
-    },
-  },
   avatar: "",
 });
 
@@ -188,6 +171,7 @@ const actions = {
         commit("setMedicalCard", res);
         commit("setBasicData");
         commit("setContactsData");
+        commit("setDocumentData", res.person);
       });
   },
   returnInitData({ commit }) {
@@ -218,6 +202,34 @@ const mutations = {
   setContactsData(state) {
     state.contactsData = { ...this.getters.getContactsData };
   },
+  setDocumentData(state, data, rootState) {
+    const passport = data?.identity_document.find(
+      (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
+          : "",
+      },
+    };
+  },
 };
 
 export default {