354 lines
9.7 KiB
Vue
354 lines
9.7 KiB
Vue
<script setup lang="ts">
|
|
import { formatDateTime } from '@/utils/datetime'
|
|
/** 分组管理页 · 像素复刻旧版 admin.html panel-group-manage（自绘：顶部数据权限分组摘要 chips + 分组列表表格 + 新建分组；全量无分页同旧版）。
|
|
* script 逻辑沿用现有 Vue 实现；编辑器保留现有组件。 */
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useAdminSessionStore } from '@/stores/admin-session'
|
|
import { openAdminConfirm } from '@/components/admin-confirm'
|
|
import { deleteShopGroup, fetchShopGroups } from './shop-group-api'
|
|
import type { ShopGroupItem } from './shop-group-model'
|
|
import GroupEditorDialog from './GroupEditorDialog.vue'
|
|
|
|
const session = useAdminSessionStore()
|
|
const loading = ref(false)
|
|
const rows = ref<ShopGroupItem[]>([])
|
|
const editorVisible = ref(false)
|
|
const editingGroup = ref<ShopGroupItem | null>(null)
|
|
const isSuperAdmin = computed(() => session.isSuperAdmin)
|
|
const currentUserId = computed(() => session.user?.id ?? null)
|
|
/** 筛选：分组名称/组长 模糊过滤（用户要求账户域子菜单补筛选条件）。 */
|
|
const filterKeyword = ref('')
|
|
const filterLeader = ref('')
|
|
const filteredRows = computed(() => {
|
|
const kw = (filterKeyword.value || '').trim().toLowerCase()
|
|
const ldr = (filterLeader.value || '').trim().toLowerCase()
|
|
if (!kw && !ldr) return rows.value
|
|
return rows.value.filter((g) => {
|
|
const nameOk = !kw || (g.name || '').toLowerCase().includes(kw)
|
|
const leaderOk = !ldr || (g.leaderUsername || '').toLowerCase().includes(ldr)
|
|
return nameOk && leaderOk
|
|
})
|
|
})
|
|
|
|
function canEditOf(group: ShopGroupItem): boolean {
|
|
if (isSuperAdmin.value) return true
|
|
return currentUserId.value != null && group.leaderUserId != null && currentUserId.value === group.leaderUserId
|
|
}
|
|
|
|
async function loadGroups() {
|
|
loading.value = true
|
|
try {
|
|
rows.value = await fetchShopGroups()
|
|
} catch (error) {
|
|
ElMessage.error(error instanceof Error ? error.message : '数据权限分组加载失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function openCreate() {
|
|
editingGroup.value = null
|
|
editorVisible.value = true
|
|
}
|
|
|
|
function openEdit(group: ShopGroupItem) {
|
|
if (!canEditOf(group)) return
|
|
editingGroup.value = group
|
|
editorVisible.value = true
|
|
}
|
|
|
|
async function removeGroup(group: ShopGroupItem) {
|
|
const ok = await openAdminConfirm({ message: `确定删除分组“${group.name}”吗？`, danger: true })
|
|
if (!ok) return
|
|
try {
|
|
await deleteShopGroup(group.id)
|
|
ElMessage.success('删除成功')
|
|
await loadGroups()
|
|
} catch (error) {
|
|
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
|
}
|
|
}
|
|
|
|
onMounted(loadGroups)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="groups-view">
|
|
<section class="panel-box">
|
|
<div class="groups-head">
|
|
<h3>分组列表</h3>
|
|
<button class="btn" type="button" @click="openCreate">新建分组</button>
|
|
</div>
|
|
|
|
<div class="form-row groups-filter-row">
|
|
<div class="form-group" style="min-width: 200px">
|
|
<label>分组名称</label>
|
|
<input v-model="filterKeyword" type="text" placeholder="输入分组名称" @keyup.enter="filterKeyword = filterKeyword" />
|
|
</div>
|
|
<div class="form-group" style="min-width: 180px">
|
|
<label>组长</label>
|
|
<input v-model="filterLeader" type="text" placeholder="输入组长用户名" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 58px">序号</th>
|
|
<th style="width: 16%">分组名称</th>
|
|
<th style="width: 12%">组长</th>
|
|
<th style="width: 10%">组员数量</th>
|
|
<th>组员</th>
|
|
<th style="width: 16%">创建时间</th>
|
|
<th style="width: 16%">修改时间</th>
|
|
<th style="width: 124px">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-if="filteredRows.length">
|
|
<tr v-for="(group, index) in filteredRows" :key="group.id">
|
|
<td>{{ index + 1 }}</td>
|
|
<td>{{ group.name }}</td>
|
|
<td>{{ group.leaderUsername || '-' }}</td>
|
|
<td>{{ group.memberCount ?? (group.memberUsernames?.length ?? 0) }}</td>
|
|
<td>
|
|
<div class="shop-group-members">
|
|
<span v-for="name in group.memberUsernames" :key="name" class="shop-group-member-chip">{{ name }}</span>
|
|
<span v-if="!group.memberUsernames.length" class="member-none">无</span>
|
|
</div>
|
|
</td>
|
|
<td>{{ formatDateTime(group.createdAt) }}</td>
|
|
<td>{{ formatDateTime(group.updatedAt || group.createdAt) }}</td>
|
|
<td class="ops-cell">
|
|
<template v-if="canEditOf(group)">
|
|
<button class="btn btn-sm" type="button" @click="openEdit(group)">编辑</button>
|
|
<button class="btn btn-sm btn-danger" type="button" @click="removeGroup(group)">删除</button>
|
|
</template>
|
|
<span v-else class="member-none">-</span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<tr v-else-if="loading">
|
|
<td colspan="8" class="empty-tip">加载中...</td>
|
|
</tr>
|
|
<tr v-else>
|
|
<td colspan="8" class="empty-tip">{{ filterKeyword || filterLeader ? '暂无匹配分组' : '暂无分组' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<GroupEditorDialog
|
|
v-model="editorVisible"
|
|
:group="editingGroup"
|
|
:operator-super="isSuperAdmin"
|
|
@saved="loadGroups"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 像素复刻旧版 admin.html panel-group-manage（蓝白末层）。 */
|
|
.groups-view {
|
|
font-family: inherit;
|
|
color: #24384d;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
.form-box,
|
|
.panel-box {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 20px 22px 24px;
|
|
border: 1px solid #d8e3ee;
|
|
border-radius: 14px;
|
|
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
|
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
|
}
|
|
h3 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 650;
|
|
color: #24384d;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
.groups-filter-row {
|
|
margin: 0 0 16px;
|
|
}
|
|
.groups-filter-row .form-group {
|
|
flex: 1 1 200px;
|
|
}
|
|
.form-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: 14px 18px;
|
|
}
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
margin-bottom: 0;
|
|
}
|
|
.form-group label {
|
|
color: #5b6f83;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
}
|
|
.form-group input,
|
|
.form-group select {
|
|
min-width: 0;
|
|
min-height: 42px;
|
|
padding: 8px 12px;
|
|
border: 1px solid #cbd9e6;
|
|
border-radius: 9px;
|
|
background: #f8fbfd;
|
|
color: #24384d;
|
|
font-size: 13.5px;
|
|
font-family: inherit;
|
|
color-scheme: light;
|
|
outline: none;
|
|
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
|
}
|
|
.form-group input:hover,
|
|
.form-group select:hover {
|
|
border-color: #9fb7cd;
|
|
}
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
background: #ffffff;
|
|
border-color: #5f85ad;
|
|
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
|
}
|
|
.groups-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 42px;
|
|
padding: 9px 18px;
|
|
border: 1px solid #4f78a5;
|
|
border-radius: 9px;
|
|
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
|
color: #ffffff;
|
|
font-family: inherit;
|
|
font-size: 13.5px;
|
|
cursor: pointer;
|
|
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
|
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
|
}
|
|
.btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
|
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
|
}
|
|
.btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
.btn-danger {
|
|
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
|
border-color: #b35f6a;
|
|
}
|
|
.btn-danger:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #cb7c84, #b96570);
|
|
}
|
|
.btn-sm {
|
|
min-height: 36px;
|
|
padding: 7px 12px;
|
|
}
|
|
.table-scroll {
|
|
width: 100%;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
border: 1px solid #dbe5ee;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
}
|
|
.table-scroll table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
.table-scroll th,
|
|
.table-scroll td {
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
font-size: 13.5px;
|
|
line-height: 1.5;
|
|
border-bottom: 1px solid #e0e8ef;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.table-scroll th {
|
|
background: #edf4fa;
|
|
color: #4e6479;
|
|
border-bottom-color: #d5e1eb;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
.table-scroll tbody tr:hover td {
|
|
background: #f1f7fb;
|
|
}
|
|
.table-scroll tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
.table-scroll td {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
}
|
|
.shop-group-members {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
max-height: 96px;
|
|
overflow-y: auto;
|
|
padding-right: 4px;
|
|
}
|
|
.shop-group-member-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 150px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
background: #e7f0f8;
|
|
color: #2f5d8b;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.member-none,
|
|
.member-more {
|
|
color: #8293a5;
|
|
font-size: 12.5px;
|
|
}
|
|
.ops-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.empty-tip {
|
|
padding: 44px 24px;
|
|
text-align: center;
|
|
color: #8293a5;
|
|
font-size: 13.5px;
|
|
}
|
|
</style>
|