WIP Сделал шаблон Контактов

src/components/base/BaseUploadPhoto.vue

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

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

@@ -9,7 +9,7 @@
     :open-edit="openEdit"
     )
     .form-wrap.gap-24.w-full
-      .data-section.flex.flex-col.gap-4(v-for="data in configData")
+      .flex.flex-col.gap-4(v-for="data in configData")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
         .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} :`}}
@@ -208,8 +208,6 @@ export default {
   border-radius: 50%
 .replace-photo
   color: var(--btn-blue-color)
-.input
-  color: purple
 .form-wrap
   display: grid
   grid-template-columns: repeat(3, 1fr)

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

@@ -0,0 +1,124 @@
+<template lang="pug">
+  medical-form-wrapper(
+    title="Контакты"
+    :is-check-change="isCheckChange" 
+    :is-loading-data="isLoadingData" 
+    :is-edit="isEdit"
+    :save="saveChange" 
+    :cancel="cancelEdit" 
+    :open-edit="openEdit"
+    )
+    .form-wrap.gap-24.w-full
+      .flex.flex-col.gap-4(v-for="(data, key) in contacts")
+        .font-semibold.text-sm.whitespace-nowrap {{configData[key].title}}
+        .flex.w-full.justify-between.items-center.gap-4(v-for="(value, index) in data")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{`${configData[key].fieldName} ${index+1} :`}}
+          .input-wrapper.items-center.flex.gap-10px
+            base-input.w-full( 
+              :disabled="!isEdit" 
+              v-model="value.username"
+              :mask="configData[key].inputMask"
+              @update:model-value="checkChangeInput"
+              type="text"  
+              :standout="!isEdit" 
+              :outlined="isEdit" 
+              text-color="black"
+              )
+            .delete-contact.icon-cancel.text-xxs.cursor-pointer(
+              v-if="isEdit" 
+              @click="() => deleteContact(key, value?.id)"
+              )
+        .add-contact.flex.gap-10px.items-center.cursor-pointer(
+          v-if="isEdit" 
+          @click="() => addNewContact(key)"
+          )
+          .icon-plus
+          span.font-medium.text-base Добавить
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig";
+import { mapState, mapGetters } from "vuex";
+
+export default {
+  name: "ContactsForm",
+  components: { MedicalFormWrapper, BaseInput },
+  data() {
+    return {
+      isEdit: false,
+      isLoadingData: false,
+      isCheckChange: false,
+      configData: contactsDataForm,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      initContactsData: "getContactsData",
+    }),
+    ...mapState({
+      contacts: (state) => state.medical.contactsData,
+    }),
+  },
+  methods: {
+    openEdit() {
+      this.isEdit = true;
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+    saveChange() {
+      this.isEdit = false;
+    },
+    checkChangeInput() {
+      // this.isCheckChange = checkChangeData(
+      //   this.initContactsData,
+      //   this.contacts
+      // );
+      let initData = JSON.stringify(this.initContactsData);
+      let changeData = JSON.stringify(this.contacts);
+      if (initData !== changeData) {
+        this.isCheckChange = true;
+      } else {
+        this.isCheckChange = false;
+      }
+    },
+    addNewContact(key) {
+      this.contacts[key].push({
+        kind: this.configData[key].kind,
+      });
+    },
+    deleteContact(key, id) {
+      if (id) {
+        let deleteIndex = this.contacts[key].findIndex((el) => el.id === id);
+
+        this.contacts[key].splice(deleteIndex, 1);
+      } else {
+        this.contacts[key].pop();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input-wrapper
+  width: 324px
+.form-wrap
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(3, 1fr)
+.label-field
+  color: var(--font-grey-color)
+.delete-contact
+  color: var(--font-grey-color)
+.add-contact
+  color: var(--btn-blue-color)
+</style>

src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2.wrapper.h-full
     basic-data-form
+    contacts-form
     documents-form
     insurance-form
 </template>
@@ -9,10 +10,11 @@
 import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue";
 import DocumentsForm from "@/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue";
 import InsuranceForm from "@/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue";
+import ContactsForm from "@/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue";
 
 export default {
   name: "MedicalBasicDataWrapper",
-  components: { BasicDataForm, DocumentsForm, InsuranceForm },
+  components: { BasicDataForm, DocumentsForm, InsuranceForm, ContactsForm },
 };
 </script>
 <style lang="sass" scoped>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -103,6 +103,24 @@ export const baseDataForm = [
   },
 ];
 
+export const contactsDataForm = {
+  phones: {
+    title: "Телефон",
+    fieldName: "Телефон",
+    kind: "PHONE",
+    inputMask: "+7 (###) ###-##-##",
+  },
+  emails: {
+    title: "Почта",
+    fieldName: "Email",
+    kind: "EMAIL",
+  },
+  networks: {
+    title: "Социальные сети",
+    fieldName: "Соцсеть",
+  },
+};
+
 export const genderOptions = [
   {
     id: "MALE",

src/shared/utils/changesObjects.js

@@ -19,3 +19,13 @@ export function getObjectChangeField(objInit, objUpdate) {
   });
   return resultObj;
 }
+
+export function checkChangeData(dataInit, dataChange) {
+  let initData = JSON.stringify(dataInit);
+  let changeData = JSON.stringify(dataChange);
+  if (initData !== changeData) {
+    return true;
+  } else {
+    return false;
+  }
+}

src/store/modules/medicalCard.js

@@ -3,6 +3,11 @@ import { genderOptions } from "@/pages/newMedicalCard/utils/medicalConfig";
 
 const state = () => ({
   medicalCard: {},
+  contactsData: {
+    phones: [],
+    emails: [],
+    networks: [],
+  },
   basicData: {
     personalData: {
       last_name: null,
@@ -133,6 +138,22 @@ const getters = {
       },
     };
   },
+  getContactsData(state) {
+    let phones = state.medicalCard.person.contacts.filter(
+      (el) => el.kind === "PHONE"
+    );
+    let emails = state.medicalCard.person.contacts.filter(
+      (el) => el.kind === "EMAIL"
+    );
+    let networks = state.medicalCard.person.contacts.filter(
+      (el) => el.kind !== "PHONE" && el.kind !== "EMAIL"
+    );
+    return {
+      phones: phones,
+      emails: emails,
+      networks: networks,
+    };
+  },
   getAvatar(state) {
     let lastName = state?.medicalCard?.person?.last_name;
     let firstName = state?.medicalCard?.person?.first_name;
@@ -151,6 +172,7 @@ const actions = {
       .then((res) => {
         commit("setMedicalCard", res);
         commit("setBasicData");
+        commit("setContactsData");
       });
   },
   returnInitData({ commit }) {
@@ -178,6 +200,9 @@ const mutations = {
   setBasicData(state) {
     state.basicData = { ...this.getters.getBasicData };
   },
+  setContactsData(state) {
+    state.contactsData = { ...this.getters.getContactsData };
+  },
 };
 
 export default {

tailwind.config.js

@@ -29,6 +29,7 @@ module.exports = {
       gap: {
         "6px": "6px",
         "7px": "7px",
+        "10px": "10px",
         "11px": "11px",
         "30px": "30px",
         "25px": "25px",