工单去掉 移动端不显示限制
This commit is contained in:
浅念
+298
-303
@@ -1,318 +1,313 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div v-if="!isMobile">
|
<ElRow>
|
||||||
<ElRow>
|
<!-- <ElCol :xs="24" :sm="12" :lg="6">
|
||||||
<!-- <ElCol :xs="24" :sm="12" :lg="6">
|
<ElInput placeholder="工单编号"></ElInput>
|
||||||
<ElInput placeholder="工单编号"></ElInput>
|
</ElCol> -->
|
||||||
</ElCol> -->
|
<div style="width: 12px"></div>
|
||||||
<div style="width: 12px"></div>
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
||||||
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
<!-- <ElButton v-ripple>搜索</ElButton> -->
|
||||||
<!-- <ElButton v-ripple>搜索</ElButton> -->
|
<ElButton v-if="hasAuth('work_order_self@add')" @click="showDialog('add')" v-ripple>
|
||||||
<ElButton v-if="hasAuth('work_order_self@add')" @click="showDialog('add')" v-ripple>
|
新增
|
||||||
新增
|
</ElButton>
|
||||||
</ElButton>
|
</ElCol>
|
||||||
</ElCol>
|
</ElRow>
|
||||||
</ElRow>
|
|
||||||
|
|
||||||
<ArtTable
|
<ArtTable
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
:currentPage="pagination.currentPage"
|
:currentPage="pagination.currentPage"
|
||||||
:pageSize="pagination.pageSize"
|
:pageSize="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<ElTableColumn label="工单编号" prop="code" />
|
<ElTableColumn label="工单编号" prop="code" />
|
||||||
<ElTableColumn label="问题分类" prop="categorie_id">
|
<ElTableColumn label="问题分类" prop="categorie_id">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div v-html="scope.row.categorie ? scope.row.categorie.name : ''"></div>
|
<div v-html="scope.row.categorie ? scope.row.categorie.name : ''"></div>
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="问题描述" prop="content">
|
<ElTableColumn label="问题描述" prop="content" min-width="200px">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="multi-line-ellipsis" v-html="scope.row.content"></div>
|
<div class="multi-line-ellipsis" v-html="scope.row.content"></div>
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="状态" prop="status">
|
<ElTableColumn label="状态" prop="status">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<ElTag :type="scope.row.status == 1 ? 'info' : scope.row.status == 2 ?'primary' :scope.row.status == 4 ?'success' : 'danger'">
|
<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 == 1 ? '待受理' : scope.row.status == 2 ? '处理中' :
|
||||||
scope.row.status == 4 ? "已完成":'关闭' }}
|
scope.row.status == 4 ? "已完成":'关闭' }}
|
||||||
</ElTag>
|
</ElTag>
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="创建时间" prop="created_at" />
|
<ElTableColumn label="创建时间" prop="created_at" />
|
||||||
<ElTableColumn fixed="right" label="操作" width="240px">
|
<ElTableColumn fixed="right" label="操作" max-width="200px">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<ElRow>
|
<ElRow>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="scope.row.status == 1 && hasAuth('work_order_self@edit')"
|
v-if="scope.row.status == 1 && hasAuth('work_order_self@edit')"
|
||||||
link
|
link
|
||||||
@click="showDialog('edit', scope.row)"
|
@click="showDialog('edit', scope.row)"
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="hasAuth('work_order_self@status')"
|
|
||||||
link
|
|
||||||
@click="statusEdit(scope.row)"
|
|
||||||
>
|
|
||||||
状态编辑
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-if="hasAuth('work_order_self@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"
|
|
||||||
:headers="uploadHeaders"
|
|
||||||
multiple
|
|
||||||
:limit="3"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
>
|
|
||||||
<el-button type="primary" :disabled="fileList.length >= 3">上传附件</el-button>
|
|
||||||
</ElUpload>
|
|
||||||
<!-- <ElUpload
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
class="upload-demo"
|
|
||||||
:action="actionImageUplode"
|
|
||||||
:on-success="handleUploadSuccess"
|
|
||||||
:headers="uploadHeaders"
|
|
||||||
multiple
|
|
||||||
:limit="3"
|
|
||||||
>
|
|
||||||
<el-button type="primary">上传附件</el-button>
|
|
||||||
</ElUpload> -->
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="" prop="">
|
|
||||||
<!-- 附件预览区 -->
|
|
||||||
<div class="attachment-preview">
|
|
||||||
<div v-if="fileList.length" 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="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_self@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-button
|
||||||
</el-button>
|
v-if="hasAuth('work_order_self@status')"
|
||||||
</el-upload>
|
link
|
||||||
<!-- 已上传附件预览 -->
|
@click="statusEdit(scope.row)"
|
||||||
<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)">
|
</el-button>
|
||||||
<img
|
<el-button
|
||||||
:src="file.file_url || file.response?.data?.file_url"
|
v-if="hasAuth('work_order_self@conversation_list')"
|
||||||
:alt="file.name"
|
link
|
||||||
class="preview-thumb"
|
@click="openChat(scope.row)"
|
||||||
/>
|
>
|
||||||
</template>
|
查看/回复
|
||||||
<template v-else>
|
</el-button>
|
||||||
<el-icon class="file-icon"><Document /></el-icon>
|
<!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
|
||||||
</template>
|
</ElRow>
|
||||||
<span class="file-name">{{ file.name }}</span>
|
</template>
|
||||||
<el-button
|
</ElTableColumn>
|
||||||
type="danger"
|
</template>
|
||||||
size="small"
|
</ArtTable>
|
||||||
link
|
|
||||||
@click="removeChatFile(idx)"
|
<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"
|
||||||
|
:headers="uploadHeaders"
|
||||||
|
multiple
|
||||||
|
:limit="3"
|
||||||
|
:on-exceed="handleExceed"
|
||||||
|
>
|
||||||
|
<el-button type="primary" :disabled="fileList.length >= 3">上传附件</el-button>
|
||||||
|
</ElUpload>
|
||||||
|
<!-- <ElUpload
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
class="upload-demo"
|
||||||
|
:action="actionImageUplode"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
:headers="uploadHeaders"
|
||||||
|
multiple
|
||||||
|
:limit="3"
|
||||||
|
>
|
||||||
|
<el-button type="primary">上传附件</el-button>
|
||||||
|
</ElUpload> -->
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="" prop="">
|
||||||
|
<!-- 附件预览区 -->
|
||||||
|
<div class="attachment-preview">
|
||||||
|
<div v-if="fileList.length" 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
|
||||||
>
|
>
|
||||||
<el-icon><Close /></el-icon>
|
</template>
|
||||||
</el-button>
|
<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="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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
|
</template>
|
||||||
@keyup.enter.prevent="sendMessage" />
|
</div>
|
||||||
<ElInput v-model="ticket_id" type="hidden" />
|
<div class="chat-input" v-if="hasAuth('work_order_self@conversation_add')">
|
||||||
<div class="chat-input-actions">
|
<!-- 附件上传区域 -->
|
||||||
<el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
<el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
|
||||||
</div>
|
@keyup.enter.prevent="sendMessage" />
|
||||||
</el-drawer>
|
<ElInput v-model="ticket_id" type="hidden" />
|
||||||
|
<div class="chat-input-actions">
|
||||||
<ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
|
<el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</ElDialog>
|
|
||||||
|
|
||||||
<!-- 图片预览弹窗 -->
|
</div>
|
||||||
<ElImageViewer v-if="imageViewerVisible" :url-list="chatImageList.length > 0 ? chatImageList : imageList" :initial-index="imageViewerIndex" @close="closeImageViewer" />
|
</el-drawer>
|
||||||
<!-- 视频预览弹窗 -->
|
|
||||||
<ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
|
<ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
|
||||||
<video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
|
<ElForm ref="formRef" :model="statusform" label-width="120px">
|
||||||
</ElDialog>
|
<ElFormItem label="状态" prop="status">
|
||||||
</div>
|
<ElSelect v-model="statusform.status">
|
||||||
<div v-else class="mobile-hide-tip">
|
<ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" />
|
||||||
<p>该页面暂不支持移动端访问</p>
|
</ElSelect>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
+880
-885
File diff suppressed because it is too large
Load Diff
@@ -1,70 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div v-if="!isMobile">
|
<ElRow>
|
||||||
<ElRow>
|
<!-- <ElCol :xs="24" :sm="12" :lg="6">
|
||||||
<!-- <ElCol :xs="24" :sm="12" :lg="6">
|
<ElInput placeholder="名称"></ElInput>
|
||||||
<ElInput placeholder="名称"></ElInput>
|
</ElCol> -->
|
||||||
</ElCol> -->
|
<div style="width: 12px"></div>
|
||||||
<div style="width: 12px"></div>
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
||||||
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
<!-- <ElButton v-ripple>搜索</ElButton> -->
|
||||||
<!-- <ElButton v-ripple>搜索</ElButton> -->
|
<ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
|
||||||
<ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
|
</ElCol>
|
||||||
</ElCol>
|
</ElRow>
|
||||||
</ElRow>
|
|
||||||
|
|
||||||
<ArtTable
|
<ArtTable
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
:currentPage="pagination.currentPage"
|
:currentPage="pagination.currentPage"
|
||||||
:pageSize="pagination.pageSize"
|
:pageSize="pagination.pageSize"
|
||||||
:total="pagination.total"
|
:total="pagination.total"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<ElTableColumn label="ID" prop="id" />
|
<ElTableColumn label="ID" prop="id" />
|
||||||
<ElTableColumn label="分类名称" prop="name" />
|
<ElTableColumn label="分类名称" prop="name" />
|
||||||
<ElTableColumn label="状态" prop="status">
|
<ElTableColumn label="状态" prop="status">
|
||||||
|
<template #default="scope">
|
||||||
|
<ElTag :type="scope.row.status ? 'primary' : 'info'">
|
||||||
|
{{ scope.row.status ? '启用' : '禁用' }}
|
||||||
|
</ElTag>
|
||||||
|
</template>
|
||||||
|
</ElTableColumn>
|
||||||
|
<ElTableColumn label="创建时间" prop="created_at" />
|
||||||
|
<ElTableColumn fixed="right" label="操作" max-width="160px">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<ElTag :type="scope.row.status ? 'primary' : 'info'">
|
<ElRow>
|
||||||
{{ scope.row.status ? '启用' : '禁用' }}
|
<el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
|
||||||
</ElTag>
|
<el-button link @click="deleteRole(scope.row)"> 删除 </el-button>
|
||||||
|
</ElRow>
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="创建时间" prop="created_at" />
|
</template>
|
||||||
<ElTableColumn fixed="right" label="操作" width="200px">
|
</ArtTable>
|
||||||
<template #default="scope">
|
|
||||||
<ElRow>
|
|
||||||
<el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
|
|
||||||
<el-button link @click="deleteRole(scope.row)"> 删除 </el-button>
|
|
||||||
</ElRow>
|
|
||||||
</template>
|
|
||||||
</ElTableColumn>
|
|
||||||
</template>
|
|
||||||
</ArtTable>
|
|
||||||
|
|
||||||
<ElDialog
|
<ElDialog
|
||||||
v-model="dialogVisible"
|
v-model="dialogVisible"
|
||||||
:title="dialogType === 'add' ? '新增' : '编辑'"
|
:title="dialogType === 'add' ? '新增' : '编辑'"
|
||||||
width="40%"
|
width="40%"
|
||||||
align-center
|
align-center
|
||||||
>
|
>
|
||||||
<ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
|
<ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
|
||||||
<ElFormItem label="分类名称" prop="name">
|
<ElFormItem label="分类名称" prop="name">
|
||||||
<ElInput v-model="form.name" />
|
<ElInput v-model="form.name" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElForm>
|
</ElForm>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<ElButton @click="dialogVisible = false">取消</ElButton>
|
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||||||
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</ElDialog>
|
</ElDialog>
|
||||||
</div>
|
|
||||||
<div v-else class="mobile-hide-tip">
|
|
||||||
<p>该页面暂不支持移动端访问</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user