表单设计器

npm：cgkj-form-generator - npm (npmjs.com)

1. 使用

1.1 设计器 Design

引用方式

import { Design } from 'cgkj-form-generator';

<Design @save="handleSave" :formJson.sync="formJson" :formConf.sync="formConf" />

handleSave({formJson, formConf}){
    ......
}

参数

| 参数名 | 类型 | 必填 | 默认值 | 备注 | | -------- | ------ | ---- | --------------- | ------------------------------- | | formJson | Array | 否 | | 表单项 json，必须加修饰符.sync | | formConf | Object | 否 | defaultFormConf | 表单整体配置，必须加修饰符.sync |

事件回调

| 事件名 | 回调参数 | 说明 | | ------ | ------------------------------ | -------------- | | save | function({formJson, formConf}) | 保存表单的回调 |

2.2 渲染器 Parser

引用方式

import { Parser } from 'cgkj-form-generator';

  <Parser    
	:formConf="formConf"
    :formJson="formJson"
    :formModel="formModel" 
  />

参数

| 参数名 | 类型 | 必填 | 默认值 | 备注 | | --------- | ------ | ---- | ------ | ----------------------- | | formJson | Array | 是 | | 表单项 json | | formConf | Object | 是 | | 表单整体配置 | | formModel | Object | 是 | | 表单model（各字段的值） |

方法

| 方法名 | 参数 | 说明 | | -------- | -------------------------------------------- | ------------------------------------------------------------ | | validate | Function(callback: Function(boolean,object)) | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和表单model |

2. 开发

2.1 概述

​ 引用的部分aiurt-vue组件在dev时有异常尚未解决（好在lib下没问题）

2.2 新增组件

1. 在src\components\generator\config中定义组件配置，在src\components\generator\config\index.js中导出。

   

2. 在src\components\generator\config.js中引入组件，并进行分类。

3. **需要注意：**组件的配置方案见代码，是否兼容右面板和渲染器因组件而异，不满足的需进行合理开发。