WIP Перенесла компоненты
This commit is contained in:
Daria Golova
@@ -0,0 +1,195 @@
|
||||
<template lang="pug">
|
||||
medical-form-wrapper(
|
||||
v-for="(item, index) in list[0].data",
|
||||
:key="item.id"
|
||||
:title="item.name",
|
||||
:is-edit="item?.change",
|
||||
:open-edit="()=>openCard(index)",
|
||||
:cancel="()=>closeCard(index)"
|
||||
:tag="fillInspection || item?.change"
|
||||
)
|
||||
.protocol-body.flex.flex-col
|
||||
.flex.items-center.gap-x-11px(:class="{'open-header': item.change || fillInspection}")
|
||||
.flex.gap-x-4(:style="{height: item.change || fillInspection ? '300px' : ''}")
|
||||
.flex.flex-col.gap-y-1(:class="{'open-textarea': item.change || fillInspection}")
|
||||
.tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
|
||||
.tag.flex.items-center.px-3.cursor-pointer(v-for="tag in item.tags" :key="tag.id") {{tag.label}}
|
||||
base-input.px-3(v-if="item.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
|
||||
.filter.flex.flex-col.gap-y-4(v-if="item.change || fillInspection")
|
||||
.flex.gap-x-2
|
||||
base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
|
||||
q-icon(
|
||||
name="app:icon-search",
|
||||
size="20px",
|
||||
style="color: var(--font-grey-color)"
|
||||
)
|
||||
.button
|
||||
q-btn(
|
||||
icon="filter_alt",
|
||||
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
|
||||
padding="0"
|
||||
)
|
||||
.button
|
||||
q-btn(
|
||||
icon="app:sort-number",
|
||||
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
|
||||
padding="0"
|
||||
)
|
||||
.field.flex.flex-col.overflow-y-scroll(v-if="item.complaints")
|
||||
.checkbox.flex.flex-col(v-for="complaint in textSorting(item.complaints)")
|
||||
.letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
|
||||
.line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array")
|
||||
q-checkbox(
|
||||
dense,
|
||||
v-model="selected",
|
||||
:val="name?.label",
|
||||
:style="{border: 'none', width: '16px', height: '16px'}",
|
||||
|
||||
)
|
||||
.name.flex.items-center.font-medium.text-smm {{ name?.label }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseButton from "@/components/base/BaseButton.vue";
|
||||
import BaseInput from "@/components/base/BaseInput.vue";
|
||||
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "MedicalFormTagWrapper",
|
||||
components: { BaseButton, BaseInput, MedicalFormWrapper },
|
||||
props: {
|
||||
list: Array,
|
||||
inspection: Boolean,
|
||||
fillInspection: Boolean,
|
||||
openCard: Function,
|
||||
closeCard: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: [],
|
||||
abc: [
|
||||
"А",
|
||||
"Б",
|
||||
"В",
|
||||
"Г",
|
||||
"Д",
|
||||
"Е",
|
||||
"Ё",
|
||||
"Ж",
|
||||
"З",
|
||||
"И",
|
||||
"Й",
|
||||
"К",
|
||||
"Л",
|
||||
"М",
|
||||
"Н",
|
||||
"О",
|
||||
"П",
|
||||
"Р",
|
||||
"С",
|
||||
"Т",
|
||||
"У",
|
||||
"Ф",
|
||||
"Х",
|
||||
"Ц",
|
||||
"Ч",
|
||||
"Ш",
|
||||
"Щ",
|
||||
"Ы",
|
||||
"Э",
|
||||
"Ю",
|
||||
"Я",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
textSorting(arr) {
|
||||
let srt = [];
|
||||
this.abc.forEach((letter) => {
|
||||
arr.forEach((str) => {
|
||||
let finded = srt.find((obj) => obj.sym === letter);
|
||||
if (str.label[0] === letter) {
|
||||
if (!finded) {
|
||||
srt.push({ sym: letter, array: [{ label: str.label }] });
|
||||
} else if (finded.sym === letter)
|
||||
finded.array.push({ label: str.label });
|
||||
}
|
||||
});
|
||||
});
|
||||
return srt;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.protocol-body
|
||||
background: var(--default-white)
|
||||
border-radius: 4px
|
||||
|
||||
.icon
|
||||
background: var(--bg-light-grey)
|
||||
|
||||
.open-header
|
||||
justify-content: space-between
|
||||
|
||||
.open-textarea
|
||||
width: 800px
|
||||
padding: 4px
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
border-radius: 4px
|
||||
|
||||
.tag
|
||||
height: 32px
|
||||
background: var(--bg-light-grey)
|
||||
border-radius: 4px
|
||||
|
||||
.tag-wrap
|
||||
flex-wrap: wrap !important
|
||||
|
||||
.filter
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
border-radius: 4px
|
||||
padding: 16px 16px 0
|
||||
width: 360px
|
||||
|
||||
.button
|
||||
display: flex
|
||||
align-items: center
|
||||
width: 40px
|
||||
height: 40px
|
||||
justify-content: center
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
background: var(--bg-light-grey)
|
||||
|
||||
.field
|
||||
margin-right: -10px
|
||||
&::-webkit-scrollbar-track:vertical
|
||||
margin-bottom: 12px
|
||||
&::-webkit-scrollbar
|
||||
width: 4px
|
||||
|
||||
.checkbox
|
||||
width: 328px
|
||||
|
||||
.line
|
||||
border-bottom: 1px solid var(--bg-light-grey)
|
||||
min-height: 36px
|
||||
|
||||
.letter
|
||||
width: 18px
|
||||
height: 34px
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.name
|
||||
width: 268px
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
.q-checkbox :deep(.q-checkbox__bg)
|
||||
border-radius: 4px
|
||||
border: 1.5px solid var(--font-grey-color)
|
||||
|
||||
.q-checkbox :deep(.q-checkbox__inner:before)
|
||||
background: none !important
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template lang="pug">
|
||||
.w-full.border.rounded.border-grey.p-4.background.cursor-pointer()
|
||||
.flex.justify-between(:style="{'margin-bottom': '26px'}")
|
||||
.flex.flex-col.gap-y-1
|
||||
span.text-xl.font-bold.color-blue.line-height {{ `${protocolDate?.year} г.` }}
|
||||
.text-smm.color-grey.flex.items-center.gap-x-6px.line-height
|
||||
span.align-middle {{ protocolDate?.dayMonth }}
|
||||
.rounded-full.h-1.w-1.background-grey
|
||||
span.align-middle {{ `${time?.start} - ${time?.end}` }}
|
||||
.flex.items-center.justify-center.h-6.w-6.rounded(
|
||||
:style="statusСolors"
|
||||
)
|
||||
img.teeth-icon(src="@/assets/icons/teeth.svg")
|
||||
.flex.items-center.gap-x-2
|
||||
base-avatar(:size="40")
|
||||
img.object-cover.h-full(
|
||||
v-if="protocolData.employee?.photo"
|
||||
:src="protocolData.employee?.photo"
|
||||
alt="avatar"
|
||||
)
|
||||
span.text-sm.color-blue(v-else) {{ avatar }}
|
||||
.flex.flex-col
|
||||
span.line-height.text-sm.color-blue.mb-2px {{ employeeName }}
|
||||
span.line-height.text-xxs.color-grey {{ protocolData.employee?.job_title}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseAvatar from "@/components/base/BaseAvatar.vue";
|
||||
import * as moment from "moment/moment";
|
||||
export default {
|
||||
name: "MedicalProtocolCard",
|
||||
components: { BaseAvatar },
|
||||
props: {
|
||||
protocolData: Object,
|
||||
},
|
||||
computed: {
|
||||
avatar() {
|
||||
let firstName = this.protocolData?.employee?.first_name
|
||||
? this.protocolData.employee?.first_name[0]
|
||||
: this.protocolData.employee?.last_name[1];
|
||||
return this.protocolData.employee?.last_name[0] + firstName;
|
||||
},
|
||||
employeeName() {
|
||||
let firstName = this.protocolData?.employee?.first_name
|
||||
? ` ${this.protocolData.employee.first_name[0]}.`
|
||||
: "";
|
||||
let patronymic = this.protocolData?.employee?.patronymic
|
||||
? ` ${this.protocolData.employee.patronymic[0]}.`
|
||||
: "";
|
||||
return this.protocolData.employee?.last_name + firstName + patronymic;
|
||||
},
|
||||
statusСolors() {
|
||||
switch (this.protocolData?.status) {
|
||||
case "filled":
|
||||
return {
|
||||
"background-color": "var(--bg-event-green-color)",
|
||||
};
|
||||
case "partially filled":
|
||||
return {
|
||||
"background-color": "var(--bg-event-orange-color)",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
"background-color": "var(--border-red-color)",
|
||||
};
|
||||
}
|
||||
},
|
||||
protocolDate() {
|
||||
let date = moment
|
||||
.parseZone(this.protocolData?.start)
|
||||
.format("DD.MM.YYYY")
|
||||
.split(".");
|
||||
return {
|
||||
year: date[2],
|
||||
dayMonth: date[0] + "." + date[1],
|
||||
};
|
||||
},
|
||||
time() {
|
||||
return {
|
||||
start: moment.parseZone(this.protocolData?.start).format("HH:mm"),
|
||||
end: moment.parseZone(this.protocolData?.end).format("HH:mm"),
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.background
|
||||
background-color: var(--default-white)
|
||||
.background:hover
|
||||
background-color: var(--bg-light-grey)
|
||||
.color-grey
|
||||
color: var(--font-grey-color)
|
||||
.background-grey
|
||||
background-color: var(--font-grey-color)
|
||||
.border-grey
|
||||
border-color: var(--border-grey-color)
|
||||
.color-blue
|
||||
color: var(--font-dark-blue-color)
|
||||
.line-height
|
||||
line-height: 135%
|
||||
.teeth-icon
|
||||
width: 16px
|
||||
height: 16px
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template lang="pug">
|
||||
.modal.pt-6
|
||||
.flex.gap-x-4.mb-4
|
||||
base-input-date(
|
||||
v-model="protocolData.date"
|
||||
label="Дата осмотра",
|
||||
placeholder="Выберите дату"
|
||||
:width="202",
|
||||
type="date",
|
||||
textColor="var(--font-dark-blue-color)"
|
||||
outlined,
|
||||
)
|
||||
base-input-time(
|
||||
v-model="protocolData.startTime"
|
||||
label="Время осмотра",
|
||||
:width="202",
|
||||
outlined,
|
||||
type="time",
|
||||
textColor="var(--font-dark-blue-color)",
|
||||
placeholder="Выберите время"
|
||||
)
|
||||
.flex.flex-col.gap-y-6px
|
||||
span.color-grey.line-height.text-sm.font-semibold Врач
|
||||
.flex.gap-x-2
|
||||
base-avatar(:size="40")
|
||||
img.object-cover.h-full(
|
||||
v-if="userData?.photo",
|
||||
:src="userData?.photo",
|
||||
alt="avatar"
|
||||
)
|
||||
span.text-sm.color-blue(v-else) {{ avatar }}
|
||||
.flex.flex-col
|
||||
span.text-sm.color-blue.line-height.mb-2px {{ employeeName }}
|
||||
span.color-grey.line-height.text-sm {{ userData?.job_title ? userData?.job_title : "Терапевт" }}
|
||||
.flex.gap-2.mt-8
|
||||
q-btn(
|
||||
color="primary",
|
||||
outline,
|
||||
size="16px",
|
||||
no-caps,
|
||||
label="Отменить"
|
||||
:style="{width: '126px', height: '40px'}",
|
||||
padding="0",
|
||||
@click="changeShownCreateModal(false)"
|
||||
)
|
||||
q-btn(
|
||||
color="primary",
|
||||
size="16px",
|
||||
no-caps,
|
||||
label="Создать осмотр"
|
||||
:style="{width: '174px', height: '40px'}",
|
||||
padding="0",
|
||||
@click="saveProtocol"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInput from "@/components/base/BaseInput.vue";
|
||||
import BaseAvatar from "@/components/base/BaseAvatar.vue";
|
||||
import BaseInputDate from "@/components/base/BaseInputDate.vue";
|
||||
import BaseInputTime from "@/components/base/BaseInputTime.vue";
|
||||
import * as moment from "moment/moment";
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "MedicalProtocolCreateModal",
|
||||
components: {
|
||||
BaseInput,
|
||||
BaseAvatar,
|
||||
BaseInputDate,
|
||||
BaseInputTime,
|
||||
},
|
||||
props: {
|
||||
changeShownCreateModal: Function,
|
||||
createInspection: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
protocolData: {
|
||||
date: new Date(),
|
||||
startTime: moment().format("HH:mm"),
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
userData: "getUserData",
|
||||
}),
|
||||
avatar() {
|
||||
let firstName = this.userData?.first_name
|
||||
? this.userData?.first_name[0]
|
||||
: this.userData?.last_name[1];
|
||||
return this.userData?.last_name[0] + firstName;
|
||||
},
|
||||
employeeName() {
|
||||
let firstName = this.userData?.first_name
|
||||
? ` ${this.userData?.first_name}`
|
||||
: "";
|
||||
let patronymic = this.userData?.patronymic
|
||||
? ` ${this.userData?.patronymic}`
|
||||
: "";
|
||||
return this.userData?.last_name + firstName + patronymic;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
createProtocol: "createProtocol",
|
||||
}),
|
||||
saveProtocol() {
|
||||
if (
|
||||
!Object.keys(this.protocolData).every((key) => this.protocolData[key])
|
||||
) {
|
||||
return;
|
||||
}
|
||||
let time = this.protocolData.startTime.split(":");
|
||||
let start = moment(this.protocolData.date).hour(time[0]).minute(time[1]);
|
||||
let createdProtocol = {
|
||||
start: start.isValid() ? start.format() : null,
|
||||
end: start.isValid() ? start.add(30, "m").format() : null,
|
||||
status: null,
|
||||
};
|
||||
this.createProtocol(createdProtocol);
|
||||
this.changeShownCreateModal(false);
|
||||
this.createInspection();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.modal
|
||||
width: 422px
|
||||
.color-grey
|
||||
color: var(--font-grey-color)
|
||||
.line-height
|
||||
line-height: 135%
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template lang="pug">
|
||||
.protocols-wrapper.h-full.flex.flex-col.gap-y-2
|
||||
.flex.font-bold.text-6xl.items-center.h-full.justify-center(
|
||||
v-if="!inspection && !fillInspection"
|
||||
:style="{color: 'var(--font-grey-color)'}"
|
||||
) Выберите осмотр
|
||||
.flex.flex-col.gap-y-2(v-else)
|
||||
.protocol.flex.justify-between.p-6(v-for="elem in list")
|
||||
.flex.font-bold.text-6xl {{elem.label}}
|
||||
.flex.gap-x-4
|
||||
.button
|
||||
q-btn(
|
||||
icon="print",
|
||||
size="20px",
|
||||
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
|
||||
padding="0"
|
||||
)
|
||||
.button
|
||||
q-btn(
|
||||
icon="app:basket",
|
||||
size="20px",
|
||||
:style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
|
||||
padding="0"
|
||||
)
|
||||
medical-form-tag-wrapper(
|
||||
v-if="inspection || fillInspection",
|
||||
:list="list",
|
||||
:inspection="inspection",
|
||||
:fill-inspection="fillInspection"
|
||||
:open-card="openCard",
|
||||
:close-card="closeCard"
|
||||
)
|
||||
.protocol.flex.justify-between.p-6(v-if="fillInspection")
|
||||
.flex.h-fit.w-fit.gap-2
|
||||
base-button.text-base.font-semibold(outlined, :size="40") Отменить
|
||||
base-button.text-base.font-semibold(:size="40") Сохранить
|
||||
.flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
|
||||
.flex.font-semibold.text-7xl 0%
|
||||
.flex.font-medium.text-smm.w-20 заполнение осмотра
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MedicalFormTagWrapper from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTagWrapper.vue";
|
||||
import BaseButton from "@/components/base/BaseButton.vue";
|
||||
|
||||
export default {
|
||||
name: "MedicalProtocolsInspection",
|
||||
components: {
|
||||
MedicalFormTagWrapper,
|
||||
BaseButton,
|
||||
},
|
||||
props: { inspection: Boolean, fillInspection: Boolean },
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Первичный осмотр 2023 года",
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
change: false,
|
||||
name: "Жалобы",
|
||||
tags: [
|
||||
{ id: 1, label: "Боль при приеме сладкой пищи" },
|
||||
{ id: 2, label: "Жжение языка" },
|
||||
{ id: 3, label: "Кровоточивость десен" },
|
||||
{ id: 4, label: "Лечение у ортодонта не проводилось" },
|
||||
{ id: 5, label: "Ранее зубы лечили в ЛПУ" },
|
||||
{ id: 6, label: "Удаление зуба" },
|
||||
],
|
||||
complaints: [
|
||||
{ id: 1, label: "Ранее зубы лечили в ЛПУ" },
|
||||
{ id: 2, label: "Жжение языка" },
|
||||
{ id: 3, label: "Кровоточивость десен" },
|
||||
{ id: 4, label: "Лечение у ортодонта не проводилось" },
|
||||
{ id: 5, label: "Уныние зуба" },
|
||||
{ id: 6, label: "Боль при приеме сладкой пищи" },
|
||||
{ id: 7, label: "Удаление зуба" },
|
||||
{ id: 2, label: "Жжение языка" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
change: false,
|
||||
name: "Аллергологический анамнез",
|
||||
tags: [],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
change: false,
|
||||
name: "Принимаемые лекарственные препараты",
|
||||
tags: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openCard(index) {
|
||||
this.list[0].data[index].change = true;
|
||||
},
|
||||
closeCard(index) {
|
||||
this.list[0].data[index].change = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.protocols-wrapper
|
||||
flex: 1
|
||||
overflow-y: auto
|
||||
&::-webkit-scrollbar
|
||||
width: 0
|
||||
|
||||
.protocol
|
||||
background: var(--default-white)
|
||||
width: 100%
|
||||
height: 80px
|
||||
border-radius: 4px
|
||||
|
||||
.button
|
||||
display: flex
|
||||
align-items: center
|
||||
width: 40px
|
||||
height: 40px
|
||||
justify-content: center
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
background: var(--bg-light-grey)
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
<template lang="pug">
|
||||
.list-wrapper.h-full.flex.gap-y-1.flex-col
|
||||
.p-4.rounded.background
|
||||
q-btn(
|
||||
color="primary",
|
||||
size="16px",
|
||||
label="Создать осмотр",
|
||||
no-caps,
|
||||
icon="add",
|
||||
:style="{width: '100%', height: '40px'}"
|
||||
padding="0",
|
||||
@click="changeShownCreateModal(true)"
|
||||
)
|
||||
.p-4.rounded.background.list
|
||||
.flex
|
||||
base-select(
|
||||
:style="{flex: 1}",
|
||||
:items="sortingYears",
|
||||
v-model="sortingYear",
|
||||
clearable
|
||||
)
|
||||
q-btn.ml-2(
|
||||
icon="app:sort-number",
|
||||
:style="{width: '40px', height: '40px'}",
|
||||
padding="0",
|
||||
:class="sortingClass",
|
||||
@click="invertSorting"
|
||||
)
|
||||
.flex.py-4.w-full.color-grey.text-base.justify-center
|
||||
span.opacity-50 {{ `Осмотров: ${sortingProtocols?.length}` }}
|
||||
.flex.flex-col.gap-y-2
|
||||
medical-protocol-card(
|
||||
v-for="protocol in sortingProtocols", :key="protocol.id",
|
||||
:protocol-data="protocol",
|
||||
@click="openInspection"
|
||||
)
|
||||
base-modal(
|
||||
v-model="showModal",
|
||||
title="Создание осмотра"
|
||||
)
|
||||
medical-protocol-create-modal(
|
||||
:change-shown-create-modal="changeShownCreateModal",
|
||||
:create-inspection="createInspection"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseSelect from "@/components/base/BaseSelect.vue";
|
||||
import BaseAvatar from "@/components/base/BaseAvatar.vue";
|
||||
import MedicalProtocolCard from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCard.vue";
|
||||
import BaseModal from "@/components/base/BaseModal.vue";
|
||||
import MedicalProtocolCreateModal from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "MedicalProtocolsList",
|
||||
components: {
|
||||
BaseSelect,
|
||||
BaseAvatar,
|
||||
MedicalProtocolCard,
|
||||
BaseModal,
|
||||
MedicalProtocolCreateModal,
|
||||
},
|
||||
props: {
|
||||
openInspection: Function,
|
||||
createInspection: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sorting: false,
|
||||
sortingYear: "",
|
||||
activeProtocolId: 1,
|
||||
showModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
protocolsData: (state) => state.medical.protocolsData,
|
||||
}),
|
||||
sortingClass() {
|
||||
return this.sorting
|
||||
? {
|
||||
"sort-icon-active": true,
|
||||
}
|
||||
: {
|
||||
"sort-icon-default": true,
|
||||
};
|
||||
},
|
||||
sortingYears() {
|
||||
if (!this.protocolsData) return [];
|
||||
let years = this.protocolsData
|
||||
.map((elem) => {
|
||||
return elem?.start.slice(0, 4);
|
||||
})
|
||||
.sort((first, second) => second - first);
|
||||
return this.sorting ? [...new Set(years.reverse())] : [...new Set(years)];
|
||||
},
|
||||
sortingProtocols() {
|
||||
if (!this.protocolsData) return [];
|
||||
let protocols = [];
|
||||
this.protocolsData.forEach((elem) =>
|
||||
protocols.push({
|
||||
id: elem.id,
|
||||
employee: {
|
||||
last_name: elem.employee?.last_name,
|
||||
first_name: elem.employee?.first_name,
|
||||
patronymic: elem.employee?.patronymic,
|
||||
job_title: elem.employee?.job_title,
|
||||
photo: elem.employee?.photo,
|
||||
},
|
||||
start: elem.start,
|
||||
end: elem.end,
|
||||
status: elem.status,
|
||||
})
|
||||
);
|
||||
if (this.sortingYear) {
|
||||
protocols = protocols.filter(
|
||||
(elem) => elem.start.slice(0, 4) === this.sortingYear
|
||||
);
|
||||
}
|
||||
let sorted = protocols.sort((first, second) => {
|
||||
let firstDate = first?.start.split("T")[0];
|
||||
let secondDate = second?.start.split("T")[0];
|
||||
if (firstDate > secondDate) return 1;
|
||||
if (firstDate < secondDate) return -1;
|
||||
return 0;
|
||||
});
|
||||
if (this.sorting) return sorted;
|
||||
return sorted.reverse();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
invertSorting() {
|
||||
this.sorting = !this.sorting;
|
||||
},
|
||||
changeShownCreateModal(value) {
|
||||
this.showModal = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.list-wrapper
|
||||
width: 19.6%
|
||||
.list
|
||||
height: calc(100% - 76px)
|
||||
overflow-y: auto
|
||||
&::-webkit-scrollbar
|
||||
width: 0
|
||||
.background
|
||||
background-color: var(--default-white)
|
||||
.sort-icon-default
|
||||
background-color: var(--bg-light-grey)
|
||||
color: var(--font-grey-color)
|
||||
.sort-icon-active
|
||||
background-color: var(--btn-blue-color)
|
||||
color: var(--default-white)
|
||||
.color-grey
|
||||
color: var(--font-grey-color)
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template lang="pug">
|
||||
.wrapper.flex.gap-x-2
|
||||
medical-protocols-list(:open-inspection="openInspection", :create-inspection="createInspection")
|
||||
medical-protocols-inspection(:inspection="inspection", :fill-inspection="fillInspection")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MedicalProtocolsList from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue";
|
||||
import MedicalProtocolsInspection from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue";
|
||||
export default {
|
||||
name: "MedicalProtocolsWrapper",
|
||||
components: { MedicalProtocolsList, MedicalProtocolsInspection },
|
||||
data() {
|
||||
return {
|
||||
inspection: false,
|
||||
fillInspection: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openInspection() {
|
||||
this.inspection = true;
|
||||
this.fillInspection = false;
|
||||
},
|
||||
createInspection() {
|
||||
this.fillInspection = true;
|
||||
this.inspection = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.wrapper
|
||||
flex: 1
|
||||
overflow-y: auto
|
||||
</style>
|
||||
Reference in New Issue
Block a user