feat: 工单模块改为列表形式，点击回复进入详情页
This commit is contained in:
+8
-2
@@ -6,8 +6,14 @@ export const menus = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/ticket',
|
path: '/ticket',
|
||||||
title: '工单处理',
|
title: '工单管理',
|
||||||
icon: 'DataBoard'
|
icon: 'Tickets',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/ticket/list',
|
||||||
|
title: '工单列表'
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/user',
|
path: '/user',
|
||||||
|
|||||||
+21
-1
@@ -39,7 +39,27 @@ const routes = [
|
|||||||
title: '工单管理',
|
title: '工单管理',
|
||||||
icon: 'Tickets'
|
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管理路由
|
// ACS管理路由
|
||||||
|
|||||||
@@ -0,0 +1,592 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ticket-detail-page">
|
||||||
|
<!-- 返回按钮和工单信息 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<el-button icon="ArrowLeft" @click="goBack">返回列表</el-button>
|
||||||
|
<div class="ticket-info" 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="ticket-title-bar" v-if="ticketInfo">
|
||||||
|
<div class="user-info">
|
||||||
|
<el-avatar :size="40" :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>
|
||||||
|
<div class="ticket-title">{{ ticketInfo.title }}</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 } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { getTicketDetail, replyTicket, closeTicket } from '@/api/ticket'
|
||||||
|
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 messageInput = ref('')
|
||||||
|
const selectedImages = 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 fetchTicketDetail = async () => {
|
||||||
|
const workId = route.query.id
|
||||||
|
if (!workId) {
|
||||||
|
ElMessage.error('工单ID不存在')
|
||||||
|
router.push('/ticket')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理消息列表
|
||||||
|
if (detail.content && detail.content.length > 0) {
|
||||||
|
messages.value = 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 || ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
nextTick(() => scrollToBottom())
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '获取工单详情失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取工单详情出错:', error)
|
||||||
|
ElMessage.error('网络错误，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
isLoadingMessages.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 发送消息
|
||||||
|
const sendMessage = async () => {
|
||||||
|
if ((!messageInput.value.trim() && selectedImages.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]
|
||||||
|
|
||||||
|
messageInput.value = ''
|
||||||
|
selectedImages.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, '')
|
||||||
|
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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)
|
||||||
|
|
||||||
|
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 ''
|
||||||
|
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||||
|
} catch (e) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回列表
|
||||||
|
const goBack = () => {
|
||||||
|
// 关闭当前tab
|
||||||
|
tagsViewStore.delVisitedView(route)
|
||||||
|
router.push('/ticket/list')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定时刷新
|
||||||
|
const startAutoRefresh = () => {
|
||||||
|
refreshTimer.value = setInterval(() => {
|
||||||
|
if (ticketInfo.value?.status !== 'completed') {
|
||||||
|
fetchTicketDetail()
|
||||||
|
}
|
||||||
|
}, 10000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopAutoRefresh = () => {
|
||||||
|
if (refreshTimer.value) {
|
||||||
|
clearInterval(refreshTimer.value)
|
||||||
|
refreshTimer.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchTicketDetail()
|
||||||
|
startAutoRefresh()
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
stopAutoRefresh()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ticket-detail-page {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 120px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-id {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-title-bar {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-detail .username {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-detail .create-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
flex: 1;
|
||||||
|
background: #f5f7fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
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;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,388 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ticket-list-page">
|
||||||
|
<!-- 统计卡片 -->
|
||||||
|
<div class="stats-cards">
|
||||||
|
<div class="stat-card" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
|
||||||
|
<div class="stat-number">{{ stats.total }}</div>
|
||||||
|
<div class="stat-label">全部工单</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
|
||||||
|
<div class="stat-number">{{ stats.pending }}</div>
|
||||||
|
<div class="stat-label">待处理</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card processing" :class="{ active: activeStatus === 'processing' }" @click="filterByStatus('processing')">
|
||||||
|
<div class="stat-number">{{ stats.processing }}</div>
|
||||||
|
<div class="stat-label">处理中</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card replied" :class="{ active: activeStatus === 'replied' }" @click="filterByStatus('replied')">
|
||||||
|
<div class="stat-number">{{ stats.replied }}</div>
|
||||||
|
<div class="stat-label">已回复</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
|
||||||
|
<div class="stat-number">{{ stats.completed }}</div>
|
||||||
|
<div class="stat-label">已完成</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索和筛选 -->
|
||||||
|
<div class="filter-bar">
|
||||||
|
<el-input
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="搜索工单号、标题、用户名"
|
||||||
|
prefix-icon="Search"
|
||||||
|
clearable
|
||||||
|
style="width: 300px"
|
||||||
|
@input="handleSearch"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" icon="Refresh" @click="refreshList">刷新</el-button>
|
||||||
|
</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, onBeforeUnmount } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import {
|
||||||
|
getTickerList,
|
||||||
|
closeTicket,
|
||||||
|
getTicketCount
|
||||||
|
} from '@/api/ticket'
|
||||||
|
import notificationSound from '@/assets/7.wav'
|
||||||
|
|
||||||
|
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 refreshTimer = ref(null)
|
||||||
|
const refreshInterval = 10000
|
||||||
|
const previousPendingCount = ref(0)
|
||||||
|
const audio = new Audio(notificationSound)
|
||||||
|
|
||||||
|
// 状态转换
|
||||||
|
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
|
||||||
|
if (data.wait_count > previousPendingCount.value && previousPendingCount.value !== 0) {
|
||||||
|
audio.play().catch(e => console.error('播放提示音失败:', e))
|
||||||
|
}
|
||||||
|
previousPendingCount.value = data.wait_count
|
||||||
|
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(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定时刷新
|
||||||
|
const startAutoRefresh = () => {
|
||||||
|
refreshTimer.value = setInterval(() => {
|
||||||
|
fetchStats()
|
||||||
|
}, refreshInterval)
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopAutoRefresh = () => {
|
||||||
|
if (refreshTimer.value) {
|
||||||
|
clearInterval(refreshTimer.value)
|
||||||
|
refreshTimer.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchTicketList()
|
||||||
|
fetchStats()
|
||||||
|
startAutoRefresh()
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
stopAutoRefresh()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ticket-list-page {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-cards {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card.active {
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card.pending .stat-number { color: #e6a23c; }
|
||||||
|
.stat-card.processing .stat-number { color: #409eff; }
|
||||||
|
.stat-card.replied .stat-number { color: #909399; }
|
||||||
|
.stat-card.completed .stat-number { color: #67c23a; }
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #909399;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 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;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table) {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table tr) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user