task-59(账号/权限页面): 实现数据权限分组列表和摘要

新增 shop-group-model.ts 解析 Java ShopManageGroupItemVo(camel)并汇总(groupCount/memberTotal)； shop-group-api.ts GET /api/admin/shop-manages/groups；GroupsPage 去内联 http，改走 adapter 展示分组列表 + 顶部摘要统计卡。8 用例全过，435 单测 + build 绿。
2026-09-05 15:23:38 +08:00
parent aeb226a0e6
commit eb526fef5d
4 changed files with 226 additions and 0 deletions
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { fetchShopGroups } from './shop-group-api'
+import { shopGroupSummary, type ShopGroupItem } from './shop-group-model'
+
+const loading = ref(false)
+const rows = ref<ShopGroupItem[]>([])
+const summary = computed(() => shopGroupSummary(rows.value))
+
+async function loadGroups() {
+  loading.value = true
+  try {
+    rows.value = await fetchShopGroups()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '数据权限分组加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadGroups)
+</script>
+
+<template>
+  <div class="page-stack">
+    <div class="page-heading">
+      <div>
+        <h2>数据权限分组</h2>
+        <p>管理店铺数据访问分组和组员范围。</p>
+      </div>
+    </div>
+    <el-row :gutter="12" style="margin-bottom: 12px">
+      <el-col :span="8">
+        <el-card shadow="never">
+          <div class="stat-block">
+            <span class="stat-label">分组总数</span>
+            <span class="stat-value">{{ summary.groupCount }}</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <div class="stat-block">
+            <span class="stat-label">组员总数</span>
+            <span class="stat-value">{{ summary.memberTotal }}</span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-card shadow="never">
+      <el-table v-loading="loading" :data="rows" stripe>
+        <el-table-column type="index" label="序号" width="90" />
+        <el-table-column prop="name" label="分组名称" min-width="220" />
+        <el-table-column prop="leaderUsername" label="组长" width="180" />
+        <el-table-column prop="memberCount" label="组员数量" width="120" />
+        <el-table-column prop="createdAt" label="创建时间" min-width="180" />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.stat-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.stat-label {
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+</style>
@@ -0,0 +1,10 @@
+/** 数据权限分组加载适配（任务 59）：GET /api/admin/shop-manages/groups → 分组列表。 */
+import { http } from '@/api/http'
+import { parseShopGroupList, type ShopGroupItem } from './shop-group-model'
+
+export const SHOP_GROUPS_ENDPOINT = '/api/admin/shop-manages/groups'
+
+export async function fetchShopGroups(): Promise<ShopGroupItem[]> {
+  const { data } = await http.get<unknown>(SHOP_GROUPS_ENDPOINT)
+  return parseShopGroupList(data)
+}
@@ -0,0 +1,57 @@
+/** 数据权限分组列表模型（任务 59）：解析 Java ShopManageGroupItemVo + 摘要统计，纯逻辑。 */
+import { unwrap } from '../../api/envelope.ts'
+
+export interface ShopGroupItem {
+  id: number
+  name: string
+  leaderUsername: string
+  memberCount: number
+  memberUsernames: string[]
+  createdAt?: string
+}
+
+function text(value: unknown): string {
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+function numberOrNull(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? Math.floor(value) : null
+}
+
+/** 解析单条分组项；缺 id 视为无效。 */
+export function parseShopGroupItem(raw: unknown): ShopGroupItem | null {
+  if (!raw || typeof raw !== 'object') return null
+  const record = raw as Record<string, unknown>
+  const id = numberOrNull(record.id)
+  if (id === null) return null
+  const names = Array.isArray(record.memberUsernames)
+    ? record.memberUsernames.map((v) => text(v)).filter(Boolean)
+    : []
+  const count = numberOrNull(record.memberCount)
+  const item: ShopGroupItem = {
+    id,
+    name: text(record.groupName ?? record.name) || `分组${id}`,
+    leaderUsername: text(record.leaderUsername ?? record.leader_name),
+    memberCount: count === null ? names.length : count,
+    memberUsernames: names,
+  }
+  const createdAt = text(record.createdAt ?? record.created_at)
+  if (createdAt) item.createdAt = createdAt
+  return item
+}
+
+/** 归一化分组列表响应（信封或裸数组）。 */
+export function parseShopGroupList(payload: unknown): ShopGroupItem[] {
+  const data = unwrap<unknown>(payload)
+  if (!Array.isArray(data)) return []
+  return data
+    .map((raw) => parseShopGroupItem(raw))
+    .filter((item): item is ShopGroupItem => item !== null)
+}
+
+/** 分组摘要：分组总数 + 组员总数。 */
+export function shopGroupSummary(groups: ShopGroupItem[]): { groupCount: number; memberTotal: number } {
+  let memberTotal = 0
+  for (const group of groups) memberTotal += group.memberCount || 0
+  return { groupCount: groups.length, memberTotal }
+}