表单设计（页面设计器）完整指南

页面表单设计器是 DSP 低代码平台体量最大、能力最全的生产力模块，负责 PC/移动端页面与表单的可视化设计、数据绑定、逻辑编排、权限配置与运行态渲染。

典型场景：

• 基于数据模型快速搭建「列表 + 表单 + 详情」业务页；
• 配置数据权限、按钮事件、公共数据集与方法；
• 预览后发布到工作台菜单，供业务人员通过自动表单录入数据；
• 使用 AI 辅助补全逻辑脚本、H5/SFC 生成。

访问入口

使用前准备

1. 已完成 数据模型设计（biz），否则无法绑定字段。
2. 明确页面类型：普通表单、H5、列表页等（H5 会隐藏部分左侧 Tab）。
3. 从应用详情进入时确认 appCode、页面 pageId 正确。

设计器采用 顶栏工具条 + 左侧资源面板 + 中间画布 + 右侧属性区 布局。

快捷键：Ctrl+S / Cmd+S 保存（代码编辑器内同样生效）。

页面列表（PageList）

功能说明：按应用浏览、搜索、进入设计器。

操作步骤：

1. 访问 /dsp/pageList，点击目标应用卡片。
2. 进入 /dsp/page/{appCode} 设计器首页。

顶栏工具条

预期结果：保存成功无报错；预览在新窗口或路由中展示最新配置。

左侧 — 文件（页面树）

操作步骤：

1. 点击左侧 文件夹图标（Tooltip：文件）。
2. 使用搜索框：占位符「表单编号、名称」。
3. 新建目录：顶部 + 图标 pageAddDir。
4. 目录节点操作：编辑、新建表单、新建子文件夹、复制、删除（删除有「确认删除？」）。
5. 点击叶子页面节点，在画布中打开该页。

左侧 — 组件

功能说明：PC 端组件库（H5 页面类型下该 Tab 隐藏）。

操作步骤：

1. 点击 列表图标（Tooltip：组件）。
2. 搜索「请输入编号、名称搜索」。
3. 拖拽组件到画布；在组件树中复制、删除（「确认删除该组件？」）。

左侧 — 数据（数据集）

操作步骤：

1. 点击 数据图标（Tooltip：数据）。
2. 点击 新建数据（红色按钮，需已打开页面 hasOpenPage）。
3. 列表项支持：复制、编辑、删除数据集。
4. 点击条目在抽屉中配置 publicData 绑定。

左侧 — 方法（页面逻辑）

操作步骤：

1. 点击 方法图标（Tooltip：方法）。
2. 新建方法 → 在抽屉编辑 publicLogic。
3. 支持复制、编辑、删除逻辑方法。

左侧 — 接口 / 业务模型 / 表单元素

左侧 — 应用参数、应用字典 / 公共方法

• 应用参数、应用字典（Tab 8）：维护页面级参数与字典引用。
• 公共方法（Tab 9）：跨页面复用逻辑。

画布与右侧配置

操作步骤：

1. 在画布选中组件。
2. 在右侧配置 属性、样式、静态/动态数据、事件。
3. 顶栏可切换 终端（clientFlag）预览 PC/移动表现。
4. 门户项标记「P」表示门户相关配置。

运行态路由

注意：设计态 /page/design 与运行态 /page/auto 不是同一页面，联调时务必访问运行态验证权限与数据。

场景 A：标准 CRUD 页面

1. 模型设计完成 → pageList 进入应用。
2. 文件树 新建表单 → 拖入表格 + 表单容器组件。
3. 数据 Tab 新建数据集绑定模型查询。
4. 方法 Tab 编写保存前校验逻辑。
5. 权限配置 限制部门数据范围。
6. 保存 → 预览 → 配置工作台菜单 → 业务用户使用 /page/auto 填报。

场景 B：带审批流程的表单

1. 完成场景 A 的表单页。
2. 顶栏 流程 绑定 BPM 流程定义。
3. 流程设计器配置用户任务表单为本页面。

场景 C：AI 辅助逻辑脚本

1. 顶栏点击 AI。
2. 在逻辑编辑场景使用脚本补全（依赖本地模型偏好配置）。
3. 保存并预览触发逻辑。

• 设计态：需页面设计资源权限。
• 运行态：菜单 getMyMenuTree + FormDataAuth 数据权限。
• 按钮级权限在按钮事件配置中定义。