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

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

@@ -187,6 +187,8 @@ export default {
id: e.employee.id, id: e.employee.id,
last_name: e.employee.last_name, last_name: e.employee.last_name,
patronymic: e.employee.patronymic, patronymic: e.employee.patronymic,
photo: e.employee.photo,
color: e.employee.color,
schedules: [ schedules: [
{ {
date: e.date, date: e.date,

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

@@ -6,16 +6,20 @@
outlined outlined
) )
.flex.items-center.cursor-pointer .flex.items-center.cursor-pointer
q-icon(name="app:icon-search", size="18px" style="color: var(--font-dark-blue-color)") q-icon(
name="app:icon-search",
size="18px",
style="color: var(--font-dark-blue-color)"
)
q-btn( q-btn(
color="primary", color="primary",
padding="8px 25px", padding="8px 25px",
no-caps, no-caps
) )
q-icon( q-icon(
name="app:icon-plus", name="app:icon-plus",
size="12px", size="12px",
style="margin-right: 10px", style="margin-right: 10px"
) )
span Создать смену span Создать смену
schedule-table-header(:result="result") schedule-table-header(:result="result")
@@ -27,7 +31,6 @@
:clear-select="clearSelect", :clear-select="clearSelect",
:select-employee="selectEmployee", :select-employee="selectEmployee",
:choice-state="choiceState", :choice-state="choiceState",
:buttons="buttons",
:show-time="showTime", :show-time="showTime",
:schedule-list="scheduleList", :schedule-list="scheduleList",
:open-form="openForm", :open-form="openForm",
@@ -36,23 +39,6 @@
:change-shift="changeShift" :change-shift="changeShift"
:set-active-cell="setActiveCell" :set-active-cell="setActiveCell"
) )
schedule-table-select(
v-if="employees.length > 0",
:select-employee="selectEmployee",
:employees="employees",
:result="result",
:choice-cell="choiceCell",
:choice-state="choiceState",
:trim-owner-name="trimOwnerName"
)
schedule-bar(
:buttons="buttons",
:times="times",
:create-schedules="createSchedules",
:delete-schedule="deleteSchedule",
:template="template"
:clear-cell="clearCell"
)
</template> </template>
<script> <script>

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

@@ -1,50 +1,59 @@
<template lang="pug"> <template lang="pug">
.schedule-wrapper.flex.w-full.flex-col .flex.flex-col.pl-6
.flex.w-full(v-for="schedule in serialized", :key="schedule.id") .row.flex.w-full.h-14(v-for="schedule in serialized", :key="schedule.id")
q-btn( //- q-btn(
flat, //- flat,
class="edit", //- class="edit",
icon="app:icon-edit", //- icon="app:icon-edit",
size="12px", //- size="12px",
no-caps, //- no-caps,
padding="10px 13px", //- padding="10px 13px",
@click="openForm(schedule)" //- @click="openForm(schedule)"
) //- )
q-menu(v-model="showForm") //- q-menu(v-model="showForm")
form-change-shift( //- form-change-shift(
v-model="showForm", //- v-model="showForm",
:replacement-sheet="replacementSheet", //- :replacement-sheet="replacementSheet",
:employees="employees", //- :employees="employees",
:trim-owner-name="trimOwnerName", //- :trim-owner-name="trimOwnerName",
:serialized="serialized", //- :serialized="serialized",
:change-shift="changeShift" //- :change-shift="changeShift"
) //- )
.name-employee.flex.justify-center.items-center .name-employee.flex.items-center.gap-x-3.pr-9.pl-4
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}} base-avatar.font-medium.text-sm(
.row.flex :size="36",
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition( :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", v-for="day in result",
:key="day", :key="day",
:id="schedule.id + day", :id="schedule.id + day",
@click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee); setActiveCell()", @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee); setActiveCell()",
:class="choiceState(day, schedule.id)", :class="choiceState(day, schedule.id), {'empty-cell': !choiceDay(day, schedule.id)}",
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}" :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
) )
.flex( .flex(
:class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}" :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> </template>
<script> <script>
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue"; import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
import BaseAvatar from "@/components/base/BaseAvatar";
export default { export default {
name: "ScheduleTableBody", name: "ScheduleTableBody",
components: { FormChangeShift }, components: { FormChangeShift, BaseAvatar },
props: { props: {
serialized: Array, serialized: Array,
result: Array, result: Array,
buttons: Array,
scheduleList: Array, scheduleList: Array,
employees: Array, employees: Array,
showTime: Boolean, showTime: Boolean,
@@ -61,9 +70,23 @@ export default {
data() { data() {
return { return {
showForm: false, 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: { methods: {
trimInitials(firstName, lastName) {
let croppedFirstName = firstName !== null ? firstName[0] : "";
let croppedLastName = lastName !== null ? lastName[0] : "";
return croppedLastName + croppedFirstName;
},
choiceDay(day, employee) { choiceDay(day, employee) {
let current = day.format("YYYY-MM-DD"); let current = day.format("YYYY-MM-DD");
return this.scheduleList.find( return this.scheduleList.find(
@@ -76,15 +99,14 @@ export default {
if (res !== "WORKS" && this.showTime) { if (res !== "WORKS" && this.showTime) {
return "var(--default-white)"; 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) { choiceWorks(day, employee) {
if (this.showTime) { if (this.showTime) {
return this.choiceTime(employee, day); return this.choiceTime(employee, day);
} }
let currentDay = day.format("YYYY-MM-DD"); let currentDay = day.format("YYYY-MM-DD");
let res = employee.schedules.find((e) => e.date === currentDay)?.status; return employee.schedules.find((e) => e.date === currentDay)?.status;
return this.buttons.find((e) => e.work === res)?.text[1];
}, },
choiceTime(schedule, day) { choiceTime(schedule, day) {
let currentDay = day.format("YYYY-MM-DD"); let currentDay = day.format("YYYY-MM-DD");
@@ -101,31 +123,21 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.schedule-wrapper .row
overflow-y: scroll
max-height: 351px
border-bottom: 1.5px solid var(--border-light-grey-color-1) border-bottom: 1.5px solid var(--border-light-grey-color-1)
&::-webkit-scrollbar-track &:last-child
border-radius: 0 border-bottom: none
.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)
.name-employee .name-employee
width: 25% min-width: 357px
border-right: 1.5px solid var(--border-light-grey-color-1) max-width: 357px
border-bottom: 1.5px solid var(--border-light-grey-color-1) color: var(--font-dark-blue-color)
color: var(--btn-blue-color)
.row
width: calc(75% - 44px)
.cell .cell
border-right: 1.5px solid var(--border-light-grey-color-1) height: 48px
border-bottom: 1.5px solid var(--border-light-grey-color-1) min-width: 74px
max-width: 74px
border-radius: 4px
&:hover &:hover
background-color: var(--border-light-grey-color-1) background-color: var(--border-light-grey-color-1)
&:last-child &:last-child
@@ -134,6 +146,9 @@ export default {
.cell-work .cell-work
display: none display: none
.empty-cell
border: 1px solid #E7ECF0
.show-time .show-time
text-align: center text-align: center
font-size: 12px font-size: 12px

57
src/pages/schedule/components/ScheduleTableHeader.vue
View File

@@ -1,21 +1,26 @@
<template lang="pug"> <template lang="pug">
.table-header.flex.w-full.pr-2 .table-header.flex.w-full.pr-2.pl-6
.flex.items-center.justify-center.pl-11( .flex.items-center.pr-9.justify-between(
:style="{width: 'calc(25% + 43px)'}" :style="{minWidth: '357px', maxWidth: '357px'}"
) )
.text.font-bold Сотрудник .text.font-semibold.text-sm Сотрудники
.column-wrapper.flex q-icon(
.flex.flex-col.items-center.justify-center.w-11( name="app:icon-sort-number",
size="12px",
style="color: var(--font-dark-blue-color)"
)
.flex
.flex.items-center.justify-center.w-11(
v-for="day in result", v-for="day in result",
:class="{'column-color': changelColumnColor(day)}", :class="{'column-color': changeColumnColor(day)}",
:style="{width: `calc(100% / ${result.length})`}" :style="{width: '82px'}"
) )
.text.flex.font-bold( .text.flex.font-semibold.text-smm(
:style="{opacity: changeOpacity(day)}" :style="{color: changeColor(day)}"
) {{day.format("D")}} ) {{day.format("D") + "\xa0"}}
.text.flex.font-bold( .text.flex.font-semibold.text-smm(
:style="{opacity: changeOpacity(day)}" :style="{opacity: '0.5', color: changeColor(day)}"
) {{day.format("ddd")}} ) {{formatDay(day)}}
</template> </template>
<script> <script>
@@ -23,34 +28,36 @@ export default {
name: "ScheduleTableHeader", name: "ScheduleTableHeader",
props: { result: Array }, props: { result: Array },
methods: { methods: {
changelColumnColor(day) { changeColumnColor(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс" return day.format("ddd") === "сб" || day.format("ddd") === "вс"
? true ? true
: false; : false;
}, },
changeOpacity(day) { changeColor(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс" return day.format("ddd") === "сб" || day.format("ddd") === "вс"
? "0.6" ? "var(--border-red-color)"
: "1"; : null;
},
formatDay(day) {
let str = day.format("ddd");
return str.charAt(0).toUpperCase() + str.slice(1) + ".";
}, },
}, },
}; };
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.text
color: var(--font-grey-color)
.table-header .table-header
height: 50px overflow: hidden
background-color: #D7D9FF height: 36px
border-bottom: 1.5px solid var(--border-light-grey-color-1) border-bottom: 1.5px solid var(--border-light-grey-color-1)
border-top-left-radius: 2px border-top-left-radius: 2px
border-top-right-radius: 2px border-top-right-radius: 2px
color: var(--btn-blue-color) color: var(--btn-blue-color)
.column-wrapper
overflow: auto
overflow-x: hidden
width: calc(75% - 44px)
.column-color .column-color
background-color: var(--bg-white-color-1) background-color: var(--bg-white-color-1)
</style> </style>