<script setup lang="ts">
|
import { ref } from 'vue'
|
import { testStatusLabels } from '@/api/tests'
|
import type { DeviceRelatedTest } from '@/stores/deviceRelatedTests'
|
|
defineProps<{ tests: DeviceRelatedTest[] }>()
|
const expanded = ref(false)
|
</script>
|
|
<template>
|
<span v-if="tests.length === 0">-</span>
|
<router-link v-else-if="tests.length === 1" class="related-test-link"
|
:to="{ name: 'test-console', params: { id: tests[0]!.testId } }"
|
:title="`${tests[0]!.testName} · ${testStatusLabels[tests[0]!.testStatus] || '未知'} · ${tests[0]!.channels.join('、')}`">
|
{{ tests[0]!.testName }}
|
</router-link>
|
<button v-else class="related-tests-button" type="button" @click="expanded = true">{{ tests.length }} 项测试</button>
|
|
<el-dialog v-model="expanded" title="关联测试" width="560px" style="max-width: calc(100% - 24px)" append-to-body>
|
<table class="related-tests-table">
|
<thead><tr><th>测试名称</th><th>测试状态</th><th>绑定通道</th></tr></thead>
|
<tbody>
|
<tr v-for="test in tests" :key="test.testId">
|
<td><router-link :to="{ name: 'test-console', params: { id: test.testId } }" @click="expanded = false">{{ test.testName }}</router-link></td>
|
<td>{{ testStatusLabels[test.testStatus] || '未知' }}</td>
|
<td>{{ test.channels.join('、') || '-' }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</el-dialog>
|
</template>
|
|
<style scoped>
|
.related-test-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
.related-test-link, .related-tests-button, .related-tests-table a { color: var(--blue); text-decoration: none; }
|
.related-tests-button { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
|
.related-test-link:hover, .related-tests-button:hover, .related-tests-table a:hover { text-decoration: underline; }
|
.related-tests-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
|
.related-tests-table th, .related-tests-table td { padding: 10px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; white-space: normal; }
|
.related-tests-table th { background: var(--surface-soft); }
|
.related-tests-table th:nth-child(2) { width: 72px; }
|
</style>
|
