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-03-21 18:05:57 +03:00
parent 1f50c12581
commit 9c44be3379
4 changed files with 109 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,50 +1,59 @@
<template lang="pug">
.schedule-wrapper.flex.w-full.flex-col
.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
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
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(
.flex.flex-col.pl-6
.row.flex.w-full.h-14(v-for="schedule in serialized", :key="schedule.id")
//- 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.items-center.gap-x-3.pr-9.pl-4
base-avatar.font-medium.text-sm(
:size="36",
:color="schedule.color",
v-if="!schedule.photo"
) {{trimInitials(schedule.last_name, schedule.first_name)}}
base-avatar(:size="36", v-else-if="schedule.photo")
img.h-full.object-cover(:src="url + schedule.photo")
.font-semibold.text-sm(
:style="{minWidth: '228px', maxWidth: '228px'}"
) {{schedule.last_name + " " + schedule.first_name + " " + schedule.patronymic}}
.flex.overflow-hidden
.cell.flex.flex-col.items-center.justify-center.m-1.cursor-pointer.transition(
v-for="day in result",
:key="day",
:id="schedule.id + day",
@click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee); setActiveCell()",
:class="choiceState(day, schedule.id)",
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
:class="choiceState(day, schedule.id), {'empty-cell': !choiceDay(day, schedule.id)}",
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
)
.flex(
:class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : '-'}}
</template>
<script>
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
import BaseAvatar from "@/components/base/BaseAvatar";
export default {
name: "ScheduleTableBody",
components: { FormChangeShift },
components: { FormChangeShift, BaseAvatar },
props: {
serialized: Array,
result: Array,
buttons: Array,
scheduleList: Array,
employees: Array,
showTime: Boolean,
@@ -61,9 +70,23 @@ export default {
data() {
return {
showForm: false,
statuses: [
{ work: "I", status: "I", color: "#B1F4C5" },
{ work: "II", status: "II", color: "#E2CDFE" },
{ work: "VACATION", status: "О", color: "#E7ECF0" },
{ work: "DAY_OFF", status: "В", color: "#CCE4FB" },
{ work: "PARTIAL", status: "Ч", color: "#FED1E9" },
{ work: "DUTY", status: "Д", color: "#FF00FF" },
],
};
},
methods: {
trimInitials(firstName, lastName) {
let croppedFirstName = firstName !== null ? firstName[0] : "";
let croppedLastName = lastName !== null ? lastName[0] : "";
return croppedLastName + croppedFirstName;
},
choiceDay(day, employee) {
let current = day.format("YYYY-MM-DD");
return this.scheduleList.find(
@@ -76,15 +99,14 @@ export default {
if (res !== "WORKS" && this.showTime) {
return "var(--default-white)";
}
return this.buttons.find((e) => e.work === res)?.color;
return this.statuses.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];
return employee.schedules.find((e) => e.date === currentDay)?.status;
},
choiceTime(schedule, day) {
let currentDay = day.format("YYYY-MM-DD");
@@ -101,31 +123,21 @@ export default {
</script>
<style lang="sass" scoped>
.schedule-wrapper
overflow-y: scroll
max-height: 351px
.row
border-bottom: 1.5px solid var(--border-light-grey-color-1)
&::-webkit-scrollbar-track
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)
&:last-child
border-bottom: none
.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)
min-width: 357px
max-width: 357px
color: var(--font-dark-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)
height: 48px
min-width: 74px
max-width: 74px
border-radius: 4px
&:hover
background-color: var(--border-light-grey-color-1)
&:last-child
@@ -134,6 +146,9 @@ export default {
.cell-work
display: none
.empty-cell
border: 1px solid #E7ECF0
.show-time
text-align: center
font-size: 12px