跳到主要内容

常用基础控件

配置方式:在“页面属性”->“控件类型”中选择对应的控件类型

1. 下拉框 | 多选框 | 单选框 | 下拉多选 | 下拉搜索

字典用法:表单字段,通过配置系统字典或者表字典,实现下拉、Checkbox、Radio等效果。

支持模型: 系统字典 和表字典(通过数据库表的配置)——不支持popup

注:下拉搜索控件支持系统字典 和表字典(不支持popup)

1.1 数据字典

配置字典code(对应系统字典表的 字典编码)如:bpm_status

字段code对应: 系统管理 -> 数据字典

演示:

1.2 表字典

效果:实现通过表里面取数,下拉展示

1.3 条件过滤

支持自定义sql 增加查询条件 过滤表数据

配置方式,如图所示在字典table上接表名后配置where[ where 一定要小写] 条件:

2. 日期控件 | 时间控件

日期控件分为年月日和年月日时分秒控件

“年月日”的数据库类型对应“date”

“年月日 时分秒”的数据库类型对应“datetime”

“时间”的数据库类型对应“String”

3. Popup控件

popup选择框的使用依赖于Online报表

(1)创建一个Online报表来提供弹出数据列表的数据集,如“report_user”

(2)选择控件类型为popup弹出框

(3)字典Table、字典Code、字典Text项填写对应的Online报表信息

字典Table: 填写Online报表编码,如:“report_user”
字典Code: 填写Online报表中的字段名(多个逗号隔开)如:“username,realname”
字典Text: 填写表单中字段名 (多个逗号隔开)如:“popup,popback”

(4)展示效果

4. 用户选择 | 部门选择

4.1 配置

页面属性配置控件类型 选择“用户选择”“部门选择”

4.2 高级用法-动态存储/展示字段

目前只支持单表

  • 使用场景

部门组件默认存储部门ID,展示部门名称,

用户组件默认存储用户账号,展示用户名称,现支持动态配置,指定存储/展示的字段名。

  • 配置

页面属性 -> 更多配置 点击高级配置,可直接选择是否多选、存储字段、展示字段

  • 可使用的字段如下表格所示

注:如果要配置存储字段需要保证数据的唯一性

▌用户组件

字段名备注
id用户ID
username用户名
realname真实姓名
birthday生日
sex性别
email邮箱
phone手机号
telephone座机号

▌部门组件

字段名(注意大小写)备注
id部门ID
departName部门名称
departNameEn部门英文名称
departNameAbbr部门名称缩写
description介绍
orgCode部门编码
mobile手机号
fax传真
address地址
memo备注

5. 分类字典树

1.分类字典树控件是基于 系统表“分类字典”设计的,为online提供一个树控件,用于选择分类字典的数据。

2.分类字典的数据维护见菜单【系统管理】-->【分类字典】

5.1 配置方法一

只保存ID,列表及表单回显数据需要系统翻译,适用于小数据量,可保证当前表数据及分类字典表数据一致。

  • online表单配置:

此方案需要配置字典code的值,该值实际是分类字典的类型编码,此处配置成B01即表示当前这个树控件,只加载B01节点以下的数据

  • 演示:

5.2 配置方法二

保存ID和text ,列表及表单展示text,适用于大数据量,但是若分类字典表数据text被修改,当前表则难以保证数据一致性

  • 页面属性-配置控件类型

  • 校验字段-配置字典

备注:

1、数据库属性配置两个字段,字典code存储树id,字典Text存储树text

2、页面属性配置成分类字典树,列表表单显示,text为文本框,列表表单不显示

3、字典code配置成分类字典的类型编码,同一;字典text配置存储树text字段的名称

  • 演示

6. 自定义树类型

  • 1.页面属性-配置控件类型

  • 2.校验字段-配置字典

备注:

1、字典table 填写树控件对应的表名 { 例如:sys_category }

2、字典code填写树控件根节点的父ID的值,填0则为全部显示

3、字典text填写4个表字段的名称,以逗号隔开,依次是:ID列,父ID列,显示列,是否有子节点列 { 例如:id,pid,name,has_child}

字段顺序解释说明:

a. ID列和PID列用于记录数据的父子关系,且ID列是该树控件最终保存到数据库的值

b. 显示列表示树控件展示的数据,

c. 是否有子节点列是树形表需要的特例列,详细看 online表单树形表单开发 ,该列为字符串类型系统默认1为是 0为否,不支持其他数据格式。

  • 3.演示

7. 下拉联动组件

此控件只支持在线使用,不支持代码生成。

例如:省市区的三级联动下拉选择框

7.1 表关系

首先,联动组件的数据来源需要有相应的层级关系 ,如:新建一张表sys_test_link,数据如下:

idpidname
1中国
21山东省
32济南市
43历城区
53长青区
62青岛市
71安徽省
87合肥市
98包河区
108庐阳区
117黄山市
...

7.2 online配置

新增字段 province,city,area

省-province字段上配置联动组件,其他配置文本框即可

省-province字段的校验字段 ----> 字典table --->配置json,格式如下:

{
table: "sys_test_link",
txt: "name",
key: "id",
linkField: "city,area",
idField: "id",
pidField: "pid",
condition:"pid = '1'"
}

配置描述:

名称描述
table数据库表名
txt控件显示的值
key控件需要存储的值
linkField级联组件的其他字段名称,上例配置了市,区字段名
idField数据的标识
pidField上下级关系的表示字段
condition联动组件 第一个下拉框的数据查询条件

测试效果:

8. 开关控件

用于场景:只有两个选项且只能选一个

默认选项值: Y/N (即数据库字段存储为Y或N)

配置:

配置注意:

  • 控件类型选择:开关
  • 扩展参数:如果不想使用默认的选项值(Y/N)保存到数据库,支持自定义,配置一个数组即可,

例如:配置数组 [1,2] 则第一个参数(1)对应是,第二个参数(2) 对应否 那么保存在数据库的字段值为1/2

列表显示:

单表/主表/一对一子表 表单效果展示:

一对多子表 表单效果展示:(勾选即Y)

9. popup字典

popup字典选择框的使用依赖于Online报表

(1)创建一个Online报表来提供弹出数据列表的数据集,如“report_user”

(2)选择控件类型为popup字典

(3)字典Table、字典Code、字典Text项填写对应的Online报表信息

字典Table: 填写Online报表编码,如:“report_user”
字典Code: 表单真实获取的值,即传给后端的值「类似下拉框的value」
字典Text: 显示框显示字段「类似下拉框的label」