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>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -568,17 +568,64 @@ export const protocolForms = [
     component: "IndexForm",
     key: "bite",
     state: "bite",
+    content: {
+      reference: `Дистальный прикус – верхняя челюсть выдается вперед. Верхние резцы
+        могут быть наклонены вперед, к губам, или назад, внутрь ротовой полости.
+        Часто между передними зубами верхней и нижней челюстей отсутствует
+        контакт, образуется сагиттальная щель и дизокклюзия (отсутствие смыкания).
+        Такой вид прикуса зубов визуально проявляется в скошенном профиле и верхней
+        губе, нависающей над нижней; может формироваться «второй подбородок».`,
+      whitespace: false,
+      list: [
+        {
+          label: "Дистальный прикус",
+          value: "distal bite",
+        },
+        {
+          label: "Мезиальный прикус",
+          value: "mesial bite",
+        },
+        {
+          label: "Глубокий прикус",
+          value: "deep bite",
+        },
+        {
+          label: "Открытый прикус",
+          value: "open bite",
+        },
+        {
+          label: "Перекрестный прикус",
+          value: "cross bite",
+        },
+      ],
+    },
   },
   {
     title: "Индекс гигиены",
     component: "IndexForm",
     key: "hygieneIndex",
     state: "hygieneIndex",
+    content: {
+      reference: `0 — отсутствие зубного налета, камня;
+      1  — налет покрывает треть поверхности зуба, зубной камень локализуется над деснами;
+      2 — налет поражает до 2/3 зуба, отмечается поддесневой камень;
+      3 — налет покрывает более 2/3 поверхности, поддесневой камень поражает шейки зубов.`,
+      whitespace: true,
+      list: [0, 1, 2, 3],
+    },
   },
   {
     title: "Индекс КПУ",
     component: "IndexForm",
     key: "KPUIndex",
     state: "KPUIndex",
+    content: {
+      reference: `Индекс КПУ в зависимости от стоматологических проблем:
+        от 0 до 2 – слабая интенсивность;
+        от 3 до 5 – средняя;
+        от 6 до 10 – высокая.`,
+      whitespace: true,
+    },
+    rules: [(val) => val <= 10 && val >= 0],
   },
 ];