update

APP/.editorconfig

+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

APP/.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

APP/angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "test": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/test",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": false,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "src/styles.less"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "test:build",
+            "host": "0.0.0.0",
+            "port": 8100,
+            "proxyConfig": "./proxy.config.json"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "test:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "test:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.less"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "test:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "test:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "test"
+}
\ No newline at end of file

APP/browserslist

+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file

APP/e2e/protractor.conf.js

+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
\ No newline at end of file

APP/e2e/src/app.e2e-spec.ts

+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Welcome to test!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

APP/e2e/src/app.po.ts

+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root h1')).getText() as Promise<string>;
+  }
+}

APP/e2e/tsconfig.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

APP/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/test'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

APP/package.json

+{
+  "name": "test",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~8.2.0",
+    "@angular/common": "~8.2.0",
+    "@angular/compiler": "~8.2.0",
+    "@angular/core": "~8.2.0",
+    "@angular/forms": "~8.2.0",
+    "@angular/platform-browser": "~8.2.0",
+    "@angular/platform-browser-dynamic": "~8.2.0",
+    "@angular/router": "~8.2.0",
+    "font-awesome": "^4.7.0",
+    "ng-zorro-antd": "^8.1.2",
+    "rxjs": "~6.4.0",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.802.1",
+    "@angular/cli": "~8.2.1",
+    "@angular/compiler-cli": "~8.2.0",
+    "@angular/language-service": "~8.2.0",
+    "@types/node": "~8.9.4",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "^5.0.0",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.5.3"
+  }
+}

APP/proxy.config.json

+{
+    "/": {
+        "target": "http://127.0.0.1:8080/AngularR6"
+    }
+}
\ No newline at end of file

APP/src/app/app.component.less

+.app-layout {
+    height: 100%;
+    > .ant-layout-content {
+        height: 100%;
+        padding: 16px;
+    }
+}
\ No newline at end of file

APP/src/app/app.component.spec.ts

+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'test'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('test');
+  });
+
+  it('should render title in a h1 tag', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to test!');
+  });
+});

APP/src/app/app.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.less']
+})
+export class AppComponent {
+
+  /**
+   * 构造方法
+   * @param {Router} $router
+   * @memberof AppComponent
+   */
+  constructor(private $router: Router) { }
+
+  /**
+   *点击菜单
+   *
+   * @param {*} name
+   * @memberof AppComponent
+   */
+  public onClick(name) {
+    this.$router.navigate([name]);
+  }
+}

APP/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+
+registerLocaleData(zh);
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    NgZorroAntdModule,
+    FormsModule,
+    HttpClientModule,
+    BrowserAnimationsModule
+  ],
+  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

APP/src/components/app-checkbox-list/app-checkbox-list.html

+<nz-checkbox-group [ngModel]="items" [nzDisabled]="disabled" (ngModelChange)="onValueChange()" [ngStyle]="{width: width + 'px'}"></nz-checkbox-group>
\ No newline at end of file

APP/src/components/app-checkbox-list/app-checkbox-list.module.ts

+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppCheckboxList } from './app-checkbox-list';
+
+@NgModule({
+    imports: [
+        NzCheckboxModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppCheckboxList],
+    exports: [AppCheckboxList]
+})
+export class AppCheckboxListModule { }

APP/src/components/app-checkbox-list/app-checkbox-list.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-checkbox-list',
+    templateUrl: './app-checkbox-list.html',
+    styleUrls: ['./app-checkbox-list.less']
+})
+export class AppCheckboxList implements OnInit {
+
+    /**
+     * 值项
+     *
+     * @memberof AppCheckboxList
+     */
+    @Input()
+    set value(val) {
+        if (val && this.items.length > 0) {
+            if (Object.is(this.mode, 'num')) {
+                let num: number = parseInt(val, 10);
+                this.items.forEach((item: any) => {
+                    if ((num & item.value) == item.value) {
+                        item.checked = true;
+                    }
+                });
+            } else if (!this.mode || Object.is(this.mode, 'str')) {
+                let datas: any[] = val.split(this.separator ? this.separator : ';');
+                datas.forEach(data => {
+                    let item = this.items.find((obj) => (obj.value == data));
+                    if (item) {
+                        item.checked = true;
+                    }
+                });
+            }
+        }
+    }
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppCheckboxList
+     */
+    @Input() public disabled: boolean = false;
+
+    /**
+     * 代码表
+     *
+     * @type {any[]}
+     * @memberof AppCheckboxList
+     */
+    @Input() codeList: any[];
+
+    /**
+     * 值项
+     *
+     * @type {*}
+     * @memberof AppCheckboxList
+     */
+    public itemValue: any = null;
+
+    /**
+     * 代码表项集合
+     *
+     * @type {any[]}
+     * @memberof AppCheckboxList
+     */
+    public items: any[] = [];
+
+    /**
+     * 宽度
+     *
+     * @type {*}
+     * @memberof AppCheckboxList
+     */
+    @Input() public width: any;
+
+    /**
+     * 模式（数字或者字符串）
+     *
+     * @type {*}
+     * @memberof AppCheckboxList
+     */
+    @Input() mode: any;
+
+    /**
+     * 分隔符
+     *
+     * @type {*}
+     * @memberof AppCheckBox
+     */
+    @Input() separator: any;
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppCheckboxList
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppCheckboxList
+     */
+    public ngOnInit(): void {
+        if (this.codeList) {
+            let datas = JSON.parse(JSON.stringify(this.codeList));
+            this.items = datas.map(data => {
+                return { ...data, checked: false, label: data.text };
+            });
+        }
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} $event
+     * @memberof AppCheckboxList
+     */
+    public onValueChange() {
+        let data = null;
+        if (Object.is(this.mode, 'num')) {
+            this.items.forEach(item => {
+                if (!item.checked) {
+                    return;
+                }
+                data = 0 | parseInt(item.value, 10);
+            });
+        } else if (!this.mode || Object.is(this.mode, 'str')) {
+            let datas: any[] = [];
+            this.items.forEach(item => {
+                if (!item.checked) {
+                    return;
+                }
+                datas.push(item.value);
+            });
+            data = datas.join(this.separator ? this.separator : ';');
+        }
+        console.log(data);
+        this.onFormItemValueChange.emit(data);
+    }
+
+}

APP/src/components/app-checkbox/app-checkbox.html

+<label nz-checkbox [ngModel]="itemValue" [disabled]="disabled" (ngModelChange)="onValueChange($event)"></label>
\ No newline at end of file

APP/src/components/app-checkbox/app-checkbox.module.ts

+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppCheckbox } from './app-checkbox';
+
+@NgModule({
+    imports: [
+        NzCheckboxModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppCheckbox],
+    exports: [AppCheckbox]
+})
+export class AppCheckboxModule { }

APP/src/components/app-checkbox/app-checkbox.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-checkbox',
+    templateUrl: './app-checkbox.html',
+    styleUrls: ['./app-checkbox.less']
+})
+export class AppCheckbox implements OnInit {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppCheckbox
+     */
+    @Input() name: string;
+
+    /**
+     * 禁用
+     *
+     * @type {boolean}
+     * @memberof AppCheckbox
+     */
+    @Input() disabled: boolean;
+
+    /**
+     * 值项
+     *
+     * @memberof AppCheckbox
+     */
+    @Input()
+    set value(val) {
+        this.itemValue = (val === 1 ? true : false);
+    }
+
+    /**
+     * 编辑器值项
+     *
+     * @type {number}
+     * @memberof AppCheckbox
+     */
+    public itemValue: boolean = false;
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppCheckbox
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppCheckbox
+     */
+    ngOnInit(): void {
+        
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {boolean} $event
+     * @memberof AppCheckbox
+     */
+    public onValueChange($event: boolean) {
+        let val: number = $event ? 1 : 0;
+        this.onFormItemValueChange.emit(val);
+    }
+
+}

APP/src/components/app-date-picker/app-date-picker.html

+<nz-date-picker [ngModel]="value" [nzShowTime]="isShowTime" [nzDisabled]="disabled" [nzPlaceHolder]="placeholder" (ngModelChange)="onValueChange($event)" [nzFormat]="valFormat" [ngStyle]="{width: width + 'px'}"></nz-date-picker>
\ No newline at end of file

APP/src/components/app-date-picker/app-date-picker.module.ts

+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppDatePicker } from './app-date-picker';
+
+@NgModule({
+    imports: [
+        NzDatePickerModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppDatePicker],
+    exports: [AppDatePicker]
+})
+export class AppDatePickerModule { }

APP/src/components/app-date-picker/app-date-picker.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-date-picker',
+    templateUrl: './app-date-picker.html',
+    styleUrls: ['./app-date-picker.less']
+})
+export class AppDatePicker implements OnInit {
+
+    /**
+     * 值项
+     *
+     * @memberof AppDatePicker
+     */
+    @Input() public value: any;
+
+    /**
+     * 提示语
+     *
+     * @type {string}
+     * @memberof AppDatePicker
+     */
+    @Input() public placeholder: string = '请选择';
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppDatePicker
+     */
+    @Input() public disabled: boolean;
+
+    /**
+     * 宽度
+     *
+     * @type {*}
+     * @memberof AppDatePicker
+     */
+    @Input() public width: any;
+
+    /**
+     * 值格式
+     *
+     * @type {string}
+     * @memberof AppDatePicker
+     */
+    @Input()
+    set format(val: string) {
+        this.valFormat = val;
+        if (this.valFormat.indexOf('HH') > 0) {
+            this.isShowTime = true;
+        }
+    }
+
+    /**
+     * 显示值格式
+     *
+     * @type {string}
+     * @memberof AppDatePicker
+     */
+    public valFormat: string = 'yyyy-MM-dd';
+
+    /**
+     * 是否可选择时间
+     *
+     * @type {boolean}
+     * @memberof AppDatePicker
+     */
+    public isShowTime: boolean = false;
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppDatePicker
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppDatePicker
+     */
+    public ngOnInit(): void {
+
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} $event
+     * @memberof AppDatePicker
+     */
+    public onValueChange($event: any) {
+        let val = this.formatValue($event);
+        this.onFormItemValueChange.emit(val);
+    }
+
+    /**
+     * 处理值
+     *
+     * @param {Date} date
+     * @memberof AppDatePicker
+     */
+    public formatValue(date: Date) {
+        if (!date) {
+            return null;
+        }
+        let data: string = this.valFormat;
+        let obj: any = {
+            yyyy: date.getFullYear(),
+            MM: this.AppendVal(date.getMonth() + 1),
+            dd: this.AppendVal(date.getDate()),
+            HH: this.AppendVal(date.getHours()),
+            mm: this.AppendVal(date.getMinutes()),
+            ss: this.AppendVal(date.getSeconds())
+        };
+        let keys = Object.keys(obj);
+        keys.forEach(key => {
+            let val = obj[key];
+            data = data.replace(key, val);
+        });
+        return data;
+    }
+
+    /**
+     * 值追加
+     *
+     * @param {number} val
+     * @returns
+     * @memberof AppDatePicker
+     */
+    public AppendVal(val: number) {
+        return (val < 10 ? '0' + val : val);
+    }
+}

APP/src/components/app-file-upload/app-file-upload.html

+<nz-upload
+    [nzMultiple]="isMultiple"
+    [nzAction]="url"
+    [nzDisabled]="disabled"
+    [nzFileList]="fileList"
+    (nzChange)="onChange($event)"
+    >
+    <button nz-button><i nz-icon nzType="upload"></i><span>上传文件</span></button>
+</nz-upload>
\ No newline at end of file

APP/src/components/app-file-upload/app-file-upload.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppFileUpload } from './app-file-upload';
+
+@NgModule({
+    imports: [
+        NgZorroAntdModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppFileUpload],
+    exports: [AppFileUpload]
+})
+export class AppFileUploadModule { }

APP/src/components/app-file-upload/app-file-upload.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-file-upload',
+    templateUrl: './app-file-upload.html',
+    styleUrls: ['./app-file-upload.less']
+})
+export class AppFileUpload implements OnInit {
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppFileUpload
+     */
+    @Input() disabled: boolean;
+
+    /**
+     * 值项
+     *
+     * @memberof AppFileUpload
+     */
+    @Input()
+    set value(val: any) {
+        if (val) {
+            this.fileList = JSON.parse(val);
+        } else {
+            this.fileList = [];
+        }
+    }
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppFileUpload
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 上传地址
+     *
+     * @type {string}
+     * @memberof AppFileUpload
+     */
+    public url: string = 'https://jsonplaceholder.typicode.com/posts/';
+
+    /**
+     * 已上传文件
+     *
+     * @type {any[]}
+     * @memberof AppFileUpload
+     */
+    public fileList: any[] = [];
+
+    /**
+     * 是否支持多选
+     *
+     * @type {boolean}
+     * @memberof AppFileUpload
+     */
+    public isMultiple: boolean = false;
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppFileUpload
+     */
+    ngOnInit(): void {
+        
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} $event
+     * @memberof AppFileUpload
+     */
+    public onChange($event) {
+        if (Object.is($event.type, 'success')) {
+            let files: any[] = JSON.parse(JSON.stringify(this.fileList));
+            files.push($event.file);
+            this.onFormItemValueChange.emit(JSON.stringify(files));
+        } else if (Object.is($event.type, 'removed')) {
+            let files: any[] = JSON.parse(JSON.stringify(this.fileList));
+            let file = $event.file;
+            let index = files.findIndex((item) => Object.is(item.uid, file.uid));
+            files.splice(index, 1);
+            this.onFormItemValueChange.emit(JSON.stringify(files));
+        }
+    }
+
+}

APP/src/components/app-image-upload/app-image-upload.html

+<div class="app-image-upload">
+    <nz-upload
+        nzShowButton
+        [nzMultiple]="isMultiple"
+        [nzAction]="url"
+        [nzDisabled]="disabled"
+        nzListType="picture-card"
+        [nzFileList]="fileList"
+        [nzShowUploadList]="showUploadList"
+        [nzPreview]="handlePreview"
+        (nzChange)="onChange($event)"
+        >
+        <i nz-icon nzType="plus"></i>
+    </nz-upload>
+    <nz-modal
+        [nzVisible]="previewVisible"
+        [nzContent]="modalContent"
+        [nzFooter]="null"
+        (nzOnCancel)="previewVisible = false"
+        >
+        <ng-template #modalContent>
+            <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
+        </ng-template>
+    </nz-modal>
+</div>
\ No newline at end of file

APP/src/components/app-image-upload/app-image-upload.module.ts

+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppImageUpload } from './app-image-upload';
+
+@NgModule({
+    imports: [
+        NgZorroAntdModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppImageUpload],
+    exports: [AppImageUpload]
+})
+export class AppImageUploadModule { }

APP/src/components/app-image-upload/app-image-upload.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-image-upload',
+    templateUrl: './app-image-upload.html',
+    styleUrls: ['./app-image-upload.less']
+})
+export class AppImageUpload implements OnInit {
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppImageUpload
+     */
+    @Input() disabled: boolean;
+
+    /**
+     * 值项
+     *
+     * @memberof AppImageUpload
+     */
+    @Input()
+    set value(val: any) {
+        if (val) {
+            this.fileList = JSON.parse(val);
+        } else {
+            this.fileList = [];
+        }
+    }
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppImageUpload
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 上传地址
+     *
+     * @type {string}
+     * @memberof AppImageUpload
+     */
+    public url: string = 'https://jsonplaceholder.typicode.com/posts/';
+
+    /**
+     * 已上传文件
+     *
+     * @type {any[]}
+     * @memberof AppImageUpload
+     */
+    public fileList: any[] = [];
+
+    /**
+     * 上传列表配置
+     *
+     * @type {*}
+     * @memberof AppImageUpload
+     */
+    public showUploadList: any = {
+        showPreviewIcon: true,
+        showRemoveIcon: true,
+        hidePreviewIconInNonImage: true
+    };
+
+    /**
+     * 预览显示
+     *
+     * @type {boolean}
+     * @memberof AppImageUpload
+     */
+    public previewVisible: boolean = false;
+
+    /**
+     * 预览图片地址
+     *
+     * @type {string}
+     * @memberof AppImageUpload
+     */
+    public previewImage: string | undefined = '';
+
+    /**
+     * 是否支持多选
+     *
+     * @type {boolean}
+     * @memberof AppImageUpload
+     */
+    public isMultiple: boolean = false;
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppImageUpload
+     */
+    ngOnInit(): void {
+
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} $event
+     * @memberof AppImageUpload
+     */
+    public onChange($event) {
+        if (Object.is($event.type, 'success')) {
+            let files: any[] = JSON.parse(JSON.stringify(this.fileList));
+            files.push($event.file);
+            this.onFormItemValueChange.emit(JSON.stringify(files));
+        } else if (Object.is($event.type, 'removed')) {
+            let files: any[] = JSON.parse(JSON.stringify(this.fileList));
+            let file = $event.file;
+            let index = files.findIndex((item) => Object.is(item.uid, file.uid));
+            files.splice(index, 1);
+            this.onFormItemValueChange.emit(JSON.stringify(files));
+        }
+    }
+
+    /**
+     * 预览
+     *
+     * @param {*} file
+     * @memberof AppImageUpload
+     */
+    public handlePreview(file: any) {
+        this.previewImage = file.url || file.thumbUrl;
+        this.previewVisible = true;
+    }
+
+}

APP/src/components/app-radio/app-radio.html

+<nz-radio-group [(ngModel)]="itemValue" (ngModelChange)="onValueChange($event)" [ngStyle]="{width: width + 'px'}">
+    <label nz-radio *ngFor="let item of items" [nzDisabled]="disabled" [nzValue]="item.value">{{ item.text }}</label>
+</nz-radio-group>
\ No newline at end of file

APP/src/components/app-radio/app-radio.module.ts

+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppRadio } from './app-radio';
+
+@NgModule({
+    imports: [
+        NzRadioModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppRadio],
+    exports: [AppRadio]
+})
+export class AppRadioModule { }

APP/src/components/app-radio/app-radio.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-radio',
+    templateUrl: './app-radio.html',
+    styleUrls: ['./app-radio.less']
+})
+export class AppRadio implements OnInit {
+
+    /**
+     * 值项
+     *
+     * @memberof AppRadio
+     */
+    @Input()
+    set value(val) {
+        this.itemValue = val;
+    }
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppRadio
+     */
+    @Input() public disabled: boolean = false;
+
+    /**
+     * 代码表
+     *
+     * @type {any[]}
+     * @memberof AppCheckboxList
+     */
+    @Input() codeList: any[];
+
+    /**
+     * 值项
+     *
+     * @type {*}
+     * @memberof AppRadio
+     */
+    public itemValue: any = null;
+
+    /**
+     * 代码表项集合
+     *
+     * @type {any[]}
+     * @memberof AppRadio
+     */
+    public items: any[] = [];
+
+    /**
+     * 宽度
+     *
+     * @type {*}
+     * @memberof AppRadio
+     */
+    @Input() public width: any;
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppRadio
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppRadio
+     */
+    public ngOnInit(): void {
+        if (this.codeList) {
+            this.items = JSON.parse(JSON.stringify(this.codeList));
+        }
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} $event
+     * @memberof AppRadio
+     */
+    public onValueChange($event) {
+        this.onFormItemValueChange.emit($event);
+    }
+
+}

APP/src/components/app-select/app-select.html

+<nz-select nzAllowClear [nzPlaceHolder]="placeholder" [ngModel]="itemValue" (ngModelChange)="onValueChange($event)" [ngStyle]="{width: width + 'px'}">
+    <nz-option *ngFor="let item of items" [nzLabel]="item.text" [nzValue]="item.value"></nz-option>
+</nz-select>
\ No newline at end of file

APP/src/components/app-select/app-select.module.ts

+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppSelect } from './app-select';
+
+@NgModule({
+    imports: [
+        NzSelectModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppSelect],
+    exports: [AppSelect]
+})
+export class AppSelectModule { }

APP/src/components/app-select/app-select.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-select',
+    templateUrl: './app-select.html',
+    styleUrls: ['./app-select.less']
+})
+export class AppSelect implements OnInit {
+
+    /**
+     * 值项
+     *
+     * @memberof AppSelect
+     */
+    @Input()
+    set value(val) {
+        this.itemValue = val;
+    }
+
+    /**
+     * 提示语
+     *
+     * @type {string}
+     * @memberof AppSelect
+     */
+    @Input() public placeholder: string = '请选择';
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppSelect
+     */
+    @Input() public disabled: boolean = false;
+
+    /**
+     * 代码表
+     *
+     * @type {any[]}
+     * @memberof AppCheckboxList
+     */
+    @Input() codeList: any[];
+
+    /**
+     * 值项
+     *
+     * @type {*}
+     * @memberof AppSelect
+     */
+    public itemValue: any = null;
+
+    /**
+     * 代码表项集合
+     *
+     * @type {any[]}
+     * @memberof AppSelect
+     */
+    public items: any[] = [];
+
+    /**
+     * 宽度
+     *
+     * @type {*}
+     * @memberof AppDatePicker
+     */
+    @Input() public width: any;
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppSelect
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppSelect
+     */
+    public ngOnInit(): void {
+        if (this.codeList) {
+            this.items = JSON.parse(JSON.stringify(this.codeList));
+        }
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} $event
+     * @memberof AppSelect
+     */
+    public onValueChange($event) {
+        this.onFormItemValueChange.emit($event);
+    }
+
+}

APP/src/components/app-time-picker/app-time-picker.html

+<nz-time-picker [ngModel]="itemValue" [nzDisabled]="disabled" [nzPlaceHolder]="placeholder" (ngModelChange)="onValueChange($event)" [nzFormat]="format"  [ngStyle]="{width: width + 'px'}"></nz-time-picker>
\ No newline at end of file

APP/src/components/app-time-picker/app-time-picker.module.ts

+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppTimePicker } from './app-time-picker';
+
+@NgModule({
+    imports: [
+        NzTimePickerModule,
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [AppTimePicker],
+    exports: [AppTimePicker]
+})
+export class AppTimePickerModule { }

APP/src/components/app-time-picker/app-time-picker.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-time-picker',
+    templateUrl: './app-time-picker.html',
+    styleUrls: ['./app-time-picker.less']
+})
+export class AppTimePicker implements OnInit {
+
+    /**
+     * 值项
+     *
+     * @memberof AppTimePicker
+     */
+    @Input()
+    set value(val) {
+        if (!val) {
+            this.itemValue = null;
+            return;
+        }
+        let data = 'HH:mm:ss';
+        data = data.replace(this.format, val).replace('HH', '12').replace('mm', '32').replace('ss', '15');
+        let date = '2019/09/01 ' + data;
+        this.itemValue = new Date(date);
+    }
+
+    /**
+     * 提示语
+     *
+     * @type {string}
+     * @memberof AppTimePicker
+     */
+    @Input() public placeholder: string = '请选择';
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppTimePicker
+     */
+    @Input() public disabled: boolean = false;
+
+    /**
+     * 值格式
+     *
+     * @type {string}
+     * @memberof AppTimePicker
+     */
+    @Input() public format: string = 'HH:mm:ss';
+
+    /**
+     * 值项
+     *
+     * @type {Date}
+     * @memberof AppTimePicker
+     */
+    public itemValue: Date = null;
+
+    /**
+     * 宽度
+     *
+     * @type {*}
+     * @memberof AppDatePicker
+     */
+    @Input() public width: any;
+
+    /**
+     * 表单项之变化事件
+     *
+     * @memberof AppTimePicker
+     */
+    @Output() public onFormItemValueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    /**
+     * 生命周期
+     *
+     * @memberof AppTimePicker
+     */
+    public ngOnInit(): void {
+
+    }
+
+    /**
+     * 值变化
+     *
+     * @param {*} $event
+     * @memberof AppTimePicker
+     */
+    public onValueChange($event: any) {
+        let val = this.formatValue($event);
+        this.onFormItemValueChange.emit(val);
+    }
+
+    /**
+     * 处理值
+     *
+     * @param {Date} date
+     * @memberof AppTimePicker
+     */
+    public formatValue(date: Date) {
+        if (!date) {
+            return null;
+        }
+        let data: string = this.format;
+        let obj: any = {
+            HH: this.AppendVal(date.getHours()),
+            mm: this.AppendVal(date.getMinutes()),
+            ss: this.AppendVal(date.getSeconds())
+        };
+        let keys = Object.keys(obj);
+        keys.forEach(key => {
+            let val = obj[key];
+            data = data.replace(key, val);
+        });
+        return data;
+    }
+
+    /**
+     * 值追加
+     *
+     * @param {number} val
+     * @returns
+     * @memberof AppTimePicker
+     */
+    public AppendVal(val: number) {
+        return (val < 10 ? '0' + val : val);
+    }
+}

APP/src/global/model/form-detail/form-button.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 按钮模型
+ *
+ * @export
+ * @class FormButtonModel
+ * @extends {FormDetailModel}
+ */
+export class FormButtonModel extends FormDetailModel {
+
+    constructor(opts: any = {}) {
+        super(opts);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-detail.ts

+/**
+ * 表单成员模型
+ *
+ * @export
+ * @class FormDetailModel
+ */
+export class FormDetailModel {
+
+    /**
+     * 成员标题
+     *
+     * @type {string}
+     * @memberof FormDetailModel
+     */
+    public caption: string = '';
+
+    /**
+     * 成员类型
+     *
+     * @type {string}
+     * @memberof FormDetailModel
+     */
+    public detailType: string = '';
+
+    /**
+     * 表单对象
+     *
+     * @type {*}
+     * @memberof FormDetailModel
+     */
+    public form: any = null;
+
+    /**
+     * 成员名称
+     *
+     * @type {string}
+     * @memberof FormDetailModel
+     */
+    public name: string = '';
+
+    /**
+     * 成员是否显示
+     *
+     * @type {boolean}
+     * @memberof FormDetailModel
+     */
+    public visible: boolean = true;
+
+    /**
+     * 成员是否显示标题
+     *
+     * @type {boolean}
+     * @memberof FormDetailModel
+     */
+    public isShowCaption: boolean = true;
+
+    /**
+     * Creates an instance of FormDetailModel.
+     * FormDetailModel 实例
+     * 
+     * @param {*} [opts={}]
+     * @memberof FormDetailModel
+     */
+    constructor(opts: any = {}) {
+        this.caption = !Object.is(opts.caption, '') ? opts.caption : '';
+        this.detailType = !Object.is(opts.detailType, '') ? opts.detailType : '';
+        this.form = opts.form ? opts.form : {};
+        this.name = !Object.is(opts.name, '') ? opts.name : '';
+        this.visible = opts.visible ? true : false;
+        this.isShowCaption = opts.isShowCaption ? true : false;
+    }
+
+    /**
+     * 设置显示与隐藏
+     *
+     * @param {boolean} state
+     * @memberof FormDetailModel
+     */
+    public setVisible(state: boolean): void {
+        this.visible = state;
+    }
+
+    /**
+     * 设置显示标题栏
+     *
+     * @param {boolean} state
+     * @memberof FormDetailModel
+     */
+    public setShowCaption(state: boolean): void {
+        this.isShowCaption = state;
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-druipart.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 数据关系界面模型
+ *
+ * @export
+ * @class FormDRUIPartModel
+ * @extends {FormDetailModel}
+ */
+export class FormDRUIPartModel extends FormDetailModel {
+
+    
+    constructor(opts: any = {}) {
+        super(opts);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-group-panel.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 分组面板模型
+ *
+ * @export
+ * @class FormGroupPanelModel
+ * @extends {FormDetailModel}
+ */
+export class FormGroupPanelModel extends FormDetailModel {
+
+    /**
+     * 实体界面行为组
+     *
+     * @type {*}
+     * @memberof FormGroupPanelModel
+     */
+    public uiActionGroup: any = {};
+
+    /**
+     * Creates an instance of FormGroupPanelModel.
+     * 创建 FormGroupPanelModel 实例
+     * 
+     * @param {*} [opts={}]
+     * @memberof FormGroupPanelModel
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+        Object.assign(this.uiActionGroup, opts.uiActionGroup);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-iframe.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 嵌入成员模型
+ *
+ * @export
+ * @class FormIFrameModel
+ * @extends {FormDetailModel}
+ */
+export class FormIFrameModel extends FormDetailModel {
+
+    constructor(opts: any = {}) {
+        super(opts);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-item.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 表单项模型
+ *
+ * @export
+ * @class FormItemModel
+ * @extends {FormDetailModel}
+ */
+export class FormItemModel extends FormDetailModel {
+
+    /**
+     * 是否启用
+     *
+     * @type {boolean}
+     * @memberof FormItemModel
+     */
+    public disabled: boolean = false;
+
+    /**
+     * 错误信息
+     *
+     * @type {string}
+     * @memberof FormItemModel
+     */
+    public error: string = '';
+
+    /**
+     * 校验状态
+     *
+     * @memberof FormItemModel
+     */
+    public validateStatus = '';
+
+    /**
+     * 表单项启用条件
+     * 
+     * 0 不启用
+     * 1 新建
+     * 2 更新
+     * 3 全部启用
+     *
+     * @type {(number | 0 | 1 | 2 | 3)}
+     * @memberof FormItemModel
+     */
+    public enableCond: number | 0 | 1 | 2 | 3 = 3;
+
+    /**
+     * Creates an instance of FormItemModel.
+     * FormItemModel 实例
+     * 
+     * @param {*} [opts={}]
+     * @memberof FormItemModel
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+        this.disabled = opts.disabled ? true : false;
+        this.enableCond = opts.enableCond;
+    }
+
+    /**
+     * 设置是否启用
+     *
+     * @param {boolean} state
+     * @memberof FormItemModel
+     */
+    public setDisabled(state: boolean): void {
+        this.disabled = state;
+    }
+
+    /**
+     * 设置信息内容
+     *
+     * @param {string} error
+     * @memberof FormItemModel
+     */
+    public setError(error: string): void {
+        this.error = error;
+    }
+
+    /**
+     * 设置是否启用
+     *
+     * @param {string} srfuf
+     * @memberof FormItemModel
+     */
+    public setEnableCond(srfuf: string): void {
+        // 是否有权限
+        const isReadOk: boolean = true;
+        const _srfuf: number = parseInt(srfuf, 10);
+        let state: boolean = true;
+
+        if (isReadOk) {
+            if (_srfuf === 1) {
+                if ((this.enableCond & 2) === 2) {
+                    state = false;
+                }
+            } else {
+                if ((this.enableCond & 1) === 1) {
+                    state = false;
+                }
+            }
+        }
+        this.setDisabled(state);
+    }
+
+} 
\ No newline at end of file

APP/src/global/model/form-detail/form-page.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 表单分页模型
+ *
+ * @export
+ * @class FormPageModel
+ * @extends {FormDetailModel}
+ */
+export class FormPageModel extends FormDetailModel {
+
+    
+    constructor(opts: any = {}) {
+        super(opts);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-part.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 表单部件模型
+ *
+ * @export
+ * @class FormPartModel
+ * @extends {FormDetailModel}
+ */
+export class FormPartModel extends FormDetailModel {
+
+
+    constructor(opts: any = {}) {
+        super(opts);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-row-item.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 直接内容模型
+ *
+ * @export
+ * @class FormRowItemModel
+ * @extends {FormDetailModel}
+ */
+export class FormRowItemModel extends FormDetailModel {
+
+
+    constructor(opts: any = {}) {
+        super(opts);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-tab-page.ts

+import { FormDetailModel } from './form-detail';
+import { FormTabPanelModel } from './form-tab-panel';
+
+/**
+ * 分页面板模型
+ *
+ * @export
+ * @class FormTabPageModel
+ * @extends {FormDetailModel}
+ */
+export class FormTabPageModel extends FormDetailModel {
+
+
+    /**
+     * Creates an instance of FormTabPageModel.
+     * FormTabPageModel 实例
+     * 
+     * @param {*} [opts={}]
+     * @memberof FormTabPageModel
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+    }
+
+    /**
+     * 设置分页是否启用
+     *
+     * @param {boolean} state
+     * @memberof FormTabPageModel
+     */
+    public setVisible(state: boolean): void {
+        this.visible = state;
+        const tabPanel = this.getTabPanelModel();
+        if (tabPanel) {
+            tabPanel.setActiviePage();
+        }
+    }
+
+    /**
+     * 获取分页面板
+     *
+     * @returns {(FormTabPanelModel | null)}
+     * @memberof FormTabPageModel
+     */
+    public getTabPanelModel(): FormTabPanelModel | null {
+        if (!this.form) {
+            return null;
+        }
+        const tabPanels: any[] = Object.values(this.form.detailsModel).filter((model: any) => Object.is(model.detailType, 'TABPANEL'));
+        let index = tabPanels.findIndex((tabPanel: any) => {
+            return tabPanel.tabPages.some((tabPag: any) => Object.is(tabPag.name, this.name));
+        });
+        if (index === -1) {
+            return null;
+        }
+        const tabPanel: FormTabPanelModel = tabPanels[index];
+        return tabPanel;
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-tab-panel.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 分页部件模型
+ *
+ * @export
+ * @class FormTabPanelModel
+ * @extends {FormDetailModel}
+ */
+export class FormTabPanelModel extends FormDetailModel {
+
+    /**
+     * 被激活分页
+     *
+     * @type {string}
+     * @memberof FormTabPanelModel
+     */
+    public activiedPage: string = '';
+
+    /**
+     * 选中激活状态
+     *
+     * @type {string}
+     * @memberof FormTabPanelModel
+     */
+    public clickActiviePage: string = '';
+
+    /**
+     * 分页子成员
+     *
+     * @type {any[]}
+     * @memberof FormTabPanelModel
+     */
+    public tabPages: any[] = [];
+
+    /**
+     * Creates an instance of FormTabPanelModel.
+     * FormTabPanelModel 实例
+     * 
+     * @param {*} [opts={}]
+     * @memberof FormTabPanelModel
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+        this.tabPages = [...opts.tabPages];
+        if (this.tabPages.length > 0) {
+            this.activiedPage = this.tabPages[0].name;
+        }
+    }
+
+    /**
+     * 设置激活分页
+     *
+     * @memberof FormTabPanelModel
+     */
+    public setActiviePage(): void {
+        if (!this.form) {
+            return;
+        }
+        const detailsModel: any = this.form.detailsModel;
+
+        const index = this.tabPages.findIndex((tabpage: any) => Object.is(tabpage.name, this.clickActiviePage) && Object.is(tabpage.name, this.activiedPage) && detailsModel[tabpage.name].visible);
+        if (index !== - 1) {
+            return;
+        }
+
+        this.tabPages.some((tabpage: any) => {
+            if (detailsModel[tabpage.name].visible) {
+                this.activiedPage = tabpage.name;
+                return true;
+            }
+            return false;
+        });
+    }
+
+    /**
+     * 选中页面
+     *
+     * @param {*} $event
+     * @returns {void}
+     * @memberof FormTabPanelModel
+     */
+    public clickPage($event: any): void {
+        if (!$event) {
+            return;
+        }
+
+        this.clickActiviePage = $event;
+        this.activiedPage = $event;
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/form-user-control.ts

+import { FormDetailModel } from './form-detail';
+
+/**
+ * 用户控件模型
+ *
+ * @export
+ * @class FormUserControlModel
+ * @extends {FormDetailModel}
+ */
+export class FormUserControlModel extends FormDetailModel {
+
+
+    constructor(otps:any = {}) {
+        super(otps);
+    }
+}
\ No newline at end of file

APP/src/global/model/form-detail/index.ts

+export { FormButtonModel } from './form-button';
+export { FormPageModel } from './form-page';
+export { FormItemModel } from './form-item';
+export { FormDRUIPartModel } from './form-druipart';
+export { FormPartModel } from './form-part';
+export { FormGroupPanelModel } from './form-group-panel';
+export { FormIFrameModel } from './form-iframe';
+export { FormRowItemModel } from './form-row-item';
+export { FormTabPageModel } from './form-tab-page';
+export { FormTabPanelModel } from './form-tab-panel';
+export { FormUserControlModel } from './form-user-control';

APP/src/global/util/util.ts

+import { Injectable } from '@angular/core';
+/**
+ * 平台工具类
+ * 
+ * @export
+ * @class Util
+ */
+@Injectable({ providedIn: 'root' })
+export class Util {
+
+    /**
+     * 错误提示信息
+     * 
+     * @static
+     * @type {string}
+     * @memberof Util
+     */
+    public errorInfo: string = '';
+
+    /**
+     * 创建 UUID
+     *
+     * @static
+     * @returns {string}
+     * @memberof Util
+     */
+    public createUUID(): string {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+        }
+        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+    }
+
+    /**
+     * 创建序列号
+     *
+     * @static
+     * @returns {number}
+     * @memberof Util
+     */
+    public createSerialNumber(): number {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000);
+        }
+        return s4();
+    }
+
+    /**
+     * 判断是否为一个函数
+     *
+     * @static
+     * @param {*} func
+     * @returns {boolean}
+     * @memberof Util
+     */
+    public isFunction(func: any): boolean {
+        return typeof (func) === 'function';
+    }
+
+    /**
+     * 判断条件是否成立
+     * 
+     * @static
+     * @param {*} value 
+     * @param {*} op 
+     * @param {*} value2 
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public testCond(value: any, op: any, value2: any): boolean {
+        // 等于操作
+        if (Object.is(op, 'EQ')) {
+            const _value = `${value}`;
+            return _value === value2;
+        }
+        // 大于操作
+        if (Object.is(op, 'GT')) {
+            const result: number = this.compare(value, value2);
+            if (result !== undefined && result > 0) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        // 大于等于操作
+        if (Object.is(op, 'GTANDEQ')) {
+            const result: number = this.compare(value, value2);
+            if (result !== undefined && result >= 0) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        // 值包含在给定的范围中
+        if (Object.is(op, 'IN')) {
+            return this.contains(value, value2);
+        }
+        // 不为空判断操作
+        if (Object.is(op, 'ISNOTNULL')) {
+            return (value != null && value !== '');
+        }
+        // 为空判断操作
+        if (Object.is(op, 'ISNULL')) {
+            return (value == null || value === '');
+        }
+        // 文本左包含
+        if (Object.is(op, 'LEFTLIKE')) {
+            return (value && value2 && (value.toUpperCase().indexOf(value2.toUpperCase()) === 0));
+        }
+        // 文本包含
+        if (Object.is(op, 'LIKE')) {
+            return (value && value2 && (value.toUpperCase().indexOf(value2.toUpperCase()) !== -1));
+        }
+        // 小于操作
+        if (Object.is(op, 'LT')) {
+            const result: number = this.compare(value, value2);
+            if (result !== undefined && result < 0) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        // 小于等于操作
+        if (Object.is(op, 'LTANDEQ')) {
+            const result: number = this.compare(value, value2);
+            if (result !== undefined && result <= 0) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        // 不等于操作
+        if (Object.is(op, 'NOTEQ')) {
+            const _value = `${value}`;
+            return _value !== value2;
+        }
+        // 值不包含在给定的范围中
+        if (Object.is(op, 'NOTIN')) {
+            return !this.contains(value, value2);
+        }
+        // 文本右包含
+        if (Object.is(op, 'RIGHTLIKE')) {
+            if (!(value && value2)) {
+                return false;
+            }
+            const nPos = value.toUpperCase().indexOf(value2.toUpperCase());
+            if (nPos === -1) {
+                return false;
+            }
+            return nPos + value2.length === value.length;
+        }
+        // 空判断
+        if (Object.is(op, 'TESTNULL')) {
+
+        }
+        // 自定义包含
+        if (Object.is(op, 'USERLIKE')) {
+
+        }
+        return false;
+    }
+
+    /**
+     * 文本包含
+     * 
+     * @static
+     * @param {any} value 
+     * @param {any} value2 
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public contains(value: any, value2: any): boolean {
+        if (value && value2) {
+            // 定义一数组
+            let arr = new Array();
+            arr = value2.split(',');
+            // 定义正则表达式的连接符
+            const S = String.fromCharCode(2);
+            const reg = new RegExp(S + value + S);
+            return (reg.test(S + arr.join(S) + S));
+        }
+        return false;
+    }
+
+    /**
+     * 值比较
+     * 
+     * @static
+     * @param {*} value 
+     * @param {*} value2 
+     * @returns {number} 
+     * @memberof Util
+     */
+    public compare(value: any, value2: any): number {
+        let result: any;
+        if (!Object.is(value, '') && !Object.is(value2, '') && !isNaN(value) && !isNaN(value2)) {
+            result = this.compareNumber(parseFloat(value), parseFloat(value2));
+        } else if (this.isParseDate(value) && this.isParseDate(value2)) {
+            result = this.compareDate((new Date(value)).getTime(), (new Date(value2)).getTime());
+        } else if (value && (typeof (value) === 'boolean' || value instanceof Boolean)) {
+            result = this.compareBoolean(value, value2);
+        } else if (value && (typeof (value) === 'string' || value instanceof String)) {
+            result = this.compareString(value, value2);
+        }
+        return result;
+    }
+
+    /**
+     * 是否是时间
+     *
+     * @static
+     * @param {string} value
+     * @returns {boolean}
+     * @memberof Util
+     */
+    public isParseDate(value: string): boolean {
+        const time = new Date(value);
+        if (isNaN(time.getTime())) {
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * 时间值比较（毫秒数）
+     *
+     * @static
+     * @param {number} value
+     * @param {number} value2
+     * @returns {number}
+     * @memberof Util
+     */
+    public compareDate(value: number, value2: number): number {
+        if (value > value2) {
+            return 1;
+        } else if (value < value2) {
+            return -1;
+        } else {
+            return 0;
+        }
+    }
+
+    /**
+     * 数值比较
+     *
+     * @static
+     * @param {number} value
+     * @param {number} value2
+     * @returns {number}
+     * @memberof Util
+     */
+    public compareNumber(value: number, value2: number): number {
+        if (value > value2) {
+            return 1;
+        } else if (value < value2) {
+            return -1;
+        } else {
+            return 0;
+        }
+    }
+
+    /**
+     * 字符串比较
+     *
+     * @static
+     * @param {*} value
+     * @param {*} value2
+     * @returns {number}
+     * @memberof Util
+     */
+    public compareString(value: any, value2: any): number {
+        return value.localeCompare(value2);
+    }
+
+    /**
+     * boolean 值比较
+     *
+     * @static
+     * @param {*} value
+     * @param {*} value2
+     * @returns {number}
+     * @memberof Util
+     */
+    public compareBoolean(value: any, value2: any): number {
+        if (value === value2) {
+            return 0;
+        } else {
+            return -1;
+        }
+    }
+
+    /**
+     *
+     *
+     * @static
+     * @param {*} [o={}]
+     * @memberof Util
+     */
+    public processResult(o: any = {}): void {
+        if (o.url != null && o.url !== '') {
+            window.location.href = o.url;
+        }
+        if (o.code != null && o.code !== '') {
+            // tslint:disable-next-line:no-eval
+            eval(o.code);
+        }
+
+        if (o.downloadurl != null && o.downloadurl !== '') {
+            const downloadurl = this.parseURL2(o.downloadurl, '');
+            this.download(downloadurl);
+        }
+    }
+
+    /**
+     * 下载文件
+     * 
+     * @static
+     * @param {string} url 
+     * @memberof Util
+     */
+    public download(url: string): void {
+        window.open(url, '_blank');
+    }
+
+    /**
+     * 
+     * 
+     * @static
+     * @param {any} url 
+     * @param {any} params 
+     * @returns {string} 
+     * @memberof Util
+     */
+    public parseURL2(url: string, params: any): string {
+        let tmpURL;
+        if (url.indexOf('../../') !== -1) {
+            tmpURL = url.substring(url.indexOf('../../') + 6, url.length);
+        } else if (url.indexOf('/') === 0) {
+            tmpURL = url.substring(url.indexOf('/') + 1, url.length);
+        } else {
+            tmpURL = url;
+        }
+
+        if (params) {
+            return tmpURL + (url.indexOf('?') === -1 ? '?' : '&');
+        } else {
+            return tmpURL;
+        }
+    }
+
+    /**
+     * 是否是数字
+     * 
+     * @param {*} num 
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public isNumberNaN(num: any): boolean {
+        return Number.isNaN(num) || num !== num;
+    }
+
+    /**
+     * 是否未定义
+     * 
+     * @static
+     * @param {*} value 
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public isUndefined(value: any): boolean {
+        return typeof value === 'undefined';
+    }
+
+    /**
+     * 是否为空
+     * 
+     * @static
+     * @param {*} value 
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public isEmpty(value: any): boolean {
+        return this.isUndefined(value) || Object.is(value, '') || value === null || value !== value;
+    }
+
+    /**
+     * 检查属性常规条件
+     *
+     * @static
+     * @param {*} value 属性值
+     * @param {string} op 检测条件
+     * @param {*} value2 预定义值
+     * @param {string} errorInfo 错误信息
+     * @param {string} paramType 参数类型
+     * @param {*} form 表单对象
+     * @param {boolean} primaryModel 是否必须条件
+     * @returns {boolean}
+     * @memberof Util
+     */
+    public checkFieldSimpleRule(value: any, op: string, value2: any, errorInfo: string, paramType: string, form: any, primaryModel: boolean): boolean {
+        if (Object.is(paramType, 'CURTIME')) {
+            value2 = `${new Date()}`;
+        }
+        if (Object.is(paramType, 'ENTITYFIELD')) {
+            value2 = value2 ? value2.toLowerCase() : '';
+            const _value2Field = form.findFormItem(value2);
+            if (!_value2Field) {
+                this.errorInfo = `表单项${value2}未配置`;
+                return true;
+            }
+            value2 = _value2Field.getValue();
+        }
+        if (this.isEmpty(errorInfo)) {
+            errorInfo = '内容必须符合值规则';
+        }
+        this.errorInfo = errorInfo;
+        const result = this.testCond(value, op, value2);
+        if (!result) {
+            if (primaryModel) {
+                throw new Error(this.errorInfo);
+            }
+        }
+        return !result;
+    }
+
+    /**
+     * 检查属性字符长度规则
+     * 
+     * @static
+     * @param {*} viewValue 
+     * @param {number} minLength 
+     * @param {boolean} indexOfMin 
+     * @param {number} maxLength 
+     * @param {boolean} indexOfMax 
+     * @param {string} errorInfo 
+     * @param {boolean} primaryModel 
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public checkFieldStringLengthRule(viewValue: string, minLength: number, indexOfMin: boolean, maxLength: number, indexOfMax: boolean, errorInfo: string, primaryModel: boolean): boolean {
+        if (this.isEmpty(errorInfo)) {
+            this.errorInfo = '内容长度必须符合范围规则';
+        } else {
+            this.errorInfo = errorInfo;
+        }
+
+        const isEmpty = this.isEmpty(viewValue);
+        if (isEmpty) {
+            if (primaryModel) {
+                throw new Error('值为空');
+            }
+            this.errorInfo = '值为空';
+            return true;
+        }
+
+        const viewValueLength: number = viewValue.length;
+
+        // 小于等于
+        if (minLength !== null) {
+            if (indexOfMin) {
+                if (viewValueLength < minLength) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            } else {
+                if (viewValueLength <= minLength) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            }
+        }
+
+        //  大于等于
+        if (maxLength !== null) {
+            if (indexOfMax) {
+                if (viewValueLength > maxLength) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            } else {
+                if (viewValueLength >= maxLength) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            }
+        }
+
+        this.errorInfo = '';
+        return false;
+    }
+
+    /**
+     * 检查属性值正则式规则
+     * 
+     * @static
+     * @param {string} viewValue 属性值
+     * @param {*} strReg 验证正则
+     * @param {string} errorInfo 错误信息
+     * @param {boolean} primaryModel 是否关键条件
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public checkFieldRegExRule(viewValue: string, strReg: any, errorInfo: string, primaryModel: boolean): boolean {
+        if (this.isEmpty(errorInfo)) {
+            this.errorInfo = '值必须符合正则规则';
+        } else {
+            this.errorInfo = errorInfo;
+        }
+        const isEmpty = this.isEmpty(viewValue);
+        if (isEmpty) {
+            if (primaryModel) {
+                throw new Error('值为空');
+            }
+            this.errorInfo = '值为空';
+            return true;
+        }
+        const regExp = new RegExp(strReg);
+        if (!regExp.test(viewValue)) {
+            if (primaryModel) {
+                throw new Error(this.errorInfo);
+            }
+            return true;
+        }
+
+        this.errorInfo = '';
+        return false;
+    }
+
+    /**
+     * 检查属性值范围规则
+     * 
+     * @static
+     * @param {string} viewValue 属性值
+     * @param {*} minNumber 最小数值
+     * @param {boolean} indexOfMin 是否包含最小数值
+     * @param {*} maxNumber 最大数值
+     * @param {boolean} indexOfMax 是否包含最大数值
+     * @param {string} errorInfo 错误信息
+     * @param {boolean} primaryModel 是否关键条件
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public checkFieldValueRangeRule(viewValue: string, minNumber: any, indexOfMin: boolean, maxNumber: any, indexOfMax: boolean, errorInfo: string, primaryModel: boolean): boolean {
+
+        if (this.isEmpty(errorInfo)) {
+            this.errorInfo = '值必须符合值范围规则';
+        } else {
+            this.errorInfo = errorInfo;
+        }
+
+        const isEmpty = this.isEmpty(viewValue);
+        if (isEmpty) {
+            if (primaryModel) {
+                throw new Error('值为空');
+            }
+            this.errorInfo = '值为空';
+            return true;
+        }
+
+        const valueFormat = this.checkFieldRegExRule(viewValue, /^-?\d*\.?\d+$/, '', primaryModel);
+        if (valueFormat) {
+            return true;
+        } else {
+            this.errorInfo = errorInfo;
+        }
+
+        const data = Number.parseFloat(viewValue);
+
+        // 小于等于
+        if (minNumber !== null) {
+            if (indexOfMin) {
+                if (data < minNumber) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            } else {
+                if (data <= minNumber) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            }
+        }
+
+        // //大于等于
+        if (maxNumber != null) {
+            if (indexOfMax) {
+                if (data > maxNumber) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            } else {
+                if (data >= maxNumber) {
+                    if (primaryModel) {
+                        throw new Error(this.errorInfo);
+                    }
+                    return true;
+                }
+            }
+        }
+
+        this.errorInfo = '';
+        return false;
+    }
+
+    /**
+     * 检查属性值系统值范围规则  暂时支持正则表达式
+     * 
+     * @static
+     * @param {string} viewValue 属性值
+     * @param {*} strReg 正则
+     * @param {string} errorInfo  错误信息
+     * @param {boolean} primaryModel 是否关键条件
+     * @returns {boolean} 
+     * @memberof Util
+     */
+    public checkFieldSysValueRule(viewValue: string, strReg: any, errorInfo: string, primaryModel: boolean): boolean {
+        return this.checkFieldRegExRule(viewValue, strReg, errorInfo, primaryModel);
+    }
+
+    /**
+     * 将文本格式的xml转换为dom模式
+     * 
+     * @static
+     * @param {string} strXml 
+     * @memberof Util
+     */
+    public parseXML(strXml: string): Document | undefined {
+        if (strXml) {
+            return new DOMParser().parseFromString(strXml, 'text/xml');
+        }
+        return undefined;
+    }
+
+    /**
+     * 将xml转换为object对象
+     * 
+     * @static
+     * @param {*} node 
+     * @param {*} [obj={}] 
+     * @memberof Util
+     */
+    public loadXMLNode(node: any, obj: any = {}): void {
+        if (node && node.attributes) {
+            const arr: any = node.attributes;
+            for (let i = 0; i < arr.length; i++) {
+                let A = arr.item(i).name;
+                const B = arr.item(i).value;
+                A = A.toLowerCase();
+                obj[A] = B;
+            }
+        }
+    }
+
+    /**
+     * 将object转换为xml对象
+     * 
+     * @static
+     * @param {any} XML 
+     * @param {any} obj 
+     * @memberof Util
+     */
+    public saveXMLNode(XML: any, obj: any) {
+        const keys: string[] = Object.keys(obj);
+        keys.forEach((key: string) => {
+            const value = obj[key];
+            if (!value || value instanceof Object || typeof (value) === 'function') {
+                return;
+            }
+            const proValue = value.toString();
+            if (proValue !== '') {
+                XML.attrib(key, proValue);
+            }
+        });
+    }
+
+    /**
+     * 格式化矩阵参数
+     *
+     * @static
+     * @param {string} param
+     * @returns {any}
+     * @memberof Util
+     */
+    public formatMatrixParse(param: string): any {
+        const data: any = {};
+        const params_arr: string[] = param.split(';');
+        params_arr.forEach((_data: string, index: number) => {
+            if ((index === params_arr.length - 1) && _data.indexOf('?') !== -1) {
+                _data = _data.substr(0, _data.indexOf('?'));
+            }
+            const _data_arr: string[] = [..._data.split('=')];
+            data[_data_arr[0]] = _data_arr[1];
+        });
+        return data;
+    }
+
+    /**
+     * 处理url参数
+     *
+     * @static
+     * @param {string} param
+     * @returns {*}
+     * @memberof Util
+     */
+    public formatMatrixParse2(param: string): any {
+        const viewdata: any = { srfparentdata: {} };
+        const params_arr: string[] = param.split(';');
+        params_arr.forEach((_data: string, index: number) => {
+            if ((index === params_arr.length - 1) && _data.indexOf('?') !== -1) {
+                _data = _data.substr(0, _data.indexOf('?'));
+            }
+            const _data_arr: string[] = [..._data.split('=')];
+            if (Object.is(_data_arr[0], 'srfkey')) {
+                Object.assign(viewdata, { [_data_arr[0]]: _data_arr[1] });
+            } else {
+                Object.assign(viewdata.srfparentdata, { [_data_arr[0]]: _data_arr[1] });
+            }
+        });
+        return viewdata;
+    }
+
+    /**
+     * 转换为矩阵参数
+     *
+     * @static
+     * @param {*} obj
+     * @returns {*}
+     * @memberof Util
+     */
+    public formatMatrixStringify(obj: any): any {
+        let str: string = '';
+        if (obj && !(obj instanceof Array) && (obj instanceof Object)) {
+            const keys: string[] = Object.keys(obj);
+            keys.forEach((key: string) => {
+                if (!obj[key]) {
+                    return;
+                }
+                if (!Object.is(str, '')) {
+                    str += ';';
+                }
+                str += `${key}=${obj[key]}`;
+            });
+        }
+        return Object.is(str, '') ? undefined : str;
+    }
+
+    /**
+     * 格式化Url参数
+     *
+     * @static
+     * @param {*} [params={}]
+     * @returns {string}
+     * @memberof Util
+     */
+    public urlEncode(params: any = {}): string {
+        let str: string = '';
+        for (const key in params) {
+            if (params.hasOwnProperty(key)) {
+                const val = params[key];
+                str += `${key}=${encodeURIComponent(val)}&`;
+            }
+        }
+        return str;
+    }
+
+    /**
+     * 清除用户信息缓存
+     *
+     * @static
+     * @memberof Util
+     */
+    public clearUserInfo(): void {
+        window.localStorage.removeItem('user');
+        window.localStorage.removeItem('token');
+    }
+
+    /**
+     * 检查返回数据
+     *
+     * @param {*} res
+     * @returns {boolean}
+     * @memberof Util
+     */
+    public checkRes(res: any): boolean {
+        return (res && res.ret === 0) ? true : false;
+    }
+
+    /**
+     * 准备路由参数
+     *
+     * @static
+     * @param {*} { route: route, sourceNode: sourceNode, targetNode: targetNode, data: data }
+     * @returns {*}
+     * @memberof Util
+     */
+    public prepareRouteParmas({ route: route, sourceNode: sourceNode, targetNode: targetNode, data: data }: any): any {
+        const params: any = {};
+        if (!sourceNode || (sourceNode && Object.is(sourceNode, ''))) {
+            return params;
+        }
+        if (!targetNode || (targetNode && Object.is(targetNode, ''))) {
+            return params;
+        }
+        // route.matched.some((_matched: any, index: number, arr: any[]) => {
+        //     // 当前视图
+        //     if (Object.is(sourceNode, _matched.name && arr.length > 1)) {
+        //         Object.assign(params, { [targetNode]: this.formatMatrixStringify(data) });
+        //         return true;
+        //     }
+        //     // 父视图
+        //     Object.assign(params, { [_matched.name]: route.params[_matched.name] });
+        //     return false;
+        // });
+        const indexName = route.matched[0].name;
+        Object.assign(params, { [indexName]: route.params[indexName] });
+        Object.assign(params, { [targetNode]: this.formatMatrixStringify(data) });
+        return params;
+    }
+
+    /**
+     * 获取当前值类型
+     *
+     * @static
+     * @param {*} obj
+     * @returns
+     * @memberof Util
+     */
+    public typeOf(obj: any):string {
+        const toString = Object.prototype.toString;
+        const map: any = {
+            '[object Boolean]': 'boolean',
+            '[object Number]': 'number',
+            '[object String]': 'string',
+            '[object Function]': 'function',
+            '[object Array]': 'array',
+            '[object Date]': 'date',
+            '[object RegExp]': 'regExp',
+            '[object Undefined]': 'undefined',
+            '[object Null]': 'null',
+            '[object Object]': 'object'
+        };
+        return map[toString.call(obj)];
+    }
+
+    /**
+     * 深拷贝(deepCopy)
+     *
+     * @static
+     * @param {*} data
+     * @returns {*}
+     * @memberof Util
+     */
+    public deepCopy(data: any): any {
+        const t = this.typeOf(data);
+        let o: any;
+
+        if (t === 'array') {
+            o = [];
+        } else if (t === 'object') {
+            o = {};
+        } else {
+            return data;
+        }
+
+        if (t === 'array') {
+            for (let i = 0; i < data.length; i++) {
+                o.push(this.deepCopy(data[i]));
+            }
+        } else if (t === 'object') {
+            for (let i in data) {
+                o[i] = this.deepCopy(data[i]);
+            }
+        }
+        return o;
+    }
+
+    /**
+     * 名称格式化
+     *
+     * @static
+     * @param {string} name
+     * @returns {string}
+     * @memberof Util
+     */
+    public srfFilePath2(name: string): string {
+        if (!name || (name && Object.is(name, ''))) {
+            throw new Error('名称异常');
+        }
+        name = name.replace(/[_]/g, '-');
+        let state: number = 0;
+        let _str = '';
+        const uPattern = /^[A-Z]{1}$/;
+
+        const str1 = name.substring(0, 1);
+        const str2 = name.substring(1)
+        state = uPattern.test(str1) ? 1 : 0;
+        _str = `${_str}${str1.toLowerCase()}`;
+
+        for (let chr of str2) {
+            if (uPattern.test(chr)) {
+                if (state === 1) {
+                    _str = `${_str}${chr.toLowerCase()}`;
+                } else {
+                    _str = `${_str}-${chr.toLowerCase()}`;
+                }
+                state = 1;
+            } else {
+                _str = `${_str}${chr.toLowerCase()}`;
+                state = 0;
+            }
+        }
+        _str = _str.replace(/---/g, '-').replace(/--/g, '-');
+
+        return _str;
+    }
+
+}
\ No newline at end of file

APP/src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

APP/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

APP/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

APP/src/styles.less

+@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
+@import "../node_modules/font-awesome/less/font-awesome.less";
+// The prefix to use on all css classes from ant.
+@ant-prefix : ant;
+
+// -------- Colors -----------
+@primary-color : @blue-6;
+@info-color : @blue-6;
+@success-color : @green-6;
+@processing-color : @blue-6;
+@error-color : @red-6;
+@highlight-color : @red-6;
+@warning-color : @gold-6;
+@normal-color : #d9d9d9;
+
+// Color used by default to control hover and active backgrounds and for
+// alert info backgrounds.
+@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
+@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
+@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
+@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
+@primary-5: color(
+  ~`colorPalette('@{primary-color}', 5) `
+); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
+@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
+@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
+@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
+@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
+@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
+
+// Base Scaffolding Variables
+// ---
+
+// Background color for `<body>`
+@body-background : #fff;
+// Base background color for most components
+@component-background : #fff;
+@font-family : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
+"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+@code-family : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+@heading-color : fade(#000, 85%);
+@text-color : fade(#000, 65%);
+@text-color-secondary : fade(#000, 45%);
+@heading-color-dark : fade(#fff, 100%);
+@text-color-dark : fade(#fff, 85%);
+@text-color-secondary-dark: fade(#fff, 65%);
+@font-variant-base : tabular-nums;
+@font-size-base : 14px;
+@font-size-lg : @font-size-base + 2px;
+@font-size-sm : 12px;
+@line-height-base : 1.5;
+@border-radius-base : 4px;
+@border-radius-sm : 2px;
+
+// vertical paddings
+@padding-lg : 24px; // containers
+@padding-md : 16px; // small containers and buttons
+@padding-sm : 12px; // Form controls and items
+@padding-xs : 8px; // small items
+
+// vertical padding for all form controls
+@control-padding-horizontal: @padding-sm;
+@control-padding-horizontal-sm: @padding-xs;
+
+// The background colors for active and hover states for things like
+// list items or table cells.
+@item-active-bg : @primary-1;
+@item-hover-bg : @primary-1;
+
+// ICONFONT
+@iconfont-css-prefix : anticon;
+
+// LINK
+@link-color : @primary-color;
+@link-hover-color : color(~`colorPalette("@{link-color}", 5)`);
+@link-active-color : color(~`colorPalette("@{link-color}", 7)`);
+@link-decoration : none;
+@link-hover-decoration : none;
+
+// Animation
+@ease-base-out : cubic-bezier(0.7, 0.3, 0.1, 1);
+@ease-base-in : cubic-bezier(0.9, 0, 0.3, 0.7);
+@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1);
+@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19);
+@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
+@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46);
+@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6);
+@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46);
+@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
+@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
+@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
+@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
+@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
+
+// Border color
+@border-color-base : hsv(0, 0, 85%); // base border outline a component
+@border-color-split : hsv(0, 0, 91%); // split border inside a component
+@border-width-base : 1px; // width of the border for a component
+@border-style-base : solid; // style of a components border
+
+// Outline
+@outline-blur-size : 0;
+@outline-width : 2px;
+@outline-color : @primary-color;
+
+@background-color-light : hsv(0, 0, 98%); // background of header and selected item
+@background-color-base : hsv(0, 0, 96%); // Default grey background color
+
+// Disabled states
+@disabled-color : fade(#000, 25%);
+@disabled-bg : @background-color-base;
+@disabled-color-dark : fade(#fff, 35%);
+
+// Shadow
+@shadow-color : rgba(0, 0, 0, .15);
+@box-shadow-base : @shadow-1-down;
+@shadow-1-up : 0 -2px 8px @shadow-color;
+@shadow-1-down : 0 2px 8px @shadow-color;
+@shadow-1-left : -2px 0 8px @shadow-color;
+@shadow-1-right : 2px 0 8px @shadow-color;
+@shadow-2 : 0 4px 12px @shadow-color;
+
+// Buttons
+@btn-font-weight : 400;
+@btn-border-radius-base : @border-radius-base;
+@btn-border-radius-sm : @border-radius-base;
+
+@btn-primary-color : #fff;
+@btn-primary-bg : @primary-color;
+
+@btn-default-color : @text-color;
+@btn-default-bg : #fff;
+@btn-default-border : @border-color-base;
+
+@btn-danger-color : @error-color;
+@btn-danger-bg : @background-color-base;
+@btn-danger-border : @border-color-base;
+
+@btn-disable-color : @disabled-color;
+@btn-disable-bg : @disabled-bg;
+@btn-disable-border : @border-color-base;
+
+@btn-padding-base : 0 @padding-md - 1px;
+@btn-font-size-lg : @font-size-lg;
+@btn-font-size-sm : @font-size-base;
+@btn-padding-lg : @btn-padding-base;
+@btn-padding-sm : 0 @padding-xs - 1px;
+
+@btn-height-base : 32px;
+@btn-height-lg : 40px;
+@btn-height-sm : 24px;
+
+@btn-circle-size : @btn-height-base;
+@btn-circle-size-lg : @btn-height-lg;
+@btn-circle-size-sm : @btn-height-sm;
+
+@btn-group-border : @primary-5;
+
+// Checkbox
+@checkbox-size : 16px;
+@checkbox-color : @primary-color;
+@checkbox-check-color : #fff;
+@checkbox-border-width : @border-width-base;
+
+// Radio
+@radio-size : 16px;
+@radio-dot-color : @primary-color;
+
+// Radio buttons
+@radio-button-bg : @btn-default-bg;
+@radio-button-color : @btn-default-color;
+@radio-button-hover-color : @primary-5;
+@radio-button-active-color : @primary-7;
+
+// Media queries breakpoints
+// Extra small screen / phone
+@screen-xs : 480px;
+@screen-xs-min : @screen-xs;
+
+// Small screen / tablet
+@screen-sm : 576px;
+@screen-sm-min : @screen-sm;
+
+// Medium screen / desktop
+@screen-md : 768px;
+@screen-md-min : @screen-md;
+
+// Large screen / wide desktop
+@screen-lg : 992px;
+@screen-lg-min : @screen-lg;
+
+// Extra large screen / full hd
+@screen-xl : 1200px;
+@screen-xl-min : @screen-xl;
+
+// Extra extra large screen / large descktop
+@screen-xxl : 1600px;
+@screen-xxl-min : @screen-xxl;
+
+// provide a maximum
+@screen-xs-max : (@screen-sm-min - 1px);
+@screen-sm-max : (@screen-md-min - 1px);
+@screen-md-max : (@screen-lg-min - 1px);
+@screen-lg-max : (@screen-xl-min - 1px);
+@screen-xl-max : (@screen-xxl-min - 1px);
+
+// Grid system
+@grid-columns : 24;
+@grid-gutter-width : 0;
+
+// Layout
+@layout-body-background : #f0f2f5;
+@layout-header-background : #001529;
+@layout-footer-background : @layout-body-background;
+@layout-header-height : 64px;
+@layout-header-padding : 0 50px;
+@layout-footer-padding : 24px 50px;
+@layout-sider-background : @layout-header-background;
+@layout-trigger-height : 48px;
+@layout-trigger-background : #002140;
+@layout-trigger-color : #fff;
+@layout-zero-trigger-width : 36px;
+@layout-zero-trigger-height : 42px;
+// Layout light theme
+@layout-sider-background-light : #fff;
+@layout-trigger-background-light: #fff;
+@layout-trigger-color-light : @text-color;
+
+// z-index list
+@zindex-affix : 10;
+@zindex-back-top : 10;
+@zindex-modal-mask : 1000;
+@zindex-modal : 1000;
+@zindex-notification : 1010;
+@zindex-message : 1010;
+@zindex-popover : 1030;
+@zindex-picker : 1050;
+@zindex-dropdown : 1050;
+@zindex-tooltip : 1060;
+
+// Animation
+@animation-duration-slow: 0.3s; // Modal
+@animation-duration-base: 0.2s;
+@animation-duration-fast: 0.1s; // Tooltip
+
+// Form
+// ---
+@label-required-color : @highlight-color;
+@label-color : @heading-color;
+@form-item-margin-bottom : 24px;
+@form-item-trailing-colon : true;
+@form-vertical-label-padding : 0 0 8px;
+@form-vertical-label-margin : 0;
+
+// Input
+// ---
+@input-height-base : 32px;
+@input-height-lg : 40px;
+@input-height-sm : 24px;
+@input-padding-horizontal : @control-padding-horizontal - 1px;
+@input-padding-horizontal-base: @input-padding-horizontal;
+@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
+@input-padding-horizontal-lg : @input-padding-horizontal;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-sm : 1px;
+@input-padding-vertical-lg : 6px;
+@input-placeholder-color : hsv(0, 0, 75%);
+@input-color : @text-color;
+@input-border-color : @border-color-base;
+@input-bg : #fff;
+@input-addon-bg : @background-color-light;
+@input-hover-border-color : @primary-color;
+@input-disabled-bg : @disabled-bg;
+@input-outline-offset : 0 0;
+
+// Tooltip
+// ---
+//* Tooltip max width
+@tooltip-max-width: 250px;
+//** Tooltip text color
+@tooltip-color: #fff;
+//** Tooltip background color
+@tooltip-bg: rgba(0, 0, 0, 0.75);
+//** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+//** Tooltip distance with trigger
+@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+// Popover
+// ---
+//** Popover body background color
+@popover-bg: #fff;
+//** Popover text color
+@popover-color: @text-color;
+//** Popover maximum width
+@popover-min-width: 177px;
+//** Popover arrow width
+@popover-arrow-width: 6px;
+//** Popover arrow color
+@popover-arrow-color: @popover-bg;
+//** Popover outer arrow width
+//** Popover outer arrow color
+@popover-arrow-outer-color: @popover-bg;
+//** Popover distance with trigger
+@popover-distance: @popover-arrow-width + 4px;
+
+// Modal
+// --
+@modal-header-bg: @component-background;
+@modal-mask-bg: rgba(0, 0, 0, 0.65);
+
+// Progress
+// --
+@progress-default-color: @processing-color;
+@progress-remaining-color: @background-color-base;
+@progress-text-color: @text-color;
+
+// Menu
+// ---
+@menu-inline-toplevel-item-height: 40px;
+@menu-item-height: 40px;
+@menu-collapsed-width: 80px;
+@menu-bg: @component-background;
+@menu-popup-bg: @component-background;
+@menu-item-color: @text-color;
+@menu-highlight-color: @primary-color;
+@menu-item-active-bg: @item-active-bg;
+@menu-item-active-border-width: 3px;
+@menu-item-group-title-color: @text-color-secondary;
+// dark theme
+@menu-dark-color: @text-color-secondary-dark;
+@menu-dark-bg: @layout-header-background;
+@menu-dark-arrow-color: #fff;
+@menu-dark-submenu-bg: #000c17;
+@menu-dark-highlight-color: #fff;
+@menu-dark-item-active-bg: @primary-color;
+
+// Spin
+// ---
+@spin-dot-size-sm: 14px;
+@spin-dot-size: 20px;
+@spin-dot-size-lg: 32px;
+
+// Table
+// --
+@table-header-bg: @background-color-light;
+@table-header-color: @heading-color;
+@table-header-sort-bg: @background-color-base;
+@table-body-sort-bg: rgba(0, 0, 0, 0.01);
+@table-row-hover-bg: @primary-1;
+@table-selected-row-bg: #fafafa;
+@table-expanded-row-bg: #fbfbfb;
+@table-padding-vertical: 16px;
+@table-padding-horizontal: 16px;
+
+// Tag
+// --
+@tag-default-bg: @background-color-light;
+@tag-default-color: @text-color;
+@tag-font-size: @font-size-sm;
+
+// TimePicker
+// ---
+@time-picker-panel-column-width: 56px;
+@time-picker-panel-width: @time-picker-panel-column-width * 3;
+@time-picker-selected-bg: @background-color-base;
+
+// Carousel
+// ---
+@carousel-dot-width: 16px;
+@carousel-dot-height: 3px;
+@carousel-dot-active-width: 24px;
+
+// Badge
+// ---
+@badge-height: 20px;
+@badge-dot-size: 6px;
+@badge-font-size: @font-size-sm;
+@badge-font-weight: normal;
+@badge-status-size: 6px;
+
+// Rate
+// ---
+@rate-star-color: @yellow-6;
+@rate-star-bg: @border-color-split;
+
+// Card
+// ---
+@card-head-color: @heading-color;
+@card-head-background: transparent;
+@card-head-padding: 16px;
+@card-inner-head-padding: 12px;
+@card-padding-base: 24px;
+@card-padding-wider: 32px;
+@card-actions-background: @background-color-light;
+@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+
+// Comment
+// ---
+@comment-padding-base: 16px 0;
+@comment-nest-indent: 44px;
+@comment-author-name-color: @text-color-secondary;
+@comment-author-time-color: #ccc;
+@comment-action-color: @text-color-secondary;
+@comment-action-hover-color: #595959;
+
+// Tabs
+// ---
+@tabs-card-head-background: @background-color-light;
+@tabs-card-height: 40px;
+@tabs-card-active-color: @primary-color;
+@tabs-title-font-size: @font-size-base;
+@tabs-title-font-size-lg: @font-size-lg;
+@tabs-title-font-size-sm: @font-size-base;
+@tabs-ink-bar-color: @primary-color;
+@tabs-bar-margin: 0 0 16px 0;
+@tabs-horizontal-margin: 0 32px 0 0;
+@tabs-horizontal-padding: 12px 16px;
+@tabs-vertical-padding: 8px 24px;
+@tabs-vertical-margin: 0 0 16px 0;
+@tabs-scrolling-size: 32px;
+@tabs-highlight-color: @primary-color;
+@tabs-hover-color: @primary-5;
+@tabs-active-color: @primary-7;
+
+// BackTop
+// ---
+@back-top-color: #fff;
+@back-top-bg: @text-color-secondary;
+@back-top-hover-bg: @text-color;
+
+// Avatar
+// ---
+@avatar-size-base: 32px;
+@avatar-size-lg: 40px;
+@avatar-size-sm: 24px;
+@avatar-font-size-base: 18px;
+@avatar-font-size-lg: 24px;
+@avatar-font-size-sm: 14px;
+@avatar-bg: #ccc;
+@avatar-color: #fff;
+@avatar-border-radius: @border-radius-base;
+
+// Switch
+// ---
+@switch-height: 22px;
+@switch-sm-height: 16px;
+@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
+@switch-disabled-opacity: 0.4;
+@switch-color: @primary-color;
+
+// Pagination
+// ---
+@pagination-item-size: 32px;
+@pagination-item-size-sm: 24px;
+@pagination-font-family: Arial;
+@pagination-font-weight-active: 500;
+
+// Breadcrumb
+// ---
+@breadcrumb-base-color: @text-color-secondary;
+@breadcrumb-last-item-color: @text-color;
+@breadcrumb-font-size: @font-size-base;
+@breadcrumb-icon-font-size: @font-size-base;
+@breadcrumb-link-color: @text-color-secondary;
+@breadcrumb-link-color-hover: @primary-5;
+@breadcrumb-separator-color: @text-color-secondary;
+@breadcrumb-separator-margin: 0 @padding-xs;
+
+// Slider
+// ---
+@slider-margin: 14px 6px 10px;
+@slider-rail-background-color: @background-color-base;
+@slider-rail-background-color-hover: #e1e1e1;
+@slider-track-background-color: @primary-5;
+@slider-track-background-color-hover: @primary-6;
+@slider-handle-color: @primary-5;
+@slider-handle-color-hover: @primary-6;
+@slider-handle-color-focus: tint(@primary-color, 20%);
+@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
+@slider-handle-color-tooltip-open: @primary-color;
+@slider-dot-border-color: @border-color-split;
+@slider-dot-border-color-active: @primary-5;
+@slider-disabled-color: @disabled-color;
+@slider-disabled-background-color: @component-background;
+
+// Tree
+// ---
+@tree-title-height: 24px;
+@tree-child-padding: 18px;
+@tree-directory-selected-color: #fff;
+@tree-directory-selected-bg: @primary-color;
+
+// Collapse
+// ---
+@collapse-header-padding: 12px 16px 12px 40px;
+@collapse-header-bg: @background-color-light;
+@collapse-content-padding: @padding-md;
+@collapse-content-bg: @component-background;
+
+// Skeleton
+// ---
+@skeleton-color: #f2f2f2;
+
+// Transfer
+// ---
+@transfer-disabled-bg: @disabled-bg;
+
+// Message
+// ---
+@message-notice-content-padding: 10px 16px;
+
+// Motion
+// ---
+@wave-animation-width: 6px;
+
+// Alert
+// ---
+@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
+@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
+@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
+@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
+@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
+@alert-error-icon-color: @error-color;
+
+// List
+// ---
+@list-empty-text-padding: @padding-md;
+@list-item-padding: @padding-sm 0;
+@list-item-content-margin: 0 0 @padding-md 0;
+@list-item-meta-margin-bottom: @padding-md;
+@list-item-meta-avatar-margin-right: @padding-md;
+@list-item-meta-title-margin-bottom: @padding-sm;
+
+/* You can add global styles to this file, and also import other style files */

APP/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

APP/tsconfig.app.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/test.ts",
+    "src/**/*.spec.ts"
+  ]
+}

APP/tsconfig.json

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "paths": {
+      "@pages": ["src/pages"],
+      "@pages/*": ["src/pages/*"],
+      "@widgets": ["src/widgets"],
+      "@widgets/*": ["src/widgets/*"],
+      "@global": ["src/global"],
+      "@global/*": ["src/global/*"],
+      "@assets": ["src/assets"],
+      "@assets/*": ["src/assets/*"],
+      "@components": ["src/components"],
+      "@components/*": ["src/components/*"]
+    }
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}

APP/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

APP/tslint.json

+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "array-type": false,
+    "arrow-parens": false,
+    "deprecation": {
+      "severity": "warning"
+    },
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      false,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "interface-name": false,
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      2000
+    ],
+    "member-access": false,
+    "member-ordering": [
+      false,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-consecutive-blank-lines": false,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      false,
+      "ignore-params"
+    ],
+    "no-trailing-whitespace": false,
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": false,
+    "no-switch-case-fall-through": true,
+    "no-use-before-declare": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "object-literal-sort-keys": false,
+    "ordered-imports": false,
+    "object-literal-shorthand": false,
+    "prefer-for-of": false,
+    "prefer-const": false,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "indent": [false, "spaces"],
+    "jsdoc-format": false,
+    "trailing-comma": false,
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "forin": false,
+    "variable-name": {
+      "options": [
+        "check-format",
+        "allow-leading-underscore",
+        "allow-pascal-case",
+        "allow-snake-case"
+      ]
+    }
+  },
+  "rulesDirectory": [
+    "codelyzer"
+  ]
+}
\ No newline at end of file