Fastball时间轴
用于处理树形数据的组件.
配置说明
注解配置
- 配置注解:
@dev.fastball.ui.components.timeline.config.TimelineConfig - 属性说明:
- keyField:
- 类型:
String - 默认值:
id - 配置作用: 数据的标识字段, 默认是 id
- 类型:
- leftField:
- 类型:
String - 默认值: 无
- 配置作用: 时间轴节点左侧的展示字段
- 类型:
- rightField:
- 类型:
String - 默认值: 无
- 配置作用: 时间轴节点右侧的展示字段
- 类型:
- colorField:
- 类型:
String - 默认值:
"" - 配置作用: 时间轴节点的颜色字段, 为空则为默认的蓝色, 可以配置色码, 比如白色:
#FFFFFF
- 类型:
- keyField:
基础时间轴
- 实现接口:
dev.fastball.ui.components.timeline.Timeline<Model> - 使用场景: 用于展示简单的时间轴数据, 比如 Changelog
- 方法说明:
Collection<Model> loadData(): 用于返回时间轴的数据
- 示例代码链接:
java
@UIComponent
@TimelineConfig(
leftField = "changedAt",
rightField = "content"
)
public class ChangeLogTimeline implements Timeline<ChangeLog> {
}
有参时间轴
- 实现接口:
dev.fastball.ui.components.timeline.VariableTimeline<Model, Param> - 使用场景: 用于展示有参数的时间轴数据, 比如基于订单号查询订单配送时间轴
- 方法说明:
Collection<Model> loadData(Param): 用于返回时间轴的数据
- 示例代码链接:
java
@UIComponent
@TimelineConfig(
keyField = "id",
leftField = "startedAt",
rightField = "workContent"
)
public class EmployeeWorkEvaluationTimeline implements VariableTimeline<WorkEvaluation, Employee> {
private final WorkEvaluationRepository repo;
@Override
public Collection<WorkEvaluation> loadData(Employee employee) {
if (employee == null || employee.getId() == null) {
return repo.findAll();
}
return repo.findByEmployeeId(employee.getId());
}
}