feat(tournaments): 添加比赛列表排序功能并优化界面

- 为表格添加排序功能，默认按开始时间降序排序
-增加结束时间和报名人数列- 优化比赛图标显示，添加放大预览功能
-调整表格列宽，提高可读性
- 在 API 查询参数中添加排序相关字段

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

@@ -208,6 +208,10 @@ export interface TournamentsQuery extends PageQuery {
    * 日期范围参数
    */
   params?: any;
+
+  // 新增排序字段
+  sortBy?: string; // 排序字段名，例如 "startTime"
+  isAsc?: boolean; // 是否升序，true = 升序，false = 降序
 }
 
 export interface TournamentsBindStructuresQuery extends PageQuery {

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

@@ -56,7 +56,14 @@
         </el-row>
       </template>
 
-      <el-table v-loading="loading" border :data="tournamentsList" @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="loading"
+        border
+        :data="tournamentsList"
+        @selection-change="handleSelectionChange"
+        @sort-change="handleSortChange"
+        :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="比赛名" align="center" prop="name" />
@@ -65,14 +72,18 @@
             <el-image
               v-if="scope.row.competitionIcon"
               :src="scope.row.competitionIcon"
-              style="width: 40px; height: 40px; border-radius: 4px"
-              @click="openPreview(scope.row.competitionIcon)"
+              style="width: 40px; height: 40px; border-radius: 4px; cursor: zoom-in"
+              :preview-src-list="[scope.row.competitionIcon]"
+              :preview-teleported="true"
               fit="cover"
             />
-            <span v-else>无图标</span>
+            <span v-else></span>
           </template>
         </el-table-column>
-        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+        <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" width="100"> </el-table-column>
+        <el-table-column label="报名要求" align="center">
           <template #default="scope">
             {{
               scope.row.itemsName && scope.row.itemsNum
@@ -81,11 +92,6 @@
             }}
           </template>
         </el-table-column>
-        <el-table-column label="报名人数" align="center" />
-
-        <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" />
@@ -188,7 +194,7 @@
                     style="max-width: 100px; max-height: 100px; margin-top: 10px; cursor: pointer"
                   />
                   <!-- 可选：无图时显示提示文字 -->
-                  <div v-else style="margin-top: 10px; color: #999">暂无</div>
+                  <div v-else style="margin-top: 10px; color: #999"></div>
                 </div>
               </template>
 
@@ -605,7 +611,12 @@ const { queryParams, form, rules } = toRefs(data);
 /** 查询【请填写功能名称】列表 */
 const getList = async () => {
   loading.value = true;
-  const res = await listTournaments(queryParams.value);
+  const params = {
+    ...queryParams.value,
+    sortBy: sortData.value.prop,
+    isAsc: sortData.value.order === 'ascending'
+  };
+  const res = await listTournaments(params);
   tournamentsList.value = res.rows;
   total.value = res.total;
   loading.value = false;
@@ -912,4 +923,24 @@ const handleIconRemove = (file, updatedFileList) => {
   iconPreviewUrl.value = '';
   competitionIcon.value = ''; // 如果需要清除后台加载的图标，可以在这里设置为空字符串
 };
+
+// 排序字段和顺序
+const sortData = ref({
+  prop: 'startTime',
+  order: 'descending' as 'ascending' | 'descending' | null
+});
+
+/**
+ * 处理排序变化
+ */
+const handleSortChange = ({ prop, order }) => {
+  if (prop === 'startTime') {
+    sortData.value = {
+      prop,
+      order
+    };
+    // 触发重新加载数据
+    getList();
+  }
+};
 </script>