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

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

@@ -1,10 +1,10 @@
 <template lang="pug">
-  medical-form-wrapper(:title="data.title")
+  medical-form-wrapper(:title="data.title", :is-edit="isEdit", :open-edit="openEdit", :cancel="cancelEdit")
     .thermometry-wrapper.grid.gap-x-20.gap-y-5
-      .flex.flex-col.gap-y-4.items-start(v-if="isEdit" v-for="thermometry in configThermometry.temperature")
-        span.font-semibold.text-smm {{ thermometry.title }}
+      .flex.flex-col.gap-y-4.items-start(v-if="isEdit" v-for="(thermometry, key) in thermometryData")
+        span.font-semibold.text-smm {{ data.config.temperature[key].title }}
         base-input.w-full(
-          v-model="dataThermometry[thermometry.name].temperature",
+          v-model="thermometry.temperature",
           type="number"
           label="Температура"
           outlined
@@ -14,29 +14,47 @@
           )
         .flex.flex-col.gap-y-2.w-full
           base-input.w-full(
-            v-model="dataThermometry[thermometry.name].result",
+            v-model="thermometry.result",
             label="Результат"
             outlined
             text-color="black"
             placeholder="Введите диагноз..."
+            max="40"
           )
-          .results-wrapper.flex.flex-col.rounded.w-full.px-3.py-3
-            .result.flex.w-full.justify-between.items-center(v-for="result in configThermometry.results")
+          .results-wrapper.flex.flex-col.rounded.w-full.px-4.py-2
+            .result.flex.w-full.justify-between.items-center.h-9(v-for="result in data.config.results")
               .flex.gap-x-4
                 q-radio(
-                  v-model="dataThermometry[thermometry.name].result"
+                  v-model="thermometry.result"
                   :val="result.value"
                   :label="result.value"
+                  size="30px"
+                  dense
                   checked-icon="check_box"
                   unchecked-icon="check_box_outline_blank"
                   )
-              .alert-icon.flex.justify-center.items-center.rounded.w-6.h-6(v-if="result.alert")
-                q-icon(size="13" name="warning_amber")
+              .alert-icon.flex.justify-center.items-center.rounded.w-6.h-6(v-if="result.colorWarning")
+                q-icon(size="13px" name="warning_amber")
+      .flex.flex-col.gap-y-2.items-start(v-else)
+        .flex.gap-x-1.h-8(v-for="(thermometry, key) in thermometryData")
+          .flex.h-full.w-20.justify-center.items-center.gap-x-1.rounded(
+            :style="{'background-color': data.config.temperature[key].bg, 'color': data.config.temperature[key].color}"
+            )
+            q-icon(size="18px", :name="data.config.temperature[key].icon")
+            span.text-smm.font-medium {{ `${thermometry.temperature}º` }}
+          .flex.items-center.h-full.px-3.font-medium.text-smm.rounded(
+            v-if="thermometry.result", 
+            :style="{'background-color': 'var(--bg-light-grey)'}") {{ thermometry.result }}
+          .flex.items-center.justify-center.rounded.w-8.h-full(
+            v-if="data.config.results.find((el) => el.value === thermometry.result)?.colorWarning", 
+            :style="{'background-color': data.config.results.find((el) => el.value === thermometry.result).colorWarning, 'color': 'white'}")
+            q-icon(size="20px" name="warning_amber")
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "ThermometryForm",
@@ -46,53 +64,22 @@ export default {
   },
   data() {
     return {
-      isEdit: true,
-      dataThermometry: {
-        cold: {
-          temperature: null,
-          result: "Реакция нормальная",
-        },
-        heat: {
-          temperature: 50,
-          result: "Повышенная чувствительность",
-        },
-      },
-      configThermometry: {
-        temperature: [
-          {
-            name: "cold",
-            title: "Реакция на холод",
-          },
-          {
-            name: "heat",
-            title: "Реакция на тепло",
-          },
-        ],
-        results: [
-          {
-            value: "Нет реакции",
-            alert: true,
-          },
-          {
-            value: "Слабая реакция",
-            alert: true,
-          },
-          {
-            value: "Реакция нормальная",
-            alert: false,
-          },
-          {
-            value: "Повышенная чувствительность",
-            alert: true,
-          },
-          {
-            value: "Непереносимость",
-            alert: true,
-          },
-        ],
-      },
+      isEdit: false,
     };
   },
+  computed: {
+    ...mapState({
+      thermometryData: (state) => state.medical.protocolThermometry,
+    }),
+  },
+  methods: {
+    openEdit() {
+      this.isEdit = true;
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+  },
 };
 </script>
 
@@ -110,4 +97,6 @@ export default {
   color: var(--font-grey-color)
 .result
   border-bottom: 1px solid var(--bg-light-grey)
+  &:last-child
+    border: none
 </style>