# ng-form-design 表单构建器
ng-form-design 表单绘制组件提供组件列表、绘制面板、属性面板三部分，将组件拖拽至绘制面板后，通过属性配置，最终得到一个动态表单json数据。
## 1、 基础用法
全局安装后直接通过ng-form-design使用：
```
<template>
<div>
<ng-form-design />
</div>
</template>
<script>
export default {
}
</script>
```
## 2、 使用历史已配置好的表单模板
```
<template>
<div>
<ng-form-design ref="formDesign"/>
</div>
</template>
<script>
export default {
created(){
this.init()
},
methods: {
init() {
// 假设此处从后台获取数据
const remoteModel = this.getRemoteModel()
this.$nextTick(()=> {
// 赋值
this.$refs.formDesign.initModel(remoteModel)
})
},
// 获取远程数据
getRemoteModel() {
return ....
}
}
}
</script>
```
## 3、 仅显示部分组件
基础组件仅显示 输入框和文本框，布局组件显示表格布局和栅格布局，装饰组件全部隐藏
```
<template>
<div>
<ng-form-design ref="formDesign" :basic-item="basicItem"
:layout-item="layoutItem" :decorate-item="false"/>
</div>
</template>
<script>
export default {
data() {
return{
basicItem: ['input' , 'textarea'],
layoutItem: ['table' , 'grid']
}
}
}
</script>
```
## 4、 功能按钮组
默认按钮组中只打开preview，其他按钮全部不显示; 使用按钮插槽挂在一个按钮，名字叫做“初始化”
```
<template>
<div>
<ng-form-design ref="formDesign" :clear="false"
:preview="true" :imp="false" :exp="false" >
<template slot="controlButton">
<el-button type="text" size="medium" @click="init()">初始化</el-button>
</template>
</ng-form-design>
</div>
</template>
<script>
export default {
methods: {
init() {
console.log('初始化')
}
}
}
</script>
```
## 5、 config配置
表单对数据字典，axios后台请求均可以自定义配置，其中数据字典的配置为传递字段数据值，axios请求配置为配置函数。
### 5.1 axios请求
当checkbox、select、文件上传等组件需要和后台产生交互时，可以配置axios的header来达到后台鉴权等操作。
具体使用方法在config中增加httpConfig的配置，内部为一个函数，规格如下：
```
httpConfig: (config)=>{
// 此处可以通过本地方法拿到token等信息来放入请求头中
const token = 'xxxxx'
config.headers['token'] = token
return config
}
```
完整代码示例如下:
```
<template>
<div>
<ng-form-design ref="formDesign" :config="formConfig" >
</ng-form-design>
</div>
</template>
<script>
import { getTokenKey , getToken } from '@/utils/auth.js'
export default {
data() {
return {
formConfig: {
httpConfig: (config)=>{
const token = getToken()
const key = getTokenKey()
config.headers[key] = token
return config
}
}
}
}
}
</script>
```
### 5.2 数据字典
组件中对下拉框、单选框、多选框提供可选的数据字典配置，方便应用进行业务集成。其中数据字典需要配置进入动态表单中；数据格式参考：
```
[
{
type: 'sex' ,
label: '男' ,
value: '1'
},
{
type: 'sex' ,
label: '女' ,
value: '2'
},
......
]
```
完整代码示例如下:
```
<template>
<div>
<ng-form-design ref="formDesign" :config="formConfig" >
</ng-form-design>
</div>
</template>
<script>
export default {
data() {
return {
formConfig: {
// 数据字典配置
// 此处可先后台获取需要的字典后配置
dict: [
{type: 'sex' , label: '男' , value: '1'},
{type: 'sex' , label: '女' , value: '2'},
{type: 'yes_or_no' , label: '是' , value: '1'},
{type: 'yes_or_no' , label: '否' , value: '2'},
{type: 'nation' , label: '汉族' , value: '1'},
{type: 'nation' , label: '蒙古族' , value: '2'},
{type: 'nation' , label: '藏族' , value: '3'},
{type: 'nation' , label: '壮族' , value: '4'}
]
}
}
}
}
</script>
```
## 6、 方法
| 方法名称 | 参数|返回值| 说明 |
|-----------|--------|-------|-------------------------|
| initModel | json | N/A | 初始化动态表单内容，参数为动态表单json模板|
| getModel| N/A| json | 返回当前正在编辑得动态表单信息|
## 7、 属性
| 属性名 | 说明 | 格式| 默认值 |
|-----------|------------------------------|--------|----------|
| customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |
| config|表单的一些基础配置，主要为http的一些参数,譬如在http请求中给header增加参数：config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }| object | N/A |
| clear| 是否显示面板上清除按钮 |boolean | true |
| preview| 是否显示面板上预览按钮 |boolean | true |
| imp| 是否显示面板上导入按钮 |boolean | true |
| exp| 是否显示面板上导出按钮 |boolean | true |
| basic-item| 基础组件是否要展示或待选组件列表集合 |boolean/Array | true |
| decorate-item| 个性化组件是否要展示或待选组件列表集合 |boolean/Array | true |
| layout-item| 布局组件是否要展示或待选组件列表集合 |boolean/Array | true |
| application-item| 应用组件是否要展示或待选组件列表集合 |boolean/Array | true |
## 8、 插槽
| 插槽名称 | 说明 |
|-----------|-------------------------|
| drag | 左侧组件面板插槽，可以在组件面板上面填充一个区域展示内容|
| form-name | 当前动态表单名称|
| control-button | 功能区按钮,如果需要自定义功能按钮可以在这里自定义 |