feat: 优化工单和用户管理功能
- 工单模块改为列表形式,支持点击进入详情页回复 - 新增工单列表页面(TicketList.vue)和详情页面(TicketDetail.vue) - 工单详情页支持图片上传、快捷回复、定时刷新 - 消息按ID排序,时间显示优化(今天/昨天/星期/完整日期) - 定时刷新时不显示loading,且只在数据变化时更新UI - 用户列表直接使用API返回的cover字段作为头像,减少HTTP请求 - 修复用户余额页面balance_type参数undefined问题
This commit is contained in:
@@ -176,6 +176,7 @@ 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'
|
||||
|
||||
@@ -197,6 +198,7 @@ const isLoadingUser = ref(false)
|
||||
// 输入相关
|
||||
const messageInput = ref('')
|
||||
const selectedImages = ref([])
|
||||
const selectedFiles = ref([]) // 存储原始文件对象
|
||||
const messagesContainer = ref(null)
|
||||
|
||||
// 图片查看
|
||||
@@ -235,8 +237,36 @@ 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 () => {
|
||||
const fetchTicketDetail = async (showLoading = true) => {
|
||||
const workId = route.query.id
|
||||
if (!workId) {
|
||||
// 没有ID时静默跳转到列表页
|
||||
@@ -245,7 +275,9 @@ const fetchTicketDetail = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
isLoadingMessages.value = true
|
||||
if (showLoading) {
|
||||
isLoadingMessages.value = true
|
||||
}
|
||||
const res = await getTicketDetail(workId)
|
||||
|
||||
if (res.code === 200) {
|
||||
@@ -260,34 +292,50 @@ const fetchTicketDetail = async () => {
|
||||
status: convertStatusToString(detail.status)
|
||||
}
|
||||
|
||||
// 处理消息列表
|
||||
// 处理消息列表并按ID排序
|
||||
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 || ''
|
||||
}))
|
||||
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())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nextTick(() => scrollToBottom())
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取工单详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取工单详情出错:', error)
|
||||
ElMessage.error('网络错误,请稍后重试')
|
||||
if (showLoading) {
|
||||
ElMessage.error('网络错误,请稍后重试')
|
||||
}
|
||||
} finally {
|
||||
isLoadingMessages.value = false
|
||||
if (showLoading) {
|
||||
isLoadingMessages.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = async () => {
|
||||
if ((!messageInput.value.trim() && selectedImages.length === 0) || isSending.value) return
|
||||
if ((!messageInput.value.trim() && selectedImages.value.length === 0) || isSending.value) return
|
||||
|
||||
const workId = route.query.id
|
||||
const content = messageInput.value.trim() || 'empty'
|
||||
@@ -296,9 +344,56 @@ const sendMessage = async () => {
|
||||
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 = {
|
||||
@@ -315,7 +410,7 @@ const sendMessage = async () => {
|
||||
await nextTick()
|
||||
scrollToBottom()
|
||||
|
||||
const res = await replyTicket(workId, content, '')
|
||||
const res = await replyTicket(workId, content, fileIds.join(','))
|
||||
|
||||
if (res.code === 200) {
|
||||
messages.value = messages.value.filter(msg => !msg.isTempMessage)
|
||||
@@ -325,6 +420,7 @@ const sendMessage = async () => {
|
||||
messages.value = messages.value.filter(msg => !msg.isTempMessage)
|
||||
messageInput.value = inputMsg
|
||||
selectedImages.value = inputImages
|
||||
selectedFiles.value = inputFiles
|
||||
ElMessage.error(res.message || '发送失败')
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -360,12 +456,20 @@ const handleComplete = () => {
|
||||
// 图片处理
|
||||
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)
|
||||
const removeImage = (index) => {
|
||||
selectedImages.value.splice(index, 1)
|
||||
selectedFiles.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const openImage = (img) => {
|
||||
currentViewImage.value = img
|
||||
@@ -390,7 +494,54 @@ const formatMessageTime = (timeStr) => {
|
||||
try {
|
||||
const date = new Date(timeStr)
|
||||
if (isNaN(date.getTime())) return ''
|
||||
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
|
||||
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 ''
|
||||
}
|
||||
@@ -430,7 +581,7 @@ const goToUserDetail = () => {
|
||||
const startAutoRefresh = () => {
|
||||
refreshTimer.value = setInterval(() => {
|
||||
if (ticketInfo.value?.status !== 'completed') {
|
||||
fetchTicketDetail()
|
||||
fetchTicketDetail(false) // 定时刷新时不显示 loading
|
||||
}
|
||||
}, 10000)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user