feat: 工单模块改为列表形式，点击回复进入详情页
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user