From 635a231af32a829b00c22f92f62143560d7a1adf Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Wed, 23 Apr 2025 18:03:18 +0800
Subject: [PATCH] 图片上传优化
---
src/views/tickets/ticket.vue | 88 +++++++++++++++++++++++++++++++++++++++-----
1 files changed, 78 insertions(+), 10 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index a0f80b5..023b750 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -131,11 +131,20 @@
</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="uploader">
- <span
- style="font-size: 32px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">+</span>
+ <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>
</el-upload>
<div class="upload-tip">支持jpg/png格式图片，单张不超过5MB</div>
</el-form-item>
@@ -273,11 +282,21 @@
<!-- 上传图片 -->
<div v-if="[3, 4].includes(currentDetail.status)" class="form-section" style="margin-bottom: 32px;">
<div class="section-title" v-if="hasProcessedAndOverBtnPermission()">上传图片</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="[]" :limit="1" accept="image/*">
- <span
- style="font-size: 32px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">+</span>
+ <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>
+ </template>
</el-upload>
<div class="el-upload__tip" style="margin-top: 12px;" v-if="hasProcessedAndOverBtnPermission()">
（上传照片即可完结工单，只能上传jpg、jpeg、png照片,且不超过5M）
@@ -2723,4 +2742,53 @@
}
}
}
+
+/* 新建工单和处理工单的上传组件样式 */
+.create-upload,
+.detail-upload {
+ :deep(.el-upload--picture-card) {
+ width: 120px;
+ 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;
+ }
+
+ /* 上传组件的预览图片样式 */
+ :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;
+ }
+ }
+}
+
+/* 原有图片预览的样式 */
+.el-image-viewer__wrapper {
+ :deep(.el-image-viewer__img) {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3