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

feat(layout): 添加菜单展开状态持久化功能

- 在 Sidebar 组件中添加默认展开的菜单项
- 在 app store 中实现菜单展开状态的持久化存储
- 优化游戏事件编辑页面的菜单项添加逻辑
- 调整游戏得分编辑页面的排名计算方式
zhou 1 сар өмнө
parent
commit
35534b739d

+ 6 - 0
src/layout/components/Sidebar/index.vue

@@ -5,6 +5,7 @@
       <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
         <el-menu
           :default-active="activeMenu"
+          :default-opened="defaultOpenedMenus"
           :collapse="isCollapse"
           :background-color="bgColor"
           :text-color="textColor"
@@ -50,6 +51,11 @@ const activeMenu = computed(() => {
   return path;
 });
 
+// 获取默认打开的菜单(从 store 中获取持久化状态)
+const defaultOpenedMenus = computed(() => {
+  return appStore.getDefaultOpenedMenus();
+});
+
 const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
 const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
 </script>

+ 20 - 1
src/store/modules/app.ts

@@ -6,6 +6,9 @@ import { ref, reactive, computed } from 'vue';
 
 export const useAppStore = defineStore('app', () => {
   const sidebarStatus = useStorage('sidebarStatus', '1');
+  // 添加菜单打开状态的持久化存储
+  const menuOpenedStatus = useStorage('menuOpenedStatus', JSON.stringify(['/system/gameEvent']));
+  
   const sidebar = reactive({
     opened: sidebarStatus.value ? !!+sidebarStatus.value : true,
     withoutAnimation: false,
@@ -57,6 +60,20 @@ export const useAppStore = defineStore('app', () => {
     language.value = val;
   };
 
+  // 获取默认打开的菜单
+  const getDefaultOpenedMenus = (): string[] => {
+    try {
+      return JSON.parse(menuOpenedStatus.value);
+    } catch {
+      return ['/system/gameEvent']; // 默认打开赛事管理菜单
+    }
+  };
+
+  // 设置菜单打开状态
+  const setMenuOpenedStatus = (openedMenus: string[]): void => {
+    menuOpenedStatus.value = JSON.stringify(openedMenus);
+  };
+
   return {
     device,
     sidebar,
@@ -68,6 +85,8 @@ export const useAppStore = defineStore('app', () => {
     closeSideBar,
     toggleDevice,
     setSize,
-    toggleSideBarHide
+    toggleSideBarHide,
+    getDefaultOpenedMenus,
+    setMenuOpenedStatus
   };
 });

+ 22 - 7
src/views/system/gameEvent/edit.vue

@@ -472,19 +472,34 @@ const handleMenuSelectionChange = (selection: any[]) => {
 };
 
 // 确认添加菜单项
-const confirmAddMenuItems = () => {
+const confirmAddMenuItems = async () => {
   console.log('selectedMenus:', selectedMenus.value);
   if (selectedMenus.value.length === 0) {
     proxy?.$modal.msgWarning('请选择要添加的菜单');
     return;
   }
 
-  // 将选中的菜单添加到菜单列表中(无需重复检查,因为列表已经过滤掉了重复项)
-  menuItems.value.push(...selectedMenus.value);
+  try {
+    // 将选中的菜单添加到菜单列表中(无需重复检查,因为列表已经过滤掉了重复项)
+    menuItems.value.push(...selectedMenus.value);
+
+    // 如果是编辑模式,立即保存菜单数据到数据库
+    if (isEdit.value && currentEventId.value) {
+      await saveMenuData(currentEventId.value);
+      proxy?.$modal.msgSuccess(`成功添加 ${selectedMenus.value.length} 个菜单项并保存到数据库`);
+    } else {
+      // 新增模式下,菜单数据会在最终保存赛事时一起保存
+      proxy?.$modal.msgSuccess(`成功添加 ${selectedMenus.value.length} 个菜单项(将在保存赛事时一起保存)`);
+    }
 
-  console.log('menuItems:', menuItems.value);
-  menuSelectDialogVisible.value = false;
-  proxy?.$modal.msgSuccess(`成功添加 ${selectedMenus.value.length} 个菜单项`);
+    console.log('menuItems:', menuItems.value);
+    menuSelectDialogVisible.value = false;
+  } catch (error) {
+    console.error('添加菜单项失败:', error);
+    // 如果保存失败,回滚本地数组的更改
+    menuItems.value.splice(-selectedMenus.value.length, selectedMenus.value.length);
+    proxy?.$modal.msgError('添加菜单项失败,请重试');
+  }
 };
 
 // 获取跳转类型标签
@@ -667,7 +682,7 @@ const loadConfigData = async (eventId: string | number) => {
     const res = await listGameEventConfig({
       eventId: eventId === '' ? '' : eventId,
       pageNum: 1,
-      pageSize: 10,
+      pageSize: 1000,
       orderByColumn: '',
       isAsc: ''
     });

+ 2 - 2
src/views/system/gameScore/gameScoreEdit.vue

@@ -143,7 +143,7 @@ const queryParams = reactive({
 //刷新数据方法
 const refreshData = () => {
   searchValue.value = '';
-  loadData(true); // 刷新时自动计算排名
+  loadData(false); // 刷新时不自动计算排名,需要手动点击计算排名按钮
 };
 
 // 计算排名方法
@@ -412,6 +412,6 @@ const handlePagination = (paginationData: { page: number, limit: number }) => {
 };
 
 onMounted(() => {
-  loadData(true); // 页面初始化时自动计算排名
+  loadData(false); // 页面初始化时不自动计算排名,需要手动点击计算排名按钮
 });
 </script>