> 本文用于复盘之前实现的**表单生成器**需求，记录整体的思路，由于开发时间只有20多天不到一个月，成品比较粗糙，请见谅 ## 效果展示 [jvideo](https://www.ixigua.com/7384272739487449600?logTag=4085ff0b0fcd343e7666) ## 需求上面的视频就是最终完成的效果，还存在一些瑕疵，比如拖拽样式优化、input组件后缀样式优化等。首先「表单生成器页面」分为上下两个部分： - 上层：标题、首页附页切换、保存功能 - 下层：表单生成器 - 左侧：数据项配置 - 中间：面板显示 - 右侧：表单项设置各自的功能为： - 上层：切换首页附页、**校验**并保存已配置表单，首页附页分开保存 - 下层： - 左侧部分：模块和子项均支持增删改，模块可折叠和展开，点击子项或模块同步显示到中间面板，也**可拖动**到中间面板 - 中间部分：**显示最终表单**效果，组件hover和选中效果，可删除，**可拖动**调整位置；**最终的表单类型只有五种（输入、单选、日期、下拉、表格）** - 右侧部分：整体**表单设置**和具体的**组件设置** 其次为「表单回显页面」，包含**数据回填**、**必填校验**、**联动显隐**、数据提取并保存功能。 ## 心理活动当开完需求会的时候，我意识到这个需求的复杂程度不低，此时的我有一点慌🙂；当我询问时间期限的时候，告知我就是这个月底（我是5月6号接到的需求），此时的我感觉慌了🙃；当我再询问这个需求的人员投入的时候，告知我只有我一个前端来处理这个需求，此时的我，已经准备充boss直聘VIP了💀... 开玩笑归开玩笑，该做还得做。其实某些东西是看着大，但很多都是附加功能，只要把核心功能梳理出来，其余的慢慢加就行了。 ## 分析消化这个需求之后，我暂时没有头绪来处理。我知道这时候我要先去寻找类似的产品取取经。最终我找了[Vben开源项目](https://vben.vvbin.cn/)，其中有这个模块实现，如下图： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8964361b247443ed8ec8786ce20c843b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1919&h=954&s=213434&e=png&b=f9f9f9) 其中的核心功能是一致的，在思索几番之后，我准备先研究一下开源项目这个模块的实现。以下是研究结果： - 拖拽使用[VueDraggablePlus](https://vue-draggable-plus.pages.dev/)实现 - 数据结构总体为一个`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`插件来实现，有三种使用方式： - 组件使用 - 函数使用 - 指令使用在本次案例中使用的是组件方式，案例中从左侧拖拽到中间面板的行为其实是双列表匹配，官方文档中也有示例，基本使用例子如下： ```html ``` 如代码所示，只需保证两个列表的`group`属性的值一致以及数据结构一致即可；由于实际需求中，只需要从左侧拖拽到中间，并不需要从中间拖拽回去，所以为了规避这种行为，需要给左侧的`group`属性设置为以下内容: ```js // DraggableGroup 是定义的字符串 // pull 从列表中移动的能力。克隆——复制项目，而不是移动。 // put 是否可以从其他列表中添加元素，或者可以从中获取元素的组名数组。 :group="{ name: DraggableGroup, pull: 'clone', put: false }" ``` 更多`插件API`请[点击这里](https://vue-draggable-plus.pages.dev/api/) ___ 解决了双向拖拽列表之后，此时出现了一个新的问题，左侧的内容是一个树，不是一个扁平的数组，同样要实现拖拽，如下图： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93a154f596ff46b5ab757a4d08bf905e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=313&h=604&s=48031&e=png&b=fefefe) 插件也考虑到了这一点，可以实现嵌套的功能，[官网嵌套示例](https://vue-draggable-plus.pages.dev/demo/nested/)；逻辑就是组件自调用。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7c468d9e0fa43f29d7d0c815d74b20f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=709&h=265&s=37746&e=png&b=f8f9fa) ### 数据转换为组件实现了拖拽的需求之后，下一步就是实现从左侧拖拽到中间面板显示为自定义组件。经过上面的步骤之后，就能够知道拖拽本质上是数据的`clone`和数组中顺序变化，那么从左侧拖拽过来形成组件，也就是要把这个数据转换成组件。「数组结构」、「数组每一项代表组件的属性」、「数据转换为组件」，这三个关键词加在一起，很自然就能想到`v-for`渲染，由于要实现的组件有五种类型，但是数组的每一项结构是一致的，所以需要一个包装组件，我这里命名为`DisplayItem`，再在`DisplayItem`中使用`component`的`is`属性来生成不同类型的组件。图示如下： ![显示面板渲染层级关系图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fff8c1011a743718bf81024c196630c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2104&h=1597&s=1784477&e=png&b=ffffff) ### 定义数据结构由于是数据形成组件，所以要先定义数据结构。到这一步，我先把原型里面的表单的功能和五种组件的功能进行了整理： - 表单： - 表单布局调整 - 控件尺寸调整 - 表单项： - 标签修改 - 宽度设置 - 数据项来源设置 - 隐藏规则设置 - 是否必填 - 组件类型导致的配置（日期类型、下拉值、表格列等）结合`Vben`中对应的表单结构和表单项结构，定义出了以下结构： ```js // 当前表单的默认配置 export function createFormConfig(schemas = []) { return { // 行内表单模式 inline: true, // 表单域标签的位置 right/left/top，固定right "label-position": "right", // label-width 表单域标签的宽度，例如 '50px' "label-width": "200px", // 用于控制该表单内组件的尺寸 medium / small / mini size: "small", // 表单配置数组，每一项代表一个组件 schemas, // 当前选中的控件 currentItem: null }; } ``` ```js // 新增模块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 }; } ``` ```js // 展示时的控件 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种 } ``` ### 设计组件结构定义好数据结构之后，先不着急实现组件，因为这个层级和逻辑比较复杂，最好是先把**组件结构**和**组件抽离**处理了；结合原型图，一共要处理三类组件： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ff5b93208d343758985ac7a028db38f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1828&h=762&s=116172&e=png&b=fefefe) - 布局组件 - 左侧数据项面板 - 中间展示面板 - 右侧配置面板 - 展示组件 - 五种类型展示组件 - 配置组件 - 表单配置组件 - 组件配置组件（五种类型配置组件） - 用于处理表单相关的数据和处理函数封装到一个js文件中 **最终要实现的最外层组件结构如下所示：** ```html ...... ``` **详细的总体结构图如下：** ![组件层级图](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3014d4eb2ee64c5da209c959d78200d4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3105&h=1986&s=851229&e=png&a=1&b=b2f2bb) ### 实现组件到这一步就是实现组件，在实现组件的过程中，除了一般的业务处理，有几个点值得注意： | 注意点 | 说明 | | --- | --- | | 数据控制 | 整体数据控制在最上层，`formConfig(表单内容)`使用`prop`传递给子组件，子组件更改操作通知到最上层组件处理，保证数据流向正确和页面实时更新 | |显示当前选中的表单项的匹配的配置组件|面板中点击选中表单项时给`formConfig`的`currentItem`属性赋值，配置面板根据`currentItem`中的「配置组件类型」属性，在右侧显示相应类型的配置组件| |表单数据为空提示|配置了`required: true`的组件，利用`el-form-item`的`error`属性提示错误信息| |显隐规则|通过方法将显隐规则数组最终转换为布尔值，结合`v-if`实现显示隐藏| |表单数据回显|利用每个组件的唯一`id`来达到绑定表单数据的目的| |表单配置保存校验|定义校验函数，收集配置错误信息，点击保存时弹出错误信息表格提示用户| ## 实际实现路径在经过上面的步骤之后，「表单生成器页面」完成了，剩下的就是处理表单回显页面和其他页面；表单回显页面其实就是之前写的`display-panel`组件，所以剩下的内容比较轻松，就不赘述了。在这里我梳理了完成这个需求的实际步骤，从零到一，慢慢丰富内容： - 熟悉需求 - 了解相似的产品实现 - 先处理表单生成器页面 - 按照原型图还原整体页面 - 先处理左侧部分的增删改逻辑、折叠展开逻辑 - 实现左侧部分拖拽到面板的逻辑 - 实现面板内拖拽逻辑 - 定义数据结构(表单、表单项) - 实现拖拽到面板生成组件逻辑 - 用一个input类型组件贯穿从左侧拖拽到中间，再到右侧配置的总流程 - 添加其他四个类型的组件逻辑 - 处理校验 - 处理联动显隐 - 再处理表单回显提取数据页面 - 定义数据回显规则 - 接口联调 ## 关键源码关键代码文件思维导图，如下： ![关键代码文件思维导图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2d2dbc769304de092465961d90eccc2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2710&h=1484&s=265086&e=png&b=ffffff) 由于这部分的代码比较多，直接粘贴在博客上，会有较大的阅读心智负担，所以我将代码放到了[这里，有需要的朋友可以点击查看。](https://gist.github.com/StudyDayByDay/ae0cdbdb1955d4a51538887e69bdebf9) ps：只提供了关键代码，毕竟这个是公司的业务，肯定不能全部分享；如果你有实现这个的需求，建议结合[Vben表单设计源码](https://github.com/vbenjs/vue-vben-admin/tree/main/src/views/form-design)一同研究。 ## 总结完成这个需求，我比较有感触的是，设计一个东西和写业务的区别很大，学到了许多东西，挺有意义的。最后分享一下`《Vue.js设计与实现》`的作者`霍春阳(HcySunYang)`在书中的一段话：`不要惧怕写出不完美的代码，只要在后续迭代的过程中“见招拆招”，代码就会变得越来越完善，框架也会变得越来越健壮。` 我们下一篇文章再见！！！