xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工单去掉 移动端不显示限制

Browse Source
This commit is contained in:
浅念
2025-09-03 15:13:10 +08:00
parent a91e1d7820
commit 58f7d56f40
3 changed files with 1233 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/work/myOrder/index.vue
+2 -7
View File
@@ -1,6 +1,5 @@
<template>
<div class="page-content">
<div v-if="!isMobile">
<ElRow>
<!-- <ElCol :xs="24" :sm="12" :lg="6">
<ElInput placeholder="工单编号"></ElInput>
@@ -32,7 +31,7 @@
<div v-html="scope.row.categorie ? scope.row.categorie.name : ''"></div>
</template>
</ElTableColumn>
<ElTableColumn label="问题描述" prop="content">
<ElTableColumn label="问题描述" prop="content" min-width="200px">
<template #default="scope">
<div class="multi-line-ellipsis" v-html="scope.row.content"></div>
</template>
@@ -46,7 +45,7 @@
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="240px">
<ElTableColumn fixed="right" label="操作" max-width="200px">
<template #default="scope">
<ElRow>
<el-button
@@ -310,10 +309,6 @@
<video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
</ElDialog>
</div>
<div v-else class="mobile-hide-tip">
<p>该页面暂不支持移动端访问</p>
</div>
</div>
</template>
<script setup lang="ts">
src/views/work/order/index.vue
+150 -155
View File
@@ -1,6 +1,5 @@
<template>
<div class="page-content">
<div v-if="!isMobile">
<ElRow>
<!-- <ElCol :xs="24" :sm="12" :lg="6">
<ElInput placeholder="工单编号"></ElInput>
@@ -22,7 +21,7 @@
<div v-html="scope.row.categorie?scope.row.categorie.name:''"></div>
</template>
</ElTableColumn>
<ElTableColumn label="问题描述" prop="content">
<ElTableColumn label="问题描述" prop="content" min-width="200px">
<template #default="scope">
<div class="multi-line-ellipsis" v-html="scope.row.content"></div>
</template>
@@ -36,7 +35,7 @@
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="240px">
<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>
@@ -260,117 +259,113 @@
<video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
</ElDialog>
</div>
<div v-else class="mobile-hide-tip">
<p>该页面暂不支持移动端访问</p>
</div>
</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 typeList = ref<any[]>([])
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)
import meAvatar from '@/assets/img/avatar/avatar5.webp'
import aiAvatar from '@/assets/img/avatar/avatar10.webp'
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 typeList = ref<any[]>([])
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)
import meAvatar from '@/assets/img/avatar/avatar5.webp'
import aiAvatar from '@/assets/img/avatar/avatar10.webp'
// 消息相关数据
const messages = ref<any[]>([])
const messageText = ref('')
// 滚动到底部
const messageContainer = ref<HTMLElement | null>(null)
const scrollToBottom = () => {
// 消息相关数据
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) => {
}
const openChat = (row: any) => {
isDrawerVisible.value = true
// 清空数据
messageText.value = ''
messages.value = []
chatFileList.value = []
getConversationList(row.id)
}
}
const closeChat = () => {
const closeChat = () => {
isDrawerVisible.value = false
}
//获取状态 下拉框 getStatus
const statusList = ref<any>()
const getstatusList = async () => {
}
//获取状态 下拉框 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 () => {
}
//获取工单分类
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>({
const fileList = ref<any[]>([])
const form = reactive<Order>({
id: '',
categorie_id: '',
content: '',
attachment: []
})
const pagination = reactive({
})
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
const paginationmsg = reactive({
})
const paginationmsg = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
// 表格数据
const tableData = ref<any[]>([])
})
// 表格数据
const tableData = ref<any[]>([])
// 表格实例引用
const tableRef = ref()
// 表格实例引用
const tableRef = ref()
onMounted(() => {
onMounted(() => {
getWorkList()
})
})
// 获取列表数据
const getWorkList = async () => {
// 获取列表数据
const getWorkList = async () => {
loading.value = true
try {
const { currentPage, pageSize } = pagination
@@ -388,11 +383,11 @@ const getWorkList = async () => {
} finally {
loading.value = false
}
}
}
//获取工单记录 getconversationList
const ticket_id =ref()
const getConversationList = async (id:any) => {
//获取工单记录 getconversationList
const ticket_id =ref()
const getConversationList = async (id:any) => {
loading.value = true
try {
const { currentPage, pageSize } = paginationmsg
@@ -411,9 +406,9 @@ const getConversationList = async (id:any) => {
} finally {
loading.value = false
}
}
// 发送工单记录消息
const sendMessage = async () => {
}
// 发送工单记录消息
const sendMessage = async () => {
const text = messageText.value.trim()
const ids = ticket_id.value
if (!text && chatFileList.value.length === 0) return
@@ -440,12 +435,12 @@ const sendMessage = async () => {
chatFileList.value = [] // 清空附件列表
getConversationList(ids)
scrollToBottom()
}
}
const dialogType = ref('add')
const dialogType = ref('add')
const showDialog = (type: string, row?: any) => {
const showDialog = (type: string, row?: any) => {
dialogVisible.value = true
dialogType.value = type
getcategorieSelectList()
@@ -471,20 +466,20 @@ const showDialog = (type: string, row?: any) => {
fileList.value = []
uploadedFiles.value = []
}
}
}
const statusform = reactive({
const statusform = reactive({
id: '',
status: '',
msg: ''
})
})
const statusEdit = (row: any) => {
const statusEdit = (row: any) => {
getstatusList()
dialogVisiblestatus.value = true
statusform.id = row.id
}
const deleteRole = () => {
}
const deleteRole = () => {
ElMessageBox.confirm('确定删除该角色吗？', '删除确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@@ -492,16 +487,16 @@ const deleteRole = () => {
}).then(() => {
ElMessage.success('删除成功')
})
}
const delCodeTrim = (content: string): string => {
}
const delCodeTrim = (content: string): string => {
return content.replace(/(\s*)<\/code>/g, '</code>')
}
//添加工单
const handleExceed = () => {
}
//添加工单
const handleExceed = () => {
ElMessage.warning('最多上传3个文件')
}
const uploadedFiles = ref<any[]>([])
const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
}
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
@@ -515,8 +510,8 @@ const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[])
return null
})
.filter(Boolean)
}
const handleSubmit = async (formEl: FormInstance | undefined) => {
}
const handleSubmit = async (formEl: FormInstance | undefined) => {
const { categorie_id} = form
editorHtml.value = delCodeTrim(editorHtml.value)
if(dialogType.value === 'add'){
@@ -541,19 +536,19 @@ const handleSubmit = async (formEl: FormInstance | undefined) => {
}
}
// 处理表格分页变化
const handleSizeChange = (newPageSize: number) => {
}
// 处理表格分页变化
const handleSizeChange = (newPageSize: number) => {
pagination.pageSize = newPageSize
getWorkList()
}
}
const handleCurrentChange = (newCurrentPage: number) => {
const handleCurrentChange = (newCurrentPage: number) => {
pagination.currentPage = newCurrentPage
getWorkList()
}
//修改状态
const statusSubmit = async () => {
}
//修改状态
const statusSubmit = async () => {
// loading.value = true
const { msg, status, id } = statusform
const { message } = await WorkService.Workstatus({
@@ -564,29 +559,29 @@ const statusSubmit = async () => {
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) {
// 图片预览相关
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) {
}
// 视频预览相关
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[]) => {
// 聊天相关
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) {
@@ -599,29 +594,29 @@ const handleChatUploadSuccess = (response: any, uploadFile: any, uploadFiles: an
}
return null
}).filter(Boolean)
}
const handleChatExceed = () => {
}
const handleChatExceed = () => {
ElMessage.warning('最多上传5个文件')
}
const removeChatFile = (index: number) => {
}
const removeChatFile = (index: number) => {
chatFileList.value.splice(index, 1)
}
const handleChatImageClick = (url: string) => {
}
const handleChatImageClick = (url: string) => {
// 设置聊天图片预览列表
chatImageList.value = [url]
imageViewerIndex.value = 0
imageViewerVisible.value = true
}
}
const closeImageViewer = () => {
const closeImageViewer = () => {
imageViewerVisible.value = false
chatImageList.value = [] // 清空聊天图片列表
}
const handleChatVideoClick = (url: string) => {
}
const handleChatVideoClick = (url: string) => {
currentVideoUrl.value = url
videoDialogVisible.value = true
}
const downloadAttachment = (attachment: any) => {
}
const downloadAttachment = (attachment: any) => {
try {
const fileName = attachment.original_name || 'download'
const link = document.createElement('a')
@@ -636,25 +631,25 @@ const downloadAttachment = (attachment: any) => {
ElMessage.error('下载失败')
console.error('下载失败:', error)
}
}
}
</script>
<style lang="scss" scoped>
:deep(.el-table__empty-block) {
:deep(.el-table__empty-block) {
height: 100% !important;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.multi-line-ellipsis {
.multi-line-ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.page-content {
}
.page-content {
.svg-icon {
width: 1.8em;
height: 1.8em;
@@ -662,9 +657,9 @@ const downloadAttachment = (attachment: any) => {
vertical-align: -8px;
fill: currentcolor;
}
}
}
.header {
.header {
display: flex;
align-items: center;
justify-content: space-between;
@@ -682,9 +677,9 @@ const downloadAttachment = (attachment: any) => {
cursor: pointer;
}
}
}
}
.chat-container {
.chat-container {
display: flex;
flex-direction: column;
height: calc(100% - 70px);
@@ -801,9 +796,9 @@ const downloadAttachment = (attachment: any) => {
}
}
}
}
}
.dark {
.dark {
.chat-container {
.chat-messages {
.message-item {
@@ -821,9 +816,9 @@ const downloadAttachment = (attachment: any) => {
}
}
}
}
}
.attachment-preview {
.attachment-preview {
margin-top: 12px;
.attachment-list {
display: flex;
@@ -862,16 +857,16 @@ const downloadAttachment = (attachment: any) => {
word-break: break-all;
margin-top: 2px;
}
}
}
// 聊天附件样式
.message-right .message-attachments{
// 聊天附件样式
.message-right .message-attachments{
text-align: right;
}
.message-left .message-attachments{
}
.message-left .message-attachments{
text-align: left;
}
.message-attachments {
}
.message-attachments {
margin-top: 8px;
.attachment-item {
@@ -912,9 +907,9 @@ const downloadAttachment = (attachment: any) => {
}
}
}
}
}
.chat-attachment-upload {
.chat-attachment-upload {
margin-bottom: 12px;
.chat-upload {
@@ -959,5 +954,5 @@ const downloadAttachment = (attachment: any) => {
}
}
}
}
}
</style>
src/views/work/type/index.vue
+1 -6
View File
@@ -1,6 +1,5 @@
<template>
<div class="page-content">
<div v-if="!isMobile">
<ElRow>
<!-- <ElCol :xs="24" :sm="12" :lg="6">
<ElInput placeholder="名称"></ElInput>
@@ -32,7 +31,7 @@
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="created_at" />
<ElTableColumn fixed="right" label="操作" width="200px">
<ElTableColumn fixed="right" label="操作" max-width="160px">
<template #default="scope">
<ElRow>
<el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
@@ -62,10 +61,6 @@
</template>
</ElDialog>
</div>
<div v-else class="mobile-hide-tip">
<p>该页面暂不支持移动端访问</p>
</div>
</div>
</template>
<script setup lang="ts">