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

[WIP] Добавил возможность замены смен, фикс стилей

Browse Source
This commit is contained in:
megavrilinvv
2023-01-24 16:50:09 +03:00
parent 7d5341e61a
commit a3eb8606f5
8 changed files with 166 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,9 +9,8 @@
.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5(v-else)
schedule-header(
:start-month="startMonth",
:times-shift="timesShift",
:change-show-time="changeShowTime",
:show-time="showTime"
:show-time="showTime",
@switch-previous-month="switchPreviousMonth",
@switch-next-month="switchNextMonth"
)
@@ -21,11 +20,15 @@
:serialized="serialized",
:buttons="buttons",
:start-month="startMonth",
:clear-employee="clearEmployee",
:employees="employees",
:show-time="showTime",
:clear-select="clearSelect",
:select-employee="selectEmployee",
:replacement-sheet="replacementSheet",
:template="template",
:trim-owner-name="trimOwnerName",
:open-form="openForm",
:change-shift="postUpdateSchedule",
@schedule-employee="createScheduleEmployee",
@schedules="distributeRequest"
)
@@ -62,14 +65,20 @@ export default {
},
],
scheduleList: [],
clearEmployee: [],
employees: [],
serialized: [],
selectEmployee: {
label: "",
id: null,
},
times: { start_time: "", end_time: "" },
timesShift: { start_time: "", end_time: "" },
replacementSheet: {
currentEmployee: "",
replacementEmployee: "",
date: null,
start_time: "",
end_time: "",
},
buttons: [
{
class: "button-work",
@@ -100,6 +109,7 @@ export default {
startMonth: moment().startOf("month"),
showTime: false,
schedulesDate: {},
currenSchedule: null,
};
},
computed: {
@@ -111,9 +121,22 @@ export default {
},
},
methods: {
openForm(e) {
this.currenSchedule = e;
this.replacementSheet.currentEmployee = this.trimOwnerName(
e.last_name,
e.first_name,
e.patronymic
);
},
changeShowTime() {
this.showTime = !this.showTime;
},
trimOwnerName(lastName, firstName, patronymic) {
let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
},
clearSelect(employee) {
if (employee) {
employee.label = "";
@@ -184,8 +207,8 @@ export default {
this.filterEmployee();
},
filterEmployee() {
this.clearEmployee = [];
this.clearEmployee = this.employeeList.filter((item) =>
this.employees = [];
this.employees = this.employeeList.filter((item) =>
this.serialized.every((el) => el.id !== item.id)
);
},
@@ -225,18 +248,34 @@ export default {
}
},
postUpdateSchedule() {
let ids = "";
this.insideSchedules.forEach((e) => (ids += e.id + ","));
ids = ids.slice(0, -1);
fetchWrapper
.post(`accounts/schedules/${ids}/update/`, {
employee: this.insideSchedules[0].employeeId,
active_flg: true,
start_time: this.times.start_time,
end_time: this.times.end_time,
status: this.buttons.find((e) => e.active).work,
})
.then(() => this.fetchSchedules());
if (this.replacementSheet.date) {
let scheduleList = this.currenSchedule.schedules.find(
(el) =>
el.date === moment(this.replacementSheet.date).format("YYYY-MM-DD")
);
fetchWrapper
.post(`accounts/schedules/${scheduleList.id}/update/`, {
employee: this.replacementSheet.replacementEmployee.id,
active_flg: true,
start_time: this.replacementSheet.start_time,
end_time: this.replacementSheet.end_time,
status: scheduleList.status,
})
.then(() => this.fetchSchedules());
} else {
let ids = "";
this.insideSchedules.forEach((e) => (ids += e.id + ","));
ids = ids.slice(0, -1);
fetchWrapper
.post(`accounts/schedules/${ids}/update/`, {
employee: this.insideSchedules[0].employeeId,
active_flg: true,
start_time: this.times.start_time,
end_time: this.times.end_time,
status: this.buttons.find((e) => e.active).work,
})
.then(() => this.fetchSchedules());
}
},
createScheduleEmployee(e, id) {
this.schedulesDate = {
@@ -271,8 +310,8 @@ export default {
(minute < 10 ? "0" + minute.toString() : minute);
this.times.start_time = localDatetime;
this.times.end_time = localDatetime;
this.timesShift.start_time = localDatetime;
this.timesShift.end_time = localDatetime;
this.replacementSheet.start_time = localDatetime;
this.replacementSheet.end_time = localDatetime;
},
},
watch: {

63
src/pages/schedule/components/FormChangeShift.vue
View File

@@ -5,14 +5,22 @@
.flex.pt-2
.icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
.flex.flex-col.gap-y-6
base-input(label="Дата", type="date", outlined)
base-select(
v-model="currentEmployee",
base-input(
label="Дата",
type="date",
v-model="replacementSheet.date",
outlined
)
base-input.input(,
type="text"
v-model="replacementSheet.currentEmployee",
label="Текущий сотрудник",
placeholder="Выберите сотрудника"
outlined,
disabled
)
base-select(
v-model="currentEmployee",
:items="ownersList",
v-model="replacementSheet.replacementEmployee",
label="Замена сотрудника",
placeholder="Выберите сотрудника"
)
@@ -20,14 +28,14 @@
base-input(
type="time",
label="Начало",
v-model="timesShift.start_time",
v-model="replacementSheet.start_time",
outlined
)
.flex.items-center.mt-4 —
base-input(
type="time",
label="Конец",
v-model="timesShift.end_time",
v-model="replacementSheet.end_time",
outlined
)
.flex.justify-center
@@ -36,6 +44,7 @@
color="primary",
padding="8px 24px",
no-caps
@click="changeShift(); closeForm()"
)
</template>
@@ -48,13 +57,41 @@ export default {
components: { BaseSelect, BaseInput },
emits: ["update:model-value"],
props: {
timesShift: Object,
employees: Array,
serialized: Array,
replacementSheet: Object,
trimOwnerName: Function,
changeShift: Function,
modelValue: Boolean,
},
data() {
return {
currentEmployee: { label: "", id: null },
};
computed: {
ownersList() {
if (this.employees) {
let filteredArray = [];
this.employees.forEach((elem) => {
filteredArray.push({
id: elem.id,
label: this.trimOwnerName(
elem.last_name,
elem.first_name,
elem.patronymic
),
});
});
this.serialized.forEach((elem) => {
filteredArray.push({
id: elem.id,
label: this.trimOwnerName(
elem.last_name,
elem.first_name,
elem.patronymic
),
});
});
return filteredArray;
}
return [];
},
},
methods: {
closeForm() {
@@ -69,7 +106,7 @@ export default {
height: fit-content
width: 534px
background-color: var(--default-white)
box-shadow: var(--default-shadow)
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.05)
border-radius: 4px
z-index: 5
</style>

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

@@ -26,7 +26,7 @@
:label="item.name",
:class="item.class",
text-color="white",
:style="{border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
no-caps,
style="width: 200px"
)

22
src/pages/schedule/components/ScheduleHeader.vue
View File

@@ -34,17 +34,6 @@
style="width: 174px"
@click="changeShowTime",
)
q-btn(
label="Замена смен",
color="primary",
no-caps,
padding="8px 24px",
)
q-menu(v-model="showForm")
form-change-shift(
v-model="showForm",
:times-shift="timesShift"
)
</template>
<script>
@@ -55,14 +44,14 @@ export default {
name: "ScheduleHeader",
components: { FormChangeShift },
props: {
startMonth: Object,
timesShift: Object,
changeShowTime: Function,
showTime: Boolean,
startMonth: Object,
replacementSheet: Object,
changeShowTime: Function,
changeShift: Function,
},
data() {
return {
showForm: false,
isCurrentMonth: true,
};
},
@@ -82,9 +71,6 @@ export default {
},
},
methods: {
openForm() {
this.showForm = true;
},
previousHandler() {
this.$emit("switch-previous-month");
},

27
src/pages/schedule/components/ScheduleTable.vue
View File

@@ -11,12 +11,16 @@
:choice-state="choiceState",
:buttons="buttons",
:show-time="showTime",
:schedule-list="scheduleList"
:schedule-list="scheduleList",
:open-form="openForm",
:replacement-sheet="replacementSheet",
:employees="employees",
:change-shift="changeShift"
)
schedule-table-select(
v-if="clearEmployee.length > 0",
v-if="employees.length > 0",
:select-employee="selectEmployee",
:clear-employee="clearEmployee",
:employees="employees",
:result="result",
:choice-cell="choiceCell",
:choice-state="choiceState",
@@ -44,11 +48,15 @@ export default {
serialized: Array,
buttons: Array,
template: Object,
clearEmployee: Array,
employees: Array,
showTime: Boolean,
clearSelect: Function,
selectEmployee: Object,
startMonth: Object,
trimOwnerName: Function,
openForm: Function,
replacementSheet: Object,
changeShift: Function,
},
data() {
return {
@@ -63,6 +71,7 @@ export default {
},
activeButton: null,
choiceMonth: null,
act: null,
};
},
computed: {
@@ -80,6 +89,9 @@ export default {
setActiveButton() {
this.activeButton = this.buttons.find((e) => e.active);
},
setActiveCell() {
return (this.buttons.find((e) => e.work === "WORKS").active = true);
},
choiceCell(day, id, schedule) {
if (this.showTime) return;
let formatTime = day.format("YYYY-MM-DD");
@@ -156,7 +168,7 @@ export default {
if (resStart || resMiddle || resEnd)
return {
"set-template": !!this.template.item?.label,
"set-template": !!this.template.item?.label && this.setActiveCell(),
status: !!this.activeButton,
"set-date": !this.activeButton,
};
@@ -171,11 +183,6 @@ export default {
this.result.push(this.startMonth.clone().add(i - 1, "d"));
}
},
trimOwnerName(lastName, firstName, patronymic) {
let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
},
},
watch: {
startMonth: {

33
src/pages/schedule/components/ScheduleTableBody.vue
View File

@@ -1,8 +1,24 @@
<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
q-btn(
flat,
class="edit",
icon="app:icon-edit",
size="12px",
no-caps,
padding="10px 13px",
@click="openForm(schedule)"
)
q-menu(v-model="showForm")
form-change-shift(
v-model="showForm",
:replacement-sheet="replacementSheet",
:employees="employees",
:trim-owner-name="trimOwnerName",
:serialized="serialized",
:change-shift="changeShift"
)
.name-employee.flex.justify-center.items-center.cursor-pointer
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
.row.flex
@@ -20,8 +36,11 @@
</template>
<script>
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
export default {
name: "ScheduleTableBody",
components: { FormChangeShift },
props: {
serialized: Array,
trimOwnerName: Function,
@@ -33,6 +52,15 @@ export default {
buttons: Array,
showTime: Boolean,
scheduleList: Array,
openForm: Function,
changeShift: Function,
replacementSheet: Object,
employees: Array,
},
data() {
return {
showForm: false,
};
},
methods: {
choiceDay(day, employee) {
@@ -80,6 +108,7 @@ export default {
border-radius: 0
.edit
border-radius: 0
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)

6
src/pages/schedule/components/ScheduleTableSelect.vue
View File

@@ -48,14 +48,14 @@ export default {
result: Array,
choiceCell: Function,
choiceState: Function,
clearEmployee: Array,
employees: Array,
trimOwnerName: Function,
},
computed: {
ownersList() {
if (this.clearEmployee) {
if (this.employees) {
let filteredArray = [];
this.clearEmployee.forEach((elem) => {
this.employees.forEach((elem) => {
filteredArray.push({
id: elem.id,
label: this.trimOwnerName(