art-design/src/views/work/order/index.vue

<template>
  <div class="page-content">
    <div v-if="!isMobile">
      <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">
            <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="操作" width="240px">
            <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="160px">
          <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"
              multiple 
              :limit="3">
              <el-button type="primary">Click to upload</el-button>
            </ElUpload>
            <!-- 附件预览区 -->
            <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']">
                <el-avatar :size="32" :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar" class="message-avatar" />
                <div class="message-content">
                  <div class="message-info">
                    <span class="sender-name">{{ message.user_id }}</span>
                    <span class="message-time">{{ message.updated_at }}</span>
                  </div>
                  <div class="message-text">{{ message.content }}</div>
                </div>
              </div>
            </template>
          </div>
          <div class="chat-input"  v-if="hasAuth('work_order@conversation_add')">
            <el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
              @keyup.enter.prevent="sendMessage" />
            <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="imageList" :initial-index="imageViewerIndex" @close="imageViewerVisible = false" />
      <!-- 视频预览弹窗 -->
      <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>
    <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'
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 = () => {
  setTimeout(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight
    }
  }, 100)
}
const openChat = (row: any) => {
  isDrawerVisible.value = true
  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) return
  
  const { message } = await WorkService.conversationAdd({
    content: text,
    ticket_id: ids,
  })
  ElMessage.success(message)
  messageText.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 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))
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
}
</script>

<style lang="scss" scoped>
.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;
          }

          .message-text {
            background-color: #f8f5ff;
          }
        }
      }

      &.message-right {
        flex-direction: row-reverse;

        .message-content {
          align-items: flex-end;

          .message-info {
            flex-direction: row-reverse;
          }

          .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;
        }
      }
    }
  }

  .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;
  }
}
</style>