WIP Добавил отображение данных медицинской карты

src/components/base/BaseDetailInfo.vue

@@ -1,9 +1,13 @@
 <template lang="pug">
   .section-wrapper.flex.flex-col.h-fit.cursor-pointer(:style="{height: `${height}px`}")
-    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4
+    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4.mb-3
       span.text-sm.font-semibold.whitespace-normal {{title}}
-    .flex.items-center.gap-x-8
-    .section-add.flex.justify-center.items-center.cursor-pointer Добавить данные
+    .flex.flex-col.items-center.gap-y-4.px-4
+     slot(v-if="!isNoData")
+    .section-add.flex.justify-center.items-center.cursor-pointer(
+      v-if="isNoData"
+      @click="openAddDoc"
+    ) Добавить данные
 </template>
 
 <script>
@@ -12,6 +16,28 @@ export default {
   props: {
     title: String,
     height: Number,
+    data: Object,
+  },
+  data() {
+    return {
+      isNoData: true,
+    };
+  },
+  methods: {
+    openAddDoc() {
+      this.isNoData = false;
+    },
+  },
+  watch: {
+    data() {
+      Object.values(this.data)
+        .map((el) => (el ? el : undefined))
+        .forEach((el) => {
+          if (el) {
+            this.isNoData = false;
+          }
+        });
+    },
   },
 };
 </script>

src/components/base/BaseDetailInput.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+  .flex.flex-col.w-full(class="gap-y-1.5")
+    span.title-section.font-semibold.text-xs(v-if="field.title" ) {{field.title}}
+    .flex.items-center(v-if="field.type === 'text' || field.type === 'textarea'" class="gap-x-2.5")
+      span.w-4.icon(v-if="field.icon" :class="field.icon")
+      base-input(v-model="data[field.label]" :with-icon="field.copy")
+        .copy.icon-copy.cursor-pointer(
+          v-if="field.copy && data[field.label]",
+          @click="() => copyValue(data[field.label])"
+        )
+    base-input-date(v-if="field.type === 'date'" v-model="data[field.label]")
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
+export default {
+  name: "BaseDetailInput",
+  components: { BaseInput, BaseInputDate },
+  props: {
+    value: String,
+    field: Object,
+    data: Object,
+  },
+  data() {
+    return {
+      isNoData: true,
+    };
+  },
+  methods: {
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.icon
+  color: var(--icon-light-blue)
+.copy
+  color: var(--btn-blue-color)
+  opacity: 0.6
+</style>