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

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>