admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Добавил отображение текста на расписании, добавил create

Browse Source
This commit is contained in:
megavrilinvv
2022-12-26 19:56:07 +03:00
parent 1dd0c79360
commit 82f1eaf2e8
4 changed files with 61 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/schedule/components/ScheduleBar.vue
View File

@@ -4,10 +4,10 @@
.time-wrapper.flex.justify-between
.flex.flex-col.items-center.py-14px.px-4.gap-y-14px
.text.text-smm Начало
base-input-date.select(v-model:value="dataSchedule.endTime")
base-input-time.select(v-model:value="times.start_time")
.flex.flex-col.items-center.py-14px.px-4.gap-y-14px
.text.span.text-smm Конец
base-input-date.select(v-model:value="dataSchedule.startTime")
base-input-time.select(v-model:value="times.end_time")
.status-wrapper.flex.flex-col
.flex.justify-center.items-center.h-10
span.font-semibold Статусы
@@ -27,7 +27,7 @@
placeholder="Шаблоны графиков"
)
.flex.justify-center
base-button.font-semibold(:size="40") Сохранить
base-button.font-semibold(:size="40", @click="createSchedule") Сохранить
</template>
<script>
@@ -38,7 +38,13 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {
name: "ScheduleBar",
components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
props: { dataSchedule: Object, buttons: Array },
props: {
dataSchedule: Object,
buttons: Array,
clearEmployee: Array,
times: Object,
createSchedule: Function,
},
data() {
return {
scheduleList: [
@@ -66,7 +72,6 @@ export default {
border-radius: 4px
.time-wrapper
width: 420px
height: 102px
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px

42
src/pages/schedule/components/ScheduleBody.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.schedule.flex-col(:style="themeCell")
.table-header.flex.w-full
.flex.items-center(:style="{padding: '16px 102px'}")
.flex.items-center.justify-center.pl-11(:style="{width: 'calc(25% + 44px)'}")
.text.font-bold Сотрудник
.column-wrapper.flex
.schedule-column.flex.flex-col.items-center.justify-center.w-11(
@@ -9,7 +9,6 @@
:style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
)
.text.flex.font-bold(
@click="selectDay(day.format('D'))"
:style="{opacity: changeOpacity(day)}"
) {{day.format("D")}}
.text.flex.font-bold(
@@ -18,7 +17,7 @@
.schedule-body.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(@click="openSelect(schedule)")
.name-employee.flex.justify-center.items-center.cursor-pointer
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
v-for="day in result",
@@ -42,8 +41,7 @@
//- )
//- .icon-ok.text-xsm(class="pt-[3px]")
.name.flex.justify-center.items-center.cursor-pointer(
v-if="currentEmployee.label",
@click="openSelect"
v-if="currentEmployee.label"
)
span {{currentEmployee.label}}
.name.flex(v-if="!currentEmployee.label")
@@ -51,7 +49,7 @@
:items="ownersList",
v-model="currentEmployee",
placeholder="Добавить сотрудника",
:style="{border: 'none'}"
:style="{border: 'none', justifyContent: 'center'}"
)
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
v-if="currentEmployee.label",
@@ -60,9 +58,8 @@
:id="currentEmployee.id + day",
@click="choiceCell(day, currentEmployee.id)",
:class="selectTime(day, currentEmployee.id)",
:style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day, currentEmployee.id) ? choiceColor(day) : '', borderBottom: 'none'}"
:style="{borderBottom: 'none'}"
)
.flex {{day.format("YYYY-MM-DD") === choiceDay(day, currentEmployee.id) ? choiceWorks(day) : ''}}
</template>
<script>
@@ -187,13 +184,13 @@ export default {
},
choiceWorks(day) {
let currentDay = day.format("YYYY-MM-DD");
let a = this.scheduleList.find((e) => e.date === currentDay).status;
return this.buttons.find((e) => e.work === a).text[1];
let res = this.scheduleList.find((e) => e.date === currentDay).status;
return this.buttons.find((e) => e.work === res).text[1];
},
choiceColor(day) {
let currentDay = day.format("YYYY-MM-DD");
let a = this.scheduleList.find((e) => e.date === currentDay).status;
return this.buttons.find((e) => e.work === a).color;
let res = this.scheduleList.find((e) => e.date === currentDay).status;
return this.buttons.find((e) => e.work === res).color;
},
changeDays() {
this.days = moment().daysInMonth();
@@ -209,12 +206,6 @@ export default {
let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
},
// openSelect() {
// this.showSelect = true;
// for (let index = 0; index < this.employeeList.length; index++) {
// this.employee.push(this.employeeList[index]);
// }
// },
choiceDay(day, employee) {
let current = day.format("YYYY-MM-DD");
return this.scheduleList.find(
@@ -227,12 +218,6 @@ export default {
? "0.6"
: "1";
},
openSelect(schedule) {
console.log(schedule);
},
selectDay(day) {
console.log(day);
},
},
mounted() {
@@ -246,8 +231,9 @@ export default {
.schedule
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
border-right: none
min-height: 87px
width: fit-content
width: calc(100vw - 144px)
.schedule-body
&:hover
@@ -271,14 +257,12 @@ export default {
border-bottom: 1.5px solid var(--border-light-grey-color-1)
.name
min-width: 247px
max-width: 247px
width: 25%
border-right: 1.5px solid var(--border-light-grey-color-1)
color: var(--btn-blue-color)
.name-employee
min-width: 247px
max-width: 247px
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)