Gyyq-Upstairs/src/views/components/analysis/messagecompany.vue

<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%" :show-header="false" @row-click="handleRowClick">
            <el-table-column width="80">
                <template slot-scope="scope">
                    <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">
                <template slot-scope="scope">
                    <span :style="{ color: scope.row.isRead === 2 ? '#ccc' : 'inherit' }">
                        {{ scope.row.name }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="date" width="100">
            </el-table-column>
        </el-table>
        
        <!-- 详情弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
            <div>
                <p><strong>时间:</strong> {{ selectedMessage.date || '暂无' }}</p>
                <p><strong>内容:</strong> {{ selectedMessage.name }}</p>
            </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>
    </div>
</template>
<script>
import { getAllMessagestwo } from '@/api/ManageApi/index';
import { markSmartReminderAsRead } from '@/api/ManageApi/index';

export default {
    name: 'MessageTable',
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            selectedMessage: {
                id: '',
                name: '',
                date: ''
            },
            dialogTitle: '消息详情'
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const response = await getAllMessagestwo();
            if (response && response.code === 200 && response.data) {
                this.tableData = this.processData(response.data);
                this.sortTableData(); // 添加排序方法
            }
        },
        processData(data) {
            return data.map(item => ({
                id: item.id,
                name: item.content,
                date: this.formatDate(item.createTime),
                isRead: item.isRead // 确保包含 isRead 字段
            }));
        },
        sortTableData() {
            this.tableData.sort((a, b) => {
                if (a.isRead === 2 && b.isRead !== 2) {
                    return 1;
                } else if (a.isRead !== 2 && b.isRead === 2) {
                    return -1;
                } else {
                    return 0;
                }
            });
        },
        getIcon(index) {
            return index === 0 ? require('@/assets/images/new@2x.png') : require('@/assets/images/other.png');
        },
        formatDate(dateString) {
            if (!dateString) {
                return '';
            }
            const date = new Date(dateString);
            if (isNaN(date.getTime())) {
                return '';
            }
            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}`;
        },
        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;
            }
        }
    }
};
</script>

<style scoped>
.container {
    width: 30rem;
    height: 14.5rem;
}
</style>