工单去掉 移动端不显示限制
This commit is contained in:
浅念
+298
-303
@@ -1,318 +1,313 @@
|
||||
<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_self@add')" @click="showDialog('add')" v-ripple>
|
||||
新增
|
||||
</ElButton>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<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_self@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_self@edit')"
|
||||
link
|
||||
@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"
|
||||
<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_self@edit')"
|
||||
link
|
||||
@click="showDialog('edit', scope.row)"
|
||||
>
|
||||
<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-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
|
||||
>
|
||||
<el-icon><Close /></el-icon>
|
||||
</el-button>
|
||||
</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>
|
||||
<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>
|
||||
</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-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>
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</div>
|
||||
|
||||
<!-- 图片预览弹窗 -->
|
||||
<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 v-else class="mobile-hide-tip">
|
||||
<p>该页面暂不支持移动端访问</p>
|
||||
</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>
|
||||
|
||||
|
||||
+878
-883
File diff suppressed because it is too large
Load Diff
@@ -1,70 +1,65 @@
|
||||
<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 @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"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn label="ID" prop="id" />
|
||||
<ElTableColumn label="分类名称" prop="name" />
|
||||
<ElTableColumn label="状态" prop="status">
|
||||
<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 @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"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn label="ID" prop="id" />
|
||||
<ElTableColumn label="分类名称" prop="name" />
|
||||
<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">
|
||||
<ElTag :type="scope.row.status ? 'primary' : 'info'">
|
||||
{{ scope.row.status ? '启用' : '禁用' }}
|
||||
</ElTag>
|
||||
<ElRow>
|
||||
<el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
|
||||
<el-button link @click="deleteRole(scope.row)"> 删除 </el-button>
|
||||
</ElRow>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="创建时间" prop="created_at" />
|
||||
<ElTableColumn fixed="right" label="操作" width="200px">
|
||||
<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
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增' : '编辑'"
|
||||
width="40%"
|
||||
align-center
|
||||
>
|
||||
<ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
|
||||
<ElFormItem label="分类名称" prop="name">
|
||||
<ElInput v-model="form.name" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||||
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</div>
|
||||
<div v-else class="mobile-hide-tip">
|
||||
<p>该页面暂不支持移动端访问</p>
|
||||
</div>
|
||||
</template>
|
||||
</ArtTable>
|
||||
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增' : '编辑'"
|
||||
width="40%"
|
||||
align-center
|
||||
>
|
||||
<ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
|
||||
<ElFormItem label="分类名称" prop="name">
|
||||
<ElInput v-model="form.name" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||||
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user