# XAddNativeForm

动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单


## 何时使用

当需要一个可供新增/修改数据的动态生成的表单时


引用方式：

```javascript
import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'

export default {
    components: {
      XAddNativeForm
    }
}
```



## 代码演示

```html
<x-add-native-form
  ref="nativeForm"
  @onSubmit="submit"/>
```

## 构造参数，通过init方法构造

| 参数              | 说明                   | 类型    | 默认值    |
|-----------------|----------------------|-------|--------|
| formItems       | 表单项集合                | array | []     |
| viewMode        | 是否为预览模式              | bool  | false  |
| isHandleFormKey | 是否对提交表单的key进行处理      | bool  | true   |
| serviceName     | 所属服务模块名              | string | system |
| businessType    | 业务类型（新增/修改）          | string | -      |
| title           | 业务标题                 | string | -      |
| getDataParams   | 调用logic获取下拉框数据源的追加参数 | {}    | -      |
| simpleFormJsonData   | 动态简易表单集合 | {}    | -      |

## 事件
| 事件        | 说明                   | 类型    | 默认值       |
|-----------|----------------------|-------|-----------|
| @onSubmit | 表单的提交事件              | event | -         |

## 例子1
----
```vue
<template>
  <x-add-native-form
    ref="nativeForm"
    @onSubmit="submit"/>
</template>
<script>
  import { getConfigUrl } from '@vue2-client/services/api/common'
  export default {
    created () {
      this.initComponents()
    },
    methods: {
      initComponents() {
        // 获取请求配置中心的地址
        const url = getConfigUrl('yourConfigModuleName')
        post(url, { configName: 'yourConfigName' }).then(res => {
          if (this.$refs.nativeForm) {
            this.$refs.nativeForm.init({
              formItems: res,
              serviceName: 'af-iot',
              businessType: '新增',
              title: '新增告警记录'
            })
          }
        })
      },
      submit (res) {
        post(api.addData, res.realForm).then(data => {
          this.$message.success(res.businessType + '成功！')
        }).catch(e => {
          this.$message.error(res.businessType + '失败：' + e)
        })
      }
    }
  }
</script>
```

## JSON配置示例
----
`这是一个表单配置示例，通过以下配置，你会得到一个有选项的单选框，一个带校验的输入框，以及一个文本域`
```json
[
  {
    "name": "是否通气",
    "model": "is_ventilate",
    "keys": [
      { "label": "是", "value": "1" },
      { "label": "否", "value": "0" }
    ],
    "type": "radio",
    "addOrEdit": "all",
  },
  {
    "name": "处理人",
    "model": "f_processor",
    "rule": {
       "required": true
    },
    "type": "input",
    "addOrEdit": "all",
  },
  {
    "name": "处理内容",
    "model": "f_handle_content",
    "type": "textarea",
    "addOrEdit": "all",
  }
]
```

## JSON配置规范
----
| 参数              | 说明                   | 类型    | 默认值       |
|-----------------|----------------------|-------|-----------|
| name       | 表单项名称                | string | ''        |
| model        | 表单项key              | string  | ''     |
| rule | 表单校验      | json  | {}      |
|   -> required | 是否必填      | bool  | false      |
| type     | 表单类型              | string | input |
| keys     | 当表单类型是select,radio时的选项值     | Array | [] |
|   -> label  | 选项的字面值     | string | '' |
|   -> value  | 选项的实际值     | string | '' |
| addOrEdit    | 新增/修改场景          | string | all         |
|   -> add    | 仅新增          | string | -         |
|   -> edit    | 仅修改          | string | -         |
|   -> all    | 全部支持          | string | -         |


注意事项
----

> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
