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

@@ -39,49 +39,49 @@ 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 curClassName() {
-        return {
-            'app-index-nav-breadcrumb': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
     
     /**
-     * 当前容器样式
+     * 当前容器类名
      *
      * @memberof AppIndexNavBreadcrumb
      */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-nav-breadcrumb ${this.itemName} ${layoutModel.sysCss}`;
         }
-        return '';
     }
 
     /**
-     * Vue生命周期 --- created
+     * 当前容器样式
      *
      * @memberof AppIndexNavBreadcrumb
      */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
 }

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

@@ -26,45 +26,45 @@ export default class AppIndexNavTabs extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
      *
-     * @type {*}
+     * @type {number}
      * @memberof AppIndexNavTabs
      */
-    public currentLayoutModel: any;
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * 当前容器类名
+     * 项名称
      *
+     * @type {*}
      * @memberof AppIndexNavTabs
      */
-    get curClassName() {
-        return {
-            'app-index-nav-tabs': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
-     * 当前容器样式
+     * 当前容器类名
      *
      * @memberof AppIndexNavTabs
      */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-nav-tabs ${this.itemName} ${layoutModel.sysCss}`;
         }
-        return '';
     }
 
     /**
-     * Vue生命周期 --- created
+     * 当前容器样式
      *
      * @memberof AppIndexNavTabs
      */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
 }

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

@@ -26,45 +26,45 @@ export default class AppIndexOrgSelect extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
      *
-     * @type {*}
+     * @type {number}
      * @memberof AppIndexOrgSelect
      */
-    public currentLayoutModel: any;
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * 当前容器类名
+     * 项名称
      *
+     * @type {*}
      * @memberof AppIndexOrgSelect
      */
-    get curClassName() {
-        return {
-            'app-index-org-select': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
-     * 当前容器样式
+     * 当前容器类名
      *
      * @memberof AppIndexOrgSelect
      */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-org-select ${this.itemName} ${layoutModel.sysCss}`;
         }
-        return '';
     }
 
     /**
-     * Vue生命周期 --- created
+     * 当前容器样式
      *
      * @memberof AppIndexOrgSelect
      */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
 }

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

@@ -26,45 +26,45 @@ export default class AppIndexUserInfo extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
      *
-     * @type {*}
+     * @type {number}
      * @memberof AppIndexUserInfo
      */
-    public currentLayoutModel: any;
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * 当前容器类名
+     * 项名称
      *
+     * @type {*}
      * @memberof AppIndexUserInfo
      */
-    get curClassName() {
-        return {
-            'app-index-user-info': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
-     * 当前容器样式
+     * 当前容器类名
      *
      * @memberof AppIndexUserInfo
      */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-index-user-info ${this.itemName} ${layoutModel.sysCss}`;
         }
-        return '';
     }
 
     /**
-     * Vue生命周期 --- created
+     * 当前容器样式
      *
      * @memberof AppIndexUserInfo
      */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
 }

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,24 +55,46 @@ 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];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.isShowCaption;
         }
+    }
 
     /**
      * 类名
      *
      * @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,7 +103,8 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get imagePath() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             let imagePath = '';
             if (layoutModel.sysImage) {
                 imagePath = layoutModel.sysImage.imagePath;
@@ -95,6 +113,7 @@ export default class AppPresetButton extends Vue {
             }
             return imagePath;
         }
+    }
 
     /**
      * 图标
@@ -102,7 +121,8 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get cssClass() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             let cssClass = '';
             if (layoutModel.sysImage) {
                 cssClass = layoutModel.sysImage.iconcls;
@@ -111,26 +131,31 @@ export default class AppPresetButton extends Vue {
             }
             return cssClass;
         }
+    }
 
     /**
      * 当前容器样式
      * 
      * @memberof AppPresetButton
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 禁用
      * 
      * @memberof AppPresetButton
      */
-    get disabled(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.disabled;
         }
+    }
 
     /**
      * 按钮类型
@@ -138,7 +163,8 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get buttonType() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             if (Object.is(layoutModel.renderMode, 'LINK')) {
                 return 'text';
             } else {
@@ -158,6 +184,7 @@ export default class AppPresetButton extends Vue {
                 }
             }
         }
+    }
 
     /**
      * 图标方向
@@ -165,9 +192,11 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get iconAlign() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
             return layoutModel.iconAlign || 'LEFT';
         }
+    }
 
     /**
      * 按钮幽灵属性，使按钮背景透明
@@ -175,9 +204,11 @@ export default class AppPresetButton extends Vue {
      * @memberof AppPresetButton
      */
     get buttonGhost() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        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,10 +75,12 @@ export default class AppPresetQrCode extends Vue {
      * 
      * @memberof AppPresetQrCode
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * ibiz-qr-code组件可传参数
@@ -121,7 +135,7 @@ 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,

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,20 +66,24 @@ export default class AppPresetSwitch extends Vue {
      * 
      * @memberof AppPresetSwitch
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 禁用
      * 
      * @memberof AppPresetSwitch
      */
-    get disabled(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    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,9 +69,11 @@ export default class AppPresetTextInput extends Vue {
      * @memberof AppPresetSwitch
      */
     get disabled() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.disabled;
         }
+    }
 
     /**
      * 当前容器样式
@@ -59,9 +81,11 @@ export default class AppPresetTextInput extends Vue {
      * @memberof AppPresetSwitch
      */
     get curStyle() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 占位提示
@@ -69,19 +93,13 @@ export default class AppPresetTextInput extends Vue {
      * @memberof AppPresetSwitch
      */
     get placeholder() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        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">
+        <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" />
@@ -53,15 +49,35 @@ 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];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.caption;
         }
+    }
 
     /**
      * 提示信息
@@ -69,9 +85,11 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get curTooltip() {
-         const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.tooltip;
         }
+    }
 
     /**
      * 显示标题
@@ -79,18 +97,20 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get showCaption() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.isShowCaption;
         }
+    }
 
     /**
      * 当前按钮类型
      *
-     * @type {string}
      * @memberof AppLoginButton
      */
-    get buttonType(): string {
-        const layoutModel = this.layoutModelDetails[this.name];
+    get buttonType() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             if (layoutModel.renderMode == 'LINK') {
                 return 'text';
             } else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) {
@@ -112,35 +132,42 @@ export default class AppLoginButton extends Vue {
                 }
             }
         }
+    }
 
     /**
      * 当前容器样式
      * 
      * @memberof AppLoginButton
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 禁用
      * 
      * @memberof AppLoginButton
      */
-    get disabled(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.disabled;
         }
+    }
 
     /**
      * 类名
      *
      * @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,7 +176,8 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get imagePath() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             let imagePath = '';
             if (layoutModel.sysImage) {
                 imagePath = layoutModel.sysImage.imagePath;
@@ -158,6 +186,7 @@ export default class AppLoginButton extends Vue {
             }
             return imagePath;
         }
+    }
 
     /**
      * 图标
@@ -165,7 +194,8 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get cssClass() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             let cssClass = '';
             if (layoutModel.sysImage) {
                 cssClass = layoutModel.sysImage.iconcls;
@@ -174,6 +204,7 @@ export default class AppLoginButton extends Vue {
             }
             return cssClass;
         }
+    }
 
     /**
      * 图标方向
@@ -181,9 +212,11 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get iconAlign() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.iconAlign || 'LEFT';
         }
+    }
 
     /**
      * 按钮幽灵属性，使按钮背景透明
@@ -191,9 +224,11 @@ export default class AppLoginButton extends Vue {
      * @memberof AppLoginButton
      */
     get buttonGhost() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        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>
@@ -59,73 +53,101 @@ export default class AppLoginInput extends Vue {
      */
     @Prop() public defaultType?: string;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppLoginInput
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppLoginInput
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 标题
      *
      * @memberof AppLoginInput
      */
     get curCaption() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.caption;
         }
+    }
 
     /**
      * 当前容器样式
      * 
      * @memberof AppLoginInput
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 类名
      *
      * @memberof AppLoginInput
      */
-    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}`;
+        }
     }
 
     /**
-     * 当前值
+     * 禁用
      * 
-     * @type {any}
      * @memberof AppLoginInput
      */
-    get curValue() {
-        return this.value;
+    get disabled() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.disabled;
+        }
     }
 
     /**
-     * 值变化
+     * 只读
      * 
-     * @memberof AppPresetTextInput
+     * @memberof AppLoginInput
      */
-    set curValue(val: any) {
-        this.$emit('valueChange', { name: this.name, value: val });
+    get readonly() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.readonly;
+        }
     }
 
     /**
-     * 禁用
+     * 当前值
      *
-     * @memberof AppPresetSwitch
+     * @type {any}
+     * @memberof AppLoginInput
      */
-    get disabled() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.disabled;
+    get curValue() {
+        return this.value;
     }
 
     /**
-     * 只读
+     * 值变化
      *
-     * @memberof AppPresetSwitch
+     * @memberof AppLoginInput
      */
-    get readonly() {
-        const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.readonly;
+    set curValue(val: any) {
+        this.$emit('valueChange', { name: this.itemName, value: val });
     }
 
 }

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

@@ -34,24 +34,46 @@ export default class AppLoginMessage extends Vue {
    */
   @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.name];
+  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}`;
+  get curClassName() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return `app-login-message ${this.itemName} ${layoutModel.sysCss}`;
+    }
   }
 
 }

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")}`
             }}</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,19 +124,23 @@ export default class AppLoginNoteVerify extends Vue {
      * 
      * @memberof AppLoginNoteVerify
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 类名
      *
      * @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,19 +90,23 @@ export default class AppLoginOrg extends Vue {
      * 
      * @memberof AppLoginOrg
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 类名
      *
      * @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

@@ -41,24 +41,46 @@ 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];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 类名
      *
      * @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}`;
+        }
     }
 
     /**

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({})
@@ -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 {
     /**
@@ -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,7 +11,7 @@
 
 <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 {
     /**
@@ -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

@@ -26,45 +26,45 @@ export default class AppCtrlPos extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
      *
-     * @type {*}
+     * @type {number}
      * @memberof AppCtrlPos
      */
-    public currentLayoutModel: any;
+    @Prop({ default: 0 }) public index?: number;
 
     /**
-     * 当前容器类名
+     * 项名称
      *
+     * @type {*}
      * @memberof AppCtrlPos
      */
-    get curClassName() {
-        return {
-            'app-ctrl-pos': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
-        }
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
-     * 当前容器样式
+     * 当前容器类名
      *
      * @memberof AppCtrlPos
      */
-    get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-ctrl-pos ${this.itemName} ${layoutModel.sysCss}`;
         }
-        return '';
     }
 
     /**
-     * Vue生命周期 --- created
+     * 当前容器样式
      *
      * @memberof AppCtrlPos
      */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
+        }
     }
 
 }

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

@@ -8,16 +8,10 @@
             </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 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>
@@ -43,6 +37,14 @@ export default class AppNavPos extends Vue {
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppNavPos
+     */
+    @Prop({ default: 0 }) public index?: number;
+
     /**
      * 导航数据
      *
@@ -52,12 +54,14 @@ export default class AppNavPos extends Vue {
     @Prop() public navData: any;
 
     /**
-     * 当前布局模型
+     * 项名称
      *
      * @type {*}
      * @memberof AppNavPos
      */
-    public currentLayoutModel: any;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
      * 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
@@ -66,7 +70,7 @@ export default class AppNavPos extends Vue {
      * @memberof AppNavPos
      */
     get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" {
-        const currentModel = this.layoutModelDetails[this.name];
+        const currentModel = this.layoutModelDetails[this.itemName];
         if (currentModel && currentModel.dynaNavMode) {
             return currentModel.dynaNavMode;
         }
@@ -80,7 +84,7 @@ export default class AppNavPos extends Vue {
      * @memberof AppNavPos
      */
     get enableCache(): boolean {
-        const currentModel = this.layoutModelDetails[this.name];
+        const currentModel = this.layoutModelDetails[this.itemName];
         if (currentModel) {
             return currentModel.enableCache;
         }
@@ -112,11 +116,11 @@ export default class AppNavPos extends Vue {
      * @memberof AppNavPos
      */
     get curClassName() {
-        return {
-            'app-nav-pos': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        const currentModel = this.layoutModelDetails[this.itemName];
+        if (currentModel) {
+            return `app-nav-pos ${this.itemName} ${currentModel.sysCss}`;
         }
+
     }
 
     /**
@@ -125,19 +129,10 @@ export default class AppNavPos extends Vue {
      * @memberof AppNavPos
      */
     get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
-        }
-        return '';
+        const currentModel = this.layoutModelDetails[this.itemName];
+        if (currentModel) {
+            return currentModel.getElementStyle();
         }
-
-    /**
-     * Vue生命周期 --- created
-     *
-     * @memberof AppNavPos
-     */
-    created() {
-        this.currentLayoutModel = this.layoutModelDetails[this.name];
     }
 
     /**

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();
+    }
+
     /**
      * 插槽对象
      *
@@ -71,37 +89,44 @@ export default class AppScrollContainer extends Vue {
      */
     public middleContainerStyle: any = {};
 
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppScrollContainer
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
+
     /**
      * 当前容器样式类
      */
-    get curClassName(){
-        const layoutModel = this.layoutModelDetails[this.name];
-        return `app-scroll-container ${this.name} ${layoutModel.sysCss}`;
+    get curClassName() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-scroll-container ${this.itemName} ${layoutModel.sysCss}`;
+        }
     }
 
     /**
      * 当前容器样式
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 获取项布局样式
      */
-    public  getItemPosStyle(name:string){
-        const layoutModel = this.layoutModelDetails[name];
+    public getItemPosStyle(name: string) {
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if(layoutModel){
             return layoutModel.getBorderLayoutStyle();
         }
-
-    /**
-     * 组件初始化
-     *
-     * @memberof AppScrollContainer
-     */
-    public created() {
-        this.initScrollContainer();
     }
 
     /**
@@ -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,25 +82,36 @@ 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];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 获取项布局样式
      */
     public getItemPosStyle(name: string) {
-        const layoutModel = this.layoutModelDetails[name];
+        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,25 +82,36 @@ 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];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 获取项布局样式
      */
     public getItemPosStyle(name: string) {
-        const layoutModel = this.layoutModelDetails[name];
+        let layoutModel: any;
+        if (this.index) {
+            layoutModel = this.layoutModelDetails[`${name}_${this.index}`];
+        } else {
+            layoutModel = this.layoutModelDetails[name];
+        }
+        if (layoutModel) {
             return layoutModel.getCommonLayoutStyle();
         }
+    }
 }
 </script>
 <style lang='less'>

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">
+    <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>
@@ -9,7 +10,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 AppTabPage extends Vue {
@@ -30,12 +31,22 @@ export default class AppTabPage extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
      *
-     * @type {*}
+     * @type {number}
      * @memberof AppTabPage
      */
-    public currentLayoutModel: any;
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 布局模型详情变更
+     * @param newVal 
+     * @param oldVal 
+     */
+    @Watch('layoutModelDetails')
+    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
+        this.initTabPage();
+    }
 
     /**
      * 插槽对象
@@ -45,12 +56,20 @@ export default class AppTabPage extends Vue {
     public containerModel: any[] = [];
 
     /**
-     * 组件初始化
+     * 当前布局模型
      *
      * @memberof AppTabPage
      */
-    public created() {
-        this.init();
+    public currentLayoutModel: any = {};
+
+    /**
+     * 项名称
+     *
+     * @type {*}
+     * @memberof AppTabPage
+     */
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
     }
 
     /**
@@ -58,10 +77,11 @@ export default class AppTabPage extends Vue {
      *
      * @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) => {
+    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);
             })
         }
@@ -73,10 +93,9 @@ export default class AppTabPage extends Vue {
      * @memberof AppTabPage
      */
     get curClassName() {
-        return {
-            'app-tab-page': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-tab-page ${this.itemName} ${layoutModel.sysCss}`;
         }
     }
 
@@ -86,10 +105,10 @@ export default class AppTabPage extends Vue {
      * @memberof AppTabPage
      */
     get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
-        return '';
     }
 
 }

src/components/layout-element/container/app-tab-panel/app-tab-panel.vue → src/components/layout-element/structure/app-tab-panel/app-tab-panel.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 AppTabPanel extends Vue {
@@ -30,12 +30,22 @@ export default class AppTabPanel extends Vue {
     @Prop() public layoutModelDetails: any;
 
     /**
-     * 当前布局模型
+     * 下标
+     *
+     * @type {number}
+     * @memberof AppTabPanel
+     */
+    @Prop({ default: 0 }) public index?: number;
+
+    /**
+     * 项名称
      *
      * @type {*}
      * @memberof AppTabPanel
      */
-    public currentLayoutModel: any;
+    get itemName() {
+        return this.index ? `${this.name}_${this.index}` : this.name;
+    }
 
     /**
      * 插槽对象
@@ -52,12 +62,13 @@ export default class AppTabPanel extends Vue {
     public activeName: string = '';
 
     /**
-     * 组件初始化
-     *
-     * @memberof AppTabPanel
+     * 布局模型详情变更
+     * @param newVal 
+     * @param oldVal 
      */
-    public created() {
-        this.initTabPage();
+    @Watch('layoutModelDetails')
+    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
+        this.initTabPanel();
     }
 
     /**
@@ -65,15 +76,15 @@ export default class AppTabPanel extends Vue {
      *
      * @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) => {
+    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.name].clickPage(this.activeName);
+        this.layoutModelDetails[this.itemName].clickPage(this.activeName);
     }
 
     /**
@@ -82,7 +93,9 @@ export default class AppTabPanel extends Vue {
      * @memberof AppTabPanel
      */
     public handleClick(tab: any) {
-        this.layoutModelDetails[this.name].clickPage(tab);
+        if (this.layoutModelDetails[this.itemName]) {
+            this.layoutModelDetails[this.itemName].clickPage(tab);
+        }
     }
 
     /**
@@ -91,10 +104,9 @@ export default class AppTabPanel extends Vue {
      * @memberof AppTabPanel
      */
     get curClassName() {
-        return {
-            'app-tab-panel': true,
-            [this.name]: true,
-            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return `app-tab-panel ${this.itemName} ${layoutModel.sysCss}`;
         }
     }
 
@@ -104,10 +116,10 @@ export default class AppTabPanel extends Vue {
      * @memberof AppTabPanel
      */
     get curStyle() {
-        if (this.currentLayoutModel) {
-            return this.currentLayoutModel.getElementStyle();
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
+            return layoutModel.getElementStyle();
         }
-        return '';
     }
 }
 </script>

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

@@ -26,14 +26,34 @@ export default class AppPresetCaption extends Vue {
    */
   @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.name];
-        return `app-preset-caption ${this.name} ${layoutModel.sysCss}`;
+  get curClassName() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return `app-preset-caption ${this.itemName} ${layoutModel.sysCss}`;
+    }
   }
 
   /**
@@ -41,10 +61,12 @@ export default class AppPresetCaption extends Vue {
    * 
    * @memberof AppPresetCaption
    */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+  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,13 +81,32 @@ 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];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             let imagePath = '';
             if (layoutModel.sysImage) {
                 imagePath = layoutModel.sysImage.imagePath;
@@ -95,19 +114,23 @@ export default class AppPresetText extends Vue {
             return imagePath;
         }
 
+    }
+
     /**
      * 图标
      *
      * @memberof AppPresetTitle
      */
     get cssClass() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             let cssClass = '';
             if (layoutModel.sysImage) {
                 cssClass = layoutModel.sysImage.iconcls;
             }
             return cssClass;
         }
+    }
 
     /**
      * 内容类型
@@ -115,9 +138,11 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get contentType() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        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,9 +162,11 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get curStyle() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.getElementStyle();
         }
+    }
 
     /**
      * 绘制模式
@@ -145,19 +174,21 @@ export default class AppPresetText extends Vue {
      * @memberof AppPresetTitle
      */
     get renderMode() {
-        const layoutModel = this.layoutModelDetails[this.name];
+        const layoutModel = this.layoutModelDetails[this.itemName];
+        if (layoutModel) {
             return layoutModel.renderMode || 'TEXT';
         }
+    }
 
     /**
      * 内容
      *
      * @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,14 +213,16 @@ export default class AppPresetText extends Vue {
      *
      * @memberof AppPresetText
      */
-    get contentStyle(): string {
-        const layoutModel = this.layoutModelDetails[this.name];
+    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;
         }
+    }
 }
 </script>
 <style lang="less">

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,10 +59,12 @@ export default class AppPresetTitle extends Vue {
      * 
      * @memberof AppPresetTitle
      */
-    get curStyle(){
-        const layoutModel = this.layoutModelDetails[this.name];
+    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