[WIP] Фикс процента заполнения медкарты

This commit is contained in:
megavrilinvv
2023-08-02 13:18:33 +03:00
parent ec4cbe35de
commit 06631aaee0
4 changed files with 52 additions and 16 deletions

View File

@@ -96,4 +96,5 @@
--system-color-red: #f34549
--system-color-green: #21ba72
--gray-background: #e9e9ed
--aqua-color: #2cc3e5

View File

@@ -39,13 +39,16 @@
.flex.h-14.gap-x-3.items-center.text-smm
.text.font-semibold Медкарта:
.flex.gap-x-1
.name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
.photo.flex.h-10.w-10.items-center.justify-center
img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
q-icon.icon(v-else, name="app:noname", size="24px")
.flex.flex-col.font-medium
.dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
.grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}}
.name.flex.rounded-md.flex-col
.flex.items-center.px-4.py-2.gap-x-2(:class="{'medcard': patient}")
.photo.flex.h-10.w-10.items-center.justify-center
img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
q-icon.icon(v-else, name="app:noname", size="24px")
.flex.flex-col.font-medium.gap-y-2px
.dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}}
.grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}}
.indicator-default.flex.w-full.h-1
.indicator.flex.h-1(:style="{width: patient ? patient.fill : '0%'}")
.change.flex.items-center.rounded-md
q-btn(dense, padding="18px 4px", @click="isShowMedcards = true")
q-icon.icon(name="app:folder", size="20px")
@@ -119,6 +122,9 @@ export default {
},
},
methods: {
fixedFill(fill) {
return 100 - fill.slice(0, -1) + "%";
},
closeModalMedcards() {
this.isShowMedcards = false;
},
@@ -167,6 +173,7 @@ export default {
.change
background: var(--bg-light-grey)
color: var(--font-grey-color)
border: 1px solid var(--gray-secondary)
.status
width: 160px
@@ -180,16 +187,28 @@ export default {
color: var(--font-grey-color)
width: 76px
.medcard
cursor: pointer
&:hover
background: var(--gray-secondary)
.name
background: var(--bg-light-grey)
border-bottom-color: var(--border-light-grey-color)
border-bottom-width: 4px
background: var(--default-white)
width: 200px
border: 1px solid var(--gray-secondary)
.photo
background: var(--border-light-grey-color)
border-radius: 50%
.indicator-default
background: var(--gray-secondary)
border-end-end-radius: 4px
.indicator
background: var(--aqua-color)
border-end-start-radius: 4px
.grey-color
color: var(--font-grey-color)
</style>

View File

@@ -17,18 +17,18 @@
:class="sortingClass"
)
calendar-sidebar-svg(name-svg="sort", :active="sort")
.medcards-wrapper.flex.flex-col.overflow-auto
.medcards-wrapper.flex.flex-col.overflow-auto.w-full
.medcard.flex.items-center.cursor-pointer(
v-for="patient in patients",
@click="selectMedcard(patient)"
)
.flex.justify-between.w-full.items-center
.name.flex.justify-between.w-full.items-center.h-14
.info-block.flex.justify-between.gap-x-2
img.h-10.w-10.object-cover.rounded-full(:src="patient.avatar")
.flex.flex-col.gap-y-1
.text-m {{trimPatientName(patient.last_name, patient.first_name, patient.patronymic)}}
.grey-color.text-smm {{patient.birthday}}
q-icon.ok-icon(name="app:ok", v-if="patient.check" size="24px")
q-icon.ok-icon(name="app:ok", v-if="patient.check", size="24px")
.footer.flex.gap-2
base-button(type="secondary", label="Отменить", width="125px", @click="closeMedcards")
base-button(
@@ -98,17 +98,22 @@ export default {
.search :deep(.q-field__prepend)
padding-right: 4px
.name
margin: 4px 0px
&:hover
border-radius: 4px
background: var(--gray-thirdly)
.medcard
height: 64px
margin-right: 14px
border-bottom: 1px solid var(--gray-secondary)
&:last-child
border-bottom: none
&:hover
border-radius: 4px
background: var(--gray-thirdly)
.medcards-wrapper
width: 440px
max-height: 563px
margin-right: -18px
&::-webkit-scrollbar

View File

@@ -121,6 +121,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "90%",
},
{
id: 1,
@@ -139,6 +140,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "20%",
},
{
id: 2,
@@ -157,6 +159,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 3,
@@ -175,6 +178,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 4,
@@ -193,6 +197,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 5,
@@ -211,6 +216,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 6,
@@ -229,6 +235,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 7,
@@ -247,6 +254,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 8,
@@ -265,6 +273,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 9,
@@ -283,6 +292,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
{
id: 10,
@@ -301,6 +311,7 @@ export const patientList = [
email: "gaevaia@yandex.ru",
company: "ООО «АльфаСтрахование»",
policy: "№ 2131-1331-4142",
fill: "50%",
},
],
choice: false,