178 lines
4.1 KiB
Vue
178 lines
4.1 KiB
Vue
<template lang="pug">
|
|
.wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
|
|
.flex.w-full.justify-around.gap-x-4
|
|
.time-wrapper.flex.justify-between.p-7
|
|
base-input(
|
|
type="time",
|
|
v-model="times.start_time",
|
|
label="Начало",
|
|
outlined
|
|
)
|
|
.flex.items-center.mt-6 —
|
|
base-input(
|
|
type="time",
|
|
v-model="times.end_time",
|
|
label="Конец",
|
|
outlined
|
|
)
|
|
.status-wrapper.flex.flex-col.gap-y-3.p-3
|
|
.flex.justify-center.items-center.h-10
|
|
span.font-semibold Статусы
|
|
.flex.justify-around.gap-x-4(class="py-2.5")
|
|
q-btn(
|
|
v-for="item in buttons",
|
|
:key="item",
|
|
@click="choiceSchedule(item.class)",
|
|
:label="item.name",
|
|
:class="item.class",
|
|
text-color="white",
|
|
:style="{border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
|
|
no-caps,
|
|
style="width: 200px"
|
|
)
|
|
.graph-template.flex.flex-col.items-center.gap-y-4
|
|
base-select(
|
|
:items="templateList",
|
|
v-model="template.item",
|
|
placeholder="Шаблоны графиков"
|
|
)
|
|
base-input.w-28(
|
|
v-if="template.item.id === 1"
|
|
mask="#/#",
|
|
placeholder="0/0",
|
|
label="Введите график",
|
|
v-model="template.item.label",
|
|
outlined
|
|
)
|
|
.flex.justify-center.gap-x-6.h-10
|
|
q-btn(
|
|
label="Сохранить",
|
|
color="primary",
|
|
style="width: 144px",
|
|
padding="4px 24px",
|
|
@click="createSchedules",
|
|
no-caps
|
|
)
|
|
q-btn(
|
|
label="Удалить",
|
|
style="background-color: var(--bg-event-red-color); width: 144px",
|
|
text-color="white",
|
|
padding="4px 24px",
|
|
@click="deleteSchedule",
|
|
no-caps
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseSelect from "@/components/base/BaseSelect.vue";
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
|
|
export default {
|
|
name: "ScheduleBar",
|
|
components: {
|
|
BaseInput,
|
|
BaseSelect,
|
|
},
|
|
props: {
|
|
buttons: Array,
|
|
template: Object,
|
|
times: Object,
|
|
createSchedules: Function,
|
|
deleteSchedule: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
templateList: [
|
|
{ label: "Индивидуальный", id: 1 },
|
|
{ label: "2/2", id: 2 },
|
|
{ label: "3/2", id: 3 },
|
|
{ label: "5/2", id: 4 },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
choiceSchedule(item) {
|
|
this.buttons.forEach((e) => (e.active = false));
|
|
this.buttons.find((e) => e.class === item).active = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.wrapper-bar
|
|
height: 224px
|
|
border: 1.5px solid var(--border-light-grey-color-1)
|
|
border-radius: 4px
|
|
width: calc(100vw - 136px)
|
|
|
|
.time-wrapper
|
|
min-width: 320px
|
|
height: 120px
|
|
border: 1.5px solid var(--border-light-grey-color-1)
|
|
border-radius: 4px
|
|
|
|
.select
|
|
height: 40px
|
|
border: 1.5px solid var(--border-light-grey-color)
|
|
border-radius: 4px
|
|
|
|
.item-input
|
|
appearance: none
|
|
outline: none
|
|
height: 40px
|
|
&::-webkit-calendar-picker-indicator
|
|
display: none
|
|
-webkit-appearance: none
|
|
&::placeholder
|
|
color: var(--font-black-color-1)
|
|
|
|
.status-wrapper
|
|
min-width: 540px
|
|
height: 120px
|
|
border: 1.5px solid var(--border-light-grey-color-1)
|
|
border-radius: 4px
|
|
|
|
.button-work
|
|
background: #55CD76
|
|
&:active
|
|
background-color: #55CD76
|
|
opacity: 1
|
|
border: none
|
|
&:hover
|
|
background-color: #55CD76
|
|
opacity: 0.8
|
|
border: none
|
|
|
|
.button-vacation
|
|
background: var(--btn-blue-color-2)
|
|
opacity: 1
|
|
&:active
|
|
background: var(--btn-blue-color-2)
|
|
opacity: 1
|
|
border: none
|
|
&:hover
|
|
background: var(--btn-blue-color-2)
|
|
opacity: 0.8
|
|
border: none
|
|
|
|
.button-free
|
|
background: #9294A7
|
|
&:active
|
|
background-color: #9294A7
|
|
opacity: 1
|
|
border: none
|
|
&:hover
|
|
background-color: #9294A7
|
|
opacity: 0.8
|
|
border: none
|
|
|
|
.graph-template
|
|
width: 218px
|
|
height: 120px
|
|
|
|
.delete-button
|
|
background-color: var(--bg-event-red-color)
|
|
border: none
|
|
</style>
|