WIP Добавил форму для Основных данных

src/components/base/BaseInput.vue

@@ -3,14 +3,14 @@
     q-input(
       v-model="value",
       :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ color: textColor, width: width + 'px' }",
+      :input-style="{ color: textColor, width: width + 'px' , borderColor: borderColor}",
       :borderless="borderless",
       :placeholder="placeholder",
       :outlined="outlined",
       :dense="dense",
       :type="type",
       :filled="filled",
-      :bg-color="filled ? '' : 'white'",
+      :bg-color="filled || standout ? '' : 'white'",
       :disable="disabled",
       :rules="rule",
       :lazy-rules="lazyRule",
@@ -20,6 +20,7 @@
       :maxlength="maxLength",
       :autogrow="autogrow",
       :square="square",
+      :standout="standout"
       hide-bottom-space
     )
       slot.cursor-pointer
@@ -60,10 +61,15 @@ export default {
     type: {
       default: "text",
     },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     mask: String,
     width: Number,
     maxLength: Number,
     textColor: String,
+    borderColor: String,
     rule: Array,
     lazyRule: [Boolean, String],
     noErrorIcon: Boolean,

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -1,8 +1,69 @@
 <template lang="pug">
+  medical-form-wrapper(title="Основная информация")
+    .form-wrap.form.flex.gap-24.w-full
+      .data-section.flex.flex-col.gap-4(v-for="data in configData")
+        .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
+        .flex.justify-between.items-center.gap-4(v-for="field in data.fields")
+          .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")
 </template>
 
 <script>
+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";
 export default {
   name: "BasicDataForm",
+  components: { MedicalFormWrapper, BaseInput, BaseAvatar },
+  data() {
+    return {
+      configData: baseDataForm,
+      initData: {
+        basicData: {
+          last_name: "",
+          first_name: "",
+          patronymic: "",
+          gender: "",
+          birth_date: new Date(),
+          photo: "",
+        },
+        registrationAddress: {
+          region: "",
+          city: "",
+          street: "",
+          house_number: "",
+          apartment_number: "",
+        },
+        residenceAddress: {
+          region: "",
+          city: "",
+          street: "",
+          house_number: "",
+          apartment_number: "",
+        },
+      },
+    };
+  },
 };
 </script>
+
+<style lang="sass" scoped>
+.avatar-field
+  min-width: 310px
+.input
+  color: purple
+.data-section
+  width: 30%
+  @media(max-width: 1900px)
+    width: 28%
+  @media(max-width: 1700px)
+    width: 100%
+.form-wrap
+  @media(max-width: 1700px)
+    flex-direction: column
+.label-field
+  color: var(--font-grey-color)
+</style>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -1,7 +1,7 @@
 <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")
+      .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
         base-loader
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-fit.gap-11px.items-center
@@ -48,8 +48,10 @@ export default {
 
 <style lang="sass" scoped>
 .form-wrapper
-  width: 1532px
+  width: 83.2%
   background-color: var(--default-white)
+  @media (max-width: 600px)
+    width: fit-content
 .edit-button
   color: var(--btn-blue-color)
 .loader

src/pages/newMedicalCard/utils/configMedical.js

@@ -1,34 +1,99 @@
 export const baseDataForm = [
   {
-    fieldName: "Личные данные",
+    dataLabel: "Личные данные",
+    dataKey: "basicData",
     fields: [
       {
         key: "last_name",
         label: "Фамилия",
+        type: "text",
       },
       {
         key: "first_name",
         label: "Имя",
+        type: "text",
       },
       {
         key: "patronymic",
         label: "Отчество",
-      },
+        type: "text",
-      {
-        key: "patronymic",
-        label: "Отчество",
       },
       {
         key: "gender",
         label: "Пол",
+        type: "text",
       },
       {
         key: "birth_date",
         label: "Дата рождения",
+        type: "date",
       },
       {
         key: "photo",
         label: "Фото",
+        type: "avatar",
+      },
+    ],
+  },
+  {
+    dataLabel: "Адрес регистрации",
+    dataKey: "registrationAddress",
+    fields: [
+      {
+        key: "region",
+        label: "Регион",
+        type: "text",
+      },
+      {
+        key: "city",
+        label: "Город",
+        type: "text",
+      },
+      {
+        key: "street",
+        label: "Улица",
+        type: "text",
+      },
+      {
+        key: "house_number",
+        label: "Дом",
+        type: "number",
+      },
+      {
+        key: "apartment_number",
+        label: "Квартира",
+        type: "number",
+      },
+    ],
+  },
+  {
+    dataLabel: "Адрес проживания",
+    dataKey: "residenceAddress",
+    fields: [
+      {
+        key: "region",
+        label: "Регион",
+        type: "text",
+      },
+      {
+        key: "city",
+        label: "Город",
+        type: "text",
+      },
+      {
+        key: "street",
+        label: "Улица",
+        type: "text",
+      },
+      {
+        key: "house_number",
+        label: "Дом",
+        type: "number",
+      },
+      {
+        key: "apartment_number",
+        label: "Квартира",
+        type: "number",
       },
     ],
   },