Sula插画.png

Sula 是一个面向前端中台的 产品级 配置化框架，希望帮助非专业前端同学可以最小学习成本开发高质量、高体验的前端中台产品。

表单 - 前端同学永远的痛

稍微列列：

  • 各种稀奇古怪的表单组件
  • 表单组件间的关联关系千奇百怪
  • 动态生成表单模板
  • 创建表单、编辑表单、查看表单，查看表单变编辑表单……

不就是一些输入框、下拉框吗，前端一把辛酸泪……

antd4.0 form 愈发强大，但面对一大把的表单页，总有那么些场景让人大把掉头发。

试试 Sula CreateForm 帮你守护头发。

完整例子请 移步

场景1 三合一（新建、编辑、查看）表单

通过 mode 来实现一套表单配置应对三种场景，
image.png
操作按钮变化
image.png
表单组件disabled
image.png

场景2 自定义表单操作按钮

通过 actionsRender 自定义，

实现一个和Submit功能一致的自定义按钮
image.png
image.png

场景3 表单组件间的显示关联

通过 dependeny.visible 实现显示关联配置

选择性别女时，填写喜欢足球的原因
image.png
image.png
调查问卷不显示时请求参数自动过滤
image.png

场景四 自定义表单组件关联

构想一个奇葩的关联场景，如果选择性别女，且后端返回 {hello: ‘world’} 时，调查问卷填写“喜欢中国女足”

返回匹配
image.png
image.png

场景1 如何实现

通过mode实现三合一

  1. const render = <CreateForm mode={mode} /> // create, edit, view

场景2 如何实现

通过 actionsRender 实现自定义表单操作按钮

  1. const actionsRender=[
  2.             {
  3.               type: 'button',
  4.               props: {
  5.                 children: 'Custom',
  6.               },
  7.               action: [
  8.                 'validateFields',
  9.                 {
  10.                   url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
  11.                   method: 'POST',
  12.                 },
  13.                 () => console.log('Finished!!!')
  14.               ],
  15.             },
  16.           ]

场景3 如何实现

relates代表影响其关联性的组件name，支持多个影响一个，因此为数组；inputs代表影响其关联的值列表，二位数组中的每个数组对应一个name的值列表；output为inputs值匹配后的输出，即gender组件值为female时，questionnaire显示。

  1. const depConfig = {
  2.               name: 'questionnaire',
  3.               label: '调查问卷',
  4.               field: {
  5.                 type: 'textarea',
  6.                 props: {
  7.                   placeholder: 'why do you like football?',
  8.                 },
  9.               },
  10.               initialVisible: false,
  11.               dependency: {
  12.                 visible: {
  13.                   relates: ['gender'],
  14.                   inputs: [['female']],
  15.                   output: true,
  16.                   defaultOutput: false,
  17.                 },
  18.               },
  19.             },

场景4 如何实现

通过自定义关联插件的 ctx.form 实例实现表单组件的精细控制

  1. const customDepConfig = {
  2.               name: 'questionnaire2',
  3.               label: '调查问卷2',
  4.               field: {
  5.                 type: 'textarea',
  6.                 props: {
  7.                   placeholder: 'why do you like football?',
  8.                 },
  9.               },
  10.               dependency: {
  11.                 value: {
  12.                   relates: ['gender'],
  13.                   type: (ctx) => {
  14.                     if (ctx.values[0] === 'female') {
  15.                       request({
  16.                         url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
  17.                         method: 'POST',
  18.                       }).then((data) => {
  19.                         if (data.hello === 'world') {
  20.                           ctx.form.setFieldValue(ctx.name, '喜欢中国女足');
  21.                         }
  22.                       });
  23.                     }
  24.                   },
  25.                 },
  26.               },
  27.             },

总结一下

  • CreateForm 通过 mode 实现三合一表单
  • 通过dependency来实现表单关联
  • 通过actionsRender实现自定义表单操作按钮

由于Form相关的点太多，该篇只作为了解与入门，有关Form的更多高阶知识将单开一篇文章。

康康 Sula

当前 Sula 1.0 还处于起步阶段（alpha 请不要在生产环境使用），如果你对 Sula 的开发模式感兴趣请扫码入群，欢迎多提宝贵意见，帮助 Sula 快速成长。
image.png