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 绿。
This commit is contained in:
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>