「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
背景介绍
最近，公司开始了一个新的项目，这是一个租赁业务系统。拿到需求之后，我大吃一惊，因为每个功能节点很复制，至少表格及表单中的元素数量之多远远超过我的想象。
然而，项目组中前端人数有限。如果按照以往项目开发模式，我们很可能天天都要加班。所以，自制一款实用的页面元素生成工具 势在必行。
开发模式介绍
先讲一下我们的开发模式：
1.设计师提供设计稿（设计风格、设计稿的模板）。
2.需求分析师提供需求文档及输入输出文档。
3.后端工程师提供pdm文件。
前端工程师先了解需求，然后对照以四个文件，画出前端的页面。 进而实现相关逻辑，并和后端同事联调接口。
其中画前端页面的过程，需要对照输入输出，及PDM文件，把表单和表格的字段一个一个的写到页面中。这是一个繁琐枯燥的过程，虽然没有技术含量，却很耗时间。
所以，我就考虑自己实现一个功能，能够快速的完成这一过程。既可以提高效率，又可以节省体力，节省时间，干更有意义的事情。
实现思路
- 查询数据--后端提供一个接口，根据数据库表名称，查询相应表结构。
- 渲染数据--将查询到的表结构数据渲染到一个表格中。
- 配置数据--在表格中编辑该元素的名称，类型，排序。
- 生成配置--根据表格中的数据生成元素的配置对象。
- 导出配置
页面效果
顶部操作区
a. 下拉选用于切换后端不同的服务(eg: imfbp-fls-web/imfbp-crm-web)
b. 文本框用于如输入数据库表名称。
c. 新增按钮: 可以手动新增一个字段(有时候,数据表没有,但是页面需要显示的字段)
d. 表单结果/表格结果/极简结果: 三种输出的模式, 根据生成的数据需要在表格使用还是表单使用进行灵活选择。
e. 一键复制： 将右侧预览效果的数据复制到剪切板（少按一次Ctrl+C）
f. 排序数据/全部数据切换：控制输出的仅有有排序序号的数据，还是所有表格数据。
左侧编辑区
左侧编辑区域是一个可编辑表格，其中每一行表示一个字段。这里可以对该字段进行配置。 包括：
- 配置字段的标题。（默认取数据库表的备注字段，也可以自定义）
- 字段渲染的组件类型（文本、日期、金额、下拉选、富文本等）
- 细节配置：比如 字典配置 字典编码。 参照配置参照编码
- 默认值配置
- 是否可编辑
- 排序（在生成的表单（表格）中的渲染顺序）
右侧预览区
可以查看左侧配置后最终获取的json对象是否符合自己预期。 同时也可以进行微调。
总结与思考
- 我实现这个功能使用的是
React, 思路简单, 使用vue也同样可以实现。 - 注意，最终生成的结果是一个JSON格式的配置数组，这是和我们使用的表单及表格组件适配的，传入对应组件即可渲染出页面。 当然如果期望返回具体的表单元素组件，实现思路一样，稍作调整即可。
- 根据表名称查询到数据比较多(100多个字段)时，表格进行行编辑操作时，页面会出现明显的卡顿现象。
- 我在具体项目开发过程中，使用这个工具感觉还是不错的，确实可以提高开发效率。
