# 麒峰在线可视化表单设计
**Repository Path**: WaterMore/vuefrom1.1.0
## Basic Information
- **Project Name**: 麒峰在线可视化表单设计
- **Description**: 本源码参考了form-genetator表单设计，还有其他的各类表单设计形成最终的产品，本框架包含了菜单，按钮权限，组织，用户，部门，角色等通用权限功能，还有在线API接口配置，配置的语法支持Mybatis sql语法，目前支持的可视化组件有列表，明细列表，选人，选部门，选机构，选成本，还有弹出层结构，支持在线编辑，然后切换设计模式继续拖拽布局。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 536
- **Created**: 2021-05-20
- **Last Updated**: 2021-05-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 在线可视化表单设计
2021.4.6
今日发布版本解决问题如下：
1.修复拖拽选中时报错，2.渲染模式去掉了Iframe模式渲染，直接使用vue插件渲染，性能更好。3.生成vue代码更换成阿里的Ant Design of Vue框架，4.实现源码编辑智能提示，可增加自定义智能提示功能，5.源码编辑支持右击自定义菜单接口的功能。6.集成了swagger Api接口配置调用（完成50%）,7.样式进行调整，样式不会相互影响，8.用户管理bug修复。9.列表头支持选择列设置和扩展。
#### 介绍
本源码参考了form-genetator表单设计思路，还有其他的各类表单设计源码思路，形成最终产品，本框架功能有
1）菜单，按钮权限，组织，用户，部门，角色等通用权限功能，还有在线API接口配置
2）支持在线配置Mybatis语法接口，可轻松编写配置各类报表，列表，增删改查，导出，导入，定时任务数据同步，RabbitMQ接口数据接收处理，以及第三方接口数据的对接。支持接口说明文档的在线生成。
3）拥有可视化表单界面，支持vue element和Ant Design of Vue框架中的基础控件，自定义组件的拖拽界面设计，设计后可直接生成vue源码,同时支持源码在线更改，在线预览，支持css的植入。支持导出，导入，支持保存到数据库中形成动态表单，动态加载界面，
【 [码云仓库](https://gitee.com/liuyaping007/vuefrom.git)】
【 [预览地址](http://106.53.234.69:8003/) 用户名：liuyaping 密码：123456】
#### 使用说明
表单详细介绍：[https://www.cnblogs.com/PlatformSolution/p/14572362.html](https://www.cnblogs.com/PlatformSolution/p/14572362.html)
表单常见操作问题说明：[https://www.cnblogs.com/PlatformSolution/p/14621301.html](https://www.cnblogs.com/PlatformSolution/p/14621301.html "https://www.cnblogs.com/PlatformSolution/p/14621301.html")
因动态图片文件太大，显示不出来
[进入入口](http://106.53.234.69:8003/vuefrom/1.png)
[设计界面](http://106.53.234.69:8003/vuefrom/3.png)
[源码编辑 点击【查看源码】](http://106.53.234.69:8003/vuefrom/2.png)
[明细列表 增加行，点击对应列头可对应进行设置](http://106.53.234.69:8003/vuefrom/gridmingxi.gif)
[弹出层 界面设计 ](http://106.53.234.69:8003/vuefrom/opentanceng.gif)
[列表查询与选人，附件上传，富文本功能，同时获取对应表单JSON](http://106.53.234.69:8003/vuefrom/gridlist.gif)
#### 特性
1. 可以扩展市面上和自定义任何VUE组件的接入，支持所有的事件，vue语法。
2. 支持VUE代码的修改，css样式植入。
3. 支持生成VUE源码，可支持编辑VUE代码后，并重新可视化设计
4. 可以支持Vue表单源码下载，在VSCode中二次开发
5. 可保存到数据中，动态渲染不同的表单
6. 表单渲染模式采用vue本身构建渲染，支持语法跟VUE没有区别
7. 结合了Mybatis配置的接口，可以支持接口动态绑定，与实现各种功能。
8. 目前结合了基础控件之外有列表，明细列表，选人，选机构，选部门，弹出层，上传控件，富文本控件，动态模块，基本上能够满足我们后台管理功能界面功能
9. 源码中增加右击菜单，能够快速生成代码，能够跟节省开发时间。（如配置Mybatis接口调用代码生成等等）
10. 无基础可以介入前端的开发。
11. 为工作流平台做好准备，工作流平台最需要的就是智能表单这块的集成。
#### 安装教程
- 确保已经安装node.js 10+
- 首次下载项目后，安装项目依赖：
```
yarn
```
或
```
npm install
```
- 本地开发
```
npm run start
```
- 构建
```
npm run build
```
## 交流
- QQ群 109434403
后端java源码和数据库需要者私聊
微信号：danran0007
