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

src/views/work/myOrder/index.vue

@@ -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

@@ -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 { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
+  import type { FormInstance } from 'element-plus'
-import { Order } from '@/mock/temp/formData'
+  import { Order } from '@/mock/temp/formData'
-import { WorkService } from '@/api/workApi'
+  import { WorkService } from '@/api/workApi'
-import { ElImageViewer } from 'element-plus'
+  import { ElImageViewer } from 'element-plus'
-import { useAuth } from "@/composables/useAuth";
+  import { useAuth } from "@/composables/useAuth";
-import { useUserStore } from '@/store/modules/user'
+  import { useUserStore } from '@/store/modules/user'
-import { useUploadHeaders } from '@/composables/useUploadHeaders'
+  import { useUploadHeaders } from '@/composables/useUploadHeaders'
-import { Paperclip, Document, Close } from '@element-plus/icons-vue'
+  import { Paperclip, Document, Close } from '@element-plus/icons-vue'
-const { uploadHeaders } = useUploadHeaders()
+  const { uploadHeaders } = useUploadHeaders()
-const { hasAuth } = useAuth();
+  const { hasAuth } = useAuth();
-defineOptions({ name: 'Order' })
+  defineOptions({ name: 'Order' })
-let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
+  let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
-const loading = ref(false)
+  const loading = ref(false)
-const editorHtml = ref('') // 编辑器内容
+  const editorHtml = ref('') // 编辑器内容
-const dialogVisible = ref(false)
+  const dialogVisible = ref(false)
-const dialogVisiblestatus = ref(false)
+  const dialogVisiblestatus = ref(false)
-const typeList = ref<any[]>([])
+  const typeList = ref<any[]>([])
-const formRef = ref<FormInstance>()
+  const formRef = ref<FormInstance>()
-const { width } = useWindowSize()
+  const { width } = useWindowSize()
-const isMobile = computed(() => width.value < 500)
+  const isMobile = computed(() => width.value < 500)
-// 抽屉显示状态
+  // 抽屉显示状态
-const isDrawerVisible = ref(false)
+  const isDrawerVisible = ref(false)
-const { info } = useUserStore()
+  const { info } = useUserStore()
-const userid = info.user.id
+  const userid = info.user.id
-console.log(userid)
+  console.log(userid)
-import meAvatar from '@/assets/img/avatar/avatar5.webp'
+  import meAvatar from '@/assets/img/avatar/avatar5.webp'
-import aiAvatar from '@/assets/img/avatar/avatar10.webp'
+  import aiAvatar from '@/assets/img/avatar/avatar10.webp'
 
 
-// 消息相关数据
+  // 消息相关数据
-const messages = ref<any[]>([])
+  const messages = ref<any[]>([])
-const messageText = ref('')
+  const messageText = ref('')
-// 滚动到底部
+  // 滚动到底部
-const messageContainer = ref<HTMLElement | null>(null)
+  const messageContainer = ref<HTMLElement | null>(null)
-const scrollToBottom = () => {
+  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
+  //获取状态 下拉框 getStatus
-const statusList = ref<any>()
+  const statusList = ref<any>()
-const getstatusList = async () => {
+  const getstatusList = async () => {
     try {
       // 这里调用获取品牌列表的接口
       const response = await WorkService.getStatus({})
       statusList.value = response || []
     } catch (error) { }
-}
+  }
-//获取工单分类
+  //获取工单分类
-const categorieSelectList = ref<any>()
+  const categorieSelectList = ref<any>()
-const getcategorieSelectList = async () => {
+  const getcategorieSelectList = async () => {
     try {
       // 这里调用获取品牌列表的接口
       const response = await WorkService.getcategorieselect()
       categorieSelectList.value = response || []
     } catch (error) { }
-}
+  }
 
 
 
-const fileList = ref<any[]>([])
+  const fileList = ref<any[]>([])
-const form = reactive<Order>({
+  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
+  //获取工单记录 getconversationList
-const ticket_id =ref()
+  const ticket_id =ref()
-const getConversationList = async (id:any) => {
+  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 uploadedFiles = ref<any[]>([])
-const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: 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 imageViewerVisible = ref(false)
-const imageViewerIndex = ref(0)
+  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 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[]>([])
+  const chatImageList = ref<string[]>([])
-function handleImageClick(idx: number) {
+  function handleImageClick(idx: number) {
     imageViewerIndex.value = idx
     imageViewerVisible.value = true
-}
+  }
-// 视频预览相关
+  // 视频预览相关
-const videoDialogVisible = ref(false)
+  const videoDialogVisible = ref(false)
-const currentVideoUrl = ref('')
+  const currentVideoUrl = ref('')
-function handleVideoClick(url: string) {
+  function handleVideoClick(url: string) {
     currentVideoUrl.value = url
     videoDialogVisible.value = true
-}
+  }
 
-// 聊天相关
+  // 聊天相关
-const chatFileList = ref<any[]>([])
+  const chatFileList = ref<any[]>([])
-const handleChatUploadSuccess = (response: any, uploadFile: any, uploadFiles: 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 +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">