admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add create patient popup

Browse Source
This commit is contained in:
kandrusyak
2023-09-11 17:08:57 +03:00
committed by andrusyakka
parent 85b68c726b
commit 1ee0e8f0e8
12 changed files with 268 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/clients/components/FormCreateAddresses.vue
View File

@@ -1,8 +1,8 @@
<template lang="pug">
.wrapper-addresses.h-full
.wrapper-form.h-full
.flex.flex-col.gap-y-6
base-input(
v-model="addresses.full_address",
v-model="form.full_address",
placeholder="Введите адрес целиком",
label="Полный адрес",
size="M"
@@ -12,42 +12,42 @@
span.text-sm.separator.px-2 или
.grid.grid-cols-2.gap-y-6.gap-x-4
base-input(
v-model="addresses.city",
v-model="form.city",
label="Город",
placeholder="Введите город",
disabled,
size="M"
)
base-input(
v-model="addresses.region",
v-model="form.region",
label="Область",
placeholder="Введите область",
disabled,
size="M"
)
base-input(
v-model="addresses.street",
v-model="form.street",
label="Улица",
placeholder="Введите улицу",
disabled,
size="M"
)
base-input(
v-model="addresses.house",
v-model="form.house",
label="Дом",
placeholder="Номер дома",
disabled,
size="M"
)
base-input(
v-model="addresses.flat",
v-model="form.flat",
label="Квартира",
placeholder="Номер квартиры",
disabled,
size="M"
)
base-input(
v-model="addresses.zip_code",
v-model="form.zip_code",
label="Индекс",
mask="######",
placeholder="000000",
@@ -63,17 +63,32 @@ import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "FormCreateAddresses",
components: { BaseInput, BaseCustomSelect },
props: {
addresses: Object,
saveClient: Function,
saveFile: Function,
emits: ["change"],
data() {
return {
form: {
full_address: "",
city: "",
region: "",
street: "",
house: "",
flat: "",
zip_code: "",
},
};
},
watch: {
form(val) {
this.$emit("change", val);
},
},
};
</script>
<style lang="sass" scoped>
.wrapper-addresses
.wrapper-form
height: 380px
width: 570px
overflow-y: auto
&::-webkit-scrollbar
width: 4px

5
src/pages/clients/components/FormCreateAttachments.vue
View File

@@ -2,7 +2,7 @@
.wrapper.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.place.flex.flex-col.justify-center.items-center.py-3
.upload.text-center.text-sm.flex.w-fit
input.hidden(@change="(e) => addAttachment(e)" type="file" id="file-upload")
input.hidden(@change="() => {}" type="file" id="file-upload")
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите их сюда
@@ -11,9 +11,6 @@
<script>
export default {
name: "FormCreateAttachments",
props: {
addAttachment: Function,
},
};
</script>

44
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -1,46 +1,21 @@
<template lang="pug">
.wrapper-info.h-full
.wrapper-info
.grid.grid-cols-2.gap-x-4.gap-y-6
base-select(
:items="priorityList",
placeholder="Приоритет клиента",
v-model="basicInfo.priority",
label="Приоритет",
size="M"
)
base-input-date(
v-model="basicInfo.birth_date",
v-model="value.birth_date",
size="M",
important,
label="Дата рождения",
placeholder="Дата рождения"
)
base-input(
v-model="phone.username",
v-model="value.phone",
placeholder="+7 (915) 644–92–23",
mask="+7 (###) ###-##-##",
label="Номер телефона",
size="M",
important
)
base-input(
v-model="email.username",
placeholder="user@yandex.ru",
label="Email",
important,
size="M",
)
.flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
.flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.kind.id")
base-adding-network(
:items="networksList",
:network="network",
)
span.add-network.cursor-pointer(
v-show="networksList.length !== 0",
@click="addNetwork"
) Добавить соцсеть
</template>
<script>
@@ -48,6 +23,7 @@ import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import BaseSelect from "@/components/base/BaseSelect";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
import { v_model } from "@/shared/mixins/v-model";
export default {
name: "FormCreateBasicInfo",
@@ -57,22 +33,12 @@ export default {
BaseSelect,
BaseInputDate,
},
props: {
priorityList: Array,
phone: Object,
email: Object,
basicInfo: Object,
saveClient: Function,
addNetwork: Function,
networksList: Array,
},
mixins: [v_model],
};
</script>
<style lang="sass" scoped>
.wrapper-info
max-height: 336px
min-height: 272px
overflow-y: auto
&::-webkit-scrollbar
width: 4px

32
src/pages/clients/components/FormCreateIdentityDocuments.vue
View File

@@ -4,27 +4,27 @@
span.title-info.text-base.font-bold Паспортные данные
.grid.grid-cols-2.gap-x-4.gap-y-6
base-input(
v-model="identityDocument.pass.series_number",
v-model="form.series_number",
mask="#### ######",
placeholder="0000 000000",
label="Серия и номер",
size="M"
)
base-input(
v-model="identityDocument.pass.issued_by_org",
v-model="form.issued_by_org",
placeholder="Точно как в паспорте",
label="Кем выдан",
size="M"
)
base-input(
v-model="identityDocument.pass.issued_by_org_code",
v-model="form.issued_by_org_code",
mask="###-###",
placeholder="000–000",
label="Код подразделения",
size="M"
)
base-input-date(
v-model="identityDocument.pass.issued_by_date",
v-model="form.issued_by_date",
placeholder="Дата",
label="Дата выдачи",
size="M"
@@ -33,7 +33,7 @@
span.title-info.text-base.font-bold СНИЛС и ИНН
.grid.grid-cols-2.gap-x-4.gap-y-6
base-input(
v-model="identityDocument.snils.number",
v-model="form.snils",
mask="###-###-### ##",
placeholder="000–000–000 00",
label="Номер СНИЛС",
@@ -41,7 +41,7 @@
size="M"
)
base-input(
v-model="identityDocument.inn.number",
v-model="form.inn",
placeholder="000000000000",
mask="############",
label="Номер ИНН",
@@ -57,9 +57,23 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {
name: "FormCreateIdentityDocuments",
components: { BaseInput, BaseInputDate },
props: {
identityDocument: Object,
saveClient: Function,
emits: ["change"],
data() {
return {
form: {
series_number: "",
issued_by_org: "",
issued_by_org_code: "",
issued_by_date: "",
snils: "",
inn: "",
},
};
},
watch: {
form(val) {
this.$emit("change", val);
},
},
};
</script>

2
src/pages/newCalendar/TheCalendar.vue
View File

@@ -3,7 +3,7 @@
calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
calendar-wrapper.ml-2(:open-sidebar="isOpen")
base-modal(v-model="isShowForm", title="Создание записи <Переделка>", modal-padding)
base-modal(v-model="isShowForm", title="Создание записи", modal-padding)
create-event-form(:close-form="closeForm")
base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
calendar-record-preview(v-model:preview-visibility="previewVisibility")

22
src/pages/newCalendar/components/CreateEventForm.vue
View File

@@ -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(),

264
src/pages/newCalendar/components/del_RecordCreationForm copy.vue
View File

@@ -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>