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

src/components/base/BaseButton.vue

@@ -46,6 +46,11 @@ export default {
           height: "48px",
           "min-height": "48px",
         };
+      if (this.size === "S")
+        return {
+          height: "32px",
+          "min-height": "32px",
+        };
       return {
         height: "40px",
         "min-height": "40px",
@@ -116,6 +121,24 @@ export default {
     background-color: var(--btn-mini-color-active)
     color: var(--bg-status-green)
 
+.grey
+  color: var(--font-dark-blue-color)
+  border: 1.5px solid var(--gray-secondary)
+  background-color: var(--gray-thirdly)
+  font-weight: 500
+  font-size: 14px
+  line-height: 19px
+  &:hover
+    background-color: var(--btn-blue-sec-color-hover)
+  &:active
+    background-color: var(--btn-blue-sec-color-active)
+  &:disabled, &[disabled]
+    opacity: 1 !important
+    color: var(--btn-blue-sec-color-disabled)
+    background-color: white
+    border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
+
+
 .q-btn :deep(.q-focus-helper)
   display: none
 .q-btn :deep(.q-ripple)

src/components/base/BaseTimeModal.vue

@@ -2,13 +2,13 @@
   .flex.flex-col.gap-y-6.pt-6.dark-blue
     .table-time.flex.p-4
       .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
-        .timeline.flex.text-smm.font-medium {{time}}
+        .timeline.flex.text-smm.font-medium {{time.hour}}
         .side.flex.p-1.h-9
-          q-btn.left-btn(:class="{'default-btn': !checkStartTime(time)}", size="9px", padding="0 8px")
+          q-btn.left-btn(:class="{'default-btn': !checkStartTime(time.hour)}", size="9px", padding="0 8px")
-            q-icon.icon(v-if="checkStartTime(time)", name="app:lock", size="20px")
+            q-icon.icon(v-if="checkStartTime(time.hour)", name="app:lock", size="20px")
             q-icon.icon-grey(v-else, name="app:plus", size="20px")
-          q-btn.right-btn(:class="{'default-btn': !checkEndTime(time)}", size="4px", padding="0 4px")
+          q-btn.right-btn(:class="{'default-btn': !checkEndTime(time.hour)}", size="4px", padding="0 4px")
-            q-icon.icon(v-if="checkEndTime(time)", name="app:lock", size="20px")
+            q-icon.icon(v-if="checkEndTime(time.hour  )", name="app:lock", size="20px")
             q-icon.icon-grey(v-else, name="app:plus", size="20px")
     .flex.justify-between.items-center
       .flex.gap-2
@@ -46,7 +46,7 @@ export default {
     timeCoil() {
       let time = [];
       for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
-        time.push(`${i}:00`);
+        time.push({ hour: `${i}:00`, check: false });
       }
       return time;
     },

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -26,8 +26,10 @@
             )
           .other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
         .price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
-        q-btn.change.flex.w-7.h-9.rounded-md(dense, padding="4px 4px")
+        q-btn.change.flex.w-7.h-9.rounded-md(@click="isShowServices = true", dense, padding="4px 4px")
-          img(:src="folder")
+          q-icon.icon(name="app:folder", size="20px")
+        base-modal(v-model="isShowServices", title="Услуги", modal-padding)
+          services-modal(:close-services="closeServices")
     base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex
@@ -68,6 +70,8 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import ServicesModal from "./ServicesModal.vue";
 
 export default {
   name: "RecordCreationForm",
@@ -80,6 +84,8 @@ export default {
     BaseCalendar,
     HeaderRecordForm,
     BaseButton,
+    BaseModal,
+    ServicesModal,
   },
   props: { isShowForm: Boolean, closeForm: Function },
   mixins: [v_model],
@@ -126,6 +132,7 @@ export default {
       networksSettings: column.find((el) => el.name === "networks")?.settings,
       otherColor: null,
       otherServices: [],
+      isShowServices: false,
     };
   },
   computed: {
@@ -181,6 +188,9 @@ export default {
       });
       this.otherColor = this.otherServices[0]?.style.background;
     },
+    closeServices() {
+      this.isShowServices = false;
+    },
   },
   mounted() {
     this.addShadow();
@@ -244,4 +254,7 @@ export default {
   border-top: 1px solid var(--border-light-grey-color)
   margin: 40px -32px 0px
   padding: 16px 32px 0px 32px
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
 </style>

src/pages/newCalendar/components/ServicesModal.vue

@@ -0,0 +1,221 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
+    .flex.flex-col.gap-y-4
+      base-input.search(
+        placeholder="Поиск",
+        :width="422",
+        iconLeft
+        size="M"
+      )
+        template(v-slot:iconLeft)
+          q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+      .flex.gap-x-2
+        base-button(
+          @click="choiceService(item.name)",
+          v-for="item in baseServices",
+          size="S",
+          width="100px",
+          type="grey"
+        ) {{item.name}}
+      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")
+            .info-block.flex.justify-between.w-full
+              .flex.flex-col.gap-y-1
+                .text-m {{serve.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}}
+    .footer.flex.gap-2
+      base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
+      base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+
+export default {
+  name: "SevicesModal",
+  components: { BaseInput, BaseButton },
+  props: {
+    closeServices: 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,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    choiceService(name) {
+      this.baseServices.forEach((e) => {
+        e.check = false;
+        if (e.name === name) e.check = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 422px
+
+.search :deep(path)
+  fill: var(--font-grey-color)
+
+.search :deep(.q-field__prepend)
+  padding-right: 4px
+
+.base-service
+  border-radius: 4px
+  border: 1px solid var(--gray-secondary)
+  background: var(--gray-thirdly)
+
+.serice-wrapper
+  overflow: auto
+  max-height: 546px
+  margin-right: -18px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 16px
+
+.service
+  height: 67px
+  margin-right: 14px
+  &:last-child .info-block
+    border-bottom: none
+
+.info-block
+  padding: 11px 0px
+  border-bottom: 1px solid var(--gray-secondary)
+
+.footer
+  border-top: 1px solid var(--gray-secondary)
+  margin: 0px -32px -12px
+  padding: 16px 32px 0px 32px
+
+.dark-blue
+  color: var(--font-dark-blue-color)
+
+.grey-color
+  color: var(--font-grey-color)
+</style>