NocoBase 操作联动规则完全指南用条件动态控制按钮的显示、隐藏与禁用【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase导读在 NocoBase 的低代码界面搭建体系中操作联动规则Linkage Rule是让页面从静态配置走向动态响应的关键能力。它允许你基于当前记录字段值、用户角色、当前设备类型等条件实时控制操作按钮如编辑、删除、批量更新的显示、隐藏、禁用与启用状态。本文以官方文档 操作联动规则 为主体结合 NocoBase 客户端源码深入剖析联动规则的条件配置、常量/变量取值、属性执行机制与底层实现原理帮助你掌握从配置一条规则到理解整套联动引擎的完整链路。什么是操作联动规则操作联动规则允许用户根据特定条件动态控制操作的状态显示、隐藏、启用、禁用等。通过配置这些规则操作按钮的行为可以与当前记录、用户角色或上下文数据建立联动实现诸如已付款订单不允许编辑批量更新按钮仅管理员可见这类典型业务约束。在 NocoBase 的客户端源码中联动规则是 UISchema 中的一类特殊配置项。从 type.ts 可以看到联动规则按类别LinkageRuleCategory存储在不同的 schema key 中类别存储 key说明default字段默认联动x-linkage-rules表单字段的显示/编辑/必填等联动button按钮联动x-linkage-rules操作按钮的显示/隐藏/禁用联动style样式联动x-linkage-style-rules字段样式的动态变化block区块联动x-block-linkage-rules区块级联动如表单字段联动本篇文章聚焦其中的button操作按钮联动规则它正是操作联动规则在界面搭建中的直接体现。联动规则在操作设置中的位置操作按钮的联动规则配置入口位于操作按钮的设置面板中。以编辑表格操作为例其设置项定义在 editTableActionSettings.tsx 中export const editTableActionSettings new SchemaSettings({ name: actionSettings:editTable, items: [ { name: editButton, Component: ButtonEditor, ... }, { name: linkageRules, Component: SchemaSettingsLinkageRules, useComponentProps() { const { name } useCollection_deprecated(); const { linkageRulesProps } useSchemaToolbar(); return { ...linkageRulesProps, collectionName: name }; }, }, { name: delete, sort: 100, Component: RemoveButton as any, ... }, ], });可以看到联动规则linkageRules作为独立的设置项挂载在每个操作按钮的设置菜单中并且会通过useCollection_deprecated()自动带上当前区块所绑定的数据表collection名称供规则中的变量取值使用。类似地新增、删除、批量删除、关联、提交等操作见 addNewActionSettings.tsx、deleteActionSettings.tsx 等都注册了同样的联动规则入口。使用说明规则的三段式结构一条完整的操作联动规则由以下要素组成满足条件时无条件默认通过触发执行属性设置 / 执行 JavaScript支持在条件判断中使用常量/变量。从源码 index.tsx 中的 schema 定义可以看出每条规则在配置面板中由几个核心部分组成启用开关EnableLinkage规则面板折叠头部的开关用于临时启用或停用某条规则条件区Condition支持basic基础模式字段/变量 比较符 值与advanced高级模式可视化条件组两种写法二者通过conditionType字段切换属性区Properties即触发执行属性设置通过LinkageRuleActionGroup渲染可添加多条属性动作规则操作每条规则支持添加、复制、上移、下移、删除ArrayCollapse.Addition/Copy/MoveUp/MoveDown/Remove且可配置为手风琴模式accordion: true。规则的存储结构为rule { disabled, condition, conditionType, actions[] }其中actions数组的每一项即一个属性设置动作。在 forEachLinkageRule.ts 中可以看到遍历逻辑export function forEachLinkageRule(linkageRules: any[], callback: (action: any, rule: any) void) { linkageRules.forEach((rule) { rule.actions?.forEach((action) { callback(action, rule); }); }); }即一条规则可以包含多个 action属性动作每个 action 由操作符operator 值value构成。支持修改的按钮属性操作按钮联动规则支持的属性动作定义在 LinkageRuleAction.tsx 的FormButtonLinkageRuleAction中const operators useMemo( () compile([ { label: t(Visible), value: ActionType.Visible, schema: {} }, { label: t(Hidden), value: ActionType.Hidden, schema: {} }, { label: t(Disabled), value: ActionType.Disabled, schema: {} }, { label: t(Enabled), value: ActionType.Active, schema: {} }, ]), [compile, t], );即操作按钮支持以下四种属性动作动作说明典型场景可见Visible条件满足时显示按钮仅特定角色/状态显示操作入口隐藏Hidden条件满足时隐藏按钮隐藏不适用于当前上下文的操作禁用Disabled条件满足时禁用按钮置灰不可点击状态不满足时禁止编辑/删除启用Enabled条件满足时启用按钮从禁用恢复为可点击这些动作类型在 type.ts 的ActionType枚举中有统一定义Visible visible、Hidden hidden、Disabled disabled、Active enabled说明按钮联动与字段联动、样式联动共用同一套动作类型体系。注字段级联动规则还支持更多动作编辑/只读/必填/赋值/选项/日期范围等详见ActionType枚举本文以操作按钮的四种动作为主线展开。条件中的常量与变量联动规则的条件判断支持常量与变量两种取值方式二者可以混合使用。规则引擎在运行时通过 compute-rules.ts 对每条规则求值const getSatisfiedActions async ({ rules, variables, localVariables }, jsonLogic) { const satisfiedRules ( await Promise.all( rules .filter((k) !k.disabled) // 跳过硬开关关闭的规则 .map(async (rule) { if ( await conditionAnalyses( { ruleGroup: rule.condition, variables, localVariables, conditionType: rule.conditionType }, jsonLogic, ) ) { return rule; } else return null; }), ) ).filter(Boolean); return satisfiedRules.map((rule) rule.actions).flat(); };关键点禁用开关disabled为true的规则不会参与求值对应配置面板中的启用开关条件求值通过conditionAnalyses条件分析工具结合当前上下文变量求值返回true的规则才生效多规则叠加所有满足条件的规则的actions会被拍平合并执行多动作叠加同一条规则内的多个 action 也会被合并最终通过getSatisfiedValueMap聚合成{ operator: value }的映射供 UI 层消费。常量常量即在配置条件时直接写死的固定值不随上下文变化。示例已付款订单不允许编辑——将订单状态条件与常量已付款比较当条件成立时执行禁用动作从而阻止对已付款订单的编辑操作。这是最基础也是最常用的联动场景配置时无需引入任何变量仅依赖当前记录字段值与固定值的比较。变量变量在运行时根据上下文动态求值是联动规则灵活性的核心来源。NocoBase 的变量体系详见 变量文档主要分为两类系统变量与上下文变量。在源码层面联动规则配置面板通过FilterContext和VariableInput提供变量输入能力见 index.tsx并在保存时根据当前所处上下文把基础条件自动转换为高级模式transformConditionData例如将{ field: { op: value } }转换为{{$nForm.field}} op value的变量表达式$nForm/$nRecord就是运行时注入的上下文变量。系统变量系统变量由平台提供与具体数据无关常见的有当前设备类型判断按钮运行在桌面端还是移动端当前用户角色 / 用户信息判断登录用户的角色、部门、权限范围等。示例 1根据当前设备类型控制按钮显示——例如提交按钮仅在桌面端显示、移动端隐藏避免移动端布局过载。示例 2订单区块表格头上的批量更新按钮仅限管理员角色使用其他角色无法执行该操作——条件使用系统变量当前用户角色与常量管理员比较满足时执行可见动作不满足时隐藏。这样普通用户根本看不到入口比可见但禁用更彻底地控制了操作暴露面。上下文变量上下文变量与当前页面/区块所处上下文绑定例如当前记录$nRecord当前行/当前详情中的记录字段值当前表单$nForm表单中正在编辑的字段值父级记录 / 关系数据当前区块处于某个关系区块如订单下的商机子表时可引用父级记录的字段。示例订单商机关系区块上的添加按钮仅在订单状态为「待支付」和「草稿」时启用其他状态下按钮将被禁用——条件使用上下文变量父级记录订单的订单状态分别与常量待支付草稿比较多条件取 OR满足任一条件时执行启用动作否则按钮保持禁用状态。这一场景典型地体现了按钮行为与当前记录状态建立联动的设计意图。从源码看联动规则配置会依据上下文自动选择活跃变量域在子表格/子表单中优先使用$iteration在表单中优先使用$nForm否则回退到$nRecord见 index.tsx 中getActiveContextNamefunction getActiveContextName(underNester, shouldDisplayCurrentForm): string | null { if (underNester) return $iteration; if (shouldDisplayCurrentForm) return $nForm; return $nRecord; }这保证了无论配置在哪个层级的区块上联动规则都能取到正确的当前对象数据。运行机制联动规则如何生效理解了配置之后再看联动规则在前端的运行时链路。一次完整的联动评估过程如下配置存储规则以x-linkage-rules的形式序列化到操作按钮的 UISchema 中随页面 schema 一起下发上下文注入运行期间RecordProvider、CollectionProvider、SubFormProvider等 Provider 向规则配置面板注入当前记录、父记录与集合上下文见 index.tsx条件求值getSatisfiedActions遍历所有未禁用的规则结合variables/localVariables与当前上下文执行conditionAnalyses得到满足条件的 action 列表动作合并与下发getSatisfiedValueMap将满足条件的动作聚合成操作符到值的映射UI 层据此修改按钮的visible/hidden/disabled/enabled状态实时响应由于联动规则与表单/记录数据建立了响应式依赖当记录切换、表单值变化或角色/设备上下文改变时规则会重新求值并即时更新按钮状态。这一机制说明联动规则不是一次性渲染而是持续响应上下文变化的响应式规则引擎这也是它能支撑待支付/草稿状态下启用、其他状态禁用这类动态约束的根本原因。常见使用场景速查场景条件示例执行动作变量类型已付款订单不允许编辑订单状态 已付款禁用常量批量更新仅限管理员当前用户角色 管理员可见 / 隐藏系统变量移动端隐藏提交按钮当前设备类型 桌面端可见 / 隐藏系统变量订单非待支付时禁用添加父记录.订单状态 ∈ {待支付, 草稿}启用 / 禁用上下文变量草稿单据才允许删除当前记录.单据状态 草稿可见 / 隐藏上下文变量总结操作联动规则是 NocoBase 界面搭建中实现数据驱动交互的核心工具。通过本文可以掌握联动规则的入口位置与三段式结构启用开关、条件区、属性区按钮支持的四种属性动作可见、隐藏、禁用、启用常量、系统变量设备、角色与上下文变量$nRecord、$nForm的用法与典型场景底层求值机制conditionAnalyses条件求值 → 满足规则的 action 合并 → 按钮状态实时更新对应源码 compute-rules.ts、forEachLinkageRule.ts。更深入的变量体系包括更多系统变量与上下文变量的完整清单可继续查阅 变量文档并结合 LinkageRules 模块 的源码探索字段联动与样式联动等更多能力。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考