跳到主要内容

TaskList 控件介绍

TaskList 用于在页面中展示 Spark Tasks。它以任务设计器中保存的 Filter 为基础数据范围,并复用任务权限、任务字段、任务详情和运行期查询能力。

阅读本手册后,你可以完成以下配置:

  • 使用 Task Filter 限定 TaskList 的基础任务范围
  • 使用 Task Form 渲染高级查询条件
  • 添加系统字段和自定义字段作为表格列
  • 调整列顺序、标题、宽度、排序、固定方式和超长省略
  • 将 Task Key 或其他列配置为任务链接
  • 控制筛选栏、列设置和分页大小
  • 验证 Assignee、Select、Date 和 DateTime 字段的查询行为

1. TaskList 的适用场景​

TaskList 适合以下场景:

  • 在业务页面中展示某一种或一组任务
  • 使用 TQL 固定任务类型、状态、步骤或其他基础条件
  • 让用户继续按标题、负责人、时间和自定义字段缩小结果范围
  • 点击列表中的任务编号或业务字段打开任务详情
  • 在同一张表中同时展示任务系统字段和业务自定义字段

TaskList、DataList 和 ProTable 的数据边界不同:

控件主要数据查询定义典型用途
TaskListSpark TasksTask Filter + 运行期条件任务列表、审批列表、业务待办页面
DataListBusiness ObjectDQL + 模型筛选订单、客户、设备等对象数据
ProTableCustom URL 或模型数据源HTTP 请求参数或模型查询第三方接口、聚合数据、自定义分页协议

如果页面展示的不是任务,请改用 DataList 或 ProTable。

2. 前置知识与示例来源​

TaskList 展示的是 Spark Tasks 流程任务。开始配置前,建议先完成以下内容:

  1. 阅读流程设计器介绍,了解 Task Type、字段、表单、步骤、工作流和权限方案之间的关系。
  2. 完成 快速开始:采购审批流程,确保可以在 DEV 中创建并处理 Purchase Request。

本文直接复用该快速开始中已经配置完成的采购审批流程,不再重复创建流程资产。快速开始提供以下基础内容:

资产示例配置
Task TypePURCHASE / Purchase Request
WorkflowPurchase Approval
自定义字段包括 Finance Review Result、Department Review Result、Required Date 等采购申请字段
运行数据已在 DEV 中创建并完成不同审批分支验证的 Purchase Request

在这些流程资产之上,本文继续配置 TaskList 所需的列表资产和页面属性:

资产或属性本文配置
Task FilterAll Purchase Request Tasks
Filter TQLtaskType = "PURCHASE" ORDER BY createdAt DESC
Query FormpurchaseQueryForm
Query Form 字段Assignee、Finance Review Result、Department Review Result、Required Date
ColumnsTask Key、Title、Task Type、Current Step、Created At
Page Size20
Show Filter Bar开启
Show Column Settings开启

3. 使用前准备​

3.1 准备任务资产​

在当前应用和设计版本中确认以下资产已经保存:

  1. Task Type 已配置工作流、权限方案和所需表单。
  2. 需要展示或查询的自定义字段已经添加到 Task Type。
  3. 至少存在一个可供 TaskList 引用的 Task Filter。
  4. 如需高级查询,已经创建专用 Task Form。

TaskList 的候选项按当前 App + Version 加载。在 DEV 中,可以使用当前开发版本已经保存的任务资产;在 TEST 或 PROD 验证时,应确认对应版本已经发布到目标环境。

3.2 创建 Task Filter​

进入 Task Designer → Data & Permission → Filters,创建 Filter 并保存 TQL。本文示例为:

taskType = "PURCHASE" ORDER BY createdAt DESC

输入 taskType = 后,从当前版本的候选列表中选择 Purchase Request。TQL 使用稳定的 Task Type Key PURCHASE,不要用显示名称代替 Key。

Task Filter 决定 TaskList 的基础任务范围。运行期用户不能移除这段 TQL,任务权限也不会因为 Filter 条件而放宽。有关语法和权限边界,请阅读 Filter 与 TQL。

3.3 创建 Query Form​

Query Form 是可选配置,不是显示查询区域的前置条件。只要开启 Show Filter Bar,即使不选择 Query Form,TaskList 也会提供默认查询条件:

  • 首行快捷条件:Title、Status、Task Type、Created At。
  • 点击 More 后的高级条件:Current Step、SLA Status、Assignee、Updated At。

Search 保持为查询区域右侧的主按钮,More 和 Reset 使用紧随其后的图标按钮,列设置位于操作组末尾。配置 Query Form 后,TaskList 会保留上述默认条件,并在 More 区域继续追加 Query Form 中的自定义字段;Query Form 不会替换默认条件。关闭 Show Filter Bar 时,默认条件和 Query Form 都不会显示。

需要增加业务自定义查询字段时,建议创建专用 Task Form,只放置用户真正需要的查询字段,不要直接复制包含大量只读详情或附件的业务表单。

本文使用 purchaseQueryForm:

字段字段类型运行期查询控件
AssigneeUser用户选择器
Finance Review ResultSelectApproved / Rejected 下拉框
Department Review ResultSelectApproved / Rejected 下拉框
Required DateDate日期范围选择器

Query Form 不要求绑定某一个 Task Type 才能用于查询。字段定义仍来自当前应用和版本,因此应保证表单引用的字段没有被删除。

4. 添加并配置 TaskList​

  1. 打开目标页面并进入 Page Designer。
  2. 在左侧组件面板展开 Task 分组。
  3. 将 TaskList 拖入页面中的可接收容器。
  4. 选中 TaskList,在属性面板完成基础配置。

TaskList 的主要属性如下:

属性是否必填说明
Task Filter是选择任务设计器中保存的 Filter,运行期按 Filter Key 加载 TQL
Query Form否在默认查询条件之外,将 Task Form 字段追加到 More 区域
Columns否按顺序配置系统字段和自定义字段;未配置时使用任务列表默认列
Show Filter Bar否控制是否显示整个查询区域
Show Column Settings否控制右上角列设置入口;只有显示筛选栏时才会出现
Page Size否默认每页数量,默认值为 20,允许范围为 1 到 200

本文示例选择:

Task Filter: All Purchase Request Tasks
Query Form: purchaseQueryForm
Show Filter Bar: On
Show Column Settings: On
Page Size: 20

关闭 Show Filter Bar 后,快捷条件、More、Search、Reset 和列设置入口都会隐藏,页面只保留任务表格与分页器。适合查询范围固定、不允许用户继续调整条件的页面。

5. 配置 Columns​

5.1 添加和排序列​

展开 TaskList 下的 Columns,点击 Add。每次添加都会在左侧树中生成一条 Task Column,而不是把所有列保存在一个多选框中。

对每一条列配置:

  1. 在 Task Field 中选择系统字段或自定义字段。
  2. 检查自动带出的 Column Title,按页面语义修改标题。
  3. 打开 Advanced,按需要设置宽度、任务链接、排序、固定列和超长省略。
  4. 在左侧树中拖动 Task Column,调整运行期列顺序。

设计画布中的表头应随 Task Field、Column Title 和列顺序同步变化。Column Title 已经承担列显示名称,不需要再维护额外的 Display Name。

5.2 可选字段​

Task Field 候选分为两组:

  • System Fields:Task Key、Title、Task Type、Status、Current Step、Assignee、Creator、Created At、Updated At、SLA 等。
  • Custom Fields:当前应用和版本中定义的任务字段,例如 Amount、Category、Required Date、Department Review Result。

自定义字段即使不是独立 Worklist 的默认可见列,也可以由页面作者明确添加到 TaskList。

5.3 列高级属性​

属性说明
Width列宽,单位为像素
Task Link点击该列值时打开任务
Enable Sorting允许用户按该列排序,仅对后端支持排序的字段生效
Fixed Column将列固定在表格左侧或右侧
Show Ellipsis内容超出列宽时显示省略效果

SLA 状态列显示时固定在第一列。建议紧随其后放置 Task Key 和 Title,并为这两列开启 Task Link。也可以把其他业务字段设为任务链接;如果显式关闭某一列的 Task Link,该列会按普通文本显示。

运行期列设置只能临时隐藏已配置列或调整排序,不会反向修改页面设计器中的列结构和顺序。

6. 运行期查询区域​

6.1 快捷查询条件​

开启 Show Filter Bar 后,TaskList 顶部默认展示以下快捷条件:

  • Title
  • Status
  • Task Type
  • Created At

这些控件使用 Placeholder 说明用途,不重复显示可见 Label。Search、More、Reset 和列设置按此顺序位于右侧;More 和 Reset 使用带 Tooltip 的图标按钮。查询条件与操作组在同一水平线上垂直居中。

点击 More 后会显示:

  • Current Step
  • SLA Status
  • Assignee
  • Updated At
  • Query Form 中配置的字段

内置高级条件同样使用 Placeholder,不重复显示 Label。Query Form 字段保留表单自身的字段标题和布局,便于区分自定义业务条件。

6.2 Search 和 Reset​

  • Search:读取当前快捷条件和 Query Form 值,从第一页重新查询。
  • More 图标:展开或收起高级条件和 Query Form。
  • Reset 图标:清空运行期条件和 Query Form 值,然后重新查询。
  • Enter:在 Title 输入框中按 Enter 可以直接执行查询。

空值不会参与查询。Task Filter、快捷条件和 Query Form 条件按 AND 关系叠加,租户、应用、环境和任务浏览权限始终由后端强制执行。

例如,本文基础 Filter 已限定 taskType = "PURCHASE"。再选择 Assignee 和 Required Date 后,结果必须同时满足:

Purchase Request 基础范围
AND 当前 Assignee
AND Required Date 范围
AND 当前用户可浏览任务权限

7. Query Form 字段的查询规则​

查询控件由字段的真实类型决定,不根据字段名称猜测控件类型。

字段类型查询行为
Text、Textarea、Rich Text、Markdown包含匹配
Select、Radio、Switch等值匹配
多选字段集合匹配,即 IN
Number等值匹配
User、Assignee用户选择器提交用户 ID,界面持续显示用户名称
Department部门树选择器
Date、DateTimeRange 方式查询,开始和结束边界都包含在结果中
Attachment查询模式不渲染

隐藏字段不会进入 Query Form。业务表单中的 Required 属性在查询模式下不会强制用户输入;未填写的条件会被忽略。

7.1 Assignee​

Assignee 从当前应用可用的用户目录中搜索。选择用户后,查询请求使用稳定的用户 ID,但控件仍显示用户名称或账号,不应在点击 Search 后变成纯数字 ID。

7.2 Select​

Select 必须按字段配置的 Options 渲染。本文的 Department Review Result 和 Finance Review Result 都显示:

Approved
Rejected

字段名称中包含 Department 不会把 Select 误判为部门选择器。只有真实类型为 Department 的字段才显示部门树。

7.3 Date 和 DateTime​

Query Form 中的 Date 和 DateTime 使用范围选择器:

  • 只选择开始值:查询 field >= start
  • 只选择结束值:查询 field <= end
  • 同时选择:查询 field >= start AND field <= end

两个边界都是包含关系。Date 字段按日期值查询;DateTime 字段允许选择具体时间。

8. 打开任务和页面交互​

开启某一列的 Task Link 后,点击该列值会打开任务。

  • 未配置 onTaskClick:在新的浏览器标签页中打开 Spark 标准任务详情页,当前业务页面保持不变。
  • 已配置 onTaskClick:在当前页面执行页面设计器中的交互,并提供 task 和 record 上下文;此时不会自动打开标准详情页。
  • Ctrl / Command 点击等浏览器修饰点击:保留链接的浏览器默认行为。

需要由页面中的其他按钮刷新 TaskList 时,可以对该控件调用 Component API:

reloadTable

9. 示例验证清单​

在本文示例的 DEV 运行页面中依次验证:

  1. 列表只返回 Filter 范围内的 Purchase Request。
  2. 表头按 Task Key、Title、Task Type、Current Step、Created At 的顺序显示。
  3. Task Key 和 Title 都显示为链接,点击后在新的浏览器标签页中打开对应任务。
  4. 展开 More 后可以看到 purchaseQueryForm 的四个字段。
  5. 选择 Assignee 并点击 Search 后,控件仍显示用户名称。
  6. Department Review Result 显示 Approved / Rejected,而不是部门树。
  7. Required Date 选择不包含任务日期的区间时,该任务从结果中排除。
  8. 点击 Reset 后恢复到 Task Filter 的基础结果。
  9. 列设置可以临时隐藏列并切换可排序字段。
  10. 表格最后一条数据后直接衔接带分隔线的分页区域,没有无意义的大块空白。

下一步​