[WIP] Правка модалки времени

src/components/base/BaseTimeModal.vue

@@ -4,10 +4,12 @@
       .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
         .timeline.flex.text-smm.font-medium {{time}}
         .side.flex.p-1.h-9
-          q-btn.plus-btn(size="9px", padding="0 8px")
+          q-btn.left-btn(:class="{'default-btn': !checkStartTime(time)}", size="9px", padding="0 8px")
-            q-icon.icon-grey(name="app:plus", size="20px")
+            q-icon.icon(v-if="checkStartTime(time)", name="app:lock", size="20px")
-          q-btn.lock-btn(size="4px", padding="0 4px")
+            q-icon.icon-grey(v-else, name="app:plus", size="20px")
-            q-icon.icon(name="app:lock", size="20px")
+          q-btn.right-btn(:class="{'default-btn': !checkEndTime(time)}", size="4px", padding="0 4px")
+            q-icon.icon(v-if="checkEndTime(time)", name="app:lock", size="20px")
+            q-icon.icon-grey(v-else, name="app:plus", size="20px")
     .flex.justify-between.items-center
       .flex.gap-2
         base-button(
@@ -29,7 +31,7 @@ import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseTimeModal",
-  props: { times: Object, closeModalTime: Function },
+  props: { times: Object, closeModalTime: Function, data: Array },
   components: { BaseButton },
   data() {
     return { select: false };
@@ -55,6 +57,17 @@ export default {
       let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
       return newTime;
     },
+    checkStartTime(time) {
+      return this.data.find((e) => e.start === time || e.end === time)
+        ? true
+        : false;
+    },
+    checkEndTime(time) {
+      let subtime = time.substr(0, 2) + ":30";
+      return this.data.find((e) => e.end === subtime || e.start === subtime)
+        ? true
+        : false;
+    },
   },
 };
 </script>
@@ -74,12 +87,15 @@ export default {
   border-left: 1px solid var(--font-dark-blue-color)
   margin-left: 16px
   margin-bottom: 24px
+  height: 36px
 
-.plus-btn
+.left-btn
+  width: 29px
   border-radius: 6px 1px 1px 6px
   border: 1px solid var(--gray-secondary)
 
-.lock-btn
+.right-btn
+  width: 29px
   border-radius: 1px 6px 6px 1px
   border: 1px solid var(--gray-secondary)
 
@@ -88,4 +104,7 @@ export default {
 
 .icon-grey :deep(path)
   fill: var(--font-grey-color)
+
+.default-btn
+  background: var(--gray-thirdly)
 </style>

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -40,7 +40,7 @@
           q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
             q-icon.icon(name="app:time", size="20px")
           base-modal(v-model="isShowTime", title="Время", modal-padding)
-            base-time-modal(:times="times", :close-modal-time="closeModalTime")
+            base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
       .flex.gap-x-1 
@@ -72,6 +72,16 @@ export default {
       currentDate: moment().clone(),
       isShowTime: false,
       times: { from: "8:30", to: "10:30" },
+      data: [
+        {
+          start: "8:00",
+          end: "8:30",
+        },
+        {
+          start: "11:30",
+          end: "12:00",
+        },
+      ],
     };
   },
   methods: {