Skip to content

模块管理 ​

模块管理用于设计主表单之外的附属界面,例如弹出框、抽屉。把「偶尔才用、或内容较重」的选择/录入放到模块里,主表更清爽;再通过按钮或事件打开,并在需要时回填主表。

演示环境可在表单列表展开 业务模板,打开「活动报名」:主表只保留姓名、手机、商品名称、单价;须知、选品、补充材料分别在弹窗和抽屉模块中。

模块管理入口

在哪里找 ​

左侧功能栏点击 模块管理 图标(页面叠放样式)。图标右上角的数字角标表示当前表已有的模块数量(不含主体)。

模块管理面板

列表面部从上到下是:主体(主表画布)以及各模块。点模块名称,中间工作区会切到该模块画布;再点「主体」即可回到主表。

设计模块(分步) ​

1. 添加模块 ​

点击 添加模块,选择 弹出框 或 抽屉,再在画布里改标题(如「选择商品」「活动须知」)。

添加模块

2. 编辑模块画布 ​

在列表中点选该模块,工作区切换为模块画布;再打开组件列表往里拖字段。点选模块名即可进入,不必从组件列表重新拖一个弹窗。

模块画布编辑

3. 配置模块内字段 ​

与主表相同:标题、校验、选项等。模块内也可再套布局、子表单。

4. 回到主表并挂事件 ​

切回 主体 → 选中要触发打开的按钮或字段 → 右侧 事件配置 → 设置事件。

事件配置入口

创建或编辑 click(点击组件时触发),在事件流里加动作 打开弹窗,并在「选择弹窗」中指定模块(如「活动须知」)。

事件关联模块

动作名称以界面为准:产品里叫「打开弹窗」,目标可以是弹出框或抽屉模块。完整动作说明见事件流配置。

5. 预览闭环 ​

用预览走一遍:打开 → 操作 → 关闭 →(如有)回填。设计态点选模块只是在画布里编辑,不等于运行时弹出动画。

预览打开弹窗

管理模块 ​

操作用途
复制快速做相似弹窗(选物料 / 选供应商)
删除去掉不用的模块(先解除事件引用)
重命名保持与事件配置中「选择弹窗」的名称一致

复制、删除在模块行右侧。演示里「选择供应商」可用来练习复制后再改字段。

模块复制删除

业务示例 ​

以下均以演示模板「活动报名」为准,可直接打开对照。

入门:活动须知弹窗 ​

背景:报名页不想一上来铺满条款,用户点击「查看须知」再看说明。

步骤:

  1. 打开「活动报名」,进入模块管理,点选 活动须知。
  2. 模块内已有须知文案和「我知道了」按钮。
  3. 切回主体,选中「查看须知」,确认事件流为:点击 → 打开弹窗 → 活动须知。
  4. 预览后点击「查看须知」,应弹出须知内容。

预期:主表仍是报名信息;须知只在弹窗中出现,关闭后回到主表。

常用:选择商品并回填 ​

主表保留只读或手填的「商品名称」「单价」;详细选项放进弹窗,避免主表过长。

选品模块

步骤:

  1. 点选模块 选择商品:内含可选商品单选(便携式显示器、机械键盘、无线鼠标)和「确定并回填」。
  2. 主表「选择商品」按钮同样通过点击事件打开该模块。
  3. 若要把选中结果写回主表:在「确定并回填」上继续配置设置字段值,把名称、单价赋给主表对应字段,再加 关闭弹窗。

预期:打开模块能看到三档商品;关闭后主表仍在。回填是否生效以你在「确定并回填」上配置的动作为准。

常用:抽屉填补充材料 ​

主表填核心信息;「补充材料」打开侧滑抽屉上传附件、填备注,避免主表过长。

补充材料抽屉

演示里抽屉模块含附件上传、备注说明和「完成」。预览时点主表「补充材料」即可侧滑打开。

常用:全局事件复用打开逻辑 ​

把「打开某模块」做成全局事件,入职、调岗、请假等多个按钮只需引用同一事件,改模块时只改一处。

演示表已预置全局事件 打开选人模块(event_openSelectUser)。在全局配置 → 全局事件中打开后可以看到:实现是 $inject.api.open('模块ID'),当前指向活动须知弹窗。业务上可改成真正的选人模块,再在各表按钮的事件配置里选「全局事件」。

全局事件打开模块

注意点 ​

  • 先划分「主表必留 / 适合进模块」,再拆;模块数量会出现在功能栏角标上。
  • 改模块标题后,检查所有「打开弹窗」动作里选中的目标是否还在。
  • 模块内必填要在关闭前引导完成,或允许暂存(按产品定)。
  • 删除模块前先解除按钮/全局事件里的引用,避免预览时打不开。
  • 预览验证,设计态点选不等于真实打开动画与回填。

相关阅读 ​

相关技术文档 ​