# 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 | 功能區按鈕,如果需要自定義功能按鈕可以在這里自定義 |