From 9dcad0c65f2564fc2fe43e21b23f9faf4a073d30 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期二, 28 四月 2026 13:49:47 +0800
Subject: [PATCH] fix: 修复多个页面样式、交互及路由问题
---
laboratory/src/components/DynamicComponent/index.vue | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 113 insertions(+), 7 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/index.vue b/laboratory/src/components/DynamicComponent/index.vue
index 54bfc79..90434d7 100644
--- a/laboratory/src/components/DynamicComponent/index.vue
+++ b/laboratory/src/components/DynamicComponent/index.vue
@@ -128,6 +128,10 @@
(res, file, fileList) =>
handleFileSuccess(res, file, fileList, idx)
"
+ :on-error="
+ (err, file, fileList) =>
+ handleFileError(err, file, fileList, idx)
+ "
list-type="text"
>
<el-button size="small" icon="el-icon-upload2">点击上传</el-button>
@@ -159,11 +163,16 @@
(res, file, fileList) =>
handleImageSuccess(res, file, fileList, idx)
"
+ :on-error="
+ (err, file, fileList) =>
+ handleImageError(err, file, fileList, idx)
+ "
:auto-upload="true"
:before-upload="beforeImageUpload"
list-type="picture-card"
:on-preview="(file) => handlePreview(file, idx)"
class="image-uploader"
+ accept="image/*"
>
<i class="el-icon-plus"></i>
<div class="upload-text">上传图片</div>
@@ -179,7 +188,7 @@
class="preview-image"
/>
</div>
- <div class="uploaf-notice">支持.jpg .png格式</div>
+ <div class="uploaf-notice">支持任意图片格式上传</div>
</div>
</div>
<img
@@ -340,6 +349,17 @@
methods: {
getFullUrl,
downloadFileByUrl,
+ removeUploadItem(fileList, file) {
+ const list = Array.isArray(fileList) ? fileList : [];
+ const nextList = list.filter((item) => item.uid !== file.uid);
+ const removeIndex = list.findIndex((item) => item.uid === file.uid);
+
+ if (removeIndex > -1) {
+ list.splice(removeIndex, 1);
+ }
+
+ return nextList;
+ },
getUserDisplayText(fieldName, rowData) {
// 检查是否有对应的userInfo数据
const userInfoKey = `${fieldName}_userInfo`;
@@ -582,9 +602,52 @@
this.emitUpdate();
},
handleFileSuccess(res, file, fileList, idx) {
+ if (!res || (res.code !== 200 && res.code !== "200") || !res.msg) {
+ const errorMessage =
+ (res && (res.msg || res.message)) || "文件上传失败";
+ this.$message.error(errorMessage);
+ file.status = "fail";
+ file.url = "";
+ this.components[idx].data.fileList = this.removeUploadItem(
+ fileList,
+ file
+ );
+ this.emitUpdate();
+ return;
+ }
+
// 上传成功后设置真实 url
file.url = this.getFullUrl(res.msg);
this.components[idx].data.fileList = fileList;
+ this.emitUpdate();
+ },
+ handleFileError(err, file, fileList, idx) {
+ let errorMessage = "文件上传失败";
+ const rawMessage =
+ (err &&
+ (err.message ||
+ err.response ||
+ err.responseText ||
+ (err.target && err.target.response))) ||
+ "";
+
+ if (typeof rawMessage === "string" && rawMessage) {
+ try {
+ const parsedMessage = JSON.parse(rawMessage);
+ errorMessage =
+ parsedMessage.msg || parsedMessage.message || errorMessage;
+ } catch (e) {
+ errorMessage = rawMessage;
+ }
+ }
+
+ this.$message.error(errorMessage);
+ file.status = "fail";
+ file.url = "";
+ this.components[idx].data.fileList = this.removeUploadItem(
+ (fileList || []).filter((item) => item.status !== "fail"),
+ file
+ );
this.emitUpdate();
},
handleImageChange(idx, fileList) {
@@ -594,18 +657,61 @@
this.emitUpdate();
},
handleImageSuccess(res, file, fileList, idx) {
+ if (!res || (res.code !== 200 && res.code !== "200") || !res.msg) {
+ const errorMessage =
+ (res && (res.msg || res.message)) || "图片上传失败";
+ this.$message.error(errorMessage);
+ file.status = "fail";
+ file.url = "";
+ this.components[idx].data.imageList = this.removeUploadItem(
+ fileList,
+ file
+ );
+ this.emitUpdate();
+ return;
+ }
+
// 上传成功后设置真实 url
file.url = this.getFullUrl(res.msg);
this.components[idx].data.imageList = fileList;
this.emitUpdate();
},
- beforeImageUpload(file) {
- const isJPG = file.type === "image/jpeg";
- const isPNG = file.type === "image/png";
- // const isLt2M = file.size / 1024 / 1024 < 2;
+ handleImageError(err, file, fileList, idx) {
+ let errorMessage = "图片上传失败";
+ const rawMessage =
+ (err &&
+ (err.message ||
+ err.response ||
+ err.responseText ||
+ (err.target && err.target.response))) ||
+ "";
- if (!isJPG && !isPNG) {
- this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
+ if (typeof rawMessage === "string" && rawMessage) {
+ try {
+ const parsedMessage = JSON.parse(rawMessage);
+ errorMessage =
+ parsedMessage.msg || parsedMessage.message || errorMessage;
+ } catch (e) {
+ errorMessage = rawMessage;
+ }
+ }
+
+ this.$message.error(errorMessage);
+ file.status = "fail";
+ file.url = "";
+ this.components[idx].data.imageList = this.removeUploadItem(
+ (fileList || []).filter((item) => item.status !== "fail"),
+ file
+ );
+ this.emitUpdate();
+ },
+ beforeImageUpload(file) {
+ const isImage =
+ (file.type && file.type.startsWith("image/")) ||
+ /\.(png|jpe?g|gif|bmp|webp|svg|ico|tiff?)$/i.test(file.name || "");
+
+ if (!isImage) {
+ this.$message.error("只能上传图片类型文件");
return false;
}
// if (!isLt2M) {
--
Gitblit v1.7.1