项目平台——测试报告的实现（七）

青旅半醒 2024-02-25 02:24 3阅读 0赞

#### 这里写目录标题 ####

*  一、Table表格组件的使用
 *   *  1、Table表格组件中的插槽使用
 *  二、点击查看测试报告，跳转到测试报告详情页实现
 *   *  1、新建Report.vue组件
     *  2、配置路由
     *  3、查看报告按钮添加事件
 *  三、页面布局
 *   *  1、Layout布局
     *  2、卡片设计
     *  3、打开页面发送请求加载报告数据
     *  4、对接口进行封装
 *  \------------------------------------------

## 一、Table表格组件的使用 ##

### 1、Table表格组件中的插槽使用 ###

![在这里插入图片描述][61a802d937c84ea280ef8b481d73cf18.png]  
![在这里插入图片描述][b5786889995648b8a2657778bbe99906.png]

## 二、点击查看测试报告，跳转到测试报告详情页实现 ##

![在这里插入图片描述][ab0be5d58c6841d68cbcf0f0652bc602.png]

### 1、新建Report.vue组件 ###

<template>
        
        <div>
            测试报告组件{
        {
        $route.params.id}}
        </div>
    
    </template>
        
    <script>
    
    </script>
    
    <style scoped>
    
    </style>

### 2、配置路由 ###

![在这里插入图片描述][b879a7e74d0c4064bdf45fb2bd0b2754.png]  
路由参数动态匹配：`path:'/user/:id'`

![在这里插入图片描述][df3be005cacb41359191e7dda13ca1df.png]

### 3、查看报告按钮添加事件 ###

跳转到测试报告页面

showReport(id){
        
        // 传递路径参数
        this.$router.push({
        name:"report",params:{
        id:id}})
    }

![在这里插入图片描述][e0f00a6d4a494ce4adbf80753d435d04.png]

## 三、页面布局 ##

页面分为多个卡片

![在这里插入图片描述][2da03ccec2c54aa593a654153c1cbf0b.png]

### 1、Layout布局 ###

<el-row>
        <el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col>
        <el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
      </el-row>

![在这里插入图片描述][19f711c7c8784ad3ab276b31220e5d38.png]

### 2、卡片设计 ###

<template>
        
        
        <el-row :gutter="5" style="padding:1px">
            <el-col :span="12">
                <el-card style="margin-bottom:5px">
                    测试报告组件
                    {
        {
        $route.params.id}}
                </el-card>
                <el-card style="margin-bottom:5px">
                    测试报告组件
                    {
        {
        $route.params.id}}
                </el-card>
                <el-card style="margin-bottom:5px">
                    测试报告组件
                    {
        {
        $route.params.id}}
                </el-card>
                <el-card style="margin-bottom:5px">
                    测试报告组件
                    {
        {
        $route.params.id}}
                </el-card>
                <el-card style="margin-bottom:5px">
                    测试报告组件
                    {
        {
        $route.params.id}}
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    {
        {
        reportInfo}}
                </el-card>
            </el-col>
      </el-row>
    
    </template>

### 3、打开页面发送请求加载报告数据 ###

获取执行记录  
![在这里插入图片描述][4af8d2162aca4bfbad0024fa99720710.png]

### 4、对接口进行封装 ###

//  获取单条执行记录
    	getRecordInfo(id){
        
    		return http.get(`/records/${
          id}/`)
    },
    //  获取单个测试报告
    	getReportInfo(id){
        
    		return http.get(`/records/${
          id}/report/`)
    }

页面展示结果如下  
![在这里插入图片描述][a2e69c826835431a8e063773e24c92f1.png]

## \------------------------------------------ ##

测试记录详情  
![在这里插入图片描述][6382a07fb6ba43d29b61e543ef6624b4.png]  
测试报告详情  
![在这里插入图片描述][53c4a448bc884c0388905b684b841cd3.png]

[61a802d937c84ea280ef8b481d73cf18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/7f22666a07d54b3193fbbdd706e80c70.png
[b5786889995648b8a2657778bbe99906.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/8776b5e87c6f4222ab5b8676d2f5e0a2.png
[ab0be5d58c6841d68cbcf0f0652bc602.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0fb4061196174655923292b6d0e8fbb2.png
[b879a7e74d0c4064bdf45fb2bd0b2754.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/198c5a36834c4a2da897a23226bbdb9b.png
[df3be005cacb41359191e7dda13ca1df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c34e6c6c08cd4fabb1ca2ed057c98d91.png
[e0f00a6d4a494ce4adbf80753d435d04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c2e396a289ce40fbade82f587027773c.png
[2da03ccec2c54aa593a654153c1cbf0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/ec7bcc8fc52e48e198df7d99a78fa9b0.png
[19f711c7c8784ad3ab276b31220e5d38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/5b846e515b8940b5b221fb450ace9145.png
[4af8d2162aca4bfbad0024fa99720710.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c240b29c61bf449d80d13bf080d43303.png
[a2e69c826835431a8e063773e24c92f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0d6a31f515b34b2c91570e79ab91bb2f.png
[6382a07fb6ba43d29b61e543ef6624b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/30224da35d0146a992c3c187688e7db7.png
[53c4a448bc884c0388905b684b841cd3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/f838d1dace1040209ea90397180155e8.png