cheeseamis实现一个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 /> ); }