feat(history): 增加局数展示和筛选功能

- 新增查询局数的 API 接口和相应方法
- 实现桌次和局数的分别展示和滚动效果
- 添加选中桌次和局数的功能，以及相应的数据加载逻辑
- 优化页面样式，包括标题、卡片样式和滚动条样式

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

@@ -85,3 +85,15 @@ export const selectAllHandZhuoCi2 = (query?: HistoryQuery): AxiosPromise<History
     params: query
   });
 };
+
+/**
+ * 查询局数
+ * @param query
+ */
+export const selectAllHandNumber = (query?: HistoryQuery): AxiosPromise<HistoryVO[]> => {
+  return request({
+    url: '/business/history/selectAllHandNumber',
+    method: 'post',
+    params: query
+  });
+};

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

@@ -55,7 +55,7 @@ export interface HistoryVO {
   createdAt: string;
 
   parseBlindsInfo: string;
-  publicInfoText: string;
+  publicBrand: string;
 }
 
 export interface HistoryForm extends BaseEntity {
@@ -174,4 +174,6 @@ export interface HistoryQuery extends PageQuery {
   historyId?: number;
 
   playerId?: number;
+
+  tableId?: number;
 }

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

@@ -13,36 +13,43 @@
     </div>
     <!-- 桌次信息展示区域 -->
     <div v-if="tableData.length > 0" class="mb-[20px]">
-      <div>桌次：</div>
+      <div class="section-title">桌次：</div>
       <el-scrollbar>
-        <el-row :gutter="16">
-          <!-- 显示前六个桌次 -->
-          <el-col :span="4" v-for="(table, index) in tableData.slice(0, 6)" :key="index">
-            <el-card class="table-card mb-2" :class="{ 'selected': selectedTableId === table.handId }" @click="handleTableClick(table)">
-              <template #header>
-                <div class="card-header">
-                  <span>{{ table.handId }}</span>
-                </div>
-              </template>
-            </el-card>
-          </el-col>
-
-          <!-- 如果桌次数量大于6，则显示“更多”按钮 -->
-          <el-col :span="4" v-if="tableData.length > 6">
-            <el-button @click="showMore = !showMore">{{ showMore ? '收起' : '更多' }}</el-button>
-          </el-col>
-
-          <!-- 显示剩余桌次 -->
-          <el-col :span="4" v-for="(table, index) in tableData.slice(6)" :key="index" v-show="showMore">
-            <el-card class="table-card mb-2" :class="{ 'selected': selectedTableId === table.handId }" @click="handleTableClick(table)">
-              <template #header>
-                <div class="card-header">
-                  <span>{{ table.handId }}</span>
-                </div>
-              </template>
-            </el-card>
-          </el-col>
-        </el-row>
+        <div class="card-container">
+          <div
+            v-for="(table, index) in tableData.slice(0, showMore ? tableData.length : 6)"
+            :key="index"
+            class="table-card"
+            :class="{ 'selected': selectedTableId === table.tableId }"
+            @click="handleTableClick(table)"
+          >
+            {{ table.tableId }}
+          </div>
+        </div>
+        <div v-if="tableData.length > 6" class="more-button-container">
+          <el-button @click="showMore = !showMore" size="small">
+            {{ showMore ? '收起' : '更多' }}
+          </el-button>
+        </div>
+      </el-scrollbar>
+      <div class="section-title">局数：</div>
+      <el-scrollbar>
+        <div class="card-container">
+          <div
+            v-for="(table, index) in tableNumberData.slice(0, showMoreNumber ? tableNumberData.length : 6)"
+            :key="index"
+            class="table-card2"
+            :class="{ 'selected': selectedTableHandNumberId === table.handNumber }"
+            @click="handleTableNumberClick(table)"
+          >
+            {{ table.handNumber }}
+          </div>
+        </div>
+        <div v-if="tableNumberData.length > 6" class="more-button-container">
+          <el-button @click="showMoreNumber = !showMoreNumber" size="small">
+            {{ showMoreNumber ? '收起' : '更多' }}
+          </el-button>
+        </div>
       </el-scrollbar>
     </div>
 
@@ -87,11 +94,11 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <!-- 发牌信息显示 -->
-<!--          <el-col :span="24" style="font-size: 14px; color: #333; margin-bottom: 6px;">
+          <!--          <el-col :span="24" style="font-size: 14px; color: #333; margin-bottom: 6px;">
             <strong>发牌信息：</strong>
             <span v-html="blindsInfoText"></span>
           </el-col>-->
-          <el-col :span="24" style="font-size: 14px; color: #333; margin-bottom: 6px;">
+          <el-col :span="24" style="font-size: 14px; color: #333; margin-bottom: 6px">
             <strong>公共牌：</strong>
             <span v-html="publicInfoText"></span>
           </el-col>
@@ -125,8 +132,8 @@
             <span v-html="highlightBlinds(scope.row.operateText)"></span>
           </template>
         </el-table-column>
-<!--        <el-table-column label="公共牌" align="center" prop="publicBrand" />-->
-<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <!--        <el-table-column label="公共牌" align="center" prop="publicBrand" />-->
+        <!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           &lt;!&ndash;          <template #default="scope">
             <el-tooltip content="修改" placement="top">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:history:edit']"></el-button>
@@ -182,7 +189,16 @@
 </template>
 
 <script setup name="History" lang="ts">
-import { listHistory, getHistory, delHistory, addHistory, updateHistory, listHistory2, selectAllHandZhuoCi2 } from '@/api/system/business/history';
+import {
+  listHistory,
+  getHistory,
+  delHistory,
+  addHistory,
+  updateHistory,
+  listHistory2,
+  selectAllHandZhuoCi2,
+  selectAllHandNumber
+} from '@/api/system/business/history';
 import { getTournaments } from '@/api/system/business/tournaments';
 import { HistoryVO, HistoryQuery, HistoryForm } from '@/api/system/business/history/types';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -199,6 +215,7 @@ const total = ref(0);
 const queryFormRef = ref<ElFormInstance>();
 const historyFormRef = ref<ElFormInstance>();
 const showMore = ref(false); // 定义 showMore 状态
+const showMoreNumber = ref(false); // 定义 showMore 状态
 // 响应式变量
 const blindsInfoText = ref<string>('');
 //公共牌
@@ -376,6 +393,7 @@ const handleExport = () => {
   );
 };
 const tableData = ref<any[]>([]);
+const tableNumberData = ref<any[]>([]);
 const getTableData = async (playerId: string | number, tournamentId: string | number) => {
   try {
     // 确保 playerId 和 tournamentId 为 number 类型
@@ -391,8 +409,16 @@ const getTableData = async (playerId: string | number, tournamentId: string | nu
         // ✅ 默认选中第一个桌次
         if (tableData.value.length > 0) {
           const firstTable = tableData.value[0];
-          selectedTableId.value = firstTable.handId;
-          queryParams.value.historyId = firstTable.id;
+          selectedTableId.value = firstTable.tableId;
+
+          //默认加载这桌下面的局数
+          queryParams.value.tournamentId = tournamentIdNum;
+          queryParams.value.tableId = firstTable.tableId;
+          const res = await selectAllHandNumber(queryParams.value);
+          tableNumberData.value = res.data;
+          const firstHandTable = tableNumberData.value[0];
+          selectedTableHandNumberId.value = firstHandTable.handNumber;
+          queryParams.value.historyId = firstHandTable.id;
           queryParams.value.tournamentId = String(tournamentId);
         }
       }
@@ -461,7 +487,6 @@ const tournamentInfo = ref<Partial<TournamentsVO>>({
   await getList(); // 如果 getList 也是异步函数，这里也使用 await
 });*/
 
-
 watch(
   () => route.query,
   async (newQuery) => {
@@ -494,10 +519,50 @@ watch(
 );
 
 const selectedTableId = ref<number | null>(null);
-const handleTableClick = (table: any) => {
-  selectedTableId.value = table.handId;
+
+const handleTableClick = async (table: any) => {
+  // ✅ 加上 async
+  selectedTableId.value = table.tableId;
+  //queryParams.value.historyId = table.id;
+  queryParams.value.tableId = table.tableId;
+  const tournamentId = tournamentInfo.value.id;
+  queryParams.value.tournamentId = tournamentId;
+  try {
+    const res = await selectAllHandNumber(queryParams.value);
+    console.log('请求成功', res);
+    tableNumberData.value = [];
+    tableNumberData.value = res.data;
+    //加载列表
+    const firstHandTable = tableNumberData.value[0];
+    //选中对应的变颜色底部
+    selectedTableHandNumberId.value = firstHandTable.handNumber; // 添加这行代码
+    queryParams.value.historyId = firstHandTable.id;
+  } catch (error) {
+    console.error('请求失败:', error);
+    // 可选：清空数据或提示用户
+    tableNumberData.value = [];
+  }
+
+  // 如果 getList 也需要异步等待，也应加上 async/await
+  await getList();
+};
+
+const selectedTableHandNumberId = ref<number | null>(null);
+const handleTableNumberClick = async (table: any) => {
+  // ✅ 加上 async
+  selectedTableId.value = table.tableId;
+  selectedTableHandNumberId.value = table.handNumber; // 添加这行代码
   queryParams.value.historyId = table.id;
-  getList();
+  const tournamentId = tournamentInfo.value.id;
+  queryParams.value.tournamentId = tournamentId;
+  try {
+    // 如果 getList 也需要异步等待，也应加上 async/await
+    await getList();
+  } catch (error) {
+    console.error('请求失败:', error);
+    // 可选：清空数据或提示用户
+    tableNumberData.value = [];
+  }
 };
 
 // 高亮小盲、大盲
@@ -508,14 +573,68 @@ function highlightBlinds(text: string): string {
     .replace(/大盲/g, '<span style="color: red; font-weight: bold;">大盲</span>');
 }
 </script>
+
 <style scoped>
-.table-card {
+.section-title {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: nowrap; /* 不换行 */
+  gap: 8px;
+  margin-bottom: 10px;
+  overflow-x: auto; /* 横向滚动 */
+  padding: 5px 0;
+}
+
+.table-card,
+.table-card2 {
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: all 0.3s ease;
+  width: 40px;
+  height: 40px;
+  min-width: 40px; /* 防止压缩 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  border: 1px solid #dcdfe6;
+  font-size: 14px;
+  flex-shrink: 0; /* 防止压缩 */
+}
+
+.table-card:hover,
+.table-card2:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.table-card.selected,
+.table-card2.selected {
+  background-color: #409eff;
+  color: white;
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+}
+
+.more-button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 5px;
+}
+
+/* 滚动条样式优化 */
+:deep(.el-scrollbar) {
+  margin-bottom: 15px;
 }
 
-.table-card.selected {
-  background-color: #409eff; /* 选中背景色，你可以换成你喜欢的颜色 */
-  color: white; /* 文字颜色可选白色 */
+:deep(.el-scrollbar .el-scrollbar__wrap) {
+  overflow-x: hidden; /* 隐藏横向滚动条，因为我们自己实现了 */
 }
 </style>