提交 08714b7e authored 作者: 陈泽健's avatar 陈泽健

feat(execution): 执行记录增加【查看详情】按钮,弹窗显示用例列表

- 操作列宽度从 210px 调整为 260px
- 新增【查看详情】按钮,点击弹窗显示执行任务包含的用例名称
- 用例列表弹窗支持加载状态和空数据提示
- 数据优先使用缓存的 rowResults,未缓存则调用 API 加载
Co-Authored-By: 's avatarClaude <noreply@anthropic.com>
上级 b3b54f03
...@@ -206,8 +206,16 @@ ...@@ -206,8 +206,16 @@
{{ formatTime(row.created_at) }} {{ formatTime(row.created_at) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="210" fixed="right"> <el-table-column label="操作" width="260" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-button
size="small"
type="primary"
link
@click="showCaseListDialog(row)"
>
查看详情
</el-button>
<el-button <el-button
size="small" size="small"
type="primary" type="primary"
...@@ -315,6 +323,25 @@ ...@@ -315,6 +323,25 @@
:execution-id="currentExecutionId" :execution-id="currentExecutionId"
/> />
</el-dialog> </el-dialog>
<!-- 用例列表弹窗 -->
<el-dialog
v-model="caseListDialogVisible"
title="执行任务用例列表"
width="600px"
destroy-on-close
>
<div v-loading="caseListLoading">
<el-table :data="caseListData" max-height="400px" size="small">
<el-table-column type="index" label="#" width="50" />
<el-table-column prop="case_name" label="用例名称" min-width="200" />
</el-table>
<el-empty v-if="caseListData.length === 0" description="暂无用例" :image-size="60" />
</div>
<template #footer>
<el-button @click="caseListDialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div> </div>
</template> </template>
...@@ -397,6 +424,11 @@ const currentStepResult = ref<any[]>([]) ...@@ -397,6 +424,11 @@ const currentStepResult = ref<any[]>([])
const currentCaseName = ref('') const currentCaseName = ref('')
const currentExecutionId = ref('') const currentExecutionId = ref('')
// 用例列表弹窗相关
const caseListDialogVisible = ref(false)
const caseListLoading = ref(false)
const caseListData = ref<any[]>([])
// WebSocket 客户端 // WebSocket 客户端
let wsClient: WebSocketClient | null = null let wsClient: WebSocketClient | null = null
// 主动轮询定时器(双重保障:WebSocket 断连时仍能检测执行完成) // 主动轮询定时器(双重保障:WebSocket 断连时仍能检测执行完成)
...@@ -558,6 +590,37 @@ const showStepDetail = (executionRow: any, caseResult: any) => { ...@@ -558,6 +590,37 @@ const showStepDetail = (executionRow: any, caseResult: any) => {
stepDetailVisible.value = true stepDetailVisible.value = true
} }
/**
* 显示用例列表弹窗
* 加载执行任务包含的所有用例名称
*/
const showCaseListDialog = async (row: any) => {
caseListDialogVisible.value = true
caseListLoading.value = true
caseListData.value = []
try {
// 如果已经加载过结果,直接使用
if (rowResults.value[row.id] && rowResults.value[row.id].length > 0) {
caseListData.value = rowResults.value[row.id].map(r => ({
case_name: r.case_name,
case_id: r.case_id,
}))
} else {
// 否则调用 API 加载
const response = await executionApi.getResults(row.id)
caseListData.value = response.items.map((r: any) => ({
case_name: r.case_name,
case_id: r.case_id,
}))
}
} catch (error: any) {
ElMessage.error('加载用例列表失败: ' + error.message)
} finally {
caseListLoading.value = false
}
}
const showRunDialog = () => { const showRunDialog = () => {
runDialogVisible.value = true runDialogVisible.value = true
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论