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

news2025/1/17 5:55:42

这里写目录标题

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

一、Table表格组件的使用

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

在这里插入图片描述

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

在这里插入图片描述

1、新建Report.vue组件

<template>
    <!-- 测试报告组件 -->
    <div>
        测试报告组件{{$route.params.id}}
    </div>

</template>
    
<script>

</script>

<style scoped>

</style>

2、配置路由

在这里插入图片描述
路由参数动态匹配：path:'/user/:id'

在这里插入图片描述

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

跳转到测试报告页面

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

在这里插入图片描述

三、页面布局

页面分为多个卡片

在这里插入图片描述

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>

在这里插入图片描述

2、卡片设计

<template>
    <!-- 测试报告组件 -->
    <!-- :gutter:设置卡片之间的距离 -->
    <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、打开页面发送请求加载报告数据

获取执行记录
在这里插入图片描述

4、对接口进行封装

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