logologo
开始
教程
手册
开发
插件
API
首页
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
开始
教程
手册
开发
插件
API
首页
logologo

V2 教程(IT 工单系统)

教程简介
第 1 章:认识 NocoBase — 5 分钟跑起来
第 2 章:数据建模 — 两张表搞定工单系统
第 3 章:搭建页面 — 从空白到可用
第 4 章:表单与详情 — 录入、展示、一步到位
第 5 章:用户与权限 — 谁能看什么
第 6 章:工作流 — 让系统自动干活
第 7 章:仪表盘 — 一眼看全局

V1 教程(旧版)

任务管理系统概览
第 1 章:初识 NocoBase
第 2 章:设计任务管理系统
第 3 章:任务数据管理
第 4 章:任务与评论插件
第 5 章:标签页与动态区块
第 6 章:用户与权限
第 7 章:工作流
项目管理平台概览
第 8 章:知识库 - 树表
第 9 章:任务看板与图表
第 10 章:看板筛选与条件
第 11 章:子任务与工时计算
第 12 章:会议室预订与工作流
实现用户注册审核
实现 CRM 线索转化
Markdown 区块技巧
CRM 销售云功能概览
线索跟进与状态管理
CRM 销售云系统
使用 API Keys 获取数据
Markdown 模板变量用法
如何更快部署 NocoBase
CRM 销售管道可视化
CRM Demo 部署指南
Previous Page第 3 章:任务数据管理
Next Page第 5 章:标签页与动态区块

#第 4 章:任务与评论插件

回顾上一节

小伙伴们还记得上一节的挑战任务吗?我们要为任务表配置 状态 和 附件 字段,并在任务列表里展示它们。别急,咱们先揭晓答案!

  1. 状态字段的配置:
    • 选择 下拉菜单(单选) 字段,填写选项标签:未开始、进行中、待审核、已完成、已取消、已归档。颜色根据你的喜好自由设置,给任务增添一点色彩吧!

状态字段配置

  1. 附件字段的配置:
    • 新建 附件 字段,给它取个名字,比如“附件”,点击提交,完成得简简单单。

  1. 任务列表显示创建人和状态:
    • 在表格区块中勾选“创建人”、“状态”和“附件”字段,让任务列表展示更多关键信息,变得更加丰富。

任务列表显示字段

  1. 添加和编辑表单中显示字段:
    • 在弹窗表单中,别忘了勾选状态和附件字段,这样无论是添加还是编辑任务时,都能方便地看到这些字段。

表单中显示字段

做得不错吧?别急,反复操作几次,你会发现自己逐渐熟练掌握 NocoBase 的核心用法。每一步操作都为你后续的任务管理打下坚实的基础,咱们继续往下看!


#4.1 任务内容与评论:任务管理互动

到目前为止,你的任务管理系统已经能够承载基本的任务信息了。然而,我们知道,任务管理不仅仅是几行文字的描述,有时候我们需要更丰富的内容,以及团队成员之间的实时互动。

#4.1.1 Markdown(Vditor):让任务内容更加丰富

你可能已经注意到了 NocoBase 提供的 富文本 和 Markdown 编辑器,不过它们的功能可能还不够让你满意。 富文本编辑器功能较为有限,Markdown 编辑器虽然好用,但不支持实时预览。

那么,有没有一种编辑器既能实时预览、又支持丰富的功能呢?答案是肯定的!Markdown(Vditor) 是 NocoBase 里功能最强大的文本编辑器,支持实时预览、图片上传、甚至语音录制。而且,它已经内置在系统中,完全免费!

插件简介: 插件是NocoBase的核心功能之一,允许用户根据项目需求添加自定义功能或集成第三方服务。 通过使用插件扩展,可以扩展实现一些方便或意想不到的功能集成,更加方便你的创作与开发。

下面我将带你一步步开启这个强大的编辑器,还记得我们的插件管理器吗?哈哈没错,它就在里面。

Markdown(Vditor): 用于存储 Markdown,并使用 Vditor 编辑器渲染,支持常见 Markdown 语法,如列表,代码,引用等,并支持上传图片,录音等。同时可以做到即时渲染,所见即所得。

  1. 启用 Markdown(Vditor) 插件:
    • 打开右上角的 插件管理器,输入 "markdown" 搜索插件,启用 Markdown(Vditor)。别担心页面会短暂刷新,几秒钟后它就会恢复正常啦。

启用 Markdown 插件

  1. 创建 Markdown 字段:

    • 回到任务表,点击“创建字段”,我们的 Markdown Pro Plus 加强版已经出现了!

  • 给它取个名字,比如“任务详情(task_detail)”,勾选所有可用功能。
  1. 你可能注意到 “文件数据表” 的选项,不选会不会影响文件功能?不必担心,会存储到我们的默认存储空间中,放心使用吧。

  1. 测试 Markdown 字段:
    • 现在返回任务管理页面,开始写下你的第一个 Markdown 文本吧!再试试粘贴图片,或者上传文件,是不是感觉很强大?

任务表越来越丰富了!跟随每个步骤,你的系统功能逐步扩展,接着我们来看看如何调整字段的排布,让界面更加美观。

#4.1.2 调整字段的排布

随着任务表里字段的增多,页面布局可能会显得有些混乱,别担心,NocoBase 的灵活性让你可以轻松调整字段的位置。

调整字段位置:

  • 将鼠标移到字段右上角的十字图标,点击并拖动字段到想要的位置,放手即可完成调整。试试看,页面瞬间整洁多了吧!

调整字段位置

这样操作后,页面布局会更符合你的需求。接下来,我们来为任务表增加评论功能,让团队互动更轻松。

#4.2 评论功能

光有任务描述还不够,有时我们还需要团队成员为任务添加评论,讨论问题,记录反馈。一起开始实现吧。

#4.2.1 方法一:使用评论插件

#4.2.1.1 安装评论插件

评论插件 (商业插件): 提供评论数据表模板和区块,为任意数据表的数据添加评论功能。

注意添加评论时需要通过关系字段关联目标数据表,以免评论数据冲突

在 插件管理器 中,上传并启用 评论插件。插件启用后,数据源里会出现一个新的“评论表”选项。 点击添加 > 上传插件 > 拖入压缩包 > 提交 搜索评论,评论插件已经出现!开启后进入数据源,看到评论表的选项了,安装成功!

安装评论插件

#4.2.1.2 新建评论表

我们切换到数据源,新建评论数据表 评论表(Comments)。

#4.2.1.3 评论表与任务表的关系探讨

我们已经创建了 评论表(Comments),可能你会想:是不是可以直接去页面上绘制评论区了呢?别着急,我们先来想一想,每个任务都有自己的评论区,而评论和任务之间应当是多对一的关系。那么如何把评论和任务联系起来呢?

对了!这就是我们接下来要用到的“关系字段”!

NocoBase 允许我们通过关系字段,在数据层面上把表与表之间的关系建立起来,就像搭建桥梁一样,将相关的数据紧密连接。

为什么选择多对一关系?

我们为什么要选择多对一关系,而不是一对多或其他类型的关系呢?回想一下,每个任务都有多个评论,因此,多条评论可以指向同一个任务。这种情况下,我们就需要在评论表中创建一个多对一的字段,指向任务表中的任务。

聪明的你可能已经想到: 既然评论和任务是多对一的关系,那么在任务表中是不是可以建立一个一对多的字段,来指向评论表呢? 恭喜你,完全正确! 一对多和多对一是互为反向的关系,我们同样可以在任务表里创建一个一对多的字段,关联到评论表。你真是棒极了!

#4.2.1.4 设置多对一关系字段

接下来,我们就要在评论表中创建一个多对一的字段,用来与任务表进行关联。我们可以将这个字段命名为所属任务(belong_task)。在设置时,有几个关键配置需要注意:

  1. 数据源表:我们从哪里发起关系?这里选择的是评论表。
  2. 目标数据表:我们要与哪张表建立关系?这里选择的是任务表。

外键与目标数据表字段标识:举例: 接下来是关键的部分:外键和目标数据表字段标识。 这个概念听起来有点复杂?别担心,接下来我们用一个详细的例子来帮你轻松理解。

设想一个场景,假如你现在手里有很多张高考成绩单,我们的任务是将每一张成绩单找到它所对应的学生。那么我们如何做呢? 我们拿到了一张成绩单,上面有如下信息:

  • 姓名:张三
  • 班级:高三十五班
  • 准考证号:202300000001
  • 身份证号:111111111111 现在,假设你想通过姓名和班级来找到学生张三。但是问题来了——在同一个学校里,同名的学生有很多,光高三十五班就有 20 个叫张三的同学!这样光靠姓名和班级,很难精确地确认是哪一个张三对吧? 这时候,我们就需要一个更独特的标识来帮助我们识别。比如,准考证号就是一个非常好的选择。每个学生的准考证号都是唯一的,通过准考证号,我们可以精准地找到成绩单对应的学生。例如,你发出了准考证号 202300000001 的查询,不一会儿,有个学校传来了回复:“这张成绩单属于张三,我们高三十五班第 3 排戴眼镜的那个!” 同样的道理,回到评论关系设计的场景,你是否灵光一现:我们可以选一个任务表的唯一标识字段(比如 id),保存到这个评论中,来确定评论归属于哪个任务? 这就是多对一关系的实现的核心概念:外键,简单吧,哈哈哈

我们在评论表中,保存任务表的这个唯一 id 字段,我们命名为 task_id,这样就能通过 task_id 把评论和任务绑定在一起。

#4.2.1.5 删除时的外键处理策略

在 NocoBase 中,设置多对一关系后,还需要考虑如果删除任务时,评论的数据应当如何处理。你可以选择以下几种方式:

  • CASCADE:如果你删除了任务,所有与这个任务关联的评论也会一起被删除。
  • SET NULL(默认设置):任务被删除时,评论的数据会被保留,但关联的外键字段会被置空。
  • RESTRICT 和 NO ACTION:当任务有关联的评论时,系统会阻止你删除这个任务,确保评论不会丢失。

#4.2.1.7 在任务表中创建反向关系

最后,我们勾选 ”在目标数据表里创建反向关系字段”,用来方便我们从任务中查看所有关联的评论。这让数据管理更加便捷。

在 NocoBase 中,关系字段的存放位置决定了数据的获取方式,所以如果我们希望在任务表中也能查看到对应的评论数据,就需要在任务表中创建一个一对多的反向关系字段,关联到评论表。

当你再次打开任务表时,系统会自动生成一个关联的评论字段,并注明“一对多”的关系,这样你就可以轻松查看和管理所有关联的评论啦!

#4.3 页面搭建

#4.3.1 开启评论表

紧张刺激的时刻来了,我们回到编辑弹窗,创建评论表区块,顺便勾上需要的功能,搞定!

demov3N-16.gif

#4.3.2 调整页面

我们美化下页面样式,鼠标放在编辑按钮右上侧,选择较宽的弹窗。运用我们刚学的知识,拖动评论区块,放在弹窗右侧,完美!

demov3N-17.gif

现在有的朋友可能眼馋了:我也想要实现评论!别怕,我也为你准备了第二种免费方案。

#4.2.2 方法二:自定义评论表

如果你没有购买评论插件,我们还可以通过创建普通表来实现类似的评论功能。

  1. 新建评论表:

    • 创建 评论表(comments2),添加 评论内容(content) 字段(Markdown 类型)和 所属任务(belong_task) 字段(多对一类型)。
  2. 在页面中创建评论列表区块:

    • 在任务表的编辑弹窗中,添加一个 列表区块(我们的第三种区块出现啦,列表同时可以展示字段的详情信息),选择评论,测试一下: 创建评论列表区块

#小结

你已经学会了如何通过 Markdown(Vditor) 丰富任务内容,并且给任务添加了评论功能!任务管理系统已经有了完整的功能基础,是不是感觉自己离打造一个专业的任务管理工具更近了一步呢?

别忘了继续探索和操作,NocoBase 充满无限可能。如果你遇到什么问题,别慌,我会一直陪着你,带你走过每个步骤。

下一章(第五章:标签页 & 区块 —— 丰富视图,精彩纷呈),我们将深入探索 NocoBase 的更多区块功能,帮助你把系统提升到一个新的高度。继续加油!


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