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:
Daria Golova
2023-07-26 18:26:24 +03:00
parent 2bb879c0cf
commit a747c1820d
27 changed files with 461 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
View File

@@ -91,7 +91,7 @@ export default {
<style lang="sass" scoped>
.header
border-bottom: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
.priority
height: 8px

4
src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
View File

@@ -120,8 +120,8 @@ export default {
width: 340px
.patient
border-bottom: 1px solid var(--gray-scondary)
border-right: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
border-right: 1px solid var(--gray-secondary)
margin-right: 8px
&:last-child
border-bottom: none

2
src/pages/medcards/components/MedcardFormWrapper.vue
View File

@@ -29,7 +29,7 @@ export default {
.header
max-height: 62px
border-bottom: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
.grey-color
color: var(--font-grey-color)

17
src/pages/medcards/components/MedicalCardList.vue
View File

@@ -1,17 +0,0 @@
<template lang="pug">
.medical-wrapper.flex.h-full.rounded.w-full
list-header
</template>
<script>
import ListHeader from "@/pages/medcards/components/MedicalCardListHeader.vue";
export default {
name: "MedicalCardList",
components: { ListHeader },
};
</script>
<style lang="sass" scoped>
.medical-wrapper
background-color: var(--default-white)
</style>

19
src/pages/medcards/components/MedicalCardSearch.vue Normal file
View File

@@ -0,0 +1,19 @@
<template lang="pug">
.medical-wrapper.flex.h-full.rounded.w-full.flex-col
list-header
list-contents
</template>
<script>
import ListHeader from "@/pages/medcards/components/MedicalCardSearchHeader.vue";
import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue";
export default {
name: "MedicalCardSearch",
components: { ListHeader, ListContents },
};
</script>
<style lang="sass" scoped>
.medical-wrapper
background-color: var(--default-white)
</style>

4
src/pages/medcards/components/MedicalCardListHeader.vue → src/pages/medcards/components/MedicalCardSearchHeader.vue
View File

@@ -26,7 +26,7 @@ import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "MedicalCardListHeader",
name: "MedicalCardSearchHeader",
components: { BaseInput, BaseSelect, BaseButton },
data() {
return {
@@ -65,7 +65,7 @@ export default {
<style lang="sass" scoped>
.header-wrapper
height: 72px
border-bottom: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
.search-icon :deep(path)
fill: var(--font-grey-color)

194
src/pages/medcards/components/MedicalCardSearchList.vue Normal file
View File

@@ -0,0 +1,194 @@
<template lang="pug">
.list-wrapper.rounded.w-full(id="listWrapper")
.w-full.header.h-10.flex
.h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
v-for="field in headerConfig",
:key="field.title",
:style="headerStyle(field)"
) {{ field.title }}
.h-full.w-8(v-if="scrollPresence")
.body.w-full
row(
v-for="medcard in medcardsInfo",
:key="medcard.id"
:scroll-presence="scrollPresence",
:header-style="headerStyle",
:medcard-info="medcard",
)
</template>
<script>
import { searchListConfig } from "@/pages/medcards/utils/medcardsConfig.js";
import Row from "@/pages/medcards/components/MedicalCardSearchRow.vue";
import avatar from "@/assets/images/person.png";
export default {
name: "MedicalCardSearchList",
components: { Row },
data() {
return {
headerConfig: searchListConfig,
//TODO Взять из конфига
medcardsInfo: [
{
id: 1,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 15,
priority: 1,
medcard: "6112 813812",
},
{
id: 2,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 40,
priority: 2,
medcard: "6112 813812",
},
{
id: 3,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 70,
priority: 3,
medcard: "6112 813812",
},
{
id: 4,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 5,
priority: null,
medcard: "6112 813812",
},
{
id: 5,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 6,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 7,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 8,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 9,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 10,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
],
};
},
computed: {
scrollPresence() {
return this.medcardsInfo.length > 9;
// const wrapper = document.getElementById("listWrapper");
// return wrapper?.scrollHeight > wrapper?.clientHeight;
},
},
methods: {
headerStyle(field) {
return {
width:
!this.scrollPresence && field.spareWidth
? field.spareWidth
: field.width,
"min-width":
this.scrollPresence && field.compressedMinWidth
? field.compressedMinWidth
: field.minWidth,
"justify-content": field.title === "Do" ? "center" : "",
};
},
},
};
</script>
<style lang="sass" scoped>
.header
background-color: var(--gray-thirdly)
border-bottom: 1px solid var(--gray-secondary)
.grey-color
color: var(--font-grey-color)
.body
height: calc(100vh - 56px - 24px - 360px - 72px - 40px)
overflow-y: auto
&::-webkit-scrollbar-track
margin: 24px 0 24px 0
background: #E9E9ED
&::-webkit-scrollbar-thumb
background: var(--font-grey-color)
</style>

127
src/pages/medcards/components/MedicalCardSearchRow.vue Normal file
View File

@@ -0,0 +1,127 @@
<template lang="pug">
.w-full.row-wrapper.h-14.flex
.field.gap-x-3(
:style="headerStyle(headerConfig[0])"
)
q-avatar(size="36px")
img(:src="medcardInfo.avatar")
span.font-semibold.text-dark {{patientName}}
.field(:style="headerStyle(headerConfig[1])")
span.text-dark {{ convertDate(medcardInfo?.birthday) }} г.
.field.gap-x-2(:style="headerStyle(headerConfig[2])")
.rounded-full.h-2.w-2(:style="{background: patientPriority?.color}")
span(:style="{color: patientPriority?.color}") {{ patientPriority?.text }}
.field(:style="headerStyle(headerConfig[3])")
.medcard-number.rounded.h-7.py-1.pl-3.pr-2.flex.items-center.justify-between.w-full.cursor-pointer(
@click="copyValue(medcardInfo?.medcard)"
)
span.text-dark.cursor-pointer {{ medcardInfo?.medcard }}
q-icon.copy(size="18px", name="app:copy")
.field(:style="headerStyle(headerConfig[4])")
span.text-dark {{ convertDate(medcardInfo?.creation_date) }} г.
.field.gap-x-3(:style="headerStyle(headerConfig[5])")
.track.h-2.flex-1.rounded
.thumb.h-full.rounded(:style="thumbStyle")
span.grey-color {{ medcardInfo?.filling_percentage }}%
.field(:style="{...headerStyle(headerConfig[6])}")
q-icon.medcard.cursor-pointer(name="app:medcard", size="20px")
</template>
<script>
import {
searchListConfig,
priorityList,
} from "@/pages/medcards/utils/medcardsConfig.js";
import * as moment from "moment/moment";
import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
import { addNotification } from "@/components/Notifications/notificationContext";
export default {
name: "MedicalCardSearchRow",
components: { TheNotificationProvider },
props: {
scrollPresence: Boolean,
headerStyle: Function,
medcardInfo: Object,
},
data() {
return {
headerConfig: searchListConfig,
};
},
computed: {
patientName() {
return `${this.medcardInfo?.last_name} ${this.medcardInfo?.first_name} ${this.medcardInfo?.patronymic}`;
},
patientPriority() {
return priorityList?.find(
({ priority }) => this.medcardInfo.priority === priority
);
},
thumbStyle() {
let percentage = this.medcardInfo?.filling_percentage;
return {
width: `calc(${percentage}%)`,
"background-color":
percentage < 11
? "var(--system-color-red)"
: percentage < 51
? "var(--bg-yellow-warning)"
: "var(--system-color-green)",
};
},
},
methods: {
convertDate(date) {
return moment(date?.split(".")?.reverse()?.join("-"))?.format(
"DD MMMM YYYY"
);
},
copyValue(text) {
navigator.clipboard.writeText(text);
addNotification(
new Date().getTime(),
"",
"Номер медкарты скопирован",
"success",
5000
);
},
},
};
</script>
<style lang="sass" scoped>
.row-wrapper
border-bottom: 1px solid var(--gray-secondary)
& > .field
height: 100%
padding: 10px 16px
display: flex
align-items: center
justify-content: start
font-size: 14px
line-height: 135%
.medcard-number
border: 1px solid var(--gray-secondary)
background: var(--gray-thirdly)
&:hover
background: var(--gray-secondary)
.copy :deep(path)
fill: var(--font-grey-color)
.medcard :deep(path)
fill: var(--btn-blue-color)
span
cursor: default
.track
background: var(--gray-thirdly)
.thumb
.grey-color
color: var(--font-grey-color)
</style>