yunzai-adf

Yunzai Angular Dynamic Form

云在angular动态表单

版本说明

yunzai-adf@8 -> angular@8

前置依赖

# 电脑端使用
ng add ng-zorro-antd@8
ng add yunzai8
npm install ng-zorro-antd-mobile@1
npm install @delon/abc@8 @delon/chart@8 @delon/form@8 ajv@6 @types/ajv@1 @nowzoo/ngx-ace angular-bigscreen @tinymce/tinymce-angular@3 tinymce@5

# 手机端使用
ng add ng-zorro-antd-mobile@1
ng add ng-yunzai-mobile
npm install ng-zorro-antd@8
npm install @delon/abc@8 @delon/chart@8 @delon/form@8 ajv@6 @types/ajv@1 @nowzoo/ngx-ace @tinymce/tinymce-angular@3 tinymce@5

安装

npm install yunzai-adf@8

配置

将tinymce的中文包放到此位置

下载地址

src/assets/tinymce/langs/zh_CN.js

修改配置文件angular.json

    "assets": [
        { "glob": "**/*", "input": "node_modules/tinymce", "output": "/assets/tinymce/" },
        { "glob": "**/*", "input": "src/assets/tinymce/langs", "output": "/assets/tinymce/langs/" }
    ],
    "scripts": [
        "node_modules/ajv/dist/ajv.bundle.js",
    ]

修改配置文件shared.module.ts

引入NgxAceModule

    @NgModule({
      imports: [
        NgxAceModule.forRoot()
      ],
      exports: [
      ]
    })
    export class SharedModule {
    }

引入需要的模块

import {YunzaiAdfListModule} from 'yunzai-adf';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...,
    YunzaiAdfListModule
  ]
})
export class YourModule {
}

引入组件

<div>
  <yzadf-list [formId]="formId"></yzadf-list>
</div>

模块说明

模块	说明
YunzaiAdfFormModule	PC端-表单管理（包含表单设计）
YunzaiAdfDesignModule	PC端-表单设计
YunzaiAdfListModule	PC端-表单数据（包含筛选、新增、修改、删除、提交审核、导出等）
YunzaiAdfMetaDataTableModule	PC端-元数据模块
YunzaiAdfFormMobileModule	手机端-表单列表
YunzaiAdfListMobileComponent	手机端-表单数据列表
YunzaiAdfDetailMobileModule	手机端-表单数据详情
YunzaiAdfWidgetModule	自定义组件集合

自定义组件说明

标识	说明
yz-demo	示例组件
yz-select-remote	下拉框组件（加载远程数据）
yz-file-upload	文件上传组件
yz-mobile-picker	手机端-选择组件
yz-mobile-date-picker	手机端-日期选择
yz-mobile-time-picker	手机端-时间选择
yz-rich-editor	富文本编辑器（tinymce）

组件参数说明

参考项目angular-dynamic-form源码