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: {

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -611,7 +611,28 @@ export const protocolForms = [
       2 — налет поражает до 2/3 зуба, отмечается поддесневой камень;
       3 — налет покрывает более 2/3 поверхности, поддесневой камень поражает шейки зубов.`,
       whitespace: true,
-      list: [0, 1, 2, 3],
+      list: [
+        {
+          label: "0",
+          value: 0,
+        },
+        {
+          label: "1",
+          value: 1,
+        },
+        {
+          label: "2",
+          value: 2,
+          icon: true,
+          color: "var(--bg-event-orange-color)",
+        },
+        {
+          label: "3",
+          value: 3,
+          icon: true,
+          color: "var(--border-red-color)",
+        },
+      ],
     },
   },
   {
@@ -627,6 +648,12 @@ export const protocolForms = [
       whitespace: true,
     },
     rules: [(val) => val <= 10 && val >= 0],
+    checkRangeColor: (val) => {
+      let roundedVal = parseInt(val);
+      if (roundedVal >= 3 && roundedVal <= 5)
+        return "var(--bg-event-orange-color)";
+      if (roundedVal >= 6 && roundedVal <= 10) return "var(--border-red-color)";
+    },
   },
   {
     title: "Данные обследования",

src/store/modules/medicalCard.js

@@ -59,7 +59,7 @@ const state = () => ({
   avatar: "",
   benefitData: [],
   events: [],
-  protocolsData: [
+  protocolsList: [
     {
       id: 1,
       employee: {
@@ -126,6 +126,11 @@ const state = () => ({
       status: "filled",
     },
   ],
+  protocolData: {
+    bite: "distal bite",
+    hygieneIndex: 2,
+    KPUIndex: 3,
+  },
 });
 
 const getters = {
@@ -338,8 +343,8 @@ const actions = {
   },
   createProtocol({ commit, rootGetters, state }, data) {
     data.employee = rootGetters.getUserData;
-    data.id = state.protocolsData.length + 1;
-    commit("setProtocolsData", data);
+    data.id = state.protocolsList.length + 1;
+    commit("setProtocolsList", data);
   },
 };
 
@@ -370,8 +375,8 @@ const mutations = {
       state.events = res.events;
     });
   },
-  setProtocolsData(state, data) {
-    state.protocolsData = [...state.protocolsData, data];
+  setProtocolsList(state, data) {
+    state.protocolsList = [...state.protocolsList, data];
   },
 };