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源码