NocoBase V2 系列教程已在官网-教程专栏发布点击链接前往查看。https://docs.nocobase.com/cn/tutorials/v2/已发布教程速览NocoBase 2.0 入门教程 —— IT 工单系统第一章认识 NocoBase — 5 分钟跑起来第二章数据建模 — 给工单系统搭骨架第三章搭建页面 — 让数据看得见第四章表单与详情 — 让数据填得进第五章用户与权限 — 谁能看什么第六章工作流 — 让系统自己动起来第七章仪表盘 — 一眼看全局在这个系列里我们会从零开始用 NocoBase 搭建一个极简的工单系统HelpDesk。整个系统只需要 2 张数据表不写一行代码即可实现工单提交、分类管理、变更追踪、权限控制和数据仪表盘。上一章我们搭好了工单列表并用一个简易表单录入了测试数据。这一章我们来完善表单体验——优化表单区块的字段布局、添加详情区块、配置联动规则还能用变更历史追踪工单的每一次修改。:::tip本章 4.4 节「历史记录」功能包含在专业版中跳过该节不影响后续章节的学习。:::4.1 完善新建工单表单上一章我们快速创建了一个能用的新建表单现在来完善它——调整字段顺序、设置默认值、优化布局。如果你跳过了上一章的快速表单部分也没关系我们这里会从头开始新建表单。添加新建操作按钮确保处于 UI 编辑器模式右上角开关打开。进入「工单列表」页面点击表格区块上方的「操作Actions」。勾选「添加」操作按钮。表格上方会出现一个「添加」按钮点击它会打开一个弹窗。配置弹窗中的表单点击「添加」按钮打开弹窗。在弹窗中点击「创建区块Add block」→ 数据区块 → 表单添加。选择「当前数据表Current collection」。弹窗已经关联了对应的数据表上下文无需手动指定。在表单中点击「字段Fields」勾选以下字段字段配置要点标题必填跟随全局描述大文本输入状态下拉选择后面会通过联动规则设默认值优先级下拉选择分类关联字段自动显示为下拉选择器提交人关联字段后面会通过联动规则设默认值处理人关联字段你会发现「标题」字段旁边自动带了红色星号*——因为我们在第 2 章创建字段时已经设了必填表单会自动继承数据表层面的必填规则不用再单独配置。小技巧如果某个字段在数据表层面没有设为必填但你希望在当前表单中要求必填也可以在字段配置项中单独设置。添加提交按钮在表单区块下方点击「操作Actions」。勾选「提交」按钮。用户填完表单后点击提交即可创建一条新工单。4.2 联动规则默认值与字段联动有些字段我们希望自动填好比如状态默认「待处理」有些字段需要根据条件动态变化比如紧急工单必填描述。目前 2.0 的默认值功能形态还在演进中本教程统一使用联动规则来配置默认值和字段联动。点击表单区块右上角的区块设置三横线图标。找到「联动规则Linkage rules」点击后会在侧边栏打开配置面板。设置默认值我们先为「状态」和「提交人」设置默认值点击「添加联动规则」。不设置条件留空即可——无条件联动规则会在表单加载时立即执行。配置动作Actions状态字段 →设置默认值→ 待处理提交人字段 →设置默认值→ 当前用户注意字段值选择设置值时一定要先选择「当前表单」作为数据来源。如果是关联对象字段如分类、提交人、处理人等多对一字段必须选择对象属性本身而不是展开后的子字段。选择变量如「当前用户」时需要先单击选中变量再双击将其填充到选择栏中。如果希望某个字段提交人不能修改比如状态可以在字段配置项中将「显示模式Display mode」设为「只读Readonly」。三种显示模式可编辑Editable、只读Readonly禁止编辑但保留字段外观、阅读模式Easy-reading仅显示文本。紧急工单必填描述接下来添加一条有条件的联动规则当用户选择优先级为「紧急」时描述字段变成必填提醒提交人务必写清楚情况。点击「添加联动规则」。配置规则条件Condition当前表单 / 优先级等于紧急动作Actions描述字段 → 设为必填保存规则。现在测试一下选择优先级为「紧急」描述字段旁边会出现红色星号*表示必填。选择其他优先级则恢复为非必填。最后根据我们学到的简单调整一下布局联动规则还能做什么除了设置默认值和控制必填还可以控制字段的显示/隐藏、动态赋值。例如当状态为「已关闭」时隐藏处理人字段。后续章节遇到时我们再展开。4.3详情区块上一章我们给表格行加了「查看」按钮点击会打开抽屉。现在来配置抽屉里的内容。在表格中点击某一行的「查看」按钮打开抽屉。在抽屉中点击「创建区块Add block」→ 数据区块 → 详情。选择「当前数据表Current collection」。在详情区块中「字段Fields」布局如下区域字段顶部标题、状态标签样式主体描述大文本区域侧边信息分类名称、优先级、提交人、处理人、创建时间如何放置一个大标题选择 字段 markdown 编辑 markdown 编辑区域中选择变量 当前记录 标题这样就将记录的标题动态插入到了 markdown 区块中。删除默认文本用 markdown 语法将它变为 二级标题的样式 即前面加上 ## 空格 即可页面中本身的标题字段可以去掉了调整一下详情表单布局小技巧多个字段可以通过拖拽排列在同一行让布局更紧凑美观。在详情区块的「操作Actions」中勾选「编辑」按钮方便直接从详情进入编辑模式。配置编辑表单点击「编辑」按钮会打开一个新弹窗——里面需要放一个编辑表单。编辑表单的字段和新建表单几乎一样难道要再从头勾选一遍不用。还记得新建表单吗我们先把它保存为模板编辑表单直接引用就行。第一步回到新建表单保存为模板关闭当前弹窗回到工单列表点击「添加」按钮打开新建表单。点击表单区块右上角的区块设置三横线图标找到「保存为模板Save as template」。点击保存即可默认为「引用Reference」——所有引用该模板的表单共享同一套配置改一处全部同步。我们的工单表单不复杂选「引用」统一维护更省心。如果选「复制」则每个表单拿到独立副本各自修改互不影响。第二步在编辑弹窗中引用模板回到详情抽屉或表格操作列点击「编辑」按钮打开编辑弹窗。你可能会想直接通过「创建区块 → 其他区块 → 区块模板」来创建不就行了试一下你会发现——这样创建出来的是一个添加表单而且字段并没有自动填充。这是一个常见的坑。正确的做法是在弹窗中点击「创建区块Add block」→ 数据区块 → 表单编辑先正常创建一个编辑表单区块。在编辑表单中点击「字段Fields」→「字段模板Field templates」选择刚才保存的模板。字段会一键全部填充过来和新建表单完全一致。别忘了加上操作按钮「提交」让用户修改后能保存。以后想加字段只需在模板中修改一次新建和编辑表单同步更新。快速编辑不开弹窗也能改数据除了弹窗编辑NocoBase 还支持直接在表格中快速编辑——不用打开任何弹窗鼠标移上去就能改。开启方式有两处表格区块级别点击表格区块的区块设置三横线图标找到「快速编辑Quick editing」开启后整个表格的字段都支持快速编辑。单个字段级别点击某一列的字段配置项找到「快速编辑」可以逐个字段控制是否开启。开启后鼠标移到表格单元格上方会出现一个小铅笔图标点击即可弹出该字段的编辑组件修改后自动保存。适合哪些场景快速编辑非常适合需要批量修改状态、处理人等字段的场景。比如管理员浏览工单列表时可以直接点击「状态」列快速把工单从「待处理」改成「处理中」不用一个个打开编辑。4.4 启用历史记录:::info 商业插件「历史记录」是 NocoBase 专业版插件需要商业版授权才能使用。如果你使用的是社区版可以跳过本节不影响后续章节。:::工单系统最重要的一点是谁在什么时候改了什么必须有迹可循。NocoBase 的「历史记录」插件帮我们自动记录每一次数据变更。配置历史记录进入设置 → 插件管理确保「历史记录」Record History插件已启用。进入插件配置页面点击「添加数据表」选择「工单」。选择需要记录的字段标题、状态、优先级、处理人、描述等。建议不需要记录所有字段。像 ID、创建时间这些不会手动修改的字段没必要追踪。只记录业务上有意义的字段变更。这个时候回到配置项点击「同步历史数据快照」 插件会自动把现有所有工单记录为第一条历史记录后续每次修改都会新增一条历史记录。在详情页查看历史回到工单详情的抽屉页面点击表格行的「查看」按钮。在抽屉中「创建区块Add block」→ 历史记录。选择「当前数据表」数据选择「当前记录」。详情页底部会出现一个时间线清晰展示每一次变更谁在什么时间把哪个字段从什么值改成了什么值。这样即使工单经手了多人处理所有变更都一清二楚。小结这一章我们完成了数据的完整生命周期表单— 用户可以提交新工单字段有默认值和验证联动规则— 紧急工单自动要求必填描述详情区块— 清晰展示工单的完整信息历史记录— 自动追踪每一次变更审计无忧商业插件可选从「看得见」到「填得进」再到「查得到」——我们的工单系统已经具备了基本的可用性。相关资源表单区块 — 表单区块详细配置详情区块 — 详情区块配置联动规则 — 字段联动规则说明完全掌控无限扩展AI 协同。NocoBase 让你的团队快速响应变化大幅降低成本。无需多年研发无需数百万投入。花几分钟部署 NocoBase立即拥有一切。访问 NocoBase 官网https://www.nocobase.com/cn您可以在官网申请 Demo 演示体验站点将在 1 分钟内创建完毕自动发送到您的邮箱。访问 NocoBase GitHub 和 Giteehttps://github.com/nocobase/nocobasehttps://gitee.com/nocobase/nocobase下载 NocoBase 源码并安装。支持 Docker 安装、create-nocobase-app 安装和 Git 源码安装。官方文档持续更新中https://docs-cn.nocobase.com/
【2.0 教程】第 4 章：表单与详情 — 录入、展示、一步到位
发布时间：2026/6/6 16:28:37
NocoBase V2 系列教程已在官网-教程专栏发布点击链接前往查看。https://docs.nocobase.com/cn/tutorials/v2/已发布教程速览NocoBase 2.0 入门教程 —— IT 工单系统第一章认识 NocoBase — 5 分钟跑起来第二章数据建模 — 给工单系统搭骨架第三章搭建页面 — 让数据看得见第四章表单与详情 — 让数据填得进第五章用户与权限 — 谁能看什么第六章工作流 — 让系统自己动起来第七章仪表盘 — 一眼看全局在这个系列里我们会从零开始用 NocoBase 搭建一个极简的工单系统HelpDesk。整个系统只需要 2 张数据表不写一行代码即可实现工单提交、分类管理、变更追踪、权限控制和数据仪表盘。上一章我们搭好了工单列表并用一个简易表单录入了测试数据。这一章我们来完善表单体验——优化表单区块的字段布局、添加详情区块、配置联动规则还能用变更历史追踪工单的每一次修改。:::tip本章 4.4 节「历史记录」功能包含在专业版中跳过该节不影响后续章节的学习。:::4.1 完善新建工单表单上一章我们快速创建了一个能用的新建表单现在来完善它——调整字段顺序、设置默认值、优化布局。如果你跳过了上一章的快速表单部分也没关系我们这里会从头开始新建表单。添加新建操作按钮确保处于 UI 编辑器模式右上角开关打开。进入「工单列表」页面点击表格区块上方的「操作Actions」。勾选「添加」操作按钮。表格上方会出现一个「添加」按钮点击它会打开一个弹窗。配置弹窗中的表单点击「添加」按钮打开弹窗。在弹窗中点击「创建区块Add block」→ 数据区块 → 表单添加。选择「当前数据表Current collection」。弹窗已经关联了对应的数据表上下文无需手动指定。在表单中点击「字段Fields」勾选以下字段字段配置要点标题必填跟随全局描述大文本输入状态下拉选择后面会通过联动规则设默认值优先级下拉选择分类关联字段自动显示为下拉选择器提交人关联字段后面会通过联动规则设默认值处理人关联字段你会发现「标题」字段旁边自动带了红色星号*——因为我们在第 2 章创建字段时已经设了必填表单会自动继承数据表层面的必填规则不用再单独配置。小技巧如果某个字段在数据表层面没有设为必填但你希望在当前表单中要求必填也可以在字段配置项中单独设置。添加提交按钮在表单区块下方点击「操作Actions」。勾选「提交」按钮。用户填完表单后点击提交即可创建一条新工单。4.2 联动规则默认值与字段联动有些字段我们希望自动填好比如状态默认「待处理」有些字段需要根据条件动态变化比如紧急工单必填描述。目前 2.0 的默认值功能形态还在演进中本教程统一使用联动规则来配置默认值和字段联动。点击表单区块右上角的区块设置三横线图标。找到「联动规则Linkage rules」点击后会在侧边栏打开配置面板。设置默认值我们先为「状态」和「提交人」设置默认值点击「添加联动规则」。不设置条件留空即可——无条件联动规则会在表单加载时立即执行。配置动作Actions状态字段 →设置默认值→ 待处理提交人字段 →设置默认值→ 当前用户注意字段值选择设置值时一定要先选择「当前表单」作为数据来源。如果是关联对象字段如分类、提交人、处理人等多对一字段必须选择对象属性本身而不是展开后的子字段。选择变量如「当前用户」时需要先单击选中变量再双击将其填充到选择栏中。如果希望某个字段提交人不能修改比如状态可以在字段配置项中将「显示模式Display mode」设为「只读Readonly」。三种显示模式可编辑Editable、只读Readonly禁止编辑但保留字段外观、阅读模式Easy-reading仅显示文本。紧急工单必填描述接下来添加一条有条件的联动规则当用户选择优先级为「紧急」时描述字段变成必填提醒提交人务必写清楚情况。点击「添加联动规则」。配置规则条件Condition当前表单 / 优先级等于紧急动作Actions描述字段 → 设为必填保存规则。现在测试一下选择优先级为「紧急」描述字段旁边会出现红色星号*表示必填。选择其他优先级则恢复为非必填。最后根据我们学到的简单调整一下布局联动规则还能做什么除了设置默认值和控制必填还可以控制字段的显示/隐藏、动态赋值。例如当状态为「已关闭」时隐藏处理人字段。后续章节遇到时我们再展开。4.3详情区块上一章我们给表格行加了「查看」按钮点击会打开抽屉。现在来配置抽屉里的内容。在表格中点击某一行的「查看」按钮打开抽屉。在抽屉中点击「创建区块Add block」→ 数据区块 → 详情。选择「当前数据表Current collection」。在详情区块中「字段Fields」布局如下区域字段顶部标题、状态标签样式主体描述大文本区域侧边信息分类名称、优先级、提交人、处理人、创建时间如何放置一个大标题选择 字段 markdown 编辑 markdown 编辑区域中选择变量 当前记录 标题这样就将记录的标题动态插入到了 markdown 区块中。删除默认文本用 markdown 语法将它变为 二级标题的样式 即前面加上 ## 空格 即可页面中本身的标题字段可以去掉了调整一下详情表单布局小技巧多个字段可以通过拖拽排列在同一行让布局更紧凑美观。在详情区块的「操作Actions」中勾选「编辑」按钮方便直接从详情进入编辑模式。配置编辑表单点击「编辑」按钮会打开一个新弹窗——里面需要放一个编辑表单。编辑表单的字段和新建表单几乎一样难道要再从头勾选一遍不用。还记得新建表单吗我们先把它保存为模板编辑表单直接引用就行。第一步回到新建表单保存为模板关闭当前弹窗回到工单列表点击「添加」按钮打开新建表单。点击表单区块右上角的区块设置三横线图标找到「保存为模板Save as template」。点击保存即可默认为「引用Reference」——所有引用该模板的表单共享同一套配置改一处全部同步。我们的工单表单不复杂选「引用」统一维护更省心。如果选「复制」则每个表单拿到独立副本各自修改互不影响。第二步在编辑弹窗中引用模板回到详情抽屉或表格操作列点击「编辑」按钮打开编辑弹窗。你可能会想直接通过「创建区块 → 其他区块 → 区块模板」来创建不就行了试一下你会发现——这样创建出来的是一个添加表单而且字段并没有自动填充。这是一个常见的坑。正确的做法是在弹窗中点击「创建区块Add block」→ 数据区块 → 表单编辑先正常创建一个编辑表单区块。在编辑表单中点击「字段Fields」→「字段模板Field templates」选择刚才保存的模板。字段会一键全部填充过来和新建表单完全一致。别忘了加上操作按钮「提交」让用户修改后能保存。以后想加字段只需在模板中修改一次新建和编辑表单同步更新。快速编辑不开弹窗也能改数据除了弹窗编辑NocoBase 还支持直接在表格中快速编辑——不用打开任何弹窗鼠标移上去就能改。开启方式有两处表格区块级别点击表格区块的区块设置三横线图标找到「快速编辑Quick editing」开启后整个表格的字段都支持快速编辑。单个字段级别点击某一列的字段配置项找到「快速编辑」可以逐个字段控制是否开启。开启后鼠标移到表格单元格上方会出现一个小铅笔图标点击即可弹出该字段的编辑组件修改后自动保存。适合哪些场景快速编辑非常适合需要批量修改状态、处理人等字段的场景。比如管理员浏览工单列表时可以直接点击「状态」列快速把工单从「待处理」改成「处理中」不用一个个打开编辑。4.4 启用历史记录:::info 商业插件「历史记录」是 NocoBase 专业版插件需要商业版授权才能使用。如果你使用的是社区版可以跳过本节不影响后续章节。:::工单系统最重要的一点是谁在什么时候改了什么必须有迹可循。NocoBase 的「历史记录」插件帮我们自动记录每一次数据变更。配置历史记录进入设置 → 插件管理确保「历史记录」Record History插件已启用。进入插件配置页面点击「添加数据表」选择「工单」。选择需要记录的字段标题、状态、优先级、处理人、描述等。建议不需要记录所有字段。像 ID、创建时间这些不会手动修改的字段没必要追踪。只记录业务上有意义的字段变更。这个时候回到配置项点击「同步历史数据快照」 插件会自动把现有所有工单记录为第一条历史记录后续每次修改都会新增一条历史记录。在详情页查看历史回到工单详情的抽屉页面点击表格行的「查看」按钮。在抽屉中「创建区块Add block」→ 历史记录。选择「当前数据表」数据选择「当前记录」。详情页底部会出现一个时间线清晰展示每一次变更谁在什么时间把哪个字段从什么值改成了什么值。这样即使工单经手了多人处理所有变更都一清二楚。小结这一章我们完成了数据的完整生命周期表单— 用户可以提交新工单字段有默认值和验证联动规则— 紧急工单自动要求必填描述详情区块— 清晰展示工单的完整信息历史记录— 自动追踪每一次变更审计无忧商业插件可选从「看得见」到「填得进」再到「查得到」——我们的工单系统已经具备了基本的可用性。相关资源表单区块 — 表单区块详细配置详情区块 — 详情区块配置联动规则 — 字段联动规则说明完全掌控无限扩展AI 协同。NocoBase 让你的团队快速响应变化大幅降低成本。无需多年研发无需数百万投入。花几分钟部署 NocoBase立即拥有一切。访问 NocoBase 官网https://www.nocobase.com/cn您可以在官网申请 Demo 演示体验站点将在 1 分钟内创建完毕自动发送到您的邮箱。访问 NocoBase GitHub 和 Giteehttps://github.com/nocobase/nocobasehttps://gitee.com/nocobase/nocobase下载 NocoBase 源码并安装。支持 Docker 安装、create-nocobase-app 安装和 Git 源码安装。官方文档持续更新中https://docs-cn.nocobase.com/
