[WIP] Добавил модальное окно с отображением и выбором категорий льгот на форме контактов

src/components/base/BaseCategorySelection.vue

@@ -0,0 +1,111 @@
+<template lang="pug">
+  .selection-wrapper.flex
+    .left-side.flex.flex-col.gap-y-4
+      .flex.font-bold.text-xl Категории
+      base-input(placeholder="Поиск", outlined, :width="300")
+        .flex.items-center.cursor-pointer
+          q-icon(
+            name="app:icon-search",
+            size="18px",
+            style="color: var(--font-dark-blue-color)"
+          )
+      .flex.flex-col(:style="{height: '457px'}")
+        .flex.items-center.h-10.gap-x-1(v-for="benefit in benefitData", :key="benefit.id")
+          q-checkbox(
+            v-model="selected"
+            :val="benefit",
+            :style="{border: 'none', sidth: '36px'}",
+            size="32px"
+          )
+          .name.flex.h-10.items-center {{benefit.name}}
+      .buttons-group.flex.py-4.px-8.justify-center
+        base-button.text-base.font-semibold(outlined :size="40" @click="closeModalCategories") Отменить
+        base-button.text-base.font-semibold(:size="40") Сохранить
+    .right-side.flex.px-14.font-bold.relative
+      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
+      .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
+        .flex.text-6xl {{selected[0]?.name}}
+        .flex.text-xm.flex-col.gap-y-3 Критерии:
+          .flex.flex-col.gap-y-2
+            .flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id")
+              span {{"- " + item}}
+        .flex.text-xm.flex-col.gap-y-3 Документы для подтверждения: 
+          .flex.flex-col.gap-y-2
+            .flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id")
+              span {{"- " + item}}
+        .flex.text-xm.flex-col.gap-y-3 Льготы:
+          .flex.flex-col.gap-y-2
+            .flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id")
+              span {{"- " + item}}
+      .flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
+        v-else,
+        :style="{color: 'var(--font-grey-color)'}"
+       ) Выберите категорию
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+export default {
+  name: "BaseCategorySelection",
+  components: { BaseInput, BaseButton },
+  props: {
+    benefitData: Array,
+    shiftSelected: Function,
+    closeModalCategories: Function,
+  },
+  data() {
+    return {
+      selected: [],
+    };
+  },
+  computed: {
+    choiceCriteria() {
+      return this.selected[0]?.criteria.split(",");
+    },
+    choiceDocumentation() {
+      return this.selected[0]?.documentation.split(",");
+    },
+    choicePrivileges() {
+      return this.selected[0]?.privileges.split(",");
+    },
+  },
+  watch: {
+    selected: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (this.selected.length >= 2) this.selected.shift();
+      },
+    },
+  },
+};
+</script>
+<style lang="sass" scoped>
+.selection-wrapper
+  width: 895px
+  height: 660px
+
+.left-side
+  width: 364px
+  padding: 32px 28px 0px
+
+.name
+  border-bottom: 1px solid var(--bg-light-grey)
+  width: 268px
+
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 50%
+  border: 1.5px solid var(--font-grey-color)
+
+.buttons-group
+  border-top: 1px solid #D3D4D0
+  margin-left: -28px
+  margin-right: -28px
+  column-gap: 7px
+
+.right-side
+  background: var(--bg-light-grey)
+  width: 531px
+  height: 100%
+</style>

src/components/base/BaseModal.vue

@@ -5,9 +5,13 @@
     @hide="onHide",
     ref="dialog"
     )
-    .base-content(:class="{'draggable': draggable}", ref="contentRef", :style="{...contentStyles, height}")
+    .base-content(
+      :class="{'draggable': draggable, 'base-content-default': !defaultPadding}",
+      ref="contentRef",
+      :style="{...contentStyles, height}"
+    )
       q-resize-observer(@resize="onResize")
-      .base-header(draggable, :class="{'cursor-move': draggable}", ref="headerRef")
+      .base-header(v-if="!hideHeader" draggable, :class="{'cursor-move': draggable}", ref="headerRef")
         .header-title.text {{ title }}
         .icon-cancel.text-sm(@click="value = false", v-if="!showCloseIcon")
       slot
@@ -25,6 +29,8 @@ export default {
     showCloseIcon: Boolean,
     draggable: Boolean,
     hideOverlay: Boolean,
+    defaultPadding: Boolean,
+    hideHeader: Boolean,
     height: {
       type: String,
     },
@@ -126,9 +132,11 @@ export default {
   justify-content: center
   align-items: center
 
+.base-content-default
+  padding: 32px 40px
+
 .base-content
   width: auto
-  padding: 32px 40px
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   border-radius: 4px

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -37,28 +37,19 @@
                 :confirm-upload="confirmChangePhoto" 
               )
           .flex.w-full.h-10.relative(v-else-if="field.type === 'select'")
+            .flex(@click="showModalCategories = true")
               q-field.items-center.cursor-pointer(
                 standout,
                 :disable="!isEdit",
                 :outlined="isEdit"
-            )
+              ) {{basic[insurance.insuranceKey][field.key]}}
-              span(@click="openModalCategories") {{basic[insurance.insuranceKey][field.key]}}
             base-modal(
+              default-padding,
+              hide-header,
               v-model="showModalCategories",
               title="Категории"
             )
-              .flex
+              base-category-selection(:benefit-data="benefitData" :close-modal-categories="closeModalCategories")
-                .flex.flex-col.gap-y-4
-                  base-input(outlined, :width="300")
-                  .flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
-                    q-checkbox(
-                      v-model="selected"
-                      :val="benefit.id",
-                      :style="{border: 'none', sidth: '36px'}",
-                      size="32px"
-                    )
-                    .flex {{benefit.name}}
-                .flex
             .flex.font-medium.text-smm.absolute.top-10(
               v-if="basic?.benefit[insurance?.discount]",
               :style="{color: 'var(--font-grey-color)'}"
@@ -90,6 +81,7 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import { getRequestChangeData } from "@/shared/utils/wrapperRequestChangeData";
+import BaseCategorySelection from "@/components/base/BaseCategorySelection.vue";
 
 export default {
   name: "InsuranceForm",
@@ -99,6 +91,7 @@ export default {
     BaseInput,
     BaseModal,
     BaseUploadPhoto,
+    BaseCategorySelection,
   },
   data() {
     return {
@@ -109,7 +102,6 @@ export default {
       showModal: false,
       showModalCategories: false,
       photoId: "",
-      selected: [],
     };
   },
   computed: {
@@ -131,8 +123,8 @@ export default {
       this.photoId = id;
       this.showModal = true;
     },
-    openModalCategories() {
+    closeModalCategories() {
-      this.showModalCategories = true;
+      this.showModalCategories = false;
     },
     checkChangeInput() {
       this.isCheckChange =
@@ -296,10 +288,6 @@ export default {
   background: rgba(0, 0, 0, 0.05)
   color: var(--font-dark-blue-color)
 
-.q-checkbox :deep(.q-checkbox__bg)
-  border-radius: 50%
-  border: 1.5px solid var(--font-grey-color)
-
 .select
   width: 324px
 

tailwind.config.js

@@ -17,6 +17,7 @@ module.exports = {
         smm: ["14px", { lineHeight: "19px" }],
         base: ["16px", { lineHeight: "19px" }],
         m: ["16px", { lineHeight: "21.6px" }],
+        xm: ["16px", { lineHeight: "22px" }],
         lg: ["18px", { lineHeight: "21px" }],
         lgx: ["22px", { lineHeight: "25.83px" }],
         xl: ["20px", { lineHeight: "23px" }],
@@ -25,6 +26,7 @@ module.exports = {
         "3xl": ["60px", { lineHeight: "70px" }],
         "4xl": ["44px", { lineHeight: "48px" }],
         "5xl": ["28px", { lineHeight: "38px" }],
+        "6xl": ["24px", { lineHeight: "32px" }],
       },
       gap: {
         "6px": "6px",