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

Merge branch 'master' into 'feature/создание-договора'

Browse Source 
# Conflicts:
#   src/components/base/BaseInputDate.vue
This commit is contained in:
Dmitriy Derbentsov
2022-12-26 22:12:44 +00:00
parent 145c55fec3 1759af4ed3
commit 1de5a26ac2
20 changed files with 893 additions and 2062 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@@ -4,7 +4,7 @@ WORKDIR /front
COPY . .
RUN npm install
RUN npm ci
RUN npm run build
FROM nginx:1.21.6-alpine as runner

2363
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -21,7 +21,7 @@
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-vuex": "~4.5.12",
"@vue/cli-plugin-vuex": "^5.0.8",
"@vue/cli-service": "~5.0.0",
"@webdiscus/pug-loader": "^2.9.4",
"eslint": "^8.25.0",

6
src/components/base/BaseCustomSelect.vue
View File

@@ -18,10 +18,10 @@
)
.item.py-2.px-4.cursor-pointer(
v-for="item in items",
:key="item.id",
:key="item?.id",
:class="{'center': center}",
@click="clickItem(item.id, item.label)"
) {{ item.label }}
@click="clickItem(item?.id, item?.label)"
) {{ item?.label }}
</template>
<script>

6
src/components/base/BaseInput.vue
View File

@@ -18,6 +18,7 @@
</template>
<script>
//TODO: Переписать v-model:value, убрать лишнии пропсы, добавить label или вынести в отдельную компоненту
export default {
name: "BaseInput",
props: {
@@ -32,9 +33,7 @@ export default {
iconPosition: {
default: "right",
},
placeholder: {
default: "Поиск",
},
placeholder: String,
widthInput: Number,
borderNone: Boolean,
disabled: Boolean,
@@ -49,6 +48,7 @@ export default {
order: -1
.right
order: 1
//TODO: Вынести grey borders в taiwindConfig
.input-wrapper
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px

4
src/components/base/BaseInputTime.vue
View File

@@ -26,9 +26,7 @@ export default {
iconPosition: {
default: "right",
},
placeholder: {
default: "Поиск",
},
placeholder: String,
widthInput: Number,
},
};

47
src/components/base/BaseRadioButtonsGroup.vue Normal file
View File

@@ -0,0 +1,47 @@
<template lang="pug">
.container.flex.flex-col.gap-y-2
.label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
.group.flex.gap-x-4.text-base(:class="{'flex-col gap-y-1': direction === 'col'}")
.option(v-for="item in items")
input.mr-2(
type="radio",
:id="item?.id",
:value="item?.value",
v-model="value"
)
span {{item?.label}}
</template>
<script>
export default {
name: "BaseRadioButtonsGroup",
emits: ["update:modelValue"],
props: {
modelValue: String,
radioButtonsLabel: String,
items: {
type: Array,
default: () => [],
},
direction: {
type: String,
default: "row",
},
},
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
},
};
</script>
<style lang="sass" scoped>
.label
color: var(--font-grey-color)
</style>

2
src/pages/calendar/TheCalendar.vue
View File

@@ -48,6 +48,7 @@
</template>
<script>
//TODO: Вынести emits в массив
import { fetchWrapper } from "../../shared/fetchWrapper.js";
import * as moment from "moment/moment";
import CalendarSchedule from "./components/CalendarSchedule.vue";
@@ -83,6 +84,7 @@ export default {
isOpenForm: false,
WORKING_STATUS: "WORKS",
changeFormWasClosed: false,
//TODO: Вынести eventStatuses в config
eventStatuses: [
{
id: 0,

1
src/pages/clients/components/ClientDetailInfoSection.vue
View File

@@ -170,6 +170,7 @@
</template>
<script>
//TODO: Разбить на несколько компонент
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
import BaseButton from "@/components/base/BaseButton";
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";

18
src/pages/clients/components/ClientTableDeleteModal.vue → src/pages/clients/components/ClientTableModal.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.flex.flex-col.mb-1.mt-4
span.font-medium.text-base.modal-text Вы действительно хотите удалить клиента?
span.font-medium.text-base.modal-text {{ bodyText }}
.flex.gap-x-3.mt-6.font-semibold
base-button(
outlined,
@@ -10,26 +10,22 @@
base-button(
outlined-red,
:size=40,
@click="transmitDeleteClient"
) Удалить
@click="clickConfirm"
) {{ confirmTitle }}
</template>
<script>
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "ClientTableDeleteModal",
name: "ClientTableModal",
components: {
BaseButton,
},
props: {
confirmTitle: String,
bodyText: String,
closeModal: Function,
deletedClientId: String,
},
methods: {
transmitDeleteClient() {
this.$emit("delete-client", this.deletedClientId);
this.closeModal();
},
clickConfirm: Function,
},
};
</script>

69
src/pages/clients/components/ClientsTable.vue
View File

@@ -32,7 +32,7 @@
:update-data-client="updateDataClient",
:fetch-data-clients="fetchDataClients",
:fetch-created-client-data="fetchCreatedClientData",
:create-medical-card="createMedicalCard",
:create-medical-card="medicalCardHandler",
:created-client-name="createdClientName",
@delete-client="deleteClientHandler",
@recover-client="clearDeletedRowId",
@@ -46,12 +46,15 @@
)
base-modal(
v-model="showModal",
title="Удалить клиента"
:title="titleModal",
)
client-table-delete-modal(
client-table-modal(
v-for="modal in modalConfig"
v-show="modal.view"
:close-modal="closeModal",
:deleted-client-id="deletedClientId",
@delete-client="writeDeletedRowId"
:click-confirm="modal.clickConfirm"
:confirm-title="modal.titleConfirm"
:body-text="modal.bodyText"
)
</template>
@@ -64,7 +67,7 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
import ClientTablePagination from "./ClientTablePagination.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import ClientTableDeleteModal from "./ClientTableDeleteModal.vue";
import ClientTableModal from "./ClientTableModal.vue";
import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
import BaseLoader from "@/components/Loader/BaseLoader.vue";
export default {
@@ -77,7 +80,7 @@ export default {
BaseClientFormCreate,
ClientTablePagination,
BaseModal,
ClientTableDeleteModal,
ClientTableModal,
FormCreateMedicalCard,
BaseLoader,
},
@@ -91,6 +94,23 @@ export default {
data() {
return {
modalConfig: [
{
name: "delete",
bodyText: "Вы действительно хотите удалить клиента?",
titleConfirm: "Удалить",
clickConfirm: this.writeDeletedRowId,
view: false,
},
{
name: "medical",
bodyText: "Медицинская карта отсутствует. Создать мед.карту?",
titleConfirm: "Создать",
clickConfirm: this.createMedicalCard,
view: false,
},
],
titleModal: "",
selectAll: false,
marked: [],
dataClients: [
@@ -108,7 +128,7 @@ export default {
length: 0,
},
showModal: false,
deletedClientId: "",
clientId: "",
deletedRowId: "",
clearingTextSearch: false,
showMedicalCard: false,
@@ -233,21 +253,38 @@ export default {
openModal() {
this.showModal = true;
},
createMedicalCard() {
this.showMedicalCard = true;
},
deleteClientHandler(id) {
this.deletedClientId = id;
medicalCardHandler() {
this.modalConfig = this.modalConfig.map((el) => {
return el.name === "medical"
? { ...el, view: true }
: { ...el, view: false };
});
this.titleModal = "Создать мед.карту";
this.openModal();
},
writeDeletedRowId(id) {
this.deletedRowId = id;
createMedicalCard() {
this.showMedicalCard = true;
this.closeModal();
},
deleteClientHandler(id) {
this.clientId = id;
this.modalConfig = this.modalConfig.map((el) => {
return el.name === "delete"
? { ...el, view: true }
: { ...el, view: false };
});
this.titleModal = "Удалить клиента";
this.openModal();
},
writeDeletedRowId() {
this.deletedRowId = this.clientId;
this.closeModal();
},
clearDeletedRowId() {
this.deletedRowId = "";
},
clearDeletedClientId() {
this.deletedClientId = "";
this.clientId = "";
},
changeClearingTextSearch() {
this.clearingTextSearch = false;

126
src/pages/clients/components/FormCreateMedicalCard.vue
View File

@@ -1,23 +1,32 @@
<template lang="pug">
.wrap.flex.flex-col.gap-y-6
.flex.flex.flex-col.gap-y-9
.wrapper.flex.flex-col.gap-y-6.justify-between
.flex.flex.flex-col.gap-y-6
span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
.flex.justify-center.items-center.gap-x-2
base-button.button(:size="32", :rounded="true")
span(v-if="isBaseData") 1
.icon-ok.text-xs(v-else)
span(:style="{color: 'var(--btn-blue-color)'}") Основное
.line.flex.mx-2
base-button.button(:class="{'active-button': !isIdentityDoc && isBaseData}", :size="32", :rounded="true")
span(v-if="isBaseData") 2
.icon-ok.text-xs(v-else)
span(:style="{color: !isBaseData ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") ДУЛ
.line.flex.mx-2
base-button.button(:class="{'active-button': !isPolicyDoc }", :size="32", :rounded="true") 3
span(:style="{color: isPolicyDoc ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Полис
medical-base-data(v-if="isBaseData", :change-base-data="changeBaseData")
medical-identity-documents(v-if="isIdentityDoc", :change-identity-doc="changeIdentityDoc")
medical-policy-documents(v-if="isPolicyDoc")
.flex.self-center
base-stepper(
:steps="steps",
:currentStep="currentStep"
)
component(v-bind:is="currentTabComponent")
.flex.justify-between
.flex
base-button.font-semibold(
:size="40",
@click="prevStep",
v-if="currentStep !== 0",
outlined,
) Назад
.flex
base-button.font-semibold(
:size="40",
@click="nextStep",
v-if="currentStep < steps.length-1",
) Далее
base-button.font-semibold(
:size="40",
@click="finish",
v-if="currentStep === steps.length-1"
) Создать медицинскую карту
</template>
<script>
@@ -28,6 +37,7 @@ import BaseSelect from "@/components/base/BaseSelect";
import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
import MedicalPolicyDocuments from "@/pages/medicalCard/components/MedicalPolicyDocuments";
import BaseStepper from "@/components/base/BaseStepper.vue";
export default {
name: "FormCreateMedicalCard",
@@ -39,68 +49,54 @@ export default {
MedicalBaseData,
MedicalIdentityDocuments,
MedicalPolicyDocuments,
BaseStepper,
},
data() {
return {
isBaseData: true,
isIdentityDoc: false,
isPolicyDoc: false,
currentStep: 0,
steps: [
{
id: 0,
label: "1",
value: "Основное",
component: "medical-base-data",
},
{
id: 1,
label: "2",
value: "ДУЛ",
component: "medical-identity-documents",
},
{
id: 2,
label: "3",
value: "Полис",
component: "medical-policy-documents",
},
],
};
},
computed: {
currentTabComponent: function () {
return this.steps[this.currentStep]?.component;
},
},
methods: {
changeBaseData() {
this.isBaseData = !this.isBaseData;
this.isIdentityDoc = !this.isIdentityDoc;
nextStep() {
this.currentStep += 1;
},
changeIdentityDoc() {
this.isIdentityDoc = !this.isIdentityDoc;
this.isPolicyDoc = !this.isPolicyDoc;
prevStep() {
this.currentStep -= 1;
},
finish() {},
},
};
</script>
<style lang="sass" scoped>
.wrap
.wrapper
width: 570px
height: fit-content
min-height: 485px
.services-wrapper
border: 1px solid var(--btn-grey-color)
border-radius: 8px
.list-services
overflow-y: auto
max-height: 280px
.input-date
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.button
&:hover
background-color: var(--btn-blue-color)
border: none
.active-button
background: var(--btn-grey-color)
color: var(--font-dark-blue-color)
border-color: var(--btn-grey-color)
&:hover
background-color: var(--btn-grey-color)
border: none
.line
width: 78px
border: 1.5px solid var(--btn-grey-color)
.place
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
color: var(--font-grey-color)
.counter
color: var(--font-grey-color)
</style>

2
src/pages/clients/components/TableCreatePackageDoc.vue
View File

@@ -37,7 +37,7 @@
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
.font-bold Услуги
.counter.text-smm Выберите подходищие из списка
.counter.text-smm Выберите подходящие из списка
.services-wrapper.flex.flex-col.pt-4.px-4
.flex.gap-x-2
base-input(

41
src/pages/medicalCard/components/MedicalBaseData.vue
View File

@@ -4,13 +4,22 @@
span.font-bold Основное
.flex.flex-col.gap-y-6
base-input.w-full(placeholder="ФИО*")
base-radio-buttons-group(
:items="gendersList",
radioButtonsLabel="Пол",
v-model="gender",
)
.flex.gap-x-4
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Дата рождения
base-input-date.input-date.h-10(:width-input="277")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm СНИЛС
base-input(:width-input="277", placeholder="000–000–000 00")
base-input(
:width-input="277",
placeholder="000–000–000 00",
v-mask="'###-###-### ##'"
)
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Адрес регистрации
@@ -29,9 +38,6 @@
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Email
base-input(:width-input="277", placeholder="user@yandex.ru")
.flex.py-2.justify-between
base-button(:size="40", @click="changeBaseData")
span.font-semibold Далее
</template>
<script>
@@ -40,13 +46,34 @@ import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
import BaseButton from "@/components/base/BaseButton";
import { mask } from "vue-the-mask";
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
export default {
name: "MedicalBaseData",
components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
components: {
BaseInput,
BaseInputDate,
BaseSelect,
BaseButton,
BaseRadioButtonsGroup,
},
directives: { mask },
props: {
changeBaseData: Function,
data() {
return {
gendersList: [
{
id: "1",
label: "Мужской",
value: "male",
},
{
id: "2",
label: "Женский",
value: "woman",
},
],
gender: "",
};
},
};
</script>

3
src/pages/medicalCard/components/MedicalIdentityDocuments.vue
View File

@@ -17,9 +17,6 @@
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Страховая оганизация
base-input(:width-input="277", placeholder="Введите название организации")
.flex.py-2
base-button(:size="40", @click="changeIdentityDoc")
span.font-semibold Далее
</template>
<script>

3
src/pages/medicalCard/components/MedicalPolicyDocuments.vue
View File

@@ -23,9 +23,6 @@
:width-input="277",
placeholder="+7 (915) 644–92–23"
)
.flex.py-2
base-button(:size="40")
span.font-semibold Создать медицинскую карту
</template>
<script>

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

@@ -1,19 +1,33 @@
<template lang="pug">
.wrapper.flex.w-full.relative.mx-2
.schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
schedule-header
schedule-header(
:start-month="startMonth",
@switch-previous-month="switchPreviousMonth",
@switch-next-month="switchNextMonth"
)
schedule-body(
:employee-list="employeeList",
:schedules-employee="fetchSchedulesEmployee",
:schedule-list="scheduleList",
:serialized="serialized",
:data-schedule="dataSchedule",
:buttons="buttons"
:buttons="buttons",
:start-month="startMonth",
:clear-employee="clearEmployee",
@new-date="createNewDate"
)
schedule-bar(
:data-schedule="dataSchedule",
:buttons="buttons",
:clear-employee="clearEmployee",
:times="times",
:create-schedule="postCreateSchedule"
)
schedule-bar(:data-schedule="dataSchedule", :select-work="selectWork", :buttons="buttons")
</template>
<script>
import * as moment from "moment";
import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
import ScheduleBody from "@/pages/schedule/components/ScheduleBody.vue";
@@ -25,6 +39,7 @@ export default {
return {
employeeList: [],
scheduleList: [],
clearEmployee: [],
serialized: [],
dataSchedule: {
status: "",
@@ -32,6 +47,7 @@ export default {
startTime: "",
endTime: "",
},
times: { start_time: "", end_time: "" },
buttons: [
{
class: "button-work",
@@ -39,7 +55,7 @@ export default {
work: "WORKS",
active: false,
color: "#55CD76",
text: "Р",
text: "'Р'",
},
{
class: "button-status",
@@ -47,19 +63,25 @@ export default {
work: "VACATION",
active: false,
color: "#D7D9FF",
text: "О",
text: "'О'",
},
{
class: "button-free",
name: "Статусы",
name: "Выходной",
work: "DAY_OFF",
active: false,
color: "#9294A7",
text: "В",
text: "'В'",
},
],
startMonth: moment().startOf("month"),
};
},
computed: {
endMonth() {
return this.startMonth.clone().endOf("month");
},
},
methods: {
fetchSchedules() {
fetchWrapper
@@ -70,14 +92,17 @@ export default {
.then(() => this.fetchSchedulesEmployee());
},
fetchSchedulesEmployee() {
this.employeeList.forEach((e) => {
this.scheduleList = [];
fetchWrapper
.get(`accounts/schedules/?employee=${e.id}`)
.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 = [];
@@ -114,9 +139,45 @@ export default {
}
});
this.serialized = serialized;
this.filterEmployee();
},
selectWork(work) {
this.dataSchedule.status = work;
filterEmployee() {
this.clearEmployee = [];
this.clearEmployee = this.employeeList.filter((item) =>
this.serialized.every((item2) => item2.id !== item.id)
);
},
postCreateSchedule() {
let currentEmployee = this.clearEmployee.find((e) => e.schedules);
fetchWrapper
.post("accounts/schedules/create/", {
employee: currentEmployee.id,
active_flg: true,
start_date: currentEmployee.schedules.start_date,
end_date: currentEmployee.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 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");
},
switchNextMonth() {
this.startMonth = this.startMonth.clone().add(1, "M");
},
},
watch: {
startMonth() {
this.fetchSchedulesEmployee();
},
},
mounted() {

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

@@ -1,20 +1,20 @@
<template lang="pug">
.wrapper-bar.flex.flex-col.gap-y-4
.flex.px-5.py-5.w-full.justify-around
.flex.px-5.py-5.w-full.justify-around.gap-x-4
.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 Статусы
.flex.justify-around(class="py-2.5")
base-button.font-semibold(
v-for="item in buttons",
:class="item.class" ,
:class="item.class",
:key="item",
:style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
@click="choiceSchedule(item.class)"
@@ -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, selectWork: Function, 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
@@ -90,7 +95,7 @@ export default {
color: var(--font-grey-color)
.status-wrapper
width: 690px
min-width: 690px
height: 102px
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px

90
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,18 +9,17 @@
: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(
:style="{opacity: changeOpacity(day)}"
) {{day.format("ddd")}}
.schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
.edit.flex.items-center.justify-center.h-9.w-9
.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.cursor-pointer(
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
v-for="day in result",
:key="day",
:id="schedule.id + day",
@@ -29,9 +28,9 @@
:style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
)
.flex {{day.format("YYYY-MM-DD") === choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
//- .schedule-body.flex.w-full
//- .edit.flex.items-center.justify-center.h-9.w-9
//- .flex.items-center.gap-x-8
.schedule-body.flex.w-full(v-if="clearEmployee")
.edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
.flex.icon-edit(v-if="currentEmployee.label")
//- base-button(
//- confirm,
//- rounded,
@@ -41,17 +40,25 @@
//- v-if="currentEmployee.label"
//- )
//- .icon-ok.text-xsm(class="pt-[3px]")
//- .name.flex.justify-center.items-center.cursor-pointer(
//- v-if="currentEmployee.label",
//- @click="openSelect"
//- )
//- span {{currentEmployee.label}}
//- .name.flex(v-if="!currentEmployee.label")
//- base-custom-select(
//- :items="ownersList",
//- v-model="currentEmployee",
//- placeholder="Добавить сотрудника",
//- :style="{border: 'none'}"
.name.flex.justify-center.items-center.cursor-pointer(
v-if="currentEmployee.label"
)
span {{currentEmployee.label}}
.name.flex(v-if="!currentEmployee.label")
base-custom-select(
:items="ownersList",
v-model="currentEmployee",
placeholder="Добавить сотрудника",
:style="{border: 'none', justifyContent: 'center'}"
)
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
v-if="currentEmployee.label",
v-for="day in result",
:key="day",
:id="currentEmployee.id + day",
@click="choiceCell(day, currentEmployee.id)",
:class="selectTime(day, currentEmployee.id)",
:style="{borderBottom: 'none'}"
)
</template>
@@ -75,12 +82,13 @@ export default {
serialized: Array,
dataSchedule: Object,
buttons: Array,
startMonth: Object,
clearEmployee: Array,
},
data() {
return {
days: "",
result: [],
startMonth: moment("2022-12-01"),
showSelect: false,
employee: [],
currentEmployee: {
@@ -99,9 +107,9 @@ export default {
},
computed: {
ownersList() {
if (this.employeeList) {
if (this.clearEmployee) {
let filteredArray = [];
this.employeeList.forEach((elem) => {
this.clearEmployee.forEach((elem) => {
filteredArray.push({
id: elem.id,
label: this.trimOwnerName(
@@ -119,6 +127,7 @@ export default {
this.setActiveButton();
return {
"--bg-color-status": this.activeButton?.color,
"--text-status": this.activeButton?.text,
};
},
},
@@ -142,6 +151,7 @@ export default {
this.dateInterval.id = id;
} else if (time.isAfter(this.dateInterval.start)) {
this.dateInterval.end = formatTime;
this.$emit("new-date", this.dateInterval);
} else this.dateInterval.start = formatTime;
},
selectTime(day, id) {
@@ -174,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;
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();
@@ -196,29 +206,18 @@ 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 currentDay = day.format("YYYY-MM-DD");
let current = day.format("YYYY-MM-DD");
return this.scheduleList.find(
(e) => currentDay === e.date && e.employee.id === employee
(e) => current === e.date && e.employee.id === employee
)?.date;
},
changeOpacity(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
? "0.6"
: "1";
},
openSelect(schedule) {
console.log(schedule);
},
selectDay(day) {
console.log(day);
},
},
mounted() {
@@ -232,7 +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: calc(100vw - 136px)
.schedule-body
&:hover
@@ -256,14 +257,12 @@ export default {
border-bottom: 1.5px solid var(--border-light-grey-color-1)
.name
min-width: 255px
max-width: 255px
width: 25%
border-right: 1.5px solid var(--border-light-grey-color-1)
color: var(--btn-blue-color)
.name-employee
min-width: 255px
max-width: 255px
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)
@@ -281,6 +280,9 @@ export default {
.status
background-color: var(--bg-color-status)
.status::before
content: var(--text-status)
.from-date
background: limegreen

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

@@ -6,6 +6,7 @@
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
base-button.left-arrow.mr-4(
@click="previousHandler",
left-icon="icon-down-arrow",
rounded,
secondary,
@@ -13,6 +14,7 @@
:size="32"
)
base-button.right-arrow.mr-6(
@click="nextHandler",
left-icon="icon-down-arrow",
rounded,
secondary,
@@ -20,21 +22,40 @@
:size="32"
)
.text.flex.items-center
.flex.text-xl Жмых Олег Анатольевич
span.text.font-medium.text-base {{ dateString }}
span.today.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
//.flex.text-xl Жмых Олег Анатольевич
base-button.font-semibold(:size="40", @click="openForm") Замена смен
</template>
<script>
import * as moment from "moment";
import BaseButton from "@/components/base/BaseButton.vue";
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
export default {
name: "ScheduleHeader",
components: { BaseButton, FormChangeShift },
props: {
startMonth: Object,
},
data() {
return {
showForm: false,
isCurrentMonth: true,
};
},
computed: {
dateString() {
return this.startMonth
.format("MMMM YYYY")
.split(" ")
.map((elem, index) => {
if (index === 0) return elem[0].toUpperCase() + elem.slice(1);
return elem;
})
.join(" ");
},
},
methods: {
openForm() {
this.showForm = true;
@@ -42,6 +63,19 @@ export default {
closeForm() {
this.showForm = false;
},
previousHandler() {
this.$emit("switch-previous-month");
},
nextHandler() {
this.$emit("switch-next-month");
},
},
watch: {
startMonth() {
this.isCurrentMonth =
this.startMonth.format("YYYY-MM-DD") ===
moment().date(1).format("YYYY-MM-DD");
},
},
};
</script>