# 组装"业务用户管理"页面 "业务用户管理"页面主要是通过页面对象模型与"PortalUser"标准对象绑定，并在前端页面保存新增业务用户时，调用"用户注册"逻辑，完成对该对象进行增删查的操作，实现业务用户管理功能。 结合页面需求，页面需要创建如下模型： 表1模型分析 | 模型名称 | 作用 | 详细定义 | |:---|:---|:---| | portalUser | 与后台标准对象PortalUser绑定。 | 对象模型，绑定对象以下字段。 - usrName：用户名 - profile：权限 - userType：用户类型 - createdBy：创建者 - createdDate：创建日期 | | registerUser | 与registerPortalUser公共接口绑定。 | 在页面获取到用户注册信息时，调用registerPortalUser公共接口，对PortalUser进行新增操作。 | #### 操作步骤 1. 在"我的应用"中，单击"设备维修管理系统"，进入应用。 2. 在"User"目录中，鼠标放在"Page"上，单击界面上出现的"+"，在弹出菜单中选择"标准页面"。 3. 在"标签"和"名称"文本框中输入"portalUserList"，单击"添加"。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071989.png)进行锁定。 4. 定义对象模型"portalUser"。 1. 在页面底部单击"模型视图"，然后在"模型视图"中，单击"新增模型"。 2. 添加对象模型，模型名称"portalUser"，单击"下一步"。 3. 在"选择对象"下，选择标准对象"PortalUser"，并勾选以下字段，然后单击"下一步"，再单击"确定"。 表2选择字段 | 节点名称 | 数据类型 | |:---|:---| | usrName | 保持默认 | | profile | 保持默认 | | userType | 保持默认 | | createdBy | 保持默认 | | createdDate | 保持默认 | 图1选择对象 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992806.png "点击放大") 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071997.png)，保存模型。 5. 定义与API（registerPortalUser:1.0.0）关联的服务模型。 1. 在"模型视图"下，单击"新增模型"。 2. 设置模型名称为"registerUser"，来源选择"服务"，单击"下一步"。 3. "选择服务类型"为"公共接口"，"选择项目"为"设备维修管理系统"，指定模型与API"registerPortalUser"关联，单击"确定"，再单击"下一步"。 图2选择服务类型为API ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231465.png "点击放大") 关联API后，系统会自动显示API中脚本的输入、输出参数。 4. 方法保持不变，单击"确定"。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231485.png)，保存设置。 6. 切换到"设计视图"，从左侧基础组件区，拖拽一个"表格"到右侧"页面内容"中。 图3拖拽一个表格到页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992822.png "点击放大") 7. 为表格绑定模型，并设置表格查询结果区域。 1. 在"设计视图"中，选中"表格"，单击右侧"属性"页签![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675218.png)，如[图4]所示。 图4为表格绑定对象模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991425.png "点击放大") 2. 在"选择模型"对话框中，勾选"portalUser"对象模型，再单击"确定"。 勾选"portalUser"后，可以将该节点下全部字段自动添加为表格的列。 图5绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991437.png "点击放大") 绑定对象模型后，系统自动将模型的所有字段添加为表格列，如[图6]所示。 图6绑定数据模型后的表格列 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231489.png "点击放大") 3. 选中"表格"，在右侧"已添加列"中，单击"Profile"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483072005.png)，删除"Profile"字段。 图7删除字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152090.png) 4. 单击"User Name"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675234.png)，修改"列标题"为"用户名"。 图8设置"User Name"列标题 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071973.png "点击放大") 5. 单击"UserType"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071981.png)，修改"列标题"为"用户类型"，"显示类型"设置为"自定义"，并在输入以下自定义事件代码，然后单击"确定"。 ``` let role = params.row.userType; if (role == "cs") { return h("div", {}, "客服人员"); } if (role == "ds") { return h("div", {}, "派单员"); } if (role == "ms") { return h("div", {}, "维修人员"); } ``` 图9修改"UserType"列属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152086.png "点击放大") 6. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152094.png)，保存设置。 8. 设置工具栏区域。 1. 在左侧"设计视图"中选中"表格"，单击右侧"属性"页签"表格区块"中"工具栏"后的"添加"按钮。 图10增加工具栏 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231493.png) 2. 只保留"新增行"、"删除"按钮，删除其他工具栏中多余的按钮。 单击选中待删除按钮，鼠标右键单击，**请确认已选中按钮** ，然后选择"删除"，如果误删其他组件，在页面上单击返回按钮即可。 图11工具栏中需要删除的按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835194.png "点击放大") 图12选中待删除按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835170.png) 3. 选中"新增行"按钮，在右侧属性面板中，修改"显示名称"为"新增用户"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911705.png)，保存设置。 9. 创建查询条件区域。 1. 选中"表格"，单击右侧"属性"页签"表格区块"中"查询"后的"添加"按钮。 图13增加查询 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911693.png) 2. 在弹窗中勾选"usrName"、"userType"，单击"确定"，表格上方自动生成查询条件区域。 图14添加查询条件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152066.png "点击放大") 3. 拖拽一个"下拉框"组件到"用户类型"输入框下方，然后选择"用户类型"输入框，右键单击删除。 4. 配置"下拉框"组件属性。 1. 选择"下拉框"组件，在右侧属性面板中，单击"数据绑定"![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911697.png)，在数据绑定弹窗中，勾选"table_0_condition"的"queryInfo"下的"userType"。 图15添加数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231461.png) 2. 修改"下拉框"的"标签"为"用户类型"，并设置"选项"为"cs，客服人员"，"ds，派单人员"、"ms，维修人员"。 图16设置选项值 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835198.png) 10. 添加"新增用户"按钮的"点击"事件代码。 单击"事件"页签，再单击"新增行"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835182.png)，在"自定义动作"中，删除原有事件代码，输入以下事件代码，然后单击"创建"。 图17编辑事件代码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483072001.png) ``` let _table = context.$component.table; context.$dialog.popup( { title: '新增用户', //弹出框标题 page: 'HW__registerPortalUser', // 弹出页面名称 footerHide:false, width:40, //宽，小于100为百分比，大于100为px height:450, // 高px okText: '确定', cancelText: '取消', onCancel: () => { $model.ref("userInfo").setData({}); }, // 取消时回调 onOk: () => { // 确定时回调 //debugger; let userInfo = $model.ref("userInfo").getData(); $model.ref('registerUser').setData({inputParam: userInfo}); $model.ref('registerUser').run().then(function (data) { if (data && data.msg){ context.$message.success(data.msg); _table.doQuery(); } }).catch(function (error) { console.log('error is', error); context.$message.error(error.resMsg); }); } } ) ``` 11. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911701.png)，保存设置。 12. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835190.png)，进入预览页面，查看页面是否符合预期。 1. 查看页面样式是否符合预期，即查看"用户类型"下拉框中，选项值是否正常。 2. 查看用户列表中是否有测试数据。 图18业务用户管理 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835202.png "点击放大") 3. 单击"新增用户"，查看是否弹出"业务用户注册"页面，如果正常显示，则说明按钮事件代码正确，如果不显示弹窗，请检查按钮事件代码。 4. 在"业务用户注册"弹窗中，输入"用户名"、"密码"，并设置"角色"，单击"确定"，是否提示"注册成功"，注册成功后，返回"业务用户管理"，查看业务用户列表中，是否显示新增用户信息。如果新增用户失败，请检查"业务用户管理"页面相关事件代码。