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

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'")
-            q-field.items-center.cursor-pointer(
-              standout,
-              :disable="!isEdit",
-              :outlined="isEdit"
-            )
-              span(@click="openModalCategories") {{basic[insurance.insuranceKey][field.key]}}
+            .flex(@click="showModalCategories = true")
+              q-field.items-center.cursor-pointer(
+                standout,
+                :disable="!isEdit",
+                :outlined="isEdit"
+              ) {{basic[insurance.insuranceKey][field.key]}}
             base-modal(
+              default-padding,
+              hide-header,
               v-model="showModalCategories",
               title="Категории"
             )
-              .flex
-                .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
+              base-category-selection(:benefit-data="benefitData" :close-modal-categories="closeModalCategories")
             .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() {
-      this.showModalCategories = true;
+    closeModalCategories() {
+      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