[WIP] Разбил расписание на компоненты, исправил логику работы
This commit is contained in:
megavrilinvv
@@ -1,75 +1,26 @@
|
||||
<template lang="pug">
|
||||
.schedule.flex-col(:style="themeCell")
|
||||
.table-header.flex.w-full.pr-2
|
||||
.flex.items-center.justify-center.pl-11(
|
||||
:style="{width: 'calc(25% + 43px)'}"
|
||||
schedule-table-header(:result="result")
|
||||
schedule-table-body(
|
||||
:serialized="serialized",
|
||||
:trim-owner-name="trimOwnerName",
|
||||
:result="result",
|
||||
:choice-cell="choiceCell",
|
||||
:clear-select="clearSelect",
|
||||
:select-employee="selectEmployee",
|
||||
:choice-state="choiceState",
|
||||
:buttons="buttons",
|
||||
:show-time="showTime",
|
||||
:schedule-list="scheduleList"
|
||||
)
|
||||
.text.font-bold Сотрудник
|
||||
.column-wrapper.flex
|
||||
.schedule-column.flex.flex-col.items-center.justify-center.w-11(
|
||||
v-for="day in result",
|
||||
:class="{'column-color': changelColumnColor(day)}",
|
||||
:style="{width: `calc(100% / ${result.length})`}"
|
||||
)
|
||||
.text.flex.font-bold(
|
||||
:style="{opacity: changeOpacity(day)}"
|
||||
) {{day.format("D")}}
|
||||
.text.flex.font-bold(
|
||||
:style="{opacity: changeOpacity(day)}"
|
||||
) {{day.format("ddd")}}
|
||||
.schedule-wrapper.flex.w-full.flex-col
|
||||
.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
|
||||
.edit.flex.items-center.justify-center.h-11.w-11
|
||||
.flex.icon-edit
|
||||
.name-employee.flex.justify-center.items-center.cursor-pointer
|
||||
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
|
||||
.row.flex
|
||||
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
|
||||
v-for="day in result",
|
||||
:key="day",
|
||||
:id="schedule.id + day",
|
||||
@click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
|
||||
:class="choiceState(day, schedule.id)",
|
||||
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
|
||||
)
|
||||
.flex(
|
||||
:class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
|
||||
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
|
||||
.flex.w-full.mt-4(
|
||||
schedule-table-select(
|
||||
v-if="clearEmployee.length > 0",
|
||||
:class="{'schedule-select': selectEmployee.label}"
|
||||
)
|
||||
.edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
|
||||
.flex.icon-edit(v-if="selectEmployee.label")
|
||||
//- base-button(
|
||||
//- confirm,
|
||||
//- rounded,
|
||||
//- outlined,
|
||||
//- :size="20",
|
||||
//- @click="saveEmployee",
|
||||
//- v-if="selectEmployee.label"
|
||||
//- )
|
||||
//- .icon-ok.text-xsm(class="pt-[3px]")
|
||||
.text.flex.justify-center.items-center.cursor-pointer(
|
||||
:class="{'select-name': selectEmployee.label}"
|
||||
)
|
||||
base-custom-select(
|
||||
v-if="!selectEmployee.label",
|
||||
:items="ownersList",
|
||||
v-model="selectEmployee",
|
||||
placeholder="Добавить сотрудника",
|
||||
:style="{border: 'none', justifyContent: 'center'}"
|
||||
)
|
||||
.flex.justify-center(v-else) {{selectEmployee.label}}
|
||||
.row.flex
|
||||
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
|
||||
v-if="selectEmployee.label",
|
||||
v-for="day in result",
|
||||
:key="day",
|
||||
:id="selectEmployee.id + day",
|
||||
@click="choiceCell(day, selectEmployee.id)",
|
||||
:class="choiceState(day, selectEmployee.id)",
|
||||
:style="{width: `calc(100% / ${result.length})`}"
|
||||
:select-employee="selectEmployee",
|
||||
:clear-employee="clearEmployee",
|
||||
:result="result",
|
||||
:choice-cell="choiceCell",
|
||||
:choice-state="choiceState",
|
||||
:trim-owner-name="trimOwnerName",
|
||||
)
|
||||
</template>
|
||||
|
||||
@@ -77,11 +28,19 @@
|
||||
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";
|
||||
import ScheduleTableHeader from "@/pages/schedule/components/ScheduleTableHeader.vue";
|
||||
import ScheduleTableBody from "@/pages/schedule/components/ScheduleTableBody.vue";
|
||||
import ScheduleTableSelect from "@/pages/schedule/components/ScheduleTableSelect.vue";
|
||||
|
||||
export default {
|
||||
name: "ScheduleTable",
|
||||
components: { BaseModal, BaseButton, BaseCustomSelect },
|
||||
components: {
|
||||
BaseModal,
|
||||
BaseButton,
|
||||
ScheduleTableHeader,
|
||||
ScheduleTableBody,
|
||||
ScheduleTableSelect,
|
||||
},
|
||||
props: {
|
||||
scheduleList: Array,
|
||||
serialized: Array,
|
||||
@@ -109,23 +68,6 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ownersList() {
|
||||
if (this.clearEmployee) {
|
||||
let filteredArray = [];
|
||||
this.clearEmployee.forEach((elem) => {
|
||||
filteredArray.push({
|
||||
id: elem.id,
|
||||
label: this.trimOwnerName(
|
||||
elem.last_name,
|
||||
elem.first_name,
|
||||
elem.patronymic
|
||||
),
|
||||
});
|
||||
});
|
||||
return filteredArray;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
themeCell() {
|
||||
this.setActiveButton();
|
||||
return {
|
||||
@@ -135,21 +77,6 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
choiceTime(schedule, day) {
|
||||
let currentDay = day.format("YYYY-MM-DD");
|
||||
let start = schedule.schedules.find(
|
||||
(e) => e.date === currentDay && e.status === "WORKS"
|
||||
)?.start_time;
|
||||
let end = schedule.schedules.find(
|
||||
(e) => e.date === currentDay && e.status === "WORKS"
|
||||
)?.end_time;
|
||||
if (start && end) return `${start} ${end}`;
|
||||
},
|
||||
changelColumnColor(day) {
|
||||
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
|
||||
? true
|
||||
: false;
|
||||
},
|
||||
setActiveButton() {
|
||||
this.activeButton = this.buttons.find((e) => e.active);
|
||||
},
|
||||
@@ -234,25 +161,8 @@ export default {
|
||||
return {
|
||||
status: !!this.activeButton,
|
||||
"set-date": !this.activeButton,
|
||||
"set-template": !this.activeButton && this.template.item.label,
|
||||
};
|
||||
},
|
||||
choiceWorks(day, employee) {
|
||||
if (this.showTime) {
|
||||
return this.choiceTime(employee, day);
|
||||
}
|
||||
let currentDay = day.format("YYYY-MM-DD");
|
||||
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
|
||||
return this.buttons.find((e) => e.work === res)?.text[1];
|
||||
},
|
||||
choiceColor(day, employee) {
|
||||
let currentDay = day.format("YYYY-MM-DD");
|
||||
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
|
||||
if (res !== "WORKS" && this.showTime) {
|
||||
return "var(--default-white)";
|
||||
}
|
||||
return this.buttons.find((e) => e.work === res)?.color;
|
||||
},
|
||||
changeDays() {
|
||||
this.days = moment(this.choiceMonth, "YYYY-MM-DD").daysInMonth();
|
||||
},
|
||||
@@ -268,18 +178,6 @@ export default {
|
||||
let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
|
||||
return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
|
||||
},
|
||||
choiceDay(day, employee) {
|
||||
let current = day.format("YYYY-MM-DD");
|
||||
return this.scheduleList.find(
|
||||
(e) => current === e.date && e.employee.id === employee
|
||||
)?.date;
|
||||
},
|
||||
|
||||
changeOpacity(day) {
|
||||
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
|
||||
? "0.6"
|
||||
: "1";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
startMonth: {
|
||||
@@ -307,62 +205,6 @@ export default {
|
||||
min-height: 87px
|
||||
width: calc(100vw - 136px)
|
||||
|
||||
.schedule-wrapper
|
||||
overflow-y: scroll
|
||||
max-height: 351px
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
&::-webkit-scrollbar-track
|
||||
border-radius: 0
|
||||
|
||||
.table-header
|
||||
height: 50px
|
||||
background-color: #D7D9FF
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-top-left-radius: 2px
|
||||
border-top-right-radius: 2px
|
||||
|
||||
.schedule-select
|
||||
border-right: 8px solid var(--bg-ligth-blue-color)
|
||||
border-top: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.column-wrapper
|
||||
overflow: auto
|
||||
overflow-x: hidden
|
||||
width: calc(75% - 44px)
|
||||
|
||||
.column-color
|
||||
background-color: var(--bg-white-color-1)
|
||||
|
||||
.text
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.edit
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-left: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.row
|
||||
width: calc(75% - 44px)
|
||||
|
||||
.select-name
|
||||
width: 25%
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.name-employee
|
||||
width: 25%
|
||||
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)
|
||||
&:hover
|
||||
background-color: var(--border-light-grey-color-1)
|
||||
&:last-child
|
||||
border-right: none
|
||||
|
||||
.show-time
|
||||
text-align: center
|
||||
font-size: 12px
|
||||
@@ -376,15 +218,9 @@ export default {
|
||||
.status
|
||||
background-color: var(--bg-color-status) !important
|
||||
|
||||
.cell-work
|
||||
display: none
|
||||
|
||||
.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>
|
||||
|
||||
119
src/pages/schedule/components/ScheduleTableBody.vue
Normal file
119
src/pages/schedule/components/ScheduleTableBody.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template lang="pug">
|
||||
.schedule-wrapper.flex.w-full.flex-col
|
||||
.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
|
||||
.edit.flex.items-center.justify-center.h-11.w-11
|
||||
.flex.icon-edit
|
||||
.name-employee.flex.justify-center.items-center.cursor-pointer
|
||||
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
|
||||
.row.flex
|
||||
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
|
||||
v-for="day in result",
|
||||
:key="day",
|
||||
:id="schedule.id + day",
|
||||
@click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
|
||||
:class="choiceState(day, schedule.id)",
|
||||
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
|
||||
)
|
||||
.flex(
|
||||
:class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
|
||||
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScheduleTableBody",
|
||||
props: {
|
||||
serialized: Array,
|
||||
trimOwnerName: Function,
|
||||
result: Array,
|
||||
choiceCell: Function,
|
||||
clearSelect: Function,
|
||||
selectEmployee: Object,
|
||||
choiceState: Function,
|
||||
buttons: Array,
|
||||
showTime: Boolean,
|
||||
scheduleList: Array,
|
||||
},
|
||||
methods: {
|
||||
choiceDay(day, employee) {
|
||||
let current = day.format("YYYY-MM-DD");
|
||||
return this.scheduleList.find(
|
||||
(e) => current === e.date && e.employee.id === employee
|
||||
)?.date;
|
||||
},
|
||||
choiceColor(day, employee) {
|
||||
let currentDay = day.format("YYYY-MM-DD");
|
||||
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
|
||||
if (res !== "WORKS" && this.showTime) {
|
||||
return "var(--default-white)";
|
||||
}
|
||||
return this.buttons.find((e) => e.work === res)?.color;
|
||||
},
|
||||
choiceWorks(day, employee) {
|
||||
if (this.showTime) {
|
||||
return this.choiceTime(employee, day);
|
||||
}
|
||||
let currentDay = day.format("YYYY-MM-DD");
|
||||
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
|
||||
return this.buttons.find((e) => e.work === res)?.text[1];
|
||||
},
|
||||
choiceTime(schedule, day) {
|
||||
let currentDay = day.format("YYYY-MM-DD");
|
||||
let start = schedule.schedules.find(
|
||||
(e) => e.date === currentDay && e.status === "WORKS"
|
||||
)?.start_time;
|
||||
let end = schedule.schedules.find(
|
||||
(e) => e.date === currentDay && e.status === "WORKS"
|
||||
)?.end_time;
|
||||
if (start && end) return `${start} ${end}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.schedule-wrapper
|
||||
overflow-y: scroll
|
||||
max-height: 351px
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
&::-webkit-scrollbar-track
|
||||
border-radius: 0
|
||||
|
||||
.edit
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-left: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.name-employee
|
||||
width: 25%
|
||||
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)
|
||||
|
||||
.row
|
||||
width: calc(75% - 44px)
|
||||
|
||||
.cell
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
&:hover
|
||||
background-color: var(--border-light-grey-color-1)
|
||||
&:last-child
|
||||
border-right: none
|
||||
|
||||
.cell-work
|
||||
display: none
|
||||
|
||||
.show-time
|
||||
text-align: center
|
||||
font-size: 12px
|
||||
|
||||
.set-date
|
||||
background-color: var(--btn-blue-color-4) !important
|
||||
|
||||
.status
|
||||
background-color: var(--bg-color-status) !important
|
||||
|
||||
.status::after
|
||||
content: var(--text-status)
|
||||
</style>
|
||||
60
src/pages/schedule/components/ScheduleTableHeader.vue
Normal file
60
src/pages/schedule/components/ScheduleTableHeader.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template lang="pug">
|
||||
.table-header.flex.w-full.pr-2
|
||||
.flex.items-center.justify-center.pl-11(
|
||||
:style="{width: 'calc(25% + 43px)'}"
|
||||
)
|
||||
.text.font-bold(
|
||||
:style="{color: 'var(--btn-blue-color)'}"
|
||||
) Сотрудник
|
||||
.column-wrapper.flex
|
||||
.flex.flex-col.items-center.justify-center.w-11(
|
||||
v-for="day in result",
|
||||
:class="{'column-color': changelColumnColor(day)}",
|
||||
:style="{width: `calc(100% / ${result.length})`}"
|
||||
)
|
||||
.text.flex.font-bold(
|
||||
:style="{opacity: changeOpacity(day)}"
|
||||
) {{day.format("D")}}
|
||||
.text.flex.font-bold(
|
||||
:style="{opacity: changeOpacity(day)}"
|
||||
) {{day.format("ddd")}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScheduleTableHeader",
|
||||
props: { result: Array },
|
||||
methods: {
|
||||
changelColumnColor(day) {
|
||||
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
|
||||
? true
|
||||
: false;
|
||||
},
|
||||
changeOpacity(day) {
|
||||
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
|
||||
? "0.6"
|
||||
: "1";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.table-header
|
||||
height: 50px
|
||||
background-color: #D7D9FF
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-top-left-radius: 2px
|
||||
border-top-right-radius: 2px
|
||||
|
||||
.column-wrapper
|
||||
overflow: auto
|
||||
overflow-x: hidden
|
||||
width: calc(75% - 44px)
|
||||
|
||||
.column-color
|
||||
background-color: var(--bg-white-color-1)
|
||||
|
||||
.text
|
||||
color: var(--btn-blue-color)
|
||||
</style>
|
||||
110
src/pages/schedule/components/ScheduleTableSelect.vue
Normal file
110
src/pages/schedule/components/ScheduleTableSelect.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template lang="pug">
|
||||
.flex.w-full.mt-4(
|
||||
:class="{'schedule-select': selectEmployee.label}"
|
||||
)
|
||||
.edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
|
||||
.flex.icon-edit(v-if="selectEmployee.label")
|
||||
//- base-button(
|
||||
//- confirm,
|
||||
//- rounded,
|
||||
//- outlined,
|
||||
//- :size="20",
|
||||
//- @click="saveEmployee",
|
||||
//- v-if="selectEmployee.label"
|
||||
//- )
|
||||
//- .icon-ok.text-xsm(class="pt-[3px]")
|
||||
.flex.justify-center.items-center.cursor-pointer(
|
||||
:class="{'select-name': selectEmployee.label}",
|
||||
:style="{color: 'var(--btn-blue-color)'}"
|
||||
)
|
||||
base-custom-select(
|
||||
v-if="!selectEmployee.label",
|
||||
:items="ownersList",
|
||||
v-model="selectEmployee",
|
||||
placeholder="Добавить сотрудника",
|
||||
:style="{border: 'none', justifyContent: 'center'}"
|
||||
)
|
||||
.flex.justify-center(v-else) {{selectEmployee.label}}
|
||||
.row.flex
|
||||
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
|
||||
v-if="selectEmployee.label",
|
||||
v-for="day in result",
|
||||
:key="day",
|
||||
:id="selectEmployee.id + day",
|
||||
@click="choiceCell(day, selectEmployee.id)",
|
||||
:class="choiceState(day, selectEmployee.id)",
|
||||
:style="{width: `calc(100% / ${result.length})`}"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
|
||||
|
||||
export default {
|
||||
name: "ScheduleTableSelect",
|
||||
components: { BaseCustomSelect },
|
||||
props: {
|
||||
selectEmployee: Object,
|
||||
result: Array,
|
||||
choiceCell: Function,
|
||||
choiceState: Function,
|
||||
clearEmployee: Array,
|
||||
trimOwnerName: Function,
|
||||
},
|
||||
computed: {
|
||||
ownersList() {
|
||||
if (this.clearEmployee) {
|
||||
let filteredArray = [];
|
||||
this.clearEmployee.forEach((elem) => {
|
||||
filteredArray.push({
|
||||
id: elem.id,
|
||||
label: this.trimOwnerName(
|
||||
elem.last_name,
|
||||
elem.first_name,
|
||||
elem.patronymic
|
||||
),
|
||||
});
|
||||
});
|
||||
return filteredArray;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.edit
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-left: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.schedule-select
|
||||
border-right: 8px solid var(--bg-ligth-blue-color)
|
||||
border-top: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.select-name
|
||||
width: 25%
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.row
|
||||
width: calc(75% - 44px)
|
||||
|
||||
.cell
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
&:hover
|
||||
background-color: var(--border-light-grey-color-1)
|
||||
&: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)
|
||||
</style>
|
||||
Reference in New Issue
Block a user