320 lines
9.4 KiB
Vue
320 lines
9.4 KiB
Vue
<template lang="pug">
|
||
.flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
|
||
.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
|
||
img(:src="currentStatus.icon")
|
||
.text-input.font-medium {{currentStatus.name}}
|
||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||
img(:src="folder")
|
||
q-menu
|
||
.status.flex.items-center.gap-x-1.font-medium.text-smm(
|
||
v-for="status in patientData.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
|
||
.text-input.font-medium {{currentDate.format("DD MMMM YYYY")}}
|
||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||
img(:src="calendar")
|
||
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
|
||
.text-input.font-medium 13:00 - 14:00
|
||
q-btn.change.flex.w-7.h-7(@click="isShowTime = true", dense, padding="4px 4px")
|
||
img(:src="time")
|
||
base-modal(v-model="isShowTime", title="Время", modal-padding)
|
||
base-time-modal(:times="times", :close-modal-time="closeModalTime")
|
||
.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
|
||
.photo.flex.h-10.w-10.items-center.justify-center
|
||
img(:src="noname")
|
||
.flex.flex-col.font-medium
|
||
.text-input Имя Фамилия
|
||
.name-date.text-xsx Дата
|
||
.change.flex.items-center
|
||
q-btn(dense, padding="24px 8px")
|
||
q-icon(name="app:icon-plus", size="12px")
|
||
.flex.items-center.gap-x-3.text-smm
|
||
.text.font-semibold Услуги:
|
||
.flex.gap-x-1
|
||
.services.flex.items-center.px-4.font-medium.text-smm.gap-x-1(
|
||
:class="{'other-serivices': services.length}"
|
||
)
|
||
span(v-if="!services.length") Выберите услуги
|
||
.service.flex.px-4.items-center(
|
||
id="miDuv",
|
||
v-else,
|
||
v-for="service in services",
|
||
:style="{background: service.color, display: service.id <=2 ? 'flex' : 'none'}"
|
||
) {{service.name}}
|
||
.other.flex.h-7.items-center.justify-center(
|
||
v-if="services.length > 3"
|
||
) {{`+${services.length - 3}`}}
|
||
.price.flex.items-center.items-center.justify-center {{sumService}}
|
||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||
img(:src="folder")
|
||
base-input-full-name(:info-client="patientData")
|
||
.flex.flex-col.flex-auto.l.gap-y-8
|
||
.flex
|
||
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
|
||
v-for="form in forms",
|
||
@click="selectForm(form.component)",
|
||
:class="{active: form.component === currentForm}",
|
||
:key="form.id",
|
||
:id="form.id"
|
||
) {{form.title}}
|
||
component(
|
||
v-bind:is="currentForm",
|
||
:basic-info="patientData.basic",
|
||
:phone="patientData.phone",
|
||
:email="patientData.email",
|
||
:add-network="addNewNetwork",
|
||
:priority-list="patientData.priorityList",
|
||
:identity-document="patientData.identity_document",
|
||
:addresses="patientData.addresses",
|
||
:save-file="saveDocFile",
|
||
:networks-list="getNetworksList",
|
||
)
|
||
.footer.flex.gap-2
|
||
q-btn(
|
||
color="primary",
|
||
outline,
|
||
size="16px",
|
||
no-caps,
|
||
label="Отменить"
|
||
:style="{width: '126px', height: '40px'}",
|
||
padding="0",
|
||
@click="closeForm"
|
||
)
|
||
q-btn(
|
||
color="primary",
|
||
size="16px",
|
||
no-caps,
|
||
label="Создать запись"
|
||
:style="{width: '174px', height: '40px'}",
|
||
padding="0",
|
||
@click="closeForm"
|
||
)
|
||
</template>
|
||
|
||
<script>
|
||
import { column } from "@/pages/clients/utils/tableConfig";
|
||
import { v_model } from "@/shared/mixins/v-model";
|
||
import BaseModal from "@/components/base/BaseModal.vue";
|
||
import noname from "@/assets/icons/noname.svg";
|
||
import folder from "@/assets/icons/folder.svg";
|
||
import time from "@/assets/icons/time.svg";
|
||
import calendar from "@/assets/icons/calendar-grey.svg";
|
||
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
|
||
import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
|
||
import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
|
||
import BaseInput from "@/components/base/BaseInput.vue";
|
||
import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
|
||
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
|
||
import BaseCalendar from "@/components/base/BaseCalendar.vue";
|
||
import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
|
||
import * as moment from "moment/moment";
|
||
|
||
export default {
|
||
name: "RecordCreationForm",
|
||
components: {
|
||
BaseModal,
|
||
FormCreateBasicInfo,
|
||
FormCreateIdentityDocuments,
|
||
FormCreateAddresses,
|
||
BaseInput,
|
||
BaseInputFullName,
|
||
BaseCalendar,
|
||
BaseTimeModal,
|
||
},
|
||
props: { isShowForm: Boolean, closeForm: Function },
|
||
mixins: [v_model],
|
||
data() {
|
||
return {
|
||
noname,
|
||
folder,
|
||
time,
|
||
calendar,
|
||
isPhoto: false,
|
||
patientData: patientData,
|
||
currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
|
||
currentDate: moment().clone(),
|
||
isShowTime: false,
|
||
times: { from: "8:30", to: "10:30" },
|
||
services: [
|
||
{ id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
|
||
{ id: 1, name: "Осмотр", price: 300, color: "#FFF0CA" },
|
||
],
|
||
forms: [
|
||
{
|
||
title: "Основное",
|
||
id: "basic",
|
||
component: "form-create-basic-info",
|
||
},
|
||
{
|
||
title: "ДУЛ",
|
||
id: "doc",
|
||
component: "form-create-identity-documents",
|
||
},
|
||
{
|
||
title: "Адрес",
|
||
id: "address",
|
||
component: "form-create-addresses",
|
||
},
|
||
],
|
||
currentForm: "form-create-basic-info",
|
||
networksSettings: column.find((el) => el.name === "networks")?.settings,
|
||
};
|
||
},
|
||
computed: {
|
||
getNetworksList() {
|
||
let contacts = [];
|
||
this.patientData.basic.contacts.forEach((elem) =>
|
||
contacts.push(elem.kind.id)
|
||
);
|
||
let filteredNetworks = this.networksSettings.filter(
|
||
({ id }) => !contacts.includes(id)
|
||
);
|
||
return filteredNetworks;
|
||
},
|
||
sumService() {
|
||
return this.services.reduce((acc, el) => acc + el.price, 0) + "₽";
|
||
},
|
||
},
|
||
methods: {
|
||
changePhoto() {
|
||
this.isPhoto = true;
|
||
},
|
||
selectForm(componentName) {
|
||
this.currentForm = this.forms.find(
|
||
(elem) => elem.component === componentName
|
||
)?.component;
|
||
},
|
||
saveDocFile(e) {
|
||
this.patientData.doc = e.target.files;
|
||
},
|
||
addNewNetwork() {
|
||
const newNetwork = this.getNetworksList;
|
||
if (newNetwork[0])
|
||
this.patientData.basic.contacts.push({
|
||
kind: {
|
||
id: newNetwork[0].id,
|
||
icon: newNetwork[0].icon,
|
||
},
|
||
username: "",
|
||
});
|
||
},
|
||
choiceStatus(e) {
|
||
this.currentStatus = e;
|
||
},
|
||
closeModalTime() {
|
||
this.isShowTime = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.input
|
||
width: 200px
|
||
background: var(--bg-light-grey)
|
||
border-radius: 6px
|
||
|
||
.text-input
|
||
color: var(--font-dark-blue-color)
|
||
|
||
.name-date
|
||
color: var(--font-grey-color)
|
||
|
||
.text
|
||
color: var(--font-grey-color)
|
||
width: 76px
|
||
|
||
.change
|
||
background: var(--bg-light-grey)
|
||
border-radius: 6px
|
||
color: var(--font-grey-color)
|
||
|
||
.name
|
||
background: var(--bg-light-grey)
|
||
border-radius: 6px
|
||
border-bottom-color: var(--border-light-grey-color)
|
||
border-bottom-width: 4px
|
||
width: 200px
|
||
|
||
.photo
|
||
background: var(--border-light-grey-color)
|
||
border-radius: 50%
|
||
|
||
.services
|
||
background: var(--bg-light-grey)
|
||
border-radius: 6px
|
||
height: 28px
|
||
width: 560px
|
||
|
||
.service
|
||
color: var(--font-dark-blue-color)
|
||
border-radius: 4px
|
||
height: 28px
|
||
|
||
.other-serivices
|
||
width: 474px
|
||
padding: 4px
|
||
border: 1px solid #D3D4DC
|
||
background: var(--default-white)
|
||
height: 36px
|
||
|
||
.other
|
||
width: 46px
|
||
height: 28px
|
||
background: var(--bg-light-grey)
|
||
|
||
.price
|
||
background: var(--bg-light-grey)
|
||
border-radius: 6px
|
||
width: 82px
|
||
color: #9294A7
|
||
|
||
.title-info
|
||
color: var(--font-grey-color)
|
||
border-bottom: 1.5px solid var(--font-grey-color)
|
||
&:hover
|
||
color: var(--btn-blue-color)
|
||
border-bottom: 1.5px solid var(--btn-blue-color)
|
||
&.active
|
||
color: var(--btn-blue-color)
|
||
border-bottom: 1.5px solid var(--btn-blue-color)
|
||
|
||
.footer
|
||
border-top: 1px solid var(--border-light-grey-color)
|
||
margin: 40px -32px 0px
|
||
padding: 16px 32px 0px 32px
|
||
|
||
.status
|
||
border-radius: 4px
|
||
height: 28px
|
||
padding: 8px 8px 8px 5px
|
||
&:hover
|
||
background: var(--bg-light-grey)
|
||
cursor: pointer
|
||
</style>
|