浅念
1037 lines
30 KiB
Vue
1037 lines
30 KiB
Vue
<template>
|
|
<div class="page-content">
|
|
<ElRow>
|
|
<!-- <ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElInput placeholder="工单编号"></ElInput>
|
|
</ElCol> -->
|
|
<div style="width: 12px"></div>
|
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
|
<!-- <ElButton v-ripple>搜索</ElButton> -->
|
|
<ElButton v-if="hasAuth('work_order@add')" @click="showDialog('add')" v-ripple>新增</ElButton>
|
|
</ElCol>
|
|
</ElRow>
|
|
|
|
<ArtTable
|
|
ref="tableRef"
|
|
row-key="id"
|
|
:loading="loading"
|
|
:data="tableData"
|
|
:currentPage="pagination.currentPage"
|
|
:pageSize="pagination.pageSize"
|
|
:total="pagination.total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
>
|
|
<template #default>
|
|
<ElTableColumn label="工单编号" prop="code" />
|
|
<ElTableColumn label="问题分类" prop="categorie_id">
|
|
<template #default="scope">
|
|
<div v-html="scope.row.categorie ? scope.row.categorie.name : ''"></div>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="问题描述" prop="content" min-width="200px">
|
|
<template #default="scope">
|
|
<div class="multi-line-ellipsis" v-html="scope.row.content"></div>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="状态" prop="status">
|
|
<template #default="scope">
|
|
<ElTag
|
|
:type="
|
|
scope.row.status == 1
|
|
? 'info'
|
|
: scope.row.status == 2
|
|
? 'primary'
|
|
: scope.row.status == 4
|
|
? 'success'
|
|
: 'danger'
|
|
"
|
|
>
|
|
{{
|
|
scope.row.status == 1
|
|
? '待受理'
|
|
: scope.row.status == 2
|
|
? '处理中'
|
|
: scope.row.status == 4
|
|
? '已完成'
|
|
: '关闭'
|
|
}}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="创建时间" prop="created_at" />
|
|
<ElTableColumn fixed="right" label="操作" max-width="200px">
|
|
<template #default="scope">
|
|
<ElRow>
|
|
<el-button
|
|
v-if="scope.row.status == 1 && hasAuth('work_order@edit')"
|
|
link
|
|
@click="showDialog('edit', scope.row)"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
<el-button v-if="hasAuth('work_order@status')" link @click="statusEdit(scope.row)">
|
|
状态编辑
|
|
</el-button>
|
|
<el-button
|
|
v-if="hasAuth('work_order@conversation_list')"
|
|
link
|
|
@click="openChat(scope.row)"
|
|
>
|
|
查看/回复
|
|
</el-button>
|
|
<!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
|
|
</ElRow>
|
|
</template>
|
|
</ElTableColumn>
|
|
</template>
|
|
</ArtTable>
|
|
|
|
<ElDialog
|
|
v-model="dialogVisible"
|
|
:title="dialogType === 'add' ? '新增' : '编辑'"
|
|
width="60%"
|
|
align-center
|
|
>
|
|
<ElForm ref="formRef" :model="form" label-width="120px" style="padding-right: 30px">
|
|
<ElFormItem label="问题分类" prop="categorie_id">
|
|
<ElSelect v-model="form.categorie_id">
|
|
<ElOption
|
|
v-for="type in categorieSelectList"
|
|
:key="type.id"
|
|
:value="type.id"
|
|
:label="type.name"
|
|
/>
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
<ElFormItem label="问题描述" prop="content">
|
|
<!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> -->
|
|
<!-- 富文本编辑器 -->
|
|
<ArtWangEditor class="el-top" v-model="editorHtml" />
|
|
</ElFormItem>
|
|
<ElFormItem label="上传附件" prop="attachment">
|
|
<ElUpload
|
|
v-model:file-list="fileList"
|
|
class="upload-demo"
|
|
:action="actionImageUplode"
|
|
:on-success="handleUploadSuccess"
|
|
:headers="uploadHeaders"
|
|
multiple
|
|
:limit="3"
|
|
:on-exceed="handleExceed"
|
|
>
|
|
<el-button type="primary">上传</el-button>
|
|
</ElUpload>
|
|
</ElFormItem>
|
|
<ElFormItem label="" prop="">
|
|
<!-- 附件预览区 -->
|
|
<div class="attachment-preview" v-if="fileList.length">
|
|
<div class="attachment-list">
|
|
<div v-for="(file, idx) in fileList" :key="file.name" class="attachment-item">
|
|
<template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
|
|
<img
|
|
:src="file.file_url ? file.file_url : file.response.data.file_url"
|
|
:alt="file.name"
|
|
class="attachment-thumb"
|
|
@click="
|
|
handleImageClick(
|
|
imageList.findIndex((url) =>
|
|
url === file.file_url ? file.file_url : file.response.data.file_url
|
|
)
|
|
)
|
|
"
|
|
/>
|
|
</template>
|
|
<template v-else-if="/\.(mp4|webm|ogg)$/i.test(file.name)">
|
|
<video
|
|
:src="file.file_url ? file.file_url : file.response.data.file_url"
|
|
controls
|
|
class="attachment-thumb"
|
|
@click.prevent="
|
|
handleVideoClick(file.file_url ? file.file_url : file.response.data.file_url)
|
|
"
|
|
></video>
|
|
</template>
|
|
<template v-else>
|
|
<a
|
|
:href="file.file_url ? file.file_url : file.response.data.file_url"
|
|
target="_blank"
|
|
>{{ file.name }}</a
|
|
>
|
|
</template>
|
|
<div class="attachment-filename">{{ file.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton @click="dialogVisible = false">取消</ElButton>
|
|
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
<el-drawer v-model="isDrawerVisible" :size="isMobile ? '100%' : '480px'" :with-header="false">
|
|
<div class="chat-container">
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<span class="name">工单记录</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<el-icon class="icon-close" :size="20" @click="closeChat">
|
|
<Close />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
<!-- 聊天消息区域 -->
|
|
<div class="chat-messages" ref="messageContainer">
|
|
<template v-for="(message, index) in messages" :key="index">
|
|
<div
|
|
:class="[
|
|
'message-item',
|
|
String(message.user_id) === String(userid) ? 'message-right' : 'message-left'
|
|
]"
|
|
>
|
|
<!-- :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar" -->
|
|
<el-avatar :size="32" :src="message.user_avatar" class="message-avatar" />
|
|
<div class="message-content">
|
|
<div class="message-info">
|
|
<span class="sender-name">{{ message.user_name }}</span>
|
|
<span class="message-time">{{ message.updated_at }}</span>
|
|
</div>
|
|
<div class="message-text" v-html="message.content"></div>
|
|
<!-- 附件显示区域 -->
|
|
<div
|
|
class="message-attachments"
|
|
v-if="message.attachment && message.attachment.length > 0"
|
|
>
|
|
<div
|
|
class="attachment-item"
|
|
v-for="(attachment, attIndex) in message.attachment"
|
|
:key="attIndex"
|
|
>
|
|
<template
|
|
v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(attachment.original_name)"
|
|
>
|
|
<img
|
|
:src="attachment.storage_path_full"
|
|
:alt="attachment.original_name"
|
|
class="attachment-thumb"
|
|
@click="handleChatImageClick(attachment.storage_path_full)"
|
|
/>
|
|
</template>
|
|
<template v-else-if="/\.(mp4|webm|ogg)$/i.test(attachment.original_name)">
|
|
<video
|
|
:src="attachment.storage_path_full"
|
|
controls
|
|
class="attachment-thumb"
|
|
@click.prevent="handleChatVideoClick(attachment.storage_path_full)"
|
|
></video>
|
|
</template>
|
|
<template v-else>
|
|
<div class="file-attachment">
|
|
<el-icon class="file-icon"><Document /></el-icon>
|
|
<span class="file-name">{{ attachment.original_name }}</span>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
link
|
|
@click="downloadAttachment(attachment)"
|
|
>
|
|
下载
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="chat-input" v-if="hasAuth('work_order@conversation_add')">
|
|
<!-- 附件上传区域 -->
|
|
<div class="chat-attachment-upload">
|
|
<el-upload
|
|
v-model:file-list="chatFileList"
|
|
class="chat-upload"
|
|
:action="actionImageUplode"
|
|
:on-success="handleChatUploadSuccess"
|
|
:headers="uploadHeaders"
|
|
multiple
|
|
:limit="5"
|
|
:on-exceed="handleChatExceed"
|
|
:show-file-list="false"
|
|
>
|
|
<el-button type="primary" link>
|
|
<el-icon><Paperclip /></el-icon>
|
|
添加附件
|
|
</el-button>
|
|
</el-upload>
|
|
<!-- 已上传附件预览 -->
|
|
<div class="uploaded-attachments" v-if="chatFileList.length > 0">
|
|
<div class="attachment-preview-item" v-for="(file, idx) in chatFileList" :key="idx">
|
|
<template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
|
|
<img
|
|
:src="file.file_url || file.response?.data?.file_url"
|
|
:alt="file.name"
|
|
class="preview-thumb"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<el-icon class="file-icon"><Document /></el-icon>
|
|
</template>
|
|
<span class="file-name">{{ file.name }}</span>
|
|
<el-button type="danger" size="small" link @click="removeChatFile(idx)">
|
|
<el-icon><Close /></el-icon>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-input
|
|
v-model="messageText"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="输入消息"
|
|
resize="none"
|
|
/>
|
|
<ElInput v-model="ticket_id" type="hidden" />
|
|
<div class="chat-input-actions">
|
|
<el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
|
|
<ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
|
|
<ElForm ref="formRef" :model="statusform" label-width="120px">
|
|
<ElFormItem label="状态" prop="status">
|
|
<ElSelect v-model="statusform.status">
|
|
<ElOption
|
|
v-for="type in statusList"
|
|
:key="type.value"
|
|
:value="type.value"
|
|
:label="type.text"
|
|
/>
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
<ElFormItem label="描述" prop="msg">
|
|
<ElInput v-model="statusform.msg" type="textarea" :rows="3" />
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton @click="dialogVisiblestatus = false">取消</ElButton>
|
|
<ElButton type="primary" @click="statusSubmit()">提交</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
|
|
<!-- 图片预览弹窗 -->
|
|
<ElImageViewer
|
|
v-if="imageViewerVisible"
|
|
:url-list="chatImageList.length > 0 ? chatImageList : imageList"
|
|
:initial-index="imageViewerIndex"
|
|
@close="closeImageViewer"
|
|
/>
|
|
<!-- 视频预览弹窗 -->
|
|
<ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
|
|
<video
|
|
v-if="currentVideoUrl"
|
|
:src="currentVideoUrl"
|
|
controls
|
|
autoplay
|
|
style="width: 100%; max-height: 70vh; display: block"
|
|
></video>
|
|
</ElDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import type { FormInstance } from 'element-plus'
|
|
import { Order } from '@/mock/temp/formData'
|
|
import { WorkService } from '@/api/workApi'
|
|
import { ElImageViewer } from 'element-plus'
|
|
import { useAuth } from "@/composables/useAuth";
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
|
import { Paperclip, Document, Close } from '@element-plus/icons-vue'
|
|
const { uploadHeaders } = useUploadHeaders()
|
|
const { hasAuth } = useAuth();
|
|
defineOptions({ name: 'Order' })
|
|
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
|
const loading = ref(false)
|
|
const editorHtml = ref('') // 编辑器内容
|
|
const dialogVisible = ref(false)
|
|
const dialogVisiblestatus = ref(false)
|
|
const formRef = ref<FormInstance>()
|
|
const { width } = useWindowSize()
|
|
const isMobile = computed(() => width.value < 500)
|
|
// 抽屉显示状态
|
|
const isDrawerVisible = ref(false)
|
|
const { info } = useUserStore()
|
|
const userid = info.user.id
|
|
console.log(userid)
|
|
// 消息相关数据
|
|
const messages = ref<any[]>([])
|
|
const messageText = ref('')
|
|
// 滚动到底部
|
|
const messageContainer = ref<HTMLElement | null>(null)
|
|
const scrollToBottom = () => {
|
|
setTimeout(() => {
|
|
if (messageContainer.value) {
|
|
messageContainer.value.scrollTop = messageContainer.value.scrollHeight
|
|
}
|
|
}, 100)
|
|
}
|
|
const openChat = (row: any) => {
|
|
isDrawerVisible.value = true
|
|
// 清空数据
|
|
messageText.value = ''
|
|
messages.value = []
|
|
chatFileList.value = []
|
|
getConversationList(row.id)
|
|
}
|
|
|
|
const closeChat = () => {
|
|
isDrawerVisible.value = false
|
|
}
|
|
//获取状态 下拉框 getStatus
|
|
const statusList = ref<any>()
|
|
const getstatusList = async () => {
|
|
try {
|
|
// 这里调用获取品牌列表的接口
|
|
const response = await WorkService.getStatus({})
|
|
statusList.value = response || []
|
|
} catch (error) { }
|
|
}
|
|
//获取工单分类
|
|
const categorieSelectList = ref<any>()
|
|
const getcategorieSelectList = async () => {
|
|
try {
|
|
// 这里调用获取品牌列表的接口
|
|
const response = await WorkService.getcategorieselect()
|
|
categorieSelectList.value = response || []
|
|
} catch (error) { }
|
|
}
|
|
|
|
|
|
|
|
const fileList = ref<any[]>([])
|
|
const form = reactive<Order>({
|
|
id: '',
|
|
categorie_id: '',
|
|
content: '',
|
|
attachment: []
|
|
})
|
|
const pagination = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
const paginationmsg = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
// 表格数据
|
|
const tableData = ref<any[]>([])
|
|
|
|
// 表格实例引用
|
|
const tableRef = ref()
|
|
|
|
onMounted(() => {
|
|
getWorkList()
|
|
})
|
|
|
|
// 获取列表数据
|
|
const getWorkList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const { currentPage, pageSize } = pagination
|
|
|
|
const { data, current, size, total } = await WorkService.getWorkList({
|
|
current: currentPage,
|
|
size: pageSize
|
|
})
|
|
tableData.value = data.map((item: any, index: number) => ({
|
|
...item
|
|
}))
|
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
|
} catch (error) {
|
|
console.error('获取用户列表失败:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
//获取工单记录 getconversationList
|
|
const ticket_id = ref()
|
|
const getConversationList = async (id: any) => {
|
|
loading.value = true
|
|
try {
|
|
const { currentPage, pageSize } = paginationmsg
|
|
ticket_id.value = id
|
|
const { data, current, size, total } = await WorkService.getconversationList({
|
|
current: currentPage,
|
|
size: pageSize,
|
|
ticket_id: id
|
|
})
|
|
messages.value = data.map((item: any, index: number) => ({
|
|
...item
|
|
}))
|
|
Object.assign(paginationmsg, { currentPage: current, pageSize: size, total })
|
|
} catch (error) {
|
|
console.error('获取用户列表失败:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
// 发送工单记录消息
|
|
const sendMessage = async () => {
|
|
const text = messageText.value.trim()
|
|
const ids = ticket_id.value
|
|
if (!text && chatFileList.value.length === 0) return
|
|
// 准备附件数据
|
|
const attachments = chatFileList.value
|
|
.map((file) => {
|
|
const data = file.response?.data
|
|
if (data) {
|
|
return {
|
|
original_name: data.original_name,
|
|
storage_path: data.storage_path || data.file_name
|
|
}
|
|
}
|
|
return null
|
|
})
|
|
.filter(Boolean)
|
|
const { message } = await WorkService.conversationAdd({
|
|
content: text,
|
|
ticket_id: ids,
|
|
attachment: attachments
|
|
})
|
|
ElMessage.success(message)
|
|
messageText.value = ''
|
|
chatFileList.value = [] // 清空附件列表
|
|
getConversationList(ids)
|
|
scrollToBottom()
|
|
}
|
|
const dialogType = ref('add')
|
|
|
|
const showDialog = (type: string, row?: any) => {
|
|
dialogVisible.value = true
|
|
dialogType.value = type
|
|
getcategorieSelectList()
|
|
if (type === 'edit' && row) {
|
|
form.id = row.id
|
|
form.categorie_id = row.categorie_id
|
|
form.content = row.content
|
|
editorHtml.value = row.content
|
|
// 回显附件
|
|
fileList.value = (row.attachments || []).map((item: { original_name: any; storage_path_full: any }) => ({
|
|
name: item.original_name,
|
|
file_url: item.storage_path_full,
|
|
status: 'success',
|
|
response: { data: item }
|
|
}))
|
|
// 如果你有 uploadedFiles 也要同步
|
|
uploadedFiles.value = row.attachments || []
|
|
} else {
|
|
// 新增时清空表单和上传文件
|
|
form.categorie_id = ''
|
|
form.content = ''
|
|
editorHtml.value = ''
|
|
fileList.value = []
|
|
uploadedFiles.value = []
|
|
}
|
|
}
|
|
|
|
const statusform = reactive({
|
|
id: '',
|
|
status: '',
|
|
msg: ''
|
|
})
|
|
|
|
const statusEdit = (row: any) => {
|
|
getstatusList()
|
|
dialogVisiblestatus.value = true
|
|
statusform.id = row.id
|
|
}
|
|
const deleteRole = () => {
|
|
ElMessageBox.confirm('确定删除该角色吗？', '删除确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'error'
|
|
}).then(() => {
|
|
ElMessage.success('删除成功')
|
|
})
|
|
}
|
|
const delCodeTrim = (content: string): string => {
|
|
return content.replace(/(\s*)<\/code>/g, '</code>')
|
|
}
|
|
//添加工单
|
|
const handleExceed = () => {
|
|
ElMessage.warning('最多上传3个文件')
|
|
}
|
|
const uploadedFiles = ref<any[]>([])
|
|
const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
|
|
// 只处理上传成功的文件
|
|
uploadedFiles.value = uploadFiles.filter(item => item.status === 'success').map(item => {
|
|
const data = item.response?.data
|
|
if (data) {
|
|
return {
|
|
id: data.id?data.id:'',
|
|
original_name: data.original_name,
|
|
storage_path: data.storage_path?data.storage_path:data.file_name
|
|
}
|
|
}
|
|
return null
|
|
})
|
|
.filter(Boolean)
|
|
}
|
|
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
|
const { categorie_id} = form
|
|
editorHtml.value = delCodeTrim(editorHtml.value)
|
|
if(dialogType.value === 'add'){
|
|
const { message } = await WorkService.WorkAdd({
|
|
content: editorHtml.value,
|
|
categorie_id: categorie_id,
|
|
attachment:uploadedFiles.value
|
|
})
|
|
ElMessage.success(message)
|
|
dialogVisible.value = false
|
|
getWorkList()
|
|
}else{
|
|
const { message } = await WorkService.Workedit({
|
|
id:form.id,
|
|
content: editorHtml.value,
|
|
categorie_id: categorie_id,
|
|
attachment:uploadedFiles.value
|
|
})
|
|
ElMessage.success(message)
|
|
dialogVisible.value = false
|
|
getWorkList()
|
|
}
|
|
|
|
|
|
}
|
|
// 处理表格分页变化
|
|
const handleSizeChange = (newPageSize: number) => {
|
|
pagination.pageSize = newPageSize
|
|
getWorkList()
|
|
}
|
|
|
|
const handleCurrentChange = (newCurrentPage: number) => {
|
|
pagination.currentPage = newCurrentPage
|
|
getWorkList()
|
|
}
|
|
//修改状态
|
|
const statusSubmit = async () => {
|
|
// loading.value = true
|
|
const { msg, status, id } = statusform
|
|
const { message } = await WorkService.Workstatus({
|
|
id,
|
|
msg,
|
|
status
|
|
})
|
|
ElMessage.success(message)
|
|
dialogVisiblestatus.value = false
|
|
getWorkList()
|
|
}
|
|
|
|
// 图片预览相关
|
|
const imageViewerVisible = ref(false)
|
|
const imageViewerIndex = ref(0)
|
|
const imageList = computed(() => fileList.value.filter(file => /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)).map(file => file.file_url?file.file_url:file.response.data.file_url))
|
|
// 聊天图片预览列表
|
|
const chatImageList = ref<string[]>([])
|
|
function handleImageClick(idx: number) {
|
|
imageViewerIndex.value = idx
|
|
imageViewerVisible.value = true
|
|
}
|
|
// 视频预览相关
|
|
const videoDialogVisible = ref(false)
|
|
const currentVideoUrl = ref('')
|
|
function handleVideoClick(url: string) {
|
|
currentVideoUrl.value = url
|
|
videoDialogVisible.value = true
|
|
}
|
|
|
|
// 聊天相关
|
|
const chatFileList = ref<any[]>([])
|
|
const handleChatUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
|
|
chatFileList.value = uploadFiles.filter(item => item.status === 'success').map(item => {
|
|
const data = item.response?.data
|
|
if (data) {
|
|
return {
|
|
name: data.original_name,
|
|
file_url: data.storage_path_full,
|
|
status: 'success',
|
|
response: { data: data }
|
|
}
|
|
}
|
|
return null
|
|
}).filter(Boolean)
|
|
}
|
|
const handleChatExceed = () => {
|
|
ElMessage.warning('最多上传5个文件')
|
|
}
|
|
const removeChatFile = (index: number) => {
|
|
chatFileList.value.splice(index, 1)
|
|
}
|
|
const handleChatImageClick = (url: string) => {
|
|
// 设置聊天图片预览列表
|
|
chatImageList.value = [url]
|
|
imageViewerIndex.value = 0
|
|
imageViewerVisible.value = true
|
|
}
|
|
|
|
const closeImageViewer = () => {
|
|
imageViewerVisible.value = false
|
|
chatImageList.value = [] // 清空聊天图片列表
|
|
}
|
|
const handleChatVideoClick = (url: string) => {
|
|
currentVideoUrl.value = url
|
|
videoDialogVisible.value = true
|
|
}
|
|
const downloadAttachment = (attachment: any) => {
|
|
try {
|
|
const fileName = attachment.original_name || 'download'
|
|
const link = document.createElement('a')
|
|
link.href = attachment.storage_path_full
|
|
link.download = fileName
|
|
link.target = '_blank'
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
ElMessage.success('开始下载')
|
|
} catch (error) {
|
|
ElMessage.error('下载失败')
|
|
console.error('下载失败:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-table__empty-block) {
|
|
height: 100% !important;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.multi-line-ellipsis {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
.page-content {
|
|
.svg-icon {
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
overflow: hidden;
|
|
vertical-align: -8px;
|
|
fill: currentcolor;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
|
|
.header-left {
|
|
.name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.header-right {
|
|
.icon-close {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100% - 70px);
|
|
|
|
.chat-messages {
|
|
flex: 1;
|
|
padding: 30px 16px;
|
|
overflow-y: auto;
|
|
border-top: 1px solid var(--el-border-color-lighter);
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 5px !important;
|
|
}
|
|
|
|
.message-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
margin-bottom: 30px;
|
|
|
|
.message-text {
|
|
font-size: 14px;
|
|
color: var(--art-gray-900);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
&.message-left {
|
|
justify-content: flex-start;
|
|
|
|
.message-content {
|
|
align-items: flex-start;
|
|
|
|
.message-info {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.message-text {
|
|
background-color: #f8f5ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.message-right {
|
|
flex-direction: row-reverse;
|
|
|
|
.message-content {
|
|
align-items: flex-end;
|
|
|
|
.message-info {
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
}
|
|
|
|
.message-text {
|
|
background-color: #e9f3ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-avatar {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.message-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 70%;
|
|
|
|
.message-info {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
font-size: 12px;
|
|
|
|
.message-time {
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
.sender-name {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.message-text {
|
|
padding: 10px 14px;
|
|
line-height: 1.4;
|
|
white-space: pre-line;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-input {
|
|
padding: 16px 16px 0;
|
|
|
|
.input-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.chat-input-actions {
|
|
display: flex;
|
|
align-items: center; // 修正为单数
|
|
justify-content: right;
|
|
margin-top: 12px;
|
|
|
|
// 确保发送按钮与输入框对齐
|
|
el-button {
|
|
min-width: 80px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
.chat-container {
|
|
.chat-messages {
|
|
.message-item {
|
|
&.message-left {
|
|
.message-text {
|
|
background-color: #232323 !important;
|
|
}
|
|
}
|
|
|
|
&.message-right {
|
|
.message-text {
|
|
background-color: #182331 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment-preview {
|
|
margin-top: 12px;
|
|
.attachment-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
.attachment-item {
|
|
width: 130px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #fafbfc;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
|
padding: 10px 8px 6px 8px;
|
|
transition: box-shadow 0.2s, transform 0.2s;
|
|
cursor: pointer;
|
|
&:hover {
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
|
|
transform: translateY(-2px) scale(1.03);
|
|
}
|
|
}
|
|
.attachment-thumb {
|
|
max-width: 110px;
|
|
max-height: 90px;
|
|
border-radius: 4px;
|
|
border: 1px solid #eee;
|
|
margin-bottom: 6px;
|
|
object-fit: cover;
|
|
background: #fff;
|
|
}
|
|
.attachment-filename {
|
|
font-size: 12px;
|
|
color: #666;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
// 聊天附件样式
|
|
.message-right .message-attachments{
|
|
text-align: right;
|
|
}
|
|
.message-left .message-attachments{
|
|
text-align: left;
|
|
}
|
|
.message-attachments {
|
|
margin-top: 8px;
|
|
|
|
.attachment-item {
|
|
margin-bottom: 8px;
|
|
|
|
.attachment-thumb {
|
|
max-width: 200px;
|
|
max-height: 150px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
border: 1px solid var(--el-border-color-lighter);
|
|
transition: transform 0.2s;
|
|
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.file-attachment {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--el-fill-color-light);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--el-border-color-lighter);
|
|
|
|
.file-icon {
|
|
font-size: 16px;
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
|
|
.file-name {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: var(--el-text-color-regular);
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-attachment-upload {
|
|
margin-bottom: 12px;
|
|
|
|
.chat-upload {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.uploaded-attachments {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
|
|
.attachment-preview-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
background: var(--el-fill-color-light);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--el-border-color-lighter);
|
|
max-width: 200px;
|
|
|
|
.preview-thumb {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.file-icon {
|
|
font-size: 16px;
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
|
|
.file-name {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: var(--el-text-color-regular);
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |