283 lines
7.5 KiB
Vue
283 lines
7.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="message-management">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h2>留言管理</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-table :data="messages" style="width: 100%">
|
|||
|
|
<el-table-column prop="name" label="姓名" width="120" />
|
|||
|
|
<el-table-column prop="email" label="邮箱" width="200" />
|
|||
|
|
<el-table-column prop="content" label="内容">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<div class="message-preview">
|
|||
|
|
{{ getPreviewContent(scope.row.content) }}
|
|||
|
|
<el-button
|
|||
|
|
v-if="scope.row.content.length > 50"
|
|||
|
|
type="text"
|
|||
|
|
@click="showMessageDetail(scope.row)"
|
|||
|
|
>
|
|||
|
|
查看更多
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="status" label="状态" width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-tag :type="scope.row.status === 'unread' ? 'warning' : 'success'">
|
|||
|
|
{{ scope.row.status === 'unread' ? '未读' : '已读' }}
|
|||
|
|
</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="created_at" label="留言时间" width="180">
|
|||
|
|
<template #default="scope">
|
|||
|
|
{{ formatDate(scope.row.created_at) }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column v-if="isAdmin" prop="read_info" label="阅读信息" width="200">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<div v-if="scope.row.read_by">
|
|||
|
|
<div>阅读者: {{ scope.row.reader_name }}</div>
|
|||
|
|
<div>阅读时间: {{ formatDate(scope.row.read_at) }}</div>
|
|||
|
|
</div>
|
|||
|
|
<span v-else>-</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="160" align="center">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<div class="action-buttons">
|
|||
|
|
<el-button
|
|||
|
|
v-if="scope.row.status === 'unread'"
|
|||
|
|
size="small"
|
|||
|
|
type="primary"
|
|||
|
|
@click="showMessageDetail(scope.row)"
|
|||
|
|
>
|
|||
|
|
阅读
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
type="danger"
|
|||
|
|
@click="deleteMessage(scope.row.id)"
|
|||
|
|
>
|
|||
|
|
删除
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<!-- 留言详情对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="dialogVisible"
|
|||
|
|
title="留言详情"
|
|||
|
|
width="600px"
|
|||
|
|
:before-close="handleDialogClose"
|
|||
|
|
>
|
|||
|
|
<div v-if="selectedMessage" class="message-detail">
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<label>姓名：</label>
|
|||
|
|
<span>{{ selectedMessage.name }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<label>邮箱：</label>
|
|||
|
|
<span>{{ selectedMessage.email }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<label>留言时间：</label>
|
|||
|
|
<span>{{ formatDate(selectedMessage.created_at) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="detail-item">
|
|||
|
|
<label>内容：</label>
|
|||
|
|
<div class="message-content">{{ selectedMessage.content }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="isAdmin && selectedMessage.read_by" class="detail-item">
|
|||
|
|
<label>阅读信息：</label>
|
|||
|
|
<div>
|
|||
|
|
<p>阅读者: {{ selectedMessage.reader_name }}</p>
|
|||
|
|
<p>阅读时间: {{ formatDate(selectedMessage.read_at) }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { ref, onMounted, computed, onUnmounted } from 'vue'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
import axios from 'axios'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'MessageManagement',
|
|||
|
|
setup() {
|
|||
|
|
const router = useRouter()
|
|||
|
|
const messages = ref([])
|
|||
|
|
const dialogVisible = ref(false)
|
|||
|
|
const selectedMessage = ref(null)
|
|||
|
|
const currentUserRole = localStorage.getItem('admin_role')
|
|||
|
|
const ws = ref(null)
|
|||
|
|
const unreadCount = ref(0)
|
|||
|
|
|
|||
|
|
const isAdmin = computed(() => {
|
|||
|
|
return ['superadmin', 'admin'].includes(currentUserRole)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const connectWebSocket = () => {
|
|||
|
|
const token = localStorage.getItem('admin_token')
|
|||
|
|
if (!token) return
|
|||
|
|
|
|||
|
|
const wsUrl = `ws://localhost:3000?token=${token}`
|
|||
|
|
ws.value = new WebSocket(wsUrl)
|
|||
|
|
|
|||
|
|
ws.value.onmessage = (event) => {
|
|||
|
|
const data = JSON.parse(event.data)
|
|||
|
|
if (data.type === 'new_message') {
|
|||
|
|
// 将新消息添加到列表开头
|
|||
|
|
messages.value.unshift(data.data)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ws.value.onclose = () => {
|
|||
|
|
setTimeout(connectWebSocket, 5000) // 断线重连
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const fetchMessages = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await axios.get('/api/messages')
|
|||
|
|
messages.value = response.data
|
|||
|
|
unreadCount.value = messages.value.filter(m => m.status === 'unread').length
|
|||
|
|
window.dispatchEvent(new CustomEvent('unread-messages-update', {
|
|||
|
|
detail: unreadCount.value
|
|||
|
|
}))
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('获取留言列表失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getPreviewContent = (content) => {
|
|||
|
|
return content.length > 50 ? content.slice(0, 50) + '...' : content
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showMessageDetail = async (message) => {
|
|||
|
|
selectedMessage.value = message
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
|
|||
|
|
// 如果是未读消息，标记为已读
|
|||
|
|
if (message.status === 'unread') {
|
|||
|
|
try {
|
|||
|
|
await axios.put(`/api/messages/${message.id}/read`)
|
|||
|
|
message.status = 'read'
|
|||
|
|
unreadCount.value--
|
|||
|
|
window.dispatchEvent(new CustomEvent('unread-messages-update', {
|
|||
|
|
detail: unreadCount.value
|
|||
|
|
}))
|
|||
|
|
// 重新获取消息列表以更新阅读信息
|
|||
|
|
fetchMessages()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error marking message as read:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const deleteMessage = async (id) => {
|
|||
|
|
try {
|
|||
|
|
await ElMessageBox.confirm(
|
|||
|
|
'确定要删除这条留言吗？此操作不可恢复',
|
|||
|
|
'警告',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
await axios.delete(`/api/messages/${id}`)
|
|||
|
|
ElMessage.success('留言删除成功')
|
|||
|
|
messages.value = messages.value.filter(msg => msg.id !== id)
|
|||
|
|
} catch (error) {
|
|||
|
|
if (error !== 'cancel') {
|
|||
|
|
ElMessage.error('删除失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatDate = (date) => {
|
|||
|
|
return new Date(date).toLocaleString()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDialogClose = (done) => {
|
|||
|
|
selectedMessage.value = null
|
|||
|
|
done()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
fetchMessages()
|
|||
|
|
connectWebSocket()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
if (ws.value) {
|
|||
|
|
ws.value.close()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
messages,
|
|||
|
|
dialogVisible,
|
|||
|
|
selectedMessage,
|
|||
|
|
isAdmin,
|
|||
|
|
getPreviewContent,
|
|||
|
|
showMessageDetail,
|
|||
|
|
deleteMessage,
|
|||
|
|
formatDate,
|
|||
|
|
handleDialogClose
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.message-management {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-header {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-preview {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-detail {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-item {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-item label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-content {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
</style>
|