前言

摸鱼有感而发，记录和分享我在工作中遇到的一个奇特的组件化项目。

背景

我接手一个新项目的开发，开发之初，技术团队围绕原型稿做代码设计上的讨论，然后我知道不知道谁提出表单组件化设计，意思是我们的业务的申请流程填的表单相对固定，可以抽成组件，以后方便复用（事实证明想多）。听到这我也觉得没什么，后来提到要整个申请流程都做成动态可配置化，比如下图：

设计

一个申请有多个步骤，每个步骤可能有多个不同的表单，然后表单又有自己的多个填写信息的项。我一想虽然挺复杂但也没有太难。然后聊着聊着就不对劲了，后端打算就三个接口，分别是获取场景步骤表单的渲染方式、单独获取某个表单数据的接口、提交整个步骤所有表单的接口。

每次点击下一步就会调一下保存接口，提交当前步骤所有表单的数据，这样即使页面返回，还能点击继续申请回来，这时候就要调获取数据的接口反显数据，每个表单单独请求。

甜蜜的痛苦

既然有表单的填写，那不管是管理员还是用户都能查看详情，肯定有相应的详情页展示，按照传统的思路是前端调用获取详情的接口，然后展示信息。这时候后端来了一句没空做，不如直接复用以前的表单组件？想了一下突然觉得挺好的，然后代码就变成这样：

然后接下来整个项目的所有详情页都类似这样，非常简单，也不用调接口，因为表单组件内置自动获取数据。

为啥是甜蜜的痛苦，因为虽然很方便，但意味着之前很多底层的代码设计都要改动，下面会讲到。

实践

我把实践放在下面是因为技术输出不是我的主要目的，只是想单纯分享下项目的不同之处。下面简单的说一下前端的实践。

场景渲染

首先要封装一个场景组件，可以根据接口返回的数据，渲染相应的步骤条和表单组件 动态渲染组件。

既然要渲染表单组件，肯定要引入，如果采用传统的同步加载，会增加不必要的开销，如果采用异步加载，也不能解决要自己手动写代码引入的麻烦，所以需要自动加载+异步加载，而且新的项目我是用vue3+vite+ts的，以下是我研究出来的方法：

其中../form/*.vue是的意思是form文件夹里面所有的vue文件，我的表单组件全放在这里。然后就是使用component渲染了：

本来一开始在该组件统一遍历请求表单数据，但为了表单组件能在详情页内自动获取数据，所以就改为内置了。

表单组件

随便找个表单组件举例，如下图所示，定个props来控制当前是什么状态，比如apply时，就显示输入框和表单校验，如果是detail就只反显信息，没得输入。

申请页面

引入场景渲染组件：

根据步骤的不同可以通过formParams控制表单组件的状态

后记

实际上，代码迭代了很多版才有目前的效果，大家都是不停摸索改造前进的。给我最大的感受是，当初提出的表单复用并没有在后续别的申请业务中复用，反倒在详情页中复用，项目里面7成代码都是这样，也算是意外的有用。其实前期并没有降低工作量，本质上是从业务工作转移至代码设计工作。 不过通过这次项目也算提升锻炼了自己。 萌新第一次发表文章，如有不对的地方，请多多指教呀~