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]" 
-                :src="url + basicData[data.dataKey][field.key]" 
+                v-if="basic[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({
-    basicData: "getBasicData",
-    url: "getUrl",
-    avatar: "getAvatar",
-  }),
+  computed: {
+    ...mapGetters({
+      url: "getUrl",
+      avatar: "getAvatar",
+    }),
+    ...mapState({
+      basic: (state) => state.medical.basicData,
+    }),
+  },
   methods: {
-    changeEdit() {
-      this.isEdit = !this.isEdit;
+    cancelEdit() {
+      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
-        base-button.text-base.font-semibold(v-if="isEdit" outlined :size="40" @click="cancelEdit") Отменить
-        base-button.text-base.font-semibold(v-if="isEdit" :size="40" @click="saveChangeForm") Сохранить изменения
+      .flex.h-fit.w-fit.gap-2(v-if="isEdit")
+        base-button.text-base.font-semibold(outlined :size="40" @click="cancelEdit") Отменить
+        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);
     },
   },