自定义对话框 #

简介 #

在开发过程中，经常需要打开一个对话框来展示特定数据，通常是一些要展示一些列表或视图的列表或树形数据，然后用户选择后数据后会能和前端有一个交互行为。

使用方式 #

自定义对话框一般用于 开发设计表单，直接选择自定义对话框以及完成相应的配置即可。详情配置参考表单开发

可以通过非配置式直接使用自定义对话框组件在任何页面中使用，参考自定义对话框组件

对话框配置 #

一、基础配置 #

二、左侧树（可选） #

对话框内的数据量大的并且有分类的列表数据，可以将分类通过 字典分类 或 自定义对话框 以树形的方式展示在数据列表的左侧，并通过配置对话框参数中的 条件字段 起到快速筛选数据的作用。

三、数据来源(四种) #

• 数据库 #

  

• 系统服务接口 #

有复杂业务数据需求，可以使用接口形式获取对话框需要的数据

    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、排序字段 #

数据的默认排序方式，可以选一种或多种（优先级按从上往下）字段，每个字段独立的升降序可以自由选择

配置对话框参数（树形） #

显示字段如图配置。

展示效果 #

开启左侧树的用户列表