Добавил employee на расписание и стили

src/pages/schedule/components/ScheduleBody.vue

@@ -4,7 +4,7 @@
       .flex.items-center(:style="{padding: '16px 102px'}")
         .text.font-bold Сотрудник
       .column-wrapper.flex
-        .schedule-column.flex.flex-col.items-center.justify-center.px-2(
+        .schedule-column.flex.flex-col.items-center.justify-center.w-11(
           v-for="day in result",
           :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
         )
@@ -14,15 +14,38 @@
           .text.flex.font-bold(
             :style="{opacity: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? '0.6' : '1'}"
             ) {{day.format("ddd")}}
-    .schedule-body.flex.w-full
+    .schedule-body.flex.w-full(v-if="this.scheduleList[0]?.id")
       .edit.flex.items-center.justify-center.h-9.w-9
         .flex.icon-edit
-      .name.flex.justify-center.items-center.cursor-pointer(v-if="schedule.employee.label", @click="openSelect")
-        span {{schedule.employee.label}}
-      .name.flex(v-if="!schedule.employee.label")
+      .name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect")
+        span {{trimOwnerName(this.scheduleList[0]?.employee.last_name, this.scheduleList[0]?.employee.first_name, this.scheduleList[0]?.employee.patronymic)}}
+      .flex(v-for="day in result")
+        .cell.flex.flex-col.items-center.justify-center.w-11(
+          v-for="item in scheduleList",
+          :style="{backgroundColor: day.format('YYYY-MM-DD') === item.date ? choiceColor(item.status) : ''}"
+        )
+          .flex {{day.format("YYYY-MM-DD") === item.date ? choiceWorks(item.status) : ''}}
+    .schedule-body.flex.w-full
+      .edit.flex.items-center.justify-center.h-9.w-9
+        .flex.items-center.gap-x-8
+          base-button(
+            confirm,
+            rounded,
+            outlined,
+            :size="20",
+            @click="saveEmployee",
+            v-if="currentEmployee.label"
+          )
+            .icon-ok.text-xsm(class="pt-[3px]")
+      .name.flex.justify-center.items-center.cursor-pointer(
+        v-if="currentEmployee.label",
+        @click="openSelect"
+      )
+        span {{currentEmployee.label}}
+      .name.flex(v-if="!currentEmployee.label")
         base-custom-select(
           :items="ownersList",
-          v-model="schedule.employee",
+          v-model="currentEmployee",
           placeholder="Добавить сотрудника",
           :style="{border: 'none'}"
         )
@@ -31,10 +54,11 @@
 <script>
 import * as moment from "moment";
 import BaseModal from "@/components/base/BaseModal.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 export default {
   name: "ScheduleBody",
-  components: { BaseModal, BaseCustomSelect },
+  components: { BaseModal, BaseButton, BaseCustomSelect },
   props: {
     employeeList: {
       type: Array,
@@ -42,6 +66,8 @@ export default {
         return [];
       },
     },
+    schedulesEmployee: Function,
+    scheduleList: Array,
   },
   data() {
     return {
@@ -50,12 +76,15 @@ export default {
       startMonth: moment("2022-12-01"),
       showSelect: false,
       employee: [],
-      schedule: {
-        employee: {
-          label: "",
-          id: null,
-        },
+      currentEmployee: {
+        label: "",
+        id: null,
       },
+      works: [
+        { work: "WORKS", color: "#55CD76", text: "Р" },
+        { work: "VACATION", color: "#D7D9FF", text: "О" },
+        { work: "DAY_OFF", color: "#9294A7", text: "В" },
+      ],
     };
   },
   computed: {
@@ -78,6 +107,17 @@ export default {
     },
   },
   methods: {
+    saveEmployee() {
+      this.schedulesEmployee(this.currentEmployee.id);
+      this.currentEmployee.label = "";
+      this.currentEmployee.id = null;
+    },
+    choiceWorks(work) {
+      return this.works.find((e) => e.work === work).text;
+    },
+    choiceColor(work) {
+      return this.works.find((e) => e.work === work).color;
+    },
     changeDays() {
       this.days = moment().daysInMonth();
     },
@@ -99,6 +139,7 @@ export default {
       }
     },
   },
+
   mounted() {
     this.changeDays();
     this.pushMonth();
@@ -120,7 +161,6 @@ export default {
   border-top-right-radius: 2px
 
 .column-wrapper
-  max-width: 1080px
   overflow: auto
 
 .text
@@ -135,6 +175,17 @@ export default {
   border-right: 1.5px solid var(--border-light-grey-color-1)
   color: var(--btn-blue-color)
 
+.name-employee
+  min-width: 255px
+  max-width: 255px
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  color: var(--btn-blue-color)
+
+.cell
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+
 .modal-wrapper
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px