1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template>
<div class="app-scroll-container">
<div
v-if="containerModel.NORTH"
:style="containerModel.NORTH.style"
class="no-style overflow-auto app-scroll-container__header"
>
<template v-for="name of containerModel.NORTH.name">
<slot :name="name"></slot>
</template>
</div>
<div class="app-scroll-container__middle" :style="middleContainerStyle">
<div
v-if="containerModel.WEST"
:style="containerModel.WEST.style"
class="no-style overflow-auto app-scroll-container__left"
>
<template v-for="name of containerModel.WEST.name">
<slot :name="name"></slot>
</template>
</div>
<div
v-if="containerModel.CENTER"
:style="containerModel.CENTER.style"
class="no-style overflow-auto app-scroll-container__center"
>
<template v-for="name of containerModel.CENTER.name">
<slot :name="name"></slot>
</template>
</div>
<div
v-if="containerModel.EAST"
:style="containerModel.EAST.style"
class="no-style overflow-auto app-scroll-container__right"
>
<template v-for="name of containerModel.EAST.name">
<slot :name="name"></slot>
</template>
</div>
</div>
<div
v-if="containerModel.SOUTH"
:style="containerModel.SOUTH.style"
class="no-style overflow-auto app-scroll-container__bottom"
>
<template v-for="name of containerModel.SOUTH.name">
<slot :name="name"></slot>
</template>
</div>
</div>
</template>
<script lang="ts">
import { IPSPanelItem } from '@ibiz/dynamic-model-api';
import { IParams } from 'ibiz-core';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class AppScrollContainer extends Vue {
/**
* 子容器模型
*
* @type {*}
* @memberof AppScrollContainer
*/
@Prop() public panelItems!: any;
/**
* 插槽对象
*
* @memberof AppScrollContainer
*/
public containerModel: IParams = {};
/**
* 中间区域样式
*
* @memberof AppScrollContainer
*/
public middleContainerStyle: IParams = {};
/**
* 组件初始化
*
* @memberof AppScrollContainer
*/
public created() {
this.initScrollContainer();
}
/**
* 初始化滚动容器
*
* @memberof AppScrollContainer
*/
public initScrollContainer() {
let minusHeight = 0;
if (this.panelItems && this.panelItems.length > 0) {
this.panelItems.forEach((panelItem: IPSPanelItem) => {
const { name, width, height } = panelItem;
const tag = (panelItem.getPSLayoutPos() as any).layoutPos;
const style = {};
if (width) {
Object.assign(style, { width: `${width}px` });
}
if (height) {
Object.assign(style, { height: `${height}px` });
if (tag && (Object.is(tag, 'NORTH') || Object.is(tag, 'SOUTH'))) {
minusHeight += height;
}
}
if (this.containerModel.hasOwnProperty(tag)) {
Object.assign(this.containerModel[tag], { style });
this.containerModel[tag].name.push(name);
} else {
this.containerModel[tag] = { style, name: [name] };
}
});
}
this.middleContainerStyle.height = minusHeight ? `calc(100% - ${minusHeight}px)` : '100%';
}
}
</script>