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:
@@ -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>
|
||||
Reference in New Issue
Block a user