WIP Сделала обертку индексных форм

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

@@ -1,8 +1,32 @@
 <template lang="pug">
   medical-form-wrapper(
     :title="data.title",
-    :is-edit="false",
+    :is-edit="isEdit",
+    :cancel="() => changeEdit(false)",
+    :open-edit="() => changeEdit(true)",
   )
+    .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")
+            q-radio(
+              v-model="modelValue",
+              dense,
+              :val="item?.value ? item.value : item",
+              checked-icon="check_box",
+              unchecked-icon="check_box_outline_blank"
+            )
+              span.text-sm.line-height.blue-color {{ item?.label ? item.label : item }}
+      base-input(
+        v-else,
+        v-model="modelValue",
+        outlined,
+        type="number"
+        :rule="data?.rules"
+      )
+      .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}}
 </template>
 
 <script>
@@ -17,9 +41,45 @@ export default {
     data: Object,
   },
   data() {
-    return {};
+    return {
+      isEdit: false,
+      modelValue: "",
+    };
+  },
+  methods: {
+    changeEdit(value) {
+      this.isEdit = value;
+    },
+    changeModelValue(value, key) {
+      if (value) this.modelValue = key;
+    },
   },
 };
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.index-wrapper
+  display: grid
+  grid-template-columns: repeat(2, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  column-gap: 80px
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+    row-gap: 20px
+
+.border
+  border: 1px solid var(--border-light-grey-color)
+
+.line-height
+  line-height: 135%
+
+.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
+</style>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -18,7 +18,7 @@
           q-icon(name="app:basket" size="20")
           span.text-smm.font-medium {{ titleDelete }}
       slot
-      .flex.h-fit.w-fit.gap-2(v-if="isEdit")
+      .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
         q-btn(
           color="primary",
           outline,
@@ -82,6 +82,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    buttonsPresence: {
+      type: Boolean,
+      default: true,
+    },
   },
 };
 </script>