前言
表单是我们日常开发中经常遇到的功能了，对于一些简单没有复杂交互的表单其实我们可以通过可视化的方式去生成，这样既可以提高开发效率同时可以保证代码质量可控。这是项目的线上地址,这是效果图：
平台介绍
-
物料系统
物料系统提供丰富的组件，如文本，图标，矩形，表单按钮等等，每个组件都有有一份配置，包含了样式，属性等数据，画布和属性面板会共享这一份配置。
-
画布
提供了参考线，标尺，画布缩放，右键菜单等辅助的功能，便于定位和调节组件的位置和大小。
-
属性面板
提供了样式，属性和事件三个面板，样式面板除了可以修改组件的位置和大小外，还可以修改颜色，边框样式等；属性面板可以配置表单的数据源以及很重要的v-model的数据绑定；事件面板就可以为组件添加一些事件如
click,dblclick等等。 -
预览
将画布的组件转换出
ant-design-vue对应组件需要的配置，根据配置遍历渲染component。
重零搭建表单
- 首先创建一个文本输入框的表单项，先拖拽一个文本组件到画布中，然后双击文本组件修改文本内容，可以根据文本内容自行调节宽高。
- 拖拽一个输入框组件到画布中，然后双击输入框组件的文本位置即可选中文本，再双击文本既可以进行编辑。接着点击右侧面板中的属性面板（如果没有该出现该面板，请在点击一次该输入框组件），可以修改
bind的值，这个值即表单项绑定的v-model的属性值，注意如果组件的bind值相同，那么绑定的是同一个v-model的属性值，这点要注意，因为目前很多边缘校验没有完善，所以bind的值相同可能会出现一些逻辑问题甚至控制台报错。。。至此一个表单项就创建好了，可以点击顶部工具栏的运行按钮查看效果。 - 接着创建一个单选框的表单项，同样拖拽一个文本组件到画布并修改好内容，接着拖拽出一个单选框组件到画布中，可以双击单选框组件的文本位置，选中文本组件后继续双击即可编辑文本内容，接着点击右侧面板中的属性面板，可以修改
bind的值和value值，这里需要注意单选框的bind的值是可以相同的，比如我有一个电影名表单项，有罗小黑战记，你的名字，疯狂动物城三个选项，即对应三个当选框，那么这三个单选框的bind的值应该是相同的，相当于把这三个单选框归于同一个组，这样能理解吗？另外value是选中该单选框后，那么该表单项的值就是该value值，所以需要注意修改value值。好了，至此第二个表单项也创建好了。 - 接着创建一个下拉框的表单项，同样拖拽一个文本组件并修改，接着拖拽出一个下拉框组件，然后点击右侧面板中的属性面板，可以修改
bind和options的值，对于下拉框组件而言，那么bind值一般是不同的，options即配置下拉选项，注意不要改动json的key值，修改value值即可。 - 接着拖拽出一个按钮，可以双击图标位置修改图标类型，可以双击文本位置编辑文本内容。然后点击右侧面板中的事件面板添加一个
click事件，编辑代码，将下面的代码粘贴复制进去保存即可。
;(function (vm) {
vm.$axios.post('/api/form', vm.dataSource)
.then(({ data }) => {
if (data.code) {
vm.$message.error('提交失败!')
return
}
vm.$message.success('提交成功!')
})
})(vm)
至此一个表单就创建完毕了，您可以在预览页面填写好表单数据后点击提交，打开控制面查看form请求中请求体的数据是否正确。
总结
目前这个表单实现的功能很薄弱，像表单校验，基本的交互都还没开发，很多的校验也还没有完善，不过能实现基本的表单提交功能还是有些小开心的，开发的过程中踩过一些坑，代码重构优化的思考等还是很有收获的。
