# 如何在审批页面直接复用提交的表单页面 #### 期望实现效果 在标准页面中，通过表格创建数据提交页面和通过表格创建数据审批页面是两个常用功能，如员工出差申请、请假申请、报销单据审批及商品出入库审批等。当数据提交页面与数据审批页面内容差异不大时，可以考虑将两个功能复用至同一页面，避免重复开发，提高开发效率。 图1实现效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301026461.png "点击放大") #### 功能实现方法 1. 创建一个低代码应用。 1. 参考[授权用户使用华为云Astro轻应用并购买实例](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9046.html)中操作，申请华为云Astro轻应用免费试用或购买商业实例。 2. 实例购买后，在华为云Astro轻应用服务控制台的"主页"中，单击"进入首页"，进入应用开发页面。 3. 在"应用"中，单击"新建低代码应用"或单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002134818046.png "点击放大")，进入新建低代码应用页面。 首次创建应用时，请根据界面提示创建一个命名空间。命名空间一旦创建，不能修改和删除，创建前请确认好相关信息。建议使用公司或团队的缩写作为命名空间。 4. 在新建低代码应用页面，应用类型选择"标准应用"，单击"确定"。 5. 输入应用的标签和名称，单击"新建"，即可进入应用设计器。 图2创建一个空白应用 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002170372113.png "点击放大") 表1新建空白应用参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。 | 我的第一个应用 | | 名称 | 新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加***命名空间***__。命名要求如下： - 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。 | A | 2. 创建一个对象"productList"，并为对象添加字段。 1. 在应用设计器的左侧导航栏中，选择"数据"，单击对象中的"+"。 2. 设置对象的名称和唯一标识为"productList"，单击"确定"，进入对象详情页。 图3创建对象productList ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002311532132.png "点击放大") 表2新建productList对象参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 对象名称 | 新建对象的名称，创建后可修改。 取值范围：1\~80个字符。 | productList | | 唯一标识 | 新建对象在系统中的标识，创建后不支持修改。命名要求如下： - 长度不能超过63个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母，数字和下划线组成，且不能以下划线结尾。 | productList | 3. 在已创建的对象中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301013833.png)，进入对象详情页面。 4. 在"字段"页签，单击"添加"，为对象添加productName字段。 图4添加productName字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301042229.png "点击放大") 表3添加productName字段参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 显示名称 | 新建字段的名称，创建后可修改。 取值范围：1\~63个字符。 | 商品名 | | 唯一标识 | 新建字段在系统中的标识，创建后不支持修改。命名要求如下： - 长度不能超过63个字符，包括前缀命名空间的长度。 - 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。 | productName | | 字段类型 | 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266317004.png)，在弹出的页面中，根据页面提供的参数解释，选择新建字段所属的类型。 | 文本 | 5. 按照上述操作，为对象添加[表4]中字段。 表4为对象添加字段 | 显示名称 | 唯一标识 | 字段类型 | 数据长度 | |:---|:---|:---|:---| | 商品描述 | productDesc | 文本 | 255 | | 审批意见 | approvalComments | 文本 | 255 | | 商品状态 | productStatus | 文本 | 255 | 执行上述操作后，在对象的"字段"页签，可查看到已添加的自定义字段。 图5查看已添加的字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002311691964.png "点击放大") 3. 创建一个列表页，并新建对象模型。 1. 在应用设计器中，选择"界面"，单击页面后的"+"，新建一个标准页面。 图6新建列表页 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266536604.png "点击放大") 2. 在标准页面底部，单击"模型视图"，从设计视图切换到模型视图。 3. 单击"新增模型"，输入模型名称（如productListMode）、"来源"选择"对象"，单击"下一步"。 图7新建模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301179573.png "点击放大") 4. 选择[2]中创建的对象和添加的字段，单击"下一步"。 图8选择对象和字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301069033.png "点击放大") 5. 直接单击"确定"，完成模型创建。 6. 返回设计视图页面，在标准页面底部，单击"设计视图"，从模型视图切换到设计视图。 7. 在标准页面中拖入一个表格组件。 图9拖入表格组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301933345.png "点击放大") 8. 选中表格组件，在"属性 \> 表格区块 \> 工具栏"中，单击"添加"，为表格添加一个工具栏。 图10添加工具栏 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301077313.png "点击放大") 9. 删除工具栏中多余的按钮，仅保留一个"新增行"。 图11删除多余按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266442890.png "点击放大") 10. 选中表格组件，在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002267283400.png)。 11. 选中[3.c]中创建的模型，单击"确定"，实现表格列表功能。 图12选择对象和字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301093133.png "点击放大") 图13表格列表 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301095089.png "点击放大") 12. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301933349.png)，保存页面。 4. 创建新建和审批页面，并添加模型。 1. 在应用设计器中，选择"界面"，单击页面后的"+"，新建一个标准页面。 图14创建新建和审批页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002268283758.png "点击放大") 2. 在标准页面中拖入一个表单组件，绑定数据对象并添加操作按钮。 图15拖入表单组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301283709.png "点击放大") 图16添加操作按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266474744.png "点击放大") 图17添加表单后效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266690922.png "点击放大") 3. 拖拽两个"标题"组件到页面中，修改"标题内容"为"基本信息"和"审批"，布局效果如[图18]。 图18添加标题组件调整布局 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266698124.png "点击放大") 4. 在标准页面底部，单击"模型视图"，从设计视图切换到模型视图。 5. 单击"新增模型"，输入模型名称（如isApproval）、"来源"选择"自定义"，单击"下一步"。 图19新增isApproval模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301456461.png "点击放大") 6. 保持默认，直接单击"下一步"，再单击"确定"，完成模型的创建。 7. 按照[4.e]\~[4.f]中操作，再创建一个"isNew"模型，最终效果下图所示。 图20查看已创建的模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266706988.png "点击放大") 8. 在标准页面底部，单击"设计视图"返回设计视图页面，选中**商品名** 输入框组件，在"属性 \> 数据绑定 \> 属性值绑定"中，单击"+"，选择"禁用"，再单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301324529.png)，为字段绑定isApproval模型。 图21为商品名输入框组件绑定isApproval模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266725384.png "点击放大") 9. 选中**商品描述** 输入框组件，在"属性 \> 数据绑定 \> 属性值绑定"中，单击"+"，选择"禁用"，再单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002311693124.png)，为组件绑定isApproval模型。 图22为商品描述输入框绑定isApproval模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301350889.png "点击放大") 10. 选中**审批标题** 组件，在"属性 \> 数据绑定 \> 属性值绑定"中，单击"+"，选择"隐藏"，再单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002267340352.png)，为字段绑定isNew模型。 图23为审批标题绑定isNew模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266746282.png "点击放大") 11. 同样，按照[4.j]中操作，选中**审批意见** 输入框组件，为组件绑定isNew模型。 图24为审批意见输入框绑定isNew模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301347493.png "点击放大") 12. 选中**页面** 组件，在"事件"页签，单击"加载"后的+，为页面添加事件。 图25为页面添加事件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002303006605.png "点击放大") 图26查看表单绑定模型的名称 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002303056953.png "点击放大") 在自定义动作中，输入如下示例，用于获取外部数据。其中，*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]); } }); } ``` 13. 选中"保存"按钮，在"事件"页签中，单击"提交表单"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301528893.png)删除当前提交表单的方法，再单击"点击"后的"+"，为按钮添加自定义动作。 图27删除提交表单方法 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266877920.png "点击放大") 在自定义动作中，输入如下示例，用于处理新建或更新的数据。其中，*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(); } }); } ``` 14. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002302020229.png)，保存页面。 5. 返回列表页，添加事件。 1. 选择"新增行"按钮组件，在"事件"页签，单击"新增行"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002267283404.png)删除当前新增行的方法，再单击"点击"后的"+"，为按钮添加自定义动作。 图28删除预置的事件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266954288.png "点击放大") 在自定义动作中，输入如下示例，用于弹出一个标准页面。其中，*命名空间__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); } }); ``` 2. 选择**表格** 组件，在"属性 \> 表格列"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002267016540.png)，为表格添加一个操作列。 图29添加操作列 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301609137.png "点击放大") 3. 单击新增操作列**Operation1** 后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301737857.png)，进入属性配置页面。 4. 在"基本属性"中，将"列标题"修改为"操作"。 图30修改列标题 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002303189997.png "点击放大") 5. 在"操作按钮"中，单击"添加操作按钮"，新增一个操作按钮，修改按钮"标签"为"审批"。 图31新增审批操作按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301742821.png "点击放大") 6. 单击**审批** 后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002266968080.png)，再单击动作列表后的"+"，为操作列按钮添加自定义动作。 图32为操作列按钮添加自定义动作 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002303079033.png "点击放大") 在自定义动作中，输入如下事件，用于获取行数据。其中，*命名空间__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); } }); ``` 7. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002268287158.png)，保存页面。 6. 验证效果。 1. 在列表页，单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002301013861.png)，进入预览页面。 2. 单击"新增行"，输入商品名和商品描述信息，单击"保存"，添加一条数据。 图33添加一条行数据 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002268234452.png "点击放大") 保存成功后，在列表中可查看到已添加的数据，且"商品状态"为"审批中"。 图34查看已添加的数据 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002270281778.png "点击放大") 3. 单击新增数据后的"审批"，输入"审批意见"，单击"保存"，完成审批。 图35完成审批 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002268518050.png "点击放大") 保存成功后，可查看到"审批意见"为"同意"，"商品状态"变为"通过"。 图36查看审批意见 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002303210693.png "点击放大")