WIP Сделала шаблон документов

src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue

@@ -44,7 +44,7 @@
             v-model="basic[data.dataKey][field.key]"
             @update:model-value="checkChangeInput"
             :type="field.type" 
-            :width="300" 
+            :width="278" 
             :standout="!isEdit" 
             :outlined="isEdit" 
             :rule="field.rules"
@@ -200,9 +200,9 @@ export default {
 
 <style lang="sass" scoped>
 .select
-  width: 324px
+  width: 302px
 .avatar-field
-  min-width: 324px
+  min-width: 302px
 .avatar
   height: 100%
   border-radius: 50%

src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue

@@ -1,12 +1,71 @@
 <template lang="pug">
-  medical-form-wrapper
+  medical-form-wrapper(
+    title="Документы"
+  )
+    .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}}
+        .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
+          .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
+            base-avatar(
+              v-if="photo",
+              :size="40",
+            )
+              img.object-cover(
+                :src="url + photo" 
+                alt="photo"
+              )
+            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit && photo") Заменить фото
+            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit && !photo") Добавить фото
+          base-input(
+            v-else
+            :disabled="!isEdit"
+            :width="278" 
+            :standout="!isEdit" 
+            :outlined="isEdit" 
+            :rule="field.rules"
+            text-color="black"
+          )
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { documentForm } from "@/pages/newMedicalCard/utils/medicalConfig";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
 export default {
   name: "DocumentsForm",
-  components: { MedicalFormWrapper },
+  components: { MedicalFormWrapper, BaseInput, BaseAvatar },
+  data() {
+    return {
+      configData: documentForm,
+      isEdit: false,
+      photo: null,
+    };
+  },
+  computed: {
+    url() {
+      return this.$store.state.url;
+    },
+  },
 };
 </script>
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.form-wrap
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: 2.5fr 0.5fr
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: 2.5fr 0.5fr 0.5fr
+.label-field
+  color: var(--font-grey-color)
+.replace-photo
+  color: var(--btn-blue-color)
+.photo-field
+  min-width: 302px
+</style>

src/pages/newMedicalCard/components/MedicalBaseInfo.vue

@@ -23,4 +23,5 @@ export default {
 <style lang="sass" scoped>
 .base-info-wrapper
   height: 79.7%
+  max-height: calc(100% - 190px - 16px)
 </style>

src/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-2.wrapper
+  .flex.flex-col.gap-y-2.wrapper.h-full
     basic-data-form
     documents-form
     insurance-form
@@ -18,6 +18,9 @@ export default {
 <style lang="sass" scoped>
 .wrapper
   width: 83.2%
+  overflow-y: auto
   @media (max-width: 600px)
     width: fit-content
+  &::-webkit-scrollbar
+    width: 0
 </style>

src/pages/newMedicalCard/components/MedicalHeader.vue

@@ -168,8 +168,8 @@ export default {
 .patient-info
   width: 83.2%
   height: 18.7%
-  min-height: 190px
   background-color: var(--default-white)
+  min-height: 190px
 .menu-item
   color: var(--font-grey-color)
   border-bottom: 1px solid transparent
@@ -201,7 +201,6 @@ export default {
   max-height: 190px
   overflow-y: auto
   &::-webkit-scrollbar
-    //width: 16px
     width: 4px
     background-color: var(--default-white)
   &::-webkit-scrollbar-track

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -246,3 +246,74 @@ export const routesDictionary = {
   "/calendar": "Календарь",
   "/medical-card": "Медкарта",
 };
+
+export const documentForm = [
+  {
+    dataLabel: "Паспорт",
+    dataKey: "passport",
+    fields: [
+      {
+        key: "series",
+        label: "Серия",
+        type: "text",
+      },
+      {
+        key: "number",
+        label: "Номер",
+        type: "text",
+      },
+      {
+        key: "issued_by_org",
+        label: "Кем выдан",
+        type: "text",
+      },
+      {
+        key: "issued_by_org_code",
+        label: "Код подраздел.",
+        type: "text",
+      },
+      {
+        key: "issued_by_date",
+        label: "Дата выдачи",
+        type: "date",
+      },
+      {
+        key: "photo",
+        label: "Фото паспорта",
+        type: "photo",
+      },
+    ],
+  },
+  {
+    dataLabel: "СНИЛС",
+    dataKey: "insuranceNumber",
+    fields: [
+      {
+        key: "insurance_number",
+        label: "Номер СНИЛС",
+        type: "text",
+      },
+      {
+        key: "photo_insurance_number",
+        label: "Фото СНИЛС",
+        type: "photo",
+      },
+    ],
+  },
+  {
+    dataLabel: "ИНН",
+    dataKey: "taxIdentificationNumber",
+    fields: [
+      {
+        key: "tax_identification_number",
+        label: "Номер ИНН",
+        type: "text",
+      },
+      {
+        key: "photo_tax_identification_number",
+        label: "Фото ИНН",
+        type: "photo",
+      },
+    ],
+  },
+];