[WIP] Добавил хедер и формы Состояния здоровья

src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+  medical-form-wrapper(:title="`${data?.year} год`")
+    .flex.flex-col.comments.rounded.py-3.px-4
+      .flex(v-for="comment in data.comments")
+        base-input.comment.w-full(
+          v-model="comment.comment",
+          borderless,
+          dense,
+          )
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseInput from "@/components/base/BaseInput";
+
+export default {
+  name: "HealthStateForm",
+  components: { MedicalFormWrapper, BaseInput },
+  props: {
+    data: Object,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.comments
+  border: 1px solid var(--border-light-grey-color)
+</style>

src/pages/newMedicalCard/components/HealthState/HealthStateHeader.vue

@@ -0,0 +1,24 @@
+<template lang="pug">
+  .header.flex.w-full.rounded.justify-between.items-center.py-5.pl-6.pr-5
+    .span.text-2xl.font-bold Карты здоровья
+    q-btn(
+      color="primary",
+      no-caps
+      )
+      q-icon.mr-2(size="20px" name="add")
+      span Добавить запись
+</template>
+
+<script>
+export default {
+  name: "HealthStateHeader",
+};
+</script>
+
+<style lang="sass" scoped>
+.header
+  background-color: var(--default-white)
+.add
+  & .q-icon
+    display: none
+</style>

src/pages/newMedicalCard/components/MedicalBaseInfo.vue

@@ -12,6 +12,7 @@ import MedicalSidebar from "@/pages/newMedicalCard/components/MedicalSidebar.vue
 import MedicalBasicDataWrapper from "@/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue";
 import MedicalAllergiesWrapper from "@/pages/newMedicalCard/components/MedicalAllergiesWrapper.vue";
 import MedicalConfidantWrapper from "@/pages/newMedicalCard/components/MedicalConfidantWrapper.vue";
+import MedicalHealthStateWrapper from "@/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue";
 import MedicalProtocolsWrapper from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsWrapper.vue";
 export default {
   name: "MedicalBaseInfo",
@@ -20,6 +21,7 @@ export default {
     MedicalBasicDataWrapper,
     MedicalAllergiesWrapper,
     MedicalConfidantWrapper,
+    MedicalHealthStateWrapper,
     MedicalProtocolsWrapper,
   },
   data() {

src/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue

@@ -0,0 +1,24 @@
+<template lang="pug">
+  .flex.flex-col.w-full.gap-y-2
+    health-state-header
+    health-state-form(
+      v-for="data in healthState",
+      :data="data"
+      )
+</template>
+
+<script>
+import HealthStateHeader from "@/pages/newMedicalCard/components/HealthState/HealthStateHeader.vue";
+import HealthStateForm from "@/pages/newMedicalCard/components/HealthState/HealthStateForm.vue";
+import { mapState } from "vuex";
+
+export default {
+  name: "MedicalHealthStateWrapper",
+  components: { HealthStateHeader, HealthStateForm },
+  computed: {
+    ...mapState({
+      healthState: (state) => state.medical.healthState,
+    }),
+  },
+};
+</script>