暂存本地
This commit is contained in:
232
src/components/CheckTable.vue
Normal file
232
src/components/CheckTable.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="check-table">
|
||||
<el-tabs v-model="activeTab" type="border-card">
|
||||
<!-- 总体外观检查 -->
|
||||
<el-tab-pane label="总体外观检查" name="appearance">
|
||||
<div class="table-content">
|
||||
<div v-for="(item, index) in appearanceCheck" :key="index" class="check-item">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<ul>
|
||||
<li v-for="(content, idx) in item.content" :key="idx">{{ content }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 主要参数检查 -->
|
||||
<el-tab-pane label="主要参数检查" name="mainData">
|
||||
<el-table :data="mainDataCheck" border stripe>
|
||||
<el-table-column prop="name" label="检查项目" min-width="150"></el-table-column>
|
||||
<el-table-column label="参数要求" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="(content, idx) in scope.row.content" :key="idx">
|
||||
{{ content }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 关键元器件检查 -->
|
||||
<el-tab-pane label="关键元器件检查" name="component">
|
||||
<div class="component-list">
|
||||
<el-collapse v-model="activeComponents" accordion>
|
||||
<el-collapse-item
|
||||
v-for="(item, index) in componentCheck"
|
||||
:key="index"
|
||||
:name="index"
|
||||
:class="{ 'highlighted': highlightedIndex === index }"
|
||||
>
|
||||
<template slot="title">
|
||||
<span class="component-title">
|
||||
<i class="el-icon-document"></i>
|
||||
{{ index + 1 }}. {{ item.name }}
|
||||
</span>
|
||||
</template>
|
||||
<div class="component-content">
|
||||
<div class="requirement-title">检查要求：</div>
|
||||
<ol>
|
||||
<li v-for="(content, idx) in item.content" :key="idx">
|
||||
{{ content }}
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CheckTable',
|
||||
props: {
|
||||
appearanceCheck: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
mainDataCheck: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
componentCheck: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
highlightedIndex: {
|
||||
type: Number,
|
||||
default: -1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'appearance',
|
||||
activeComponents: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
highlightedIndex(newVal) {
|
||||
if (newVal >= 0) {
|
||||
this.activeTab = 'component'
|
||||
this.activeComponents = newVal
|
||||
this.$nextTick(() => {
|
||||
this.scrollToHighlighted()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollToHighlighted() {
|
||||
const highlightedEl = this.$el.querySelector('.highlighted')
|
||||
if (highlightedEl) {
|
||||
highlightedEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.check-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.el-tabs >>> .el-tabs__content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.check-item {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.check-item h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #303133;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.check-item ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.check-item li {
|
||||
margin: 5px 0;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.component-list {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.component-title {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.component-title i {
|
||||
margin-right: 8px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.component-content {
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.requirement-title {
|
||||
font-weight: 500;
|
||||
color: #409eff;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-content ol {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.component-content li {
|
||||
margin: 8px 0;
|
||||
color: #606266;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
animation: highlight-pulse 1s ease-in-out;
|
||||
}
|
||||
|
||||
.highlighted >>> .el-collapse-item__header {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes highlight-pulse {
|
||||
0%, 100% {
|
||||
background: transparent;
|
||||
}
|
||||
50% {
|
||||
background: #ecf5ff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.el-tabs >>> .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.check-item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.component-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.component-content li {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user