ContextQMD
Back to Nocobase

AddSubModelButton

docs/docs/cn/flow-engine/add-sub-model.md

2.1.06.4 KB
Original Source

AddSubModelButton

用于在指定的 FlowModel 中添加子模型（subModel）。支持异步加载、分组、子菜单、自定义模型继承规则等多种配置方式。

Props

ts
interface AddSubModelButtonProps {
  model: FlowModel;
  subModelKey: string;
  subModelType?: 'object' | 'array';
  items?: SubModelItemsType;
  subModelBaseClass?: string | ModelConstructor;
  subModelBaseClasses?: Array<string | ModelConstructor>;
  afterSubModelInit?: (subModel: FlowModel) => Promise<void>;
  afterSubModelAdd?: (subModel: FlowModel) => Promise<void>;
  afterSubModelRemove?: (subModel: FlowModel) => Promise<void>;
  children?: React.ReactNode;
  keepDropdownOpen?: boolean;
}
参数类型说明
modelFlowModel必填。要添加子模型的目标模型。
subModelKeystring必填。子模型在 model.subModels 中的键名。
subModelType'object' | 'array'子模型的数据结构类型，默认为 'array'。
itemsSubModelItem[] | (ctx) => SubModelItem[] | Promise<...>菜单项定义，支持静态或异步生成。
subModelBaseClassstring | ModelConstructor指定一个基类，列出继承该类的所有模型作为菜单项。
subModelBaseClasses(string | ModelConstructor)[]指定多个基类，自动按组列出继承模型。
afterSubModelInit(subModel) => Promise<void>子模型初始化后回调。
afterSubModelAdd(subModel) => Promise<void>子模型添加后回调。
afterSubModelRemove(subModel) => Promise<void>子模型移除后回调。
childrenReact.ReactNode按钮内容，可自定义为文字或图标。
keepDropdownOpenboolean添加后是否保持下拉菜单展开。默认自动关闭。

SubModelItem 类型定义

ts
interface SubModelItem {
  key?: string;
  label?: string;
  type?: 'group' | 'divider';
  disabled?: boolean;
  hide?: boolean | ((ctx: FlowModelContext) => boolean | Promise<boolean>);
  icon?: React.ReactNode;
  children?: SubModelItemsType;
  useModel?: string;
  createModelOptions?: {
    props?: Record<string, any>;
    stepParams?: Record<string, any>;
  };
  toggleable?: boolean | ((model: FlowModel) => boolean);
}
字段类型说明
keystring唯一标识。
labelstring显示文本。
type'group' | 'divider'分组或分隔符。省略时为普通项或子菜单。
disabledboolean是否禁用当前项。
hideboolean | (ctx) => boolean | Promise<boolean>动态隐藏（返回 true 表示隐藏）。
iconReact.ReactNode图标内容。
childrenSubModelItemsType子菜单项，用于嵌套分组或子菜单。
useModelstring指定使用的 Model 类型（注册名）。
createModelOptionsobject初始化模型时的参数。
toggleableboolean | (model: FlowModel) => boolean开关形态，已添加则移除，未添加则添加（只允许一个）。

示例

使用 <AddSubModelButton /> 添加 subModels

tsx
  • 使用 <AddSubModelButton /> 添加 subModels，按钮必须放到某个 FlowModel 里才能使用；
  • 使用 model.mapSubModels() 遍历 subModels，mapSubModels 方法会解决缺失、排序等问题；
  • 使用 <FlowModelRenderer /> 渲染 subModels。

不同形态的 AddSubModelButton

tsx
  • 可以使用按钮组件 <Button>Add block</Button>，可以随处放置；
  • 也可以使用图标 <PlusOutlined />；
  • 也可以放到右上角 Flow Settings 的位置。

支持开关形态

tsx
  • 简单场景 toggleable: true 即可，默认根据类名查找，同一个类的实例只允许出现一次；
  • 自定义查找规则：toggleable: (model: FlowModel) => boolean。

异步 items

tsx

可以从上下文获取动态 items，例如：

  • 可以是远程 ctx.api.request()；
  • 也可以从 ctx.dataSourceManager 提供的 API 里获取必要的数据；
  • 也可以是自定义的上下文属性或方法；
  • items 和 children 都支持 async 调用。

动态隐藏菜单项（hide）

tsx
  • hide 支持 boolean 或函数（支持 async）；返回 true 表示隐藏；
  • 会递归作用于 group 与 children。

使用分组、子菜单和分隔符

tsx
  • type: divider 时为分隔符；
  • type: group 并有 children 时为菜单分组；
  • 有 children，但是没有 type 时为子菜单。

通过继承类的方式自动生成 items

tsx
  • 所有继承 subModelBaseClass 的 FlowModel 都会罗列出来；
  • 通过 Model.define() 可以定义相关元数据；
  • 使用 hide: true 标记的会自动隐藏。

通过继承类的方式实现分组

tsx
  • 所有继承 subModelBaseClasses 的 FlowModel 都会罗列出来；
  • 自动按 subModelBaseClasses 分组并去重。

通过继承类 + menuType=submenu 实现二级菜单

tsx
  • 给基类通过 Model.define({ menuType: 'submenu' }) 指定展示形态；
  • 作为一级项出现，展开为二级菜单；可与其它分组按 meta.sort 混排排序。

通过 Model.defineChildren() 的方式自定义子菜单

tsx

通过 Model.defineChildren() 的方式自定义 group children

tsx

在子菜单中启用搜索

tsx
  • 任何包含 children 的菜单项只要设置 searchable: true，即会在该层级显示搜索框；
  • 支持同级存在 group 与非 group 的混合结构，搜索仅作用于当前层级。