zorro-ext

some business components and common components used by 1ziton developer

Usage no npm install needed!

<script type="module">
  import zorroExt from 'https://cdn.skypack.dev/zorro-ext';
</script>

README

现有业务组件

以下是对现有业务组件功能点，对应使用 ZORRO 组件封装说明。为了便于区分，公司内部扩展的业务组件都统一 yzt- 前缀，二次开发组件都在文档的 YztUIComponent 和 YztBusinessComponent 两个分类下

  • ui-select-box UISelect (TODO:样式统一风格，或优化细节等)
  • 日期选择 nz-datepicker
  • yzt-grid 表格 nz-table (扩展支持现有系统的悬浮列弹窗查询、图标等功能）
  • yzt-upload 图片&文件上传 (nz-upload ）
  • yzt-area 地址选择
  • yzt-area-multiple (用现有地址选择组件，修改样式统一风格，或优化细节等）
  • 区域树 (zorro v0.6.10 缺失tree组件）
  • 字典选择 nz-select 扩展
  • yzt-department nz-select (扩展自定义模板)
  • yzt-shipper 发货人选择 nz-select 扩展
  • yzt-cnee 收货人选择 nz-select 扩展
  • yzt-abnormal 异常类型选择 UISelect扩展
  • yzt-master 师傅名称/账号 nz-select 扩展
  • yzt-good 品名选择 nz-select 扩展
  • yzt-repair-goods 维修品名 nz-select 扩展
  • yzt-viewer 图片预览组件 （可用现有指令Viewer）
  • [echarts] Echarts指令
  • G2指令 （可扩展封装：https://antv.alipay.com/zh-cn/g2/3.x/index.html ）

TODO

记录自定义组件未修复及可以优化的地方

  • 拖拽表格至边缘会出现1像素震动 (drag-box.directive.ts)
  • viewer预览组件可以扩展支持缩略图 (yzt-viewer.directive.ts)
  • select扩展加载下拉数据loading提示动画 (yzt-viewer.directive.ts)
  • ui-select-box 组件样式、细节需优化，优化后影响的组件将有yzt-area、yzt-abnormal

Features（0.0.3）

  • yzt-grid组件分页bug修复
  • 选择类组件，支持回显功能

Environment Support

  • Modern browsers and Internet Explorer 9+（with polyfills）。

Angular Version Support

  • Angular^5.0.0

Install

$ npm install zorro-ext --save

Sample Usage

add scripts ace-builds in your index.html or angular-cli.json

eg:

    <script src="./assets/ace-builds/src-noconflict/ace.js"></script>

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    import { AppComponent } from './app.component';
    import { YztCustomModule } from 'zorro-ext-subin';
    import { NgZorroAntdModule } from 'ng-zorro-antd';
    import { HttpModule } from '@angular/http';
    import { RouterModule, PreloadAllModules } from '@angular/router';
    import { FormsModule } from '@angular/forms';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot([], { useHash: true, preloadingStrategy: PreloadAllModules }),
        YztCustomModule.forRoot(API, 'URL') // 由于YZT组件依赖网络请求服务，必须在外部项目导入API服务及请求地址，保持npm包纯净
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Important pieces to note in the AppModule: FormsModule、HttpModule、RouterModule、YztCustomModule is required in you angular project.

You can import independent component like CitySelectComponent in your module.

Notice

If you use viewer component, you should add scripts viewer.js and styles viewer.css in your index.html or angular-cli.json It is the same usaged by echarts and lodash

API service is specific newwork request, it`s used by specific developer