diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index 7c7a853..beacc0b 100644 --- a/src/assets/sass/variables.sass +++ b/src/assets/sass/variables.sass @@ -96,4 +96,6 @@ --system-color-red: #f34549 --system-color-green: #21ba72 --gray-background: #e9e9ed + --aqua-color: #2cc3e5 + --system-color-yellow: #ffB931 diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue index bae9425..fc89f7b 100644 --- a/src/components/base/BaseModal.vue +++ b/src/components/base/BaseModal.vue @@ -6,7 +6,7 @@ ref="dialog" ) .base-content( - :class="{'draggable': draggable, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}", + :class="{'draggable': draggable, 'none-padding': nonePadding, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}", ref="contentRef", :style="{...contentStyles, height}" ) @@ -29,6 +29,7 @@ export default { showCloseIcon: Boolean, draggable: Boolean, hideOverlay: Boolean, + nonePadding: Boolean, defaultPadding: Boolean, modalPadding: Boolean, hideHeader: Boolean, @@ -139,6 +140,9 @@ export default { .base-modal-default padding: 28px 32px +.none-padding + padding: 0px + .base-content overflow: hidden width: auto diff --git a/src/pages/newCalendar/components/HeaderRecordForm.vue b/src/pages/newCalendar/components/HeaderRecordForm.vue index 9d2cfde..9282c79 100644 --- a/src/pages/newCalendar/components/HeaderRecordForm.vue +++ b/src/pages/newCalendar/components/HeaderRecordForm.vue @@ -39,13 +39,18 @@ .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(@click="showMedcard") + .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%'}") + base-modal(v-model="isShowMedcard", none-padding) + medcard-modal(:data="patient") .change.flex.items-center.rounded-md q-btn(dense, padding="18px 4px", @click="isShowMedcards = true") q-icon.icon(name="app:folder", size="20px") @@ -68,6 +73,7 @@ import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js"; import * as moment from "moment/moment"; import BaseInput from "@/components/base/BaseInput.vue"; import { v_model } from "@/shared/mixins/v-model"; +import MedcardModal from "./MedcardModal.vue"; export default { name: "HeaderRecordForm", @@ -77,6 +83,7 @@ export default { BaseModal, BaseTimeModal, MedcardsModal, + MedcardModal, }, mixins: [v_model], props: { currentStatus: Object, statuses: Array, choiceStatus: Function }, @@ -86,6 +93,7 @@ export default { currentDate: moment().clone(), isShowTime: false, isShowMedcards: false, + isShowMedcard: false, patients: patientList.find(({ id }) => id === 2).data, times: "", data: [ @@ -119,6 +127,9 @@ export default { }, }, methods: { + fixedFill(fill) { + return 100 - fill.slice(0, -1) + "%"; + }, closeModalMedcards() { this.isShowMedcards = false; }, @@ -126,6 +137,9 @@ export default { this.isShowMedcards = false; this.patient = medcard; }, + showMedcard() { + if (this.patient) this.isShowMedcard = true; + }, validateTimeString(value = "") { const [start = "", end = ""] = value.split(" - "); this.validateTime(start); @@ -167,6 +181,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 +195,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) diff --git a/src/pages/newCalendar/components/MedcardModal.vue b/src/pages/newCalendar/components/MedcardModal.vue new file mode 100644 index 0000000..e4e2a58 --- /dev/null +++ b/src/pages/newCalendar/components/MedcardModal.vue @@ -0,0 +1,156 @@ + + + + + diff --git a/src/pages/newCalendar/components/MedcardsModal.vue b/src/pages/newCalendar/components/MedcardsModal.vue index a4932b8..57b1c34 100644 --- a/src/pages/newCalendar/components/MedcardsModal.vue +++ b/src/pages/newCalendar/components/MedcardsModal.vue @@ -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 diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js index 0157dfa..4f9158d 100644 --- a/src/pages/newCalendar/utils/calendarConfig.js +++ b/src/pages/newCalendar/utils/calendarConfig.js @@ -111,6 +111,7 @@ export const patientList = [ patronymic: "Александрович", birthday: "28.03.1980", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -121,6 +122,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "33%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 1, @@ -129,6 +152,7 @@ export const patientList = [ patronymic: "Олегович", birthday: "01.03.1975", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -139,6 +163,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "20%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 2, @@ -147,6 +193,7 @@ export const patientList = [ patronymic: "Васильевич", birthday: "13.07.1999", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -157,6 +204,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 3, @@ -165,6 +234,7 @@ export const patientList = [ patronymic: "Робертович", birthday: "11.11.1991", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -175,6 +245,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 4, @@ -183,6 +275,7 @@ export const patientList = [ patronymic: "Алексеевич", birthday: "12.03.1989", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -193,6 +286,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 5, @@ -201,6 +316,7 @@ export const patientList = [ patronymic: "Васильевич", birthday: "31.07.1949", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -211,6 +327,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 6, @@ -219,6 +357,7 @@ export const patientList = [ patronymic: "Олеговна", birthday: "12.11.1995", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -229,6 +368,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 7, @@ -237,6 +398,7 @@ export const patientList = [ patronymic: "Алексеевич", birthday: "15.05.1989", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -247,6 +409,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 8, @@ -255,6 +439,7 @@ export const patientList = [ patronymic: "Васильевич", birthday: "13.07.2000", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -265,6 +450,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 9, @@ -273,6 +480,7 @@ export const patientList = [ patronymic: "Федорович", birthday: "12.12.1986", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -283,6 +491,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, { id: 10, @@ -291,6 +521,7 @@ export const patientList = [ patronymic: "Алексеевич", birthday: "13.03.1979", avatar: personImage, + medicalNumber: "#12314", check: false, view: false, viewDate: "", @@ -301,6 +532,28 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", + marks: [ + { + id: 0, + name: "Неправильный прикус", + color: "#D8E3FF", + }, + { + id: 1, + name: "Нервозность", + color: "#CEF1F3", + }, + { + id: 2, + name: "Парадантит", + color: "#EBDBFF", + }, + ], + networks: [ + { id: 0, name: "VK", link: "vk.com/", icon: "app:vk" }, + { id: 1, name: "Telegram", link: "tg.com/", icon: "app:tg" }, + ], }, ], choice: false, diff --git a/tailwind.config.js b/tailwind.config.js index e1fd109..8b6975e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -58,6 +58,7 @@ module.exports = { "19px": "19px", "22px": "22px", "23px": "23px", + "25px": "25px", "27px": "27px", "29_25px": "29.25px", "30px": "30px",