自定义表单配置 === 表单支持:单表模型、一对多模型。 自定义表单是JEECG智能开发平台开发的一套可视化的表单设计功能,基于ueditor实现,bootstrap样式风格。自定义表单模式有三种模式:预览、编辑、添加。自定义表单可实现以下功能: * 表单预览,动态报表展示(列表数据展示) * 表单数据填报,支持多数据表同时填报,一对多数据表填报,单表多条数据批量填报等 ## 一、表单参数介绍 ### 1.自定义表单参数说明 |表单|详细说明| |-----|---| |表单编码|自定定义表单编码,唯一标识,自定义表单访问需要| |表单名|自定义表单名称| |填报表单|该表单是否是填报表单| |主数据源|选择填报的主数据源,表单填报时必须| ### 2.表单数据源参数说明 |数据源|参数说明| |-----|---| |数据源编码|查询的数据集编码,同一个表单下唯一| |数据源名称|数据源名称| |数据源类型|数据源获取数据集的方式;数据库表:数据集从下面配置的数据库表名获取,动态sql:数据集根据动态sql查询获取,Java类:待实现| |数据源|数据源类型为数据库表时显示,连接的数据库,平台数据库为当前系统数据库,其他为动态数据源配置| |数据库表名|数据源类型为数据库表时显示,获取数据集的表| |SQL数据源|数据源类型为动态sql时显示| |填报数据源|数据源类型为动态sql时显示| |填报数据库表|数据源类型为动态sql时显示| ### 3.自定义表单设计图 ![](https://img.kancloud.cn/67/42/67426e47dbbc3afdd6cf686efc3fc69f_614x500.png) ## 二、单表类型表单 ### 1 .创建自定义表单 菜单:在线开发—自定义表单列表—表单设计器 界面如下图: ![](https://img.kancloud.cn/55/a1/55a126f004d26d0c6c6bb41e5998eaf8_1048x622.png) 说明: 创建自定义表单: 填写表单编码,表单名称,填报表单,表单保存 主数据源先不选择,这时还没有添加表单数据源,表单数据源添加见2 ### 2.表单数据源 表单设计器左侧,表单数据源栏,点击加号,添加表单数据源 ![](https://img.kancloud.cn/e8/ce/e8ce8bd4c3e7c22d1b771f98e4d1f241_1049x248.png) ![](https://img.kancloud.cn/a6/22/a6220f8c85141c7fca42f6d3a9110544_1262x597.png) ![](https://img.kancloud.cn/d9/40/d940a315e3416889829bc859f9d2fbeb_1256x631.png) (1)数据源编码定义唯一 (2)数据源类型,根据情况使用不同的场景,本示例使用动态SQL, (3)动态数据源,和填报数据源,一般选择平台数据源 (4)动态SQL: ``` select * from jform_employee_leave where id='${id}' 您可以键入’’作为一个参数,这里abc是参数的名称。例如: select * from table where id = ${abc}。 select * from table where id = '${abc}'(如果id字段为字符串类型) ``` (5)填报数据库表:选择的表名,是展示的表单,录入的数据要保存的表,动态SQL查询出来的字段要和填报数据库表的字段保持一致,字段名称不一样的sql使用AS 别名使其一致 (6)查询数据列:通过动态sql解析出来的查询列 (7)查询参数:解析动态sql里面的查询参数 ### 3.设计表单内容 添加完数据源后可以设计表单内容 (1)通过默认模板样式生成,默认模板样式,在【在线开发—自定义表单模板】中管理 (2)自己手动编辑表单 注:自定义表单控件使用见:自定义表单控件 界面如下: ![](https://img.kancloud.cn/09/7c/097c84ab646e0016f0dc0e79190a8030_1024x559.png) ### 4.测试自定义表单功能 【在线开发—自定义表单列表】中找到刚才添加的自定义表单 ![](https://img.kancloud.cn/50/12/5012caf6d03f00ed94e1bbdc40d2220d_1022x55.png) 点击预览: 操作模式:有三种预览方式,查看模式,添加模式,编辑模式; 参数录入区:动态sql解析出来的参数 ![](https://img.kancloud.cn/8a/e7/8ae7e04222d1d2cfbd9a1ae7ecaf8df8_629x397.png) 查看模式、编辑模式时,参数录入区要录入参数值; 添加模式不需要录入 #### 添加页面: ![](https://img.kancloud.cn/c2/b3/c2b3f42b9a638c232ab016cd514044f6_915x720.png) #### 查看页面: ![](https://img.kancloud.cn/15/1d/151d9fb4713f99d9bb9849be6b36521a_881x595.png) #### 编辑页面: ![](https://img.kancloud.cn/42/9e/429e0232d1ec2b90a8cf603f1f0e3c0b_873x723.png) 添加、编辑成功后调整成功页面 ![](https://img.kancloud.cn/fb/4e/fb4e017972fb5bbc42e421d5a5eaaae4_1034x267.png) ## 三、一对多类型表单 ### 1.创建一对多自定义表单 菜单:在线开发—自定义表单列表—表单设计器 界面如下图: ![](https://img.kancloud.cn/c0/d1/c0d124b328785245326ddb15a7caf38b_1049x614.png) (1)自定义表单信息 设置表单编码,表单名称,填报表单; 主数据源暂时不填 点击左上角按钮,“表单保存” (2)表单设计器左侧表单数据源,添加表单数据源 添加主表数据源,同1.2.2表单数据源,本例订单主表 ![](https://img.kancloud.cn/68/e6/68e6113ad8b4a844597a95a20a864d7c_1247x613.png) 添加子表数据源,同表单数据源,本例订单客户 ![](https://img.kancloud.cn/cf/6a/cf6a0054bca0935f5ea4274824edf380_1241x607.png) ### 2.设计表单内容 添加完数据源后可以设计表单内容 (1)通过默认模板样式生成,默认模板样式,在【在线开发—自定义表单模板】中管理 (2)自己手动编辑表单 注:自定义表单控件使用见:2 自定义表单控件 界面如下: ![](https://img.kancloud.cn/59/ec/59ec7274a565f30fe5d65ec3b62222bc_1040x578.png) 注: (1)订单主表信息,从订单主表数据源获取,普通表单控件设置 (2)列表控件设置订单客户信息 列表控件配置如下图: ![](https://img.kancloud.cn/ca/52/ca52df06ce4ff312d92ee9b9092367ac_1112x474.png) 数据源:选择子表数据源,本例订单客户 外键字段:设置子表作为外键的字段 关联数据源字段:该字段配置自定义表单设置的主表数据源一起使用,该字段为子表外键与主表数据源关联的字段 定义规则 = {外键主表数据源编码.主表外键字段名字} 注:外键字段和关联数据源字段,如果在子表数据源中的动态sql中,有sql的关联关系的话,此处可以不填写,若没有体现,需要再此配置; 数据源类型为数据库表的情况下,外键字段和关联数据源字段需要填写 ### 3.测试自定义表单功能 【在线开发—自定义表单列表】中找到刚才添加的自定义表单 ![](https://img.kancloud.cn/76/9c/769cbd60c5c2bf1a58f09fd4fab8e9f6_1011x44.png) 点击预览: 操作模式:有三种预览方式,查看模式,添加模式,编辑模式; 参数录入区:动态sql解析出来的参数 ![](https://img.kancloud.cn/8a/e7/8ae7e04222d1d2cfbd9a1ae7ecaf8df8_629x397.png) 查看模式、编辑模式时,参数录入区要录入参数值; 添加模式不需要录入 #### 添加页面: ![](https://img.kancloud.cn/39/ef/39ef5098b43f49eeb6a5445096fa791e_1266x714.png) #### 查看页面: ![](https://img.kancloud.cn/f2/2e/f22e46c3381959b9bf0888b9bf6d055f_1271x342.png) #### 编辑页面: ![](https://img.kancloud.cn/9f/1d/9f1dd101ea9a583d82b6c97c5d663e36_1270x708.png) 添加、编辑成功后调整成功页面 ![](https://img.kancloud.cn/fb/4e/fb4e017972fb5bbc42e421d5a5eaaae4_1034x267.png) ## 四、自定义表单访问请求地址 ### 1.表单页面访问地址 自定义表单页面访问区分添加、编辑、查看,详细参考下面: 可以针对自定义表单不同的页面,做不同的权限控制; |序号|操作|访问地址| |---|--|-|--| |1|添加页面|autoFormController/af/{自定义表单编码}/ goAddPage.do| |2|查看页面|autoFormController/af/{自定义表单编码}/goViewPage.do?id={id}| |3|修改页面|autoFormController/af/{自定义表单编码}/goEditPage.do?id={id}|