WIP Подключил store для мед карты, поправил форму Основных данных

src/pages/newMedicalCard/TheMedicalCard.vue

@@ -10,6 +10,7 @@
 <script>
 import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
 import MedicalCardBaseInfo from "@/pages/newMedicalCard/components/MedicalCardBaseInfo.vue";
+import { mapState } from "vuex";
 export default {
   name: "TheMedicalCard",
   components: { MedicalCardHeader, MedicalCardBaseInfo },
@@ -18,5 +19,11 @@ export default {
       currentMenuItem: "MedicalCardBaseInfo",
     };
   },
+  computed: mapState({
+    medical: (state) => state.medical.medicalCard,
+  }),
+  created() {
+    this.$store.dispatch("getMedicalCardData");
+  },
 };
 </script>

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  medical-form-wrapper(title="Основная информация")
+  medical-form-wrapper(title="Основная информация" :change-edit="changeEdit")
     .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}}
@@ -7,7 +7,7 @@
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.justify-start(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
-          base-input(v-else v-model="initData[data.dataKey][field.key]" :type="field.type" :width="300" standout="bg-white" text-color="black")
+          base-input(v-else :disabled="!isEdit" v-model="initData[data.dataKey][field.key]" :type="field.type" :width="300" :standout="!isEdit" :outlined="isEdit" text-color="black")
 </template>
 
 <script>
@@ -15,11 +15,13 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import { baseDataForm } from "@/pages/newMedicalCard/utils/configMedical";
+import { mapState } from "vuex";
 export default {
   name: "BasicDataForm",
   components: { MedicalFormWrapper, BaseInput, BaseAvatar },
   data() {
     return {
+      isEdit: false,
       configData: baseDataForm,
       initData: {
         basicData: {
@@ -47,6 +49,17 @@ export default {
       },
     };
   },
+  computed: mapState({
+    medical: (state) => state.medical.medicalCard,
+  }),
+  created() {
+    this.$store.dispatch("getMedicalCardData");
+  },
+  methods: {
+    changeEdit() {
+      this.isEdit = !this.isEdit;
+    },
+  },
 };
 </script>
 

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -6,11 +6,11 @@
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-fit.gap-11px.items-center
         span.font-bold.text-base {{title}}
-        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!thisEdit" @click="clickEditForm" size="20")
+        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="thisEdit" outlined :size="40" @click="cancelEdit") Отменить
+        base-button.text-base.font-semibold(v-if="isEdit" outlined :size="40" @click="cancelEdit") Отменить
-        base-button.text-base.font-semibold(v-if="thisEdit" :size="40" @click="saveChangeForm") Сохранить изменения
+        base-button.text-base.font-semibold(v-if="isEdit" :size="40" @click="saveChangeForm") Сохранить изменения
 </template>
 
 <script>
@@ -21,25 +21,32 @@ export default {
   components: { BaseButton, BaseLoader },
   props: {
     title: String,
+    changeEdit: {
+      type: Function,
+      default: () => {},
+    },
   },
   data() {
     return {
-      thisEdit: false,
+      isEdit: false,
       isLoadingData: false,
     };
   },
   methods: {
     clickEditForm() {
-      this.thisEdit = true;
+      this.isEdit = true;
+      this.changeEdit();
     },
     cancelEdit() {
-      this.thisEdit = false;
+      this.isEdit = false;
+      this.changeEdit();
     },
     saveChangeForm() {
       this.isLoadingData = true;
       setTimeout(() => {
         this.isLoadingData = false;
-        this.thisEdit = false;
+        this.isEdit = false;
+        this.changeEdit();
       }, 2000);
     },
   },

src/store/index.js

@@ -1,15 +1,8 @@
 import { createStore } from "vuex";
+import medical from "./modules/medicalCard";
 
 export default createStore({
-  state: {
+  modules: {
-    currentPatient: {},
+    medical,
-    test: "Привет",
   },
-  mutations: {
-    setCurrentPatient(state, patient) {
-      state.currentPatient = patient;
-    },
-  },
-  actions: {},
-  modules: {},
 });

src/store/modules/medicalCard.js

@@ -0,0 +1,32 @@
+import { fetchWrapper } from "@/shared/fetchWrapper";
+
+const state = () => ({
+  medicalCard: {},
+});
+
+const getters = {};
+
+const actions = {
+  getMedicalCardData({ commit }) {
+    fetchWrapper
+      .get(
+        `medical_card/medical_history/${localStorage.getItem(
+          "medicalId"
+        )}/detail/`
+      )
+      .then((res) => commit("setMedicalCard", res));
+  },
+};
+
+const mutations = {
+  setMedicalCard(state, card) {
+    state.medicalCard = card;
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};