248 lines
7.5 KiB
Vue
248 lines
7.5 KiB
Vue
<template lang="pug">
|
||
.flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
|
||
header-record-form(
|
||
:current-status="currentStatus",
|
||
:statuses="patientData.statuses",
|
||
:choice-status="choiceStatus"
|
||
)
|
||
.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.h-9.rounded-md(
|
||
:class="{'other-serivices': services.length}"
|
||
)
|
||
.service.flex.gap-x-1.items-center.rounded.relative(
|
||
:style="{ width: otherColor ? '415px' : 'full'}"
|
||
)
|
||
span(v-if="!services.length") Выберите услуги
|
||
.dark-blue.flex.px-4.items-center.rounded.h-7(
|
||
id="service",
|
||
v-else,
|
||
v-for="service in services",
|
||
:style="{background: service.color}"
|
||
) {{service.name}}
|
||
.gradient.flex.absolute(
|
||
:style="{background: `linear-gradient(270deg, ${otherColor} 0%, rgba(247, 217, 255, 0) 100%)`}"
|
||
)
|
||
.other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
|
||
.price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
|
||
q-btn.change.flex.w-7.h-9.rounded-md(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
|
||
base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
|
||
base-button(width="168px", label="Создать запись", @click="closeForm", disabled)
|
||
</template>
|
||
|
||
<script>
|
||
import folder from "@/assets/icons/folder.svg";
|
||
import { column } from "@/pages/clients/utils/tableConfig";
|
||
import { v_model } from "@/shared/mixins/v-model";
|
||
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
|
||
import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
|
||
import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
|
||
import FormCreateAttachments from "@/pages/clients/components/FormCreateAttachments.vue";
|
||
import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
|
||
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
|
||
import HeaderRecordForm from "./HeaderRecordForm.vue";
|
||
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
|
||
import BaseButton from "@/components/base/BaseButton.vue";
|
||
|
||
export default {
|
||
name: "RecordCreationForm",
|
||
components: {
|
||
FormCreateBasicInfo,
|
||
FormCreateIdentityDocuments,
|
||
FormCreateAddresses,
|
||
FormCreateAttachments,
|
||
BaseInputFullName,
|
||
BaseCalendar,
|
||
HeaderRecordForm,
|
||
BaseButton,
|
||
},
|
||
props: { isShowForm: Boolean, closeForm: Function },
|
||
mixins: [v_model],
|
||
data() {
|
||
return {
|
||
folder,
|
||
isPhoto: false,
|
||
patientData: patientData,
|
||
currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
|
||
services: [
|
||
{ id: 0, name: "Чистка зубов", price: 500, color: "#D8E3FF" },
|
||
{ id: 1, name: "Осмотр", price: 1300, color: "#FFF0CA" },
|
||
{
|
||
id: 2,
|
||
name: "Лечение среднего кариеса",
|
||
price: 500,
|
||
color: "#F7D9FF",
|
||
},
|
||
{ id: 3, name: "Осмотр зубов", price: 1300, 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",
|
||
},
|
||
{
|
||
title: "Дополнительное",
|
||
id: "additional",
|
||
component: "form-create-attachments",
|
||
},
|
||
],
|
||
currentForm: "form-create-basic-info",
|
||
networksSettings: column.find((el) => el.name === "networks")?.settings,
|
||
otherColor: null,
|
||
otherServices: [],
|
||
};
|
||
},
|
||
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() {
|
||
let sum = this.services.reduce((acc, el) => acc + el.price, 0) + " ₽";
|
||
return sum.length >= 5
|
||
? sum.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + " ")
|
||
: sum;
|
||
},
|
||
},
|
||
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;
|
||
},
|
||
addShadow() {
|
||
let defaultWidth = 415;
|
||
const target = document.querySelectorAll("#service");
|
||
target.forEach((e) => {
|
||
defaultWidth = defaultWidth - e.offsetWidth;
|
||
if (defaultWidth <= 10) return this.otherServices.push(e);
|
||
});
|
||
this.otherColor = this.otherServices[0]?.style.background;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.addShadow();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.dark-blue
|
||
color: var(--font-dark-blue-color)
|
||
min-width: 50px
|
||
|
||
.text
|
||
color: var(--font-grey-color)
|
||
width: 76px
|
||
|
||
.change
|
||
background: var(--bg-light-grey)
|
||
color: var(--font-grey-color)
|
||
|
||
.services
|
||
background: var(--bg-light-grey)
|
||
color: var(--font-grey-color)
|
||
width: 560px
|
||
|
||
.service
|
||
display: -webkit-box
|
||
overflow: hidden
|
||
|
||
.gradient
|
||
width: 10%
|
||
height: 28px
|
||
right: 0
|
||
|
||
.other-serivices
|
||
width: 474px
|
||
padding: 4px
|
||
border: 1px solid var(--border-light-grey-color)
|
||
background: var(--default-white)
|
||
|
||
.other
|
||
width: 46px
|
||
background: var(--bg-light-grey)
|
||
|
||
.price
|
||
background: var(--bg-light-grey)
|
||
width: 82px
|
||
color: var(--font-grey-color)
|
||
|
||
.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
|
||
</style>
|