## 1、online表单开发
1) 创建表单
例:创建 md_test_task 任务测试表
-
选择 “ Online表单开发 ” 菜单 ; -
“ 新增 ” 表单,输入新增表单 “ 表名 ” 和 “ 表描述 ”,表类型选择 “ 单表 ”,清空自动创建的表字段信息; 根据需求创建表字段信息,进行相对应字段的数据库属性、页面属性、校验字段、外键、索引、查询等配置 ;
-
完成基础表字段配置后,进行数据库同步 ; -
数据库同步成功后,点击 “ 功能测试 ” 进行 “ Auto在线表单功能测试 ” ;
2、表字段控件配置
(1)下拉控件(字段:项目类型):
例 1: 数据字典表配置
-
修改 “ 项目类型(md_type) ” 字段控件为下拉框控件 ; -
选择 “ 系统管理 ” 中 “ 数据字典 ” 菜单 , “ 添加 ” 当前需要的 “ 项目类型 (projectype)” 数据字典信息 ;
- 在项目类型字典右侧操作中选择 “ 字典配置 ” ,配置对应项目类型字典表内容(1-金融 、2-电信、3-能源、4-政务、5-交通、6-其他);
- 数据字典配置完成,返回online表单中填写表 “ 校验字段 ” 中填写 “ 字典Code ” 信息,配置对应字典表名称(projectype);
- 配置完成,返回表单 “ 功能测试 ” 是否正确 ;
例 2 :数据库表配置
- 新建 “ 项目类型(md_test_type) ” 表单信息 ,添加项目类型字段信息,进行数据库同步,功能测试(新增方式与 任务表单 相同) ;
- 功能测试时添加项目类型字段:1-金融 、2-电信、3-能源、4-政务、5-交通、6-其他 ;
-
返回任务测试表单“ 校验字段 ”中填写对应的 “ 字典表Table(表名)、字典code(下拉数据绑定的value值字段)、字典Text(下拉显示的文本字段) ” -
配置完成,返回表单 “ 功能测试 ” 是否正确 ;
(2)Popup控件配置
-
返回online表单, 修改 “ 委托单位(md_company) ” 字段控件为Popup控件 ; -
创建 “ 委托单位(test_company) ” 表单信息,添加字段信息,进行数据库同步,功能测试(新增方式与 任务表单 相同);![在这里插入图片描述](https://img-blog.csdnimg.cn/7c6237cb214c40caa388a1f73e95be41.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
进入“ Online报表配置 ”菜单中,录入表单需要的 “ 委托单位(test_company) ” 报表信息;![在这里插入图片描述](https://img-blog.csdnimg.cn/ee2e1346bdc341a78f0d94009f1185d5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) ![在这里插入图片描述](https://img-blog.csdnimg.cn/3ed9576517904c1e975288e892ff4786.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
返回任务测试表的委托单位字段校验中,输入对应的委托单位Online报表信息 【字典Table(online报表名称)、字典code(popup弹框需要展示的字段信息)、字典Text(表单联动字段名称)】 ![在这里插入图片描述](https://img-blog.csdnimg.cn/24388b1f4c0040af8b4a7b8d7268d62a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
配置完成,返回表单 “ 功能测试 ” 是否正确 ;![在这里插入图片描述](https://img-blog.csdnimg.cn/8f12c452fc7b49c8a8f7b7bf72a95fbe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
(3)分类字典
-
返回online表单, 修改 “ 调整因子(md_factor) ” 字段控件为分类字典树控件;![在这里插入图片描述](https://img-blog.csdnimg.cn/95d0aa59c5124387bcc28a4885d3ee55.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
进入“ 系统管理 – 分类字典 ”菜单中,新增“ 调整因子分类字典树(B03) ”信息;![在这里插入图片描述](https://img-blog.csdnimg.cn/27899d3f7e4b4c6596d9ddba243f28d1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
返回任务测试表单中,字段校验中添加调整因子对应需要的分类字典信息(字典code填写分类字典的分类编码信息(B03));![在这里插入图片描述](https://img-blog.csdnimg.cn/a92256653ca944128e3d46057abf3b96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
配置完成,返回表单 “ 功能测试 ” 是否正确 ;![在这里插入图片描述](https://img-blog.csdnimg.cn/002efe2968b04a0fb4453d34d1bdf651.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
(4)联动控件
-
返回online表单, 修改 “ 基准数据(md_benchmark) ” 字段控件为数据联动控件;![在这里插入图片描述](https://img-blog.csdnimg.cn/958ceef9491045f093397e0a08625034.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
进入“ Online报表配置 ”菜单中,创建“ 基准数据联动(test_link) ”联动数据表 ;![在这里插入图片描述](https://img-blog.csdnimg.cn/f9c6a6f4cf984e6e862ed99a2d7240c3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
创建 基准数据联动表 测试数据;![在这里插入图片描述](https://img-blog.csdnimg.cn/4dcfe0ea88574239b14cadeed3857aa2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
返回任务测试表的基准数据字段校验中,配置对应的字段校验信息(JSON); ![在这里插入图片描述](https://img-blog.csdnimg.cn/18029ef5f23d4163bf0dadb41a2f123d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
{
table: "test_link",
txt: "name",
key: "id",
linkField: "md_year,md_details",
idField: "id",
pidField: "pid",
condition:"pid = '1'"
}
- 配置完成,返回表单 “ 功能测试 ” 是否正确 ;
![在这里插入图片描述](https://img-blog.csdnimg.cn/b796739329e241c5b753ad111cbf5305.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
(5)表单测试
- 控件配置完成,测试整体表单数据功能;
![在这里插入图片描述](https://img-blog.csdnimg.cn/7049508b8d9c47ab8ea916d32f0cc309.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
(6)自定义按钮
-
进入online表单开发菜单中,选中表单信息,选择 “ 自定义按钮 ” 填写按钮信息;![在这里插入图片描述](https://img-blog.csdnimg.cn/83e64bae1ca140b6a9fb23f198b88580.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
配置自定义按钮信息 按钮编码:该编码在一个智能表单配置中唯一,同时js增强中定义的函数名和该编码的值需要保持一致(详见js增强描述) 按钮名称:按钮上面显示的文本. 按钮样式:可选button/link。 button:即生成的按钮显示在导航工具栏上; link:显示在每一条数据的操作列。 动作类型:可选action/js。 action:该按钮会触发通用入口,挂接到SQL增强上(前提是SQL增强配置中配置了按钮编码对应的sql语句)。 Js:该按钮会触发JS增强中类型为“list”的配置中编写了函数名为按钮编码的函数。 按钮图标:和antd-vue的icon保持一致 参考:https://vue.ant.design/components/icon-cn/ 显示表达式:按钮样式为link时起作用 ![在这里插入图片描述](https://img-blog.csdnimg.cn/27e224ce743d469f934ad2ae5c9a7e7f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
3、测试表单及菜单创建
-
任务测试表单创建数据库同步成功并 “ 功能测试 ” 完成后 ,选择表单配置地址; ![在这里插入图片描述](https://img-blog.csdnimg.cn/18a63451e86c401cae8217b0190dd557.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
复制表单配置地址;![在这里插入图片描述](https://img-blog.csdnimg.cn/6e565821e92c4912bcf9930874dbb48d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
进入“ 系统管理–> 菜单管理 ”菜单中进行表单菜单添加一级菜单; ![在这里插入图片描述](https://img-blog.csdnimg.cn/6efa08ccf5dd4af8a231d33e66b6dd79.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
配置任务测试表单菜单; ![在这里插入图片描述](https://img-blog.csdnimg.cn/c70aaa1e356045268586e8bcf169d5a3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
进入“ 角色管理 ”菜单,(对当前用户角色进行新建菜单授权); ![在这里插入图片描述](https://img-blog.csdnimg.cn/8510ab2082b74c51971a8492fcb74dd4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) ![在这里插入图片描述](https://img-blog.csdnimg.cn/5bea8e98add64b2ba7b6f986f0c99632.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
菜单授权完成刷新系统查看是否成功;![在这里插入图片描述](https://img-blog.csdnimg.cn/17ae0009fb23490eafe6535757b04e96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
访问测试 ,新增菜单列表增删改查是否无误(此处测试无误);![在这里插入图片描述](https://img-blog.csdnimg.cn/270b6a9854184c1690d87677afe25ec8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
(7)代码生成
-
进入“ 在线开发 --> Online表单开发 ”菜单, 选择表单信息, 点击代码生成按钮; ![在这里插入图片描述](https://img-blog.csdnimg.cn/eb6bb35860f14bf19dd18381a1083a63.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
选择代码生成路径;![在这里插入图片描述](https://img-blog.csdnimg.cn/1b58e70929184ed5b117fcfd7857f993.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
代码成功生成提示;![在这里插入图片描述](https://img-blog.csdnimg.cn/a89ab5e94f6a40418a8bdf52c39f581b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
后台文件配置;![在这里插入图片描述](https://img-blog.csdnimg.cn/47eab65f758d478cb0c8c432328b8384.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
在前端views下新建文件夹(mdtestask),将生成的文件夹中的vue页面放到文件夹中; ![在这里插入图片描述](https://img-blog.csdnimg.cn/572e20f1c48c4d408baadddd6ad8f686.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
配置生成代码对应菜单:输入菜单路径–组件路径;![在这里插入图片描述](https://img-blog.csdnimg.cn/67005a15d16647fe89c9952b327b2476.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center) -
授权–查看菜单(同上菜单授权方法)【完成后建议重新启动项目】; ![在这里插入图片描述](https://img-blog.csdnimg.cn/5c36c98afe744643bb8b213d365b75be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATV9tZW5nMTAyNQ==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
|