第五章:标签页 & 区块 —— 丰富视图,精彩纷呈

小伙伴们,欢迎来到第五章!这一章内容非常精彩,我们将为任务管理页面增添更多的功能,支持各种不同的视图方式。相信你已经期待已久了,对吧?别急,我会一步步带你去实现,像往常一样,咱们一起轻松搞定!

5.1 标签页容器,容纳各种区块

我们已经创建了任务管理页面,但为了让系统更加直观,我们希望任务可以在页面内切换不同的展示模式,比如 表格看板日历,甚至 甘特图 。NocoBase 的标签页功能让我们可以在同一页面中切换不同的区块排布,别担心,我们慢慢操作。

  • 创建标签页 首先,咱们来创建标签页。
  1. 新增子标签页

    • 打开你之前的任务管理页面,在页面内创建一个子标签页。第一个标签页我们可以命名为 “表格视图”,这个视图里展示我们已经设置好的任务列表区块。
  2. 再创建一个新标签页

    • 接下来,咱们再创建一个标签页,叫 “看板视图”。我们将在这里创建任务的看板区块。 创建标签页

准备好了吗?我们进入各种区块的创建吧!

区块简介: 区块是数据和内容的载体,将数据以合适的方式呈现在网站上,可以放置于页面(Page)、对话框(Modal)或抽屉(Drawer)里,多个区块可以自由拖拽排列,在区块中对数据的不断操作可以实现各种配置和展示。 通过在NocoBase中使用区块功能,在此次学习案例中应用,能够更加快捷地实现和管理系统的页面和功能的构建,同时区块可以设置模板方便复制和引用,极大地减少了创建区块的工作量。

5.2 看板区块:任务状态一目了然

看板是任务管理系统里非常重要的一个功能,它能让你通过拖拽方式直观地管理任务状态。比如,你可以按照任务的状态进行分组,直接看到每个任务处在哪个阶段。

5.2.1 看板区块的创建

  1. 开始新建看板区块
  • 看板视图 标签页中,点击“创建区块”,选择任务表,接下来会出现一个选项,询问你需要按照哪个字段对任务进行分组。
  1. 选择分组字段
  1. 添加排序字段
  • 看板内的卡片可以通过排序字段来调整顺序。为了实现这一功能,我们需要新建一个排序字段。点击“添加字段”,创建一个名为 状态排序(status_sort) 的字段。
  • 这个字段是为了定位拖拽看板时,卡片的上下顺序,就像坐标一样,左右分组是不同状态,上下位置则是排序的值。后期我们拖拽卡片后,可以从表单中观察排序值的变化。 创建看板区块

5.2.2 勾选字段与操作

  • 最后,记得在看板区块中勾选需要展示的字段,比如任务名称、任务状态等,确保卡片的信息丰富完整。

看板字段展示

5.3 使用模板:复制与引用

新建看板区块后,我们需要创建一个 新增表单。这里,NocoBase 提供了一个非常方便的功能——你可以 复制引用 之前的表单模板,这样我们就不用每次都重新配置。

5.3.1 保存表单为模板

  • 在你之前的新增表单中,鼠标移到表单配置上,点击“保存为模板”。你可以为模板取个名字,比如 “任务表_表单 新增”。

保存表单为模板

5.3.2 复制或引用模板

在看板视图中新建表单时,你会看到两个选项:“复制模板” 和 “引用模板”。你可能会问:它们有什么区别呢?

  • 复制模板:相当于复制了一份新的表单副本,你可以独立修改它,不会影响原来的表单。
  • 引用模板:则是将原表单直接“借用”过来,任何修改都会同步到其他引用这个模板的地方。比如你修改了字段顺序,所有引用此模板的表单都会跟着变化。

复制与引用模板

你可以根据自己的需求选择复制还是引用模板。一般来说,引用模板 更加方便,因为你只需修改一次,所有地方都会同步生效,非常省时省力。

5.4 日历区块:任务进度一目了然

接下来,让我们来创建一个 日历区块,帮助你更好地管理任务的时间安排。

5.4.1 创建日历视图

5.4.1.1 新建日期字段

日历视图需要知道任务的 开始日期结束日期,因此我们需要在任务表中新增两个字段:

  • 开始日期(start_date):标记任务的开始时间。
  • 结束日期(end_date):标记任务的结束时间。

新增日期字段

5.4.2 新建日历区块:

回到日历视图,创建一个日历区块,选择任务表,并使用刚刚创建的 开始日期结束日期 字段。这样,任务将在日历上显示为一个持续时间段,直观展示任务的进展。

日历视图搭建

5.4.3 体验日历操作:

在日历上,你可以随意拖拽任务,点击并编辑任务的详细信息(别忘了复制或引用模板)。

日历操作

5.5 甘特图区块:管理任务进度的神器

最后一个区块是 甘特图区块,它是项目管理中常用的工具,帮助你追踪任务的进度和依赖关系。

5.5.1 创建“甘特图视图”标签页

5.5.2 新增“完成比例”字段

为了让甘特图更好地展示任务进度,我们需要新增一个字段,叫 完成比例(complete_percent)。这个字段用来记录任务的完成进度,默认值为 0%。

新增完成比例字段

5.5.3 新建甘特图区块

在甘特图视图里,创建一个甘特图区块,选择任务表,并配置好相关的开始日期、结束日期和完成比例字段。

甘特图视图搭建

5.5.4 体验甘特图拖拽功能

在甘特图中,你可以通过拖拽任务来调整它的进度和时间,任务的开始日期、结束日期以及完成比例都会跟着更新。

甘特图拖拽

小结

太棒了!你现在已经掌握了如何在 NocoBase 中使用多种区块来呈现任务数据,包括 看板区块日历区块甘特图区块。这些区块不仅让任务管理更加直观,还为我们带来了极大的灵活性。

但这只是开始!想象一下,在一个团队里,不同的成员可能拥有不同的职责,如何确保每个人都能无缝地协同工作?如何在保证数据安全的同时,让每个人只看到和操作与自己相关的内容呢?

准备好了吗?我们这就进入下一章: 第六章:合作伙伴——协作无间,灵活掌控

看看如何通过简单的操作,让我们的团队协作更上一层楼!


继续探索,尽情发挥你的创造力!如果遇到问题,不要忘了随时可以查阅 NocoBase 官方文档 或加入 NocoBase 社区 进行讨论。

× 放大图像