Merge branch 'ASTRA-108' into 'master'
Resolve ASTRA-108 See merge request andrusyakka/urban-couscous!428
This commit is contained in:
Vasiliy Gavrilin
125
src/pages/newCalendar/components/HeaderRecordForm.vue
Normal file
125
src/pages/newCalendar/components/HeaderRecordForm.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<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")
|
||||
img(:src="folder")
|
||||
q-menu
|
||||
.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")
|
||||
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.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")
|
||||
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.rounded-md
|
||||
.photo.flex.h-10.w-10.items-center.justify-center
|
||||
img(:src="noname")
|
||||
.flex.flex-col.font-medium
|
||||
.dark-blue Имя Фамилия
|
||||
.grey-color.text-xsx.rounded-md Дата
|
||||
.change.flex.items-center.rounded-md
|
||||
q-btn(dense, padding="24px 8px")
|
||||
q-icon(name="app:icon-plus", size="12px")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import folder from "@/assets/icons/folder.svg";
|
||||
import time from "@/assets/icons/time.svg";
|
||||
import noname from "@/assets/icons/noname.svg";
|
||||
import calendar from "@/assets/icons/calendar-grey.svg";
|
||||
import BaseCalendar from "@/components/base/BaseCalendar.vue";
|
||||
import BaseModal from "@/components/base/BaseModal.vue";
|
||||
import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
|
||||
import * as moment from "moment/moment";
|
||||
|
||||
export default {
|
||||
name: "HeaderRecordForm",
|
||||
components: { BaseCalendar, BaseModal, BaseTimeModal },
|
||||
props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
|
||||
data() {
|
||||
return {
|
||||
folder,
|
||||
calendar,
|
||||
time,
|
||||
noname,
|
||||
currentDate: moment().clone(),
|
||||
isShowTime: false,
|
||||
times: { from: "8:30", to: "10:30" },
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeModalTime() {
|
||||
this.isShowTime = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.input
|
||||
width: 200px
|
||||
background: var(--bg-light-grey)
|
||||
|
||||
.dark-blue
|
||||
color: var(--font-dark-blue-color)
|
||||
min-width: 50px
|
||||
|
||||
.change
|
||||
background: var(--bg-light-grey)
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.status
|
||||
padding: 8px 8px 8px 5px
|
||||
&: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>
|
||||
@@ -1,76 +1,32 @@
|
||||
<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
|
||||
header-record-form(
|
||||
:current-status="currentStatus",
|
||||
:statuses="patientData.statuses",
|
||||
:choice-status="choiceStatus"
|
||||
)
|
||||
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.h-9(
|
||||
.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") Выберите услуги
|
||||
.service.flex.px-4.items-center(
|
||||
id="miDuv",
|
||||
.dark-blue.flex.px-4.items-center.rounded.h-7(
|
||||
id="service",
|
||||
v-else,
|
||||
v-for="service in services",
|
||||
:style="{background: service.color, display: service.id <=2 ? 'flex' : 'none'}"
|
||||
:style="{background: service.color}"
|
||||
) {{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(v-if="services.length") {{sumService}}
|
||||
q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
|
||||
.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
|
||||
@@ -117,13 +73,9 @@
|
||||
</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 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";
|
||||
@@ -132,13 +84,11 @@ 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";
|
||||
import HeaderRecordForm from "./HeaderRecordForm.vue";
|
||||
|
||||
export default {
|
||||
name: "RecordCreationForm",
|
||||
components: {
|
||||
BaseModal,
|
||||
FormCreateBasicInfo,
|
||||
FormCreateIdentityDocuments,
|
||||
FormCreateAddresses,
|
||||
@@ -146,25 +96,26 @@ export default {
|
||||
BaseInput,
|
||||
BaseInputFullName,
|
||||
BaseCalendar,
|
||||
BaseTimeModal,
|
||||
HeaderRecordForm,
|
||||
},
|
||||
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: 1300, color: "#FFF0CA" },
|
||||
{
|
||||
id: 2,
|
||||
name: "Лечение",
|
||||
price: 500,
|
||||
color: "#F7D9FF",
|
||||
},
|
||||
{ id: 3, name: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
|
||||
],
|
||||
forms: [
|
||||
{
|
||||
@@ -190,6 +141,8 @@ export default {
|
||||
],
|
||||
currentForm: "form-create-basic-info",
|
||||
networksSettings: column.find((el) => el.name === "networks")?.settings,
|
||||
otherColor: null,
|
||||
otherServices: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -236,24 +189,28 @@ export default {
|
||||
choiceStatus(e) {
|
||||
this.currentStatus = e;
|
||||
},
|
||||
closeModalTime() {
|
||||
this.isShowTime = false;
|
||||
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]?.__vnode?.props?.style.background;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.addShadow();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.input
|
||||
width: 200px
|
||||
background: var(--bg-light-grey)
|
||||
border-radius: 6px
|
||||
|
||||
.text-input
|
||||
|
||||
.dark-blue
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
.name-date
|
||||
color: var(--font-grey-color)
|
||||
min-width: 50px
|
||||
|
||||
.text
|
||||
color: var(--font-grey-color)
|
||||
@@ -261,47 +218,36 @@ export default {
|
||||
|
||||
.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)
|
||||
color: var(--font-grey-color)
|
||||
border-radius: 6px
|
||||
width: 560px
|
||||
|
||||
.service
|
||||
color: var(--font-dark-blue-color)
|
||||
border-radius: 4px
|
||||
display: -webkit-box
|
||||
overflow: hidden
|
||||
|
||||
.gradient
|
||||
width: 10%
|
||||
height: 28px
|
||||
right: 0
|
||||
|
||||
.other-serivices
|
||||
width: 474px
|
||||
padding: 4px
|
||||
border: 1px solid #D3D4DC
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
background: var(--default-white)
|
||||
|
||||
.other
|
||||
width: 46px
|
||||
height: 28px
|
||||
background: var(--bg-light-grey)
|
||||
|
||||
.price
|
||||
background: var(--bg-light-grey)
|
||||
border-radius: 6px
|
||||
width: 82px
|
||||
color: #9294A7
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.title-info
|
||||
color: var(--font-grey-color)
|
||||
@@ -317,12 +263,4 @@ export default {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user