fix: 优化图表组上传图片错误时等显示问题 (#18043)

core/core-frontend/src/api/staticResource.ts

@@ -33,9 +33,13 @@ export function uploadFileResult(file, callback) {
   const fileUrl = staticResourcePath + newFileName
   const param = new FormData()
   param.append('file', file)
-  return uploadFile(fileId, param).then(() => {
-    callback(fileUrl)
-  })
+  return uploadFile(fileId, param)
+    .then(() => {
+      callback(fileUrl, null)
+    })
+    .catch(error => {
+      callback(null, error)
+    })
 }
 
 export function findResourceAsBase64(params) {

core/core-frontend/src/custom-component/picture-group/Component.vue

@@ -232,7 +232,10 @@ const conditionAdaptor = (chart: Chart) => {
 const withInit = () => {
   if (element.value.propValue['urlList'] && element.value.propValue['urlList'].length > 0) {
     state.showUrl = element.value.propValue['urlList'][0].url
+  } else {
+    state.showUrl = null
   }
+
   initCarousel()
 }
 

core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue

@@ -4,7 +4,7 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 
 import { storeToRefs } from 'pinia'
 import { ElIcon, ElMessage } from 'element-plus-secondary'
-import { ref, onMounted, onBeforeUnmount, watch, PropType, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, PropType, computed, nextTick } from 'vue'
 import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
@@ -14,6 +14,9 @@ import { toRefs } from 'vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 const { t } = useI18n()
 
+let uploadCount = 0
+let totalUploads = 0
+
 const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
@@ -67,10 +70,33 @@ const handleRemove = (file, fileListArray) => {
 }
 async function upload(file) {
   if (element.value.propValue.urlList.length < 10) {
-    uploadFileResult(file.file, fileUrl => {
-      snapshotStore.recordSnapshotCache('pic-upload')
-      element.value.propValue.urlList.unshift({ name: file.file.name, url: fileUrl })
-      useEmitt().emitter.emit('calcData-' + element.value.id)
+    // 增加总任务数
+    totalUploads++
+
+    uploadFileResult(file.file, (fileUrl, error) => {
+      if (error) {
+        // 上传失败
+        console.error('上传失败:', error)
+      } else {
+        // 上传成功
+        snapshotStore.recordSnapshotCache('pic-upload')
+        element.value.propValue.urlList.unshift({ name: file.file.name, url: fileUrl })
+        useEmitt().emitter.emit('calcData-' + element.value.id)
+      }
+
+      // 无论成功失败，都增加完成计数
+      uploadCount++
+
+      // 检查是否所有上传都完成了
+      if (uploadCount === totalUploads) {
+        // 所有图片上传完成，刷新列表
+        nextTick(() => {
+          fileListInit()
+          // 重置计数器
+          uploadCount = 0
+          totalUploads = 0
+        })
+      }
     })
   }
 }
@@ -126,7 +152,7 @@ onBeforeUnmount(() => {
           accept=".jpeg,.jpg,.png,.gif,.svg"
           class="avatar-uploader"
           list-type="picture-card"
-          :class="{ disabled: uploadDisabled }"
+          :class="{ disabled: uploadDisabled || element.propValue.urlList.length >= 10 }"
           :on-preview="handlePictureCardPreview"
           :on-remove="handleRemove"
           :before-upload="beforeUploadCheck"
@@ -200,7 +226,7 @@ onBeforeUnmount(() => {
   }
 }
 
-.disabled :deep(.el-upload--picture-card) {
+.disabled :deep(.ed-upload) {
   display: none;
 }