回顾
上一节我们我们主要针对用户的角色进行添加和修改功能，还剩下查询和删除，这个笔者已经用代码实现了。就不讲解思路，只是贴代码回顾一下。具体的可以去项目里面查看！
搜索用户
因为一个项目的数据都已经展示给前端了，所以我们这里用前端来进行过滤即可，不需要再调用后端接口。
- 在添加成员同一行添加了一个搜索框，用来搜索成员
image
- 搜索方法
image
这个搜索方法的思路是，当用户输入空字符串的时候，则还原之前的数据。而用户输入了对应的name，那么则搜索roles数组中所有邮件/姓名包含name的数据，并更新data数组。（毕竟data数组才是具体显示数据的地方）
- 删除方法
image
删除方法也很简单，就是通过id删除对应的数据，如果成功就重新加载下数据。
后端更新
image
编写删除用户角色的方法，我们上节编写过类似的权限校验方法。但是每次都先判断他是不是超管，再判断他是不是项目owner，最后再判断他是不是组长，这样的步骤其实在增/删/改都是需要的，为何不抽出一个公共方法呢？
所以我们这里抽离了has_permission的方法
image
逻辑也比较简单，基本是按照上面说的一样，先判断超管，再是项目owner，这里有个组长值得注意，因为组长不能修改组长的权限，所以一旦他不是超管且不是owner，那么他要修改组长的权限(删除或者改动)，那都是禁止的。
看看效果
image
那我们现在进入正题吧！
改动测试用例表
其实如果做的更完美的话，用例应该是有模块的划分的，但是这里我们就不分那么细致了，用例的目录不单独抽出来维护了，就图一个字儿: 省事
image
- 用例等级
字符串类型，支持p0-p3或者更多，这个根据具体的业务需求制定。 - 用例所属目录
为了更方便地去查看用例，我们把用例按照目录进行分类，这样的话用例就形成了3级结构:
项目->目录->用例
虽然这边没有把接口这种关键信息带入进来，但是后续可以糅合yapi相关的文档，用例通过新增一个字段: api_id，用来打通测试用例和api之间的联系。这里就先不纠结这么多了！
完善用例列表相关接口
- 新增获取用例树的接口
from collections import defaultdict from app.models.test_case import TestCase from app.utils.logger import Log class TestCaseDao(object): log = Log("TestCaseDao") @staticmethod def list_test_case(project_id): try: case_list = TestCase.query.filter_by(project_id=project_id, deleted_at=None).order_by( TestCase.name.asc()).all() return TestCaseDao.get_tree(case_list), None except Exception as e: TestCaseDao.log.error(f"获取测试用例失败: {str(e)}") return [], f"获取测试用例失败: {str(e)}" @staticmethod def get_tree(case_list): result = defaultdict(list) # 获取目录->用例的映射关系 for cs in case_list: result[cs.catalogue].append(cs) keys = sorted(result.keys()) tree = [dict(key=f"cat_{key}", children=[{"key": f"case_{child.id}", "title": child.name} for child in result[key]], title=key, total=len(result[key])) for key in keys] return tree
其实是一个很简单的查询接口: 根据project_id获取用例。因为antd中的树需要这样的数据结构:
如下图的json
const treeData = [ { title: 'parent 1', key: '0-0', children: [ { title: 'parent 1-0', key: '0-0-0', disabled: true, children: [ { title: 'leaf', key: '0-0-0-0', disableCheckbox: true, }, { title: 'leaf', key: '0-0-0-1', }, ], }, { title: 'parent 1-1', key: '0-0-1', children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }], }, ], },
key是用来确定树里面节点的唯一性，title就是名字了，children就是挂在该目录下的后续节点。
实际效果:
image
注意这边我们给key加了前缀: case_ 和 cat_，目的是为了区分用例和目录，因为不同的数据需要展示不同的icon，接下来我们会展示。
- 继续改写/project/query接口
image
image
后续如果一个项目数据多的话，可能会引入Redis来缓存project的信息，这样不必每次都去数据库大查特查。
编写用例列表页面
首先我们把页面一分为二，左侧展示树，右侧根据用户选择的用例进行展示。
效果图:
image
image
左侧7份，右侧17份，2个card，如果高度超出则自动变为滚动条。
今天就不详细讲前端的细节了，毕竟本身树就复杂，感觉还不如不讲，哈哈！
