ibizdev提交

app_Default/src/app/app-routing.module.ts

@@ -7,6 +7,14 @@ const routes: Routes = [
     path: '',
     children: [
             {
+        path: 'exapmple_examplemain3editview',
+        loadChildren: '@pages/exapmple/example-main3-edit-view/example-main3-edit-view.module#ExampleMain3EditViewModule'
+      },
+      {
+        path: 'module_entityeditview',
+        loadChildren: '@pages/module/entity-edit-view/entity-edit-view.module#EntityEditViewModule'
+      },
+      {
         path: 'exapmple_exampleeditortype',
         loadChildren: '@pages/exapmple/example-editor-type/example-editor-type.module#ExampleEditorTypeModule'
       },
@@ -14,10 +22,34 @@ const routes: Routes = [
         path: 'exapmple_exampleeditview',
         loadChildren: '@pages/exapmple/example-edit-view/example-edit-view.module#ExampleEditViewModule'
       },
+      {
+        path: 'module3_entity3editview',
+        loadChildren: '@pages/module3/entity3-edit-view/entity3-edit-view.module#Entity3EditViewModule'
+      },
+      {
+        path: 'exapmple_examplemain2editview',
+        loadChildren: '@pages/exapmple/example-main2-edit-view/example-main2-edit-view.module#ExampleMain2EditViewModule'
+      },
+      {
+        path: 'module4_entity4editview',
+        loadChildren: '@pages/module4/entity4-edit-view/entity4-edit-view.module#Entity4EditViewModule'
+      },
+      {
+        path: 'module5_entity5editview',
+        loadChildren: '@pages/module5/entity5-edit-view/entity5-edit-view.module#Entity5EditViewModule'
+      },
       {
         path: 'exapmple_exampledlfeditview',
         loadChildren: '@pages/exapmple/example-dlfedit-view/example-dlfedit-view.module#ExampleDLFEditViewModule'
       },
+      {
+        path: 'module2_entity2editview',
+        loadChildren: '@pages/module2/entity2-edit-view/entity2-edit-view.module#Entity2EditViewModule'
+      },
+      {
+        path: 'exapmple_examplemain4editview',
+        loadChildren: '@pages/exapmple/example-main4-edit-view/example-main4-edit-view.module#ExampleMain4EditViewModule'
+      },
     ]
   },
   {

app_Default/src/app/app.component.html

 <nz-layout class="app-layout">
     <nz-sider>
         <ul nz-menu nzMode="inline" nzTheme="dark">
-                            <li nz-menu-item (click)="onClick('exapmple_exampleeditortype')">基础编辑器</li>
+                            <li nz-menu-item (click)="onClick('exapmple_examplemain3editview')">模拟</li>
+                <li nz-menu-item (click)="onClick('module_entityeditview')">实体编辑视图</li>
+                <li nz-menu-item (click)="onClick('exapmple_exampleeditortype')">基础编辑器</li>
                 <li nz-menu-item (click)="onClick('exapmple_exampleeditview')">基础表单项</li>
+                <li nz-menu-item (click)="onClick('module3_entity3editview')">实体3编辑视图</li>
+                <li nz-menu-item (click)="onClick('exapmple_examplemain2editview')">业务</li>
+                <li nz-menu-item (click)="onClick('module4_entity4editview')">实体4编辑视图</li>
+                <li nz-menu-item (click)="onClick('module5_entity5editview')">实体5编辑视图</li>
                 <li nz-menu-item (click)="onClick('exapmple_exampledlfeditview')">表单项动态逻辑示例</li>
+                <li nz-menu-item (click)="onClick('module2_entity2editview')">实体2编辑视图</li>
+                <li nz-menu-item (click)="onClick('exapmple_examplemain4editview')">表单4</li>
         </ul>
     </nz-sider>
     <nz-content>

app_Default/src/pages/exapmple/example-main2-edit-view/example-main2-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main2-form (dataChangeEvent)="onFormDataChange($event)"></main2-form></div>
\ No newline at end of file

app_Default/src/pages/exapmple/example-main2-edit-view/example-main2-edit-view.less

+// this is less

app_Default/src/pages/exapmple/example-main2-edit-view/example-main2-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/example/main2/main2.module';
+import { ExampleMain2EditViewPage } from './example-main2-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ExampleMain2EditViewPage,
+        data: { name: 'exapmple_examplemain2editview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class ExampleMain2EditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    ExampleMain2EditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ExampleMain2EditViewPage],
+  entryComponents: [ExampleMain2EditViewPage],
+  exports: [ExampleMain2EditViewPage]
+})
+export class ExampleMain2EditViewModule {}

app_Default/src/pages/exapmple/example-main2-edit-view/example-main2-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-example-main2-edit-view',
+  templateUrl: './example-main2-edit-view.html',
+  styleUrls: ['./example-main2-edit-view.less']
+})
+export class ExampleMain2EditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/pages/exapmple/example-main3-edit-view/example-main3-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main3-form (dataChangeEvent)="onFormDataChange($event)"></main3-form></div>
\ No newline at end of file

app_Default/src/pages/exapmple/example-main3-edit-view/example-main3-edit-view.less

+// this is less

app_Default/src/pages/exapmple/example-main3-edit-view/example-main3-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/example/main3/main3.module';
+import { ExampleMain3EditViewPage } from './example-main3-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ExampleMain3EditViewPage,
+        data: { name: 'exapmple_examplemain3editview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class ExampleMain3EditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    ExampleMain3EditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ExampleMain3EditViewPage],
+  entryComponents: [ExampleMain3EditViewPage],
+  exports: [ExampleMain3EditViewPage]
+})
+export class ExampleMain3EditViewModule {}

app_Default/src/pages/exapmple/example-main3-edit-view/example-main3-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-example-main3-edit-view',
+  templateUrl: './example-main3-edit-view.html',
+  styleUrls: ['./example-main3-edit-view.less']
+})
+export class ExampleMain3EditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/pages/exapmple/example-main4-edit-view/example-main4-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main4-form (dataChangeEvent)="onFormDataChange($event)"></main4-form></div>
\ No newline at end of file

app_Default/src/pages/exapmple/example-main4-edit-view/example-main4-edit-view.less

+// this is less

app_Default/src/pages/exapmple/example-main4-edit-view/example-main4-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/example/main4/main4.module';
+import { ExampleMain4EditViewPage } from './example-main4-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ExampleMain4EditViewPage,
+        data: { name: 'exapmple_examplemain4editview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class ExampleMain4EditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    ExampleMain4EditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ExampleMain4EditViewPage],
+  entryComponents: [ExampleMain4EditViewPage],
+  exports: [ExampleMain4EditViewPage]
+})
+export class ExampleMain4EditViewModule {}

app_Default/src/pages/exapmple/example-main4-edit-view/example-main4-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-example-main4-edit-view',
+  templateUrl: './example-main4-edit-view.html',
+  styleUrls: ['./example-main4-edit-view.less']
+})
+export class ExampleMain4EditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/pages/module/entity-edit-view/entity-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main-form (dataChangeEvent)="onFormDataChange($event)"></main-form></div>
\ No newline at end of file

app_Default/src/pages/module/entity-edit-view/entity-edit-view.less

+// this is less

app_Default/src/pages/module/entity-edit-view/entity-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/entity/main/main.module';
+import { EntityEditViewPage } from './entity-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: EntityEditViewPage,
+        data: { name: 'module_entityeditview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class EntityEditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    EntityEditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EntityEditViewPage],
+  entryComponents: [EntityEditViewPage],
+  exports: [EntityEditViewPage]
+})
+export class EntityEditViewModule {}

app_Default/src/pages/module/entity-edit-view/entity-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-entity-edit-view',
+  templateUrl: './entity-edit-view.html',
+  styleUrls: ['./entity-edit-view.less']
+})
+export class EntityEditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/pages/module2/entity2-edit-view/entity2-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main-form (dataChangeEvent)="onFormDataChange($event)"></main-form></div>
\ No newline at end of file

app_Default/src/pages/module2/entity2-edit-view/entity2-edit-view.less

+// this is less

app_Default/src/pages/module2/entity2-edit-view/entity2-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/entity2/main/main.module';
+import { Entity2EditViewPage } from './entity2-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: Entity2EditViewPage,
+        data: { name: 'module2_entity2editview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class Entity2EditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    Entity2EditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [Entity2EditViewPage],
+  entryComponents: [Entity2EditViewPage],
+  exports: [Entity2EditViewPage]
+})
+export class Entity2EditViewModule {}

app_Default/src/pages/module2/entity2-edit-view/entity2-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-entity2-edit-view',
+  templateUrl: './entity2-edit-view.html',
+  styleUrls: ['./entity2-edit-view.less']
+})
+export class Entity2EditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/pages/module3/entity3-edit-view/entity3-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main-form (dataChangeEvent)="onFormDataChange($event)"></main-form></div>
\ No newline at end of file

app_Default/src/pages/module3/entity3-edit-view/entity3-edit-view.less

+// this is less

app_Default/src/pages/module3/entity3-edit-view/entity3-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/entity3/main/main.module';
+import { Entity3EditViewPage } from './entity3-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: Entity3EditViewPage,
+        data: { name: 'module3_entity3editview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class Entity3EditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    Entity3EditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [Entity3EditViewPage],
+  entryComponents: [Entity3EditViewPage],
+  exports: [Entity3EditViewPage]
+})
+export class Entity3EditViewModule {}

app_Default/src/pages/module3/entity3-edit-view/entity3-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-entity3-edit-view',
+  templateUrl: './entity3-edit-view.html',
+  styleUrls: ['./entity3-edit-view.less']
+})
+export class Entity3EditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/pages/module4/entity4-edit-view/entity4-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main-form (dataChangeEvent)="onFormDataChange($event)"></main-form></div>
\ No newline at end of file

app_Default/src/pages/module4/entity4-edit-view/entity4-edit-view.less

+// this is less

app_Default/src/pages/module4/entity4-edit-view/entity4-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/entity4/main/main.module';
+import { Entity4EditViewPage } from './entity4-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: Entity4EditViewPage,
+        data: { name: 'module4_entity4editview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class Entity4EditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    Entity4EditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [Entity4EditViewPage],
+  entryComponents: [Entity4EditViewPage],
+  exports: [Entity4EditViewPage]
+})
+export class Entity4EditViewModule {}

app_Default/src/pages/module4/entity4-edit-view/entity4-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-entity4-edit-view',
+  templateUrl: './entity4-edit-view.html',
+  styleUrls: ['./entity4-edit-view.less']
+})
+export class Entity4EditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/pages/module5/entity5-edit-view/entity5-edit-view.html

+<div style="background: #fff;height: 100%;padding: 16px;overflow: auto;">
+    <main-form (dataChangeEvent)="onFormDataChange($event)"></main-form></div>
\ No newline at end of file

app_Default/src/pages/module5/entity5-edit-view/entity5-edit-view.less

+// this is less

app_Default/src/pages/module5/entity5-edit-view/entity5-edit-view.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditFormModule } from '@widgets/entity5/main/main.module';
+import { Entity5EditViewPage } from './entity5-edit-view';
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: Entity5EditViewPage,
+        data: { name: 'module5_entity5editview' }
+      }
+    ])
+  ],
+  exports: [ RouterModule ]
+})
+export class Entity5EditViewRouteModule {}
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    Entity5EditViewRouteModule,
+    EditFormModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [Entity5EditViewPage],
+  entryComponents: [Entity5EditViewPage],
+  exports: [Entity5EditViewPage]
+})
+export class Entity5EditViewModule {}

app_Default/src/pages/module5/entity5-edit-view/entity5-edit-view.ts

+import { Component } from '@angular/core';
+import { Subject, Unsubscribable } from 'rxjs';
+
+
+@Component({
+  selector: 'view-entity5-edit-view',
+  templateUrl: './entity5-edit-view.html',
+  styleUrls: ['./entity5-edit-view.less']
+})
+export class Entity5EditViewPage {
+
+  /**
+    * 表单数据变化
+    *
+    * @param {*} $event
+    * @memberof BookTestEditViewPage
+    */
+  public onFormDataChange($event: any) {
+    console.log($event);
+  }
+
+}

app_Default/src/widgets/entity/main/main.html

+<form nz-form nz-row class="app-form">
+    <div nz-row>
+        <nz-tabset>
+            <nz-tab [nzTitle]="formpage1Template">
+                <ng-template #formpage1Template>
+                    基本信息
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group1.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="实体基本信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.entityname.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.entityname.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.entityname[1].required" style="width: 130px;">实体名称</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.entityname.validateStatus" [nzErrorTip]="detailsModel.entityname.error">
+            <input nz-input name="entityname" [ngModel]="data.entityname" [disabled]="detailsModel.entityname.disabled" placeholder="请输入..." (ngModelChange)="onFormDataChange('entityname', $event)" style=""/>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+            <nz-tab [nzTitle]="formpage2Template">
+                <ng-template #formpage2Template>
+                    其它
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group2.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="操作信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createman[1].required" style="width: 130px;">建立人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createman.validateStatus" [nzErrorTip]="detailsModel.createman.error">
+            <span name="createman" style="">{{ data.createman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createdate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createdate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createdate[1].required" style="width: 130px;">建立时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createdate.validateStatus" [nzErrorTip]="detailsModel.createdate.error">
+            <span name="createdate" style="">{{ data.createdate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updateman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updateman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updateman[1].required" style="width: 130px;">更新人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updateman.validateStatus" [nzErrorTip]="detailsModel.updateman.error">
+            <span name="updateman" style="">{{ data.updateman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updatedate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updatedate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updatedate[1].required" style="width: 130px;">更新时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updatedate.validateStatus" [nzErrorTip]="detailsModel.updatedate.error">
+            <span name="updatedate" style="">{{ data.updatedate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+        </nz-tabset>
+    </div>
+</form>
\ No newline at end of file

app_Default/src/widgets/entity/main/main.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity/main/main.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/entity/main/main.ts

+import { Component, OnInit, Input, Output, EventEmitter, ViewContainerRef, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { Util } from '@global/util/util';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '@global/model/form-detail';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+	selector: 'main-form',
+	templateUrl: './main.html',
+	styleUrls: ['./main.less'],
+})
+export class EditForm implements OnInit {
+
+	constructor(private $util: Util) {
+		
+	}
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    @Input()
+    set formData(val: any) {
+        if (val) {
+            this.data = JSON.parse(JSON.stringify(val));
+            this.formLogic('', null, null);
+        }
+    }
+
+    /**
+     * 表单数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    public data: any = {};
+
+	/**
+	 * 表单数据变化
+	 *
+	 * @type {Subject<any>}
+	 * @memberof EditForm
+	 */
+	public formDataChange: Subject<any> = new Subject<any>();
+
+	/**
+	 * 表单数据变化抛出事件
+	 *
+	 * @type {EventEmitter<any>}
+	 * @memberof EditForm
+	 */
+	@Output() dataChangeEvent: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 代码表模型
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public codelistModel: any = {
+        'SysOperator': [
+        ]
+    };
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entityname: [
+            { type: 'string', message: '实体名称 值必须为字符串类型' },
+            { required: false, type: 'string', message: '实体名称 值不能为空' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立人 值不能为空' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立时间 值不能为空' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新人 值不能为空' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新时间 值不能为空' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entityname: new FormItemModel({ caption: '实体名称', detailType: 'FORMITEM', name: 'entityname', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        group1: new FormGroupPanelModel({ caption: '实体基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+, 
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+, 
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    };
+
+    /**
+     * 生命周期
+     *
+     * @memberof EditForm
+     */
+    ngOnInit(): void {
+        this.formLogic('', null, null);
+        this.formDataChange.pipe(
+			debounceTime(300),
+            distinctUntilChanged()
+		).subscribe(data => {
+			this.dataChangeEvent.emit(JSON.parse(data.data));
+			const field = data.field;
+			if (field) {
+				this.formLogic(field.name, field.value, field.oldVal);
+				this.validateFormItem(field.name);
+			}
+		});
+    }
+
+	/**
+	 * 表单项值变化事件
+	 *
+	 * @param {{name: string, value: any}} {name, value}
+	 * @memberof EditForm
+	 */
+	public onFormDataChange(name: string, value: any): void {
+		if (Object.is(this.data[name], value)) {
+            return;
+        }
+		let oldVal: any = this.data[name];
+		this.data[name] = value;
+		this.formDataChange.next({ data: JSON.stringify(this.data), field: { name: name, value: value, oldVal: oldVal } });
+	}
+
+	/**
+	 * 校验表单项
+	 *
+	 * @param {string} name
+	 * @memberof EditForm
+	 */
+	public validateFormItem(name: string) {
+		if (!name) {
+			return;
+		}
+		const rule: any[] = this.rules[name];
+		let message = '';
+        let status = '';
+        const val: any = this.data[name];
+        rule.every((rule: any) => {
+            if (rule.required && (!val || Object.is(val, '')) ) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            } else if (val && rule.pattern && !rule.pattern.test(val)) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            }
+            return true;
+        });
+		this.detailsModel[name].error = message;
+		this.detailsModel[name].validateStatus = status;
+	}
+
+    /**
+     * 获取代码表集合
+     *
+     * @param {string} name
+     * @memberof EditForm
+     */
+    public getCodeList(name: string) {
+        if (!name || !this.codelistModel[name]) {
+            return [];
+        }
+        return this.codelistModel[name];
+    }
+
+    /**
+     * 表单逻辑
+     *
+     * @param {string} name
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof EditForm
+     */
+    public formLogic(name: string, newVal: any, oldVal: any) {
+                
+
+
+
+
+
+
+
+
+
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity2/main/main.html

+<form nz-form nz-row class="app-form">
+    <div nz-row>
+        <nz-tabset>
+            <nz-tab [nzTitle]="formpage1Template">
+                <ng-template #formpage1Template>
+                    基本信息
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group1.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="实体2基本信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.entity2name.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.entity2name.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.entity2name[1].required" style="width: 130px;">实体2名称</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.entity2name.validateStatus" [nzErrorTip]="detailsModel.entity2name.error">
+            <input nz-input name="entity2name" [ngModel]="data.entity2name" [disabled]="detailsModel.entity2name.disabled" placeholder="请输入..." (ngModelChange)="onFormDataChange('entity2name', $event)" style=""/>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+            <nz-tab [nzTitle]="formpage2Template">
+                <ng-template #formpage2Template>
+                    其它
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group2.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="操作信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createman[1].required" style="width: 130px;">建立人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createman.validateStatus" [nzErrorTip]="detailsModel.createman.error">
+            <span name="createman" style="">{{ data.createman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createdate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createdate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createdate[1].required" style="width: 130px;">建立时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createdate.validateStatus" [nzErrorTip]="detailsModel.createdate.error">
+            <span name="createdate" style="">{{ data.createdate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updateman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updateman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updateman[1].required" style="width: 130px;">更新人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updateman.validateStatus" [nzErrorTip]="detailsModel.updateman.error">
+            <span name="updateman" style="">{{ data.updateman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updatedate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updatedate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updatedate[1].required" style="width: 130px;">更新时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updatedate.validateStatus" [nzErrorTip]="detailsModel.updatedate.error">
+            <span name="updatedate" style="">{{ data.updatedate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+        </nz-tabset>
+    </div>
+</form>
\ No newline at end of file

app_Default/src/widgets/entity2/main/main.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity2/main/main.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/entity2/main/main.ts

+import { Component, OnInit, Input, Output, EventEmitter, ViewContainerRef, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { Util } from '@global/util/util';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '@global/model/form-detail';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+	selector: 'main-form',
+	templateUrl: './main.html',
+	styleUrls: ['./main.less'],
+})
+export class EditForm implements OnInit {
+
+	constructor(private $util: Util) {
+		
+	}
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    @Input()
+    set formData(val: any) {
+        if (val) {
+            this.data = JSON.parse(JSON.stringify(val));
+            this.formLogic('', null, null);
+        }
+    }
+
+    /**
+     * 表单数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    public data: any = {};
+
+	/**
+	 * 表单数据变化
+	 *
+	 * @type {Subject<any>}
+	 * @memberof EditForm
+	 */
+	public formDataChange: Subject<any> = new Subject<any>();
+
+	/**
+	 * 表单数据变化抛出事件
+	 *
+	 * @type {EventEmitter<any>}
+	 * @memberof EditForm
+	 */
+	@Output() dataChangeEvent: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 代码表模型
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public codelistModel: any = {
+        'SysOperator': [
+        ]
+    };
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entity2name: [
+            { type: 'string', message: '实体2名称 值必须为字符串类型' },
+            { required: false, type: 'string', message: '实体2名称 值不能为空' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立人 值不能为空' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立时间 值不能为空' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新人 值不能为空' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新时间 值不能为空' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entity2name: new FormItemModel({ caption: '实体2名称', detailType: 'FORMITEM', name: 'entity2name', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        group1: new FormGroupPanelModel({ caption: '实体2基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+, 
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+, 
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    };
+
+    /**
+     * 生命周期
+     *
+     * @memberof EditForm
+     */
+    ngOnInit(): void {
+        this.formLogic('', null, null);
+        this.formDataChange.pipe(
+			debounceTime(300),
+            distinctUntilChanged()
+		).subscribe(data => {
+			this.dataChangeEvent.emit(JSON.parse(data.data));
+			const field = data.field;
+			if (field) {
+				this.formLogic(field.name, field.value, field.oldVal);
+				this.validateFormItem(field.name);
+			}
+		});
+    }
+
+	/**
+	 * 表单项值变化事件
+	 *
+	 * @param {{name: string, value: any}} {name, value}
+	 * @memberof EditForm
+	 */
+	public onFormDataChange(name: string, value: any): void {
+		if (Object.is(this.data[name], value)) {
+            return;
+        }
+		let oldVal: any = this.data[name];
+		this.data[name] = value;
+		this.formDataChange.next({ data: JSON.stringify(this.data), field: { name: name, value: value, oldVal: oldVal } });
+	}
+
+	/**
+	 * 校验表单项
+	 *
+	 * @param {string} name
+	 * @memberof EditForm
+	 */
+	public validateFormItem(name: string) {
+		if (!name) {
+			return;
+		}
+		const rule: any[] = this.rules[name];
+		let message = '';
+        let status = '';
+        const val: any = this.data[name];
+        rule.every((rule: any) => {
+            if (rule.required && (!val || Object.is(val, '')) ) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            } else if (val && rule.pattern && !rule.pattern.test(val)) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            }
+            return true;
+        });
+		this.detailsModel[name].error = message;
+		this.detailsModel[name].validateStatus = status;
+	}
+
+    /**
+     * 获取代码表集合
+     *
+     * @param {string} name
+     * @memberof EditForm
+     */
+    public getCodeList(name: string) {
+        if (!name || !this.codelistModel[name]) {
+            return [];
+        }
+        return this.codelistModel[name];
+    }
+
+    /**
+     * 表单逻辑
+     *
+     * @param {string} name
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof EditForm
+     */
+    public formLogic(name: string, newVal: any, oldVal: any) {
+                
+
+
+
+
+
+
+
+
+
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity3/main/main.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity3/main/main.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/entity4/main/main.html

+<form nz-form nz-row class="app-form">
+    <div nz-row>
+        <nz-tabset>
+            <nz-tab [nzTitle]="formpage1Template">
+                <ng-template #formpage1Template>
+                    基本信息
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group1.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="实体4基本信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.entity4name.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.entity4name.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.entity4name[1].required" style="width: 130px;">实体4名称</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.entity4name.validateStatus" [nzErrorTip]="detailsModel.entity4name.error">
+            <input nz-input name="entity4name" [ngModel]="data.entity4name" [disabled]="detailsModel.entity4name.disabled" placeholder="请输入..." (ngModelChange)="onFormDataChange('entity4name', $event)" style=""/>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+            <nz-tab [nzTitle]="formpage2Template">
+                <ng-template #formpage2Template>
+                    其它
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group2.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="操作信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createman[1].required" style="width: 130px;">建立人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createman.validateStatus" [nzErrorTip]="detailsModel.createman.error">
+            <span name="createman" style="">{{ data.createman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createdate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createdate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createdate[1].required" style="width: 130px;">建立时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createdate.validateStatus" [nzErrorTip]="detailsModel.createdate.error">
+            <span name="createdate" style="">{{ data.createdate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updateman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updateman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updateman[1].required" style="width: 130px;">更新人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updateman.validateStatus" [nzErrorTip]="detailsModel.updateman.error">
+            <span name="updateman" style="">{{ data.updateman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updatedate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updatedate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updatedate[1].required" style="width: 130px;">更新时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updatedate.validateStatus" [nzErrorTip]="detailsModel.updatedate.error">
+            <span name="updatedate" style="">{{ data.updatedate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+        </nz-tabset>
+    </div>
+</form>
\ No newline at end of file

app_Default/src/widgets/entity4/main/main.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity4/main/main.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/entity4/main/main.ts

+import { Component, OnInit, Input, Output, EventEmitter, ViewContainerRef, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { Util } from '@global/util/util';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '@global/model/form-detail';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+	selector: 'main-form',
+	templateUrl: './main.html',
+	styleUrls: ['./main.less'],
+})
+export class EditForm implements OnInit {
+
+	constructor(private $util: Util) {
+		
+	}
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    @Input()
+    set formData(val: any) {
+        if (val) {
+            this.data = JSON.parse(JSON.stringify(val));
+            this.formLogic('', null, null);
+        }
+    }
+
+    /**
+     * 表单数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    public data: any = {};
+
+	/**
+	 * 表单数据变化
+	 *
+	 * @type {Subject<any>}
+	 * @memberof EditForm
+	 */
+	public formDataChange: Subject<any> = new Subject<any>();
+
+	/**
+	 * 表单数据变化抛出事件
+	 *
+	 * @type {EventEmitter<any>}
+	 * @memberof EditForm
+	 */
+	@Output() dataChangeEvent: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 代码表模型
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public codelistModel: any = {
+        'SysOperator': [
+        ]
+    };
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entity4name: [
+            { type: 'string', message: '实体4名称 值必须为字符串类型' },
+            { required: false, type: 'string', message: '实体4名称 值不能为空' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立人 值不能为空' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立时间 值不能为空' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新人 值不能为空' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新时间 值不能为空' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entity4name: new FormItemModel({ caption: '实体4名称', detailType: 'FORMITEM', name: 'entity4name', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        group1: new FormGroupPanelModel({ caption: '实体4基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+, 
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+, 
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    };
+
+    /**
+     * 生命周期
+     *
+     * @memberof EditForm
+     */
+    ngOnInit(): void {
+        this.formLogic('', null, null);
+        this.formDataChange.pipe(
+			debounceTime(300),
+            distinctUntilChanged()
+		).subscribe(data => {
+			this.dataChangeEvent.emit(JSON.parse(data.data));
+			const field = data.field;
+			if (field) {
+				this.formLogic(field.name, field.value, field.oldVal);
+				this.validateFormItem(field.name);
+			}
+		});
+    }
+
+	/**
+	 * 表单项值变化事件
+	 *
+	 * @param {{name: string, value: any}} {name, value}
+	 * @memberof EditForm
+	 */
+	public onFormDataChange(name: string, value: any): void {
+		if (Object.is(this.data[name], value)) {
+            return;
+        }
+		let oldVal: any = this.data[name];
+		this.data[name] = value;
+		this.formDataChange.next({ data: JSON.stringify(this.data), field: { name: name, value: value, oldVal: oldVal } });
+	}
+
+	/**
+	 * 校验表单项
+	 *
+	 * @param {string} name
+	 * @memberof EditForm
+	 */
+	public validateFormItem(name: string) {
+		if (!name) {
+			return;
+		}
+		const rule: any[] = this.rules[name];
+		let message = '';
+        let status = '';
+        const val: any = this.data[name];
+        rule.every((rule: any) => {
+            if (rule.required && (!val || Object.is(val, '')) ) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            } else if (val && rule.pattern && !rule.pattern.test(val)) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            }
+            return true;
+        });
+		this.detailsModel[name].error = message;
+		this.detailsModel[name].validateStatus = status;
+	}
+
+    /**
+     * 获取代码表集合
+     *
+     * @param {string} name
+     * @memberof EditForm
+     */
+    public getCodeList(name: string) {
+        if (!name || !this.codelistModel[name]) {
+            return [];
+        }
+        return this.codelistModel[name];
+    }
+
+    /**
+     * 表单逻辑
+     *
+     * @param {string} name
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof EditForm
+     */
+    public formLogic(name: string, newVal: any, oldVal: any) {
+                
+
+
+
+
+
+
+
+
+
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity5/main/main.html

+<form nz-form nz-row class="app-form">
+    <div nz-row>
+        <nz-tabset>
+            <nz-tab [nzTitle]="formpage1Template">
+                <ng-template #formpage1Template>
+                    基本信息
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group1.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="实体5基本信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.entity5name.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.entity5name.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.entity5name[1].required" style="width: 130px;">实体5名称</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.entity5name.validateStatus" [nzErrorTip]="detailsModel.entity5name.error">
+            <input nz-input name="entity5name" [ngModel]="data.entity5name" [disabled]="detailsModel.entity5name.disabled" placeholder="请输入..." (ngModelChange)="onFormDataChange('entity5name', $event)" style=""/>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.grouppanel1.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-card [nzBordered]="false" nzTitle="分组面板" class="app-form-group">
+        <div nz-row>
+                
+        
+            </div>
+    </nz-card>
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+            <nz-tab [nzTitle]="formpage2Template">
+                <ng-template #formpage2Template>
+                    其它
+                </ng-template>
+                    <div nz-col [ngClass]="{ hidden: !detailsModel.group2.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+    <nz-card [nzBordered]="false" nzTitle="操作信息" class="app-form-group">
+    <div nz-row>
+            
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createman[1].required" style="width: 130px;">建立人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createman.validateStatus" [nzErrorTip]="detailsModel.createman.error">
+            <span name="createman" style="">{{ data.createman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.createdate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.createdate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.createdate[1].required" style="width: 130px;">建立时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.createdate.validateStatus" [nzErrorTip]="detailsModel.createdate.error">
+            <span name="createdate" style="">{{ data.createdate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updateman.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updateman.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updateman[1].required" style="width: 130px;">更新人</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updateman.validateStatus" [nzErrorTip]="detailsModel.updateman.error">
+            <span name="updateman" style="">{{ data.updateman }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    <div nz-col [ngClass]="{ hidden: !detailsModel.updatedate.visible }" style=''  [nzLg]="{ span: 24, offset: 0 }">
+        <nz-form-item [nzFlex]="true" [ngClass]="[(detailsModel.updatedate.validateStatus == 'error') ? '' : 'no-error']">
+        <nz-form-label [nzRequired]="rules.updatedate[1].required" style="width: 130px;">更新时间</nz-form-label>
+        <nz-form-control style="flex-grow: 1;" [nzValidateStatus]="detailsModel.updatedate.validateStatus" [nzErrorTip]="detailsModel.updatedate.error">
+            <span name="updatedate" style="">{{ data.updatedate }}</span>    </nz-form-control>
+    </nz-form-item >
+    
+    </div>
+    
+        </div>
+</nz-card>
+
+</div>
+
+
+            </nz-tab>
+        </nz-tabset>
+    </div>
+</form>
\ No newline at end of file

app_Default/src/widgets/entity5/main/main.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/entity5/main/main.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/entity5/main/main.ts

+import { Component, OnInit, Input, Output, EventEmitter, ViewContainerRef, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { Util } from '@global/util/util';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '@global/model/form-detail';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+	selector: 'main-form',
+	templateUrl: './main.html',
+	styleUrls: ['./main.less'],
+})
+export class EditForm implements OnInit {
+
+	constructor(private $util: Util) {
+		
+	}
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    @Input()
+    set formData(val: any) {
+        if (val) {
+            this.data = JSON.parse(JSON.stringify(val));
+            this.formLogic('', null, null);
+        }
+    }
+
+    /**
+     * 表单数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    public data: any = {};
+
+	/**
+	 * 表单数据变化
+	 *
+	 * @type {Subject<any>}
+	 * @memberof EditForm
+	 */
+	public formDataChange: Subject<any> = new Subject<any>();
+
+	/**
+	 * 表单数据变化抛出事件
+	 *
+	 * @type {EventEmitter<any>}
+	 * @memberof EditForm
+	 */
+	@Output() dataChangeEvent: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 代码表模型
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public codelistModel: any = {
+        'SysOperator': [
+        ]
+    };
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public rules: any = {
+        entity5name: [
+            { type: 'string', message: '实体5名称 值必须为字符串类型' },
+            { required: false, type: 'string', message: '实体5名称 值不能为空' },
+        ],
+        createman: [
+            { type: 'string', message: '建立人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立人 值不能为空' },
+        ],
+        createdate: [
+            { type: 'string', message: '建立时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '建立时间 值不能为空' },
+        ],
+        updateman: [
+            { type: 'string', message: '更新人 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新人 值不能为空' },
+        ],
+        updatedate: [
+            { type: 'string', message: '更新时间 值必须为字符串类型' },
+            { required: false, type: 'string', message: '更新时间 值不能为空' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main
+     */
+    public detailsModel: any = {
+        entity5name: new FormItemModel({ caption: '实体5名称', detailType: 'FORMITEM', name: 'entity5name', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        grouppanel1: new FormGroupPanelModel({ caption: '分组面板', detailType: 'GROUPPANEL', name: 'grouppanel1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        group1: new FormGroupPanelModel({ caption: '实体5基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+, 
+        createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
+, 
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
+    };
+
+    /**
+     * 生命周期
+     *
+     * @memberof EditForm
+     */
+    ngOnInit(): void {
+        this.formLogic('', null, null);
+        this.formDataChange.pipe(
+			debounceTime(300),
+            distinctUntilChanged()
+		).subscribe(data => {
+			this.dataChangeEvent.emit(JSON.parse(data.data));
+			const field = data.field;
+			if (field) {
+				this.formLogic(field.name, field.value, field.oldVal);
+				this.validateFormItem(field.name);
+			}
+		});
+    }
+
+	/**
+	 * 表单项值变化事件
+	 *
+	 * @param {{name: string, value: any}} {name, value}
+	 * @memberof EditForm
+	 */
+	public onFormDataChange(name: string, value: any): void {
+		if (Object.is(this.data[name], value)) {
+            return;
+        }
+		let oldVal: any = this.data[name];
+		this.data[name] = value;
+		this.formDataChange.next({ data: JSON.stringify(this.data), field: { name: name, value: value, oldVal: oldVal } });
+	}
+
+	/**
+	 * 校验表单项
+	 *
+	 * @param {string} name
+	 * @memberof EditForm
+	 */
+	public validateFormItem(name: string) {
+		if (!name) {
+			return;
+		}
+		const rule: any[] = this.rules[name];
+		let message = '';
+        let status = '';
+        const val: any = this.data[name];
+        rule.every((rule: any) => {
+            if (rule.required && (!val || Object.is(val, '')) ) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            } else if (val && rule.pattern && !rule.pattern.test(val)) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            }
+            return true;
+        });
+		this.detailsModel[name].error = message;
+		this.detailsModel[name].validateStatus = status;
+	}
+
+    /**
+     * 获取代码表集合
+     *
+     * @param {string} name
+     * @memberof EditForm
+     */
+    public getCodeList(name: string) {
+        if (!name || !this.codelistModel[name]) {
+            return [];
+        }
+        return this.codelistModel[name];
+    }
+
+    /**
+     * 表单逻辑
+     *
+     * @param {string} name
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof EditForm
+     */
+    public formLogic(name: string, newVal: any, oldVal: any) {
+                
+
+
+
+
+
+
+
+
+
+
+    }
+}
\ No newline at end of file

app_Default/src/widgets/example/main2/main2.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/example/main2/main2.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main2';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/example/main3/main3.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/example/main3/main3.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main3';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/example/main3/main3.ts

+import { Component, OnInit, Input, Output, EventEmitter, ViewContainerRef, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { Util } from '@global/util/util';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '@global/model/form-detail';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+	selector: 'main3-form',
+	templateUrl: './main3.html',
+	styleUrls: ['./main3.less'],
+})
+export class EditForm implements OnInit {
+
+	constructor(private $util: Util) {
+		
+	}
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    @Input()
+    set formData(val: any) {
+        if (val) {
+            this.data = JSON.parse(JSON.stringify(val));
+            this.formLogic('', null, null);
+        }
+    }
+
+    /**
+     * 表单数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    public data: any = {};
+
+	/**
+	 * 表单数据变化
+	 *
+	 * @type {Subject<any>}
+	 * @memberof EditForm
+	 */
+	public formDataChange: Subject<any> = new Subject<any>();
+
+	/**
+	 * 表单数据变化抛出事件
+	 *
+	 * @type {EventEmitter<any>}
+	 * @memberof EditForm
+	 */
+	@Output() dataChangeEvent: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 代码表模型
+     *
+     * @type {*}
+     * @memberof Main3
+     */
+    public codelistModel: any = {
+    };
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main3
+     */
+    public rules: any = {
+        marriage: [
+            { type: 'string', message: '婚否 值必须为字符串类型' },
+            { required: true, type: 'string', message: '婚否 值不能为空' },
+        ],
+        sex: [
+            { type: 'string', message: '性别 值必须为字符串类型' },
+            { required: true, type: 'string', message: '性别 值不能为空' },
+        ],
+        age: [
+            { type: 'string', message: '年龄 值必须为字符串类型' },
+            { required: false, type: 'string', message: '年龄 值不能为空' },
+        ],
+        name: [
+            { type: 'string', message: '名称 值必须为字符串类型' },
+            { required: false, type: 'string', message: '名称 值不能为空' },
+        ],
+        spousename: [
+            { type: 'string', message: '配偶姓名 值必须为字符串类型' },
+            { required: false, type: 'string', message: '配偶姓名 值不能为空' },
+        ],
+        spousesex: [
+            { type: 'string', message: '配偶性别 值必须为字符串类型' },
+            { required: true, type: 'string', message: '配偶性别 值不能为空' },
+        ],
+        spouseage: [
+            { type: 'string', message: '配偶年龄 值必须为字符串类型' },
+            { required: false, type: 'string', message: '配偶年龄 值不能为空' },
+        ],
+        childrenname: [
+            { type: 'string', message: '子女姓名 值必须为字符串类型' },
+            { required: false, type: 'string', message: '子女姓名 值不能为空' },
+        ],
+        childrensex: [
+            { type: 'string', message: '子女性别 值必须为字符串类型' },
+            { required: false, type: 'string', message: '子女性别 值不能为空' },
+        ],
+        childrenmarriage: [
+            { type: 'string', message: '子女婚否 值必须为字符串类型' },
+            { required: true, type: 'string', message: '子女婚否 值不能为空' },
+        ],
+        childrenornot: [
+            { type: 'string', message: '是否有小孩 值必须为字符串类型' },
+            { required: false, type: 'string', message: '是否有小孩 值不能为空' },
+        ],
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main3
+     */
+    public detailsModel: any = {
+        marriage: new FormItemModel({ caption: '婚否', detailType: 'FORMITEM', name: 'marriage', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        sex: new FormItemModel({ caption: '性别', detailType: 'FORMITEM', name: 'sex', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        age: new FormItemModel({ caption: '年龄', detailType: 'FORMITEM', name: 'age', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        name: new FormItemModel({ caption: '名称', detailType: 'FORMITEM', name: 'name', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        grouppanel1: new FormGroupPanelModel({ caption: '基本信息', detailType: 'GROUPPANEL', name: 'grouppanel1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        spousename: new FormItemModel({ caption: '配偶姓名', detailType: 'FORMITEM', name: 'spousename', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        spousesex: new FormItemModel({ caption: '配偶性别', detailType: 'FORMITEM', name: 'spousesex', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        spouseage: new FormItemModel({ caption: '配偶年龄', detailType: 'FORMITEM', name: 'spouseage', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        grouppanel3: new FormGroupPanelModel({ caption: '配偶信息', detailType: 'GROUPPANEL', name: 'grouppanel3', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        childrenname: new FormItemModel({ caption: '子女姓名', detailType: 'FORMITEM', name: 'childrenname', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        childrensex: new FormItemModel({ caption: '子女性别', detailType: 'FORMITEM', name: 'childrensex', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        childrenmarriage: new FormItemModel({ caption: '子女婚否', detailType: 'FORMITEM', name: 'childrenmarriage', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        childrenornot: new FormItemModel({ caption: '是否有小孩', detailType: 'FORMITEM', name: 'childrenornot', visible: true, isShowCaption: true, form: this, disabled: false, enableCond: 3 })
+, 
+        grouppanel4: new FormGroupPanelModel({ caption: '子女信息', detailType: 'GROUPPANEL', name: 'grouppanel4', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        grouppanel2: new FormGroupPanelModel({ caption: '家庭信息', detailType: 'GROUPPANEL', name: 'grouppanel2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', extractMode: 'ITEM', details: [] } })
+, 
+        formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
+, 
+    };
+
+    /**
+     * 生命周期
+     *
+     * @memberof EditForm
+     */
+    ngOnInit(): void {
+        this.formLogic('', null, null);
+        this.formDataChange.pipe(
+			debounceTime(300),
+            distinctUntilChanged()
+		).subscribe(data => {
+			this.dataChangeEvent.emit(JSON.parse(data.data));
+			const field = data.field;
+			if (field) {
+				this.formLogic(field.name, field.value, field.oldVal);
+				this.validateFormItem(field.name);
+			}
+		});
+    }
+
+	/**
+	 * 表单项值变化事件
+	 *
+	 * @param {{name: string, value: any}} {name, value}
+	 * @memberof EditForm
+	 */
+	public onFormDataChange(name: string, value: any): void {
+		if (Object.is(this.data[name], value)) {
+            return;
+        }
+		let oldVal: any = this.data[name];
+		this.data[name] = value;
+		this.formDataChange.next({ data: JSON.stringify(this.data), field: { name: name, value: value, oldVal: oldVal } });
+	}
+
+	/**
+	 * 校验表单项
+	 *
+	 * @param {string} name
+	 * @memberof EditForm
+	 */
+	public validateFormItem(name: string) {
+		if (!name) {
+			return;
+		}
+		const rule: any[] = this.rules[name];
+		let message = '';
+        let status = '';
+        const val: any = this.data[name];
+        rule.every((rule: any) => {
+            if (rule.required && (!val || Object.is(val, '')) ) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            } else if (val && rule.pattern && !rule.pattern.test(val)) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            }
+            return true;
+        });
+		this.detailsModel[name].error = message;
+		this.detailsModel[name].validateStatus = status;
+	}
+
+    /**
+     * 获取代码表集合
+     *
+     * @param {string} name
+     * @memberof EditForm
+     */
+    public getCodeList(name: string) {
+        if (!name || !this.codelistModel[name]) {
+            return [];
+        }
+        return this.codelistModel[name];
+    }
+
+    /**
+     * 表单逻辑
+     *
+     * @param {string} name
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof EditForm
+     */
+    public formLogic(name: string, newVal: any, oldVal: any) {
+                
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    }
+}
\ No newline at end of file

app_Default/src/widgets/example/main4/main4.html

+<form nz-form nz-row class="app-form">
+    <div nz-row>
+        <nz-tabset>
+        </nz-tabset>
+    </div>
+</form>
\ No newline at end of file

app_Default/src/widgets/example/main4/main4.less

+// this is less
+
+.hidden {
+    display: none;
+}
+.app-form {
+    .app-form-group {
+        height: 100%;
+        /deep/ .ant-card-body {
+            height: calc(100% - 58px);
+        }
+    }
+    .no-error {
+        margin-bottom: 24px;
+    }
+    /deep/ .ant-tabs-tabpane {
+        padding: 0 16px;
+    }
+}
\ No newline at end of file

app_Default/src/widgets/example/main4/main4.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { RouterModule } from '@angular/router';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { EditForm } from './main4';
+
+import { AppTimePickerModule } from '@components/app-time-picker/app-time-picker.module';
+import { AppDatePickerModule } from '@components/app-date-picker/app-date-picker.module';
+import { AppSelectModule } from '@components/app-select/app-select.module';
+import { AppRadioModule } from '@components/app-radio/app-radio.module';
+import { AppCheckboxListModule } from '@components/app-checkbox-list/app-checkbox-list.module';
+import { AppCheckboxModule } from '@components/app-checkbox/app-checkbox.module';
+import { AppImageUploadModule } from '@components/app-image-upload/app-image-upload.module';
+import { AppFileUploadModule } from '@components/app-file-upload/app-file-upload.module';
+
+@NgModule({
+  imports: [
+    NgZorroAntdModule,
+    CommonModule,
+    FormsModule,
+    AppDatePickerModule,
+    AppTimePickerModule,
+    AppSelectModule,
+    AppRadioModule,
+    AppCheckboxListModule,
+    AppCheckboxModule,
+    AppImageUploadModule,
+    AppFileUploadModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [EditForm],
+  exports: [EditForm]
+})
+export class EditFormModule { }

app_Default/src/widgets/example/main4/main4.ts

+import { Component, OnInit, Input, Output, EventEmitter, ViewContainerRef, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { Util } from '@global/util/util';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { FormButtonModel, FormPageModel, FormItemModel, FormDRUIPartModel, FormPartModel, FormGroupPanelModel, FormIFrameModel, FormRowItemModel, FormTabPageModel, FormTabPanelModel, FormUserControlModel } from '@global/model/form-detail';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+	selector: 'main4-form',
+	templateUrl: './main4.html',
+	styleUrls: ['./main4.less'],
+})
+export class EditForm implements OnInit {
+
+	constructor(private $util: Util) {
+		
+	}
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    @Input()
+    set formData(val: any) {
+        if (val) {
+            this.data = JSON.parse(JSON.stringify(val));
+            this.formLogic('', null, null);
+        }
+    }
+
+    /**
+     * 表单数据对象
+     *
+     * @type {*}
+     * @memberof EditForm
+     */
+    public data: any = {};
+
+	/**
+	 * 表单数据变化
+	 *
+	 * @type {Subject<any>}
+	 * @memberof EditForm
+	 */
+	public formDataChange: Subject<any> = new Subject<any>();
+
+	/**
+	 * 表单数据变化抛出事件
+	 *
+	 * @type {EventEmitter<any>}
+	 * @memberof EditForm
+	 */
+	@Output() dataChangeEvent: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 代码表模型
+     *
+     * @type {*}
+     * @memberof Main4
+     */
+    public codelistModel: any = {
+    };
+
+    /**
+     * 属性值规则
+     *
+     * @type {*}
+     * @memberof Main4
+     */
+    public rules: any = {
+    }
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof Main4
+     */
+    public detailsModel: any = {
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [] }),
+    };
+
+    /**
+     * 生命周期
+     *
+     * @memberof EditForm
+     */
+    ngOnInit(): void {
+        this.formLogic('', null, null);
+        this.formDataChange.pipe(
+			debounceTime(300),
+            distinctUntilChanged()
+		).subscribe(data => {
+			this.dataChangeEvent.emit(JSON.parse(data.data));
+			const field = data.field;
+			if (field) {
+				this.formLogic(field.name, field.value, field.oldVal);
+				this.validateFormItem(field.name);
+			}
+		});
+    }
+
+	/**
+	 * 表单项值变化事件
+	 *
+	 * @param {{name: string, value: any}} {name, value}
+	 * @memberof EditForm
+	 */
+	public onFormDataChange(name: string, value: any): void {
+		if (Object.is(this.data[name], value)) {
+            return;
+        }
+		let oldVal: any = this.data[name];
+		this.data[name] = value;
+		this.formDataChange.next({ data: JSON.stringify(this.data), field: { name: name, value: value, oldVal: oldVal } });
+	}
+
+	/**
+	 * 校验表单项
+	 *
+	 * @param {string} name
+	 * @memberof EditForm
+	 */
+	public validateFormItem(name: string) {
+		if (!name) {
+			return;
+		}
+		const rule: any[] = this.rules[name];
+		let message = '';
+        let status = '';
+        const val: any = this.data[name];
+        rule.every((rule: any) => {
+            if (rule.required && (!val || Object.is(val, '')) ) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            } else if (val && rule.pattern && !rule.pattern.test(val)) {
+                message = rule.message;
+                status = 'error';
+                return false;
+            }
+            return true;
+        });
+		this.detailsModel[name].error = message;
+		this.detailsModel[name].validateStatus = status;
+	}
+
+    /**
+     * 获取代码表集合
+     *
+     * @param {string} name
+     * @memberof EditForm
+     */
+    public getCodeList(name: string) {
+        if (!name || !this.codelistModel[name]) {
+            return [];
+        }
+        return this.codelistModel[name];
+    }
+
+    /**
+     * 表单逻辑
+     *
+     * @param {string} name
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof EditForm
+     */
+    public formLogic(name: string, newVal: any, oldVal: any) {
+                
+    }
+}
\ No newline at end of file