ehome-react-webform

左邻移动web端表单展示组件

组件的产生

在pc端的后台管理中，很多应用里面有表单管理的模块，在表单管理中，我们可以查看表单列表，列表展示了该应用下有哪些表单可以使用，例如：请假申请单、加班申请单等。我们通过编辑表单，为表单增加字段，比如姓名(文本输入框)、年龄(数字输入框)、头像(图片选择框)等，设置该表单的字段，并保存。

我们打开对应的APP(例如volgo)，选择相应的模块(例如审批), 就可以看到该应用下有加班申请、请假申请等表单，点击进去可以填写。

这是在移动端使用IOS/Android语言实现的表单填写功能，我们希望能在微信中也能使用表单填写功能，并且在多个应用之间使用，于是就有了ehome-react-webform。

组件的使用场景

当我们通过接口拿到一个表单的详细配置对象，便可以将该对象传递给该组件，组件会负责渲染供用户填写。

使用限制：
该组件只提供渲染展示、填写和字段校验功能，提交操作需业务自己处理。组件会接收一个回调处理函数，将用户填写的数据传递给父组件。

使用示例

import React, { PureComponent } from 'react';
import WebForm from 'ehome-react-webform';

class App extends PureComponent {

  state = {
    namespaceId: 1,
    form: {
      createTime: 1520905881914,
      formFields: [{
        fieldName: "姓名",
        fieldDisplayName: "姓名",
        fieldType: "SINGLE_LINE_TEXT",
        fieldDesc: "提示文案001",
        requiredFlag: 1,
        dynamicFlag: 0,
        visibleType: "EDITABLE",
        renderType: "DEFAULT",
        validatorType: "TEXT_LIMIT",
        fieldExtra: "{\"limitWord\":8}"
      }, {
        fieldName: "性别",
        fieldDisplayName: "性别",
        fieldType: "DROP_BOX",
        fieldDesc: "提示文案002",
        requiredFlag: 1,
        dynamicFlag: 0,
        visibleType: "EDITABLE",
        renderType: "DEFAULT",
        validatorType: "TEXT_LIMIT",
        fieldExtra: "{\"selectValue\":[\"男\",\"女\"]}"
      }]
    }
  }

  comfirm = (values) => {
      console.log(values);
  }

  render () {
    const { form, namespaceId } = this.state;
    let url = 'http://baidu.com/upload/image';
    return <WebForm formData={form} ok={this.comfirm} namespaceId={namespaceId} />;
  }
}

export default App;

组件接收的参数

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | | ---------| ----------------- | ------ | -------------| --------- | | okText | 确认按钮的文字 | string | 提交 | 否 | | ok | 点击确认按钮的回调函数 | function | - | 是 | | formData | 表单对象 | object | - | 是 | | namespaceId | 域空间Id | string|number | - | 是 | | imageUploadUrl | 图片上传的后台接口地址 | string | 无 | 是 | | basicFieldInfo | 若表单字段中有基础字段(姓名、联系电话、企业、楼栋门牌), 则需传值供表单字段默认填充 | obj | 无 | 否 |

其中，formData是满足以下格式的数据:

{
    formFields: [{
        fieldName: 'name',          // 字段名
        fieldDisplayName: '姓名',   // 字段展示名称
        fieldType: 'SINGLE_LINE_TEXT',  // 字段类型
        fieldExtra: '',             // 额外字段, 通过JSON.stringify(obj)转换后的对象，obj中可包含的字段有: limitCount, limitPerSize, limitWord, defaultValue, selectValue, fileExtension, type
        requiredFlag: 1,            // 是否必填, 可取值: 1(必填), 0(非必填)
        visibleType: 'EDITABLE',    // 是否可编辑, 可取值: 'EDITABLE', 'READONLY'
    }]
}

basicFieldInfo是满足以下格式的数据:

{
    userName: '张三',
    userAddress: '2栋902',
    userPhone: '18098752367',
    userCompany: '苹果公司',
}

展示效果如下: