大家好~我是小方，欢迎大家关注笋货测试笔记体完记得俾个like呀
回顾
在上篇中，我们已经对接完了项目管理模块，实现了项目列表的展示、新增项目、初始化项目、同步项目(后端api暂未编写)、删除项目相关的功能。今天继续完成剩下的功能吧==>项目详情页面
项目详情页面功能拆分
- 成员列表展示、搜索功能
- 添加项目成员权限
- 项目设置表单
这里相关的页面设计可以参考一下pity的项目管理
成员列表tab
新建src/views/project/detail.vue，接着设置项目详情路由
其实我们的项目卡片是有点击事件的，上次可能没有讲到，这里点击后触发
onSelect再判断是否有操作权限，有就拼接路径/system/project/${project_id}这个路径就会匹配到项目详情页面，否则报错提示
项目详情页面如何设计呢？这里可以借鉴pity的项目详情页面，首先顶部有两个tab，通过切换tab实现不同的功能，这里的话，直接用el-tabs
tab切换事件
handleClick，切换到成员列表就请求项目权限成员列表接口，切换到项目设置就请求项目详情接口
接着新建添加成员按钮、输入框、搜索按钮和重置按钮
点击事件直接看源代码，这里不过多描述，比较简单，最后成员列表tab栏再加个表格，展示数据，表格的一些交互先不介绍哈~
最后上效果图
项目设置tab
我们可以把之前新增项目表单直接搬过来即可，cv大法~这里要注意的有两点
- 如果是ssh拉取方式，这里有个公钥的展示框可供复制
- 如果是http拉取方式，这里展示的密码为密文，需要点击小眼睛，才能进行解密查看
添加项目成员权限表单
这里的表单跟编辑用户权限表单类似，也可以直接复制过来，弹窗使用el-dialog+el-form表单就两个字段，用户名和设置的权限
最终效果
总结
今天的项目详情页面联调比较简单，前端这一块讲得比较粗略，大家把代码拉一下，意会一下...最近的晋升PPT和半年绩效总结已撸完啦，又可以继续肝~下一期我们来优化一下后端接口，大家可能发现有一些接口并不存在的
- 项目地址
- 代码提交
- 前端：2333580
