[WIP] Фикс формы услуг на форме создания записи

src/pages/newCalendar/components/ServicesModal.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
   .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
-    .flex.flex-col.gap-y-4
+    .basic.flex.flex-col.gap-y-4
       base-input.search(
         placeholder="Поиск",
         :width="422",
-        iconLeft
+        iconLeft,
         size="M"
       )
         template(v-slot:iconLeft)
@@ -17,150 +17,42 @@
           width="100px",
           type="grey"
         ) {{item.name}}
+      .tags-wrapper.flex(v-if="selectedServices.length")
+        .tag.flex.gap-x-2.rounded.items-center.pl-4.pr-1.py-2(v-for="(item, index) in selectedServices", :style="{background: item?.color}")
+          span {{item?.title}}
+          q-icon.cursor-pointer(@click="removeTag(index)", name="app:cancel-mini", size="24px")
       template(v-for="item in baseServices")
         .serice-wrapper.flex.flex-col(v-if="item.check")
-          .service.flex.items-center(v-for="serve in item.data")
-            q-checkbox(v-model="serve.checked")
+          .service.flex.items-center.gap-x-1.5px(v-for="service in item.data")
+            q-checkbox.checkbox(checked-icon="app:checkbox-on", v-model="selectedServices" :val="service" size="34px")
             .info-block.flex.justify-between.w-full
               .flex.flex-col.gap-y-1
-                .text-m {{serve.title}}
+                .text-m {{service.title}}
                 .grey-color.text-smm {{item.name}}
               .flex.flex-col.gap-y-1
-                .text-m.font-bold {{serve.price}}
-                .grey-color.text-smm {{serve.time}}
+                .text-m.font-bold {{service.price}}
+                .grey-color.text-smm {{service.time}}
     .footer.flex.gap-2
       base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
-      base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
+      base-button(width="132px", label="Сохранить", @click="saveServices(selectedServices)", :disabled="!selectedServices.length")
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import { services } from "@/pages/newCalendar/utils/calendarConfig.js";
 
 export default {
   name: "SevicesModal",
   components: { BaseInput, BaseButton },
   props: {
     closeServices: Function,
+    saveServices: Function,
   },
   data() {
     return {
-      baseServices: [
-        {
-          name: "Терапия",
-          check: true,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "3 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "5 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "50 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "3 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "5 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Пломбирование кариеса",
-              price: "50 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-        {
-          name: "Хирургия",
-          check: false,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-        {
-          name: "Ортопедия  ",
-          check: false,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-        {
-          name: "Ортодонтия",
-          check: false,
-          data: [
-            {
-              title: "Пломбирование кариеса",
-              price: "2 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-            {
-              title: "Консультация стоматолога",
-              price: "1 350 ₽",
-              time: "1 ч. 30 мин.",
-              checked: false,
-            },
-          ],
-        },
-      ],
+      selectedServices: [],
+      baseServices: services,
     };
   },
   methods: {
@@ -170,6 +62,9 @@ export default {
         if (e.name === name) e.check = true;
       });
     },
+    removeTag(index) {
+      this.selectedServices.splice(index, 1);
+    },
   },
 };
 </script>
@@ -178,12 +73,24 @@ export default {
 .wrapper
   width: 422px
 
+.basic
+  height: 563px
+
 .search :deep(path)
   fill: var(--font-grey-color)
 
 .search :deep(.q-field__prepend)
   padding-right: 4px
 
+.tags-wrapper
+  row-gap: 8px
+  flex-wrap: wrap !important
+  column-gap: 8px
+
+.tag
+  width: fit-content
+  height: 32px
+
 .base-service
   border-radius: 4px
   border: 1px solid var(--gray-secondary)
@@ -218,4 +125,14 @@ export default {
 
 .grey-color
   color: var(--font-grey-color)
+
+.checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1.5px solid var(--font-grey-color)
+
+.checkbox :deep(.q-icon)
+  font-size: 24px
+
+.checkbox :deep(rect)
+  fill: var(--btn-blue-color)
 </style>

src/pages/newCalendar/components/del_RecordCreationForm copy.vue

@@ -20,7 +20,7 @@
               v-else,
               v-for="service in services",
               :style="{background: service.color}"
-            ) {{service.name}}
+            ) {{service.title}}
             .gradient.flex.absolute(
               :style="{background: `linear-gradient(270deg, ${otherColor} 0%, rgba(247, 217, 255, 0) 100%)`}"
             )
@@ -29,7 +29,7 @@
         q-btn.change.flex.w-7.h-9.rounded-md(@click="isShowServices = true", dense, padding="4px 4px")
           q-icon.icon(name="app:folder", size="20px")
         base-modal(v-model="isShowServices", title="Услуги", modal-padding)
-          services-modal(:close-services="closeServices")
+          services-modal(:close-services="closeServices", :save-services="saveServices")
     base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex
@@ -96,15 +96,15 @@ export default {
       patientData: patientData,
       currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
       services: [
-        { id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
-        { id: 1, name: "Осмотр", price: 1300, color: "#FFF0CA" },
+        { id: 0, title: "Чистка зубов", price: 500, color: "#D8E3FF" },
+        { id: 1, title: "Осмотр", price: 1300, color: "#FFF0CA" },
         {
           id: 2,
-          name: "Лечение среднего кариеса",
+          title: "Лечение среднего кариеса",
           price: 500,
           color: "#F7D9FF",
         },
-        { id: 3, name: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
+        { id: 3, title: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
       ],
       forms: [
         {
@@ -191,6 +191,10 @@ export default {
     closeServices() {
       this.isShowServices = false;
     },
+    saveServices(selectedServices) {
+      this.isShowServices = false;
+      selectedServices.forEach((e) => this.services.push(e));
+    },
   },
   mounted() {
     this.addShadow();