Merge pull request 'master' (#15) from master into deploy
Reviewed-on: lin/ApiServer-Web-admin_dashboard_pc#15
This commit was merged in pull request #15.
This commit is contained in:
+7
-2
@@ -5,8 +5,13 @@ import request from "@/utils/request.js";
|
|||||||
* @returns {Promise}
|
* @returns {Promise}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function getTickerList(count, page, status) {
|
export function getTickerList(count, page, status, orderBy, order) {
|
||||||
return request.get('/api/v1/admin/work_order/list', { count, page, status })
|
const params = { count, page }
|
||||||
|
if (status !== undefined && status !== '') params.status = status
|
||||||
|
if (orderBy) params.orderBy = orderBy
|
||||||
|
if (order) params.order = order
|
||||||
|
console.log('工单列表请求参数:', params) // 调试日志
|
||||||
|
return request.get('/api/v1/admin/work_order/list', params)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 待处理
|
// 待处理
|
||||||
|
|||||||
@@ -678,7 +678,10 @@ const paramValueForm = reactive({
|
|||||||
attr_id: undefined,
|
attr_id: undefined,
|
||||||
attr_name: '',
|
attr_name: '',
|
||||||
attr_value: '',
|
attr_value: '',
|
||||||
attr_price: 0
|
attr_price: 0,
|
||||||
|
index: 0,
|
||||||
|
attr_range: 0,
|
||||||
|
range_type: 'equal'
|
||||||
})
|
})
|
||||||
|
|
||||||
const paramValueRules = {
|
const paramValueRules = {
|
||||||
@@ -825,7 +828,10 @@ const handleAddParamValue = () => {
|
|||||||
attr_id: undefined,
|
attr_id: undefined,
|
||||||
attr_name: '',
|
attr_name: '',
|
||||||
attr_value: '',
|
attr_value: '',
|
||||||
attr_price: 0
|
attr_price: 0,
|
||||||
|
index: 0,
|
||||||
|
attr_range: 0,
|
||||||
|
range_type: 'equal'
|
||||||
})
|
})
|
||||||
paramValueFormRef.value?.resetFields()
|
paramValueFormRef.value?.resetFields()
|
||||||
}
|
}
|
||||||
@@ -838,7 +844,10 @@ const handleEditParamValue = (row) => {
|
|||||||
attr_id: row.id,
|
attr_id: row.id,
|
||||||
attr_name: row.name,
|
attr_name: row.name,
|
||||||
attr_value: row.value,
|
attr_value: row.value,
|
||||||
attr_price: row.price / 100
|
attr_price: row.price / 100,
|
||||||
|
index: row.index || 0,
|
||||||
|
attr_range: row.attr_range || 0,
|
||||||
|
range_type: row.range_type || 'equal'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -872,7 +881,10 @@ const submitParamValueForm = () => {
|
|||||||
arg_id: Number(currentParam.value.id),
|
arg_id: Number(currentParam.value.id),
|
||||||
attr_name: paramValueForm.attr_name,
|
attr_name: paramValueForm.attr_name,
|
||||||
attr_value: paramValueForm.attr_value,
|
attr_value: paramValueForm.attr_value,
|
||||||
attr_price: paramValueForm.attr_price
|
attr_price: paramValueForm.attr_price,
|
||||||
|
index: Number(paramValueForm.index),
|
||||||
|
attr_range: Number(paramValueForm.attr_range),
|
||||||
|
range_type: paramValueForm.range_type
|
||||||
}
|
}
|
||||||
if (paramValueFormType.value === 'edit') {
|
if (paramValueFormType.value === 'edit') {
|
||||||
submitData.attr_id = paramValueForm.attr_id
|
submitData.attr_id = paramValueForm.attr_id
|
||||||
|
|||||||
@@ -56,9 +56,17 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="header-right" v-if="ticketInfo">
|
<div class="header-right" v-if="ticketInfo">
|
||||||
<span class="ticket-id">工单号: {{ ticketInfo.id }}</span>
|
<span class="ticket-id">工单号: {{ ticketInfo.id }}</span>
|
||||||
<el-tag :type="getStatusType(ticketInfo.status)" size="small">
|
<el-select
|
||||||
{{ getStatusText(ticketInfo.status) }}
|
v-model="ticketInfo.status"
|
||||||
</el-tag>
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="handleStatusChange"
|
||||||
|
>
|
||||||
|
<el-option label="待处理" value="pending" />
|
||||||
|
<el-option label="处理中" value="processing" />
|
||||||
|
<el-option label="已回复" value="replied" />
|
||||||
|
<el-option label="已完成" value="completed" />
|
||||||
|
</el-select>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="ticketInfo.status !== 'completed'"
|
v-if="ticketInfo.status !== 'completed'"
|
||||||
type="success"
|
type="success"
|
||||||
@@ -82,7 +90,19 @@
|
|||||||
<el-avatar :size="36" :src="message.avatar">{{ ticketInfo?.username?.charAt(0) || 'U' }}</el-avatar>
|
<el-avatar :size="36" :src="message.avatar">{{ ticketInfo?.username?.charAt(0) || 'U' }}</el-avatar>
|
||||||
</div>
|
</div>
|
||||||
<div class="message-content">
|
<div class="message-content">
|
||||||
<div class="message-text" v-if="message.content">{{ message.content }}</div>
|
<div class="message-text" v-if="message.content">
|
||||||
|
{{ message.content }}
|
||||||
|
<span
|
||||||
|
v-if="message.isAdmin && !message.isTempMessage"
|
||||||
|
class="edit-btn"
|
||||||
|
@click="handleEditMessage(message)"
|
||||||
|
title="编辑消息"
|
||||||
|
>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<div class="message-images" v-if="message.images && message.images.length">
|
<div class="message-images" v-if="message.images && message.images.length">
|
||||||
<img
|
<img
|
||||||
v-for="(img, imgIndex) in message.images"
|
v-for="(img, imgIndex) in message.images"
|
||||||
@@ -124,12 +144,19 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 输入框 -->
|
<!-- 输入框 -->
|
||||||
<div class="input-area">
|
<div
|
||||||
|
class="input-area"
|
||||||
|
@drop.prevent="handleDrop"
|
||||||
|
@dragover.prevent="handleDragOver"
|
||||||
|
@dragleave.prevent="handleDragLeave"
|
||||||
|
:class="{ 'drag-over': isDragOver }"
|
||||||
|
>
|
||||||
<el-input
|
<el-input
|
||||||
|
ref="textareaRef"
|
||||||
v-model="messageInput"
|
v-model="messageInput"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="3"
|
:rows="3"
|
||||||
placeholder="请输入回复内容..."
|
placeholder="请输入回复内容(支持粘贴图片和拖拽图片)..."
|
||||||
@keyup.ctrl.enter="sendMessage"
|
@keyup.ctrl.enter="sendMessage"
|
||||||
/>
|
/>
|
||||||
<div class="input-actions">
|
<div class="input-actions">
|
||||||
@@ -163,6 +190,47 @@
|
|||||||
<el-alert title="该工单已结束,无法继续回复" type="info" :closable="false" />
|
<el-alert title="该工单已结束,无法继续回复" type="info" :closable="false" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑消息对话框 -->
|
||||||
|
<el-dialog v-model="editDialogVisible" title="编辑消息" width="600px">
|
||||||
|
<el-form>
|
||||||
|
<el-form-item label="消息内容">
|
||||||
|
<el-input
|
||||||
|
v-model="editMessageContent"
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
placeholder="请输入消息内容"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图片">
|
||||||
|
<!-- 现有图片预览 -->
|
||||||
|
<div class="edit-images-container">
|
||||||
|
<div class="edit-preview-item" v-for="(image, index) in editMessageImages" :key="index">
|
||||||
|
<img :src="image" alt="图片" />
|
||||||
|
<div class="delete-preview" @click="removeEditImage(index)">×</div>
|
||||||
|
</div>
|
||||||
|
<!-- 添加图片按钮 -->
|
||||||
|
<el-upload
|
||||||
|
action="#"
|
||||||
|
:auto-upload="false"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-change="handleEditFileChange"
|
||||||
|
multiple
|
||||||
|
accept="image/*"
|
||||||
|
>
|
||||||
|
<div class="add-image-btn">
|
||||||
|
<el-icon :size="24"><Plus /></el-icon>
|
||||||
|
<div class="add-text">添加图片</div>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="isEditingSaving" @click="saveEditMessage">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
<!-- 图片查看器 -->
|
<!-- 图片查看器 -->
|
||||||
<el-dialog v-model="imageViewerVisible" width="auto" destroy-on-close>
|
<el-dialog v-model="imageViewerVisible" width="auto" destroy-on-close>
|
||||||
<img :src="currentViewImage" style="max-width: 100%; max-height: 80vh;" />
|
<img :src="currentViewImage" style="max-width: 100%; max-height: 80vh;" />
|
||||||
@@ -174,7 +242,8 @@
|
|||||||
import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
|
import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { getTicketDetail, replyTicket, closeTicket } from '@/api/ticket'
|
import { getTicketDetail, replyTicket, closeTicket, updateTicketInfo, updateTicketReplayInfo } from '@/api/ticket'
|
||||||
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
import { getUserInfo } from '@/api/admin/user'
|
import { getUserInfo } from '@/api/admin/user'
|
||||||
import { uploadFile } from '@/api/admin/file'
|
import { uploadFile } from '@/api/admin/file'
|
||||||
import { useUserStore } from '@/store/userStore'
|
import { useUserStore } from '@/store/userStore'
|
||||||
@@ -200,11 +269,22 @@ const messageInput = ref('')
|
|||||||
const selectedImages = ref([])
|
const selectedImages = ref([])
|
||||||
const selectedFiles = ref([]) // 存储原始文件对象
|
const selectedFiles = ref([]) // 存储原始文件对象
|
||||||
const messagesContainer = ref(null)
|
const messagesContainer = ref(null)
|
||||||
|
const textareaRef = ref(null)
|
||||||
|
const isDragOver = ref(false)
|
||||||
|
|
||||||
// 图片查看
|
// 图片查看
|
||||||
const imageViewerVisible = ref(false)
|
const imageViewerVisible = ref(false)
|
||||||
const currentViewImage = ref('')
|
const currentViewImage = ref('')
|
||||||
|
|
||||||
|
// 编辑消息
|
||||||
|
const editDialogVisible = ref(false)
|
||||||
|
const editMessageContent = ref('')
|
||||||
|
const editMessageImages = ref([])
|
||||||
|
const editMessageFiles = ref([])
|
||||||
|
const editOriginalFileIds = ref([]) // 保存原始文件ID
|
||||||
|
const editingMessage = ref(null)
|
||||||
|
const isEditingSaving = ref(false)
|
||||||
|
|
||||||
// 定时刷新
|
// 定时刷新
|
||||||
const refreshTimer = ref(null)
|
const refreshTimer = ref(null)
|
||||||
|
|
||||||
@@ -283,7 +363,7 @@ const fetchTicketDetail = async (showLoading = true) => {
|
|||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
const detail = res.data
|
const detail = res.data
|
||||||
ticketInfo.value = {
|
ticketInfo.value = {
|
||||||
id: detail.work_id,
|
id: detail.id,
|
||||||
title: detail.name,
|
title: detail.name,
|
||||||
username: detail.user?.userName || `用户${detail.user?.userId || 'Unknown'}`,
|
username: detail.user?.userName || `用户${detail.user?.userId || 'Unknown'}`,
|
||||||
userId: detail.user?.userId,
|
userId: detail.user?.userId,
|
||||||
@@ -299,6 +379,7 @@ const fetchTicketDetail = async (showLoading = true) => {
|
|||||||
id: msg.id,
|
id: msg.id,
|
||||||
content: msg.content !== 'empty' ? msg.content : null,
|
content: msg.content !== 'empty' ? msg.content : null,
|
||||||
images: msg.flies ? msg.flies.map(file => file.url) : [],
|
images: msg.flies ? msg.flies.map(file => file.url) : [],
|
||||||
|
fileIds: msg.flies ? msg.flies.map(file => file.id) : [], // 保存文件ID
|
||||||
time: msg.created_at || msg.updated_at || new Date().toLocaleString(),
|
time: msg.created_at || msg.updated_at || new Date().toLocaleString(),
|
||||||
isAdmin: isAdmin(msg.user?.userId),
|
isAdmin: isAdmin(msg.user?.userId),
|
||||||
userId: msg.user?.userId,
|
userId: msg.user?.userId,
|
||||||
@@ -432,6 +513,38 @@ const sendMessage = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 修改工单状态
|
||||||
|
const handleStatusChange = async (newStatus) => {
|
||||||
|
const statusMap = {
|
||||||
|
'pending': 0,
|
||||||
|
'processing': 1,
|
||||||
|
'replied': 2,
|
||||||
|
'completed': 3
|
||||||
|
}
|
||||||
|
|
||||||
|
const oldStatus = ticketInfo.value.status
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('work_id', route.query.id)
|
||||||
|
formData.append('Status', statusMap[newStatus])
|
||||||
|
|
||||||
|
const res = await updateTicketInfo(formData)
|
||||||
|
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('工单状态已更新')
|
||||||
|
ticketInfo.value.status = newStatus
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '更新失败')
|
||||||
|
ticketInfo.value.status = oldStatus // 恢复原状态
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('更新工单状态出错:', error)
|
||||||
|
ElMessage.error('网络错误,请稍后重试')
|
||||||
|
ticketInfo.value.status = oldStatus // 恢复原状态
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 结束工单
|
// 结束工单
|
||||||
const handleComplete = () => {
|
const handleComplete = () => {
|
||||||
ElMessageBox.confirm('确定要结束此工单吗?结束后将无法继续回复。', '确认操作', {
|
ElMessageBox.confirm('确定要结束此工单吗?结束后将无法继续回复。', '确认操作', {
|
||||||
@@ -456,14 +569,81 @@ const handleComplete = () => {
|
|||||||
// 图片处理
|
// 图片处理
|
||||||
const handleFileChange = (file) => {
|
const handleFileChange = (file) => {
|
||||||
if (!file) return
|
if (!file) return
|
||||||
|
addImageFile(file.raw)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加图片文件(统一处理函数)
|
||||||
|
const addImageFile = (file) => {
|
||||||
|
// 验证文件类型
|
||||||
|
if (!file.type.startsWith('image/')) {
|
||||||
|
ElMessage.warning('只支持图片格式')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证文件大小(限制10MB)
|
||||||
|
if (file.size > 10 * 1024 * 1024) {
|
||||||
|
ElMessage.warning('图片大小不能超过10MB')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// 保存原始文件对象用于上传
|
// 保存原始文件对象用于上传
|
||||||
selectedFiles.value.push(file.raw)
|
selectedFiles.value.push(file)
|
||||||
|
|
||||||
// 读取文件用于预览
|
// 读取文件用于预览
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
reader.onload = (e) => selectedImages.value.push(e.target.result)
|
reader.onload = (e) => selectedImages.value.push(e.target.result)
|
||||||
reader.readAsDataURL(file.raw)
|
reader.readAsDataURL(file)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理粘贴事件
|
||||||
|
const handlePaste = (e) => {
|
||||||
|
const items = e.clipboardData?.items
|
||||||
|
if (!items) return
|
||||||
|
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
const item = items[i]
|
||||||
|
if (item.type.indexOf('image') !== -1) {
|
||||||
|
e.preventDefault()
|
||||||
|
const file = item.getAsFile()
|
||||||
|
if (file) {
|
||||||
|
addImageFile(file)
|
||||||
|
ElMessage.success('图片已添加')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理拖拽进入
|
||||||
|
const handleDragOver = (e) => {
|
||||||
|
isDragOver.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理拖拽离开
|
||||||
|
const handleDragLeave = (e) => {
|
||||||
|
isDragOver.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理文件拖放
|
||||||
|
const handleDrop = (e) => {
|
||||||
|
isDragOver.value = false
|
||||||
|
|
||||||
|
const files = e.dataTransfer?.files
|
||||||
|
if (!files || files.length === 0) return
|
||||||
|
|
||||||
|
let addedCount = 0
|
||||||
|
for (let i = 0; i < files.length; i++) {
|
||||||
|
const file = files[i]
|
||||||
|
if (file.type.startsWith('image/')) {
|
||||||
|
addImageFile(file)
|
||||||
|
addedCount++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (addedCount > 0) {
|
||||||
|
ElMessage.success(`已添加 ${addedCount} 张图片`)
|
||||||
|
} else {
|
||||||
|
ElMessage.warning('未找到图片文件')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeImage = (index) => {
|
const removeImage = (index) => {
|
||||||
@@ -476,6 +656,138 @@ const openImage = (img) => {
|
|||||||
imageViewerVisible.value = true
|
imageViewerVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 编辑消息
|
||||||
|
const handleEditMessage = (message) => {
|
||||||
|
editingMessage.value = message
|
||||||
|
editMessageContent.value = message.content || ''
|
||||||
|
editMessageImages.value = message.images ? [...message.images] : []
|
||||||
|
editOriginalFileIds.value = message.fileIds ? [...message.fileIds] : []
|
||||||
|
editMessageFiles.value = []
|
||||||
|
editDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理编辑对话框中的文件选择
|
||||||
|
const handleEditFileChange = (file) => {
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
// 验证文件类型
|
||||||
|
if (!file.raw.type.startsWith('image/')) {
|
||||||
|
ElMessage.warning('只支持图片格式')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证文件大小(限制10MB)
|
||||||
|
if (file.raw.size > 10 * 1024 * 1024) {
|
||||||
|
ElMessage.warning('图片大小不能超过10MB')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存原始文件对象用于上传
|
||||||
|
editMessageFiles.value.push(file.raw)
|
||||||
|
|
||||||
|
// 读取文件用于预览
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (e) => editMessageImages.value.push(e.target.result)
|
||||||
|
reader.readAsDataURL(file.raw)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除编辑对话框中的图片
|
||||||
|
const removeEditImage = (index) => {
|
||||||
|
const originalImagesCount = editingMessage.value?.images?.length || 0
|
||||||
|
|
||||||
|
// 如果删除的是原始图片,从原始文件ID列表中删除
|
||||||
|
if (index < originalImagesCount) {
|
||||||
|
editOriginalFileIds.value.splice(index, 1)
|
||||||
|
} else {
|
||||||
|
// 如果删除的是新添加的图片,从新文件列表中删除
|
||||||
|
const fileIndex = index - originalImagesCount
|
||||||
|
if (fileIndex >= 0 && fileIndex < editMessageFiles.value.length) {
|
||||||
|
editMessageFiles.value.splice(fileIndex, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从预览列表中删除
|
||||||
|
editMessageImages.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存编辑的消息
|
||||||
|
const saveEditMessage = async () => {
|
||||||
|
if (!editMessageContent.value.trim()) {
|
||||||
|
ElMessage.warning('消息内容不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!editingMessage.value || !editingMessage.value.id) {
|
||||||
|
ElMessage.error('无法获取消息ID')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
isEditingSaving.value = true
|
||||||
|
|
||||||
|
// 如果有新添加的图片,先上传
|
||||||
|
let newFileIds = []
|
||||||
|
if (editMessageFiles.value.length > 0) {
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
|
||||||
|
editMessageFiles.value.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) {
|
||||||
|
const data = uploadRes.data.data
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
newFileIds = data.map(item => String(item.id))
|
||||||
|
} else if (data.id) {
|
||||||
|
newFileIds = [String(data.id)]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(uploadRes.data?.message || '图片上传失败')
|
||||||
|
isEditingSaving.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('图片上传失败:', error)
|
||||||
|
ElMessage.error('图片上传失败,请重试')
|
||||||
|
isEditingSaving.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 合并原始文件ID和新上传的文件ID
|
||||||
|
const allFileIds = [...editOriginalFileIds.value, ...newFileIds]
|
||||||
|
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('id', editingMessage.value.id)
|
||||||
|
formData.append('content', editMessageContent.value.trim())
|
||||||
|
formData.append('files', allFileIds.join(','))
|
||||||
|
|
||||||
|
const res = await updateTicketReplayInfo(formData)
|
||||||
|
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('消息已更新')
|
||||||
|
editDialogVisible.value = false
|
||||||
|
|
||||||
|
// 重新获取工单详情以确保数据同步
|
||||||
|
await fetchTicketDetail(false)
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.message || '更新失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('更新消息出错:', error)
|
||||||
|
ElMessage.error('网络错误,请稍后重试')
|
||||||
|
} finally {
|
||||||
|
isEditingSaving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 快捷回复
|
// 快捷回复
|
||||||
const useQuickReply = (reply) => {
|
const useQuickReply = (reply) => {
|
||||||
messageInput.value = reply.content
|
messageInput.value = reply.content
|
||||||
@@ -606,10 +918,24 @@ watch(
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchTicketDetail()
|
fetchTicketDetail()
|
||||||
startAutoRefresh()
|
startAutoRefresh()
|
||||||
|
|
||||||
|
// 绑定粘贴事件到原生 textarea
|
||||||
|
nextTick(() => {
|
||||||
|
const textarea = textareaRef.value?.$el?.querySelector('textarea')
|
||||||
|
if (textarea) {
|
||||||
|
textarea.addEventListener('paste', handlePaste)
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
stopAutoRefresh()
|
stopAutoRefresh()
|
||||||
|
|
||||||
|
// 移除粘贴事件监听
|
||||||
|
const textarea = textareaRef.value?.$el?.querySelector('textarea')
|
||||||
|
if (textarea) {
|
||||||
|
textarea.removeEventListener('paste', handlePaste)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -645,7 +971,10 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
.ticket-id {
|
.ticket-id {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #606266;
|
color: #303133;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
@@ -765,6 +1094,29 @@ onBeforeUnmount(() => {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text .edit-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 8px;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-radius: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text .edit-btn:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text:hover .edit-btn {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-admin .message-text {
|
.message-admin .message-text {
|
||||||
@@ -772,6 +1124,16 @@ onBeforeUnmount(() => {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-admin .message-text .edit-btn {
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-admin .message-text .edit-btn:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.message-images {
|
.message-images {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -849,6 +1211,28 @@ onBeforeUnmount(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area.drag-over {
|
||||||
|
background: #f0f9ff;
|
||||||
|
border: 2px dashed #409eff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area.drag-over::before {
|
||||||
|
content: '释放以添加图片';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #409eff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-actions {
|
.input-actions {
|
||||||
@@ -872,4 +1256,67 @@ onBeforeUnmount(() => {
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
border-top: 1px solid #ebeef5;
|
border-top: 1px solid #ebeef5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.edit-images-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-preview-item {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-preview-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-preview-item .delete-preview {
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
right: -8px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: #f56c6c;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-image-btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 2px dashed #dcdfe6;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-image-btn:hover {
|
||||||
|
border-color: #409eff;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-image-btn .add-text {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,9 +3,6 @@
|
|||||||
<!-- 顶部工具栏 -->
|
<!-- 顶部工具栏 -->
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<div class="status-tabs">
|
<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')">
|
<div class="tab-item pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
|
||||||
待处理 <span class="count">{{ stats.pending }}</span>
|
待处理 <span class="count">{{ stats.pending }}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -18,8 +15,22 @@
|
|||||||
<div class="tab-item completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
|
<div class="tab-item completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
|
||||||
已完成 <span class="count">{{ stats.completed }}</span>
|
已完成 <span class="count">{{ stats.completed }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tab-item" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
|
||||||
|
全部 <span class="count">{{ stats.total }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar-right">
|
<div class="toolbar-right">
|
||||||
|
<el-select v-model="sortBy" placeholder="排序方式" clearable style="width: 140px" @change="handleSortChange">
|
||||||
|
<el-option label="不排序" value="" />
|
||||||
|
<el-option label="创建时间" value="created_at" />
|
||||||
|
<el-option label="更新时间" value="updated_at" />
|
||||||
|
<el-option label="工单号" value="id" />
|
||||||
|
</el-select>
|
||||||
|
<el-select v-model="sortOrder" placeholder="排序顺序" clearable style="width: 100px" @change="handleSortChange">
|
||||||
|
<el-option label="默认" value="" />
|
||||||
|
<el-option label="降序" value="desc" />
|
||||||
|
<el-option label="升序" value="asc" />
|
||||||
|
</el-select>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="searchKeyword"
|
v-model="searchKeyword"
|
||||||
placeholder="搜索工单号、标题、用户名"
|
placeholder="搜索工单号、标题、用户名"
|
||||||
@@ -92,7 +103,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, computed, onMounted } from 'vue'
|
import { ref, reactive, computed, onMounted, onActivated } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import {
|
import {
|
||||||
@@ -112,7 +123,11 @@ const isLoading = ref(false)
|
|||||||
// 工单数据
|
// 工单数据
|
||||||
const ticketList = ref([])
|
const ticketList = ref([])
|
||||||
const searchKeyword = ref('')
|
const searchKeyword = ref('')
|
||||||
const activeStatus = ref('')
|
const activeStatus = ref('pending') // 默认选中"待处理"
|
||||||
|
|
||||||
|
// 排序
|
||||||
|
const sortBy = ref('') // 默认不排序
|
||||||
|
const sortOrder = ref('') // 默认不选择排序顺序
|
||||||
|
|
||||||
// 统计数据
|
// 统计数据
|
||||||
const stats = reactive({
|
const stats = reactive({
|
||||||
@@ -125,6 +140,8 @@ const stats = reactive({
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 状态转换
|
// 状态转换
|
||||||
const convertStatusToString = (status) => {
|
const convertStatusToString = (status) => {
|
||||||
const statusMap = { 0: 'pending', 1: 'processing', 2: 'replied', 3: 'completed' }
|
const statusMap = { 0: 'pending', 1: 'processing', 2: 'replied', 3: 'completed' }
|
||||||
@@ -151,7 +168,14 @@ const fetchTicketList = async () => {
|
|||||||
statusParam = statusMap[activeStatus.value] || ''
|
statusParam = statusMap[activeStatus.value] || ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = await getTickerList(pageSize.value, currentPage.value, statusParam)
|
console.log('调用getTickerList,排序参数:', { sortBy: sortBy.value, sortOrder: sortOrder.value })
|
||||||
|
const res = await getTickerList(
|
||||||
|
pageSize.value,
|
||||||
|
currentPage.value,
|
||||||
|
statusParam,
|
||||||
|
sortBy.value,
|
||||||
|
sortOrder.value
|
||||||
|
)
|
||||||
|
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
ticketList.value = (res.data.data || []).map(item => ({
|
ticketList.value = (res.data.data || []).map(item => ({
|
||||||
@@ -212,6 +236,12 @@ const filterByStatus = (status) => {
|
|||||||
fetchTicketList()
|
fetchTicketList()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 排序变化处理
|
||||||
|
const handleSortChange = () => {
|
||||||
|
currentPage.value = 1
|
||||||
|
fetchTicketList()
|
||||||
|
}
|
||||||
|
|
||||||
// 搜索处理
|
// 搜索处理
|
||||||
const handleSearch = () => {}
|
const handleSearch = () => {}
|
||||||
|
|
||||||
@@ -261,10 +291,21 @@ const handleComplete = (ticket) => {
|
|||||||
}).catch(() => {})
|
}).catch(() => {})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let isFirstLoad = true
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchTicketList()
|
fetchTicketList()
|
||||||
fetchStats()
|
fetchStats()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 当页面被激活时(从详情页返回时)
|
||||||
|
onActivated(() => {
|
||||||
|
// 跳过首次加载,只在从其他页面返回时刷新
|
||||||
|
if (!isFirstLoad) {
|
||||||
|
refreshList()
|
||||||
|
}
|
||||||
|
isFirstLoad = false
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user