Procházet zdrojové kódy

feat(tournamentMenu): 将状态列改为开关组件并实现状态切换功能

- 将表格中的状态标签替换为el-switch开关组件
- 添加handleStatusChange方法处理状态变更逻辑
- 实现状态切换的API调用和错误处理
- 添加操作成功和失败的用户提示消息
- 确保本地状态与服务器状态保持一致
fugui001 před 2 týdny
rodič
revize
64d302397c
1 změnil soubory, kde provedl 31 přidání a 3 odebrání
  1. 31 3
      src/views/system/physical/tournamentMenu/index.vue

+ 31 - 3
src/views/system/physical/tournamentMenu/index.vue

@@ -64,9 +64,14 @@
         <el-table-column label="排序索引" align="center" prop="orderIndex" />
         <el-table-column label="状态" align="center" width="100">
           <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
-              {{ scope.row.status === 1 ? '显示' : '隐藏' }}
-            </el-tag>
+            <el-switch
+              :model-value="scope.row.status === 1"
+              :active-value="true"
+              :inactive-value="false"
+              active-text=""
+              inactive-text=""
+              @update:model-value="handleStatusChange(scope.row, $event)"
+            />
           </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" prop="createdAt">
@@ -422,4 +427,27 @@ const parseTime = (timestamp: number, format: string): string => {
 
   return format.replace('{y}', year).replace('{m}', month).replace('{d}', day).replace('{h}', hours).replace('{i}', minutes).replace('{s}', seconds);
 };
+/** 处理状态变化 */
+const handleStatusChange = async (row: TournamentMenuVO, newValue: boolean) => {
+  const newStatus = newValue ? 1 : 0;
+  const currentStatus = row.status;
+
+  // 准备更新数据
+  const updateData = {
+    ...row,
+    status: newStatus
+  };
+
+  try {
+    // 使用现有的更新接口
+    await updateTournamentMenu(updateData);
+    proxy?.$modal.msgSuccess(`${newStatus === 1 ? '显示' : '隐藏'}操作成功`);
+    // 确保本地状态与服务器一致
+    row.status = newStatus;
+  } catch (error) {
+    // 操作失败时恢复原状态
+    row.status = currentStatus;
+    proxy?.$modal.msgError('状态切换失败');
+  }
+};
 </script>