弹窗 #

如果我们希望字段在展示信息的同时, 可以弹窗展示更多的额外信息, 可以使用弹窗字段.

示例代码 #

弹窗字段的声明方式非常简单, 进需要在字段上增加 @Popup 注解, 并且配置相关信息即可.

示例代码:

public class Employee extends BasicModel {
    // ...
    @Field(title = "所属组织")
    @Popup(value = @RefComponent(value = OrgDescription.class, currentFieldInput = true))
    private Org org;
    // ...
}

入参说明 #

默认情况下, 会将当前记录传入给配置的组件.

如果需要声明传入的参数, 可以通过注解 @RefComponent.dataPath 来配置.

比如我们要展示当前用户所属组织的管理员信息, 数据示例如下:

{
    //...
    "org": {
        "id":1,
        "adminInfo": {
            //...
        }
        //...
    }
    //...
}

如果我们弹窗需要接收的是 org.adminInfo, 则直接声名 @RefComponent(dataPath = ["org", "adminInfo"]) 即可, 代码示例如下:

public class Employee extends BasicModel {
    // ...
    @Field(title = "所属组织管理员信息")
    @Popup(value = @RefComponent(value = EmployeeDescription.class, dataPath = ["org", "adminInfo"]))
    private Org org;
    // ...
}

@Popup 属性说明 #

• value:
  • 类型: RefComponent
  • 默认值: 无
  • 配置作用: 弹窗所依赖的组件
• width:
  • 类型: int
  • 默认值: 0
  • 配置作用: 弹窗的宽度, 为 0 则自适应, 默认为 0
• title:
  • 类型: String
  • 默认值: ""
  • 配置作用: 弹窗的标题, 为空则不显示, 默认为空
• popupType:
  • 类型: Enum<PopupType>
    • Drawer: 抽屉
    • Modal: 模态窗
    • Popover: 气泡浮窗
  • 默认值: Drawer
  • 配置作用: 弹窗方式, 默认为抽屉
• triggerType:
  • 类型: Enum<PopupTriggerType>
    • Click: 左键点击
    • ContextMenu: 右键点击
    • Hover: 悬浮触发
  • 默认值: Click
  • 配置作用: 触发方式, 默认为左键点击
• placementType:
  • 类型: Enum<PopupTriggerType>
    • Top: 从上侧滑出
    • Bottom: 从下侧滑出
    • Left: 从左侧滑出
    • Right: 从右侧滑出
  • 默认值: Click
  • 配置作用: 如果类型是抽屉, 则声明抽屉的滑出方向方式, 默认为从右侧滑出
• refresh:
  • 类型: boolean
  • 默认值: true
  • 配置作用: 当弹窗关闭时, 是否触发刷新
• closePopupOnSuccess:
  • 类型: boolean
  • 默认值: true
  • 配置作用: 当弹窗内 Action 触发且成功时, 是否关闭当前弹窗

弹窗类型 #

气泡浮窗 Popover #

抽屉浮窗 Drawer #

模态窗 Modal #