WIP Доработал работу полей в форме Основных данных

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  medical-form-wrapper(title="Основные данные" :change-edit="changeEdit")
+  medical-form-wrapper(title="Основные данные" :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")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
@@ -8,15 +8,15 @@
           .avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
               img(
-                v-if="basicData[data.dataKey][field.key]" 
+                v-if="basic[data.dataKey][field.key]" 
-                :src="url + basicData[data.dataKey][field.key]" 
+                :src="url + basic[data.dataKey][field.key]" 
                 alt="AV"
                 )
               span(v-else) {{ avatar }}
             .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit") Заменить фото
           .select(v-else-if="field.type === 'select'")
             base-select(
-              v-model="basicData[data.dataKey][field.key]"
+              v-model="basic[data.dataKey][field.key]"
               :hide-dropdown-icon="!isEdit"
               :disable="!isEdit"
               :outlined="isEdit"
@@ -27,7 +27,7 @@
           base-input(
             v-else 
             :disabled="!isEdit" 
-            v-model="basicData[data.dataKey][field.key]" 
+            v-model="basic[data.dataKey][field.key]" 
             :type="field.type" 
             :width="300" 
             :standout="!isEdit" 
@@ -45,7 +45,7 @@ import {
   baseDataForm,
   genderOptions,
 } from "@/pages/newMedicalCard/utils/configMedical";
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "BasicDataForm",
@@ -57,14 +57,25 @@ export default {
       configData: baseDataForm,
     };
   },
-  computed: mapGetters({
+  computed: {
-    basicData: "getBasicData",
+    ...mapGetters({
-    url: "getUrl",
+      url: "getUrl",
-    avatar: "getAvatar",
+      avatar: "getAvatar",
-  }),
+    }),
+    ...mapState({
+      basic: (state) => state.medical.basicData,
+    }),
+  },
   methods: {
-    changeEdit() {
+    cancelEdit() {
-      this.isEdit = !this.isEdit;
+      this.isEdit = false;
+      this.$store.dispatch("returnInitData");
+    },
+    saveChange() {
+      this.isEdit = false;
+    },
+    openEdit() {
+      this.isEdit = true;
     },
   },
 };
@@ -74,7 +85,7 @@ export default {
 .select
   width: 324px
 .avatar-field
-  min-width: 310px
+  min-width: 324px
 .replace-photo
   color: var(--btn-blue-color)
 .input

src/pages/newMedicalCard/components/MedicalCardSidebar.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .sidebar-wrapper.h-full.rounded.px-2.py-6.flex.flex-col
-    .menu-item.text-base.px-4.py-3.rounded(
+    .menu-item.text-base.px-4.py-3.rounded.cursor-pointer(
       v-for="item in menuItem",
       :key="item.id",
       :id="item.id",

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -8,9 +8,9 @@
         span.font-bold.text-base {{title}}
         q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="clickEditForm" size="20")
       slot
-      .flex.h-fit.w-fit.gap-2
+      .flex.h-fit.w-fit.gap-2(v-if="isEdit")
-        base-button.text-base.font-semibold(v-if="isEdit" outlined :size="40" @click="cancelEdit") Отменить
+        base-button.text-base.font-semibold(outlined :size="40" @click="cancelEdit") Отменить
-        base-button.text-base.font-semibold(v-if="isEdit" :size="40" @click="saveChangeForm") Сохранить изменения
+        base-button.text-base.font-semibold(:size="40" @click="saveChangeForm") Сохранить изменения
 </template>
 
 <script>
@@ -21,7 +21,15 @@ export default {
   components: { BaseButton, BaseLoader },
   props: {
     title: String,
-    changeEdit: {
+    cancel: {
+      type: Function,
+      default: () => {},
+    },
+    save: {
+      type: Function,
+      default: () => {},
+    },
+    openEdit: {
       type: Function,
       default: () => {},
     },
@@ -35,18 +43,18 @@ export default {
   methods: {
     clickEditForm() {
       this.isEdit = true;
-      this.changeEdit();
+      this.openEdit();
     },
     cancelEdit() {
       this.isEdit = false;
-      this.changeEdit();
+      this.cancel();
     },
     saveChangeForm() {
       this.isLoadingData = true;
       setTimeout(() => {
         this.isLoadingData = false;
         this.isEdit = false;
-        this.changeEdit();
+        this.save();
       }, 2000);
     },
   },

src/pages/newMedicalCard/utils/configMedical.js

@@ -101,11 +101,11 @@ export const baseDataForm = [
 
 export const genderOptions = [
   {
+    id: "MALE",
     label: "Мужской",
-    value: "MALE",
   },
   {
+    id: "WOMEN",
     label: "Женский",
-    value: "WOMEN",
   },
 ];

src/store/modules/medicalCard.js

@@ -1,7 +1,32 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
+import { genderOptions } from "@/pages/newMedicalCard/utils/configMedical";
 
 const state = () => ({
   medicalCard: {},
+  basicData: {
+    basicData: {
+      last_name: null,
+      first_name: null,
+      patronymic: null,
+      gender: null,
+      birth_date: null,
+      photo: null,
+    },
+    registrationAddress: {
+      region: null,
+      city: null,
+      street: null,
+      house_number: null,
+      apartment_number: null,
+    },
+    residenceAddress: {
+      region: null,
+      city: null,
+      street: null,
+      house_number: null,
+      apartment_number: null,
+    },
+  },
   avatar: "",
 });
 
@@ -18,7 +43,9 @@ const getters = {
         last_name: person?.last_name,
         first_name: person?.first_name,
         patronymic: person?.patronymic,
-        gender: person?.gender,
+        gender:
+          person?.gender &&
+          genderOptions.find((el) => el.id === person?.gender),
         birth_date: person?.birth_date
           ? new Date(person?.birth_date)
           : new Date(),
@@ -55,7 +82,13 @@ const actions = {
           "medicalId"
         )}/detail/`
       )
-      .then((res) => commit("setMedicalCard", res));
+      .then((res) => {
+        commit("setMedicalCard", res);
+        commit("setBasicData");
+      });
+  },
+  returnInitData({ commit }) {
+    commit("setBasicData");
   },
 };
 
@@ -63,6 +96,9 @@ const mutations = {
   setMedicalCard(state, card) {
     state.medicalCard = card;
   },
+  setBasicData(state) {
+    state.basicData = { ...this.getters.getBasicData };
+  },
 };
 
 export default {