[WIP] Добавил формы на модальном окне создания записи
This commit is contained in:
megavrilinvv
@@ -1,9 +1,9 @@
|
||||
<template lang="pug">
|
||||
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
|
||||
base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px' }")
|
||||
q-input(
|
||||
v-model="value",
|
||||
:name="name",
|
||||
:multiple="multiple"
|
||||
:multiple="multiple",
|
||||
:class="{'circle': circle, 'font-input': true, 'doc': doc}",
|
||||
:input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight}",
|
||||
:borderless="borderless",
|
||||
@@ -26,7 +26,7 @@
|
||||
:standout="standout"
|
||||
:accept="accept",
|
||||
:debounce="debounce",
|
||||
:shadow-text="shadowText"
|
||||
:shadow-text="shadowText",
|
||||
hide-bottom-space
|
||||
)
|
||||
template(v-slot:prepend, v-if="iconLeft")
|
||||
@@ -116,6 +116,7 @@ export default {
|
||||
iconLeft: Boolean,
|
||||
iconRight: Boolean,
|
||||
name: String,
|
||||
important: Boolean,
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
computed: {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template lang="pug">
|
||||
.flex.flex-col.gap-y-2
|
||||
.label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
|
||||
span.-mt-2(v-if="important", :style="{color: 'var(--font-obligatory-color)'}") *
|
||||
slot
|
||||
</template>
|
||||
|
||||
@@ -9,6 +10,7 @@ export default {
|
||||
name: "BaseInputContainer",
|
||||
props: {
|
||||
label: String,
|
||||
important: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,41 +1,40 @@
|
||||
<template lang="pug">
|
||||
.flex.gap-x-4.h-fit
|
||||
.flex.gap-x-3.w-full
|
||||
q-btn(
|
||||
color="secondary",
|
||||
text-color="primary",
|
||||
style="width: 40px; height: 40px",
|
||||
rounded
|
||||
no-caps
|
||||
padding="0 16px"
|
||||
)
|
||||
q-icon(v-if="image === defaultIcon", name="app:icon-download")
|
||||
q-avatar(v-else, size="40px", round)
|
||||
img(:src="image")
|
||||
q-menu(anchor="bottom middle", self="top right", v-model="showPopup")
|
||||
.flex.flex-col.p-4.gap-y-3
|
||||
.flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
|
||||
q-icon(name="app:computer", size="18px", color="primary")
|
||||
span.text-smm.title Загрузить с компьютера
|
||||
.flex.items-center.gap-x-2.cursor-pointer
|
||||
q-icon(name="app:camera", size="18px", color="primary")
|
||||
span.text-smm.title Сделать фото
|
||||
base-modal(v-model="showModal", title="Загрузить изображение")
|
||||
.flex.flex-col.items-center.justify-center(
|
||||
:style="{padding: '153px 370px'}"
|
||||
)
|
||||
.avatar-wrapper.flex.relative
|
||||
base-input(
|
||||
circle,
|
||||
type="file",
|
||||
id="image-upload",
|
||||
accept="image/*",
|
||||
@change="(e) => previewImage(e)"
|
||||
)
|
||||
.avatar.flex.absolute.items-center.gap-x-6
|
||||
img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
|
||||
q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
|
||||
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
|
||||
.flex.gap-x-3.w-full.py-6
|
||||
q-btn(
|
||||
color="secondary",
|
||||
text-color="primary",
|
||||
style="width: 40px; height: 40px",
|
||||
rounded,
|
||||
no-caps,
|
||||
padding="0 16px"
|
||||
)
|
||||
q-icon(v-if="image === defaultIcon", name="app:icon-download")
|
||||
q-avatar(v-else, size="40px", round)
|
||||
img(:src="image")
|
||||
q-menu(anchor="bottom middle", self="top right", v-model="showPopup")
|
||||
.flex.flex-col.p-4.gap-y-3
|
||||
.flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
|
||||
q-icon(name="app:computer", size="18px", color="primary")
|
||||
span.text-smm.title Загрузить с компьютера
|
||||
.flex.items-center.gap-x-2.cursor-pointer
|
||||
q-icon(name="app:camera", size="18px", color="primary")
|
||||
span.text-smm.title Сделать фото
|
||||
base-modal(v-model="showModal", title="Загрузить изображение")
|
||||
.flex.flex-col.items-center.justify-center(
|
||||
:style="{padding: '153px 370px'}"
|
||||
)
|
||||
.avatar-wrapper.flex.relative
|
||||
base-input(
|
||||
circle,
|
||||
type="file",
|
||||
id="image-upload",
|
||||
accept="image/*",
|
||||
@change="(e) => previewImage(e)"
|
||||
)
|
||||
.avatar.flex.absolute.items-center.gap-x-6
|
||||
img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
|
||||
q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
|
||||
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", outlined)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
ref="dialog"
|
||||
)
|
||||
.base-content(
|
||||
:class="{'draggable': draggable, 'base-content-default': !defaultPadding}",
|
||||
:class="{'draggable': draggable, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}",
|
||||
ref="contentRef",
|
||||
:style="{...contentStyles, height}"
|
||||
)
|
||||
@@ -30,6 +30,7 @@ export default {
|
||||
draggable: Boolean,
|
||||
hideOverlay: Boolean,
|
||||
defaultPadding: Boolean,
|
||||
modalPadding: Boolean,
|
||||
hideHeader: Boolean,
|
||||
height: {
|
||||
type: String,
|
||||
@@ -135,6 +136,9 @@ export default {
|
||||
.base-content-default
|
||||
padding: 32px 40px
|
||||
|
||||
.base-modal-default
|
||||
padding: 28px 32px
|
||||
|
||||
.base-content
|
||||
width: auto
|
||||
background-color: var(--default-white)
|
||||
|
||||
91
src/components/base/BaseTimeModal.vue
Normal file
91
src/components/base/BaseTimeModal.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template lang="pug">
|
||||
.flex.flex-col.gap-y-6.pt-6
|
||||
.table-time.flex.p-4
|
||||
.flex.flex-col.gap-1(v-for="time in timeCoil")
|
||||
.flex {{ time }}
|
||||
.side.flex.p-1.h-9(:style="{columnGap: '2px'}")
|
||||
q-btn.left-side(size="9px", padding="0 8px", color="primary")
|
||||
q-icon(name="app:icon-ok")
|
||||
q-btn.right-side(size="4px", padding="0 4px")
|
||||
img(:src="lockIcon")
|
||||
.flex.justify-between.items-center
|
||||
.flex.gap-2
|
||||
q-btn(
|
||||
color="primary",
|
||||
outline,
|
||||
size="16px",
|
||||
no-caps,
|
||||
label="Отмена",
|
||||
:style="{width: '108px', height: '40px'}",
|
||||
padding="0",
|
||||
@click="closeModalTime"
|
||||
)
|
||||
q-btn(
|
||||
color="primary",
|
||||
size="16px",
|
||||
no-caps,
|
||||
label="Сохранить"
|
||||
:style="{width: '132px', height: '40px'}",
|
||||
padding="0",
|
||||
@click="closeModalTime"
|
||||
)
|
||||
.text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lockIcon from "@/assets/icons/locked.svg";
|
||||
|
||||
export default {
|
||||
name: "BaseTimeModal",
|
||||
props: { times: Object, closeModalTime: Function },
|
||||
data() {
|
||||
return { lockIcon, select: false };
|
||||
},
|
||||
computed: {
|
||||
validateStartTime() {
|
||||
return this.verifyTime("8:00");
|
||||
},
|
||||
validateEndTime() {
|
||||
return this.verifyTime("19:00");
|
||||
},
|
||||
timeCoil() {
|
||||
let time = [];
|
||||
for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
|
||||
time.push(`${i}:00`);
|
||||
}
|
||||
return time;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
verifyTime(dayTime) {
|
||||
let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
|
||||
let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
|
||||
return newTime;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.table-time
|
||||
width: 463px
|
||||
height: 174px
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
border-radius: 6px
|
||||
flex-wrap: wrap !important
|
||||
|
||||
.text
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
.side
|
||||
border-left: 1px solid var(--border-light-grey-color)
|
||||
border-right: 1px solid var(--border-light-grey-color)
|
||||
|
||||
.left-side
|
||||
border-radius: 6px 1px 1px 6px
|
||||
background: #4772F2
|
||||
|
||||
.right-side
|
||||
border-radius: 1px 6px 6px 1px
|
||||
background: #FF6565
|
||||
</style>
|
||||
Reference in New Issue
Block a user