Просмотр исходного кода

feat(tournaments): 优化图片上传与显示逻辑

- 移除文件上传组件的 limit 属性限制
- 新增 multiple-limit 属性控制多选数量
- 完善图片回显逻辑,支持编辑时展示已上传图片
- 优化删除逻辑,同步清空表单数据中的图片链接
- 添加文件列表清空逻辑,避免数据残留
- 统一处理竞赛图标和背景图的上传回显流程
fugui001 4 дней назад
Родитель
Сommit
540a7ee6ee

+ 12 - 0
src/views/system/business/catory/index.vue

@@ -251,6 +251,17 @@ const handleUpdate = async (row?: TagVO) => {
   if (form.value.iconUrl) {
     iconPreviewUrl.value = form.value.iconUrl;
   }
+  // 如果有图片URL,创建虚拟文件对象以便显示
+  if (res.data.iconUrl) {
+    fileList.value = [
+      {
+        name: '已上传图片',
+        url: res.data.iconUrl,
+        status: 'success'
+      }
+    ];
+  }
+
   dialog.visible = true;
   dialog.title = '修改类目';
 };
@@ -343,6 +354,7 @@ const handleIconRemove = (file, updatedFileList) => {
   fileList.value = updatedFileList;
   iconPreviewUrl.value = '';
   form.value.iconUrl = '';
+  data.form.iconUrl = null;
 };
 
 /** 点击预览图触发放大 */

+ 32 - 3
src/views/system/business/tournaments/index.vue

@@ -188,7 +188,6 @@
           </template>
         </el-table-column>
 
-
         <!--        <el-table-column label="是否删除" align="center">
           <template #default="scope">
             <span
@@ -320,7 +319,6 @@
               :on-remove="handleIconRemove"
               :file-list="fileList"
               :auto-upload="false"
-              :limit="1"
               accept="image/*"
               :disabled="dialog.mode === 'view'"
             >
@@ -369,7 +367,6 @@
               :on-remove="handleIconRemove2"
               :file-list="fileList2"
               :auto-upload="false"
-              :limit="1"
               accept="image/*"
               :disabled="dialog.mode === 'view'"
             >
@@ -411,6 +408,7 @@
               multiple
               collapse-tags
               collapse-tags-tooltip
+              :multiple-limit="1"
             >
               <el-option v-for="item in itemOptionsTagList" :key="item.id" :label="item.label" :value="item.id" />
             </el-select>
@@ -425,6 +423,7 @@
               style="width: 200px"
               :disabled="dialog.mode === 'view'"
               multiple
+              :multiple-limit="1"
               collapse-tags
               collapse-tags-tooltip
             >
@@ -1269,6 +1268,32 @@ const handleUpdate = async (row?: TournamentsVO, mode: 'edit' | 'view' = 'edit')
   form.value.gameType = String(res.data.gameType); // 转为字符串
   competitionIcon.value = res.data.competitionIcon;
   competitionBg.value = res.data.competitionBg;
+
+  // 清空文件列表,避免残留
+  fileList.value = [];
+  fileList2.value = [];
+
+  // 如果有图片URL,创建虚拟文件对象以便显示
+  if (res.data.competitionIcon) {
+    fileList.value = [
+      {
+        name: '已上传图片',
+        url: res.data.competitionIcon,
+        status: 'success'
+      }
+    ];
+  }
+
+  if (res.data.competitionBg) {
+    fileList2.value = [
+      {
+        name: '已上传背景图',
+        url: res.data.competitionBg,
+        status: 'success'
+      }
+    ];
+  }
+
   if (res.data.delayCardTime == 0 && res.data.delayCardNum == 0) {
     form.value.isDelay = 0;
   }
@@ -1673,6 +1698,8 @@ const handleIconRemove = (file, updatedFileList) => {
   // 清除预览图和临时链接
   iconPreviewUrl.value = '';
   competitionIcon.value = ''; // 如果需要清除后台加载的图标,可以在这里设置为空字符串
+  // 同时清空表单数据中的图标链接
+  data.form.competitionIcon = null;
 };
 
 // 删除文件处理函数
@@ -1681,6 +1708,8 @@ const handleIconRemove2 = (file, updatedFileList) => {
   // 清除预览图和临时链接
   iconPreviewUrl2.value = '';
   competitionBg.value = ''; // 如果需要清除后台加载的图标,可以在这里设置为空字符串
+  // 同时清空表单数据中的背景图链接
+  data.form.competitionBg = null;
 };
 
 // 排序字段和顺序

+ 26 - 2
src/views/system/business/tournamentsTemplate/index.vue

@@ -298,7 +298,7 @@
             <el-button type="primary" :disabled="dialog.mode === 'view'" @click="handleGoToCategory"> 类目管理 </el-button>
           </div>
         </el-form-item>
-       <!-- 开始时间 -->
+        <!-- 开始时间 -->
         <!--        <el-form-item label="开始时间" prop="startTime">
           <el-date-picker
             clearable
@@ -430,7 +430,7 @@
             </el-form-item>
           </div>
         </el-form-item>
-         <!-- 奖励内容 -->
+        <!-- 奖励内容 -->
         <el-form-item label="奖励内容">
           <div v-for="(reward, index) in formPrize.rewards" :key="index" style="display: flex; align-items: center; margin-bottom: 8px">
             <span>第{{ reward.ranking }}名</span>
@@ -1004,6 +1004,28 @@ const handleUpdate = async (row?: TournamentsVO, mode: 'edit' | 'view' = 'edit')
   form.value.startBlindLevel = Number(res.data.startBlindLevel);
   competitionBg.value = res.data.competitionBg;
   competitionIcon.value = res.data.competitionIcon;
+  // 清空文件列表,避免残留
+  fileList.value = [];
+  fileList2.value = [];
+  // 如果有图片URL,创建虚拟文件对象以便显示
+  if (res.data.competitionIcon) {
+    fileList.value = [
+      {
+        name: '已上传图片',
+        url: res.data.competitionIcon,
+        status: 'success'
+      }
+    ];
+  }
+  if (res.data.competitionBg) {
+    fileList2.value = [
+      {
+        name: '已上传背景图',
+        url: res.data.competitionBg,
+        status: 'success'
+      }
+    ];
+  }
   if (res.data.delayCardTime == 0 && res.data.delayCardNum == 0) {
     form.value.isDelay = 0;
   }
@@ -1326,6 +1348,7 @@ const handleIconRemove = (file, updatedFileList) => {
   // 清除预览图和临时链接
   iconPreviewUrl.value = '';
   competitionIcon.value = ''; // 如果需要清除后台加载的图标,可以在这里设置为空字符串
+  data.form.competitionIcon = null;
 };
 // 点击预览图触发放大
 const handlePreviewClick2 = () => {
@@ -1341,6 +1364,7 @@ const handleIconRemove2 = (file, updatedFileList) => {
   // 清除预览图和临时链接
   iconPreviewUrl2.value = '';
   competitionBg.value = ''; // 如果需要清除后台加载的图标,可以在这里设置为空字符串
+  data.form.competitionBg = null;
 };
 // 排序字段和顺序
 const sortData = ref({