WIP Создал враппер для форм мед карты

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -0,0 +1,8 @@
+<template lang="pug">
+</template>
+
+<script>
+export default {
+  name: "BasicDataForm",
+};
+</script>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+  .form-wrapper.relative.h-fit.rounded
+    transition(name="medical-form", mode="out-in")
+      .loader.absolute.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
+        base-loader
+    .flex.flex-col.h-full.gap-25px.m-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")
+      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="thisEdit" :size="40" @click="saveChangeForm") Сохранить изменения
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseLoader from "@/components/Loader/BaseLoader.vue";
+export default {
+  name: "MedicalFormWrapper",
+  components: { BaseButton, BaseLoader },
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      thisEdit: false,
+      isLoadingData: false,
+    };
+  },
+  methods: {
+    clickEditForm() {
+      this.thisEdit = true;
+    },
+    cancelEdit() {
+      this.thisEdit = false;
+    },
+    saveChangeForm() {
+      this.isLoadingData = true;
+      setTimeout(() => {
+        this.isLoadingData = false;
+        this.thisEdit = false;
+      }, 2000);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.form-wrapper
+  width: 1532px
+  background-color: var(--default-white)
+.edit-button
+  color: var(--btn-blue-color)
+.loader
+  background-color: var(--default-white)
+.medical-form-enter-from
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.medical-form-leave-to
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.medical-form-leave-active
+  transition: 0.3s ease
+.medical-form-move
+  transition: 0.3s ease
+</style>

src/pages/newMedicalCard/utils/configMedical.js

@@ -0,0 +1,35 @@
+export const baseDataForm = [
+  {
+    fieldName: "Личные данные",
+    fields: [
+      {
+        key: "last_name",
+        label: "Фамилия",
+      },
+      {
+        key: "first_name",
+        label: "Имя",
+      },
+      {
+        key: "patronymic",
+        label: "Отчество",
+      },
+      {
+        key: "patronymic",
+        label: "Отчество",
+      },
+      {
+        key: "gender",
+        label: "Пол",
+      },
+      {
+        key: "birth_date",
+        label: "Дата рождения",
+      },
+      {
+        key: "photo",
+        label: "Фото",
+      },
+    ],
+  },
+];