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

[WIP] Добавил модальное окно выбора услуг

Browse Source
This commit is contained in:
megavrilinvv
2023-07-31 17:14:00 +03:00
parent d0c1cccd10
commit 64c246a5e3
4 changed files with 265 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/base/BaseButton.vue
View File

@@ -46,6 +46,11 @@ export default {
height: "48px",
"min-height": "48px",
};
if (this.size === "S")
return {
height: "32px",
"min-height": "32px",
};
return {
height: "40px",
"min-height": "40px",
@@ -116,6 +121,24 @@ export default {
background-color: var(--btn-mini-color-active)
color: var(--bg-status-green)
.grey
color: var(--font-dark-blue-color)
border: 1.5px solid var(--gray-secondary)
background-color: var(--gray-thirdly)
font-weight: 500
font-size: 14px
line-height: 19px
&:hover
background-color: var(--btn-blue-sec-color-hover)
&:active
background-color: var(--btn-blue-sec-color-active)
&:disabled, &[disabled]
opacity: 1 !important
color: var(--btn-blue-sec-color-disabled)
background-color: white
border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
.q-btn :deep(.q-focus-helper)
display: none
.q-btn :deep(.q-ripple)

12
src/components/base/BaseTimeModal.vue
View File

@@ -2,13 +2,13 @@
.flex.flex-col.gap-y-6.pt-6.dark-blue
.table-time.flex.p-4
.top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
.timeline.flex.text-smm.font-medium {{time}}
.timeline.flex.text-smm.font-medium {{time.hour}}
.side.flex.p-1.h-9
q-btn.left-btn(:class="{'default-btn': !checkStartTime(time)}", size="9px", padding="0 8px")
q-icon.icon(v-if="checkStartTime(time)", name="app:lock", size="20px")
q-btn.left-btn(:class="{'default-btn': !checkStartTime(time.hour)}", size="9px", padding="0 8px")
q-icon.icon(v-if="checkStartTime(time.hour)", name="app:lock", size="20px")
q-icon.icon-grey(v-else, name="app:plus", size="20px")
q-btn.right-btn(:class="{'default-btn': !checkEndTime(time)}", size="4px", padding="0 4px")
q-icon.icon(v-if="checkEndTime(time)", name="app:lock", size="20px")
q-btn.right-btn(:class="{'default-btn': !checkEndTime(time.hour)}", size="4px", padding="0 4px")
q-icon.icon(v-if="checkEndTime(time.hour )", name="app:lock", size="20px")
q-icon.icon-grey(v-else, name="app:plus", size="20px")
.flex.justify-between.items-center
.flex.gap-2
@@ -46,7 +46,7 @@ export default {
timeCoil() {
let time = [];
for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
time.push(`${i}:00`);
time.push({ hour: `${i}:00`, check: false });
}
return time;
},

17
src/pages/newCalendar/components/RecordCreationForm.vue
View File

@@ -26,8 +26,10 @@
)
.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")
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")
base-input-full-name(:info-client="patientData")
.flex.flex-col.flex-auto.l.gap-y-8
.flex
@@ -68,6 +70,8 @@ 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",
@@ -80,6 +84,8 @@ export default {
BaseCalendar,
HeaderRecordForm,
BaseButton,
BaseModal,
ServicesModal,
},
props: { isShowForm: Boolean, closeForm: Function },
mixins: [v_model],
@@ -126,6 +132,7 @@ export default {
networksSettings: column.find((el) => el.name === "networks")?.settings,
otherColor: null,
otherServices: [],
isShowServices: false,
};
},
computed: {
@@ -181,6 +188,9 @@ export default {
});
this.otherColor = this.otherServices[0]?.style.background;
},
closeServices() {
this.isShowServices = false;
},
},
mounted() {
this.addShadow();
@@ -244,4 +254,7 @@ export default {
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>

221
src/pages/newCalendar/components/ServicesModal.vue Normal file
View File

@@ -0,0 +1,221 @@
<template lang="pug">
.wrapper.flex.flex-col.pt-6.dark-blue.font-medium
.flex.flex-col.gap-y-4
base-input.search(
placeholder="Поиск",
:width="422",
iconLeft
size="M"
)
template(v-slot:iconLeft)
q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
.flex.gap-x-2
base-button(
@click="choiceService(item.name)",
v-for="item in baseServices",
size="S",
width="100px",
type="grey"
) {{item.name}}
template(v-for="item in baseServices")
.serice-wrapper.flex.flex-col(v-if="item.check")
.service.flex.items-center(v-for="serve in item.data")
q-checkbox(v-model="serve.checked")
.info-block.flex.justify-between.w-full
.flex.flex-col.gap-y-1
.text-m {{serve.title}}
.grey-color.text-smm {{item.name}}
.flex.flex-col.gap-y-1
.text-m.font-bold {{serve.price}}
.grey-color.text-smm {{serve.time}}
.footer.flex.gap-2
base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
</template>
<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "SevicesModal",
components: { BaseInput, BaseButton },
props: {
closeServices: Function,
},
data() {
return {
baseServices: [
{
name: "Терапия",
check: true,
data: [
{
title: "Пломбирование кариеса",
price: "350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Консультация стоматолога",
price: "1 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Пломбирование кариеса",
price: "2 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Пломбирование кариеса",
price: "3 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Пломбирование кариеса",
price: "5 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Пломбирование кариеса",
price: "50 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Пломбирование кариеса",
price: "3 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Пломбирование кариеса",
price: "5 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Пломбирование кариеса",
price: "50 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
],
},
{
name: "Хирургия",
check: false,
data: [
{
title: "Пломбирование кариеса",
price: "2 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Консультация стоматолога",
price: "1 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
],
},
{
name: "Ортопедия ",
check: false,
data: [
{
title: "Пломбирование кариеса",
price: "2 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Консультация стоматолога",
price: "1 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
],
},
{
name: "Ортодонтия",
check: false,
data: [
{
title: "Пломбирование кариеса",
price: "2 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
{
title: "Консультация стоматолога",
price: "1 350 ₽",
time: "1 ч. 30 мин.",
checked: false,
},
],
},
],
};
},
methods: {
choiceService(name) {
this.baseServices.forEach((e) => {
e.check = false;
if (e.name === name) e.check = true;
});
},
},
};
</script>
<style lang="sass" scoped>
.wrapper
width: 422px
.search :deep(path)
fill: var(--font-grey-color)
.search :deep(.q-field__prepend)
padding-right: 4px
.base-service
border-radius: 4px
border: 1px solid var(--gray-secondary)
background: var(--gray-thirdly)
.serice-wrapper
overflow: auto
max-height: 546px
margin-right: -18px
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track:vertical
margin-bottom: 16px
.service
height: 67px
margin-right: 14px
&:last-child .info-block
border-bottom: none
.info-block
padding: 11px 0px
border-bottom: 1px solid var(--gray-secondary)
.footer
border-top: 1px solid var(--gray-secondary)
margin: 0px -32px -12px
padding: 16px 32px 0px 32px
.dark-blue
color: var(--font-dark-blue-color)
.grey-color
color: var(--font-grey-color)
</style>