feat(tournaments): 优化比赛列表和创建流程

- 重构了比赛列表的展示逻辑，增加了比赛ID、比赛Logo等字段
- 优化了比赛创建页面的表单结构，增加了图标上传和预览功能
- 调整了比赛奖励的展示和输入方式
- 优化了 API 接口的请求参数类型

src/api/system/business/tournaments/index.ts

@@ -37,23 +37,26 @@ export const getTournaments = (id: string | number): AxiosPromise<TournamentsVO>
  * 新增【请填写功能名称】
  * @param data
  */
-export const addTournaments = (data: FormData) => {
+export const addTournaments = (data: TournamentsForm) => {
   return request({
     url: '/business/tournaments',
     method: 'post',
-    data: data,
-    headers: { 'Content-Type': 'multipart/form-data' }
+    data: data
   });
 };
 
-export const updateTournaments = (data: FormData) => {
+/**
+ * 修改【请填写功能名称】
+ * @param data
+ */
+export const updateTournaments = (data: TournamentsForm) => {
   return request({
     url: '/business/tournaments',
     method: 'put',
-    data: data,
-    headers: { 'Content-Type': 'multipart/form-data' }
+    data: data
   });
 };
+
 /**
  * 删除【请填写功能名称】
  * @param id

src/api/system/business/tournaments/types.ts

@@ -71,6 +71,8 @@ export interface TournamentsVO {
    */
   blindStructureId?: number;
   competitionIcon?: string;
+  blindStructuresName?: string;
+  itemsName?: string;
   itemsPrizeList?: ItemsPrize[];
 }
 
@@ -156,6 +158,11 @@ export interface ItemsPrize {
 }
 
 export interface TournamentsQuery extends PageQuery {
+  /**
+   * 赛事id
+   */
+  id?: number;
+
   /**
    * 赛事名称
    */

src/views/system/business/tournaments/index.vue

@@ -4,24 +4,17 @@
       <div v-show="showSearch" class="mb-[20px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="赛事名称" prop="name">
-              <el-input v-model="queryParams.name" placeholder="请输入赛事名称" clearable @keyup.enter="handleQuery" />
+            <el-form-item label="比赛ID" prop="name">
+              <el-input v-model="queryParams.id" placeholder="请输入比赛ID" clearable @keyup.enter="handleQuery" />
             </el-form-item>
+
+            <el-form-item label="比赛名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入比赛名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+
             <el-form-item label="开始时间" prop="startTime">
               <el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择比赛开始时间" />
             </el-form-item>
-            <el-form-item label="记分牌数量" prop="startingChips">
-              <el-input v-model="queryParams.startingChips" placeholder="请输入起始记分牌数量" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="持续时间" prop="levelDuration">
-              <el-input v-model="queryParams.levelDuration" placeholder="请输入级别持续时间" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="报名级别" prop="lateRegistrationLevel">
-              <el-input v-model="queryParams.lateRegistrationLevel" placeholder="请输入截止报名级别" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="最大参赛人数" prop="maxPlayers">
-              <el-input v-model="queryParams.maxPlayers" placeholder="请输入最大参赛人数" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
 
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -36,26 +29,26 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['business:tournaments:add']">新增</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['business:tournaments:add']">创立比赛</el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['business:tournaments:edit']"
-              >修改</el-button
+              >编辑</el-button
             >
           </el-col>
-          <el-col :span="1.5">
+          <!--          <el-col :span="1.5">
             <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['business:tournaments:remove']"
               >删除</el-button
             >
-          </el-col>
-          <el-col :span="1.5">
+          </el-col>-->
+          <!--          <el-col :span="1.5">
             <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['business:tournaments:export']">导出</el-button>
-          </el-col>
+          </el-col>-->
 
           <!-- 新增的 “盲注管理” 按钮 -->
           <el-col :span="1.5">
             <el-button type="info" plain icon="Operation">
-              <router-link to="/business/structures">盲注管理</router-link>
+              <router-link to="/business/structures">盲注表管理</router-link>
             </el-button>
           </el-col>
 
@@ -65,50 +58,64 @@
 
       <el-table v-loading="loading" border :data="tournamentsList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="" align="center" prop="id" v-if="false" />
-        <el-table-column label="赛事名称" align="center" prop="name" />
+        <el-table-column label="比赛ID" align="center" prop="id" />
+        <el-table-column label="比赛名" align="center" prop="name" />
+        <el-table-column label="比赛Logo" align="center">
+          <template #default="scope">
+            <el-image
+              v-if="scope.row.competitionIcon"
+              :src="scope.row.competitionIcon"
+              style="width: 40px; height: 40px; border-radius: 4px"
+              @click="openPreview(scope.row.competitionIcon)"
+              fit="cover"
+            />
+            <span v-else>无图标</span>
+          </template>
+        </el-table-column>
         <el-table-column label="开始时间" align="center" prop="startTime" width="180">
           <template #default="scope">
-            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            {{
+              scope.row.itemsName && scope.row.itemsNum
+                ? `${scope.row.itemsName} x ${scope.row.itemsNum}`
+                : scope.row.itemsName || scope.row.itemsNum || '—'
+            }}
           </template>
         </el-table-column>
-        <el-table-column label="游戏类型" align="center" prop="gameType" />
-        <el-table-column label="起始记分牌数量" align="center" prop="startingChips" />
-        <el-table-column label="级别持续时间" align="center" prop="levelDuration" />
-        <el-table-column label="截止报名级别" align="center" prop="lateRegistrationLevel" />
-        <el-table-column label="最大参赛人数" align="center" prop="maxPlayers" />
-        <el-table-column label="赛事状态" align="center" prop="status" />
+        <el-table-column label="报名人数" align="center" />
 
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <el-table-column label="报名要求" align="center">
+          <template #default="scope"> {{ scope.row.itemsName }} x {{ scope.row.itemsNum }} </template>
+        </el-table-column>
+
+        <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">
-            <el-tooltip content="查看" placement="top">
-              <el-button
-                link
-                type="primary"
-                icon="View"
-                @click="handleUpdate(scope.row, 'view')"
-                v-hasPermi="['business:tournaments:edit']"
-              ></el-button>
-            </el-tooltip>
-            <el-tooltip content="编辑" placement="top">
-              <el-button
-                link
-                type="primary"
-                icon="Edit"
-                @click="handleUpdate(scope.row, 'edit')"
-                v-hasPermi="['business:tournaments:edit']"
-              ></el-button>
-            </el-tooltip>
-            <!--            <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:tournaments:remove']"></el-button>
-            </el-tooltip>-->
-
-            <!-- 新增：分配按钮 -->
-            <el-tooltip content="分配盲注" placement="top">
-              <el-button link type="success" icon="Document" @click="openAssignDialog(scope.row)" v-hasPermi="['business:tournaments:assign']">
-                分配
-              </el-button>
-            </el-tooltip>
+            <div v-for="(prize, index) in scope.row.itemsPrizeList" :key="index">
+              第{{ prize.ranking }}名：{{ prize.quantity }} {{ prize.itemsName }}
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="赛事状态" align="center" prop="status" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+          <template #default="scope">
+            <div style="display: flex; flex-direction: column; gap: 5px">
+              <el-tooltip content="查看" placement="top">
+                <el-button link type="primary" icon="View" @click="handleUpdate(scope.row, 'view')">查看</el-button>
+              </el-tooltip>
+              <el-tooltip content="编辑" placement="top">
+                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row, 'edit')">编辑</el-button>
+              </el-tooltip>
+              <el-tooltip content="分配盲注" placement="top">
+                <el-button link type="success" icon="Document" @click="openAssignDialog(scope.row)"> 分配 </el-button>
+              </el-tooltip>
+
+              <!--            <el-tooltip content="删除" placement="top">
+  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:tournaments:remove']"></el-button>
+</el-tooltip>-->
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -159,6 +166,8 @@
               class="upload-icon"
               action="#"
               :on-change="handleIconChange"
+              :on-remove="handleIconRemove"
+              :file-list="fileList"
               :auto-upload="false"
               :limit="1"
               accept="image/*"
@@ -167,6 +176,27 @@
               <template #trigger>
                 <el-button type="primary" :disabled="dialog.mode === 'view'">点击选择图标</el-button>
               </template>
+
+              <!-- 预览图区域 -->
+              <template #default>
+                <div class="preview-area" @click="handlePreviewClick">
+                  <!-- 只有当 iconPreviewUrl 或 competitionIcon 存在时才显示 img -->
+                  <img
+                    v-if="iconPreviewUrl || competitionIcon"
+                    :src="iconPreviewUrl || competitionIcon"
+                    alt="预览图"
+                    style="max-width: 100px; max-height: 100px; margin-top: 10px; cursor: pointer"
+                  />
+                  <!-- 可选：无图时显示提示文字 -->
+                  <div v-else style="margin-top: 10px; color: #999">暂无</div>
+                </div>
+              </template>
+
+              <template #tip>
+                <div class="el-upload__tip">
+                  <span v-if="fileList.length > 0">当前已选文件：{{ fileList[0].name }}</span>
+                </div>
+              </template>
             </el-upload>
           </div>
         </el-form-item>
@@ -303,6 +333,11 @@
       <!-- 使用 component 动态加载目标组件 -->
       <levels-index :blind-structure-id="dialogParams.blindStructureId" :name="dialogParams.name" />
     </el-dialog>
+
+    <!-- 预览弹窗 -->
+    <el-dialog v-model="dialogVisible" title="图片预览" width="50%">
+      <img :src="previewSrc || iconPreviewUrl || competitionIcon" alt="预览图片" style="max-width: 100%; max-height: 80vh" />
+    </el-dialog>
   </div>
 </template>
 
@@ -356,6 +391,13 @@ const assignForm = reactive({
   tournamentId: undefined as number | undefined,
   selectedIds: [] as number[]
 });
+const dialogVisible = ref(false);
+const previewSrc = ref('');
+
+function openPreview(src: string) {
+  previewSrc.value = src;
+  dialogVisible.value = true;
+}
 
 // 控制 Dialog 是否显示
 const levelsDialogVisible = ref(false);
@@ -455,6 +497,12 @@ const formPrize = reactive({
     }
   ]
 });
+// 用于保存原始的默认奖励结构
+const defaultRewardStructure = {
+  ranking: 1,
+  itemId: null,
+  quantity: null
+};
 
 const addReward = () => {
   const currentLength = formPrize.rewards.length;
@@ -480,6 +528,11 @@ const removeReward = (index: number) => {
   });
 };
 
+//预览图标需要
+const iconPreviewUrl = ref('');
+const competitionIcon = ref('');
+const fileList = ref([]);
+
 // 单选控制变量（用于绑定 el-radio）
 const selectedRadio = ref<number | null>(null);
 
@@ -531,6 +584,7 @@ const data = reactive<PageData<TournamentsForm, TournamentsQuery>>({
     status: undefined,
     createdAt: undefined,
     updatedAt: undefined,
+    id: undefined,
     params: {}
   },
   rules: {
@@ -560,6 +614,11 @@ const getList = async () => {
 /** 取消按钮 */
 const cancel = () => {
   reset();
+  resetFormPrize();
+  fileList.value = [];
+  // 清除预览图和临时链接
+  iconPreviewUrl.value = '';
+  competitionIcon.value = ''; // 如果需要清除后台加载的图标，可以在这里设置为空字符串
   dialog.visible = false;
 };
 
@@ -591,18 +650,30 @@ const handleSelectionChange = (selection: TournamentsVO[]) => {
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
+  resetFormPrize();
+  fileList.value = [];
+  // 清除预览图和临时链接
+  iconPreviewUrl.value = '';
+  competitionIcon.value = ''; // 如果需要清除后台加载的图标，可以在这里设置为空字符串
   dialog.visible = true;
   dialog.title = '创建比赛';
+  dialog.mode = 'edit'; // 设置模式
+};
+// 重置函数
+const resetFormPrize = () => {
+  // 清空 rewards 并添加默认项
+  formPrize.rewards.splice(0); // 清空数组
+  formPrize.rewards.push({ ...defaultRewardStructure }); // 添加初始项
 };
-
 /** 修改按钮操作 */
 const handleUpdate = async (row?: TournamentsVO, mode: 'edit' | 'view' = 'edit') => {
   reset(); // 重置表单
+
   const _id = row?.id || ids.value[0];
   const res = await getTournaments(_id);
 
   Object.assign(form.value, res.data);
-
+  competitionIcon.value = res.data.competitionIcon;
   // 处理奖励表单数据
   const prizeItems = res.data.itemsPrizeList || [];
   if (prizeItems.length > 0) {
@@ -636,39 +707,23 @@ const submitForm = () => {
     }
 
     if (!valid) return;
-
     try {
       buttonLoading.value = true;
 
-      // 1. 创建 FormData 对象
-      const formData = new FormData();
-
-      // 2. 添加普通表单字段
-      for (const key in data.form) {
-        const value = data.form[key];
-        if (value !== undefined && value !== null) {
-          formData.append(key, String(value));
-        }
-      }
-
-      // 3. 添加奖励列表（itemsPrizeList）
-      const itemsPrizeListJson = JSON.stringify(
-        formPrize.rewards.map((reward) => ({
-          ranking: reward.ranking,
-          itemId: reward.itemId,
-          quantity: reward.quantity
+      // 构造最终要提交的数据对象
+      const formData: TournamentsForm = {
+        ...data.form,
+        competitionIcon: data.form.competitionIcon, // 确保 iconUrl 存在
+        itemsPrizeList: formPrize.rewards.map((reward) => ({
+          ranking: Number(reward.ranking),
+          itemId: Number(reward.itemId),
+          quantity: Number(reward.quantity)
         }))
-      );
-      formData.append('itemsPrizeList', itemsPrizeListJson);
+      };
 
-      // 4. 添加图标文件（如果存在）
-      if (iconFile.value) {
-        formData.append('competitionIcon', iconFile.value);
-      }
-      debugger;
-      // 5. 判断新增或编辑
+      // 提交数据（区分新增/编辑）
       let response;
-      if (data.form.id) {
+      if (formData.id) {
         response = await updateTournaments(formData);
       } else {
         response = await addTournaments(formData);
@@ -678,6 +733,7 @@ const submitForm = () => {
       dialog.visible = false;
       await getList();
     } catch (error) {
+      console.error('提交失败:', error);
       proxy?.$modal.msgError('提交失败，请重试');
     } finally {
       buttonLoading.value = false;
@@ -791,18 +847,14 @@ watch(
   }
 );
 
-const handleIconChange = (file: any) => {
-  if (file.raw) {
-    iconFile.value = file.raw; // 缓存原始文件对象
-  } else {
-    iconFile.value = null;
-  }
-};
-/*
-const fileList = ref([]);
 const handleIconChange = async (file) => {
   const index = fileList.value.findIndex((f) => f.uid === file.uid);
   fileList.value = [];
+
+  if (file.raw) {
+    iconPreviewUrl.value = URL.createObjectURL(file.raw);
+  }
+
   if (index === -1) {
     // 如果文件不在列表中，则添加进去
     fileList.value.push(file);
@@ -819,6 +871,7 @@ const handleIconChange = async (file) => {
         response: res.data.url
       };
       data.form.competitionIcon = fileList.value[index].response;
+      iconPreviewUrl.value = fileList.value[index].response;
       ElMessage.success('上传成功');
     } else {
       throw new Error(res.msg);
@@ -833,7 +886,6 @@ const handleIconChange = async (file) => {
     ElMessage.error('上传失败，请重试');
   }
 };
-*/
 
 const handleViewLevels = () => {
   const blindStructureId = data.form.blindStructureId;
@@ -845,4 +897,19 @@ const handleViewLevels = () => {
   /*  dialogParams.value.name = row.name;*/
   levelsDialogVisible.value = true;
 };
+
+// 点击预览图触发放大
+const handlePreviewClick = () => {
+  const currentSrc = iconPreviewUrl.value || competitionIcon.value;
+  if (currentSrc) {
+    dialogVisible.value = true;
+  }
+};
+// 删除文件处理函数
+const handleIconRemove = (file, updatedFileList) => {
+  fileList.value = updatedFileList;
+  // 清除预览图和临时链接
+  iconPreviewUrl.value = '';
+  competitionIcon.value = ''; // 如果需要清除后台加载的图标，可以在这里设置为空字符串
+};
 </script>