Formily教程 | formily是中后台复杂场景的表单解决方案

Fannie酱
12,637 阅读3分钟

前言

formily 不是一个简单的前端轮子。Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案，它也是一个表单框架。它的前身是供应链平台在 2019 年初对外开源的 UForm 解决方案，UForm 的前身又是在供应链平台内部自研的某个表单框架。总体来看，Formily 是一个经过了漫长时间所磨炼，沉淀出来的表单解决方案。

它解决什么问题？

如果你们的后台有超级多的表单，那么选它没得问题。中台我觉得是一个复杂的概念，如果你们公司一直说这个事儿，那么这个formily可以是你的技术池（备胎）。它有复杂的表单联动，表单校验，满足大部分表单的需求，平时使用的都是非常简单的表单。一份JSON就可以实现复杂的表单，开箱即用。

开箱即用的栗子

说实话，这玩意唯一的缺点不是文档写的不好，而是不管用VUE人的死活。除了@formily/vue里面的栗子用了VUE，其他的所有栗子都是React。一个表单提交，我整整花了两个小时（是我菜了），下面我会重点提出来的。npm啥的我就不说了。官方文档都有 注意: 这里的技术栈是 VUE + Formily + element UI

// form.vue 
<template>
  <ElForm class="flex flex-column" label-width="180px">
    <FormProvider :form="form">
      <SchemaField
        :schema="schema"
      />
      <FormConsumer>
      <!-- 非常重要！！！！ FormConsumer必须是这个位置 才能表单消费 -->
      <template #default="{ form }">
          <button @click='form.submit'></button> //官方文档根本不管VUE的死活在这里！！！
      </template>
    </FormConsumer>
    </FormProvider>
  </ElForm>
</template>

<script>
import { createForm, onFormValuesChange, onFormSubmit } from '@formily/core' //必须要引入
import { FormProvider, createSchemaField, FormConsumer } from '@formily/vue' //vue
import { Input } from 'element' //初次上手建议 就直接引用element UI 组件就可以了

const { SchemaField } = createSchemaField({
  Input
}) //代表你需要这个生成器给你生成什么样的表单组件

export default {
    components: { FormProvider, SchemaField, FormConsumer },
    data() {
        return {
            form: createForm({effects: this.useEffects}), //生成表单的方法，传入监听的参数
            schema: null
        }
    },
    mounted() {
        this.schema = {
            type: 'object',
            properties: {
              name: {
                type: 'string',
                title: '名称',
                required: true,
                'x-component': 'Input'
              }
            }
        }
    },
    methods: {
        useEffects() {
          onFormValuesChange(form => { //监听数据变化了
            console.log(form) //这个form 很重要 这里你才能够拿到表单的值
          })
          onFormSubmit(form => { //监听表单提交
            console.log(form)
          })
        },
    }
}

避雷指南

我非常理解一个坑对于做这个功能的人，有多么令人崩溃。官方文档的栗子，要么没有告诉你怎么提交的，要么就是拿着@formily/nextSubmit，@formily/next 是基于 Fusion Design 封装的针对表单场景专业级(Professional)组件库。但我们不是有了element UI 组件了吗？大可不必

image.png

schema select demo

selecttype: {
  type: 'string',
  title: '连接类型',
  required: true,
  default: 'source',
  enum: [
    {
      label: '源',
      value: 'source'
    },
    {
      label: '目标',
      value: 'target'
    },
    {
      label: '源&目标',
      value: 'source_and_target'
    }
  ],
  'x-decorator': 'ElFormItem',
  'x-component': 'RadioTipGroup' //这是我们自己写的UI 组件 element的radio-group 只是二次封装了一下
},

分割线

上百个表单的业务已经完成了，不得不说Formily真的好用！而且真没有那么复杂，当然复杂的校验规则没有实现，只有简单的表单渲染，简单的联动关系。但比我们自己写的表单生成器好很多。后续应该会有更多深入使用这个插件，到时候再会啦（2021/8/20）

总结

这是一个非常入门级的源码，而且我的业务才刚刚开始做，上百个表单等我实现，应该还有下一个避雷指南。而且对于element 二次封装也很可以。复杂的表单有复杂的UI，不是一个element 单一组件就可以漂亮实现。下一期介绍formily 的一些概念，虽然我也是临时抱佛脚，周末学习了formily,大家一起探讨。不知道掘金有没有问题答疑~我是真的没有看到有很多formily文章输出

avatar
文章
阅读
粉丝