组装“业务用户管理”页面

操作步骤

1. 在“我的应用”中，单击“设备维修管理系统”，进入应用。
2. 在“User”目录中，鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。
3. 在“标签”和“名称”文本框中输入“portalUserList”，单击“添加”。

   当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。

4. 定义对象模型“portalUser”。
   1. 在页面底部单击“模型视图”，然后在“模型视图”中，单击“新增模型”。
   2. 添加对象模型，模型名称“portalUser”，单击“下一步”。
   3. 在“选择对象”下，选择标准对象“PortalUser”，并勾选以下字段，然后单击“下一步”，再单击“确定”。

      表2 选择字段

      节点名称	数据类型
      usrName	保持默认
      profile	保持默认
      userType	保持默认
      createdBy	保持默认
      createdDate	保持默认

      图1 选择对象
      
   4. 单击页面上方的，保存模型。

5. 定义与API（registerPortalUser:1.0.0）关联的服务模型。
   1. 在“模型视图”下，单击“新增模型”。
   2. 设置模型名称为“registerUser”，来源选择“服务”，单击“下一步”。
   3. “选择服务类型”为“公共接口”，“选择项目”为“设备维修管理系统”，指定模型与API“registerPortalUser”关联，单击“确定”，再单击“下一步”。
      图2 选择服务类型为API
      

      关联API后，系统会自动显示API中脚本的输入、输出参数。

   4. 方法保持不变，单击“确定”。
   5. 单击页面上方的，保存设置。

6. 切换到“设计视图”，从左侧基础组件区，拖拽一个“表格”到右侧“页面内容”中。
   图3 拖拽一个表格到页面
   

7. 为表格绑定模型，并设置表格查询结果区域。
   1. 在“设计视图”中，选中“表格”，单击右侧“属性”页签，如图4所示。
      图4 为表格绑定对象模型
      
   2. 在“选择模型”对话框中，勾选“portalUser”对象模型，再单击“确定”。
      

      勾选“portalUser”后，可以将该节点下全部字段自动添加为表格的列。

      图5 绑定模型
      

      绑定对象模型后，系统自动将模型的所有字段添加为表格列，如图6所示。

      图6 绑定数据模型后的表格列
      
   3. 选中“表格”，在右侧“已添加列”中，单击“Profile”后的，删除“Profile”字段。
      图7 删除字段
      
   4. 单击“User Name”后的，修改“列标题”为“用户名”。
      图8 设置“User Name”列标题
      
   5. 单击“UserType”后的，修改“列标题”为“用户类型”，“显示类型”设置为“自定义”，并在输入以下自定义事件代码，然后单击“确定”。

          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”列属性
      
   6. 单击页面上方的，保存设置。

8. 设置工具栏区域。
   1. 在左侧“设计视图”中选中“表格”，单击右侧“属性”页签“表格区块”中“工具栏”后的“添加”按钮。
      图10 增加工具栏
      
   2. 只保留“新增行”、“删除”按钮，删除其他工具栏中多余的按钮。
      单击选中待删除按钮，鼠标右键单击，请确认已选中按钮，然后选择“删除”，如果误删其他组件，在页面上单击返回按钮即可。

      图11 工具栏中需要删除的按钮
      
      图12 选中待删除按钮
      
   3. 选中“新增行”按钮，在右侧属性面板中，修改“显示名称”为“新增用户”。
   4. 单击页面上方的，保存设置。

9. 创建查询条件区域。
   1. 选中“表格”，单击右侧“属性”页签“表格区块”中“查询”后的“添加”按钮。
      图13 增加查询
      
   2. 在弹窗中勾选“usrName”、“userType”，单击“确定”，表格上方自动生成查询条件区域。
      图14 添加查询条件
      
   3. 拖拽一个“下拉框”组件到“用户类型”输入框下方，然后选择“用户类型”输入框，右键单击删除。
   4. 配置“下拉框”组件属性。
      1. 选择“下拉框”组件，在右侧属性面板中，单击“数据绑定”，在数据绑定弹窗中，勾选“table_0_condition”的“queryInfo”下的“userType”。
         图15 添加数据绑定
         
      2. 修改“下拉框”的“标签”为“用户类型”，并设置“选项”为“cs，客服人员”，“ds，派单人员”、“ms，维修人员”。
         图16 设置选项值
         

10. 添加“新增用户”按钮的“点击”事件代码。
    单击“事件”页签，再单击“新增行”的，在“自定义动作”中，删除原有事件代码，输入以下事件代码，然后单击“创建”。

    图17 编辑事件代码
    

    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. 单击页面上方的，保存设置。
12. 单击页面上方的，进入预览页面，查看页面是否符合预期。
    1. 查看页面样式是否符合预期，即查看“用户类型”下拉框中，选项值是否正常。
    2. 查看用户列表中是否有测试数据。
       图18 业务用户管理
       
    3. 单击“新增用户”，查看是否弹出“业务用户注册”页面，如果正常显示，则说明按钮事件代码正确，如果不显示弹窗，请检查按钮事件代码。
    4. 在“业务用户注册”弹窗中，输入“用户名”、“密码”，并设置“角色”，单击“确定”，是否提示“注册成功”，注册成功后，返回“业务用户管理”，查看业务用户列表中，是否显示新增用户信息。如果新增用户失败，请检查“业务用户管理”页面相关事件代码。