126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<template lang="pug">
|
|
.form-wrapper.relative.h-fit.rounded.w-full
|
|
transition(name="medical-form", mode="out-in")
|
|
.loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
|
|
base-loader
|
|
.flex.flex-col.h-full.gap-25px.p-6
|
|
.flex.w-full.justify-between
|
|
.flex.w-fit.gap-11px.items-center(v-if="!tag")
|
|
span.font-bold.text-base.whitespace-nowrap {{title}}
|
|
q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
|
|
.flex.w-full.gap-11px.items-center.justify-between(v-else)
|
|
span.font-bold.text-base.whitespace-nowrap {{title}}
|
|
.flex.items-center.h-5(v-if="!template", :style="{color: 'var(--btn-blue-color)'}")
|
|
q-btn(no-caps, outline)
|
|
img.mr-2(:src="layers")
|
|
span.text-smm.font-medium Шаблоны
|
|
.flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
|
|
q-icon(name="app:basket" size="20")
|
|
span.text-smm.font-medium {{ titleDelete }}
|
|
slot
|
|
.flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
|
|
q-btn(
|
|
color="primary",
|
|
outline,
|
|
size="16px",
|
|
no-caps,
|
|
label="Отменить",
|
|
:style="{width: '126px', height: '40px'}",
|
|
padding="0",
|
|
@click="cancel"
|
|
)
|
|
q-btn(
|
|
v-if="isCheckChange",
|
|
color="primary",
|
|
size="16px",
|
|
no-caps,
|
|
label="Сохранить изменения",
|
|
:style="{width: '222px', height: '40px'}",
|
|
padding="0",
|
|
@click="save"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
import BaseLoader from "@/components/Loader/BaseLoader.vue";
|
|
import layers from "@/assets/icons/layers.svg";
|
|
export default {
|
|
name: "MedicalFormWrapper",
|
|
components: { BaseButton, BaseLoader },
|
|
props: {
|
|
tag: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
template: Boolean,
|
|
title: String,
|
|
titleDelete: String,
|
|
cancel: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
save: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
openEdit: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
deleteItem: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
isCheckChange: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isLoadingData: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isEdit: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
buttonsPresence: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
layers,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.form-wrapper
|
|
background-color: var(--default-white)
|
|
.edit-button
|
|
color: var(--btn-blue-color)
|
|
&:hover
|
|
color: var(--btn-blue-color-hover)
|
|
.delete-button
|
|
color: var(--font-grey-color)
|
|
&:hover
|
|
opacity: 0.7
|
|
.loader
|
|
background-color: var(--default-white)
|
|
.medical-form-enter-from
|
|
opacity: 0
|
|
transform: translateY(0px)
|
|
pointer-events: none
|
|
.medical-form-leave-to
|
|
opacity: 0
|
|
transform: translateY(0px)
|
|
pointer-events: none
|
|
.medical-form-leave-active
|
|
transition: 0.3s ease
|
|
.medical-form-move
|
|
transition: 0.3s ease
|
|
</style>
|