WIP Набросала отображение данных

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue

@@ -8,7 +8,7 @@
     .index-wrapper.w-full(v-if="isEdit")
       .rounded.border.px-4.py-2(v-if="data.content?.list")
         .flex.flex-col
-          .py-2.radio-item(v-for="item in data.content?.list")
+          .py-2.radio-item.flex.justify-between.items-center(v-for="item in data.content?.list")
             q-radio(
               v-model="modelValue",
               dense,
@@ -17,22 +17,30 @@
               unchecked-icon="check_box_outline_blank"
             )
               span.text-sm.line-height.blue-color {{ item?.label ? item.label : item }}
+            .alert-icon.flex.justify-center.items-center.rounded.w-6.h-6(v-if="item?.icon")
+              q-icon(name="warning_amber", size="13")
       base-input(
         v-else,
         v-model="modelValue",
         outlined,
-        type="number"
-        :rule="data?.rules"
+        type="number",
+        :rule="data?.rules",
+        step="any",
       )
       .rounded.grey-background.py-3.px-4.blue-color
         span.font-bold.text-base.line-height Справка
         .text-sm.line-height.mt-2(:class="{'whitespace-pre-line': data.content?.whitespace}") {{ data.content?.reference}}
+    .w-full.flex.gap-x-1(v-else)
+      .text-sm.line-height.blue-color.py-6px.px-3.grey-background.rounded {{ displayedValue }}
+      .flex.rounded.grey-background.w-8.h-8.justify-center.items-center.text-xl
+        q-icon(name="warning_amber", color="white")
 </template>
 
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "IndexForm",
@@ -43,14 +51,38 @@ export default {
   data() {
     return {
       isEdit: false,
-      modelValue: "",
+      modelValue: null,
     };
   },
+  computed: {
+    ...mapState({
+      protocolData: (state) => state.medical.protocolData,
+    }),
+    state() {
+      return this.protocolData[this.data.state];
+    },
+    displayedValue() {
+      if (this.data.content?.list) {
+        return this.data.content?.list.find(
+          (elem) => elem.value === this.modelValue
+        ).label;
+      }
+      return this.modelValue;
+    },
+  },
   methods: {
     changeEdit(value) {
       this.isEdit = value;
     },
   },
+  watch: {
+    state: {
+      immediate: true,
+      handler(value) {
+        this.modelValue = value;
+      },
+    },
+  },
 };
 </script>
 
@@ -73,10 +105,16 @@ export default {
 
 .blue-color
   color: var(--font-dark-blue-color)
+
 .grey-background
   background-color: var(--bg-light-grey)
+
 .radio-item
   border-bottom: 1px solid var(--bg-light-grey)
 .radio-item:last-child
   border-bottom: none
+
+.alert-icon
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue

@@ -74,7 +74,7 @@ export default {
   },
   computed: {
     ...mapState({
-      protocolsData: (state) => state.medical.protocolsData,
+      protocolsList: (state) => state.medical.protocolsList,
     }),
     sortingClass() {
       return this.sorting
@@ -86,8 +86,8 @@ export default {
           };
     },
     sortingYears() {
-      if (!this.protocolsData) return [];
-      let years = this.protocolsData
+      if (!this.protocolsList) return [];
+      let years = this.protocolsList
         .map((elem) => {
           return elem?.start.slice(0, 4);
         })
@@ -95,9 +95,9 @@ export default {
       return this.sorting ? [...new Set(years.reverse())] : [...new Set(years)];
     },
     sortingProtocols() {
-      if (!this.protocolsData) return [];
+      if (!this.protocolsList) return [];
       let protocols = [];
-      this.protocolsData.forEach((elem) =>
+      this.protocolsList.forEach((elem) =>
         protocols.push({
           id: elem.id,
           employee: {