[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>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -350,7 +350,7 @@ export const baseInfoMenu = [
   {
     title: "Состояние здоровья",
     id: "health-status",
-    component: "HealthStatus",
+    component: "MedicalHealthStateWrapper",
   },
   {
     title: "История болезней",

src/store/modules/medicalCard.js

@@ -128,6 +128,50 @@ const state = () => ({
     },
   ],
   protocolData: null,
+  healthState: [
+    {
+      year: 2023,
+      comments: [
+        {
+          comment: "Пациент склонен к преувеличению фактов",
+        },
+        {
+          comment: "Пациент отказывался заполнять карту",
+        },
+        {
+          comment: "Тяжело идет на контакт",
+        },
+      ],
+    },
+    {
+      year: 2022,
+      comments: [
+        {
+          comment: "Пациент склонен к преувеличению фактов",
+        },
+        {
+          comment: "Пациент отказывался заполнять карту",
+        },
+        {
+          comment: "Тяжело идет на контакт",
+        },
+      ],
+    },
+    {
+      year: 2021,
+      comments: [
+        {
+          comment: "Пациент склонен к преувеличению фактов",
+        },
+        {
+          comment: "Пациент отказывался заполнять карту",
+        },
+        {
+          comment: "Тяжело идет на контакт",
+        },
+      ],
+    },
+  ],
 });
 
 const getters = {