回顾

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

编写成员列表及部分接口

  • 添加成员

  • 搜索成员

  • 编辑成员

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

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

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

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

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

  • 新增编辑方法
    编辑方法流程会比较多,首先我们需要判断用户是否是超管,如不是,则判断他是不是owner,如果也不是,则判断他是不是组长,如果是则判断他要修改的用户是不是组长,用户是组长则不让他修改!
  1. @staticmethod
  2. def update_project_role(role_id, project_role, user, user_role):
  3. try:
  4. role = ProjectRole.query.filter_by(id=role_id, deleted_at=None).first()
  5. if role is None:
  6. return "该用户角色不存在"
  7. if user_role != pity.config.get("ADMIN"):
  8. project = Project.query.filter_by(id=role.project_id).first()
  9. if project is None:
  10. return "该项目不存在"
  11. if project.owner != user and role.project_role == 1:
  12. # 说明既不是owner也不是超管,无法修改阻止的权限
  13. return "不能修改其他组长的权限"
  14. updater_role = ProjectRole.query.filter_by(user_id=user, project_id=role.project_id, deleted_at=None).first()
  15. if updater_role is None or updater_role.project_role == 1:
  16. return "对不起,你没有权限"
  17. role.project_role = project_role
  18. role.updated_at = datetime.now()
  19. role.update_user = user
  20. db.session.commit()
  21. except Exception as e:
  22. ProjectRoleDao.log.error(f"修改项目用户失败, {e}")
  23. return f"修改项目用户失败, {e}"
  24. return None
  • 判断他要修改的角色id是否存在
  • 判断是否是超管或者owner
  • 判断要修改的是不是组长
  • 判断他自身是否是组长

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

补全具体的接口方法

  1. @pr.route("/role/insert", methods=["POST"])
  2. @permission()
  3. def insert_project_role(user_info):
  4. try:
  5. data = request.get_json()
  6. if data.get("user_id") is None or data.get("project_role") is None or data.get("project_id") is None:
  7. return jsonify(dict(code=101, msg="请求参数有误"))
  8. err = ProjectRoleDao.add_project_role(data.get("user_id"), data.get("project_id"), data.get("project_role"),
  9. user_info["id"])
  10. if err is not None:
  11. return jsonify(dict(code=110, msg=err))
  12. except Exception as e:
  13. return jsonify(dict(code=110, msg=str(e)))
  14. return jsonify(dict(code=0, msg="操作成功"))
  15. @pr.route("/role/update", methods=["POST"])
  16. @permission()
  17. def update_project_role(user_info):
  18. try:
  19. data = request.get_json()
  20. if data.get("user_id") is None or data.get("project_role") is None or data.get("project_id") is None \
  21. or data.get("id") is None:
  22. return jsonify(dict(code=101, msg="请求参数有误"))
  23. err = ProjectRoleDao.update_project_role(data.get("id"), data.get("project_role"),
  24. user_info["id"], user_info["role"])
  25. if err is not None:
  26. return jsonify(dict(code=110, msg=err))
  27. except Exception as e:
  28. return jsonify(dict(code=110, msg=str(e)))
  29. return jsonify(dict(code=0, msg="操作成功"))

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

编写前端部分

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

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

  • 编写ProjectRole.jsx组件

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

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

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

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

  • onFinish
    新增角色信息

  • onConfirm
    用来删除角色,目前功能未完成。

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

  • permission
    这边其实是一个包装组件,当projectrole是’OWNER’的时候,我们把它进行特殊显示_:

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

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

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

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

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

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

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

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

最终效果

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

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

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

  • 前端地址:

https://github.com/wuranxu/pityWeb

  • 后端地址:

https://github.com/wuranxu/pity

才发现之前地址都没贴上,这里补上了哈。后面删除等代码就可能不贴了,大家有兴趣看代码就可以啦!