add create patient popup
This commit is contained in:
kandrusyak
@@ -6,7 +6,7 @@
|
||||
:choice-status="choiceStatus"
|
||||
v-model="time"
|
||||
)
|
||||
base-input-with-search(v-model="patient", @createPerson="createPerson")
|
||||
base-input-with-search(v-model="patient", @create-person="createPerson")
|
||||
.flex.flex-col.flex-auto.l.gap-y-8
|
||||
.wrapper-info.h-full
|
||||
.grid.grid-cols-2.gap-x-4.gap-y-6
|
||||
@@ -28,9 +28,11 @@
|
||||
placeholder="Дата рождения"
|
||||
)
|
||||
|
||||
.footer.flex.gap-2
|
||||
base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
|
||||
base-button(width="168px", label="Создать запись", @click="createEvent")
|
||||
.footer.flex.gap-2
|
||||
base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
|
||||
base-button(width="168px", label="Создать запись", @click="createEvent")
|
||||
base-modal(v-model="showCreateModal", title="Создать пациента", modal-padding)
|
||||
patient-creation-form(@close="handleClosePatientForm")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -43,6 +45,8 @@ import BaseInput from "@/components/base/BaseInput.vue";
|
||||
import BaseInputDate from "@/components/base/BaseInputDate.vue";
|
||||
import { fetchWrapper } from "@/shared/fetchWrapper";
|
||||
import { mapActions } from "vuex";
|
||||
import PatientCreationForm from "@/components/PatientCreationForm.vue";
|
||||
import BaseModal from "@/components/base/BaseModal.vue";
|
||||
|
||||
export default {
|
||||
name: "CreateEventForm",
|
||||
@@ -53,6 +57,8 @@ export default {
|
||||
BaseInputWithSearch,
|
||||
BaseInput,
|
||||
BaseInputDate,
|
||||
PatientCreationForm,
|
||||
BaseModal,
|
||||
},
|
||||
props: { isShowForm: Boolean, closeForm: Function },
|
||||
data() {
|
||||
@@ -63,6 +69,7 @@ export default {
|
||||
time: {},
|
||||
patientData: patientData,
|
||||
currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
|
||||
showCreateModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -75,12 +82,17 @@ export default {
|
||||
getEvents: "getEvents",
|
||||
}),
|
||||
createPerson() {
|
||||
alert("crea");
|
||||
this.showCreateModal = true;
|
||||
},
|
||||
|
||||
choiceStatus(e) {
|
||||
this.currentStatus = e;
|
||||
},
|
||||
handleClosePatientForm(val) {
|
||||
this.showCreateModal = false;
|
||||
if (!val) return;
|
||||
this.patient = val;
|
||||
},
|
||||
async createEvent() {
|
||||
const event = await fetchWrapper.post("events", {
|
||||
start: this.time.start.toISOString(),
|
||||
|
||||
@@ -1,264 +0,0 @@
|
||||
<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.title}}
|
||||
.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(@click="isShowServices = true", dense, padding="4px 4px")
|
||||
q-icon.icon(name="app:folder", size="20px")
|
||||
base-modal(v-model="isShowServices", title="Услуги", modal-padding)
|
||||
services-modal(:close-services="closeServices", :save-services="saveServices")
|
||||
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";
|
||||
import BaseModal from "@/components/base/BaseModal.vue";
|
||||
import ServicesModal from "./ServicesModal.vue";
|
||||
|
||||
export default {
|
||||
name: "RecordCreationForm",
|
||||
components: {
|
||||
FormCreateBasicInfo,
|
||||
FormCreateIdentityDocuments,
|
||||
FormCreateAddresses,
|
||||
FormCreateAttachments,
|
||||
BaseInputFullName,
|
||||
BaseCalendar,
|
||||
HeaderRecordForm,
|
||||
BaseButton,
|
||||
BaseModal,
|
||||
ServicesModal,
|
||||
},
|
||||
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, title: "Чистка зубов", price: 500, color: "#D8E3FF" },
|
||||
{ id: 1, title: "Осмотр", price: 1300, color: "#FFF0CA" },
|
||||
{
|
||||
id: 2,
|
||||
title: "Лечение среднего кариеса",
|
||||
price: 500,
|
||||
color: "#F7D9FF",
|
||||
},
|
||||
{ id: 3, title: "Осмотр зубов", 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: [],
|
||||
isShowServices: false,
|
||||
};
|
||||
},
|
||||
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;
|
||||
},
|
||||
closeServices() {
|
||||
this.isShowServices = false;
|
||||
},
|
||||
saveServices(selectedServices) {
|
||||
this.isShowServices = false;
|
||||
selectedServices.forEach((e) => this.services.push(e));
|
||||
},
|
||||
},
|
||||
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
|
||||
|
||||
.icon :deep(path)
|
||||
fill: var(--font-grey-color)
|
||||
</style>
|
||||
Reference in New Issue
Block a user