104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 项目列表展示组件
|
||
* 接收两个参数：title（字符串）和data（字符串数组）
|
||
*/
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: '对话列表',
|
||
},
|
||
data: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
})
|
||
|
||
// 定义输出事件
|
||
const emit = defineEmits(['click'])
|
||
|
||
// 点击项，向外抛出数据
|
||
function handleItemClick(item: any[], index: number) {
|
||
emit('click', item, index)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="hazard-list-container">
|
||
<!-- 标题栏 -->
|
||
<el-row class="p-3">
|
||
<!-- <el-text tag="b"> -->
|
||
<el-text type="info" size="small">
|
||
{{ props.title }} (共 {{ props.data.length }} 条)
|
||
</el-text>
|
||
</el-row>
|
||
|
||
<!-- 滚动列表区域 -->
|
||
<el-row style="flex: 1; overflow-y: auto;">
|
||
<el-col>
|
||
<el-row v-for="(item, index) in props.data" :key="index">
|
||
<!-- 无物体类型标签 隐患等级体颜色显示在编号标签上 -->
|
||
<!-- 0为隐患等级 1为隐患描述 -->
|
||
<el-button class="message-btn" text @click="handleItemClick(item as any[], index)">
|
||
<div class="flex flex-col items-start">
|
||
<div class="flex flex-row gap-2">
|
||
<el-text class="item-text" type="info" size="small">
|
||
{{ (item as any[])[1] }}
|
||
</el-text>
|
||
<el-text class="item-text" type="info" size="small">
|
||
{{ (item as any[])[2] }}
|
||
</el-text>
|
||
</div>
|
||
<el-text class="item-text">
|
||
{{ (item as any[])[3] }}
|
||
</el-text>
|
||
</div>
|
||
</el-button>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.hazard-list-container {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 纵向布局 */
|
||
.message-btn {
|
||
width: 100%;
|
||
padding: 4px 0.75rem;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
height: auto;
|
||
min-height: 28px;
|
||
line-height: normal;
|
||
}
|
||
|
||
.item-text {
|
||
word-break: break-word;
|
||
white-space: normal;
|
||
text-align: left;
|
||
}
|
||
|
||
.message-title {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
}
|
||
|
||
.message-content {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.item-text.ep-text {
|
||
align-self: start;
|
||
line-height: 1.5; /* 消除行高留白 */
|
||
}
|
||
</style>
|