update：更新

src/app-register.ts

@@ -109,12 +109,12 @@ 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-element/container/app-scroll-container/app-scroll-container.vue';
-import AppSimpleFlexContainer from './components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue';
-import AppStandardContainer from './components/layout-element/container/app-standard-container/app-standard-container.vue';
-import AppTabPanel from './components/layout-element/container/app-tab-panel/app-tab-panel.vue';
-import AppTabPage from './components/layout-element/container/app-tab-page/app-tab-page.vue';
-import AppNavPos from './components/layout-element/container/app-nav-pos/app-nav-pos.vue';
+import AppScrollContainer from './components/layout-element/structure/app-scroll-container/app-scroll-container.vue';
+import AppSimpleFlexContainer from './components/layout-element/structure/app-simpleflex-container/app-simpleflex-container.vue';
+import AppStandardContainer from './components/layout-element/structure/app-standard-container/app-standard-container.vue';
+import AppTabPanel from './components/layout-element/structure/app-tab-panel/app-tab-panel.vue';
+import AppTabPage from './components/layout-element/structure/app-tab-page/app-tab-page.vue';
+import AppNavPos from './components/layout-element/structure/app-nav-pos/app-nav-pos.vue';
 import AppPresetText from './components/layout-element/text/app-preset-text/app-preset-text.vue';
 import AppPresetCaption from './components/layout-element/text/app-preset-caption/app-preset-caption.vue';
 import AppPresetTitle from './components/layout-element/text/app-preset-title/app-preset-title.vue';
@@ -135,7 +135,7 @@ import AppIndexNavTabs from './components/layout-element/index/app-index-nav-tab
 import AppIndexNavBreadcrumb from './components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue';
 import AppIndexOrgSelect from './components/layout-element/index/app-index-org-select/app-index-org-select.vue';
 import AppIndexUserInfo from './components/layout-element/index/app-index-user-info/app-index-user-info.vue';
-import AppCtrlPos from './components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue';
+import AppCtrlPos from './components/layout-element/structure/app-ctrl-pos/app-ctrl-pos.vue';
 import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
 import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
 // 全局挂载UI实体服务注册中心

src/components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue

@@ -8,7 +8,7 @@ import { Component, Inject, Prop, Vue } from "vue-property-decorator";
 
 @Component({})
 export default class AppIndexNavBreadcrumb extends Vue {
-    
+
     /**
      * 名称
      *
@@ -39,27 +39,36 @@ export default class AppIndexNavBreadcrumb extends Vue {
      * @type {string}
      * @memberof ${srfclassname('${ctrl.codeName}')}Base
      */
-    @Inject({ from:'navModel', default: 'tab' })
+    @Inject({ from: 'navModel', default: 'tab' })
     public navModel!: string;
 
     /**
-     * 当前布局模型
+     * 下标
      *
-     * @type {*}
+     * @type {number}
      * @memberof AppIndexNavBreadcrumb
      */
-    public currentLayoutModel: any;
+    @Prop({ default: 0 }) public index?: number;
 
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppIndexNavBreadcrumb
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+    
     /**
      * 当前容器类名
      *
      * @memberof AppIndexNavBreadcrumb
      */
     get curClassName() {
-        return {
-            'app-index-nav-breadcrumb': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-nav-breadcrumb ${this.itemName} ${layoutModel.sysCss}`;
         }
     }
 
@@ -69,21 +78,12 @@ export default class AppIndexNavBreadcrumb extends Vue {
      * @memberof AppIndexNavBreadcrumb
      */
     get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
-        return '';
     }
 
-    /**
-     * Vue生命周期 --- created
-     *
-     * @memberof AppIndexNavBreadcrumb
-     */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-    }
-    
 }
 </script>
 <style lang='less'>

src/components/layout-element/index/app-index-nav-tabs/app-index-nav-tabs.vue

@@ -8,7 +8,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component({})
 export default class AppIndexNavTabs extends Vue {
-    
+
     /**
      * 名称
      *
@@ -26,12 +26,22 @@ export default class AppIndexNavTabs extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppIndexNavTabs
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
      *
      * @type {*}
      * @memberof AppIndexNavTabs
      */
-    public currentLayoutModel: any;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
      * 当前容器类名
@@ -39,10 +49,9 @@ export default class AppIndexNavTabs extends Vue {
      * @memberof AppIndexNavTabs
      */
     get curClassName() {
-        return {
-            'app-index-nav-tabs': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-nav-tabs ${this.itemName} ${layoutModel.sysCss}`;
         }
     }
 
@@ -52,21 +61,12 @@ export default class AppIndexNavTabs extends Vue {
      * @memberof AppIndexNavTabs
      */
     get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
-        return '';
     }
 
-    /**
-     * Vue生命周期 --- created
-     *
-     * @memberof AppIndexNavTabs
-     */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-    }
-    
 }
 </script>
 <style lang='less'>

src/components/layout-element/index/app-index-org-select/app-index-org-select.vue

@@ -8,7 +8,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component({})
 export default class AppIndexOrgSelect extends Vue {
-    
+
     /**
      * 名称
      *
@@ -26,12 +26,22 @@ export default class AppIndexOrgSelect extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppIndexOrgSelect
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
      *
      * @type {*}
      * @memberof AppIndexOrgSelect
      */
-    public currentLayoutModel: any;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
      * 当前容器类名
@@ -39,10 +49,9 @@ export default class AppIndexOrgSelect extends Vue {
      * @memberof AppIndexOrgSelect
      */
     get curClassName() {
-        return {
-            'app-index-org-select': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-org-select ${this.itemName} ${layoutModel.sysCss}`;
         }
     }
 
@@ -52,21 +61,12 @@ export default class AppIndexOrgSelect extends Vue {
      * @memberof AppIndexOrgSelect
      */
     get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
-        return '';
     }
 
-    /**
-     * Vue生命周期 --- created
-     *
-     * @memberof AppIndexOrgSelect
-     */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-    }
-    
 }
 </script>
 <style lang='less'>

src/components/layout-element/index/app-index-user-info/app-index-user-info.vue

@@ -8,7 +8,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component({})
 export default class AppIndexUserInfo extends Vue {
-    
+
     /**
      * 名称
      *
@@ -26,12 +26,22 @@ export default class AppIndexUserInfo extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppIndexUserInfo
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
      *
      * @type {*}
      * @memberof AppIndexUserInfo
      */
-    public currentLayoutModel: any;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
      * 当前容器类名
@@ -39,10 +49,9 @@ export default class AppIndexUserInfo extends Vue {
      * @memberof AppIndexUserInfo
      */
     get curClassName() {
-        return {
-            'app-index-user-info': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-user-info ${this.itemName} ${layoutModel.sysCss}`;
         }
     }
 
@@ -52,21 +61,12 @@ export default class AppIndexUserInfo extends Vue {
      * @memberof AppIndexUserInfo
      */
     get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
-        return '';
     }
 
-    /**
-     * Vue生命周期 --- created
-     *
-     * @memberof AppIndexUserInfo
-     */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-    }
-    
 }
 </script>
 <style lang='less'>

src/components/layout-element/interactive/app-preset-button/app-preset-button.vue

 <template>
     <div :class="curClassName" :style="curStyle">
-        <i-button 
-            :type="buttonType"
-            :disabled="disabled"
-            :title="tooltip"
-            :loading="loading"
-            :ghost="buttonGhost"
+        <i-button :type="buttonType" :disabled="disabled" :title="tooltip" :loading="loading" :ghost="buttonGhost"
             @click="handleClick">
             <div :class="['button-content', iconAlign.toLowerCase()]">
                 <span v-if="cssClass || imagePath" class="icon">
@@ -60,14 +55,34 @@ export default class AppPresetButton extends Vue {
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppPresetButton
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppPresetButton
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 显示标题
      *
      * @memberof AppPresetButton
      */
     get showCaption() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.isShowCaption;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.isShowCaption;
+        }
     }
 
     /**
@@ -75,9 +90,11 @@ export default class AppPresetButton extends Vue {
      *
      * @memberof AppPresetButton
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-preset-button ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-preset-button ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -86,14 +103,16 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get imagePath() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        let imagePath = '';
-        if (layoutModel.sysImage) {
-            imagePath = layoutModel.sysImage.imagePath;
-        } else if (layoutModel.uiAction) {
-            imagePath = layoutModel.uiAction.imagePath;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            let imagePath = '';
+            if (layoutModel.sysImage) {
+                imagePath = layoutModel.sysImage.imagePath;
+            } else if (layoutModel.uiAction) {
+                imagePath = layoutModel.uiAction.imagePath;
+            }
+            return imagePath;
         }
-        return imagePath;
     }
 
     /**
@@ -102,14 +121,16 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get cssClass() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        let cssClass = '';
-        if (layoutModel.sysImage) {
-            cssClass = layoutModel.sysImage.iconcls;
-        } else if (layoutModel.uiAction) {
-            cssClass = layoutModel.uiAction.iconcls;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            let cssClass = '';
+            if (layoutModel.sysImage) {
+                cssClass = layoutModel.sysImage.iconcls;
+            } else if (layoutModel.uiAction) {
+                cssClass = layoutModel.uiAction.iconcls;
+            }
+            return cssClass;
         }
-        return cssClass;
     }
 
     /**
@@ -117,9 +138,11 @@ export default class AppPresetButton extends Vue {
      * 
      * @memberof AppPresetButton
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -127,9 +150,11 @@ export default class AppPresetButton extends Vue {
      * 
      * @memberof AppPresetButton
      */
-    get disabled(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.disabled;
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.disabled;
+        }
     }
 
     /**
@@ -138,23 +163,25 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get buttonType() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        if (Object.is(layoutModel.renderMode, 'LINK')) {
-            return 'text';
-        } else {
-            if (
-                Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
-                Object.is(layoutModel.buttonStyle, 'STYLE2') ||
-                Object.is(layoutModel.buttonStyle, 'STYLE3') ||
-                Object.is(layoutModel.buttonStyle, 'STYLE4')
-            ) {
-                return 'default';
-            } else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
-                return 'error';
-            } else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
-                return 'primary';
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            if (Object.is(layoutModel.renderMode, 'LINK')) {
+                return 'text';
             } else {
-                return layoutModel.buttonStyle.toLowerCase();
+                if (
+                    Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
+                    Object.is(layoutModel.buttonStyle, 'STYLE2') ||
+                    Object.is(layoutModel.buttonStyle, 'STYLE3') ||
+                    Object.is(layoutModel.buttonStyle, 'STYLE4')
+                ) {
+                    return 'default';
+                } else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
+                    return 'error';
+                } else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
+                    return 'primary';
+                } else {
+                    return layoutModel.buttonStyle.toLowerCase();
+                }
             }
         }
     }
@@ -165,8 +192,10 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get iconAlign() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.iconAlign || 'LEFT';
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
+            return layoutModel.iconAlign || 'LEFT';
+        }
     }
 
     /**
@@ -175,8 +204,10 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get buttonGhost() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return Object.is(layoutModel.buttonStyle, 'INVERSE');
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
+            return Object.is(layoutModel.buttonStyle, 'INVERSE');
+        }
     }
 
     /**
@@ -186,7 +217,7 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     public handleClick(event: any) {
-        this.$emit('itemClick', this.name);
+        this.$emit('itemClick', this.itemName);
     }
 }
 </script>

src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue

 <template>
     <div :class="curClassName" :style="curStyle">
         <template v-if="QRCodeConfig.url">
-            <ibiz-qr-code
-                :size="QRCodeConfig.size"
-                :url="QRCodeConfig.url"
-                :bgSrc="QRCodeConfig.bgSrc"
-                :margin="QRCodeConfig.margin"
-                :backgroundColor="QRCodeConfig.backgroundColor"
-                :logoSrc="QRCodeConfig.logoSrc"
-                :logoMargin="QRCodeConfig.logoMargin"
-                :logoBgColor="QRCodeConfig.logoBgColor"
-                :logoRadius="QRCodeConfig.logoRadius"
-                :whiteMargin="QRCodeConfig.whiteMargin"
-                class="ibiz-qr-code"
-                :callback="callback">
+            <ibiz-qr-code :size="QRCodeConfig.size" :url="QRCodeConfig.url" :bgSrc="QRCodeConfig.bgSrc"
+                :margin="QRCodeConfig.margin" :backgroundColor="QRCodeConfig.backgroundColor"
+                :logoSrc="QRCodeConfig.logoSrc" :logoMargin="QRCodeConfig.logoMargin"
+                :logoBgColor="QRCodeConfig.logoBgColor" :logoRadius="QRCodeConfig.logoRadius"
+                :whiteMargin="QRCodeConfig.whiteMargin" class="ibiz-qr-code" :callback="callback">
             </ibiz-qr-code>
         </template>
     </div>
@@ -48,14 +40,34 @@ export default class AppPresetQrCode extends Vue {
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppPresetQrCode
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppPresetQrCode
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 类名
      *
      * @memberof AppPresetQrCode
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-preset-qrcode ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-preset-qrcode ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -63,9 +75,11 @@ export default class AppPresetQrCode extends Vue {
      * 
      * @memberof AppPresetQrCode
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -83,15 +97,15 @@ export default class AppPresetQrCode extends Vue {
      * @type {*}
      * @memberof AppPresetQrCode
      */
-    public QRCodeConfig: { 
-        size?: number, 
-        url?: string, 
+    public QRCodeConfig: {
+        size?: number,
+        url?: string,
         bgSrc?: string,
-        margin?: number, 
-        backgroundColor?: string, 
+        margin?: number,
+        backgroundColor?: string,
         logoSrc?: string,
-        logoMargin?: number, 
-        logoBgColor?: string, 
+        logoMargin?: number,
+        logoBgColor?: string,
         logoRadius?: number,
         whiteMargin?: boolean,
     } = {}
@@ -121,29 +135,29 @@ export default class AppPresetQrCode extends Vue {
      * @memberof AppPresetQrCode
      */
     public getQRCodeData() {
-        if(this.value && typeof(this.value) == 'string') {
+        if (this.value && typeof (this.value) == 'string') {
             const value = JSON.parse(this.value);
             const {
-                size, 
-                url, 
+                size,
+                url,
                 bgSrc,
-                margin, 
-                backgroundColor, 
+                margin,
+                backgroundColor,
                 logoSrc,
-                logoMargin, 
-                logoBgColor, 
+                logoMargin,
+                logoBgColor,
                 logoRadius,
                 whiteMargin,
             } = value;
             this.QRCodeConfig = {
-                size, 
-                url, 
+                size,
+                url,
                 bgSrc,
-                margin, 
-                backgroundColor, 
+                margin,
+                backgroundColor,
                 logoSrc,
-                logoMargin, 
-                logoBgColor, 
+                logoMargin,
+                logoBgColor,
                 logoRadius,
                 whiteMargin,
             };

src/components/layout-element/interactive/app-preset-switch/app-preset-switch.vue

@@ -31,14 +31,34 @@ export default class AppPresetSwitch extends Vue {
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppPresetSwitch
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppPresetSwitch
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 类名
      *
      * @memberof AppPresetSwitch
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-preset-switch ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-preset-switch ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -46,9 +66,11 @@ export default class AppPresetSwitch extends Vue {
      * 
      * @memberof AppPresetSwitch
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -56,9 +78,11 @@ export default class AppPresetSwitch extends Vue {
      * 
      * @memberof AppPresetSwitch
      */
-    get disabled(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.disabled;
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
+            return layoutModel.disabled;
+        }
     }
 
     /**
@@ -78,7 +102,7 @@ export default class AppPresetSwitch extends Vue {
      * @memberof AppPresetSwitch
      */
     set curValue(value: boolean) {
-        this.$emit('valueChange', {name: this.name, value});
+        this.$emit('valueChange', { name: this.itemName, value });
     }
 }
 </script>

src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue

@@ -29,18 +29,38 @@ export default class AppPresetTextInput extends Vue {
      * 布局模型详情
      *
      * @type {*}
-     * @memberof AppPresetSwitch
+     * @memberof AppPresetTextInput
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppPresetTextInput
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppPresetTextInput
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 类名
      *
      * @memberof AppPresetSwitch
      */
     get curClassName() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-preset-text-input ${this.name} ${layoutModel.sysCss}`;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-preset-text-input ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -49,8 +69,10 @@ export default class AppPresetTextInput extends Vue {
      * @memberof AppPresetSwitch
      */
     get disabled() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.disabled;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.disabled;
+        }
     }
 
     /**
@@ -59,8 +81,10 @@ export default class AppPresetTextInput extends Vue {
      * @memberof AppPresetSwitch
      */
     get curStyle() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -69,18 +93,12 @@ export default class AppPresetTextInput extends Vue {
      * @memberof AppPresetSwitch
      */
     get placeholder() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.placeholder || '';
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.placeholder || '';
+        }
     }
 
-    /**
-     * 类名
-     *
-     * @memberof AppPresetSwitch
-     */
-    get className(): string {
-        return `app-preset-text-input ${this.name}`;
-    }
 
     /**
      * 当前值
@@ -97,7 +115,7 @@ export default class AppPresetTextInput extends Vue {
      * @memberof AppPresetTextInput
      */
     set curValue(val: any) {
-        this.$emit('valueChange', { name: this.name, value: val });
+        this.$emit('valueChange', { name: this.itemName, value: val });
     }
 }
 </script>

src/components/layout-element/interactive/index.md

-// 输入交互
\ No newline at end of file

src/components/layout-element/login/app-login-button/app-login-button.vue

 <template>
     <div :class="curClassName" :style="curStyle">
-        <i-button 
-        @click="handleClick" 
-        :disabled="disabled"
-        :title="curTooltip" 
-        :type="buttonType">
-           <div :class="['button-content', iconAlign.toLowerCase()]">
+        <i-button @click="handleClick" :disabled="disabled" :title="curTooltip" :type="buttonType">
+            <div :class="['button-content', iconAlign.toLowerCase()]">
                 <span v-if="cssClass || imagePath" class="icon">
                     <i v-if="cssClass" :class="cssClass" />
                     <img v-else :src="imagePath" />
@@ -53,14 +49,34 @@ export default class AppLoginButton extends Vue {
      */
     @Prop({ default: false }) public loading?: boolean;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppLoginButton
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppLoginButton
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 标题
      *
      * @memberof AppLoginButton
      */
     get curCaption() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.caption;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.caption;
+        }
     }
 
     /**
@@ -69,8 +85,10 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get curTooltip() {
-         const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.tooltip;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.tooltip;
+        }
     }
 
     /**
@@ -79,36 +97,39 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get showCaption() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.isShowCaption;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.isShowCaption;
+        }
     }
 
     /**
      * 当前按钮类型
      *
-     * @type {string}
      * @memberof AppLoginButton
      */
-    get buttonType(): string {
-        const layoutModel = this.layoutModelDetails[this.name];
-        if (layoutModel.renderMode == 'LINK') {
-            return 'text';
-        } else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) {
-            return this.defaultStyle;
-        } else {
-            if (
-                Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
-                Object.is(layoutModel.buttonStyle, 'STYLE2') ||
-                Object.is(layoutModel.buttonStyle, 'STYLE3') ||
-                Object.is(layoutModel.buttonStyle, 'STYLE4')
-            ) {
-                return 'default';
-            } else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
-                return 'error';
-            } else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
-                return 'primary';
+    get buttonType() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            if (layoutModel.renderMode == 'LINK') {
+                return 'text';
+            } else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) {
+                return this.defaultStyle;
             } else {
-                return layoutModel.buttonStyle.toLowerCase();
+                if (
+                    Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
+                    Object.is(layoutModel.buttonStyle, 'STYLE2') ||
+                    Object.is(layoutModel.buttonStyle, 'STYLE3') ||
+                    Object.is(layoutModel.buttonStyle, 'STYLE4')
+                ) {
+                    return 'default';
+                } else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
+                    return 'error';
+                } else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
+                    return 'primary';
+                } else {
+                    return layoutModel.buttonStyle.toLowerCase();
+                }
             }
         }
     }
@@ -118,9 +139,11 @@ export default class AppLoginButton extends Vue {
      * 
      * @memberof AppLoginButton
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -128,9 +151,11 @@ export default class AppLoginButton extends Vue {
      * 
      * @memberof AppLoginButton
      */
-    get disabled(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.disabled;
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.disabled;
+        }
     }
 
     /**
@@ -138,9 +163,11 @@ export default class AppLoginButton extends Vue {
      *
      * @memberof AppLoginButton
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-login-button ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-login-button ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -149,14 +176,16 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get imagePath() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        let imagePath = '';
-        if (layoutModel.sysImage) {
-            imagePath = layoutModel.sysImage.imagePath;
-        } else if (layoutModel.uiAction) {
-            imagePath = layoutModel.uiAction.imagePath;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            let imagePath = '';
+            if (layoutModel.sysImage) {
+                imagePath = layoutModel.sysImage.imagePath;
+            } else if (layoutModel.uiAction) {
+                imagePath = layoutModel.uiAction.imagePath;
+            }
+            return imagePath;
         }
-        return imagePath;
     }
 
     /**
@@ -165,14 +194,16 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get cssClass() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        let cssClass = '';
-        if (layoutModel.sysImage) {
-            cssClass = layoutModel.sysImage.iconcls;
-        } else if (layoutModel.uiAction) {
-            cssClass = layoutModel.uiAction.iconcls;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            let cssClass = '';
+            if (layoutModel.sysImage) {
+                cssClass = layoutModel.sysImage.iconcls;
+            } else if (layoutModel.uiAction) {
+                cssClass = layoutModel.uiAction.iconcls;
+            }
+            return cssClass;
         }
-        return cssClass;
     }
 
     /**
@@ -181,8 +212,10 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get iconAlign() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.iconAlign || 'LEFT';
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.iconAlign || 'LEFT';
+        }
     }
 
     /**
@@ -191,8 +224,10 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get buttonGhost() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return Object.is(layoutModel.buttonStyle, 'INVERSE');
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return Object.is(layoutModel.buttonStyle, 'INVERSE');
+        }
     }
 
     /**
@@ -202,7 +237,7 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     public handleClick() {
-        this.$emit("itemClick", this.name);
+        this.$emit("itemClick", this.itemName);
     }
 
 }

src/components/layout-element/login/app-login-captcha/app-login-captcha.vue

@@ -39,35 +39,61 @@ export default class AppLoginCaptcha extends Vue {
     @Prop() public name!: string;
 
     /**
-     * 当前容器样式
-     * 
+     * 下标
+     *
+     * @type {number}
      * @memberof AppLoginCaptcha
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
-    }
+    @Prop({ default: 0 }) public index?: number;
+
 
     /**
-     * 类名
+     * 是否显示
+     */
+    public show: boolean = false;
+
+    /**
+     * 按钮类型
+     */
+    public type: string = 'default';
+
+    /**
+     * 项名称
      *
+     * @type {*}
      * @memberof AppLoginCaptcha
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-login-captcha ${this.name} ${layoutModel.sysCss}`;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
-     * 是否显示
+     * 当前容器样式
+     * 
+     * @memberof AppLoginCaptcha
      */
-    public show: boolean = false;
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
+    }
 
     /**
-     * 按钮类型
+     * 类名
+     *
+     * @memberof AppLoginCaptcha
      */
-    public type: string = 'default';
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-login-captcha ${this.itemName} ${layoutModel.sysCss}`;
+        }
+    }
 
+    /**
+     * 初始化
+     */
     public created() {
         if (this.value) {
             this.type = 'success';
@@ -87,14 +113,14 @@ export default class AppLoginCaptcha extends Vue {
     public onSuccess() {
         this.show = false;
         this.type = 'success';
-        this.$emit("valueChange", { name: this.name, value: true});
+        this.$emit("valueChange", { name: this.itemName, value: true });
     }
 
     /**
      * 失败
      */
     public onFail() {
-        this.$emit("valueChange", { name: this.name, value: false});
+        this.$emit("valueChange", { name: this.itemName, value: false });
     }
 }
 </script>
@@ -103,9 +129,11 @@ export default class AppLoginCaptcha extends Vue {
 .app-login-captcha {
     height: 40px;
     width: 100%;
+
     .ivu-btn {
         width: 100%;
         height: 100%;
+
         &:hover {
             border: 1px solid #dcdee2;
             color: #515a6e;

src/components/layout-element/login/app-login-input/app-login-input.vue

 <template>
     <div :class="curClassName" :style="curStyle">
-        <i-input
-            size='large'
-            :prefix='defaultIcon'
-            v-model="curValue"
-            :type="defaultType"
-            :disabled="disabled"
-            :readonly="readonly"
-            :placeholder="curCaption">
+        <i-input size='large' :prefix='defaultIcon' v-model="curValue" :type="defaultType" :disabled="disabled"
+            :readonly="readonly" :placeholder="curCaption">
         </i-input>
     </div>
 </template>
@@ -26,7 +20,7 @@ export default class AppLoginInput extends Vue {
      * @memberof AppLoginInput
      */
     @Prop() public layoutModelDetails: any;
-    
+
     /**
      * 值
      *
@@ -59,75 +53,103 @@ export default class AppLoginInput extends Vue {
      */
     @Prop() public defaultType?: string;
 
-        /**
-     * 标题
+    /**
+     * 下标
      *
+     * @type {number}
      * @memberof AppLoginInput
      */
-    get curCaption() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.caption;
-    }
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * 当前容器样式
-     * 
+     * 项名称
+     *
+     * @type {*}
      * @memberof AppLoginInput
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
-     * 类名
+     * 标题
      *
      * @memberof AppLoginInput
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-login-input ${this.name} ${layoutModel.sysCss}`;
+    get curCaption() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.caption;
+        }
     }
 
     /**
-     * 当前值
-     *
-     * @type {any}
+     * 当前容器样式
+     * 
      * @memberof AppLoginInput
      */
-    get curValue() {
-        return this.value;
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
-     * 值变化
+     * 类名
      *
-     * @memberof AppPresetTextInput
+     * @memberof AppLoginInput
      */
-    set curValue(val: any) {
-        this.$emit('valueChange', { name: this.name, value: val });
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-login-input ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
      * 禁用
      * 
-     * @memberof AppPresetSwitch
+     * @memberof AppLoginInput
      */
     get disabled() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.disabled;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.disabled;
+        }
     }
 
     /**
      * 只读
      * 
-     * @memberof AppPresetSwitch
+     * @memberof AppLoginInput
      */
     get readonly() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.readonly;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.readonly;
+        }
     }
-    
+
+    /**
+     * 当前值
+     *
+     * @type {any}
+     * @memberof AppLoginInput
+     */
+    get curValue() {
+        return this.value;
+    }
+
+    /**
+     * 值变化
+     *
+     * @memberof AppLoginInput
+     */
+    set curValue(val: any) {
+        this.$emit('valueChange', { name: this.itemName, value: val });
+    }
+
 }
 </script>
 <style lang="less">

src/components/layout-element/login/app-login-message/app-login-message.vue

@@ -10,49 +10,71 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 @Component({})
 export default class AppLoginMessage extends Vue {
 
-    /**
-     * 模型
-     *
-     * @type {any}
-     * @memberof AppLoginMessage
-     */
-    @Prop() public layoutModelDetails: any;
-    
-    /**
-     * 值
-     *
-     * @type {string}
-     * @memberof AppLoginMessage
-     */
-    @Prop() public value!: string;
-
-    /**
-     * 名称
-     *
-     * @type {string}
-     * @memberof AppLoginMessage
-     */
-    @Prop() public name!: string;
-
-    /**
-     * 当前容器样式
-     * 
-     * @memberof AppLoginMessage
-     */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+  /**
+   * 模型
+   *
+   * @type {any}
+   * @memberof AppLoginMessage
+   */
+  @Prop() public layoutModelDetails: any;
+
+  /**
+   * 值
+   *
+   * @type {string}
+   * @memberof AppLoginMessage
+   */
+  @Prop() public value!: string;
+
+  /**
+   * 名称
+   *
+   * @type {string}
+   * @memberof AppLoginMessage
+   */
+  @Prop() public name!: string;
+
+  /**
+   * 下标
+   *
+   * @type {number}
+   * @memberof AppLoginMessage
+   */
+  @Prop({ default: 0 }) public index?: number;
+
+  /**
+   * 项名称
+   *
+   * @type {*}
+   * @memberof AppLoginMessage
+   */
+  get itemName() {
+    return this.index ? `${this.name}_${this.index}` : this.name;
+  }
+
+  /**
+   * 当前容器样式
+   * 
+   * @memberof AppLoginMessage
+   */
+  get curStyle() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return layoutModel.getElementStyle();
     }
+  }
 
-    /**
-     * 类名
-     *
-     * @memberof AppLoginMessage
-     */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-login-message ${this.name} ${layoutModel.sysCss}`;
+  /**
+   * 类名
+   *
+   * @memberof AppLoginMessage
+   */
+  get curClassName() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return `app-login-message ${this.itemName} ${layoutModel.sysCss}`;
     }
+  }
 
 }
 </script>

src/components/layout-element/login/app-login-note-verify/app-login-note-verify.vue

 <template>
     <div :class="curClassName" :style="curStyle">
         <div class="content">
-            <i-input
-                size="default"
-                type="text"
-                v-model="phoneNumber"
-                :placeholder="$t('components.login.phoneplaceholder')"
-                @on-blur="veriPhoneNumber"
-            ></i-input>
+            <i-input size="default" type="text" v-model="phoneNumber"
+                :placeholder="$t('components.login.phoneplaceholder')" @on-blur="veriPhoneNumber"></i-input>
             <el-button :disabled="disabled" size="mini" @click="getVeriCode()">{{
-                disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}`
+                    disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}`
             }}</el-button>
         </div>
         <alert v-show="phoneError" type="error">电话号码格式错误</alert>
-        <div class="code" v-show="this.show">
-            <i-input
-                size="default"
-                type="text"
-                :value="currentValue"
-                @input="codeChange"
-                :placeholder="$t('components.login.codeplaceholder')"
-            ></i-input>
+        <div class="code" v-show="show">
+            <i-input size="default" type="text" :value="currentValue" @input="codeChange"
+                :placeholder="$t('components.login.codeplaceholder')"></i-input>
         </div>
     </div>
 </template>
@@ -54,6 +44,24 @@ export default class AppLoginNoteVerify extends Vue {
      */
     @Prop() public name!: string;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppLoginNoteVerify
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppLoginNoteVerify
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      *验证码当前值
      *
@@ -116,9 +124,11 @@ export default class AppLoginNoteVerify extends Vue {
      * 
      * @memberof AppLoginNoteVerify
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -126,9 +136,11 @@ export default class AppLoginNoteVerify extends Vue {
      *
      * @memberof AppLoginNoteVerify
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-login-note-verify ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-login-note-verify ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -136,7 +148,7 @@ export default class AppLoginNoteVerify extends Vue {
      * @memberof AppLoginNoteVerify
      */
     public codeChange(value: string) {
-        this.$emit("valueChange", { name: this.name, value: value });
+        this.$emit("valueChange", { name: this.itemName, value: value });
     }
 
     /**

src/components/layout-element/login/app-login-org/app-login-org.vue

 <template>
     <div :class="curClassName" :style="curStyle">
-        <Select v-model="curKey">
+        <Select v-model="curValue">
             <Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
     </div>
@@ -36,12 +36,30 @@ export default class AppLoginOrg extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前值
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppLoginOrg
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppLoginOrg
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
+    /**
+     * 获取当前值
      *
      * @type {string}
      * @memberof AppLoginOrg
      */
-    get curKey() {
+    get curValue() {
         if (this.value) {
             return this.value;
         } else {
@@ -49,8 +67,14 @@ export default class AppLoginOrg extends Vue {
         }
     }
 
-    set curKey(value: string) {
-        this.$emit('valueChange', { name: this.name, value: value });
+    /**
+     * 设置当前值
+     *
+     * @type {string}
+     * @memberof AppLoginOrg
+     */
+    set curValue(value: string) {
+        this.$emit('valueChange', { name: this.itemName, value: value });
     }
 
     /**
@@ -66,9 +90,11 @@ export default class AppLoginOrg extends Vue {
      * 
      * @memberof AppLoginOrg
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -76,9 +102,11 @@ export default class AppLoginOrg extends Vue {
      *
      * @memberof AppLoginOrg
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-login-org ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-login-org ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**

src/components/layout-element/login/app-login-third/app-login-third.vue

@@ -24,7 +24,7 @@ export default class AppThirdLogin extends Vue {
      * @memberof AppThirdLogin
      */
     @Prop() public layoutModelDetails: any;
-    
+
     /**
      * 值
      *
@@ -41,14 +41,34 @@ export default class AppThirdLogin extends Vue {
      */
     @Prop() public name!: string;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppThirdLogin
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppThirdLogin
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 当前容器样式
      * 
      * @memberof AppThirdLogin
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -56,11 +76,13 @@ export default class AppThirdLogin extends Vue {
      *
      * @memberof AppThirdLogin
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-login-input ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-login-input ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
-    
+
     /**
      * 处理第三方登录
      *
@@ -87,7 +109,7 @@ export default class AppThirdLogin extends Vue {
      * @memberof AppThirdLogin
      */
     async dingTalkHandleClick() {
-        
+
     }
 
     /**
@@ -96,7 +118,7 @@ export default class AppThirdLogin extends Vue {
      * @memberof AppThirdLogin
      */
     async wxWorkHandleClick() {
-        
+
     }
 }
 </script>

src/components/layout-element/login/index.md

-// 身份校验
\ No newline at end of file

src/components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue

 <template>
-    <div :class="['app-field-image-dynamic', model.sysCss]" :style="containerStyle">
-        <img :style="model.sysCss" :src="imgUrl" />
+    <div :class="curClassName" :style="curStyle">
+        <img :src="imgUrl" />
     </div>
 </template>
 <script lang = 'ts'>
-import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import { ImgurlBase64 } from '@/utils';
 import { Environment } from "@/environments/environment";
 @Component({})
@@ -15,7 +15,7 @@ export default class AppFieldImageDynamic extends Vue {
      * @type {*}
      * @memberof AppRawItemImage
      */
-     @Prop() public name!: string;
+    @Prop() public name!: string;
 
     /**
      * 模型
@@ -34,12 +34,32 @@ export default class AppFieldImageDynamic extends Vue {
     @Prop() public value: any;
 
     /**
-     * 模型
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppFieldImageDynamic
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 值变更
+     *
+     * @memberof AppFieldImageDynamic
+     */
+    @Watch('value')
+    onValueChange(newVal: any, oldVal: any) {
+        this.handleDynaImg();
+    }
+
+    /**
+     * 项名称
      *
      * @type {*}
      * @memberof AppFieldImageDynamic
      */
-    public model:any = null;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
      * 动态图片路径
@@ -56,28 +76,36 @@ export default class AppFieldImageDynamic extends Vue {
     public downloadUrl = Environment.ExportFile;
 
     /**
-     * 容器样式
+     * 图片路径
      *
-     * @type {any}
      * @memberof AppFieldImageDynamic
      */
-    public containerStyle: any = null;
+    get imgUrl(): string {
+        return this.dynaImgUrl;
+    }
 
     /**
-     * 图片路径
+     * 类名
      *
      * @memberof AppFieldImageDynamic
      */
-    get imgUrl(): string {
-        return this.dynaImgUrl;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-field-image-dynamic ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
-    created() {
-        if (this.layoutModelDetails && this.name) {
-            this.model = this.layoutModelDetails[this.name];
-            this.containerStyle = this.model.getElementStyle();
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppFieldImageDynamic
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
-        this.handleDynaImg();
     }
 
     /**

src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue

 <template>
-    <div :class="['app-rawitem-carousel',model.sysCss]" :style="containerStyle" >       
-        <el-carousel class="carsouel-container" 
-            height="150px" 
-            indicator-position="outside" 
-            :autoplay="false"
-            :interval="swipeConfig.interval"
-            >
+    <div :class="curClassName" :style="curStyle">
+        <el-carousel class="carsouel-container" height="150px" indicator-position="outside" :autoplay="false"
+            :interval="swipeConfig.interval">
             <el-carousel-item v-for="item in swipeData" :key="item.key">
                 <div class="carousel-img-item">
                     <img class="app-carouse-img" v-if="item.type === 'img'" :src="item.imgPath" @error="imgError" />
-                    <i v-else-if="item.type === 'icon'" :class="item.iconClass" ></i>
+                    <i v-else-if="item.type === 'icon'" :class="item.iconClass"></i>
                 </div>
             </el-carousel-item>
         </el-carousel>
@@ -42,14 +38,6 @@ export default class AppCarousel extends Vue {
      */
     @Prop() public value?: any;
 
-    /**
-     * 模型
-     *
-     * @type {*}
-     * @memberof AppCarousel
-     */
-    public model: any;
-
     /**
      * 名称
      *
@@ -67,57 +55,78 @@ export default class AppCarousel extends Vue {
     @Prop() public type?: string;
 
     /**
-     * @description 轮播图图片所有项数据
+     * 下标
+     *
+     * @type {number}
      * @memberof AppCarousel
      */
-
-    public swipeData: any[] = [];
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * @description 轮播图配置
+     * 项名称
+     *
+     * @type {*}
      * @memberof AppCarousel
      */
-    public swipeConfig: any = {};
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
-     * 容器样式
+     * 类名
      *
-     * @type {any}
      * @memberof AppCarousel
      */
-     public containerStyle: any = null;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-rawitem-carousel ${this.itemName} ${layoutModel.sysCss}`;
+        }
+    }
 
     /**
-     * data值变化
-     *
-     * @param {*} newVal
-     * @param {*} oldVal
+     * 当前容器样式
+     * 
      * @memberof AppCarousel
      */
-    @Watch('value', { immediate: true, deep: true })
-    public onDataChange(newVal: any, oldVal: any) {
-        if (newVal) {
-            this.handleSwipData(newVal);
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
     }
 
     /**
-     * @description 构建之前
+     * @description 轮播图图片所有项数据
      * @memberof AppCarousel
      */
-    created() {
-        if (this.layoutModelDetails && this.name) {
-            this.model = this.layoutModelDetails[this.name];
-            this.containerStyle = this.model.getElementStyle();
-        }
+
+    public swipeData: any[] = [];
+
+    /**
+     * @description 轮播图配置
+     * @memberof AppCarousel
+     */
+    public swipeConfig: any = {};
+
+
+    /**
+     * data值变化
+     *
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof AppCarousel
+     */
+    @Watch('value', { immediate: true, deep: true })
+    public onValueChange(newVal: any, oldVal: any) {
         //处理轮播图-动态数据
         if (this.type === "FIELD_CAROUSEL") {
             if (this.value && typeof this.value === 'string') {
                 const swipeData = JSON.parse(this.value);
                 this.handleSwipData(swipeData);
             }
-        } else if (this.type === "STATIC_CAROUSEL") {
             //处理轮播图-静态数据
+        } else if (this.type === "STATIC_CAROUSEL") {
             this.handleSwipData(this.value);
         }
     }

src/components/layout-element/media/app-rawitem-image/app-rawitem-image.vue

 <template>
-    <div :class="['app-rawitem-image', model.sysCss]" :style="containerStyle">
+    <div :class="curClassName" :style="curStyle">
         <img v-if="imgUrl" :src="imgUrl" />
         <i v-else :class="imageClass ? imageClass : ''"></i>
     </div>
 </template>
 <script lang = 'ts'>
-import { PanelFieldModel } from '@/model/panel-detail';
-import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
 @Component({})
 export default class AppRawItemImage extends Vue {
     /**
@@ -15,7 +14,7 @@ export default class AppRawItemImage extends Vue {
      * @type {*}
      * @memberof AppRawItemImage
      */
-     @Prop() public name!: string;
+    @Prop() public name!: string;
 
     /**
      * 模型
@@ -42,27 +41,44 @@ export default class AppRawItemImage extends Vue {
     @Prop() public imageClass?: string;
 
     /**
-     * 容器样式
+     * 下标
      *
-     * @type {any}
+     * @type {number}
      * @memberof AppRawItemImage
      */
-    public containerStyle: any = null;
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * 容器样式
+     * 项名称
      *
-     * @type {any}
+     * @type {*}
      * @memberof AppRawItemImage
      */
-     public model: any = null;
-
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
+    /**
+     * 类名
+     *
+     * @memberof AppRawItemImage
+     */
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-rawitem-image ${this.itemName} ${layoutModel.sysCss}`;
+        }
+    }
 
-    created() {
-        if (this.layoutModelDetails && this.name) {
-            this.model = this.layoutModelDetails[this.name];
-            this.containerStyle = this.model.getElementStyle();
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppRawItemImage
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
     }
 

src/components/layout-element/media/app-rawitem-video/app-rawitem-video.vue

 <template>
-    <div :class="['app-rawitem-video',model.sysCss]" :style="containerStyle">
+    <div :class="curClassName" :style="curStyle">
         <video :src="playerParams.path" :autoplay="playerParams.autoplay" :controls="playerParams.showcontrols"
             :loop="playerParams.replay" :muted="playerParams.mute">
             <source :src="playerParams.path" type="video/mp4">
@@ -11,16 +11,16 @@
 
 <script lang="ts">
 import { Util } from '@/utils';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 @Component({})
 export default class AppRawItemVideo extends Vue {
-     /**
-     * 名称
-     *
-     * @type {*}
-     * @memberof AppRawItemImage
-     */
-     @Prop() public name!: string;
+    /**
+    * 名称
+    *
+    * @type {*}
+    * @memberof AppRawItemImage
+    */
+    @Prop() public name!: string;
 
     /**
      * 模型
@@ -30,7 +30,6 @@ export default class AppRawItemVideo extends Vue {
      */
     @Prop() public layoutModelDetails!: any;
 
-
     /**
      * 视频播放数据
      * @memberof AppRawItemVideo
@@ -38,28 +37,62 @@ export default class AppRawItemVideo extends Vue {
     @Prop() public videoParmas?: any;
 
     /**
-     * 模型
+     * 下标
      *
-     * @type {*}
-     * @memberof @memberof AppRawItemVideo
+     * @type {number}
+     * @memberof AppRawItemVideo
      */
-    public model: any;
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * 播放器唯一标识
+     * 值变更
+     *
      * @memberof AppRawItemVideo
      */
-    public uuid: string = Util.createUUID();
+    @Watch('videoParmas')
+    onVideoParmasChange(newVal: any, oldVal: any) {
+        this.handleStaticVideo();
+    }
 
     /**
-     * 容器样式
+     * 项名称
      *
-     * @type {any}
+     * @type {*}
      * @memberof AppRawItemVideo
      */
-    public containerStyle: any = null;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
+    /**
+     * 类名
+     *
+     * @memberof AppRawItemVideo
+     */
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-rawitem-video ${this.itemName} ${layoutModel.sysCss}`;
+        }
+    }
 
+    /**
+     * 当前容器样式
+     * 
+     * @memberof AppRawItemVideo
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
+    }
+
+    /**
+     * 播放器唯一标识
+     * @memberof AppRawItemVideo
+     */
+    public uuid: string = Util.createUUID();
 
     /**
      * 视频播放参数
@@ -78,21 +111,6 @@ export default class AppRawItemVideo extends Vue {
         showcontrols: false
     };
 
-    created() {
-        if (this.layoutModelDetails && this.name) {
-            this.model = this.layoutModelDetails[this.name];
-            this.containerStyle = this.model.getElementStyle();
-        }
-    }
-
-    /**
-     * 生命周期
-     * @memberof AppRawItemVideo
-     */
-    public mounted() {
-        this.handleStaticVideo();
-    }
-
     /**
      * 处理静态视频播放
      *

src/components/layout-element/media/index.md

-// 多媒体
\ No newline at end of file

src/components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue → src/components/layout-element/structure/app-ctrl-pos/app-ctrl-pos.vue

-<template>
-    <div :class="curClassName" :style="curStyle">
-        <slot></slot>
-    </div>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component({})
-export default class AppCtrlPos extends Vue {
-    
-    /**
-     * 名称
-     *
-     * @type {string}
-     * @memberof AppCtrlPos
-     */
-    @Prop() public name!: string;
-
-    /**
-     * 布局模型详情
-     *
-     * @type {*}
-     * @memberof AppCtrlPos
-     */
-    @Prop() public layoutModelDetails: any;
-
-    /**
-     * 当前布局模型
-     *
-     * @type {*}
-     * @memberof AppCtrlPos
-     */
-    public currentLayoutModel: any;
-
-    /**
-     * 当前容器类名
-     *
-     * @memberof AppCtrlPos
-     */
-    get curClassName() {
-        return {
-            'app-ctrl-pos': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
-    }
-
-    /**
-     * 当前容器样式
-     *
-     * @memberof AppCtrlPos
-     */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
-        }
-        return '';
-    }
-
-    /**
-     * Vue生命周期 --- created
-     *
-     * @memberof AppCtrlPos
-     */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-    }
-    
-}
-</script>
-<style lang='less'>
-@import './app-ctrl-pos.less';
+<template>
+    <div :class="curClassName" :style="curStyle">
+        <slot></slot>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppCtrlPos extends Vue {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppCtrlPos
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppCtrlPos
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppCtrlPos
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppCtrlPos
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppCtrlPos
+     */
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-ctrl-pos ${this.itemName} ${layoutModel.sysCss}`;
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppCtrlPos
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
+    }
+
+}
+</script>
+<style lang='less'>
+@import './app-ctrl-pos.less';
 </style>
\ No newline at end of file

src/components/layout-element/container/app-nav-pos/app-nav-pos.less → src/components/layout-element/structure/app-nav-pos/app-nav-pos.less

-.app-nav-pos {
-    width: 100%;
-    height: 100%;
+.app-nav-pos {
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file

src/components/layout-element/container/app-nav-pos/app-nav-pos.vue → src/components/layout-element/structure/app-nav-pos/app-nav-pos.vue

-<template>
-    <div :class="curClassName" :style="curStyle">
-        <template v-if="dynaNavMode === 'ROUTEVIEW'">
-            <template v-if="enableCache">
-                <app-keep-alive :routerList="routerList">
-                    <router-view :key="routerViewKey"></router-view>
-                </app-keep-alive>
-            </template>
-            <router-view v-else :key="routerViewKey"></router-view>
-        </template>
-        <component
-            class="view-container2"
-            v-if="navData && navData.navView"
-            :is="navData.navView"
-            :viewDefaultUsage="false"
-            :viewdata="JSON.stringify(navData.srfnavdata.context)"
-            :viewparam="JSON.stringify(navData.srfnavdata.viewparmas)"
-            @viewdataschange="handleViewEvent"
-            @viewLoaded="handleViewEvent"
-            @viewstatechange="handleViewEvent">
-        </component>
-    </div>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component({})
-export default class AppNavPos extends Vue {
-    
-    /**
-     * 名称
-     *
-     * @type {string}
-     * @memberof AppNavPos
-     */
-    @Prop() public name!: string;
-
-    /**
-     * 布局模型详情
-     *
-     * @type {*}
-     * @memberof AppNavPos
-     */
-    @Prop() public layoutModelDetails: any;
-
-    /**
-     * 导航数据
-     *
-     * @type {*}
-     * @memberof AppNavPos
-     */
-    @Prop() public navData: any;
-
-    /**
-     * 当前布局模型
-     *
-     * @type {*}
-     * @memberof AppNavPos
-     */
-    public currentLayoutModel: any;
-
-    /**
-     * 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
-     *  
-     * @type {"DYNAMICCOMP" | "ROUTEVIEW"}
-     * @memberof AppNavPos
-     */
-    get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" {
-        const currentModel = this.layoutModelDetails[this.name];
-        if (currentModel && currentModel.dynaNavMode) {
-            return currentModel.dynaNavMode;
-        }
-        return 'DYNAMICCOMP';
-    }
-
-    /**
-     * 是否启用动态缓存
-     *
-     * @type {boolean}
-     * @memberof AppNavPos
-     */
-    get enableCache(): boolean {
-        const currentModel = this.layoutModelDetails[this.name];
-        if (currentModel) {
-            return currentModel.enableCache;
-        }
-        return false;
-    }
-
-    /**
-     * 路由列表
-     *
-     * @memberof AppNavPos
-     */
-    get routerList() {
-        return this.$store.state.historyPathList;
-    }
-
-    /**
-     * 路由键值
-     *
-     * @memberof AppNavPos
-     */
-    get routerViewKey() {
-        let _this: any = this;
-        return _this.$route.fullPath;
-    }
-
-    /**
-     * 当前容器类名
-     *
-     * @memberof AppNavPos
-     */
-    get curClassName() {
-        return {
-            'app-nav-pos': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
-    }
-
-    /**
-     * 当前容器样式
-     *
-     * @memberof AppNavPos
-     */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
-        }
-        return '';
-    }
-
-    /**
-     * Vue生命周期 --- created
-     *
-     * @memberof AppNavPos
-     */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-    }
-    
-    /**
-     * 执行视图事件
-     *
-     * @param {*} args
-     * @memberof AppNavPos
-     */
-    public handleViewEvent(args: any) {
-        console.log(args);
-    }
-
-}
-</script>
-<style lang='less'>
-@import './app-nav-pos.less';
+<template>
+    <div :class="curClassName" :style="curStyle">
+        <template v-if="dynaNavMode === 'ROUTEVIEW'">
+            <template v-if="enableCache">
+                <app-keep-alive :routerList="routerList">
+                    <router-view :key="routerViewKey"></router-view>
+                </app-keep-alive>
+            </template>
+            <router-view v-else :key="routerViewKey"></router-view>
+        </template>
+        <component class="view-container2" v-if="navData && navData.navView" :is="navData.navView"
+            :viewDefaultUsage="false" :viewdata="JSON.stringify(navData.srfnavdata.context)"
+            :viewparam="JSON.stringify(navData.srfnavdata.viewparmas)" @viewdataschange="handleViewEvent"
+            @viewLoaded="handleViewEvent" @viewstatechange="handleViewEvent">
+        </component>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppNavPos extends Vue {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppNavPos
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppNavPos
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppNavPos
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 导航数据
+     *
+     * @type {*}
+     * @memberof AppNavPos
+     */
+    @Prop() public navData: any;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppNavPos
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
+    /**
+     * 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
+     *  
+     * @type {"DYNAMICCOMP" | "ROUTEVIEW"}
+     * @memberof AppNavPos
+     */
+    get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" {
+        const currentModel = this.layoutModelDetails[this.itemName];
+        if (currentModel && currentModel.dynaNavMode) {
+            return currentModel.dynaNavMode;
+        }
+        return 'DYNAMICCOMP';
+    }
+
+    /**
+     * 是否启用动态缓存
+     *
+     * @type {boolean}
+     * @memberof AppNavPos
+     */
+    get enableCache(): boolean {
+        const currentModel = this.layoutModelDetails[this.itemName];
+        if (currentModel) {
+            return currentModel.enableCache;
+        }
+        return false;
+    }
+
+    /**
+     * 路由列表
+     *
+     * @memberof AppNavPos
+     */
+    get routerList() {
+        return this.$store.state.historyPathList;
+    }
+
+    /**
+     * 路由键值
+     *
+     * @memberof AppNavPos
+     */
+    get routerViewKey() {
+        let _this: any = this;
+        return _this.$route.fullPath;
+    }
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppNavPos
+     */
+    get curClassName() {
+        const currentModel = this.layoutModelDetails[this.itemName];
+        if (currentModel) {
+            return `app-nav-pos ${this.itemName} ${currentModel.sysCss}`;
+        }
+
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppNavPos
+     */
+    get curStyle() {
+        const currentModel = this.layoutModelDetails[this.itemName];
+        if (currentModel) {
+            return currentModel.getElementStyle();
+        }
+    }
+
+    /**
+     * 执行视图事件
+     *
+     * @param {*} args
+     * @memberof AppNavPos
+     */
+    public handleViewEvent(args: any) {
+        console.log(args);
+    }
+
+}
+</script>
+<style lang='less'>
+@import './app-nav-pos.less';
 </style>
\ No newline at end of file

src/components/layout-element/container/app-scroll-container/app-scroll-container.vue → src/components/layout-element/structure/app-scroll-container/app-scroll-container.vue

@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { Util } from '@/utils';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
 @Component({})
 export default class AppScrollContainer extends Vue {
@@ -49,6 +49,14 @@ export default class AppScrollContainer extends Vue {
      */
     @Prop() public name!: string;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppScrollContainer
+     */
+    @Prop({ default: 0 }) public index?: number;
+
     /**
      * 布局模型详情
      *
@@ -57,6 +65,16 @@ export default class AppScrollContainer extends Vue {
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 布局模型详情变更
+     * @param newVal 
+     * @param oldVal 
+     */
+    @Watch('layoutModelDetails')
+    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
+        this.initScrollContainer();
+    }
+
     /**
      * 插槽对象
      *
@@ -72,36 +90,43 @@ export default class AppScrollContainer extends Vue {
     public middleContainerStyle: any = {};
 
     /**
-     * 当前容器样式类
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppScrollContainer
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-scroll-container ${this.name} ${layoutModel.sysCss}`;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
-     * 当前容器样式
+     * 当前容器样式类
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-scroll-container ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
-     * 获取项布局样式
+     * 当前容器样式
      */
-    public  getItemPosStyle(name:string){
-        const layoutModel = this.layoutModelDetails[name];
-        return layoutModel.getBorderLayoutStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
-     * 组件初始化
-     *
-     * @memberof AppScrollContainer
+     * 获取项布局样式
      */
-    public created() {
-        this.initScrollContainer();
+    public getItemPosStyle(name: string) {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
+            return layoutModel.getBorderLayoutStyle();
+        }
     }
 
     /**
@@ -111,8 +136,8 @@ export default class AppScrollContainer extends Vue {
      */
     public initScrollContainer() {
         let minusHeight = '';
-        let minusWidth:string = '';
-        const curLayoutModel = this.layoutModelDetails[this.name];
+        let minusWidth: string = '';
+        const curLayoutModel = this.layoutModelDetails[this.itemName];
         if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
             curLayoutModel.details.forEach((key: string) => {
                 const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key];

src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue → src/components/layout-element/structure/app-simpleflex-container/app-simpleflex-container.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
 @Component({})
 export default class AppSimpleFlexContainer extends Vue {
@@ -21,6 +21,14 @@ export default class AppSimpleFlexContainer extends Vue {
     */
     @Prop() public name!: string;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppSimpleFlexContainer
+     */
+    @Prop({ default: 0 }) public index?: number;
+
     /**
      * 布局模型详情
      *
@@ -29,6 +37,16 @@ export default class AppSimpleFlexContainer extends Vue {
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 布局模型详情变更
+     * @param newVal 
+     * @param oldVal 
+     */
+    @Watch('layoutModelDetails')
+    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
+        this.initSimpleFlexContainer();
+    }
+
     /**
      * 插槽对象
      *
@@ -37,12 +55,13 @@ export default class AppSimpleFlexContainer extends Vue {
     public containerModel: any[] = [];
 
     /**
-     * 组件初始化
+     * 项名称
      *
-     * @memberof SimpleFlexContainer
+     * @type {*}
+     * @memberof AppSimpleFlexContainer
      */
-    public created() {
-        this.initSimpleFlexContainer();
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
@@ -51,7 +70,7 @@ export default class AppSimpleFlexContainer extends Vue {
      * @memberof SimpleFlexContainer
      */
     public initSimpleFlexContainer() {
-        const curLayoutModel = this.layoutModelDetails[this.name];
+        const curLayoutModel = this.layoutModelDetails[this.itemName];
         if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
             curLayoutModel.details.forEach((key: string) => {
                 this.containerModel.push(key);
@@ -63,24 +82,35 @@ export default class AppSimpleFlexContainer extends Vue {
     * 当前容器样式类
     */
     get curClassName() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-simpleflex-container ${this.name} ${layoutModel.sysCss}`;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-simpleflex-container ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
      * 当前容器样式
      */
     get curStyle() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
      * 获取项布局样式
      */
     public getItemPosStyle(name: string) {
-        const layoutModel = this.layoutModelDetails[name];
-        return layoutModel.getCommonLayoutStyle();
+        let layoutModel: any;
+        if (this.index) {
+            layoutModel = this.layoutModelDetails[`${name}_${this.index}`];
+        } else {
+            layoutModel = this.layoutModelDetails[name];
+        }
+        if (layoutModel) {
+            return layoutModel.getCommonLayoutStyle();
+        }
     }
 
 

src/components/layout-element/container/app-standard-container/app-standard-container.vue → src/components/layout-element/structure/app-standard-container/app-standard-container.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
 @Component({})
 export default class AppStandardContainer extends Vue {
@@ -21,6 +21,14 @@ export default class AppStandardContainer extends Vue {
     */
     @Prop() public name!: string;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppStandardContainer
+     */
+    @Prop({ default: 0 }) public index?: number;
+
     /**
      * 布局模型详情
      *
@@ -30,28 +38,39 @@ export default class AppStandardContainer extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 插槽对象
+     * 项名称
      *
+     * @type {*}
      * @memberof AppStandardContainer
      */
-    public containerModel: any[] = [];
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
-     * 组件初始化
-     *
-     * @memberof SimpleFlexContainer
+     * 布局模型详情变更
+     * @param newVal 
+     * @param oldVal 
      */
-    public created() {
-        this.initSimpleFlexContainer();
+    @Watch('layoutModelDetails')
+    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
+        this.initStandardContainer();
     }
 
     /**
-     * 初始化SIMPLEFLEX容器
+     * 插槽对象
      *
-     * @memberof SimpleFlexContainer
+     * @memberof AppStandardContainer
      */
-    public initSimpleFlexContainer() {
-        const curLayoutModel = this.layoutModelDetails[this.name];
+    public containerModel: any[] = [];
+
+    /**
+     * 初始化常规容器
+     *
+     * @memberof AppStandardContainer
+     */
+    public initStandardContainer() {
+        const curLayoutModel = this.layoutModelDetails[this.itemName];
         if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
             curLayoutModel.details.forEach((key: string) => {
                 this.containerModel.push(key);
@@ -63,24 +82,35 @@ export default class AppStandardContainer extends Vue {
     * 当前容器样式类
     */
     get curClassName() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-standard-container ${this.name} ${layoutModel.sysCss}`;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-standard-container ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
      * 当前容器样式
      */
     get curStyle() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
      * 获取项布局样式
      */
     public getItemPosStyle(name: string) {
-        const layoutModel = this.layoutModelDetails[name];
-        return layoutModel.getCommonLayoutStyle();
+        let layoutModel: any;
+        if (this.index) {
+            layoutModel = this.layoutModelDetails[`${name}_${this.index}`];
+        } else {
+            layoutModel = this.layoutModelDetails[name];
+        }
+        if (layoutModel) {
+            return layoutModel.getCommonLayoutStyle();
+        }
     }
 }
 </script>

src/components/layout-element/container/app-tab-page/app-tab-page.vue → src/components/layout-element/structure/app-tab-page/app-tab-page.vue

-<template>
-    <TabPane :label="currentLayoutModel.caption" :name="currentLayoutModel.name" :tab="currentLayoutModel.parentName" :class="curClassName" :style="curStyle">
-        <template v-if="containerModel.length > 0">
-            <template v-for="name of containerModel">
-                <slot :name="name"></slot>
-            </template>
-        </template>
-    </TabPane>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component({})
-export default class AppTabPage extends Vue {
-    /**
-    * 名称
-    *
-    * @type {string}
-    * @memberof AppTabPage
-    */
-    @Prop() public name!: string;
-
-    /**
-     * 布局模型详情
-     *
-     * @type {string}
-     * @memberof AppTabPage
-     */
-    @Prop() public layoutModelDetails: any;
-
-    /**
-     * 当前布局模型
-     *
-     * @type {*}
-     * @memberof AppTabPage
-     */
-    public currentLayoutModel: any;
-
-    /**
-     * 插槽对象
-     *
-     * @memberof AppTabPage
-     */
-    public containerModel: any[] = [];
-
-    /**
-     * 组件初始化
-     *
-     * @memberof AppTabPage
-     */
-    public created() {
-        this.init();
-    }
-
-    /**
-     * 初始化子项
-     *
-     * @memberof AppTabPage
-     */
-    public init() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-        if (this.currentLayoutModel && this.currentLayoutModel.details && this.currentLayoutModel.details.length > 0) {
-            this.currentLayoutModel.details.forEach((key: string) => {
-                this.containerModel.push(key);
-            })
-        }
-    }
-
-    /**
-     * 当前容器样式类
-     * 
-     * @memberof AppTabPage
-     */
-    get curClassName() {
-        return {
-            'app-tab-page': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
-    }
-
-    /**
-     * 当前容器样式
-     *
-     * @memberof AppTabPage
-     */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
-        }
-        return '';
-    }
-
-}
-</script>
-<style lang='less'>
-@import './app-tab-page.less';
+<template>
+    <TabPane :label="currentLayoutModel.caption" :name="currentLayoutModel.name" :tab="currentLayoutModel.parentName"
+        :class="curClassName" :style="curStyle">
+        <template v-if="containerModel.length > 0">
+            <template v-for="name of containerModel">
+                <slot :name="name"></slot>
+            </template>
+        </template>
+    </TabPane>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class AppTabPage extends Vue {
+    /**
+    * 名称
+    *
+    * @type {string}
+    * @memberof AppTabPage
+    */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {string}
+     * @memberof AppTabPage
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppTabPage
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 布局模型详情变更
+     * @param newVal 
+     * @param oldVal 
+     */
+    @Watch('layoutModelDetails')
+    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
+        this.initTabPage();
+    }
+
+    /**
+     * 插槽对象
+     *
+     * @memberof AppTabPage
+     */
+    public containerModel: any[] = [];
+
+    /**
+     * 当前布局模型
+     *
+     * @memberof AppTabPage
+     */
+    public currentLayoutModel: any = {};
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppTabPage
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
+    /**
+     * 初始化子项
+     *
+     * @memberof AppTabPage
+     */
+    public initTabPage() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel && layoutModel.details && layoutModel.details.length > 0) {
+            this.currentLayoutModel = layoutModel;
+            layoutModel.details.forEach((key: string) => {
+                this.containerModel.push(key);
+            })
+        }
+    }
+
+    /**
+     * 当前容器样式类
+     * 
+     * @memberof AppTabPage
+     */
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-tab-page ${this.itemName} ${layoutModel.sysCss}`;
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppTabPage
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
+    }
+
+}
+</script>
+<style lang='less'>
+@import './app-tab-page.less';
 </style>
\ No newline at end of file

src/components/layout-element/container/app-tab-panel/app-tab-panel.vue → src/components/layout-element/structure/app-tab-panel/app-tab-panel.vue

-<template>
-    <Tabs v-model="activeName" @on-click="handleClick" :name="name" :class="curClassName">
-        <template v-if="containerModel.length > 0">
-            <template v-for="name of containerModel">
-                <slot :name="name"></slot>
-            </template>
-        </template>
-    </Tabs>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component({})
-export default class AppTabPanel extends Vue {
-    /**
-    * 名称
-    *
-    * @type {string}
-    * @memberof AppTabPanel
-    */
-    @Prop() public name!: string;
-
-    /**
-     * 布局模型详情
-     *
-     * @type {*}
-     * @memberof AppTabPanel
-     */
-    @Prop() public layoutModelDetails: any;
-
-    /**
-     * 当前布局模型
-     *
-     * @type {*}
-     * @memberof AppTabPanel
-     */
-    public currentLayoutModel: any;
-
-    /**
-     * 插槽对象
-     *
-     * @memberof AppTabPanel
-     */
-    public containerModel: any[] = [];
-
-    /**
-     * 当前激活项
-     *
-     * @memberof AppTabPanel
-     */
-    public activeName: string = '';
-
-    /**
-     * 组件初始化
-     *
-     * @memberof AppTabPanel
-     */
-    public created() {
-        this.initTabPage();
-    }
-
-    /**
-     * 初始化分页
-     *
-     * @memberof AppTabPanel
-     */
-    public initTabPage() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
-        if (this.currentLayoutModel && this.currentLayoutModel.details && this.currentLayoutModel.details.length > 0) {
-            this.currentLayoutModel.details.forEach((key: string) => {
-                this.containerModel.push(key);
-            })
-        }
-        this.activeName = this.containerModel && this.containerModel.length > 0 ? this.containerModel[0] : '';
-        this.layoutModelDetails[this.name].clickPage(this.activeName);
-    }
-
-    /**
-     * 处理分页点击
-     *
-     * @memberof AppTabPanel
-     */
-    public handleClick(tab: any) {
-        this.layoutModelDetails[this.name].clickPage(tab);
-    }
-
-    /**
-     * 当前容器类名
-     *
-     * @memberof AppTabPanel
-     */
-    get curClassName() {
-        return {
-            'app-tab-panel': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
-    }
-
-    /**
-     * 当前容器样式
-     *
-     * @memberof AppTabPanel
-     */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
-        }
-        return '';
-    }
-}
-</script>
-<style lang='less'>
-@import './app-tab-panel.less';
+<template>
+    <Tabs v-model="activeName" @on-click="handleClick" :name="name" :class="curClassName">
+        <template v-if="containerModel.length > 0">
+            <template v-for="name of containerModel">
+                <slot :name="name"></slot>
+            </template>
+        </template>
+    </Tabs>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class AppTabPanel extends Vue {
+    /**
+    * 名称
+    *
+    * @type {string}
+    * @memberof AppTabPanel
+    */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppTabPanel
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppTabPanel
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppTabPanel
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
+    /**
+     * 插槽对象
+     *
+     * @memberof AppTabPanel
+     */
+    public containerModel: any[] = [];
+
+    /**
+     * 当前激活项
+     *
+     * @memberof AppTabPanel
+     */
+    public activeName: string = '';
+
+    /**
+     * 布局模型详情变更
+     * @param newVal 
+     * @param oldVal 
+     */
+    @Watch('layoutModelDetails')
+    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
+        this.initTabPanel();
+    }
+
+    /**
+     * 初始化分页
+     *
+     * @memberof AppTabPanel
+     */
+    public initTabPanel() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel && layoutModel.details && layoutModel.details.length > 0) {
+            layoutModel.details.forEach((key: string) => {
+                this.containerModel.push(key);
+            })
+        }
+        this.activeName = this.containerModel && this.containerModel.length > 0 ? this.containerModel[0] : '';
+        this.layoutModelDetails[this.itemName].clickPage(this.activeName);
+    }
+
+    /**
+     * 处理分页点击
+     *
+     * @memberof AppTabPanel
+     */
+    public handleClick(tab: any) {
+        if (this.layoutModelDetails[this.itemName]) {
+            this.layoutModelDetails[this.itemName].clickPage(tab);
+        }
+    }
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppTabPanel
+     */
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-tab-panel ${this.itemName} ${layoutModel.sysCss}`;
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppTabPanel
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
+    }
+}
+</script>
+<style lang='less'>
+@import './app-tab-panel.less';
 </style>
\ No newline at end of file

src/components/layout-element/text/app-preset-caption/app-preset-caption.vue

@@ -10,41 +10,63 @@ import { Vue, Component, Prop } from "vue-property-decorator";
 @Component({})
 export default class AppPresetCaption extends Vue {
 
-    /**
-     * 名称
-     *
-     * @type {string}
-     * @memberof AppPresetCaption
-     */
-    @Prop() public name!: string;
-
-    /**
-     * 布局模型详情
-     *
-     * @type {*}
-     * @memberof AppPresetCaption
-     */
-    @Prop() public layoutModelDetails: any;
-
-    /**
-     * 类名
-     *
-     * @memberof AppPresetCaption
-     */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-preset-caption ${this.name} ${layoutModel.sysCss}`;
+  /**
+   * 名称
+   *
+   * @type {string}
+   * @memberof AppPresetCaption
+   */
+  @Prop() public name!: string;
+
+  /**
+   * 布局模型详情
+   *
+   * @type {*}
+   * @memberof AppPresetCaption
+   */
+  @Prop() public layoutModelDetails: any;
+
+  /**
+   * 下标
+   *
+   * @type {number}
+   * @memberof AppPresetCaption
+   */
+  @Prop({ default: 0 }) public index?: number;
+
+  /**
+   * 项名称
+   *
+   * @type {*}
+   * @memberof AppPresetCaption
+   */
+  get itemName() {
+    return this.index ? `${this.name}_${this.index}` : this.name;
+  }
+
+  /**
+   * 类名
+   *
+   * @memberof AppPresetCaption
+   */
+  get curClassName() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return `app-preset-caption ${this.itemName} ${layoutModel.sysCss}`;
     }
+  }
 
-    /**
-     * 当前容器样式
-     * 
-     * @memberof AppPresetCaption
-     */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+  /**
+   * 当前容器样式
+   * 
+   * @memberof AppPresetCaption
+   */
+  get curStyle() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return layoutModel.getElementStyle();
     }
+  }
 }
 </script>
 

src/components/layout-element/text/app-preset-text/app-preset-text.vue

@@ -81,18 +81,39 @@ export default class AppPresetText extends Vue {
      */
     @Prop() public imageClass?: string;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppPresetText
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppPresetText
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 图片路径
      *
      * @memberof AppPresetText
      */
     get imagePath() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        let imagePath = '';
-        if (layoutModel.sysImage) {
-            imagePath = layoutModel.sysImage.imagePath;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            let imagePath = '';
+            if (layoutModel.sysImage) {
+                imagePath = layoutModel.sysImage.imagePath;
+            }
+            return imagePath;
         }
-        return imagePath;
+
     }
 
     /**
@@ -101,12 +122,14 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get cssClass() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        let cssClass = '';
-        if (layoutModel.sysImage) {
-            cssClass = layoutModel.sysImage.iconcls;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            let cssClass = '';
+            if (layoutModel.sysImage) {
+                cssClass = layoutModel.sysImage.iconcls;
+            }
+            return cssClass;
         }
-        return cssClass;
     }
 
     /**
@@ -115,8 +138,10 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get contentType() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.contentType || 'RAW';
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.contentType || 'RAW';
+        }
     }
 
     /**
@@ -125,8 +150,10 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get curClassName() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name} ${layoutModel.sysCss}`;
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -135,8 +162,10 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get curStyle() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**
@@ -145,8 +174,10 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get renderMode() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.renderMode || 'TEXT';
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.renderMode || 'TEXT';
+        }
     }
 
     /**
@@ -154,10 +185,10 @@ export default class AppPresetText extends Vue {
      *
      * @memberof AppPresetText
      */
-    get content(): string {
-        const layoutModel = this.layoutModelDetails[this.name];
+    get content() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
         let content = this.value;
-        if (layoutModel.predefinedType && layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') {
+        if (layoutModel && layoutModel.predefinedType && layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') {
             if (this.contentType == 'RAW') {
                 content = layoutModel.rawContent;
             } else if (this.contentType == 'HTML') {
@@ -182,13 +213,15 @@ export default class AppPresetText extends Vue {
      *
      * @memberof AppPresetText
      */
-    get contentStyle(): string {
-        const layoutModel = this.layoutModelDetails[this.name];
-        let contentStyle = layoutModel.contentStyle;
-        if (layoutModel.predefinedType === 'STATIC_LABEL') {
-            contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
+    get contentStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            let contentStyle = layoutModel.contentStyle;
+            if (layoutModel.predefinedType === 'STATIC_LABEL') {
+                contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
+            }
+            return contentStyle;
         }
-        return contentStyle;
     }
 }
 </script>

src/components/layout-element/text/app-preset-title/app-preset-title.vue

@@ -24,14 +24,34 @@ export default class AppPresetTitle extends Vue {
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppPresetTitle
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppPresetTitle
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 类名
      *
      * @memberof AppPresetTitle
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-preset-title ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-preset-title ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
@@ -39,9 +59,11 @@ export default class AppPresetTitle extends Vue {
      * 
      * @memberof AppPresetTitle
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getElementStyle();
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
     /**

src/components/layout-element/text/index.md

-// 文本项
\ No newline at end of file