点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
本文用于复盘之前实现的表单生成器需求，记录整体的思路，由于开发时间只有20多天不到一个月，成品比较粗糙，请见谅。
效果展示
需求
上面的视频就是最终完成的效果，还存在一些瑕疵，比如拖拽样式优化、input组件后缀样式优化等。
首先「表单生成器页面」分为上下两个部分：
上层：标题、首页附页切换、保存功能
下层：表单生成器
左侧：数据项配置
中间：面板显示
右侧：表单项设置
各自的功能为：
上层：切换首页附页、校验并保存已配置表单，首页附页分开保存
下层：
左侧部分：模块和子项均支持增删改，模块可折叠和展开，点击子项或模块同步显示到中间面板，也可拖动到中间面板
中间部分：显示最终表单效果，组件hover和选中效果，可删除，可拖动调整位置；最终的表单类型只有五种（输入、单选、日期、下拉、表格）
右侧部分：整体表单设置和具体的组件设置
其次为「表单回显页面」，包含数据回填、必填校验、联动显隐、数据提取并保存功能。
心理活动
当开完需求会的时候，我意识到这个需求的复杂程度不低，此时的我有一点慌🙂；当我询问时间期限的时候，告知我就是这个月底（我是5月6号接到的需求），此时的我感觉慌了🙃；当我再询问这个需求的人员投入的时候，告知我只有我一个前端来处理这个需求，此时的我，已经准备充boss直聘VIP了💀...
开玩笑归开玩笑，该做还得做。其实某些东西是看着大，但很多都是附加功能，只要把核心功能梳理出来，其余的慢慢加就行了。
分析
消化这个需求之后，我暂时没有头绪来处理。我知道这时候我要先去寻找类似的产品取取经。最终我找了Vben开源项目，其中有这个模块实现，如下图：
其中的核心功能是一致的，在思索几番之后，我准备先研究一下开源项目这个模块的实现。以下是研究结果：
拖拽使用VueDraggablePlus实现
数据结构总体为一个
form对象，对象中包含控制form的属性和一个表示表单项的数组，每一个表单项有唯一ID，表单项中内容为表单项配置属性显示面板渲染逻辑：
层级：
form->VueDraggable(v-for)->DisplayItem(表单项组件) ->Vue component(利用is属性) -> 自定义组件逻辑：最外层是
form组件，form组件中渲染VueDraggable组件，VueDraggable循环渲染自定义的表单项包装组件DisplayItem，DisplayItem中渲染Vue component组件，利用component的is属性来渲染自定义组件配置面板渲染逻辑：利用
Vue component组件的is属性来渲染自定义组件展示组件和配置组件是配对关系
拖拽表单项、点击新增表单项、删除表单项本质上是表单项数组内「数据」的顺序变化、新增和删除
数据结构是核心，数据结构对应页面结构
关键步骤
看似比较大的系统，只要保持耐心，先把主干建立起来，然后逐渐丰富，就能够实现，关键步骤如下：
拖拽
这里的拖拽，使用vue-draggable-plus插件来实现，有三种使用方式：
组件使用
函数使用
指令使用
在本次案例中使用的是组件方式，案例中从左侧拖拽到中间面板的行为其实是双列表匹配，官方文档中也有示例，基本使用例子如下：
<template><div class="flex"><VueDraggableclass="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"v-model="list1"animation="150"ghostClass="ghost"group="people"@update="onUpdate"@add="onAdd"@remove="remove"><divv-for="item in list1":key="item.id"class="cursor-move h-30 bg-gray-500/5 rounded p-3">{{ item.name }}</div></VueDraggable><VueDraggableclass="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"v-model="list2"animation="150"group="people"ghostClass="ghost"@update="onUpdate"@add="onAdd"@remove="remove"><divv-for="item in list2":key="item.id"class="cursor-move h-30 bg-gray-500/5 rounded p-3">{{ item.name }}</div></VueDraggable></div><div class="flex justify-between"><preview-list :list="list1" /><preview-list :list="list2" /></div></template><script setup>import { ref } from 'vue'import { VueDraggable } from 'vue-draggable-plus'const list1 = ref([{name: 'Joao',id: '1'},{name: 'Jean',id: '2'},{name: 'Johanna',id: '3'},{name: 'Juan',id: '4'}])const list2 = ref(list1.value.map(item => ({name: `${item.name}-2`,id: `${item.id}-2`})))function onUpdate() {console.log('update')}function onAdd() {console.log('add')}function remove() {console.log('remove')}</script>
如代码所示，只需保证两个列表的group属性的值一致以及数据结构一致即可；
由于实际需求中，只需要从左侧拖拽到中间，并不需要从中间拖拽回去，所以为了规避这种行为，需要给左侧的group属性设置为以下内容:
// DraggableGroup 是定义的字符串// pull 从列表中移动的能力。克隆——复制项目，而不是移动。// put 是否可以从其他列表中添加元素，或者可以从中获取元素的组名数组。:group="{ name: DraggableGroup, pull: 'clone', put: false }"
更多插件API请点击这里
解决了双向拖拽列表之后，此时出现了一个新的问题，左侧的内容是一个树，不是一个扁平的数组，同样要实现拖拽，如下图：
插件也考虑到了这一点，可以实现嵌套的功能，官网嵌套示例；逻辑就是组件自调用。
数据转换为组件
实现了拖拽的需求之后，下一步就是实现从左侧拖拽到中间面板显示为自定义组件。经过上面的步骤之后，就能够知道拖拽本质上是数据的clone和数组中顺序变化，那么从左侧拖拽过来形成组件，也就是要把这个数据转换成组件。
「数组结构」、「数组每一项代表组件的属性」、「数据转换为组件」，这三个关键词加在一起，很自然就能想到v-for渲染，由于要实现的组件有五种类型，但是数组的每一项结构是一致的，所以需要一个包装组件，我这里命名为DisplayItem，再在DisplayItem中使用component的is属性来生成不同类型的组件。图示如下：
定义数据结构
由于是数据形成组件，所以要先定义数据结构。到这一步，我先把原型里面的表单的功能和五种组件的功能进行了整理：
表单：
表单布局调整
控件尺寸调整
表单项：
标签修改
宽度设置
数据项来源设置
隐藏规则设置
是否必填
组件类型导致的配置（日期类型、下拉值、表格列等）
结合Vben中对应的表单结构和表单项结构，定义出了以下结构：
/** 代码块 1 **/// 当前表单的默认配置export function createFormConfig(schemas = []) {return {// 行内表单模式inline: true,// 表单域标签的位置 right/left/top，固定right"label-position": "right",// label-width 表单域标签的宽度，例如 '50px'"label-width": "200px",// 用于控制该表单内组件的尺寸 medium / small / minisize: "small",// 表单配置数组，每一项代表一个组件schemas,// 当前选中的控件currentItem: null};}/** 代码块 2 **/// 新增模块schema，是上面schemas中的一项export function addModule(label) {return {// 唯一ID，用于绑定值id: creatUuid(),// 模块名label,// 默认展开collapse: true,// 独占一行row: true,// 组件类型componentType: FORM_TYPE_TITLE,// 组件信息component: null,// 配置组件类型componentConfigType: FORM_CONFIG_TITLE,// 子项children: []};}// 新增数据项schema，是上面schemas中的一项export function addDataItem(label, componentType, parentID) {return {// 唯一ID，用于绑定值id: creatUuid(),// 模块名label,// 默认展开collapse: true,// 独占一行row: componentType === FORM_TYPE_TABLE,// 组件类型componentType,// 组件信息component: getItemAttr(componentType),// 配置组件类型componentConfigType: componentTypeToConfig(componentType),// 父项parentID,// 子项children: null};}/** 代码块 3 **/// 展示时的控件export const FORM_TYPE_DATE = "display-date";export const FORM_TYPE_RADIO = "display-radio";export const FORM_TYPE_SELECT = "display-select";export const FORM_TYPE_INPUT = "display-input";export const FORM_TYPE_TABLE = "display-table";export const FORM_TYPE_TITLE = "display-title";// 配置时的控件export const FORM_CONFIG_DATE = "config-date";export const FORM_CONFIG_RADIO = "config-radio";export const FORM_CONFIG_SELECT = "config-select";export const FORM_CONFIG_INPUT = "config-input";export const FORM_CONFIG_TABLE = "config-table";export const FORM_CONFIG_TITLE = "config-title";// 五种控件的组件信息，对应上面的component属性export const ItemAttrs = {// 日期时间[FORM_TYPE_DATE]: {// 组件宽度width: 200,// 传给给组件的属性，默认会把所有的props都传递给控件componentProps: {placeholder: "请选择日期",type: "date",// 显示在输入框的结构format: "yyyy-MM-dd",// 最终值的结构"value-format": "yyyy-MM-dd"},// 组件选项options: [],// 数据来源componentData: {// 对应表tableName: "",// 对应的字段fieldName: ""},// 是否隐藏hidden: false,// 组件显隐规则hiddenRules: [],// 是否必选required: false,// 必选提示message: "数据缺失",// 组件校验规则validateRules: []},.....剩下4种}
设计组件结构
定义好数据结构之后，先不着急实现组件，因为这个层级和逻辑比较复杂，最好是先把组件结构和组件抽离处理了；结合原型图，一共要处理三类组件：
布局组件
左侧数据项面板
中间展示面板
右侧配置面板
展示组件
五种类型展示组件
配置组件
表单配置组件
组件配置组件（五种类型配置组件）
用于处理表单相关的数据和处理函数封装到一个js文件中
最终要实现的最外层组件结构如下所示：
<template><div class="main-page"><BaseBox class="box"><data-item-panel @addSchema="addSchema" /></BaseBox><BaseBox class="box"><display-panel:formConfig="formConfig":formData="formData":IDMap="IDMap":currentItem="currentItem"@setCurrentItem="setCurrentItem"@deleteCurrentItem="deleteCurrentItem"/></BaseBox><BaseBox class="box" full><config-panel:formConfig="formConfig":currentItem="currentItem"@changeFormConfig="changeFormConfig"@changeSchema="changeSchema"/></BaseBox></div></template>......
详细的总体结构图如下：
实现组件
到这一步就是实现组件，在实现组件的过程中，除了一般的业务处理，有几个点值得注意：
| 注意点 | 说明 |
|---|---|
| 数据控制 | 整体数据控制在最上层，formConfig(表单内容)使用prop传递给子组件，子组件更改操作通知到最上层组件处理，保证数据流向正确和页面实时更新 |
| 显示当前选中的表单项的匹配的配置组件 | 面板中点击选中表单项时给formConfig的currentItem属性赋值，配置面板根据currentItem中的「配置组件类型」属性，在右侧显示相应类型的配置组件 |
| 表单数据为空提示 | 配置了required: true的组件，利用el-form-item的error属性提示错误信息 |
| 显隐规则 | 通过方法将显隐规则数组最终转换为布尔值，结合v-if实现显示隐藏 |
| 表单数据回显 | 利用每个组件的唯一id来达到绑定表单数据的目的 |
| 表单配置保存校验 | 定义校验函数，收集配置错误信息，点击保存时弹出错误信息表格提示用户 |
实际实现路径
在经过上面的步骤之后，「表单生成器页面」完成了，剩下的就是处理表单回显页面和其他页面；表单回显页面其实就是之前写的display-panel组件，所以剩下的内容比较轻松，就不赘述了。
在这里我梳理了完成这个需求的实际步骤，从零到一，慢慢丰富内容：
熟悉需求
了解相似的产品实现
先处理表单生成器页面
按照原型图还原整体页面
先处理左侧部分的增删改逻辑、折叠展开逻辑
实现左侧部分拖拽到面板的逻辑
实现面板内拖拽逻辑
定义数据结构(表单、表单项)
实现拖拽到面板生成组件逻辑
用一个input类型组件贯穿从左侧拖拽到中间，再到右侧配置的总流程
添加其他四个类型的组件逻辑
处理校验
处理联动显隐
再处理表单回显提取数据页面
定义数据回显规则
接口联调
关键源码
关键代码文件思维导图，如下：
由于这部分的代码比较多，直接粘贴在博客上，会有较大的阅读心智负担，所以我将代码放到了这里，有需要的朋友可以点击查看。
ps：只提供了关键代码，毕竟这个是公司的业务，肯定不能全部分享；如果你有实现这个的需求，建议结合Vben表单设计源码一同研究。
总结
完成这个需求，我比较有感触的是，设计一个东西和写业务的区别很大，学到了许多东西，挺有意义的。
最后分享一下《Vue.js设计与实现》的作者霍春阳(HcySunYang)在书中的一段话：不要惧怕写出不完美的代码，只要在后续迭代的过程中“见招拆招”，代码就会变得越来越完善，框架也会变得越来越健壮。
作者：李仲轩
链接：https://juejin.cn/post/7383968655077539851
我们下一篇文章再见！！！
https://vben.vvbin.cn/: https://vben.vvbin.cn/
[2]https://vue-draggable-plus.pages.dev/: https://vue-draggable-plus.pages.dev/
[3]https://vue-draggable-plus.pages.dev/api/: https://vue-draggable-plus.pages.dev/api/
[4]https://vue-draggable-plus.pages.dev/demo/nested/: https://vue-draggable-plus.pages.dev/demo/nested/
[5]https://gist.github.com/StudyDayByDay/ae0cdbdb1955d4a51538887e69bdebf9: https://gist.github.com/StudyDayByDay/ae0cdbdb1955d4a51538887e69bdebf9
[6]https://github.com/vbenjs/vue-vben-admin/tree/main/src/views/form-design: https://github.com/vbenjs/vue-vben-admin/tree/main/src/views/form-design
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍
