[WIP] Добавил отправку расписания с шаблоном графиков, поправил стили

src/components/base/BaseInput.vue

@@ -91,4 +91,5 @@ export default {
   border-radius: 50%
   z-index: 5
   opacity: 0
+  cursor: pointer
 </style>

src/components/base/BaseSelect.vue

@@ -5,11 +5,12 @@
         v-model="value",
         :options="items",
         :disable="disable",
-        bg-color="var(--bg-disable-grey-color)"
+        :behavior="behavior",
+        bg-color="var(--bg-disable-grey-color)",
         outlined,
         dense,
         emit-value,
-        map-options,
+        map-options
       )
         template(v-slot:selected)
           span {{ textSelect }}
@@ -29,6 +30,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    behavior: {
+      type: String,
+      default: "menu",
+    },
     disable: Boolean,
     label: String,
   },

src/pages/schedule/TheSchedule.vue

@@ -96,7 +96,7 @@ export default {
           text: "'В'",
         },
       ],
-      template: { item: { id: null, label: null } },
+      template: { item: {} },
       startMonth: moment().startOf("month"),
       showTime: false,
       schedulesDate: {},
@@ -147,6 +147,7 @@ export default {
     },
     filterScheduleEmployee() {
       let serialized = [];
+      this.template.item = {};
       this.scheduleList.forEach((e) => {
         let foundedElem = serialized.find((elem) => elem.id === e.employee.id);
         if (!foundedElem) {
@@ -200,6 +201,8 @@ export default {
         end_time: this.times.end_time,
         status: this.buttons.find((e) => e.active)?.work,
       };
+      if (this.template.item.label)
+        data.kind_template = this.template.item.name;
       if (this.insideSchedules?.length > 0) {
         this.postUpdateSchedule();
         if (this.outsideSchedules) {

src/pages/schedule/components/ScheduleBar.vue

@@ -2,14 +2,14 @@
   .wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
     .flex.w-full.justify-around.gap-x-4
       .time-wrapper.flex.justify-between.p-7
-        base-input(
+        base-input.items-center(
           type="time",
           v-model="times.start_time",
           label="Начало",
           outlined
         )
         .flex.items-center.mt-6 —
-        base-input(
+        base-input.items-center(
           type="time",
           v-model="times.end_time",
           label="Конец",
@@ -31,18 +31,11 @@
             style="width: 200px"
           )
       .graph-template.flex.flex-col.items-center.gap-y-4
-        base-select(
+        base-select.w-52(
           :items="templateList",
           v-model="template.item",
-          placeholder="Шаблоны графиков"
-        )
-        base-input.w-28(
-          v-if="template.item.id === 1"
-          mask="#/#",
-          placeholder="0/0",
-          label="Введите график",
-          v-model="template.item.label",
-          outlined
+          placeholder="Выберите шаблон"
+          label="Шаблоны графиков"
         )
     .flex.justify-center.gap-x-6.h-10
       q-btn(
@@ -83,10 +76,9 @@ export default {
   data() {
     return {
       templateList: [
-        { label: "Индивидуальный", id: 1 },
-        { label: "2/2", id: 2 },
-        { label: "3/2", id: 3 },
-        { label: "5/2", id: 4 },
+        { label: "2/2", name: "2/2", symbol: "'2/2'" },
+        { label: "Дежурство", name: "DUTY", symbol: "'Д'" },
+        { label: "Смена", name: "FirstEvenSecondOdd", symbol: "'С'" },
       ],
     };
   },

src/pages/schedule/components/ScheduleTable.vue

@@ -70,7 +70,9 @@ export default {
       this.setActiveButton();
       return {
         "--bg-color-status": this.activeButton?.color,
-        "--text-status": this.activeButton?.text,
+        "--text-status": !this.template.item?.label
+          ? this.activeButton?.text
+          : this.template.item.symbol,
       };
     },
   },
@@ -154,7 +156,8 @@ export default {
 
       if (resStart || resMiddle || resEnd)
         return {
-          status: !!this.activeButton,
+          "set-template": !!this.template.item?.label,
+          status: !!this.activeButton && !this.template.item,
           "set-date": !this.activeButton,
         };
     },
@@ -209,13 +212,4 @@ export default {
   border-radius: 4px
   width: 400px
   height: 500px
-
-.status
-  background-color: var(--bg-color-status) !important
-
-.status::after
-  content: var(--text-status)
-
-.set-date
-  background-color: var(--btn-blue-color-4) !important
 </style>

src/pages/schedule/components/ScheduleTableBody.vue

@@ -116,4 +116,7 @@ export default {
 
 .status::after
   content: var(--text-status)
+
+.set-template
+  background-color: var(--bg-event-orange-color) !important
 </style>

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -99,12 +99,15 @@ export default {
   &:last-child
     border-right: none
 
-.set-date
-  background-color: var(--btn-blue-color-4) !important
-
 .status
   background-color: var(--bg-color-status) !important
 
 .status::after
   content: var(--text-status)
+
+.set-date
+  background-color: var(--btn-blue-color-4) !important
+
+.set-template
+  background-color: var(--bg-event-orange-color) !important
 </style>