You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
4.5 KiB

4 months ago
<template>
<div class="container">
4 months ago
<el-table :data="tableData" style="width: 100%" :show-header="false" @row-click="handleRowClick">
3 months ago
<el-table-column>
<template slot-scope="scope" width="80">
4 months ago
<img :src="getIcon(scope.$index)" alt="icon" style="width: 2.19rem; height: 1.25rem;">
</template>
</el-table-column>
<el-table-column prop="name" width="300" show-overflow-tooltip>
4 months ago
<template slot-scope="scope">
<span :style="{ color: scope.row.isRead === 2 ? '#ccc' : 'inherit' }">
{{ scope.row.name }}
</span>
</template>
4 months ago
</el-table-column>
3 months ago
<el-table-column prop="alertTime">
<template slot-scope="scope">
3 months ago
<span :style="{ color: scope.row.isRead === 2 ? '#ccc' : 'inherit' }">
3 months ago
{{ formatDate(scope.row.alertTime) }}
3 months ago
</span>
</template>
4 months ago
</el-table-column>
</el-table>
4 months ago
4 months ago
<!-- 详情弹窗 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
<div>
<p><strong>内容:</strong> {{ selectedMessage.name }}</p>
3 months ago
<p><strong>时间:</strong> {{ selectedMessage.alertTime}}</p>
4 months ago
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleConfirm"></el-button>
<el-button @click="dialogVisible = false">关闭</el-button>
</span>
</el-dialog>
4 months ago
</div>
</template>
4 months ago
<script>
import { getAllMessagestwo } from '@/api/ManageApi/index';
4 months ago
import { markSmartReminderAsRead } from '@/api/ManageApi/index';
4 months ago
export default {
name: 'MessageTable',
data() {
return {
4 months ago
tableData: [],
dialogVisible: false,
selectedMessage: {
id: '',
name: '',
3 months ago
alertTime: ''
4 months ago
},
dialogTitle: '消息详情'
4 months ago
};
},
mounted() {
this.getData();
},
methods: {
async getData() {
const response = await getAllMessagestwo();
if (response && response.code === 200 && response.data) {
this.tableData = this.processData(response.data);
4 months ago
this.tableData.reverse(); // 直接倒序排序
4 months ago
}
},
processData(data) {
return data.map(item => ({
4 months ago
id: item.id,
4 months ago
name: item.content,
3 months ago
alertTime: item.alertTime,
4 months ago
isRead: item.isRead // 确保包含 isRead 字段
4 months ago
}));
},
getIcon(index) {
return index === 0 ? require('@/assets/images/new@2x.png') : require('@/assets/images/other.png');
},
formatDate(dateString) {
4 months ago
if (!dateString) {
return '';
}
4 months ago
const date = new Date(dateString);
4 months ago
if (isNaN(date.getTime())) {
4 months ago
return '';
4 months ago
}
4 months ago
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
4 months ago
},
handleRowClick(row) {
this.selectedMessage = row;
this.dialogVisible = true;
},
handleConfirm() {
if (this.selectedMessage.id) {
markSmartReminderAsRead(this.selectedMessage.id)
.then(response => {
if (response && response.code === 200) {
this.$message.success('消息已标记为已读');
this.dialogVisible = false;
this.getData(); // 刷新数据
} else {
this.$message.error('标记为已读失败');
}
})
.catch(error => {
console.error('标记为已读失败:', error);
this.$message.error('标记为已读失败');
});
} else {
this.$message.error('消息 ID 不存在');
this.dialogVisible = false;
}
4 months ago
}
}
};
</script>
<style scoped>
.container {
3 months ago
width: 98%;
height: 11.5rem;
/* background-color: lightblue; */
4 months ago
}
3 months ago
.no-data {
color: gray;
}
4 months ago
</style>