Эх сурвалжийг харах

refactor(tournaments): 优化比赛列表和模板的奖励展示

- 修改比赛列表和模板的奖励展示方式,只显示第一名奖励
- 添加更多奖励的 tooltip 提示- 调整表格列宽,优化布局
- 新增 getRewardTooltipContent 函数用于生成奖励提示内容
fugui001 3 сар өмнө
parent
commit
ea36a320ec

+ 31 - 8
src/views/system/business/tournaments/index.vue

@@ -69,9 +69,9 @@
         :default-sort="{ prop: 'startTime', order: sortData.order }"
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="比赛ID" align="center" prop="id" />
+        <el-table-column label="比赛ID" align="center" prop="id" width="70" />
         <el-table-column label="比赛名" align="center" prop="name" />
-        <el-table-column label="比赛Logo" align="center">
+        <el-table-column label="比赛Logo" align="center" width="90">
           <template #default="scope">
             <el-image
               v-if="scope.row.competitionIcon"
@@ -86,8 +86,8 @@
         </el-table-column>
         <el-table-column label="开始时间" align="center" prop="startTime" width="150" sortable="custom"> </el-table-column>
         <el-table-column label="结束时间" align="center" prop="endTime" width="150"> </el-table-column>
-        <el-table-column label="报名人数" align="center" prop="signNum" width="100"> </el-table-column>
-        <el-table-column label="总手数" align="center" prop="totalSignup" width="100"> </el-table-column>
+        <el-table-column label="报名人数" align="center" prop="signNum" width="80"> </el-table-column>
+        <el-table-column label="总手数" align="center" prop="totalSignup" width="70"> </el-table-column>
         <el-table-column label="报名要求" align="center">
           <template #default="scope">
             {{
@@ -98,14 +98,23 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="报名截止盲注等级" align="center" prop="lateRegistrationLevel" />
+        <el-table-column label="截止盲注等级" align="center" prop="lateRegistrationLevel" />
         <el-table-column label="盲注表" align="center" prop="blindStructuresName" />
 
         <el-table-column label="奖励" align="center">
           <template #default="scope">
-            <div v-for="(prize, index) in scope.row.itemsPrizeList" :key="index">
-              第{{ prize.ranking }}名:{{ prize.quantity }} {{ prize.itemsName }}
+            <div v-if="scope.row.itemsPrizeList && scope.row.itemsPrizeList.length > 0">
+              <!-- 显示第一名奖励 -->
+              <div>
+                第{{ scope.row.itemsPrizeList[0].ranking }}名:{{ scope.row.itemsPrizeList[0].quantity }} {{ scope.row.itemsPrizeList[0].itemsName }}
+              </div>
+
+              <!-- 如果有更多奖励,用 tooltip 显示 -->
+              <el-tooltip v-if="scope.row.itemsPrizeList.length > 1" :content="getRewardTooltipContent(scope.row.itemsPrizeList)" placement="top">
+                <span class="more-rewards">更多</span>
+              </el-tooltip>
             </div>
+            <span v-else>—</span>
           </template>
         </el-table-column>
 
@@ -1252,6 +1261,10 @@ const handleCopy = async (row?: TournamentsVO) => {
       }
     ];
   }
+  // ✅ 主动触发盲注等级加载
+  if (form.value.blindStructureId) {
+    await handleBlindStructureChange(form.value.blindStructureId);
+  }
   dialog.mode = 'add'; // 设置为新增模式
   dialog.visible = true;
   dialog.title = '创建比赛';
@@ -1287,10 +1300,20 @@ const handleGoToStructures = () => {
     proxy?.$router.push('/business/structures');
   });
 };
-
+// 获取奖励提示内容
+const getRewardTooltipContent = (rewards: any[]) => {
+  return rewards.map((prize) => `第${prize.ranking}名:${prize.quantity} ${prize.itemsName}`).join('\n');
+};
 // 判断是否为正式环境
 const isProdEnvironment = computed(() => {
   // 根据实际项目中的环境变量判断是否为正式环境
   return import.meta.env.MODE === 'production' || import.meta.env.VITE_APP_ENV === 'prod';
 });
 </script>
+<style scoped>
+.more-rewards {
+  cursor: pointer;
+  color: #409eff;
+  margin-left: 5px;
+}
+</style>

+ 22 - 3
src/views/system/business/tournamentsTemplate/index.vue

@@ -76,9 +76,18 @@
 
         <el-table-column label="奖励" align="center">
           <template #default="scope">
-            <div v-for="(prize, index) in scope.row.itemsPrizeList" :key="index">
-              第{{ prize.ranking }}名:{{ prize.quantity }} {{ prize.itemsName }}
+            <div v-if="scope.row.itemsPrizeList && scope.row.itemsPrizeList.length > 0">
+              <!-- 显示第一名奖励 -->
+              <div>
+                第{{ scope.row.itemsPrizeList[0].ranking }}名:{{ scope.row.itemsPrizeList[0].quantity }} {{ scope.row.itemsPrizeList[0].itemsName }}
+              </div>
+
+              <!-- 如果有更多奖励,用 tooltip 显示 -->
+              <el-tooltip v-if="scope.row.itemsPrizeList.length > 1" :content="getRewardTooltipContent(scope.row.itemsPrizeList)" placement="top">
+                <span class="more-rewards">更多</span>
+              </el-tooltip>
             </div>
+            <span v-else>—</span>
           </template>
         </el-table-column>
 
@@ -407,7 +416,6 @@ const loadItemOptions = async () => {
   }
 };
 
-
 // 下拉选项数据 selectBlingStructuresInfo
 const itemOptionsStructures = ref<{ id: number; label: string }[]>([]);
 
@@ -924,4 +932,15 @@ const handleGoToStructures = () => {
     proxy?.$router.push('/business/structures');
   });
 };
+// 获取奖励提示内容
+const getRewardTooltipContent = (rewards: any[]) => {
+  return rewards.map((prize) => `第${prize.ranking}名:${prize.quantity} ${prize.itemsName}`).join('\n');
+};
 </script>
+<style scoped>
+.more-rewards {
+  cursor: pointer;
+  color: #409eff;
+  margin-left: 5px;
+}
+</style>