Merge branch 'ASTRA-102' into 'master'
[WIP] Добавил адаптив на форму пациентов See merge request andrusyakka/urban-couscous!404
This commit is contained in:
Vasiliy Gavrilin
@@ -1,6 +1,6 @@
|
||||
<template lang="pug">
|
||||
.w-full.flex.gap-x-2
|
||||
calendar-open-sidebar(:class="{'close': !isOpen, 'active': isOpen}" :open-sidebar="openSidebar")
|
||||
calendar-open-sidebar.close(:class="{'active': isOpen}", :open-sidebar="openSidebar")
|
||||
calendar-sidebar.-ml-2(v-if="!isOpen", :open-sidebar="openSidebar")
|
||||
calendar-wrapper
|
||||
</template>
|
||||
|
||||
@@ -1,77 +1,77 @@
|
||||
<template lang="pug">
|
||||
.flex.flex-col.gap-y-1
|
||||
.item.flex.flex-col
|
||||
.form.flex.items-center.justify-end.py-4.pr-4.rounded-t
|
||||
q-btn.rotate-180(
|
||||
@click="openSidebar",
|
||||
dense,
|
||||
padding="8px",
|
||||
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
|
||||
.form.flex.items-center.justify-end.py-4.pr-4.rounded-t
|
||||
q-btn.rotate-180(
|
||||
@click="openSidebar",
|
||||
dense,
|
||||
padding="8px",
|
||||
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
|
||||
)
|
||||
img(:src="arrow")
|
||||
.form.flex.p-4
|
||||
q-btn(
|
||||
color="primary",
|
||||
size="16px",
|
||||
label="Создать запись",
|
||||
no-caps,
|
||||
icon="add",
|
||||
:style="{width: '100%', height: '40px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.flex-col.gap-y-1
|
||||
q-expansion-item.expansion.font-bold.text-xm(
|
||||
v-for="(elem, index) in patientList",
|
||||
expand-separator,
|
||||
:label="elem.label",
|
||||
@click="choiceForm(elem.choice, index)",
|
||||
:class="{'patient': elem.label === 'Пациенты'}"
|
||||
)
|
||||
.select.flex.flex-col.font-medium.text-smm.px-4(
|
||||
v-if="elem.label !== 'Пациенты'",
|
||||
v-for="item in elem.data"
|
||||
)
|
||||
img(:src="arrow")
|
||||
.form.flex.p-4
|
||||
q-btn(
|
||||
color="primary",
|
||||
size="16px",
|
||||
label="Создать запись",
|
||||
no-caps,
|
||||
icon="add",
|
||||
:style="{width: '100%', height: '40px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.flex-col.gap-y-1(v-for="elem in patientList")
|
||||
q-expansion-item.expansion.font-bold.text-xm(
|
||||
expand-separator
|
||||
:label="elem.label",
|
||||
:class="{'patient': elem.label === 'Пациенты'}"
|
||||
)
|
||||
.select.flex.flex-col.font-medium.text-smm.px-4(
|
||||
v-if="elem.label !== 'Пациенты'",
|
||||
v-for="item in elem.data"
|
||||
.status.flex.items-center.gap-x-1.px-2
|
||||
img(:src="item.icon")
|
||||
span {{item.name}}
|
||||
.flex.flex-col.p-4.pb-0(:class="choiceState()", v-else)
|
||||
.flex.h-8.w-full.items-center.justify-between
|
||||
base-input(
|
||||
v-model="foundPerson",
|
||||
debounce="10",
|
||||
@keyup.enter="searchPerson",
|
||||
@input="searchPerson",
|
||||
id="input",
|
||||
placeholder="Найти пациента...",
|
||||
outlined,
|
||||
:width="160",
|
||||
iconLeft,
|
||||
fontSize="12px",
|
||||
lineHeight="16px",
|
||||
textColor="var(--font-grey-color)"
|
||||
)
|
||||
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
|
||||
q-btn.btn.ml-2(
|
||||
@click="sortPerson(elem.data)",
|
||||
icon="app:sort-number",
|
||||
:style="{width: '32px', height: '32px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
|
||||
@click="checkAll(elem.data)"
|
||||
)
|
||||
.status.flex.items-center.gap-x-1.px-2
|
||||
img(:src="item.icon")
|
||||
span {{item.name}}
|
||||
.flex.flex-col.p-4.pb-0(v-else)
|
||||
.flex.h-8.w-full.items-center.justify-between
|
||||
base-input(
|
||||
v-model="foundPerson",
|
||||
debounce="10",
|
||||
@keyup.enter="searchPerson",
|
||||
@input="searchPerson",
|
||||
id="input",
|
||||
placeholder="Найти пациента...",
|
||||
outlined,
|
||||
:width="160",
|
||||
iconLeft,
|
||||
fontSize="12px",
|
||||
lineHeight="16px",
|
||||
textColor="var(--font-grey-color)"
|
||||
)
|
||||
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
|
||||
q-btn.btn.ml-2(
|
||||
@click="sortPerson(elem.data)",
|
||||
icon="app:sort-number",
|
||||
:style="{width: '32px', height: '32px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.flex-col
|
||||
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
|
||||
@click="checkAll(elem.data)"
|
||||
)
|
||||
span Все
|
||||
img(v-if="selectAll(elem.data)", :src="icon_ok")
|
||||
.person-wrapper.flex.flex-col
|
||||
.person.items-center.flex.justify-between.py-2.cursor-pointer(
|
||||
v-for="(person, index) in choiceData(elem.data)",
|
||||
@click="checkPerson(index, elem.data)"
|
||||
)
|
||||
.flex.items-center.gap-x-2
|
||||
img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
|
||||
.flex.flex-col.font-medium
|
||||
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
|
||||
.text.text-xsx {{person.birthday}}
|
||||
img.h-6.w-6(v-if="person.check", :src="icon_ok")
|
||||
span Все
|
||||
img(v-if="selectAll(elem.data)", :src="icon_ok")
|
||||
.person-wrapper.flex.flex-col
|
||||
.person.items-center.flex.justify-between.py-2.cursor-pointer(
|
||||
v-for="(person, index) in choiceData(elem.data)",
|
||||
@click="checkPerson(index, elem.data)"
|
||||
)
|
||||
.flex.items-center.gap-x-2
|
||||
img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
|
||||
.flex.flex-col.font-medium
|
||||
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
|
||||
.text.text-xsx {{person.birthday}}
|
||||
img.h-6.w-6(v-if="person.check", :src="icon_ok")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -96,6 +96,22 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
choiceState() {
|
||||
let num = 0;
|
||||
this.patientList.forEach((e) => {
|
||||
if (e.choice) num += 1;
|
||||
});
|
||||
return {
|
||||
one: num === 1,
|
||||
two: num === 2,
|
||||
three: num === 3,
|
||||
};
|
||||
},
|
||||
choiceForm(choice, idx) {
|
||||
if (choice)
|
||||
return (this.patientList.find((e) => e.id === idx).choice = false);
|
||||
this.patientList.find((e) => e.id === idx).choice = true;
|
||||
},
|
||||
trimOwnerName(lastName, firstName, patronymic) {
|
||||
let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
|
||||
let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
|
||||
@@ -138,12 +154,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.one
|
||||
max-height: calc(100vh - 394px)
|
||||
|
||||
.two
|
||||
max-height: calc(100vh - 498px)
|
||||
|
||||
.three
|
||||
max-height: calc(100vh - 632px)
|
||||
|
||||
.form
|
||||
background: var(--default-white)
|
||||
width: 100%
|
||||
height: 72px
|
||||
|
||||
.expansion
|
||||
height: 54px
|
||||
background: var(--default-white)
|
||||
border-radius: 4px
|
||||
color: var(--font-dark-blue-color)
|
||||
@@ -162,6 +188,7 @@ export default {
|
||||
|
||||
.q-expansion-item
|
||||
border-radius: 0
|
||||
height: 100%
|
||||
|
||||
.q-expansion-item :deep(.q-separator)
|
||||
display: none
|
||||
@@ -187,15 +214,17 @@ export default {
|
||||
.text
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.q-expansion-item :deep(.q-item)
|
||||
height: 54px
|
||||
|
||||
.person-wrapper
|
||||
height: 272px
|
||||
overflow-y: auto
|
||||
margin-right: -10px
|
||||
&::-webkit-scrollbar
|
||||
width: 4px
|
||||
&::-webkit-scrollbar-track:vertical
|
||||
margin-top: -26px
|
||||
margin-bottom: 8px
|
||||
margin-bottom: 26px
|
||||
|
||||
.person
|
||||
height: 56px
|
||||
|
||||
@@ -10,23 +10,28 @@ import not_filled from "@/assets/icons/medcard_not_filled.svg";
|
||||
export const patientList = [
|
||||
{
|
||||
label: "Статус приема",
|
||||
id: 0,
|
||||
data: [
|
||||
{ name: "Не принят", icon: not_accepted },
|
||||
{ name: "Принят", icon: accepted },
|
||||
{ name: "Отказ", icon: rejected },
|
||||
{ name: "На приеме", icon: reception },
|
||||
],
|
||||
choice: false,
|
||||
},
|
||||
{
|
||||
label: "Первичная медкарта",
|
||||
id: 1,
|
||||
data: [
|
||||
{ name: "Не заполнена", icon: not_filled },
|
||||
{ name: "Частично заполнена", icon: partially_filled },
|
||||
{ name: "Заполнена", icon: filled },
|
||||
],
|
||||
choice: false,
|
||||
},
|
||||
{
|
||||
label: "Пациенты",
|
||||
id: 2,
|
||||
data: [
|
||||
{
|
||||
id: 0,
|
||||
@@ -128,5 +133,6 @@ export const patientList = [
|
||||
check: false,
|
||||
},
|
||||
],
|
||||
choice: false,
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user