NocoBase 界面搭建批量编辑操作Bulk Edit的实现原理与配置全解【免费下载链接】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 界面搭建中的「批量编辑」操作为核心完整覆盖其配置入口、批量编辑范围选中/所有、批量编辑表单搭建、三种字段编辑模式以及提交时的底层更新逻辑。读完本文你将掌握如何在表格、甘特图、地图等数据区块中配置批量编辑按钮并能从nocobase/plugin-action-bulk-edit插件源码理解每个配置项背后的实现机制与数据流向。一、什么是批量编辑操作批量编辑Bulk Edit适用于需要灵活批量更新数据的场景点击批量编辑按钮后在弹窗Popup中配置一个批量编辑表单提交后为每条目标记录上的指定字段设置不同的更新策略即支持多选记录后统一修改。它与普通的「更新」操作的关键区别在于一次操作作用于多条记录而不是一条表单中的每个字段都带有独立的「编辑模式」选择允许同一次提交里对不同字段分别采取保持不变、修改为指定值、清空三种策略更新范围可配置为仅作用于勾选记录或作用于当前数据区块筛选出的全部记录。批量编辑由独立插件 plugin-action-bulk-edit 提供插件displayName为「操作批量编辑」Action: Batch editdescription为「对全部数据或选中的数据进行批量编辑」。从package.json可见其supportedVersions覆盖 NocoBase 1.x 与 2.xeditionLevel: 0即在社区版即可使用peer 依赖nocobase/client、nocobase/client-v2、nocobase/server、nocobase/test均为 2.x。二、插件注册批量编辑按钮是如何出现在界面里的服务端实现非常轻量server/plugin.ts 中PluginActionBulkEditServer是一个空壳 Plugin——批量编辑不需要新增服务端接口它直接复用资源的标准update动作这一点在提交逻辑部分会详细展开。真正的工作在前端。client/index.tsx 中PluginActionBulkEditClient.load()做了以下几件事向 flowEngine 注册bulkEditTitleField、bulkEditFieldComponent两个 action 以及 client-v2 的系列 models通过app.addComponents注册BulkEditField字段级编辑模式组件与BulkEditActionDecorator向schemaSettingsManager注册四组设置面板bulkEditFormBlockSettings表单区块设置、deprecatedBulkEditActionSettings与bulkEditActionSettings按钮设置、bulkEditFormSubmitActionSettings提交按钮设置、bulkEditFormItemSettings表单字段设置通过schemaInitializerManager注册区块初始化器见下文最后把「批量编辑」加入各数据区块的操作初始化器。关键代码是按钮项的注册const initializerData { type: item, title: {{t(Bulk edit)}}, name: bulkEdit, Component: BulkEditActionInitializer, schema: { x-align: right, x-decorator: BulkEditActionDecorator, x-action: customize:bulkEdit, x-toolbar: ActionSchemaToolbar, x-settings: actionSettings:bulkEdit, x-acl-action: update, x-acl-action-props: { skipScopeCheck: true, }, }, useVisible: () useActionAvailable(updateMany), }; this.app.schemaInitializerManager.addItem(table:configureActions, customize.bulkEdit, initializerData); this.app.schemaInitializerManager.addItem(gantt:configureActions, customize.bulkEdit, initializerData); this.app.schemaInitializerManager.addItem(map:configureActions, customize.bulkEdit, initializerData);从这段注册代码可以读出四个事实可用位置bulkEdit项被添加到table:configureActions、gantt:configureActions、map:configureActions三处即表格Collection Field 表格型、甘特图、地图区块的操作配置面板中均可添加批量编辑按钮动作标识x-action为customize:bulkEdit属于自定义动作类型x-settings指向actionSettings:bulkEdit设置面板权限要求按钮 schema 上声明x-acl-action: update且useVisible使用useActionAvailable(updateMany)——只有当前用户拥有目标集合的批量更新能力时该按钮才会显示默认范围BulkEditActionInitializer.tsx 生成的初始 schema 中x-action-settings.updateMode默认值为selected仅更新选中记录默认图标为EditOutlined弹窗内容是一个Tabs容器其 Grid 挂有初始化器popup:bulkEdit:addBlock。弹窗内的 Tab 结构也值得注意BulkEditActionInitializer生成的 schema 中Action.Container下是TabsTabs.TabPane每个 TabPane 内放一个Grid并且声明了x-initializer: popup:addTab与x-initializer-props: { gridInitializer: popup:bulkEdit:addBlock }——这意味着批量编辑弹窗天然支持多 Tab每个 Tab 下都可以继续添加区块。三、操作配置按钮面板上能改什么在界面设计器中点击批量编辑按钮的工具栏打开的是 BulkEditAction.Settings.tsx 中定义的bulkEditActionSettingsname:actionSettings:bulkEdit。它包含以下配置项配置项组件说明按钮编辑editButtonActionDesigner.ButtonEditor设置按钮标题、图标、类型等外观关联规则linkageRulesSchemaSettingsLinkageRules配置按钮的显示/隐藏等关联条件打开方式openModeSchemaInitializerOpenModeSchemaItems选择弹窗大小等打开方式源码中通过x-action是否属于[create,update,view,customize:popup,duplicate,customize:create]判断isPopupAction只有弹窗类动作才显示此项数据更新范围updateModeUpdateMode核心配置二选一选中selected/ 整个集合all移除removeSchemaSettingsRemove从操作区删除该按钮其中「数据更新范围」即文档中提到的「批量编辑的范围选中/所有默认为选中」。它的实现是 UpdateMode 组件function UpdateMode() { const { dn } useDesignable(); const { t } useTranslation(); const fieldSchema useFieldSchema(); return ( SchemaSettingsSelectItem title{t(Data will be updated)} options{[ { label: t(Selected), value: selected }, { label: t(Entire collection, { ns: action-bulk-edit }), value: all }, ]} value{fieldSchema?.[x-action-settings]?.[updateMode]} onChange{(value) { fieldSchema[x-action-settings][updateMode] value; dn.emit(patch, { schema: { x-uid: fieldSchema[x-uid], x-action-settings: fieldSchema[x-action-settings] } }); dn.refresh(); }} / ); }它把updateMode写回按钮 schema 的x-action-settings节点并通过 Designable 的patchrefresh让界面即时生效。两个取值的语义在提交阶段落地selected时按勾选行的主键构造过滤条件all时继承当前数据区块的查询过滤条件详见第五节。四、批量编辑表单配置区块、字段与提交按钮4.1 在弹窗中添加表单区块点击弹窗 Tab 中的「添加区块」走的是 BulkEditBlockInitializers.tsx 中popup:bulkEdit:addBlock初始化器它把可添加的区块分为两组数据区块Form表单由CreateFormBulkEditBlockInitializer生成其他区块Markdown用于在批量编辑弹窗中插入说明文字。选择 Form 后实际插入的 UI Schema 由 createBulkEditBlockUISchema 构建export function createBulkEditBlockUISchema(options: { collectionName: string; dataSource: string; association?: string; }): ISchema { const { collectionName, association, dataSource } options; const resourceName association || collectionName; if (!collectionName || !dataSource) { throw new Error(collectionName and dataSource are required); } const schema: ISchema { type: void, x-acl-action-props: { skipScopeCheck: true }, x-acl-action: ${resourceName}:update, x-decorator: FormBlockProvider, x-decorator-props: { dataSource, collection: collectionName, association }, x-toolbar: BlockSchemaToolbar, x-settings: blockSettings:bulkEditForm, x-component: CardItem, properties: { // FormV2 Grid初始化器 bulkEditForm:configureFields // ActionBar初始化器 bulkEditForm:configureActionsone-column 布局 }, }; return schema; }这段源码说明了批量编辑表单区块的完整结构权限声明区块级x-acl-action为${resourceName}:update。当表单挂在关联字段association下时资源名取关联资源名权限也随之一一校验数据源x-decorator-props中传入dataSource、collection、association表单字段、提交动作都基于这套上下文工作因此批量编辑同样支持跨数据源集合表单本体内部是FormV2组件字段区是一个Grid挂初始化器bulkEditForm:configureFields——在设计器中点击「添加字段」就能从该集合或关联的字段里挑选需要编辑的字段动作区字段区下方是一个layout: one-column的ActionBar挂初始化器bulkEditForm:configureActions——这就是「添加提交按钮」的入口。4.2 表单字段的设置项对批量编辑表单里的每个字段可以打开 bulkEditFormItemSettingsname:fieldSettings:BulkEditFormItem配置面板它分为「通用属性」与「特定属性」两大组编辑字段标题可覆写显示名展示原始字段标题显示标题开关x-decorator-props.showTitle编辑描述description、编辑 tooltip编辑验证规则EditValidationRules仅在表单非只读且存在验证 schema 时可见;特定属性动态读取fieldSettings:component:${fieldComponentName}即字段自身组件Input、Select 等的专属配置删除字段带确认删除到Grid边界为止。这套设置与普通表单字段一致说明批量编辑表单的字段能力完整继承自集合字段体系——字段本身的组件类型、枚举、远程搜索等配置都会带进批量编辑弹窗。4.3 提交按钮的设置项表单的提交按钮由 bulkEditFormSubmitActionSettingsname:actionSettings:bulkEditSubmit配置配置项组件说明按钮编辑ActionDesigner.ButtonEditor标题、图标等二次确认SecondConFirm提交前弹出确认对话框避免误操作大范围更新提交成功后AfterSuccess关闭弹窗、显示消息等后续行为关联规则SchemaSettingsLinkageRules按条件控制按钮显示刷新请求RefreshDataBlockRequest以isPopupAction: true传入控制提交成功后是否/如何刷新外层数据区块移除SchemaSettingsRemove删除提交按钮五、字段级编辑模式不更新 / 修改为 / 清空文档中的核心概念是表单提交时的三种编辑模式其实现载体是 BulkEditField.tsx 中的枚举export enum BulkEditFormItemValueType { RemainsTheSame 1, // 不更新该字段保持不变 ChangedTo, // 修改为将该字段更新为提交的值 Clear, // 清空清空该字段的数据 AddAttach, // 追加附件当前版本在 UI 中未开放 }BulkEditField组件在字段前渲染一个Select依次提供「保持不变 / 修改为 / 清空」三个选项选择「修改为」时会在旁边动态渲染该字段原本的输入组件CollectionField让用户填入要提交的值。几个值得注意的实现细节必填联动typeChangeHandler中field.required val BulkEditFormItemValueType.ChangedTo——只有选择「修改为」时值才必填选择「修改为」但未填值时useEffect里会触发field.form.validate阻止提交选完值后自动clearErrors值的归一化字段值最终以{ [type]: value }的对象形式存在提交前经toFormFieldValue转换L153-L161function toFormFieldValue(value: any) { if (BulkEditFormItemValueType.Clear in value) { return null; // 清空 → null } else if (BulkEditFormItemValueType.ChangedTo in value) { return value[BulkEditFormItemValueType.ChangedTo]; // 修改为 → 提交值 } else if (BulkEditFormItemValueType.RemainsTheSame in value) { return; // 不更新 → undefined } }即「清空」提交null、「修改为」提交具体值、「不更新」提交undefined。后端update动作对undefined字段不做写入从而实现了同一张表单里不同字段各有不同更新策略的效果 3.复选框特例当字段 interface 为checkbox时「修改为」右侧渲染的是Checkbox而非通用字段组件避免复选框套输入框的怪异交互 4.字段被删除的兜底若数据模型中该字段已被删除InternalField无 uiSchema 时返回DeletedField提示「The field has bee deleted」。另外源码中存在AddAttach追加附件枚举值但在Select选项处被注释掉{[subTable, linkTo, m2m, ...].includes(...)一段即当前版本 UI 尚未开放「追加」模式实际可用的编辑模式就是文档所列的三种。六、提交逻辑解析从勾选行到 update 请求批量编辑表单提交走的是 client-v2 flow 引擎核心处理器是 submitHandler.ts它把前文所有配置串了起来export async function submitHandler(ctx, params) { const blockModel ctx.blockModel as FormBlockModel; await blockModel.form.validateFields(); const values blockModel.form.getFieldsValue(true); const viewUid ctx.view.inputArgs?.viewUid; const bulkEditActionModel ctx.engine.getModel(viewUid, true); const collectionModel bulkEditActionModel?.parent; const editModeParams bulkEditActionModel?.getStepParams(bulkEditSettings, editMode) || {}; const updateMode editModeParams?.value || selected; const updateData { values, forceUpdate: false }; if (updateMode selected) { const rows collectionModel?.resource?.getSelectedRows?.() || []; const pk ctx.collection?.getPrimaryKey?.() || ctx.collection?.filterTargetKey || id; const filterKey ctx.collection?.filterTargetKey || pk || id; const ids rows.map((r) ctx.collection.getFilterByTK(r)).filter((v) v ! null); if (!ids?.length) { ctx.message.error(lang(Please select the records to be edited)); ctx.exit(); return; } updateData.filter { $and: [{ [filterKey]: { $in: ids } }] }; } else { updateData.filter collectionModel?.resource.getFilter(); } const collection collectionModel?.context?.collection; if (!collection) { ctx.message.error?.(ctx.t(Collection not found)); ctx.exit?.(); return; } if (updateData.filter) { await ctx.api.resource(collection.name, null, { x-data-source: collection?.dataSourceKey }) .update({ filter: updateData.filter, values: updateData.values, ...params.requestConfig?.params }); } else { await ctx.api.resource(collection.name, null, { x-data-source: collection?.dataSourceKey }) .update({ values: updateData.values, forceUpdate: true, ...params.requestConfig?.params }); } blockModel.resetUserModifiedFields?.(); ctx.message.success(ctx.t(Saved successfully)); }按执行顺序拆解表单校验validateFields()先行任一「修改为」字段未填值都会被拦住读取更新范围通过 flow 引擎从bulkEditSettings步骤参数中读取editMode缺省回退为selected——与初始化器中的默认值updateMode: selected保持一致即文档所说「默认为选中」selected 分支取外层资源区块的勾选行getSelectedRows()用集合主键filterTargetKey优先其次getPrimaryKey()兜底id逐行生成filterByTk条件最终拼出{ $and: [{ [filterKey]: { $in: ids } }] }。若未勾选任何行直接报错「Please select the records to be edited」并退出不会发起请求all 分支取当前数据区块自身的查询过滤条件resource.getFilter()即「更新」的是当前筛选视图下的全部记录发起更新调用api.resource(collection.name, ...).update({ filter, values })并显式带上x-data-source以支持跨数据源。注意这里没有走独立的批量编辑接口就是资源的标准update动作——这也是服务端插件为空壳的原因。values中「不更新」的字段是undefined天然不参与写入无 filter 的兜底若all模式下当前区块没有任何过滤条件getFilter()为空会走forceUpdate: true分支即不带 filter 的整表更新请求通常前端会要求确认。使用「整个集合」模式时务必理解这一点——它更新的是当前区块过滤条件下的数据若区块无过滤条件则接近全表更新收尾resetUserModifiedFields()重置表单已修改字段标记弹出「Saved successfully」成功提示。结合e2e测试目录popup.test.ts、refresh.test.ts、schemaSettings.test.ts、schemaInitailizer.test.ts可以看到上述弹窗结构、刷新行为与 schema 初始化/设置面板都有对应的端到端测试覆盖。七、权限、适用位置与注意事项汇总本文的源码级事实便于在实际项目中使用与排查可用位置表格table、甘特图gantt、地图map区块的「添加操作」面板中均可添加批量编辑按钮client/index.tsx L77-L79权限模型按钮显示依赖useActionAvailable(updateMany)按钮与表单区块分别声明x-acl-action: update与${resourceName}:update且都带skipScopeCheck: true——配置 ACL 时需确保目标角色拥有对应集合的 update 权限按钮才会出现并可执行数据源表单区块的FormBlockProvider与提交请求都透传dataSource/x-data-source批量编辑可以作用于非默认数据源的集合弹窗结构默认一个 Tab可扩展多 Tab每个 Tab 下可添加 Form 区块数据区块或 Markdown 区块其他区块操作顺序先添加批量编辑按钮 → 设置更新范围选中/所有默认选中→ 在弹窗中添加表单区块 → 配置需要编辑的字段 → 添加提交按钮可配置二次确认、提交成功后刷新等行为→ 运行界面后勾选行 → 为每个字段选择编辑模式不更新/修改为/清空并填值 → 提交。一句话总结批量编辑 可配置的更新范围selected/all 表单化字段编辑每字段三种策略 标准update动作filter values。理解了 submitHandler 中的 filter 构造逻辑与 toFormFieldValue 的值归一化基本就掌握了这一操作从界面上按钮点击到数据库更新请求的完整链路。【免费下载链接】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），仅供参考
NocoBase 界面搭建：批量编辑操作（Bulk Edit）的实现原理与配置全解
NocoBase 界面搭建批量编辑操作Bulk Edit的实现原理与配置全解【免费下载链接】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 界面搭建中的「批量编辑」操作为核心完整覆盖其配置入口、批量编辑范围选中/所有、批量编辑表单搭建、三种字段编辑模式以及提交时的底层更新逻辑。读完本文你将掌握如何在表格、甘特图、地图等数据区块中配置批量编辑按钮并能从nocobase/plugin-action-bulk-edit插件源码理解每个配置项背后的实现机制与数据流向。一、什么是批量编辑操作批量编辑Bulk Edit适用于需要灵活批量更新数据的场景点击批量编辑按钮后在弹窗Popup中配置一个批量编辑表单提交后为每条目标记录上的指定字段设置不同的更新策略即支持多选记录后统一修改。它与普通的「更新」操作的关键区别在于一次操作作用于多条记录而不是一条表单中的每个字段都带有独立的「编辑模式」选择允许同一次提交里对不同字段分别采取保持不变、修改为指定值、清空三种策略更新范围可配置为仅作用于勾选记录或作用于当前数据区块筛选出的全部记录。批量编辑由独立插件 plugin-action-bulk-edit 提供插件displayName为「操作批量编辑」Action: Batch editdescription为「对全部数据或选中的数据进行批量编辑」。从package.json可见其supportedVersions覆盖 NocoBase 1.x 与 2.xeditionLevel: 0即在社区版即可使用peer 依赖nocobase/client、nocobase/client-v2、nocobase/server、nocobase/test均为 2.x。二、插件注册批量编辑按钮是如何出现在界面里的服务端实现非常轻量server/plugin.ts 中PluginActionBulkEditServer是一个空壳 Plugin——批量编辑不需要新增服务端接口它直接复用资源的标准update动作这一点在提交逻辑部分会详细展开。真正的工作在前端。client/index.tsx 中PluginActionBulkEditClient.load()做了以下几件事向 flowEngine 注册bulkEditTitleField、bulkEditFieldComponent两个 action 以及 client-v2 的系列 models通过app.addComponents注册BulkEditField字段级编辑模式组件与BulkEditActionDecorator向schemaSettingsManager注册四组设置面板bulkEditFormBlockSettings表单区块设置、deprecatedBulkEditActionSettings与bulkEditActionSettings按钮设置、bulkEditFormSubmitActionSettings提交按钮设置、bulkEditFormItemSettings表单字段设置通过schemaInitializerManager注册区块初始化器见下文最后把「批量编辑」加入各数据区块的操作初始化器。关键代码是按钮项的注册const initializerData { type: item, title: {{t(Bulk edit)}}, name: bulkEdit, Component: BulkEditActionInitializer, schema: { x-align: right, x-decorator: BulkEditActionDecorator, x-action: customize:bulkEdit, x-toolbar: ActionSchemaToolbar, x-settings: actionSettings:bulkEdit, x-acl-action: update, x-acl-action-props: { skipScopeCheck: true, }, }, useVisible: () useActionAvailable(updateMany), }; this.app.schemaInitializerManager.addItem(table:configureActions, customize.bulkEdit, initializerData); this.app.schemaInitializerManager.addItem(gantt:configureActions, customize.bulkEdit, initializerData); this.app.schemaInitializerManager.addItem(map:configureActions, customize.bulkEdit, initializerData);从这段注册代码可以读出四个事实可用位置bulkEdit项被添加到table:configureActions、gantt:configureActions、map:configureActions三处即表格Collection Field 表格型、甘特图、地图区块的操作配置面板中均可添加批量编辑按钮动作标识x-action为customize:bulkEdit属于自定义动作类型x-settings指向actionSettings:bulkEdit设置面板权限要求按钮 schema 上声明x-acl-action: update且useVisible使用useActionAvailable(updateMany)——只有当前用户拥有目标集合的批量更新能力时该按钮才会显示默认范围BulkEditActionInitializer.tsx 生成的初始 schema 中x-action-settings.updateMode默认值为selected仅更新选中记录默认图标为EditOutlined弹窗内容是一个Tabs容器其 Grid 挂有初始化器popup:bulkEdit:addBlock。弹窗内的 Tab 结构也值得注意BulkEditActionInitializer生成的 schema 中Action.Container下是TabsTabs.TabPane每个 TabPane 内放一个Grid并且声明了x-initializer: popup:addTab与x-initializer-props: { gridInitializer: popup:bulkEdit:addBlock }——这意味着批量编辑弹窗天然支持多 Tab每个 Tab 下都可以继续添加区块。三、操作配置按钮面板上能改什么在界面设计器中点击批量编辑按钮的工具栏打开的是 BulkEditAction.Settings.tsx 中定义的bulkEditActionSettingsname:actionSettings:bulkEdit。它包含以下配置项配置项组件说明按钮编辑editButtonActionDesigner.ButtonEditor设置按钮标题、图标、类型等外观关联规则linkageRulesSchemaSettingsLinkageRules配置按钮的显示/隐藏等关联条件打开方式openModeSchemaInitializerOpenModeSchemaItems选择弹窗大小等打开方式源码中通过x-action是否属于[create,update,view,customize:popup,duplicate,customize:create]判断isPopupAction只有弹窗类动作才显示此项数据更新范围updateModeUpdateMode核心配置二选一选中selected/ 整个集合all移除removeSchemaSettingsRemove从操作区删除该按钮其中「数据更新范围」即文档中提到的「批量编辑的范围选中/所有默认为选中」。它的实现是 UpdateMode 组件function UpdateMode() { const { dn } useDesignable(); const { t } useTranslation(); const fieldSchema useFieldSchema(); return ( SchemaSettingsSelectItem title{t(Data will be updated)} options{[ { label: t(Selected), value: selected }, { label: t(Entire collection, { ns: action-bulk-edit }), value: all }, ]} value{fieldSchema?.[x-action-settings]?.[updateMode]} onChange{(value) { fieldSchema[x-action-settings][updateMode] value; dn.emit(patch, { schema: { x-uid: fieldSchema[x-uid], x-action-settings: fieldSchema[x-action-settings] } }); dn.refresh(); }} / ); }它把updateMode写回按钮 schema 的x-action-settings节点并通过 Designable 的patchrefresh让界面即时生效。两个取值的语义在提交阶段落地selected时按勾选行的主键构造过滤条件all时继承当前数据区块的查询过滤条件详见第五节。四、批量编辑表单配置区块、字段与提交按钮4.1 在弹窗中添加表单区块点击弹窗 Tab 中的「添加区块」走的是 BulkEditBlockInitializers.tsx 中popup:bulkEdit:addBlock初始化器它把可添加的区块分为两组数据区块Form表单由CreateFormBulkEditBlockInitializer生成其他区块Markdown用于在批量编辑弹窗中插入说明文字。选择 Form 后实际插入的 UI Schema 由 createBulkEditBlockUISchema 构建export function createBulkEditBlockUISchema(options: { collectionName: string; dataSource: string; association?: string; }): ISchema { const { collectionName, association, dataSource } options; const resourceName association || collectionName; if (!collectionName || !dataSource) { throw new Error(collectionName and dataSource are required); } const schema: ISchema { type: void, x-acl-action-props: { skipScopeCheck: true }, x-acl-action: ${resourceName}:update, x-decorator: FormBlockProvider, x-decorator-props: { dataSource, collection: collectionName, association }, x-toolbar: BlockSchemaToolbar, x-settings: blockSettings:bulkEditForm, x-component: CardItem, properties: { // FormV2 Grid初始化器 bulkEditForm:configureFields // ActionBar初始化器 bulkEditForm:configureActionsone-column 布局 }, }; return schema; }这段源码说明了批量编辑表单区块的完整结构权限声明区块级x-acl-action为${resourceName}:update。当表单挂在关联字段association下时资源名取关联资源名权限也随之一一校验数据源x-decorator-props中传入dataSource、collection、association表单字段、提交动作都基于这套上下文工作因此批量编辑同样支持跨数据源集合表单本体内部是FormV2组件字段区是一个Grid挂初始化器bulkEditForm:configureFields——在设计器中点击「添加字段」就能从该集合或关联的字段里挑选需要编辑的字段动作区字段区下方是一个layout: one-column的ActionBar挂初始化器bulkEditForm:configureActions——这就是「添加提交按钮」的入口。4.2 表单字段的设置项对批量编辑表单里的每个字段可以打开 bulkEditFormItemSettingsname:fieldSettings:BulkEditFormItem配置面板它分为「通用属性」与「特定属性」两大组编辑字段标题可覆写显示名展示原始字段标题显示标题开关x-decorator-props.showTitle编辑描述description、编辑 tooltip编辑验证规则EditValidationRules仅在表单非只读且存在验证 schema 时可见;特定属性动态读取fieldSettings:component:${fieldComponentName}即字段自身组件Input、Select 等的专属配置删除字段带确认删除到Grid边界为止。这套设置与普通表单字段一致说明批量编辑表单的字段能力完整继承自集合字段体系——字段本身的组件类型、枚举、远程搜索等配置都会带进批量编辑弹窗。4.3 提交按钮的设置项表单的提交按钮由 bulkEditFormSubmitActionSettingsname:actionSettings:bulkEditSubmit配置配置项组件说明按钮编辑ActionDesigner.ButtonEditor标题、图标等二次确认SecondConFirm提交前弹出确认对话框避免误操作大范围更新提交成功后AfterSuccess关闭弹窗、显示消息等后续行为关联规则SchemaSettingsLinkageRules按条件控制按钮显示刷新请求RefreshDataBlockRequest以isPopupAction: true传入控制提交成功后是否/如何刷新外层数据区块移除SchemaSettingsRemove删除提交按钮五、字段级编辑模式不更新 / 修改为 / 清空文档中的核心概念是表单提交时的三种编辑模式其实现载体是 BulkEditField.tsx 中的枚举export enum BulkEditFormItemValueType { RemainsTheSame 1, // 不更新该字段保持不变 ChangedTo, // 修改为将该字段更新为提交的值 Clear, // 清空清空该字段的数据 AddAttach, // 追加附件当前版本在 UI 中未开放 }BulkEditField组件在字段前渲染一个Select依次提供「保持不变 / 修改为 / 清空」三个选项选择「修改为」时会在旁边动态渲染该字段原本的输入组件CollectionField让用户填入要提交的值。几个值得注意的实现细节必填联动typeChangeHandler中field.required val BulkEditFormItemValueType.ChangedTo——只有选择「修改为」时值才必填选择「修改为」但未填值时useEffect里会触发field.form.validate阻止提交选完值后自动clearErrors值的归一化字段值最终以{ [type]: value }的对象形式存在提交前经toFormFieldValue转换L153-L161function toFormFieldValue(value: any) { if (BulkEditFormItemValueType.Clear in value) { return null; // 清空 → null } else if (BulkEditFormItemValueType.ChangedTo in value) { return value[BulkEditFormItemValueType.ChangedTo]; // 修改为 → 提交值 } else if (BulkEditFormItemValueType.RemainsTheSame in value) { return; // 不更新 → undefined } }即「清空」提交null、「修改为」提交具体值、「不更新」提交undefined。后端update动作对undefined字段不做写入从而实现了同一张表单里不同字段各有不同更新策略的效果 3.复选框特例当字段 interface 为checkbox时「修改为」右侧渲染的是Checkbox而非通用字段组件避免复选框套输入框的怪异交互 4.字段被删除的兜底若数据模型中该字段已被删除InternalField无 uiSchema 时返回DeletedField提示「The field has bee deleted」。另外源码中存在AddAttach追加附件枚举值但在Select选项处被注释掉{[subTable, linkTo, m2m, ...].includes(...)一段即当前版本 UI 尚未开放「追加」模式实际可用的编辑模式就是文档所列的三种。六、提交逻辑解析从勾选行到 update 请求批量编辑表单提交走的是 client-v2 flow 引擎核心处理器是 submitHandler.ts它把前文所有配置串了起来export async function submitHandler(ctx, params) { const blockModel ctx.blockModel as FormBlockModel; await blockModel.form.validateFields(); const values blockModel.form.getFieldsValue(true); const viewUid ctx.view.inputArgs?.viewUid; const bulkEditActionModel ctx.engine.getModel(viewUid, true); const collectionModel bulkEditActionModel?.parent; const editModeParams bulkEditActionModel?.getStepParams(bulkEditSettings, editMode) || {}; const updateMode editModeParams?.value || selected; const updateData { values, forceUpdate: false }; if (updateMode selected) { const rows collectionModel?.resource?.getSelectedRows?.() || []; const pk ctx.collection?.getPrimaryKey?.() || ctx.collection?.filterTargetKey || id; const filterKey ctx.collection?.filterTargetKey || pk || id; const ids rows.map((r) ctx.collection.getFilterByTK(r)).filter((v) v ! null); if (!ids?.length) { ctx.message.error(lang(Please select the records to be edited)); ctx.exit(); return; } updateData.filter { $and: [{ [filterKey]: { $in: ids } }] }; } else { updateData.filter collectionModel?.resource.getFilter(); } const collection collectionModel?.context?.collection; if (!collection) { ctx.message.error?.(ctx.t(Collection not found)); ctx.exit?.(); return; } if (updateData.filter) { await ctx.api.resource(collection.name, null, { x-data-source: collection?.dataSourceKey }) .update({ filter: updateData.filter, values: updateData.values, ...params.requestConfig?.params }); } else { await ctx.api.resource(collection.name, null, { x-data-source: collection?.dataSourceKey }) .update({ values: updateData.values, forceUpdate: true, ...params.requestConfig?.params }); } blockModel.resetUserModifiedFields?.(); ctx.message.success(ctx.t(Saved successfully)); }按执行顺序拆解表单校验validateFields()先行任一「修改为」字段未填值都会被拦住读取更新范围通过 flow 引擎从bulkEditSettings步骤参数中读取editMode缺省回退为selected——与初始化器中的默认值updateMode: selected保持一致即文档所说「默认为选中」selected 分支取外层资源区块的勾选行getSelectedRows()用集合主键filterTargetKey优先其次getPrimaryKey()兜底id逐行生成filterByTk条件最终拼出{ $and: [{ [filterKey]: { $in: ids } }] }。若未勾选任何行直接报错「Please select the records to be edited」并退出不会发起请求all 分支取当前数据区块自身的查询过滤条件resource.getFilter()即「更新」的是当前筛选视图下的全部记录发起更新调用api.resource(collection.name, ...).update({ filter, values })并显式带上x-data-source以支持跨数据源。注意这里没有走独立的批量编辑接口就是资源的标准update动作——这也是服务端插件为空壳的原因。values中「不更新」的字段是undefined天然不参与写入无 filter 的兜底若all模式下当前区块没有任何过滤条件getFilter()为空会走forceUpdate: true分支即不带 filter 的整表更新请求通常前端会要求确认。使用「整个集合」模式时务必理解这一点——它更新的是当前区块过滤条件下的数据若区块无过滤条件则接近全表更新收尾resetUserModifiedFields()重置表单已修改字段标记弹出「Saved successfully」成功提示。结合e2e测试目录popup.test.ts、refresh.test.ts、schemaSettings.test.ts、schemaInitailizer.test.ts可以看到上述弹窗结构、刷新行为与 schema 初始化/设置面板都有对应的端到端测试覆盖。七、权限、适用位置与注意事项汇总本文的源码级事实便于在实际项目中使用与排查可用位置表格table、甘特图gantt、地图map区块的「添加操作」面板中均可添加批量编辑按钮client/index.tsx L77-L79权限模型按钮显示依赖useActionAvailable(updateMany)按钮与表单区块分别声明x-acl-action: update与${resourceName}:update且都带skipScopeCheck: true——配置 ACL 时需确保目标角色拥有对应集合的 update 权限按钮才会出现并可执行数据源表单区块的FormBlockProvider与提交请求都透传dataSource/x-data-source批量编辑可以作用于非默认数据源的集合弹窗结构默认一个 Tab可扩展多 Tab每个 Tab 下可添加 Form 区块数据区块或 Markdown 区块其他区块操作顺序先添加批量编辑按钮 → 设置更新范围选中/所有默认选中→ 在弹窗中添加表单区块 → 配置需要编辑的字段 → 添加提交按钮可配置二次确认、提交成功后刷新等行为→ 运行界面后勾选行 → 为每个字段选择编辑模式不更新/修改为/清空并填值 → 提交。一句话总结批量编辑 可配置的更新范围selected/all 表单化字段编辑每字段三种策略 标准update动作filter values。理解了 submitHandler 中的 filter 构造逻辑与 toFormFieldValue 的值归一化基本就掌握了这一操作从界面上按钮点击到数据库更新请求的完整链路。【免费下载链接】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），仅供参考
