update:更新

src/app-register.ts

@@ -109,7 +109,7 @@ import AppInputIp from './components/app-input-ip/app-input-ip.vue';
 import Loadding  from  './directive/loadding/loadding';
 import AppColorSpan  from  './components/app-color-span/app-color-span.vue';
 import AppColorPicker from  './components/app-color-picker/app-color-picker.vue';
-
+import AppScrollContainer from './components/layout-container/app-scroll-container/app-scroll-container.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -234,5 +234,6 @@ export const AppComponents = {
         v.directive('loading',Loadding);
         v.component('app-color-span', AppColorSpan);
         v.component('app-color-picker', AppColorPicker);
+        v.component('app-scroll-container', AppScrollContainer);
     },
 };
\ No newline at end of file

src/components/layout-container/app-scroll-container/app-scroll-container.less

+.app-scroll-container {
+    height: 100%;
+    width: 100%;
+    border: 1px solid red;
+
+    .app-scroll-container__header,
+    .app-scroll-container__bottom {
+        width: 100%;
+    }
+
+    .app-scroll-container__middle {
+        display: flex;
+        width: 100%;
+        .app-scroll-container__left,
+        .app-scroll-container__center,
+        .app-scroll-container__right {
+            height: 100%;
+        }
+    }
+
+    .no-style {
+        padding: 0;
+        margin: 0;
+    }
+
+    .overflow-auto {
+        overflow: auto;
+    }
+}
\ No newline at end of file

src/components/layout-container/app-scroll-container/app-scroll-container.vue

+<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 { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class AppScrollContainer extends Vue {
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppScrollContainer
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {string}
+     * @memberof AppScrollContainer
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 插槽对象
+     *
+     * @memberof AppScrollContainer
+     */
+    public containerModel: any = {};
+
+    /**
+     * 中间区域样式
+     *
+     * @memberof AppScrollContainer
+     */
+    public middleContainerStyle: any = {};
+
+    /**
+     * 组件初始化
+     *
+     * @memberof AppScrollContainer
+     */
+    public created() {
+        this.initScrollContainer();
+    }
+
+    /**
+     * 初始化滚动容器
+     *
+     * @memberof AppScrollContainer
+     */
+    public initScrollContainer() {
+        let minusHeight = 0;
+        let minusWidth = 0;
+        const curLayoutModelDetails = this.layoutModelDetails[this.name];
+        if (curLayoutModelDetails && curLayoutModelDetails.details && curLayoutModelDetails.details.length > 0) {
+            curLayoutModelDetails.details.forEach((key: string) => {
+                const { name, layoutWidth, layoutHeight, layoutPos } = this.layoutModelDetails[key];
+                const style = {};
+                if (layoutWidth) {
+                    Object.assign(style, { width: `${layoutWidth}px` });
+                    if (layoutPos && (Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))) {
+                        minusWidth += layoutWidth;
+                    }
+                }
+                if (layoutHeight) {
+                    Object.assign(style, { height: `${layoutHeight}px` });
+                    if (layoutPos && (Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))) {
+                        minusHeight += layoutHeight;
+                    }
+                }
+                if (this.containerModel.hasOwnProperty(layoutPos)) {
+                    Object.assign(this.containerModel[layoutPos], { style });
+                    this.containerModel[layoutPos].name.push(name);
+                } else {
+                    this.containerModel[layoutPos] = { style, name: [name] };
+                }
+            });
+        }
+        this.middleContainerStyle.height = minusHeight ? `calc(100% - ${minusHeight}px)` : '100%';
+        if (this.containerModel.CENTER) {
+            this.containerModel.CENTER.style.width = minusWidth ? `calc(100% - ${minusWidth}px)` : '100%';
+        }
+        console.log(this.containerModel);
+    }
+}
+</script>
+<style lang='less'>
+@import 'app-scroll-container.less';
+</style>
\ No newline at end of file

src/model/panel-detail/panel-container.ts

@@ -24,6 +24,7 @@ export class PanelContainerModel extends PanelDetailModel {
      */
     public constructor(opts: any = {}) {
         super(opts);
+        this.details = opts.details;
     }
 
 

src/model/panel-detail/panel-detail.ts

@@ -65,10 +65,10 @@
     /**
      * 布局高度
      *
-     * @type {string}
+     * @type {number}
      * @memberof PanelDetailModel
      */
-    public layoutHeight:string = '';
+    public layoutHeight:number = 0;
     
     /**
      * 高度模式
@@ -81,10 +81,10 @@
     /**
      * 布局宽度
      *
-     * @type {string}
+     * @type {number}
      * @memberof PanelDetailModel
      */
-    public layoutWidth:string = '';
+    public layoutWidth:number = 0;
 
     /**
      * 宽度模式