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,10 +31,11 @@
       .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")
+    .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.w-8.h-8.justify-center.items-center.text-xl(:style="checkIconColor")
+          q-icon(name="warning_amber", color="white")
 </template>
 
 <script>
@@ -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() {
-      if (this.data.content?.list) {
+    findedListItem() {
+      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>