master #14
+8
-6
@@ -6,8 +6,14 @@ export const menus = [
|
||||
},
|
||||
{
|
||||
path: '/ticket',
|
||||
title: '工单处理',
|
||||
icon: 'DataBoard'
|
||||
title: '工单管理',
|
||||
icon: 'Tickets',
|
||||
children: [
|
||||
{
|
||||
path: '/ticket/list',
|
||||
title: '工单列表'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
@@ -18,10 +24,6 @@ export const menus = [
|
||||
path: '/user/list',
|
||||
title: '用户列表'
|
||||
},
|
||||
{
|
||||
path: '/user/balance',
|
||||
title: '用户余额管理'
|
||||
},
|
||||
{
|
||||
path: '/user/group',
|
||||
title: '用户组管理'
|
||||
|
||||
+21
-1
@@ -39,7 +39,27 @@ const routes = [
|
||||
title: '工单管理',
|
||||
icon: 'Tickets'
|
||||
},
|
||||
component: () => import('../views/ticket/TicketChat.vue'),
|
||||
redirect: '/ticket/list',
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'TicketList',
|
||||
component: () => import('../views/ticket/TicketList.vue'),
|
||||
meta: {
|
||||
title: '工单列表'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'detail',
|
||||
name: 'TicketDetail',
|
||||
component: () => import('../views/ticket/TicketDetail.vue'),
|
||||
meta: {
|
||||
title: '工单详情',
|
||||
hidden: true,
|
||||
activeMenu: '/ticket/list'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// ACS管理路由
|
||||
|
||||
@@ -0,0 +1,875 @@
|
||||
<template>
|
||||
<div class="ticket-detail-page">
|
||||
<!-- 头部信息 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button icon="ArrowLeft" @click="goBack">返回列表</el-button>
|
||||
<el-popover placement="bottom-start" :width="300" trigger="click" v-if="ticketInfo" @show="fetchUserDetail">
|
||||
<template #reference>
|
||||
<div class="user-info clickable">
|
||||
<el-avatar :size="36" :src="ticketInfo.avatar">{{ ticketInfo.username?.charAt(0) }}</el-avatar>
|
||||
<div class="user-detail">
|
||||
<div class="username">{{ ticketInfo.username }}</div>
|
||||
<div class="create-time">创建于 {{ ticketInfo.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="user-popover" v-loading="isLoadingUser">
|
||||
<div class="popover-header">
|
||||
<el-avatar :size="48" :src="userDetail?.Avatar || ticketInfo.avatar">{{ ticketInfo.username?.charAt(0) }}</el-avatar>
|
||||
<div class="popover-info">
|
||||
<div class="popover-name">{{ userDetail?.UserName || ticketInfo.username }}</div>
|
||||
<div class="popover-id">UID: {{ ticketInfo.userId }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider style="margin: 12px 0" />
|
||||
<div class="popover-items">
|
||||
<div class="popover-item">
|
||||
<span class="label">手机号</span>
|
||||
<span class="value">{{ userDetail?.Phone || '-' }}</span>
|
||||
</div>
|
||||
<div class="popover-item">
|
||||
<span class="label">邮箱</span>
|
||||
<span class="value">{{ userDetail?.Email || '-' }}</span>
|
||||
</div>
|
||||
<div class="popover-item">
|
||||
<span class="label">实名状态</span>
|
||||
<el-tag :type="userDetail?.RealName?.Status === 1 ? 'success' : 'info'" size="small">
|
||||
{{ userDetail?.RealName?.Status === 1 ? '已实名' : '未实名' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="popover-item">
|
||||
<span class="label">用户组</span>
|
||||
<span class="value">{{ userDetail?.UserGroup?.Name || '-' }}</span>
|
||||
</div>
|
||||
<!-- <div class="popover-item">
|
||||
<span class="label">管理员组</span>
|
||||
<span class="value">{{ userDetail?.AdminGroup?.name || '-' }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<el-button type="primary" size="small" style="width: 100%; margin-top: 12px" @click="goToUserDetail">
|
||||
查看完整资料
|
||||
</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="ticket-title" v-if="ticketInfo">{{ ticketInfo.title }}</div>
|
||||
</div>
|
||||
<div class="header-right" v-if="ticketInfo">
|
||||
<span class="ticket-id">工单号: {{ ticketInfo.id }}</span>
|
||||
<el-tag :type="getStatusType(ticketInfo.status)" size="small">
|
||||
{{ getStatusText(ticketInfo.status) }}
|
||||
</el-tag>
|
||||
<el-button
|
||||
v-if="ticketInfo.status !== 'completed'"
|
||||
type="success"
|
||||
size="small"
|
||||
@click="handleComplete"
|
||||
>
|
||||
结束工单
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天记录 -->
|
||||
<div class="chat-container" v-loading="isLoadingMessages">
|
||||
<div class="chat-messages" ref="messagesContainer">
|
||||
<div
|
||||
v-for="(message, index) in messages"
|
||||
:key="index"
|
||||
:class="['message-item', message.isAdmin ? 'message-admin' : 'message-user']"
|
||||
>
|
||||
<div class="message-avatar" v-if="!message.isAdmin">
|
||||
<el-avatar :size="36" :src="message.avatar">{{ ticketInfo?.username?.charAt(0) || 'U' }}</el-avatar>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-text" v-if="message.content">{{ message.content }}</div>
|
||||
<div class="message-images" v-if="message.images && message.images.length">
|
||||
<img
|
||||
v-for="(img, imgIndex) in message.images"
|
||||
:key="imgIndex"
|
||||
:src="img"
|
||||
class="message-image"
|
||||
@click="openImage(img)"
|
||||
/>
|
||||
</div>
|
||||
<div class="message-time">{{ formatMessageTime(message.time) }}</div>
|
||||
</div>
|
||||
<div class="message-avatar" v-if="message.isAdmin">
|
||||
<el-avatar :size="36" :src="message.avatar">A</el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 回复输入区域 -->
|
||||
<div class="reply-container" v-if="ticketInfo && ticketInfo.status !== 'completed'">
|
||||
<!-- 图片预览 -->
|
||||
<div class="upload-preview" v-if="selectedImages.length > 0">
|
||||
<div class="preview-item" v-for="(image, index) in selectedImages" :key="index">
|
||||
<img :src="image" alt="预览图片" />
|
||||
<div class="delete-preview" @click="removeImage(index)">×</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷回复 -->
|
||||
<div class="quick-replies">
|
||||
<el-button
|
||||
v-for="(reply, index) in quickReplies"
|
||||
:key="index"
|
||||
size="small"
|
||||
@click="useQuickReply(reply)"
|
||||
>
|
||||
{{ reply.title }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 输入框 -->
|
||||
<div class="input-area">
|
||||
<el-input
|
||||
v-model="messageInput"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入回复内容..."
|
||||
@keyup.ctrl.enter="sendMessage"
|
||||
/>
|
||||
<div class="input-actions">
|
||||
<div class="left-actions">
|
||||
<el-upload
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="handleFileChange"
|
||||
multiple
|
||||
accept="image/*"
|
||||
>
|
||||
<el-button type="primary" plain icon="Plus">图片</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<span class="hint-text">Ctrl + Enter 发送</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!messageInput.trim() && selectedImages.length === 0"
|
||||
:loading="isSending"
|
||||
@click="sendMessage"
|
||||
>
|
||||
发送
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已结束提示 -->
|
||||
<div class="closed-notice" v-else-if="ticketInfo && ticketInfo.status === 'completed'">
|
||||
<el-alert title="该工单已结束，无法继续回复" type="info" :closable="false" />
|
||||
</div>
|
||||
|
||||
<!-- 图片查看器 -->
|
||||
<el-dialog v-model="imageViewerVisible" width="auto" destroy-on-close>
|
||||
<img :src="currentViewImage" style="max-width: 100%; max-height: 80vh;" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTicketDetail, replyTicket, closeTicket } from '@/api/ticket'
|
||||
import { getUserInfo } from '@/api/admin/user'
|
||||
import { uploadFile } from '@/api/admin/file'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { useTagsViewStore } from '@/store/tagsViewStore'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
|
||||
// 工单信息
|
||||
const ticketInfo = ref(null)
|
||||
const messages = ref([])
|
||||
const isLoadingMessages = ref(false)
|
||||
const isSending = ref(false)
|
||||
|
||||
// 用户详情弹窗
|
||||
const userDetail = ref(null)
|
||||
const isLoadingUser = ref(false)
|
||||
|
||||
// 输入相关
|
||||
const messageInput = ref('')
|
||||
const selectedImages = ref([])
|
||||
const selectedFiles = ref([]) // 存储原始文件对象
|
||||
const messagesContainer = ref(null)
|
||||
|
||||
// 图片查看
|
||||
const imageViewerVisible = ref(false)
|
||||
const currentViewImage = ref('')
|
||||
|
||||
// 定时刷新
|
||||
const refreshTimer = ref(null)
|
||||
|
||||
// 快捷回复
|
||||
const quickReplies = [
|
||||
{ title: '您好，有什么可以帮助您的？', content: '您好，有什么可以帮助您的？' },
|
||||
{ title: '正在处理中', content: '您的问题正在处理中，请稍等片刻，我们会尽快给您答复。' },
|
||||
{ title: '需要更多信息', content: '为了更好地解决您的问题，请您提供更多相关信息。' },
|
||||
{ title: '问题已解决', content: '您的问题已解决，感谢您的反馈。如有其他问题，请随时联系我们。' }
|
||||
]
|
||||
|
||||
// 状态转换
|
||||
const convertStatusToString = (status) => {
|
||||
const statusMap = { 0: 'pending', 1: 'processing', 2: 'replied', 3: 'completed' }
|
||||
return statusMap[status] || 'processing'
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = { pending: '待处理', processing: '处理中', replied: '已回复', completed: '已完成' }
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
const getStatusType = (status) => {
|
||||
const typeMap = { pending: 'warning', processing: 'primary', replied: 'info', completed: 'success' }
|
||||
return typeMap[status] || ''
|
||||
}
|
||||
|
||||
// 判断是否是管理员
|
||||
const isAdmin = (userId) => {
|
||||
return userId === userStore.userInfo?.user_id
|
||||
}
|
||||
|
||||
// 比较两个消息列表是否相同
|
||||
const messagesEqual = (oldMessages, newMessages) => {
|
||||
if (oldMessages.length !== newMessages.length) return false
|
||||
|
||||
for (let i = 0; i < oldMessages.length; i++) {
|
||||
const oldMsg = oldMessages[i]
|
||||
const newMsg = newMessages[i]
|
||||
|
||||
// 比较关键字段
|
||||
if (oldMsg.id !== newMsg.id ||
|
||||
oldMsg.content !== newMsg.content ||
|
||||
oldMsg.images?.length !== newMsg.images?.length) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 比较图片URL
|
||||
if (oldMsg.images && newMsg.images) {
|
||||
for (let j = 0; j < oldMsg.images.length; j++) {
|
||||
if (oldMsg.images[j] !== newMsg.images[j]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// 获取工单详情
|
||||
const fetchTicketDetail = async (showLoading = true) => {
|
||||
const workId = route.query.id
|
||||
if (!workId) {
|
||||
// 没有ID时静默跳转到列表页
|
||||
router.replace('/ticket/list')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
if (showLoading) {
|
||||
isLoadingMessages.value = true
|
||||
}
|
||||
const res = await getTicketDetail(workId)
|
||||
|
||||
if (res.code === 200) {
|
||||
const detail = res.data
|
||||
ticketInfo.value = {
|
||||
id: detail.work_id,
|
||||
title: detail.name,
|
||||
username: detail.user?.userName || `用户${detail.user?.userId || 'Unknown'}`,
|
||||
userId: detail.user?.userId,
|
||||
avatar: detail.user?.coverUrl || '',
|
||||
createTime: new Date(detail.created_at).toLocaleString(),
|
||||
status: convertStatusToString(detail.status)
|
||||
}
|
||||
|
||||
// 处理消息列表并按ID排序
|
||||
if (detail.content && detail.content.length > 0) {
|
||||
const newMessages = detail.content
|
||||
.map((msg) => ({
|
||||
id: msg.id,
|
||||
content: msg.content !== 'empty' ? msg.content : null,
|
||||
images: msg.flies ? msg.flies.map(file => file.url) : [],
|
||||
time: msg.created_at || msg.updated_at || new Date().toLocaleString(),
|
||||
isAdmin: isAdmin(msg.user?.userId),
|
||||
userId: msg.user?.userId,
|
||||
avatar: msg.user?.coverUrl || ''
|
||||
}))
|
||||
.sort((a, b) => a.id - b.id) // 按ID从小到大排序
|
||||
|
||||
// 比较新旧消息列表，只有在有变化时才更新
|
||||
const hasChanges = !messagesEqual(messages.value, newMessages)
|
||||
|
||||
if (hasChanges) {
|
||||
const shouldScroll = showLoading || newMessages.length > messages.value.length
|
||||
messages.value = newMessages
|
||||
|
||||
if (shouldScroll) {
|
||||
nextTick(() => scrollToBottom())
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取工单详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取工单详情出错:', error)
|
||||
if (showLoading) {
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
}
|
||||
} finally {
|
||||
if (showLoading) {
|
||||
isLoadingMessages.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = async () => {
|
||||
if ((!messageInput.value.trim() && selectedImages.value.length === 0) || isSending.value) return
|
||||
|
||||
const workId = route.query.id
|
||||
const content = messageInput.value.trim() || 'empty'
|
||||
|
||||
try {
|
||||
isSending.value = true
|
||||
const inputMsg = messageInput.value.trim()
|
||||
const inputImages = [...selectedImages.value]
|
||||
const inputFiles = [...selectedFiles.value]
|
||||
|
||||
// 上传图片并获取文件ID
|
||||
let fileIds = []
|
||||
if (inputFiles.length > 0) {
|
||||
try {
|
||||
const formData = new FormData()
|
||||
|
||||
// 添加所有文件
|
||||
inputFiles.forEach((file) => {
|
||||
formData.append('files', file)
|
||||
formData.append('file_names', file.name)
|
||||
})
|
||||
|
||||
// 设置上传类型为工单
|
||||
formData.append('update_type', 'work_order')
|
||||
formData.append('open_down', 'true')
|
||||
|
||||
const uploadRes = await uploadFile(formData)
|
||||
|
||||
if (uploadRes.data?.code === 200) {
|
||||
// 从返回的数据中提取文件ID（字段名是 id）
|
||||
const data = uploadRes.data.data
|
||||
if (Array.isArray(data)) {
|
||||
fileIds = data.map(item => String(item.id))
|
||||
} else if (data.id) {
|
||||
fileIds = [String(data.id)]
|
||||
}
|
||||
|
||||
if (fileIds.length === 0) {
|
||||
ElMessage.error('未获取到文件ID')
|
||||
isSending.value = false
|
||||
return
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(uploadRes.data?.message || '图片上传失败')
|
||||
isSending.value = false
|
||||
return
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('图片上传失败:', error)
|
||||
ElMessage.error('图片上传失败，请重试')
|
||||
isSending.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
messageInput.value = ''
|
||||
selectedImages.value = []
|
||||
selectedFiles.value = []
|
||||
|
||||
// 临时消息
|
||||
const tempMsg = {
|
||||
id: Date.now(),
|
||||
content: inputMsg || null,
|
||||
images: inputImages,
|
||||
time: new Date().toLocaleString(),
|
||||
isAdmin: true,
|
||||
userId: userStore.userInfo?.user_id,
|
||||
avatar: userStore.userInfo?.cover_url || '',
|
||||
isTempMessage: true
|
||||
}
|
||||
messages.value.push(tempMsg)
|
||||
await nextTick()
|
||||
scrollToBottom()
|
||||
|
||||
const res = await replyTicket(workId, content, fileIds.join(','))
|
||||
|
||||
if (res.code === 200) {
|
||||
messages.value = messages.value.filter(msg => !msg.isTempMessage)
|
||||
await fetchTicketDetail()
|
||||
ElMessage.success('回复成功')
|
||||
} else {
|
||||
messages.value = messages.value.filter(msg => !msg.isTempMessage)
|
||||
messageInput.value = inputMsg
|
||||
selectedImages.value = inputImages
|
||||
selectedFiles.value = inputFiles
|
||||
ElMessage.error(res.message || '发送失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('发送消息出错:', error)
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
messages.value = messages.value.filter(msg => !msg.isTempMessage)
|
||||
} finally {
|
||||
isSending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 结束工单
|
||||
const handleComplete = () => {
|
||||
ElMessageBox.confirm('确定要结束此工单吗？结束后将无法继续回复。', '确认操作', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await closeTicket(route.query.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('工单已成功结束')
|
||||
ticketInfo.value.status = 'completed'
|
||||
} else {
|
||||
ElMessage.error(res.message || '结束工单失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 图片处理
|
||||
const handleFileChange = (file) => {
|
||||
if (!file) return
|
||||
|
||||
// 保存原始文件对象用于上传
|
||||
selectedFiles.value.push(file.raw)
|
||||
|
||||
// 读取文件用于预览
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => selectedImages.value.push(e.target.result)
|
||||
reader.readAsDataURL(file.raw)
|
||||
}
|
||||
|
||||
const removeImage = (index) => {
|
||||
selectedImages.value.splice(index, 1)
|
||||
selectedFiles.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const openImage = (img) => {
|
||||
currentViewImage.value = img
|
||||
imageViewerVisible.value = true
|
||||
}
|
||||
|
||||
// 快捷回复
|
||||
const useQuickReply = (reply) => {
|
||||
messageInput.value = reply.content
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = () => {
|
||||
if (messagesContainer.value) {
|
||||
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatMessageTime = (timeStr) => {
|
||||
if (!timeStr) return ''
|
||||
try {
|
||||
const date = new Date(timeStr)
|
||||
if (isNaN(date.getTime())) return ''
|
||||
|
||||
const now = new Date()
|
||||
const time = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
|
||||
// 判断是否是今天
|
||||
const isToday = date.getFullYear() === now.getFullYear() &&
|
||||
date.getMonth() === now.getMonth() &&
|
||||
date.getDate() === now.getDate()
|
||||
|
||||
if (isToday) {
|
||||
return time
|
||||
}
|
||||
|
||||
// 判断是否是昨天
|
||||
const yesterday = new Date(now)
|
||||
yesterday.setDate(yesterday.getDate() - 1)
|
||||
const isYesterday = date.getFullYear() === yesterday.getFullYear() &&
|
||||
date.getMonth() === yesterday.getMonth() &&
|
||||
date.getDate() === yesterday.getDate()
|
||||
|
||||
if (isYesterday) {
|
||||
return `昨天 ${time}`
|
||||
}
|
||||
|
||||
// 判断是否是本周（周一到周日）
|
||||
// 获取本周一的日期（0点）
|
||||
const currentDay = now.getDay() // 0-6，0是周日
|
||||
const mondayOffset = currentDay === 0 ? -6 : 1 - currentDay // 周日的话往前推6天，其他往前推到周一
|
||||
const monday = new Date(now)
|
||||
monday.setDate(now.getDate() + mondayOffset)
|
||||
monday.setHours(0, 0, 0, 0)
|
||||
|
||||
// 获取本周日的日期（23:59:59）
|
||||
const sunday = new Date(monday)
|
||||
sunday.setDate(monday.getDate() + 6)
|
||||
sunday.setHours(23, 59, 59, 999)
|
||||
|
||||
// 判断消息日期是否在本周范围内
|
||||
if (date >= monday && date <= sunday) {
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
return `${weekdays[date.getDay()]} ${time}`
|
||||
}
|
||||
|
||||
// 其他情况显示完整日期时间
|
||||
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} ${time}`
|
||||
} catch (e) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
// 返回列表
|
||||
const goBack = () => {
|
||||
// 关闭当前tab
|
||||
tagsViewStore.delVisitedView(route)
|
||||
router.push('/ticket/list')
|
||||
}
|
||||
|
||||
// 获取用户详情
|
||||
const fetchUserDetail = async () => {
|
||||
if (!ticketInfo.value?.userId) return
|
||||
try {
|
||||
isLoadingUser.value = true
|
||||
const res = await getUserInfo({ user_id: ticketInfo.value.userId })
|
||||
if (res.data?.code === 200) {
|
||||
userDetail.value = res.data.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户详情失败:', error)
|
||||
} finally {
|
||||
isLoadingUser.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转用户详情
|
||||
const goToUserDetail = () => {
|
||||
if (ticketInfo.value?.userId) {
|
||||
router.push({ path: '/user/detail', query: { user_id: ticketInfo.value.userId } })
|
||||
}
|
||||
}
|
||||
|
||||
// 定时刷新
|
||||
const startAutoRefresh = () => {
|
||||
refreshTimer.value = setInterval(() => {
|
||||
if (ticketInfo.value?.status !== 'completed') {
|
||||
fetchTicketDetail(false) // 定时刷新时不显示 loading
|
||||
}
|
||||
}, 10000)
|
||||
}
|
||||
|
||||
const stopAutoRefresh = () => {
|
||||
if (refreshTimer.value) {
|
||||
clearInterval(refreshTimer.value)
|
||||
refreshTimer.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 监听路由query变化，重新加载数据
|
||||
watch(
|
||||
() => route.query.id,
|
||||
(newId) => {
|
||||
if (newId) {
|
||||
fetchTicketDetail()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
fetchTicketDetail()
|
||||
startAutoRefresh()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopAutoRefresh()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ticket-detail-page {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 100px);
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ticket-id {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-info.clickable {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.user-info.clickable:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.user-popover .popover-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-popover .popover-info .popover-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.user-popover .popover-info .popover-id {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.user-popover .popover-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-popover .popover-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.user-popover .popover-item .label {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.user-popover .popover-item .value.highlight {
|
||||
color: #e6a23c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-detail .username {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-detail .create-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.ticket-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background: #f5f7fa;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-user {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.message-admin {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
word-break: break-word;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-admin .message-text {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.message-image {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.message-admin .message-time {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reply-container {
|
||||
background: #fff;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.upload-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.preview-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.delete-preview {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #f56c6c;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quick-replies {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.closed-notice {
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="ticket-list-page">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="status-tabs">
|
||||
<div class="tab-item" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
|
||||
全部 <span class="count">{{ stats.total }}</span>
|
||||
</div>
|
||||
<div class="tab-item pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
|
||||
待处理 <span class="count">{{ stats.pending }}</span>
|
||||
</div>
|
||||
<div class="tab-item processing" :class="{ active: activeStatus === 'processing' }" @click="filterByStatus('processing')">
|
||||
处理中 <span class="count">{{ stats.processing }}</span>
|
||||
</div>
|
||||
<div class="tab-item replied" :class="{ active: activeStatus === 'replied' }" @click="filterByStatus('replied')">
|
||||
已回复 <span class="count">{{ stats.replied }}</span>
|
||||
</div>
|
||||
<div class="tab-item completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
|
||||
已完成 <span class="count">{{ stats.completed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索工单号、标题、用户名"
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<el-button icon="Refresh" @click="refreshList">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工单表格 -->
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="filteredTickets"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="id" label="工单号" width="100" />
|
||||
<el-table-column label="用户" width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="user-info">
|
||||
<el-avatar :size="32" :src="row.avatar">{{ row.username?.charAt(0) }}</el-avatar>
|
||||
<span class="username">{{ row.username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="工单标题" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)" size="small">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column prop="lastReplyTime" label="最后回复" width="180" />
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" @click.stop="goToDetail(row)">
|
||||
回复
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status !== 'completed'"
|
||||
type="success"
|
||||
size="small"
|
||||
@click.stop="handleComplete(row)"
|
||||
>
|
||||
结束
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="totalCount"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
getTickerList,
|
||||
closeTicket,
|
||||
getTicketCount
|
||||
} from '@/api/ticket'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 分页
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const totalCount = ref(0)
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 工单数据
|
||||
const ticketList = ref([])
|
||||
const searchKeyword = ref('')
|
||||
const activeStatus = ref('')
|
||||
|
||||
// 统计数据
|
||||
const stats = reactive({
|
||||
pending: 0,
|
||||
processing: 0,
|
||||
replied: 0,
|
||||
completed: 0,
|
||||
total: 0
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 状态转换
|
||||
const convertStatusToString = (status) => {
|
||||
const statusMap = { 0: 'pending', 1: 'processing', 2: 'replied', 3: 'completed' }
|
||||
return statusMap[status] || 'processing'
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = { pending: '待处理', processing: '处理中', replied: '已回复', completed: '已完成' }
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
const getStatusType = (status) => {
|
||||
const typeMap = { pending: 'warning', processing: 'primary', replied: 'info', completed: 'success' }
|
||||
return typeMap[status] || ''
|
||||
}
|
||||
|
||||
// 获取工单列表
|
||||
const fetchTicketList = async () => {
|
||||
try {
|
||||
isLoading.value = true
|
||||
let statusParam = ''
|
||||
if (activeStatus.value) {
|
||||
const statusMap = { pending: '0', processing: '1', replied: '2', completed: '3' }
|
||||
statusParam = statusMap[activeStatus.value] || ''
|
||||
}
|
||||
|
||||
const res = await getTickerList(pageSize.value, currentPage.value, statusParam)
|
||||
|
||||
if (res.code === 200) {
|
||||
ticketList.value = (res.data.data || []).map(item => ({
|
||||
id: item.work_id,
|
||||
title: item.name,
|
||||
username: item.user?.userName || `用户${item.user?.userId || 'Unknown'}`,
|
||||
userId: item.user?.userId,
|
||||
avatar: item.user?.coverUrl || '',
|
||||
createTime: new Date(item.created_at).toLocaleString(),
|
||||
lastReplyTime: new Date(item.update_time).toLocaleString(),
|
||||
status: convertStatusToString(item.status)
|
||||
}))
|
||||
totalCount.value = res.data.all_count || 0
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取工单列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取工单列表出错:', error)
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取统计数据
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const res = await getTicketCount()
|
||||
if (res.code === 200) {
|
||||
const data = res.data
|
||||
stats.total = data.all_count
|
||||
stats.pending = data.wait_count
|
||||
stats.replied = data.reply_count
|
||||
stats.completed = data.close_count
|
||||
stats.processing = data.all_count - data.wait_count - data.reply_count - data.close_count
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取统计数据出错:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤后的工单列表
|
||||
const filteredTickets = computed(() => {
|
||||
if (!searchKeyword.value) return ticketList.value
|
||||
const keyword = searchKeyword.value.toLowerCase()
|
||||
return ticketList.value.filter(ticket =>
|
||||
ticket.title.toLowerCase().includes(keyword) ||
|
||||
ticket.username.toLowerCase().includes(keyword) ||
|
||||
String(ticket.id).includes(keyword)
|
||||
)
|
||||
})
|
||||
|
||||
// 按状态过滤
|
||||
const filterByStatus = (status) => {
|
||||
if (activeStatus.value === status) return
|
||||
activeStatus.value = status
|
||||
currentPage.value = 1
|
||||
fetchTicketList()
|
||||
}
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {}
|
||||
|
||||
// 分页处理
|
||||
const handleSizeChange = () => {
|
||||
currentPage.value = 1
|
||||
fetchTicketList()
|
||||
}
|
||||
|
||||
const handlePageChange = () => {
|
||||
fetchTicketList()
|
||||
}
|
||||
|
||||
// 刷新列表
|
||||
const refreshList = () => {
|
||||
fetchTicketList()
|
||||
fetchStats()
|
||||
}
|
||||
|
||||
// 跳转到详情页
|
||||
const goToDetail = (row) => {
|
||||
router.push({ path: '/ticket/detail', query: { id: row.id } })
|
||||
}
|
||||
|
||||
const handleRowClick = (row) => {
|
||||
goToDetail(row)
|
||||
}
|
||||
|
||||
// 结束工单
|
||||
const handleComplete = (ticket) => {
|
||||
ElMessageBox.confirm('确定要结束此工单吗？结束后将无法继续回复。', '确认操作', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await closeTicket(ticket.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('工单已成功结束')
|
||||
refreshList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '结束工单失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTicketList()
|
||||
fetchStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ticket-list-page {
|
||||
padding: 0;
|
||||
height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab-item.pending.active { background: #e6a23c; }
|
||||
.tab-item.processing.active { background: #409eff; }
|
||||
.tab-item.replied.active { background: #909399; }
|
||||
.tab-item.completed.active { background: #67c23a; }
|
||||
|
||||
.tab-item .count {
|
||||
margin-left: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.username {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
+396
-1201
File diff suppressed because it is too large
Load Diff
@@ -393,6 +393,10 @@ const Edit = EditIcon
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 引入tagsViewStore
|
||||
import { useTagsViewStore } from '@/store/tagsViewStore'
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({})
|
||||
const loading = ref(false)
|
||||
@@ -546,6 +550,8 @@ const refreshData = () => {
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
// 关闭当前tab
|
||||
tagsViewStore.delVisitedView(route)
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
|
||||
+28
-24
@@ -129,6 +129,7 @@
|
||||
<el-dropdown-item command="password">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item command="group">修改用户组</el-dropdown-item>
|
||||
<el-dropdown-item command="realname">实名信息</el-dropdown-item>
|
||||
<el-dropdown-item command="balance">余额管理</el-dropdown-item>
|
||||
<el-dropdown-item command="loginHistory">登录记录</el-dropdown-item>
|
||||
<el-dropdown-item command="operationHistory">操作记录</el-dropdown-item>
|
||||
<el-dropdown-item command="simulateLogin">模拟登录</el-dropdown-item>
|
||||
@@ -512,12 +513,24 @@ const fetchUserList = async () => {
|
||||
const res = await getUserList(queryParams)
|
||||
console.log("获取用户列表：", res)
|
||||
if (res.data.code === 200) {
|
||||
userList.value = res.data.data.data || []
|
||||
// 映射 API 返回的字段到组件使用的字段格式
|
||||
userList.value = (res.data.data.data || []).map(user => ({
|
||||
UserId: user.user_id,
|
||||
UserName: user.user_name,
|
||||
Phone: user.phone,
|
||||
Email: user.email,
|
||||
Sex: user.sex,
|
||||
Age: user.age,
|
||||
IsAdmin: user.is_admin,
|
||||
CoverID: user.cover_id,
|
||||
avatarUrl: user.cover || '', // 直接使用 cover 字段作为头像 URL
|
||||
UserGroup: user.user_group,
|
||||
RealName: user.real_name,
|
||||
IsDeleted: user.is_deleted,
|
||||
CreatedAt: user.created_at
|
||||
}))
|
||||
console.log("用户列表：", userList.value)
|
||||
total.value = res.data.data.all_count || 0
|
||||
|
||||
// 为每个用户加载头像URL
|
||||
await loadAvatarsForUsers()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取用户列表失败')
|
||||
@@ -526,26 +539,6 @@ const fetchUserList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 为用户列表加载头像URL
|
||||
const loadAvatarsForUsers = async () => {
|
||||
const promises = userList.value.map(async (user) => {
|
||||
if (user.CoverID) {
|
||||
try {
|
||||
const res = await getFileDetail({ file_id: user.CoverID })
|
||||
if (res.data.code === 200) {
|
||||
user.avatarUrl = res.data.data.url
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载头像失败:', error)
|
||||
user.avatarUrl = ''
|
||||
}
|
||||
} else {
|
||||
user.avatarUrl = ''
|
||||
}
|
||||
})
|
||||
await Promise.all(promises)
|
||||
}
|
||||
|
||||
// 查询用户列表
|
||||
const handleQuery = () => {
|
||||
queryParams.page = 1
|
||||
@@ -676,6 +669,9 @@ const handleCommand = (command, row) => {
|
||||
case 'realname':
|
||||
handleRealnameModify(row)
|
||||
break
|
||||
case 'balance':
|
||||
handleBalanceManage(row)
|
||||
break
|
||||
case 'loginHistory':
|
||||
handleLoginHistory(row)
|
||||
break
|
||||
@@ -691,6 +687,14 @@ const handleCommand = (command, row) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 余额管理
|
||||
const handleBalanceManage = (row) => {
|
||||
router.push({
|
||||
path: '/user/balance',
|
||||
query: { user_id: row.UserId }
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 模拟登录
|
||||
const handleSimulateLogin = async (row) => {
|
||||
|
||||
Reference in New Issue
Block a user