ソースを参照

fix: 分组管理弹框显示准确的账号数量,不再显示'已筛选'

ethanfly 3 日 前
コミット
868b41c4ef
1 ファイル変更47 行追加12 行削除
  1. 47 12
      client/src/views/Accounts/index.vue

+ 47 - 12
client/src/views/Accounts/index.vue

@@ -3,7 +3,7 @@
     <div class="page-header">
       <h2>账号管理</h2>
       <div class="header-actions">
-        <el-button @click="showGroupManage = true">
+        <el-button @click="openGroupManage">
           <el-icon><Setting /></el-icon>
           管理分组
         </el-button>
@@ -363,7 +363,7 @@
             </template>
             <template v-else>
               <span class="group-name">{{ group.name }}</span>
-              <span class="group-count">{{ getGroupAccountCount(group.id) === -1 ? '已筛选' : `${getGroupAccountCount(group.id)} 个账号` }}</span>
+              <span class="group-count">{{ getGroupAccountCount(group.id) }} 个账号</span>
               <div class="group-actions">
                 <el-button type="primary" link size="small" @click="startEditGroup(group)">
                   编辑
@@ -440,6 +440,7 @@ const showAddDialog = ref(false);
 const showPlatformSelect = ref(false);
 const showRefreshDialog = ref(false);
 const showGroupManage = ref(false);
+const groupAccountCounts = ref<Record<number, number>>({});
 
 // 分组管理相关
 const newGroupName = ref('');
@@ -733,14 +734,31 @@ async function toggleAccountStatus(id: number, newStatus: 'active' | 'disabled')
 
 // 分组管理方法
 function getGroupAccountCount(groupId: number): number {
-  // 使用全量账号列表计算(accounts.value 可能已被筛选条件过滤)
-  // 避免筛选后分组计数不准确的问题
-  if (!accounts.value.length) return 0;
-  // 如果当前有筛选条件,返回"(已筛选)"提示而非错误计数
-  if (filter.status || filter.platform || filter.groupId) {
-    return -1; // 特殊标记:表示当前有筛选,计数可能不准
+  return groupAccountCounts.value[groupId] ?? 0;
+}
+
+// 打开分组管理时,请求全量账号以获取准确的分组人数
+async function openGroupManage() {
+  showGroupManage.value = true;
+  try {
+    const allAccounts = await accountsApi.getAccounts({});
+    const counts: Record<number, number> = {};
+    for (const a of allAccounts) {
+      if (a.groupId) {
+        counts[a.groupId] = (counts[a.groupId] || 0) + 1;
+      }
+    }
+    groupAccountCounts.value = counts;
+  } catch {
+    // 获取失败时使用已加载的数据
+    const counts: Record<number, number> = {};
+    for (const a of accounts.value) {
+      if (a.groupId) {
+        counts[a.groupId] = (counts[a.groupId] || 0) + 1;
+      }
+    }
+    groupAccountCounts.value = counts;
   }
-  return accounts.value.filter(a => a.groupId === groupId).length;
 }
 
 async function handleAddGroup() {
@@ -754,7 +772,8 @@ async function handleAddGroup() {
     await accountsApi.createGroup({ name: newGroupName.value.trim() });
     ElMessage.success('分组创建成功');
     newGroupName.value = '';
-    loadAccounts(); // 重新加载以获取最新分组列表
+    loadAccounts();
+    refreshGroupCounts();
   } catch {
     // 错误已处理
   } finally {
@@ -783,7 +802,8 @@ async function handleSaveGroup(groupId: number) {
     await accountsApi.updateGroup(groupId, { name: editingGroupName.value.trim() });
     ElMessage.success('分组更新成功');
     cancelEditGroup();
-    loadAccounts(); // 重新加载以获取最新分组列表
+    loadAccounts();
+    refreshGroupCounts();
   } catch {
     // 错误已处理
   } finally {
@@ -804,12 +824,27 @@ async function handleDeleteGroup(group: AccountGroup) {
     });
     await accountsApi.deleteGroup(group.id);
     ElMessage.success('分组删除成功');
-    loadAccounts(); // 重新加载以获取最新分组列表
+    loadAccounts();
+    refreshGroupCounts();
   } catch {
     // 取消或错误
   }
 }
 
+// 刷新分组账号计数(静默,不弹错误)
+async function refreshGroupCounts() {
+  try {
+    const allAccounts = await accountsApi.getAccounts({});
+    const counts: Record<number, number> = {};
+    for (const a of allAccounts) {
+      if (a.groupId) {
+        counts[a.groupId] = (counts[a.groupId] || 0) + 1;
+      }
+    }
+    groupAccountCounts.value = counts;
+  } catch { /* ignore */ }
+}
+
 // 选择平台并开始登录(九宫格点击)
 function selectPlatformAndLogin(platformType: PlatformType) {
   const platformName = getPlatformName(platformType);