[WIP] Разделил компоненты

src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue

@@ -1,21 +1,4 @@
 <template lang="pug">
-  .protocol.flex.justify-between.p-6(v-for="elem in list")
-    .flex.font-bold.text-6xl {{elem.label}}
-    .flex.gap-x-4
-      .button
-        q-btn(
-          icon="print",
-          size="20px",
-          :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
-          padding="0"
-        )
-      .button
-        q-btn(
-          icon="app:basket", 
-          size="20px",
-          :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
-          padding="0"
-        )
   medical-form-wrapper(
     v-for="(item, index) in list[0].data",
     :key="item.id"
@@ -34,12 +17,7 @@
           base-input.px-3(v-if="item.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
         .filter.flex.flex-col.gap-y-4(v-if="item.change || fillInspection")
           .flex.gap-x-2
-            base-input(
+            base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
-              placeholder="Поиск",
-              outlined,
-              :width="232",
-              iconLeft
-            )
               q-icon(
                 name="app:icon-search",
                 size="20px",
@@ -58,9 +36,7 @@
                 padding="0"
               )
           .field.flex.flex-col.overflow-y-scroll(v-if="item.complaints")
-            .checkbox.flex.flex-col(
+            .checkbox.flex.flex-col(v-for="complaint in textSorting(item.complaints)")
-              v-for="complaint in textSorting(item.complaints)",
-            )
               .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
               .line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array")
                 q-checkbox(
@@ -71,13 +47,6 @@
                  
                 )
                 .name.flex.items-center.font-medium.text-smm {{ name?.label }}
-  .protocol.flex.justify-between.p-6(v-if="fillInspection")
-    .flex.h-fit.w-fit.gap-2
-      base-button.text-base.font-semibold(outlined, :size="40") Отменить
-      base-button.text-base.font-semibold(:size="40") Сохранить
-    .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
-      .flex.font-semibold.text-7xl 0%
-      .flex.font-medium.text-smm.w-20 заполнение осмотра
 </template>
 
 <script>
@@ -154,12 +123,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.protocol
-  background: var(--default-white)
-  width: 100%
-  height: 80px
-  border-radius: 4px
-
 .protocol-body
   background: var(--default-white)
   border-radius: 4px

src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue

@@ -5,6 +5,23 @@
       :style="{color: 'var(--font-grey-color)'}"
     ) Выберите осмотр
     .flex.flex-col.gap-y-2(v-else)
+      .protocol.flex.justify-between.p-6(v-for="elem in list")
+        .flex.font-bold.text-6xl {{elem.label}}
+        .flex.gap-x-4
+          .button
+            q-btn(
+              icon="print",
+              size="20px",
+              :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+              padding="0"
+            )
+          .button
+            q-btn(
+              icon="app:basket", 
+              size="20px",
+              :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+              padding="0"
+            )
       medical-form-tag-wrapper(
         v-if="inspection || fillInspection",
         :list="list",
@@ -13,15 +30,24 @@
         :open-card="openCard",
         :close-card="closeCard"
       )
+      .protocol.flex.justify-between.p-6(v-if="fillInspection")
+        .flex.h-fit.w-fit.gap-2
+          base-button.text-base.font-semibold(outlined, :size="40") Отменить
+          base-button.text-base.font-semibold(:size="40") Сохранить
+        .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
+          .flex.font-semibold.text-7xl 0%
+          .flex.font-medium.text-smm.w-20 заполнение осмотра
 </template>
 
 <script>
 import MedicalFormTagWrapper from "@/pages/newMedicalCard/components/MedicalFormTagWrapper.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "MedicalProtocolsInspection",
   components: {
     MedicalFormTagWrapper,
+    BaseButton,
   },
   props: { inspection: Boolean, fillInspection: Boolean },
   data() {
@@ -88,4 +114,20 @@ export default {
   overflow-y: auto
   &::-webkit-scrollbar
     width: 0
+
+.protocol
+  background: var(--default-white)
+  width: 100%
+  height: 80px
+  border-radius: 4px
+
+.button
+  display: flex
+  align-items: center
+  width: 40px
+  height: 40px
+  justify-content: center
+  cursor: pointer
+  border-radius: 4px
+  background: var(--bg-light-grey)
 </style>