From 52400689983bf1240a6bca88236d99191d7e6056 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 28 Apr 2025 18:36:51 +0800
Subject: [PATCH] 事件工单详情图片和地图显示异常处理
---
src/views/tickets/ticket.vue | 138 ++++++++++++++++++++--------------------------
1 files changed, 60 insertions(+), 78 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index dedec26..a3503ac 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -50,10 +50,10 @@
</template>
</template>
<template #status="{ row }">
- <span :style="getStatusTagType(row.status) ? 'color:' + getStatusTagType(row.status) : ''">
- {{ mapStatus(row.status) }}
- </span>
-</template>
+ <span :style="getStatusTagType(row.status) ? 'color:' + getStatusTagType(row.status) : ''">
+ {{ mapStatus(row.status) }}
+ </span>
+ </template>
<template #keyData="{ row }">
<span>{{ row.address }}</span>
</template>
@@ -133,17 +133,9 @@
</el-col>
<el-col :span="12">
<el-form-item label="附件图片" prop="photos" required class="upload-wrapper">
- <el-upload ref="upload"
- :action="'#'"
- :auto-upload="false"
- list-type="picture-card"
- :on-change="handleFileChange"
- :on-remove="handleUploadRemove"
- :before-upload="beforeUpload"
- :file-list="form.photos"
- :limit="1"
- accept="image/*"
- class="create-upload">
+ <el-upload ref="upload" :action="'#'" :auto-upload="false" list-type="picture-card"
+ :on-change="handleFileChange" :on-remove="handleUploadRemove" :before-upload="beforeUpload"
+ :file-list="form.photos" :limit="1" accept="image/*" class="create-upload">
<template v-if="form.photos.length < 1">
<i class="el-icon-plus">+</i>
</template>
@@ -244,7 +236,8 @@
<el-table-column prop="label2" label="基本信息" width="150">
<template #default="{ row }">
<!-- 添加必填星号的标签 -->
- <span v-if="currentDetail.status === 0 && (row.label2 === '工单类型' || row.label2 === '工单内容')" class="required-label">
+ <span v-if="currentDetail.status === 0 && (row.label2 === '工单类型' || row.label2 === '工单内容')"
+ class="required-label">
<span class="required-star">*</span>{{ row.label2 }}
</span>
<span v-else>{{ row.label2 }}</span>
@@ -259,7 +252,8 @@
</el-select>
</template>
<template v-else-if="currentDetail.status === 0 && row.label2 === '工单内容' && hasProcessingBtnPermission()">
- <el-input type="textarea" v-model="currentDetail.content" placeholder="请输入工单内容" class="required-input" />
+ <el-input type="textarea" v-model="currentDetail.content" placeholder="请输入工单内容"
+ class="required-input" />
</template>
<template v-else>{{ row.value2 }}</template>
</template>
@@ -305,17 +299,9 @@
上传图片
</template>
</div>
- <el-upload v-if="hasProcessedAndOverBtnPermission()"
- ref="upload"
- :action="'#'"
- :auto-upload="false"
- list-type="picture-card"
- :on-change="handleFileChange"
- :on-remove="handleUploadRemove"
- :before-upload="beforeUpload"
- :file-list="currentDetail.photos || []"
- :limit="1"
- accept="image/*"
+ <el-upload v-if="hasProcessedAndOverBtnPermission()" ref="upload" :action="'#'" :auto-upload="false"
+ list-type="picture-card" :on-change="handleFileChange" :on-remove="handleUploadRemove"
+ :before-upload="beforeUpload" :file-list="currentDetail.photos || []" :limit="1" accept="image/*"
class="detail-upload">
<template v-if="!currentDetail.photos || currentDetail.photos.length < 1">
<i class="el-icon-plus">+</i>
@@ -360,8 +346,7 @@
<div class="media-title">工单处理图片</div>
<div class="media-content">
<el-image v-if="currentDetail.updatePhotoUrl" :src="getThumbUrl(currentDetail.updatePhotoUrl)"
- :preview-src-list="[getPreviewUrl(currentDetail.updatePhotoUrl)]" fit="fill"
- style="width: 700px; height: 520px; cursor: pointer;">
+ :preview-src-list="[getPreviewUrl(currentDetail.updatePhotoUrl)]" fit="fill">
<template #placeholder>
<div class="image-placeholder">
<i class="el-icon-picture-outline"></i>
@@ -381,9 +366,7 @@
<template v-else>
<div class="media-title">地图标记事件点</div>
<div class="media-content">
- <div id="map-container" style="width: 700px; height: 520px; background: #f5f5f5;">
- <map-container v-if='detailVisible' ref="MapContainer"></map-container>
- </div>
+ <map-container v-if='detailVisible' ref="MapContainer"></map-container>
</div>
</template>
</div>
@@ -449,7 +432,8 @@
</el-dialog>
<!-- 添加在其他 dialog 组件之后 -->
- <el-dialog v-model="reviewDialogVisible" title="批量审核" width="70%" append-to-body custom-class="review-dialog" @close="cancleBatchReject">
+ <el-dialog v-model="reviewDialogVisible" title="批量审核" width="70%" append-to-body custom-class="review-dialog"
+ @close="cancleBatchReject">
<div class="review-container">
<div class="review-image-wrapper">
<!-- 修改左右箭头的显示条件 -->
@@ -1207,18 +1191,18 @@
},
getStatusTagType(status) {
- // 草稿不加颜色
- if (status === -1 || status === "-1") return '';
- // 状态颜色映射
- const colorMap = {
- "0": "#ffb6b6", // 待处理-淡红
- "3": "#e57373", // 处理中-更淡红
- "2": "#faad14", // 待审核-橙色
- "4": "#a0cfff", // 已完成-淡蓝
- "5": "#67c23a", // 已完结-绿色
- };
- return colorMap[String(status)] || '';
-},
+ // 草稿不加颜色
+ if (status === -1 || status === "-1") return '';
+ // 状态颜色映射
+ const colorMap = {
+ "0": "#ffb6b6", // 待处理-淡红
+ "3": "#e57373", // 处理中-更淡红
+ "2": "#faad14", // 待审核-橙色
+ "4": "#a0cfff", // 已完成-淡蓝
+ "5": "#67c23a", // 已完结-绿色
+ };
+ return colorMap[String(status)] || '';
+ },
async fetchTabCounts() {
try {
@@ -1689,7 +1673,7 @@
},
async approveAndDispatch() {
if (this.dispatchLoading) return;
-
+
// 添加必填项检查
if (!this.currentDetail.orderName || !this.currentDetail.orderName.trim()) {
this.$message.warning('请填写工单名称');
@@ -1703,7 +1687,7 @@
this.$message.warning('请填写工单内容');
return;
}
-
+
// 通过验证后,打开派发对话框
this.dispatchDialogVisible = true;
},
@@ -2058,10 +2042,10 @@
cancleBatchReject() {
this.reviewDialogVisible = false;
- this.selections = [];
- this.currentImageIndex = 1;
- this.currentReviewImage = '';
- this.fetchTableData();
+ this.selections = [];
+ this.currentImageIndex = 1;
+ this.currentReviewImage = '';
+ this.fetchTableData();
},
// 批量审核不通过
async handleBatchReject() {
@@ -2517,20 +2501,32 @@
}
.media-box {
+ width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 10px;
background: #fff;
-}
+ box-sizing: border-box;
-.media-title {
- font-weight: bold;
- margin-bottom: 10px;
-}
+ .media-title {
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
-.media-content {
- position: relative;
- // height: 300px;
+ .media-content {
+ position: relative;
+ height: 500px;
+
+ :deep(.el-image) {
+ width: 100% !important;
+
+ .el-image__inner {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+ }
}
.image-placeholder,
@@ -2804,12 +2800,12 @@
height: 100px;
line-height: 100px;
}
-
+
/* 隐藏额外的上传按钮 */
:deep(.el-upload.el-upload--picture-card) {
display: none;
}
-
+
/* 当没有图片时显示上传按钮 */
:deep(.el-upload.el-upload--picture-card:first-child) {
display: flex;
@@ -2819,20 +2815,6 @@
:deep(.el-upload-list--picture-card .el-upload-list__item) {
width: 120px;
height: 100px;
- }
-}
-
-/* 事件图片和处理图片的预览样式 */
-.media-content {
- :deep(.el-image) {
- width: 700px !important;
- height: 520px !important;
-
- .el-image__inner {
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
}
}
@@ -2849,7 +2831,7 @@
.required-label {
position: relative;
display: inline-block;
-
+
.required-star {
color: #F56C6C;
margin-right: 4px;
@@ -2859,7 +2841,7 @@
/* 必填输入框样式 */
.required-input {
width: 100%;
-
+
:deep(.el-input__inner),
:deep(.el-textarea__inner) {
&:focus {
--
Gitblit v1.9.3