cheese/amis实现一个form渲染的简易分析

技术栈：vue/mtd-vue
其它渲染分析见 AMIS实现渲染一个button的源码分析-Vue

一、schema

{
      "type": "form",
      "title": "",
      "api": "get:/mock/saveForm?a=11",
      "mode": "horizontal",
      "actions": [
        {
          "type": "submit",
          "label": "提交"
        }
      ],
     "controls": [
            {
              "label": "姓名",
              "name": "name1",
              "required": true,
              "type": "text"
            }
          ]
    }

二、form渲染器

通过schema中type=form找到form渲染器，开始渲染。

Form/index.tsx

@registRenderer({
  name: 'form',
  test: /(?:^|\/)form$/,
})

mounted () {
	// 暂存当前渲染器，以便运行时操作
	this.scoped && this.scoped.registerComponent(this);
}
beforeDestroy() {
    this.scoped && this.scoped.unRegisterComponent(this);
  }

render () {
	// this.$props.config
	 return (
      <RenderNode
        props={{
          path:  'panel-form' ,
          schema: {
            ...this.$props.config,
            name: name && `basic-form-${name}`,
            data: null,
          },
          onSubmit: this.handleFormSubmit, // 传递submit时的函数
          onRequestAction: this.handleFormAction // 表单处理的action
        }}
      ></RenderNode>
    )
}

三、找到panel-form并渲染

这里会渲染两个大组件：button和basic-form。
通过schema.actions渲染button等操作组件；
通过schema.controls渲染form、form-item。

其中button为一个普通组件，将form信息和onSubmit方法传入，就可处理form提交操作。
basic-form为一个FinalForm组件(引自vue-final-form包)包裹着mtd-form，校验使用FinalForm，样式item使用mtd-form。

basic-form.tsx
render () {
	return (
      <FinalForm
        ref={'finalForm'}
        {...finalFormConf} // finalFormConf 包含mtd-form
      />
    );
}