跳到主要内容

使用甘特图 Gantt

全新配置一个 Gantt 图​

基础 Gantt 图​

  1. 新建一个表单，作为 Gantt 图的数据源。数据源必须包含以下字段，字段 ID 无要求，按照项目需求填写即可：
  • 显示名称字段，(单行文本组件)；
  • 开始日期，(日期组件)；
  • 结束日期(日期组件)和持续时间(数字组件)。

数据源

  1. 新建一个页面，从左侧的组件列表中找到 Gantt 组件，拖拽到页面中。 同时在 “数据源” 设置中，选择第一步新建的表单。此时，“数据映射” 会自动识别并填充表单中的字段，如果未识别，需要手动去选择字段作为 “显示名称”、“开始日期”、“结束日期”、“持续时间”。

Gantt 组件

  1. 将页面添加到项目菜单，访问页面即可。此时 Gantt 图已经可以进行操作添加数据以及编辑删除操作，一个基础功能的 Gantt 图就完成了。

页面访问

支持连接关系​

提示

由于“连接关系数据源”配置固定，同时没有展示需求，只用来存储 Gantt 图的连接关系，所以可以点击数据源配置中的 “自动自动生成一个表单作为其数据源”即可。

Gantt 图的连接关系需要一个“连接关系数据源”。此数据源要求必须要有以下 3 个字段，字段 ID 有要求，必须是如下 3 个字段：

  • Source，单行文本组件，同时 ID 必须是 source；
  • Target，单行文本组件，同时 ID 必须是 target；
  • Type，单行文本组件，同时 ID 必须是 type。

连接关系数据源

此时访问页面，就可以通过鼠标在 Gantt 图两个任务头尾拖拽进行连接。

连接 Task

支持树状结构​

备注

此示例 Gantt 图的整个树状结构数据都存在一个表单 “任务数据源” 里面。如果子任务需要存在不同的表单，可以参考下面文档 Gantt 图子任务数据源使用不同的表单。

层级关系字段用单行文本 Input​

提示

当不希望看到表示父级的字段，同时不用手动编辑表单去修改它的时候，可以使用一个简单的 单行文本 来存储数据。（如需使用 ACL 请往下看）

要支持树状结构，需要在数据源中添加一个单行文本并隐藏，用来表示父子关系。字段 ID 无要求，按照项目需求填写即可。

Parent

同时，在 Gantt 组件设置项中，选择添加的字段作为 “层级关系字段”。

Mapping Parent

此时去访问页面，可以看到每个任务的操作列多处一个 “+” 按钮，点击可以添加子任务。

Add Sub Task

层级关系字段用单行文本 ACL/Select​

提示

当希望编辑表单的时候看到表示父级的字段，同时可以手动编辑它的时候，可以使用一个 ACL 或者 下拉选择 来存储数据。

注意

父级字段的 组件类型（例如从 Input 改成了 ACL）、ID（token）、mapping、valueType 属性发生变动的时候，一定要去 Gantt 图设置项重新选择一下该字段，同时最好先删除清空 Gantt 图的所有子数据，否则会导致未知数据错误。

再次强调，父级字段发生上诉属性改变，一定要去 Gantt 图设置项重新选择一下该字段。

如下面设置。

  1. 我将 Gantt Data Form 表单里原来隐藏的 单行文本的 Input 删除，然后添加一个 ACL，ID（token）也叫 parent，同时数据源选择自身表单。

parent-use-acl

  1. 在 Gantt 图的设置项中，先点击 层级关系字段 右侧的 'X' 图标，删除掉，然后在下拉选项中重新选择上步加的 ACL 父亲 字段。

parent-use-acl-2

  1. 此时去试运行页面。删除老的 **Feature 1 ** 下的子任务 User Story 1。然后在 Feature 2 下点击 + 图标新建一条数据，可以看到如下图，Dialog 中的 父亲 字段是一个 ACL，已经被自动填充上了 Feature 2。

parent-use-acl-new

  1. 保存，打开浏览器的 网络 面板，点击 Gantt 图 Toolbar 右上角的刷新按钮。可以看到数据返回值已经是如下 parent 字段为标准的 ACL 数据格式。

parent-use-acl-network

提示

如果发现上面 3 步未成功，请打开 Gantt 的 JSON 模式，查看数据源的 parentFieldValue 属性是否是 父亲 ACL 字段存储的数据格式，如果不对可以手动手改。

parent-field-value

支持进度​

要支持进度，需要在数据源中添加一个“数字”组件，用来存储任务的进度。字段 ID 无要求，按照项目需求填写即可。

Progress Field

同时，在 Gantt 组件设置项中，选择添加的字段作为 “进度”。

Mapping Progress

此时去访问页面，鼠标 hover 到 Gantt bar 上，可以看到每个任务左侧下放多了一个小三角，可以进行拖拽修改任务进度。

Change Progress

如果想在 Gantt 图左侧的表格中查看进度，可以去 Gantt 组件设置中添加该列进行显示。

Add Progress Column

支持里程碑 Milestone​

要支持 Milestone，需要在数据源中添加一个下拉选择组件，选项里面必须有一个类型的值是 milestone 即可，其他选项随意。字段 ID 无要求，按照项目需求填写即可。

Type Field

同时，在 Gantt 组件设置项中，选择添加的字段作为 “类型”。

Mapping Type

此时去访问页面，在新增任务的时候类型选择 “Milestone”，Gantt 图中即会把该任务显示为 Milestone 样式。

Milestone

将 Gantt 数据作为当前表单的子表（类似可编辑表格）​

将 Gantt 图作为表单子表只需要在 Gantt 设置以及 “自动创建连接关系数据源” 的时候均钩上 “将此甘特图的数据源作为当前表单的子表，绑定到当前表单数据” 选项即可。

提示
  • 此操作要求 Gantt 图必须位于表单的某个布局当中，否则无法绑定。
  • 此操作要求 Gantt 图的 “数据源” 和 “连接关系数据源” 必须要有一个 parentDataId 字段，并设置为隐藏。
  • 此操作要求 Gantt 图必须在表单的 “编辑” 布局当中，也就是要求当前表单数据已经存在。（因为要绑定所有 Gantt 的数据到这个表单数据的 id，表单数据只有在编辑的时候才是有 id 的）

As Sub Data

parentDataId

parentDataId

此时去新建一个表单，并且在表单的编辑布局当中添加此 Gantt 图，并且为表单建多条数据，就可以看到每条数据的 Gantt 图数据互相不影响。

自定义工作日历​

默认 Gantt 的会自动使用周一到周五的工作日历，周六周日会显示为灰色，并且计算 Duration 的时候会自动排除周六周日。

如下面的例子。

User Story 1 这个任务的执行日期是 2024-10-05 号开始，持续时间是 4 天：

22

这时，通过拖拽调整任务往后拖拽一天到 2024-10-06 号开始，Gantt 会自动跳过周末的 09 10 号两天，持续时间依然是 4 天：

23

如果想关闭此功能，不自动跳过周末，可以取消如下设置的 Checkbox。

Close Work Time

如果想修改默认的周一到周五的工作日历，自定义节假日等，可以自定义工作日历的数据源：

数据源需要返回给 Gantt 如下格式的数据

const calendar = [{
  id: '0001', 
  name: 'Normal 工作日历',
  // 默认工作时间
  worktime: { 
    days: [0, 1, 1, 1, 1, 1, 0],
    hours: ['9:00-18:00'],
  },
  // 假期
  holidays: [
    // 元旦
    { date: '2024-01-01', hours: false },
  ],
}]
日历格式

日历数据必须包含一下字段：

  • id, 日历的 id，用来区分不同的日历；
  • name，日历显示的名称；
  • worktime，定义工作时间的规则，其中
    • days，周日到周一 7 天组成的数组，0 表示休息日，1 表示工作日。例如如上例子表示周一到周五是工作日，周六周日是休息日；
    • hours，每天的工作时间。例如如上例子表示每天 9 点到 18 点是工作时间；
  • holidays，定义假期的规则，其中
    • date，假期的日期，精确到年月日；
    • hours，表示是休息日还是工作日。false 表示非工作日，true 表示工作日（例如调休）

日历数据可以是个数组包含多个日历，用户在页面可以自由切换选择不同的日历, 其中 "Normal 工作日历" 定义了完整的节假日。"Special 工作日历" 使用一周工作 6 天的工作日历。

如下图我配置的一个 2024 年的两个工作日历示例：

备注

没有设置真实数据源，数据源里面自定义写了 / 保证请求不出错，然后直接在 “转换接受的数据”返回的测试数据。

Custom Work Time

可以看到 Gantt 图已经按照自定义的假期规则进行了展示，同时 Toolbar 右上角可以进行切换不同的工作日历。

Custom Work Time run

该工作日历的 "转换接收的数据" 示例数据如下：

(function transform(data) {
  // 直接返回 mock 的测试数据
  return [
    {
      id: '0001',
      name: 'Normal 工作日历',
      // 默认工作时间
      worktime: {
        days: [0, 1, 1, 1, 1, 1, 0],
        hours: ['9:00-18:00'],
      },
      // 假期
      holidays: [
        // 元旦
        { date: '2024-01-01', hours: false }, // hours: false 表示非工作日，hours: true 表示工作日（例如调休）

        // 春节
        { date: '2024-01-04', hours: true },
        { date: '2024-01-10', hours: false },
        { date: '2024-01-11', hours: false },
        { date: '2024-01-12', hours: false },
        { date: '2024-01-13', hours: false },
        { date: '2024-01-14', hours: false },
        { date: '2024-01-15', hours: false },
        { date: '2024-01-16', hours: false },
        { date: '2024-01-17', hours: false },
        { date: '2024-01-18', hours: true },

        // 清明节
        { date: '2024-04-04', hours: false },
        { date: '2024-04-05', hours: false },
        { date: '2024-04-06', hours: false },
        { date: '2024-04-07', hours: true },

        // 劳动节
        { date: '2024-04-28', hours: true },
        { date: '2024-05-01', hours: false },
        { date: '2024-05-02', hours: false },
        { date: '2024-05-03', hours: false },
        { date: '2024-05-04', hours: false },
        { date: '2024-05-05', hours: false },
        { date: '2024-05-11', hours: true },

        // 端午节
        { date: '2024-06-10', hours: false },

        // 中秋节
        { date: '2024-09-15', hours: false },
        { date: '2024-09-16', hours: false },
        { date: '2024-09-17', hours: false },

        // 国庆节
        { date: '2024-09-29', hours: true },
        { date: '2024-10-01', hours: false },
        { date: '2024-10-02', hours: false },
        { date: '2024-10-03', hours: false },
        { date: '2024-10-04', hours: false },
        { date: '2024-10-05', hours: false },
        { date: '2024-10-06', hours: false },
        { date: '2024-10-07', hours: false },
        { date: '2024-10-12', hours: true },
      ],
    },
    {
      id: '0002',
      name: 'Special 工作日历',
      worktime: {
        days: [1, 1, 1, 1, 1, 1, 0],
        hours: ['9:00-18:00'],
      },
    },
  ];
})(this);

新建任务走流程（自定义 Add、Edit、Delete 按钮）​

默认情况下，Gantt 图会在 Toolbar 自带一个 新增 按钮，在每个任务操作列自带三个按钮 新增子任务 编辑 删除， 并且会自动调用表单数据源的接口操作数据。如果想要自定义这些按钮的行为，例如

  • 在新增的时候走流程
  • 根据权限条件显示/隐藏按钮
  • 修改按钮 icon 和 text 等属性
  • 修改 Dialog 的 title, size 等属性

等等，可以分别对其进行设置。

提示
  1. 由于 Gantt 图限制，这 4 个按钮无法添加 成功过后的动作，无法修改按钮动作，以及其余一些默认属性。
  2. Toolbar 的新增任务按钮，和每条数据的新增子任务按钮，需要分别进行设置。

custom-add-button

custom-datasource-buttons

拖拽进行自定义排序​

要支持行数据的拖拽排序，需要在数据源中添加一个单行文本并隐藏，用来存储顺序。字段 ID 无要求，按照项目需求填写即可。

row-drag-setting-1

同时，在 Gantt 组件设置项中，选择添加的字段作为 “拖拽排序字段”。

row-drag-setting-2

此时去访问页面，在任意一个行数据按下鼠标左键并上下拖拽即可排序。可在同级排序，也可将一个 Task 拖拽到任意一个 Task 上以移动过去作为其 child。

row-drag-view

支持小数点 Duration (TODO)​

不实时保存数据，调整完所有数据主动点击 Button 保存 (TODO)​

在已有表格基础上增加 Gantt 视图​

添加 Gantt 视图​

假设现在已经有一个表格，表格中有开始日期和结束日期两个字段并且已有数据了，现在想要在这个表格的基础上增加一个 Gantt 视图。

可以在表格上面右键 -> 添加视图 -> 甘特图 来增加一个 Gantt 视图。

Add Gantt View

同时，按照需求设置好 Gantt 图的功能。

Gantt Setting

此时去访问该页面，可以看到在表格左上方多了一个 Gantt 视图，点击可以切换到 Gantt 视图。

Gantt View

添加 Table 视图​

同理，如果已经有一个 Gantt 图，想在此基础上增加一个 Table 视图。

可以在 Gantt 上面右键 -> 添加视图 -> 表格 来增加一个 Table 视图。

备注

一个 “组合视图” 下只能同时有一个 Gantt 视图和一个 Table 视图。

Add Table View

修改切换视图默认显示的 “表格” 和 “甘特图” 文本。​

默认在 “组合视图” 下，Gantt 图左上角会显示 “表格” 和 “甘特图” 两个文本来切换视图。可以修改 Gantt 和 Table 的 “显示名称” 来修改这两个文本。

Change Switch Label

Gantt 图子任务数据源使用不同的表单​

Gantt 图的子任务数据源可以分别使用不同的表单。

例如：

  1. 这里新建了 3 个表单 Epic -> Feature -> User Story 分别表示 3 层关系。

Feature 里有一个 Epic 的 ACL 字段，数据源是 Epic。

User Story 里有一个 Feature 的 ACL 字段，数据源是 Feature。

multi-sub-task-epic

multi-sub-task-feature

multi-sub-task-us

  1. 新建一个页面，添加 Gantt 图。在 Gantt 图的设置项中，选择 Epic 作为 任务数据源，然后点击下方的 添加子任务数据源，选择 Feature 作为 第 1 层子任务数据源。同理选择 User Story 作为 第 2 层子任务数据源。

multi-sub-task-gantt

multi-sub-task-gantt-2

  1. 同时做好 Gantt 图的其余设置。（可以看到，此时下面 数据映射 设置项中没有 层级关系字段，因为现在需要在每一层子任务数据源当中去指定）。

multi-sub-task-gantt-2

  1. 此时去试运行页面，点击 Toolbar 的 新增 按钮添加几条 Epic 数据。然后在 Epic 数据上点击 添加子任务，会看到 Dialog 中使用的表单是 Feature 表单。

multi-sub-task-run

API​

完整的 Gantt API 参考在此处 Gantt