测试平台系列(24) 编写成员管理功能

回顾

上一节我们编写了项目设置相关功能，还剩下2个tab没有编写，分别是: 用例列表和成员管理.

编写成员列表及部分接口

• 添加成员

• 搜索成员

• 编辑成员

• 删除成员

  今天因为时间关系就不展示删除成员了，只编写编辑/新增成员接口和页面。

编写新增/编辑角色的方法

由于之前我们已经编辑过新增角色的方法了，但是需要修改一点:

image

这里角色的筛选条件不能加上，为什么呢？因为加上的话，我可以创建同一个user_id的不同角色，比如一个组长一个组员。所以我们只要user_id在数据表里出现过，就视为重复添加。

• 新增编辑方法

  编辑方法流程会比较多，首先我们需要判断用户是否是超管，如不是，则判断他是不是owner，如果也不是，则判断他是不是组长，如果是则判断他要修改的用户是不是组长，用户是组长则不让他修改！

    @staticmethod
    def update_project_role(role_id, project_role, user, user_role):
        try:
            role = ProjectRole.query.filter_by(id=role_id, deleted_at=None).first()
            if role is None:
                return "该用户角色不存在"
            if user_role != pity.config.get("ADMIN"):
                project = Project.query.filter_by(id=role.project_id).first()
                if project is None:
                    return "该项目不存在"
                if project.owner != user and role.project_role == 1:
                    # 说明既不是owner也不是超管，无法修改阻止的权限
                    return "不能修改其他组长的权限"
            updater_role = ProjectRole.query.filter_by(user_id=user, project_id=role.project_id, deleted_at=None).first()
            if updater_role is None or updater_role.project_role == 1:
                return "对不起，你没有权限"
            role.project_role = project_role
            role.updated_at = datetime.now()
            role.update_user = user
            db.session.commit()
        except Exception as e:
            ProjectRoleDao.log.error(f"修改项目用户失败, {e}")
            return f"修改项目用户失败, {e}"
        return None

• 判断他要修改的角色id是否存在
• 判断是否是超管或者owner
• 判断要修改的是不是组长
• 判断他自身是否是组长

这些校验都通过以后，才允许他修改组员的权限。

补全具体的接口方法

@pr.route("/role/insert", methods=["POST"])
@permission()
def insert_project_role(user_info):
    try:
        data = request.get_json()
        if data.get("user_id") is None or data.get("project_role") is None or data.get("project_id") is None:
            return jsonify(dict(code=101, msg="请求参数有误"))
        err = ProjectRoleDao.add_project_role(data.get("user_id"), data.get("project_id"), data.get("project_role"),
                                              user_info["id"])
        if err is not None:
            return jsonify(dict(code=110, msg=err))
    except Exception as e:
        return jsonify(dict(code=110, msg=str(e)))
    return jsonify(dict(code=0, msg="操作成功"))


@pr.route("/role/update", methods=["POST"])
@permission()
def update_project_role(user_info):
    try:
        data = request.get_json()
        if data.get("user_id") is None or data.get("project_role") is None or data.get("project_id") is None \
                or data.get("id") is None:
            return jsonify(dict(code=101, msg="请求参数有误"))
        err = ProjectRoleDao.update_project_role(data.get("id"), data.get("project_role"),
                                                 user_info["id"], user_info["role"])
        if err is not None:
            return jsonify(dict(code=110, msg=err))
    except Exception as e:
        return jsonify(dict(code=110, msg=str(e)))
    return jsonify(dict(code=0, msg="操作成功"))

2段代码比较接近，基本就是校验参数+调用核心方法。

编写前端部分

• 编写services部分: src/services/project.js

image

• 编写ProjectRole.jsx组件

image

首先加载组件的时候获取user_id => user的映射，维护一个对话框，用来选择用户+用户角色。

• onUpdateRole

  如果更新成功则重新加载数据。

image

• onFinish

  新增角色信息

• onConfirm

  用来删除角色，目前功能未完成。

image

• permission

  这边其实是一个包装组件，当project_role是'OWNER'的时候，我们把它进行特殊显示:

  1. 不可编辑
  2. 特殊身份标识

  其他用户则返回一个选择框，通过选择他的角色而触发update方法。

image

image

fields是表单的2个字段: 用户和角色

image

注意这里: 我在roles前面强行塞了一个OWNER的数据，为的就是呼应之前针对project_role === 'OWNER'的情况。

image

这边就是添加成员的按钮和List列表。

最终效果

image

image

今天更的很仓促，到家比较晚。很多东西也说的不清不楚的，凑合看吧。下次哪怕一次性写不完也不强行更文了，不过有不懂的或者有建议的可以随时联系我呀！我知道很多读者不太熟悉React，我自己也没办法从最基础的地方交，所以可能在后面花点时间大致写一点点简单的教程吧。

• 前端地址:

https://github.com/wuranxu/pityWeb

• 后端地址:

https://github.com/wuranxu/pity