WIP Доделала отображение

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

@@ -2,8 +2,9 @@
   medical-form-wrapper(
     :title="data.title",
     :is-edit="isEdit",
-    :cancel="() => changeEdit(false)",
+    :cancel="cancelEdit",
     :open-edit="() => changeEdit(true)",
+    :buttonsPresence="!fillInspection"
   )
     .index-wrapper.w-full(v-if="isEdit")
       .rounded.border.px-4.py-2(v-if="data.content?.list")
@@ -30,9 +31,10 @@
       .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)
+    .w-full.flex.gap-x-1(v-if="!isEdit")
+      .w-full.flex.gap-x-1(v-if="modelValue")
         .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
+        .flex.rounded.w-8.h-8.justify-center.items-center.text-xl(:style="checkIconColor")
           q-icon(name="warning_amber", color="white")
 </template>
 
@@ -47,6 +49,7 @@ export default {
   components: { BaseButton, BaseInput, MedicalFormWrapper },
   props: {
     data: Object,
+    fillInspection: Boolean,
   },
   data() {
     return {
@@ -61,27 +64,55 @@ export default {
     state() {
       return this.protocolData[this.data.state];
     },
-    displayedValue() {
+    findedListItem() {
-      if (this.data.content?.list) {
+      if (this.data.content?.list && this.modelValue)
         return this.data.content?.list.find(
           (elem) => elem.value === this.modelValue
-        ).label;
+        );
-      }
+      return null;
+    },
+    displayedValue() {
+      if (this.findedListItem)
+        return this.findedListItem?.readOnlyLabel
+          ? this.findedListItem?.readOnlyLabel
+          : this.findedListItem?.label;
       return this.modelValue;
     },
+    checkIconColor() {
+      if (this.findedListItem)
+        return {
+          "background-color": this.findedListItem?.color,
+        };
+      return {
+        "background-color": this.data?.checkRangeColor(this.modelValue),
+      };
+    },
   },
   methods: {
     changeEdit(value) {
       this.isEdit = value;
     },
+    cancelEdit() {
+      this.modelValue = this.state;
+      this.changeEdit(false);
+    },
   },
   watch: {
     state: {
       immediate: true,
       handler(value) {
-        this.modelValue = value;
+        if (!this.fillInspection) this.modelValue = value;
       },
     },
+    fillInspection(value) {
+      if (value) {
+        this.isEdit = true;
+        this.modelValue = null;
+      } else {
+        this.isEdit = false;
+        this.modelValue = this.state;
+      }
+    },
   },
 };
 </script>

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

@@ -30,7 +30,7 @@
         :open-card="openCard",
         :close-card="closeCard"
       )
-      div(v-for="form in protocolForms", :key="form.key")  
+      div(v-for="form in protocolForms", :key="form.key", v-if="inspection || fillInspection")  
         component(v-bind:is="form.component", :data="form", :fill-inspection="fillInspection", :abc="abc")
       .protocol.flex.justify-between.p-6(v-if="fillInspection")
         .flex.h-fit.w-fit.gap-2

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -577,24 +577,34 @@ export const protocolForms = [
         губе, нависающей над нижней; может формироваться «второй подбородок».`,
       whitespace: false,
       list: [
+        {
+          label: "Ортогнатический прикус",
+          readOnlyLabel: "Нормальный – Ортогнатический",
+          value: "ortognatic bite",
+        },
         {
           label: "Дистальный прикус",
+          readOnlyLabel: "Дистальный",
           value: "distal bite",
         },
         {
           label: "Мезиальный прикус",
+          readOnlyLabel: "Мезиальный",
           value: "mesial bite",
         },
         {
           label: "Глубокий прикус",
+          readOnlyLabel: "Глубокий",
           value: "deep bite",
         },
         {
           label: "Открытый прикус",
+          readOnlyLabel: "Открытый",
           value: "open bite",
         },
         {
           label: "Перекрестный прикус",
+          readOnlyLabel: "Перекрестный",
           value: "cross bite",
         },
       ],

src/store/modules/medicalCard.js

@@ -129,7 +129,7 @@ const state = () => ({
   protocolData: {
     bite: "distal bite",
     hygieneIndex: 2,
-    KPUIndex: 3,
+    KPUIndex: 6.1,
     thermometry: {
       cold: {
         temperature: 22,