项目平台之测试报告的编码设计（七）

---

一、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/`)
}

页面展示结果如下

测试记录详情

测试报告详情