# XForm

动态表单控件，根据JSON配置生成一个完整的动态表单


## 何时使用

当需要一个动态生成的表单时


引用方式：

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

export default {
    components: {
      XForm
    }
}
```



## 代码演示

```html
<x-form
  :json-data="json"
  :isExports="true"
  @onSubmit="onSubmit">
</x-form>
```

## API

| 参数        | 说明                       | 类型      | 默认值  |
|-----------|--------------------------|---------|------|
| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
| isExports | 是否显示导出按钮                 | Boolean | true |
| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
| @onSubmit | 表单的提交事件                  | event   | -    |

## 例子1
----
（基础使用）

```vue
<template>
  <x-form
    v-if="loaded"
    :json-data="formItemJson"
    :isExports="false"
    @onSubmit="onSubmit">
  </x-form>
</template>

<script>
  import XForm from '@vue2-client/base-client/components/XForm/XForm'

  export default {
    components: {
      XForm
    },
    data () {
      return {
        // 加载查询参数JSON配置文件是否完成
        loaded: false,
        // 从查询参数JSON配置中得到的生成表单的JSON
        formItemJson: undefined,
        // 表单
        form: {}
      }
    },
    created () {
      this.getQueryJson()
    },
    methods: {
      // 加载查询参数JSON配置文件
      getQueryJson () {
        this.formItemJson = [
          {
            "name":"燃气公司",
            "keyName":"orgList",
            "model":"orgName",
            "placeholder":"请选择",
            "type":"select"
          },
          {
            "name":"用户地址",
            "model":"f_address",
            "type":"input"
          },
          {
            "name":"指令类型",
            "keyName":"指令类型",
            "model":"f_instruct_type",
            "placeholder":"请选择",
            "type":"select"
          },
          {
            "name":"指令说明",
            "model":"f_instruct_title",
            "placeholder":"请输入指令说明",
            "type":"input"
          },
          {
            "name":"指令状态",
            "keyName":"指令状态",
            "model":"f_instruct_state",
            "placeholder":"请选择",
            "type":"select"
          },
          {
            "name":"响应结果",
            "model":"f_receive_state",
            "placeholder":"请输入响应结果",
            "type":"input"
          },
          {
            "name":"生成时间",
            "model":"f_instruct_date",
            "type":"rangePicker"
          },
          {
            "name":"操作人",
            "model":"f_inputtor",
            "placeholder":"请输入操作人员",
            "type":"input"
          }
        ]
        this.loaded = true
      },
      // 表单提交方法
      onSubmit (res) {
        // 如果通过校验
        if (res.valid) {
          // 表单赋值
          this.form = res.form
        } else {
          return false
        }
      }
    }
  }
</script>
```

注意事项
----

> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
>
> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置，如下：
```vue
<script>
  import { commonApi } from '@vue2-client/base-client/api/common'
  import Vue from 'vue'

  export default {
    data () {
      return {
        // 查询配置文件名
        queryParamsName: 'instructQueryParams'
      }
    },
    methods: {
      getConfig () {
        Vue.resetpost(commonApi.getConfig, {str: this.queryParamsName}).then((res) => {
          this.formItemJson = res.formJson
          this.columnItemJson = res.columnJson
          this.loaded = true
        })
      }
    }
  }
</script>
```
