更新时间：2025-08-14 GMT+08:00
如何在审批页面直接复用提交的表单页面
期望实现效果
在标准页面中，通过表格创建数据提交页面和通过表格创建数据审批页面是两个常用功能，如员工出差申请、请假申请、报销单据审批及商品出入库审批等。当数据提交页面与数据审批页面内容差异不大时，可以考虑将两个功能复用至同一页面，避免重复开发，提高开发效率。
图1 实现效果
功能实现方法
- 创建一个低代码应用。
- 参考授权用户使用华为云Astro轻应用并购买实例中操作，申请华为云Astro轻应用免费试用或购买商业实例。
- 实例购买后，在华为云Astro轻应用服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。
- 在“应用”中，单击“新建低代码应用”或单击
，进入新建低代码应用页面。
首次创建应用时，请根据界面提示创建一个命名空间。命名空间一旦创建，不能修改和删除，创建前请确认好相关信息。建议使用公司或团队的缩写作为命名空间。
- 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。
- 输入应用的标签和名称，单击“新建”，即可进入应用设计器。
图2 创建一个空白应用
- 创建一个对象“productList”，并为对象添加字段。
表2 新建productList对象参数说明 参数
说明
示例
对象名称
新建对象的名称，创建后可修改。
取值范围：1~80个字符。
productList
唯一标识
新建对象在系统中的标识，创建后不支持修改。命名要求如下：
productList
- 在已创建的对象中，单击
，进入对象详情页面。 - 在“字段”页签，单击“添加”，为对象添加productName字段。
图4 添加productName字段
表3 添加productName字段参数说明 参数
说明
示例
显示名称
新建字段的名称，创建后可修改。
取值范围：1~63个字符。
商品名
唯一标识
新建字段在系统中的标识，创建后不支持修改。命名要求如下：
- 长度不能超过63个字符，包括前缀命名空间的长度。
- 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。
productName
字段类型
单击
，在弹出的页面中，根据页面提供的参数解释，选择新建字段所属的类型。文本
- 按照上述操作，为对象添加表4中字段。
表4 为对象添加字段 显示名称
唯一标识
字段类型
数据长度
商品描述
productDesc
文本
255
审批意见
approvalComments
文本
255
商品状态
productStatus
文本
255
执行上述操作后，在对象的“字段”页签，可查看到已添加的自定义字段。
图5 查看已添加的字段
- 在已创建的对象中，单击
- 创建一个列表页，并新建对象模型。
- 在应用设计器中，选择“界面”，单击页面后的“+”，新建一个标准页面。
图6 新建列表页
- 在标准页面底部，单击“模型视图”，从设计视图切换到模型视图。
- 单击“新增模型”，输入模型名称（如productListMode）、“来源”选择“对象”，单击“下一步”。
图7 新建模型
- 选择2中创建的对象和添加的字段，单击“下一步”。
图8 选择对象和字段
- 直接单击“确定”，完成模型创建。
- 返回设计视图页面，在标准页面底部，单击“设计视图”，从模型视图切换到设计视图。
- 在标准页面中拖入一个表格组件。
图9 拖入表格组件
- 选中表格组件，在中，单击“添加”，为表格添加一个工具栏。
图10 添加工具栏
- 删除工具栏中多余的按钮，仅保留一个“新增行”。
图11 删除多余按钮
- 选中表格组件，在中，单击
。 - 选中3.c中创建的模型，单击“确定”，实现表格列表功能。
图12 选择对象和字段
图13 表格列表
- 单击页面上方的
，保存页面。
- 在应用设计器中，选择“界面”，单击页面后的“+”，新建一个标准页面。
- 创建新建和审批页面，并添加模型。
- 在应用设计器中，选择“界面”，单击页面后的“+”，新建一个标准页面。
图14 创建新建和审批页面
- 在标准页面中拖入一个表单组件，绑定数据对象并添加操作按钮。
图15 拖入表单组件
图16 添加操作按钮
图17 添加表单后效果
- 拖拽两个“标题”组件到页面中，修改“标题内容”为“基本信息”和“审批”，布局效果如图18。
- 在标准页面底部，单击“模型视图”，从设计视图切换到模型视图。
- 单击“新增模型”，输入模型名称（如isApproval）、“来源”选择“自定义”，单击“下一步”。
图19 新增isApproval模型
- 保持默认，直接单击“下一步”，再单击“确定”，完成模型的创建。
- 按照4.e~4.f中操作，再创建一个“isNew”模型，最终效果下图所示。
图20 查看已创建的模型
- 在标准页面底部，单击“设计视图”返回设计视图页面，选中商品名输入框组件，在中，单击“+”，选择“禁用”，再单击
，为字段绑定isApproval模型。
图21 为商品名输入框组件绑定isApproval模型
- 选中商品描述输入框组件，在中，单击“+”，选择“禁用”，再单击
，为组件绑定isApproval模型。
图22 为商品描述输入框绑定isApproval模型
- 选中审批标题组件，在中，单击“+”，选择“隐藏”，再单击
，为字段绑定isNew模型。
图23 为审批标题绑定isNew模型
- 同样，按照4.j中操作，选中审批意见输入框组件，为组件绑定isNew模型。
图24 为审批意见输入框绑定isNew模型
- 选中页面组件，在“事件”页签，单击“加载”后的+，为页面添加事件。
图25 为页面添加事件
在自定义动作中，输入如下示例，用于获取外部数据。其中，isApproval为4.e中创建的模型名，命名空间__productList__CST'为2中创建的对象，form_0为4.b中表单绑定模型的名称，如图26。
// 获取调用打开页面方法时传入的参数 const { id, isApproval } = context.$page.params; $model.ref('isApproval').setData(isApproval); $model.ref('isNew').setData(!isApproval); const _object = context.object('命名空间__productList__CST'); if (id) { // 根据记录ID查询单条数据 _object.queryByID(id).then(function (response) { if (response && response.resCode === '0') { $model.ref('form_0').setData(response.result[0]); } }); } - 选中“保存”按钮，在“事件”页签中，单击“提交表单”后的
删除当前提交表单的方法，再单击“点击”后的“+”，为按钮添加自定义动作。
图27 删除提交表单方法
在自定义动作中，输入如下示例，用于处理新建或更新的数据。其中，isNew为4.g中创建的模型名称，命名空间__productList__CST为2.b中创建对象的名称、命名空间__productStatus__CST和命名空间__approvalComments__CST为2.e中添加的对象字段。
// 获取模型数据 const isNew = $model.ref('isNew').getData(); // 获取表单数据 const _form = context.$component.form; const data = _form.getFormData(); // 获取Object对象 const _object = context.object('命名空间__productList__CST'); // 新建 if (isNew) { data.命名空间__productStatus__CST = '审批中'; // 插入数据，支持批量操作 _object.insert([data]).then(function (response) { if (response && response.resCode === '0') { // 成功消息 context.$message.success('新建成功！'); // 关闭弹出页面，仅能在弹出页面上使用 context.$dialog.popin(); } }); } else { const id = context.$page.params.id; const params = { 命名空间__productStatus__CST: '通过', 命名空间__approvalComments__CST: data.命名空间__approvalComments__CST } // 根据记录ID更新数据 _object.updateByID(id, params).then(function (response) { if (response && response.resCode === '0') { // 成功消息 context.$message.success('审批成功！'); // 关闭弹出页面，仅能在弹出页面上使用 context.$dialog.popin(); } }); } - 单击页面上方的
，保存页面。
- 在应用设计器中，选择“界面”，单击页面后的“+”，新建一个标准页面。
- 返回列表页，添加事件。
- 选择“新增行”按钮组件，在“事件”页签，单击“新增行”后的
删除当前新增行的方法，再单击“点击”后的“+”，为按钮添加自定义动作。
图28 删除预置的事件
在自定义动作中，输入如下示例，用于弹出一个标准页面。其中，命名空间__NewApproval为4中创建的标准页面的名称。
// 弹出标准页面 context.$dialog.popup({ title: '新建', page: '命名空间__NewApproval', width: 600, height: 400, footerHide: true, showCancel: true, okText: 'ok', params: {}, onClose: function () { // 需要等待数据库操作完成 setTimeout(() => { // 当前表格 const _table = context.$component.table; // 刷新表格 _table.doQuery(); }, 100); } }); - 选择表格组件，在中，单击
，为表格添加一个操作列。
图29 添加操作列
- 单击新增操作列Operation1后的
，进入属性配置页面。 - 在“基本属性”中，将“列标题”修改为“操作”。
图30 修改列标题
- 在“操作按钮”中，单击“添加操作按钮”，新增一个操作按钮，修改按钮“标签”为“审批”。
图31 新增审批操作按钮
- 单击审批后的
，再单击动作列表后的“+”，为操作列按钮添加自定义动作。
图32 为操作列按钮添加自定义动作
在自定义动作中，输入如下事件，用于获取行数据。其中，命名空间__NewApproval为4.a中创建的标准页面的名称。
// 在操作列的事件中，获取当前操作的行数据 const rowData = context.$component.current.$attrs.row; // 弹出标准页面 context.$dialog.popup({ title: '审批', page: '命名空间__NewApproval', width: 600, height: 580, footerHide: true, showCancel: true, okText: 'ok', params: { isApproval: true, id: rowData.id }, onClose: function () { // 需要等待数据库操作完成 setTimeout(() => { // 当前表格 const _table = context.$component.table; // 刷新表格 _table.doQuery(); }, 100); } }); - 单击页面上方的
，保存页面。
- 选择“新增行”按钮组件，在“事件”页签，单击“新增行”后的
- 验证效果。
- 在列表页，单击页面上方的
，进入预览页面。 - 单击“新增行”，输入商品名和商品描述信息，单击“保存”，添加一条数据。
图33 添加一条行数据
保存成功后，在列表中可查看到已添加的数据，且“商品状态”为“审批中”。
图34 查看已添加的数据
- 单击新增数据后的“审批”，输入“审批意见”，单击“保存”，完成审批。
图35 完成审批
保存成功后，可查看到“审批意见”为“同意”，“商品状态”变为“通过”。
图36 查看审批意见
- 在列表页，单击页面上方的
