[WIP] Добавил меню с чекбоксами на форме создания осмотра, правка стилей

src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue

@@ -2,17 +2,19 @@
   .protocol.flex.justify-between.p-6(v-for="elem in list")
     .flex.font-bold.text-6xl {{elem.label}}
     .flex.gap-x-4
-      .icon.flex.rounded.w-10.h-10.items-center.justify-center
+      .button
-        q-icon(
+        q-btn(
-          name="print",
+          icon="print",
           size="20px",
-          style="color: var(--font-grey-color)"
+          :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+          padding="0"
         )
-      .icon.flex.rounded.w-10.h-10.items-center.justify-center
+      .button
-        q-icon(
+        q-btn(
-          name="app:basket", 
+          icon="app:basket", 
           size="20px",
-          style="color: var(--font-grey-color)"
+          :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+          padding="0"
         )
   medical-form-wrapper(
     v-for="(item, index) in list[0].data",
@@ -59,18 +61,19 @@
                 :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
-          .field.flex.flex-col.overflow-y-scroll
+          .field.flex.flex-col.overflow-y-scroll(v-if="item.complaints")
-            .checkbox.flex.items-center.gap-x-4(
+            .checkbox.flex.flex-col(
-              v-for="complaint in item.complaints",
+              v-for="complaint in textSorting(item.complaints)",
-              :key="complaint.id"
             )
-              q-checkbox(
+              .letter.flex.items-center.font-bold {{ complaint.sym }}
-                v-model="selected",
+              .line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array")
-                :val="complaint",
+                q-checkbox(
-                :style="{border: 'none', width: '15px'}",
+                  v-model="selected",
-                size="32px"
+                  :val="name?.label",
-              )
+                  :style="{border: 'none', width: '16px'}",
-              .name.flex.items-center.font-medium.text-xm {{complaint.label}}
+                  size="32px"
+                )
+                .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") Отменить
@@ -98,8 +101,58 @@ export default {
   data() {
     return {
       selected: [],
+      abc: [
+        "А",
+        "Б",
+        "В",
+        "Г",
+        "Д",
+        "Е",
+        "Ё",
+        "Ж",
+        "З",
+        "И",
+        "Й",
+        "К",
+        "Л",
+        "М",
+        "Н",
+        "О",
+        "П",
+        "Р",
+        "С",
+        "Т",
+        "У",
+        "Ф",
+        "Х",
+        "Ц",
+        "Ч",
+        "Ш",
+        "Щ",
+        "Ы",
+        "Э",
+        "Ю",
+        "Я",
+      ],
     };
   },
+  methods: {
+    textSorting(arr) {
+      let srt = [];
+      this.abc.forEach((letter) => {
+        arr.forEach((str) => {
+          let finded = srt.find((obj) => obj.sym === letter);
+          if (str.label[0] === letter) {
+            if (!finded) {
+              srt.push({ sym: letter, array: [{ label: str.label }] });
+            } else if (finded.sym === letter)
+              finded.array.push({ label: str.label });
+          }
+        });
+      });
+      return srt;
+    },
+  },
 };
 </script>
 
@@ -152,18 +205,26 @@ export default {
 
 .field
   margin-right: -10px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 12px
   &::-webkit-scrollbar
     width: 4px
 
 .checkbox
-  border-bottom: 1px solid var(--bg-light-grey)
   width: 328px
 
+.line
+  margin-left: -8px
+  border-bottom: 1px solid var(--bg-light-grey)
+  min-height: 36px
+
+.letter
+  height: 34px
+  color: var(--font-grey-color)
+
 .name
-  min-height: 40px
-  padding-top: 4px
-  padding-bottom: 4px
   width: 268px
+  color: var(--font-dark-blue-color)
 
 .q-checkbox :deep(.q-checkbox__bg)
   border-radius: 4px

src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
   .protocols-wrapper.h-full.flex.flex-col.gap-y-2
     .flex.font-bold.text-6xl.items-center.h-full.justify-center(
-      v-if="!inspection"
+      v-if="!inspection && !fillInspection"
       :style="{color: 'var(--font-grey-color)'}"
     ) Выберите осмотр
     .flex.flex-col.gap-y-2(v-else)
       medical-form-tag-wrapper(
-        v-if="inspection",
+        v-if="inspection || fillInspection",
         :list="list",
         :inspection="inspection",
         :fill-inspection="fillInspection"
@@ -44,12 +44,14 @@ export default {
                 { id: 6, label: "Удаление зуба" },
               ],
               complaints: [
-                { id: 1, label: "Боль при приеме сладкой пищи" },
+                { id: 1, label: "Ранее зубы лечили в ЛПУ" },
                 { id: 2, label: "Жжение языка" },
                 { id: 3, label: "Кровоточивость десен" },
                 { id: 4, label: "Лечение у ортодонта не проводилось" },
-                { id: 5, label: "Ранее зубы лечили в ЛПУ" },
+                { id: 5, label: "Уныние зуба" },
-                { id: 6, label: "Удаление зуба" },
+                { id: 6, label: "Боль при приеме сладкой пищи" },
+                { id: 7, label: "Удаление зуба" },
+                { id: 2, label: "Жжуть языка" },
               ],
             },
             {

src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue

@@ -18,10 +18,12 @@ export default {
   },
   methods: {
     openInspection() {
-      this.inspection = !this.inspection;
+      this.inspection = true;
+      this.fillInspection = false;
     },
     createInspection() {
-      this.fillInspection = !this.fillInspection;
+      this.fillInspection = true;
+      this.inspection = false;
     },
   },
 };