外观
自定义对话框
简介
在开发过程中,经常需要打开一个对话框来展示特定数据,通常是一些要展示一些列表或视图的列表或树形数据,然后用户选择后数据后会能和前端有一个交互行为。
使用方式
自定义对话框一般用于 开发设计表单,直接选择自定义对话框以及完成相应的配置即可。详情配置参考表单开发
可以通过非配置式直接使用自定义对话框组件在任何页面中使用,参考自定义对话框组件
对话框配置
一、基础配置
二、左侧树(可选)
对话框内的数据量大的并且有分类的列表数据,可以将分类通过 字典分类 或 自定义对话框 以树形的方式展示在数据列表的左侧,并通过配置对话框参数中的 条件字段 起到快速筛选数据的作用。
三、数据来源(四种)
数据库
系统服务接口
有复杂业务数据需求,可以使用接口形式获取对话框需要的数据
public PageListDTO<OrgUser> queryUser(QueryParamDTO paramDTO) {
return orgUserMapper.queryUser(new DefaultAbQueryFilter(paramDTO));
}
系统服务接口形式指定了参数类型为 QueryParamDTO,返回值则需 List 类型的实现类,如有分页需求,推荐案例中的 PageListDTO
src/main/java/com/dstz/base/api/dto/QueryParamDTO.java //参数 (指定)
src/main/java/com/dstz/base/api/dto/PageListDTO.java //返回值 (非指定,推荐)
HTTP 远程调用
对于项目之外的接口,可以使用 http 远程调用达到跟系统服务接口一样的效果。
注意事项
url一定是后端服务器的地址和端口,前端以及nimgx转发的地址并不生效。
参数与跟上方系统服务接口一致。外部系统接口因为没有 QueryParamDTO 类,可以Object、QueryParamDTO相同属性的对象、 map接受皆可。
返回值类型可以为List,但会丢失对话框分页功能。想支持分页,需要返回类似PageListDTO同属性的对象,包含总条数,当前页,每页条数等信息,或同参数的Map皆可。
调用接口会自动携带当前项目token,对本项目或外部开放接口都可以直接调用,若外部项目开启了鉴权,则需要自行打通两个项目的token处理。
url可以携带固定参数类似于&type=1, 除此之外的数据想要携带,都是在对话框中配置出来的,显示字段、条件字段、返回字段、排序字段等通过body请求,不支持自定义的动态变量参数等。
配置对话框参数(列表)
设置字段参数后弹出对话框,即可将左侧的源数据字段添加进右侧四种类型中。
1、显示字段
用来配置对话框的展示效果。具有列头展示和格式化两个功能:
- 列头展示名称的名称和数量。(对话框只会展示配置中的显示字段,但是最终返回的数据并非只有这些字段,而是由 返回字段 控制,参考下方第三项 返回字段)
- 将数据格式化。(例如:状态数据为 1/2/3,则可以格式化为正常/告警/严重,等中文展示。也支持添加 html 样式,展示 tag 块,颜色等等)
未完待续
2、条件字段
负责筛选或过滤数据使用,使用方式分为参数传入、固定值两种
- 参数传入(两种:动态传参/单行文本框)
动态参数:一般用于 左侧树 筛选或 表单设计 中自定义查询使用,属于完全动态等待用户交互后才能传参筛选,使用方式参考表左侧树或表单设计中的自定义查询功能。
单行文本框:用来定义自定义对话框上方的搜索框,参考下方样式。
- 固定值
固定值比较简单,用于筛选条件为非动态参数,提前定义好筛选的数
3、返回字段
对话框选择完数据后,返回字段除了可以决定最终返回哪些字段外,还可以改写返回名(key)。例如数据库列名 fullname_,可以改写为 name。
勾选数据返回的 json 对象如下所示。
[{"id":"1","name":"系统管理员11","email":"956699386@qq.com","mobile":"15484524581",
"weixin":"lightning","address":"http://baidu.com1"}]
4、排序字段
数据的默认排序方式,可以选一种或多种(优先级按从上往下)字段,每个字段独立的升降序可以自由选择
配置对话框参数(树形)
显示字段如图配置。
展示效果
开启左侧树的用户列表