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

74
src/pages/schedule/TheSchedule.vue
View File

@@ -17,7 +17,13 @@
:clear-employee="clearEmployee",
@new-date="createNewDate"
)
schedule-bar(:data-schedule="dataSchedule", :buttons="buttons")
schedule-bar(
:data-schedule="dataSchedule",
:buttons="buttons",
:clear-employee="clearEmployee",
:times="times",
:create-schedule="postCreateSchedule"
)
</template>
<script>
@@ -41,6 +47,7 @@ export default {
startTime: "",
endTime: "",
},
times: { start_time: "", end_time: "" },
buttons: [
{
class: "button-work",
@@ -60,7 +67,7 @@ export default {
},
{
class: "button-free",
name: "Статусы",
name: "Выходной",
work: "DAY_OFF",
active: false,
color: "#9294A7",
@@ -86,28 +93,16 @@ export default {
},
fetchSchedulesEmployee() {
this.scheduleList = [];
this.employeeList.forEach((e) => {
fetchWrapper
.get(
`accounts/schedules/?employee=${
e.id
}&date_after=${this.startMonth.format(
"YYYY-MM-DD"
)}&date_before=${this.endMonth.format("YYYY-MM-DD")}`
)
.then((data) => {
this.scheduleList.push(...data.results);
if (!data.count)
this.clearEmployee.push({
first_name: e.first_name,
id: e.id,
last_name: e.last_name,
patronymic: e.patronymic,
schedules: [],
});
})
.then(() => this.filterScheduleEmployee());
});
fetchWrapper
.get(
`accounts/schedules/?date_after=${this.startMonth.format(
"YYYY-MM-DD"
)}&date_before=${this.endMonth.format("YYYY-MM-DD")}`
)
.then((data) => {
this.scheduleList.push(...data.results);
})
.then(() => this.filterScheduleEmployee());
},
filterScheduleEmployee() {
let serialized = [];
@@ -144,30 +139,35 @@ export default {
}
});
this.serialized = serialized;
this.filterEmployee();
},
filterEmployee() {
this.clearEmployee = [];
this.clearEmployee = this.employeeList.filter((item) =>
this.serialized.every((item2) => item2.id !== item.id)
);
},
postCreateSchedule() {
fetchWrapper
.post("accounts/schedules/create/", {
employee: "582b6557-33f4-480f-b578-984bbca0a925",
employee: this.clearEmployee.find((e) => e.schedules).id,
active_flg: true,
start_date: "2019-08-24",
end_date: "2019-08-24",
title: "string",
name: "string",
start_time: "string",
end_time: "string",
status: "string",
work_template: 0,
holiday_template: 0,
start_date: this.clearEmployee.find((e) => e.schedules).schedules
.start_date,
end_date: this.clearEmployee.find((e) => e.schedules).schedules
.end_date,
start_time: this.times.start_time,
end_time: this.times.end_time,
status: this.buttons.find((e) => e.active).work,
})
.then(() => this.fetchSchedules());
},
createNewDate(e) {
let res = this.clearEmployee.find((elem) => elem.id === e.id);
res.schedules.push({
let schedules = {
start_date: e.start,
end_date: e.end,
});
};
this.clearEmployee.find((elem) => elem.id === e.id).schedules = schedules;
},
switchPreviousMonth() {
this.startMonth = this.startMonth.clone().subtract(1, "M");

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)