157 lines
5.1 KiB
Vue
157 lines
5.1 KiB
Vue
<template lang="pug">
|
|
.flex.gap-x-10
|
|
.flex.flex-col.gap-y-4.text-smm
|
|
.flex.gap-x-3.items-center
|
|
.text.font-semibold Статус:
|
|
.flex.gap-x-1
|
|
.input.flex.items-center.pl-4.gap-x-1.rounded-md
|
|
img(:src="currentStatus.icon")
|
|
.dark-blue.font-medium {{currentStatus.name}}
|
|
q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
|
|
q-icon.icon(name="app:folder", size="20px")
|
|
q-menu(:offset="[140, 8]")
|
|
.flex.p-2.flex-col
|
|
.status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
|
|
v-for="status in statuses",
|
|
@click="choiceStatus(status)",
|
|
v-close-popup
|
|
)
|
|
img(:src="status.icon")
|
|
span {{status.name}}
|
|
.flex.gap-x-3.items-center
|
|
.text.font-semibold Дата:
|
|
.flex.gap-x-1
|
|
.input.flex.items-center.pl-4.rounded-md
|
|
.dark-blue.font-medium {{currentDate.format("DD MMMM YYYY")}}
|
|
q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
|
|
q-icon.icon(name="app:calendar", size="20px")
|
|
q-menu(
|
|
transition-show="scale",
|
|
transition-hide="scale",
|
|
self="top middle",
|
|
:offset="[118, 14]",
|
|
)
|
|
base-calendar(v-model="currentDate")
|
|
.flex.gap-x-3.items-center
|
|
.text.font-semibold Время:
|
|
.flex.gap-x-1
|
|
.input.flex.items-center.pl-4.rounded-md
|
|
.dark-blue.font-medium 13:00 - 14:00
|
|
q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
|
|
q-icon.icon(name="app:time", size="20px")
|
|
base-modal(v-model="isShowTime", title="Время", modal-padding)
|
|
base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
|
|
.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 : "Дата"}}
|
|
.change.flex.items-center.rounded-md
|
|
q-btn(dense, padding="18px 4px", @click="isShowMedcards = true")
|
|
q-icon.icon(name="app:folder", size="20px")
|
|
base-modal(v-model="isShowMedcards", title="Медкарты", modal-padding)
|
|
medcards-modal(
|
|
:save-medcard="saveMedcard",
|
|
:close-medcards="closeModalMedcards",
|
|
:patients="patients"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import noname from "@/assets/icons/noname.svg";
|
|
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
|
|
import BaseModal from "@/components/base/BaseModal.vue";
|
|
import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
|
|
import MedcardsModal from "./MedcardsModal.vue";
|
|
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
|
|
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
|
|
import * as moment from "moment/moment";
|
|
|
|
export default {
|
|
name: "HeaderRecordForm",
|
|
components: { BaseCalendar, BaseModal, BaseTimeModal, MedcardsModal },
|
|
props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
|
|
data() {
|
|
return {
|
|
noname,
|
|
currentDate: moment().clone(),
|
|
isShowTime: false,
|
|
isShowMedcards: false,
|
|
patients: patientList.find(({ id }) => id === 2).data,
|
|
times: { from: "8:30", to: "10:30" },
|
|
data: [
|
|
{
|
|
start: "8:00",
|
|
end: "8:30",
|
|
},
|
|
{
|
|
start: "11:30",
|
|
end: "12:00",
|
|
},
|
|
],
|
|
patient: null,
|
|
trimPatientName: trimName,
|
|
};
|
|
},
|
|
methods: {
|
|
closeModalTime() {
|
|
this.isShowTime = false;
|
|
},
|
|
closeModalMedcards() {
|
|
this.isShowMedcards = false;
|
|
},
|
|
saveMedcard(medcard) {
|
|
this.isShowMedcards = false;
|
|
this.patient = medcard;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.input
|
|
width: 200px
|
|
border: 1px solid var(--gray-secondary)
|
|
|
|
.icon :deep(path)
|
|
fill: var(--font-grey-color)
|
|
|
|
.dark-blue
|
|
color: var(--font-dark-blue-color)
|
|
min-width: 50px
|
|
|
|
.change
|
|
background: var(--bg-light-grey)
|
|
color: var(--font-grey-color)
|
|
|
|
.status
|
|
width: 160px
|
|
height: 40px
|
|
padding: 8px 10px
|
|
&:hover
|
|
background: var(--bg-light-grey)
|
|
cursor: pointer
|
|
|
|
.text
|
|
color: var(--font-grey-color)
|
|
width: 76px
|
|
|
|
.name
|
|
background: var(--bg-light-grey)
|
|
border-bottom-color: var(--border-light-grey-color)
|
|
border-bottom-width: 4px
|
|
width: 200px
|
|
|
|
.photo
|
|
background: var(--border-light-grey-color)
|
|
border-radius: 50%
|
|
|
|
.grey-color
|
|
color: var(--font-grey-color)
|
|
</style>
|