67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<template lang="pug">
|
|
.section-wrapper.flex.flex-col.h-fit.cursor-pointer
|
|
.section-header.flex.items-center.justify-between.pl-4.pr-3.py-3
|
|
span.text-sm.font-semibold.whitespace-normal {{title}}
|
|
.flex.gap-y-4.px-4.py-3(
|
|
:style="{height: `${height}px`}"
|
|
v-if="!isNoData"
|
|
:class="{'flex-col': !directionRow}"
|
|
)
|
|
slot
|
|
.section-add.flex.justify-center.items-center.cursor-pointer(
|
|
:style="{height: `${height}px`}"
|
|
v-if="isNoData"
|
|
@click="openAddDoc"
|
|
) Добавить данные
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BaseDetailInfo",
|
|
props: {
|
|
title: String,
|
|
height: Number,
|
|
data: Object,
|
|
directionRow: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
isNoData: true,
|
|
};
|
|
},
|
|
methods: {
|
|
openAddDoc() {
|
|
this.isNoData = false;
|
|
},
|
|
},
|
|
watch: {
|
|
data() {
|
|
Object.values(this.data)
|
|
.map((el) => (el ? el : undefined))
|
|
.forEach((el) => {
|
|
if (el) {
|
|
this.isNoData = false;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.section-wrapper
|
|
border: 1px solid var(--border-light-grey-color)
|
|
border-radius: 4px
|
|
color: var(--font-dark-blue-color)
|
|
&.click
|
|
background-color: var(--light-grey-bg-color)
|
|
|
|
.section-header
|
|
min-height: 44px
|
|
border-bottom: 1px solid var(--border-light-grey-color)
|
|
|
|
.section-add
|
|
height: 100%
|
|
color: var(--btn-blue-color)
|
|
</style>
|