feat(F006): 前台用户列表(/user/user)对齐企业列表UI标准 - 渐变头像单元(header图/首字)+用户ID两行/手机号图标化/企业认证胶囊+企业名两行/余额货币化/状态圆点胶囊(全局st变量暗色自适应)/批量禁用启用删除/保留tab统计与导出
This commit is contained in:
parent
90d6561746
commit
4c27e6b4b2
@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* F006 用户管理 (前台用户列表) - W17 设计规范 v2 完整版
|
||||
* F006 用户管理 (前台用户列表) - 2026-08-18 按企业列表 UI 标准升级
|
||||
*
|
||||
* 按 ui-preview-v2.html 模板: 9 列 + 6 搜索 + 4 操作 + 状态 tab
|
||||
* 按 ui-preview-v2.html 模板: 列 + 搜索 + 操作 + 状态 tab (W17 功能全部保留)
|
||||
* 后端端点: GET /user/user/page (搜索+分页) / GET /user/user/export (Excel)
|
||||
* POST /user/user/update (禁用/启用) / POST /user/user/delete (删除)
|
||||
* 新增: 用户头像单元(渐变/图片) / 两行信息列 / 状态胶囊(全局 --st-* 变量暗色自适应) / 批量操作栏
|
||||
*/
|
||||
import { onMounted, ref, reactive, computed } from 'vue'
|
||||
import { http, httpGet, httpPost } from '@/utils/request'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { Plus, Phone, Clock } from '@element-plus/icons-vue'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
@ -35,6 +38,8 @@ const total = ref(0)
|
||||
const enabledStats = reactive({ normal: 0, disabled: 0 })
|
||||
const loading = ref(false)
|
||||
const activeTab = ref('all')
|
||||
const selectedIds = ref<string[]>([])
|
||||
const selectedCount = ref(0)
|
||||
|
||||
// 表单弹窗状态
|
||||
const dialogVisible = ref(false)
|
||||
@ -52,49 +57,43 @@ const query = reactive({
|
||||
enabled: '' as '' | '0' | '1'
|
||||
})
|
||||
|
||||
const columns: any[] = [
|
||||
{ type: 'selection', width: 50, fixed: 'left', align: 'center' },
|
||||
{ prop: 'id', label: '用户ID', width: 100, align: 'center' },
|
||||
{ prop: 'nickName', label: '用户昵称', minWidth: 160, align: 'center' },
|
||||
{ prop: 'mobile', label: '手机号', width: 140, align: 'center' },
|
||||
{
|
||||
prop: 'isEnterprise',
|
||||
label: '是否企业认证',
|
||||
width: 140,
|
||||
align: 'center',
|
||||
formatter: (row: FrontUser) => row.isEnterprise === 1 ? '是' : '否'
|
||||
},
|
||||
{
|
||||
prop: 'enterpriseName',
|
||||
label: '关联企业',
|
||||
minWidth: 200,
|
||||
align: 'center',
|
||||
formatter: (row: FrontUser) => row.enterpriseName || '--'
|
||||
},
|
||||
{
|
||||
prop: 'accountBalance',
|
||||
label: '平台账户余额',
|
||||
width: 140,
|
||||
align: 'right',
|
||||
formatter: (row: FrontUser) => Number(row.accountBalance || 0).toFixed(2)
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: '禁用标识',
|
||||
width: 110,
|
||||
align: 'center',
|
||||
slot: 'enabled'
|
||||
},
|
||||
{
|
||||
prop: 'createDate',
|
||||
label: '注册时间',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
formatter: (row: FrontUser) => fmtDate(row.createDate)
|
||||
},
|
||||
{ label: '操作', width: 140, slot: 'action', fixed: 'right', align: 'center' }
|
||||
// 头像品牌渐变色组 (无 header 图片时交替使用, 与企业列表同源风格)
|
||||
const AVATAR_GRADIENTS = [
|
||||
'linear-gradient(135deg, #0b5394, #6fb1e8)',
|
||||
'linear-gradient(135deg, #2563eb, #93c5fd)',
|
||||
'linear-gradient(135deg, #0e7490, #67e8f9)',
|
||||
'linear-gradient(135deg, #7c3aed, #c4b5fd)',
|
||||
'linear-gradient(135deg, #be123c, #fda4af)'
|
||||
]
|
||||
|
||||
// 状态/认证胶囊色 (引用全局 --st-* 变量, 主题切换自动适配暗色)
|
||||
const ENABLED_META: Record<number, { label: string; color: string; bg: string }> = {
|
||||
0: { label: '正常', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
1: { label: '禁用', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
|
||||
}
|
||||
const CERT_META: Record<number, { label: string; color: string; bg: string }> = {
|
||||
1: { label: '已认证', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
0: { label: '未认证', color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' }
|
||||
}
|
||||
|
||||
const columns: any[] = [
|
||||
{ type: 'selection', width: 48, fixed: 'left', align: 'center' },
|
||||
{ label: '用户', minWidth: 200, slot: 'user' },
|
||||
{ prop: 'mobile', label: '手机号', width: 140, slot: 'mobile' },
|
||||
{ label: '企业认证', minWidth: 180, slot: 'enterprise' },
|
||||
{ prop: 'accountBalance', label: '平台余额', width: 140, slot: 'balance', align: 'right' },
|
||||
{ prop: 'enabled', label: '状态', width: 100, slot: 'enabled', align: 'center' },
|
||||
{ label: '注册时间', width: 165, slot: 'createDate' },
|
||||
{ label: '操作', width: 170, slot: 'action', fixed: 'right', align: 'center' }
|
||||
]
|
||||
|
||||
function avatarStyle(row: FrontUser, index: number) {
|
||||
return { background: AVATAR_GRADIENTS[index % AVATAR_GRADIENTS.length] }
|
||||
}
|
||||
function fmtMoney(n: number): string {
|
||||
const v = Number(n || 0)
|
||||
return `¥ ${v.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
|
||||
}
|
||||
function fmtDate(ts: number | null | undefined) {
|
||||
if (!ts) return '--'
|
||||
const d = new Date(Number(ts))
|
||||
@ -153,9 +152,7 @@ async function loadList() {
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载 stats (normal/disabled 全量计数)
|
||||
* 与 tab 无关, 只跟搜索条件 (userId/nickName/mobile/isEnterprise/enterpriseName) 关联
|
||||
* 通过 limit=1 + page=1 拿到 total (后端只 count 不返列表, 开销可忽略)
|
||||
* 加载 stats (normal/disabled 全量计数) — 与 tab 无关, 只跟搜索条件关联
|
||||
*/
|
||||
async function loadStats() {
|
||||
try {
|
||||
@ -177,7 +174,6 @@ async function load() {
|
||||
}
|
||||
|
||||
const tabItems = computed(() => [
|
||||
// 全部 = 正常 + 已禁用 (跨 tab 一致, 与搜索条件关联)
|
||||
{ key: 'all', label: '全部', count: enabledStats.normal + enabledStats.disabled },
|
||||
{ key: 'normal', label: '正常', count: enabledStats.normal },
|
||||
{ key: 'disabled', label: '已禁用', count: enabledStats.disabled }
|
||||
@ -203,6 +199,8 @@ function onReset() {
|
||||
load()
|
||||
}
|
||||
|
||||
function onSelectionChange(rows: any[]) { selectedIds.value = rows.map((r: any) => r.id); selectedCount.value = rows.length }
|
||||
|
||||
function onEdit(row: FrontUser) {
|
||||
editingUserId.value = row.id
|
||||
dialogVisible.value = true
|
||||
@ -219,31 +217,20 @@ function onDialogSuccess() {
|
||||
|
||||
/**
|
||||
* 导出当前搜索条件下的用户列表为 Excel
|
||||
* 后端: GET /user/user/export (返 Excel 文件流, Content-Type: application/vnd.ms-excel)
|
||||
* 走 http 实例 (自动带 Bearer token), responseType: 'blob' 接二进制流
|
||||
*/
|
||||
async function exportExcel() {
|
||||
exporting.value = true
|
||||
try {
|
||||
const params = buildSearchParams()
|
||||
if (query.enabled !== '') params.enabled = Number(query.enabled)
|
||||
const resp = await http.get<Blob>('/user/user/export', {
|
||||
params,
|
||||
responseType: 'blob'
|
||||
})
|
||||
const resp = await http.get<Blob>('/user/user/export', { params, responseType: 'blob' })
|
||||
const blob = resp.data
|
||||
if (!blob || blob.size === 0) {
|
||||
ElMessage.error('导出内容为空')
|
||||
return
|
||||
}
|
||||
// 优先从响应头取文件名 (后端 ExcelUtils 会设置)
|
||||
if (!blob || blob.size === 0) { ElMessage.error('导出内容为空'); return }
|
||||
const dispo = resp.headers?.['content-disposition'] || resp.headers?.['Content-Disposition']
|
||||
let filename = `用户列表_${new Date().toISOString().slice(0, 10)}.xls`
|
||||
if (typeof dispo === 'string') {
|
||||
const m = dispo.match(/filename\*?=(?:UTF-8\u0027\u0027)?["']?([^;"']+)["']?/i)
|
||||
if (m && m[1]) {
|
||||
try { filename = decodeURIComponent(m[1]) } catch { filename = m[1] }
|
||||
}
|
||||
if (m && m[1]) { try { filename = decodeURIComponent(m[1]) } catch { filename = m[1] } }
|
||||
}
|
||||
const url = URL.createObjectURL(new Blob([blob]))
|
||||
const a = document.createElement('a')
|
||||
@ -255,40 +242,57 @@ async function exportExcel() {
|
||||
URL.revokeObjectURL(url)
|
||||
ElMessage.success(`已导出 ${filename}`)
|
||||
} catch (e: any) {
|
||||
const msg = e?.msg || e?.message || '导出失败'
|
||||
ElMessage.error(msg)
|
||||
ElMessage.error(e?.msg || e?.message || '导出失败')
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 批量操作 (对齐企业列表批量栏) ==========
|
||||
async function batchToggle(next: number) {
|
||||
const action = next === 1 ? '禁用' : '启用'
|
||||
if (!selectedIds.value.length) { ElMessage.warning('请先选择用户'); return }
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认${action}已选 ${selectedIds.value.length} 个用户?`, `批量${action}确认`, { type: 'warning' })
|
||||
} catch { return }
|
||||
let ok = 0
|
||||
for (const id of selectedIds.value) {
|
||||
try { await httpPost('/user/user/update', { id, enabled: next }); ok++ } catch {/* 单条跳过 */}
|
||||
}
|
||||
ElMessage.success(`已${action} ${ok} 个用户`)
|
||||
load()
|
||||
}
|
||||
async function batchDelete() {
|
||||
if (!selectedIds.value.length) { ElMessage.warning('请先选择用户'); return }
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除已选 ${selectedIds.value.length} 个用户?该操作不可恢复`, '批量删除确认', { type: 'warning' })
|
||||
} catch { return }
|
||||
let ok = 0
|
||||
for (const id of selectedIds.value) {
|
||||
try { await httpPost('/user/user/delete', { id }); ok++ } catch {/* 单条跳过 */}
|
||||
}
|
||||
ElMessage.success(`已删除 ${ok} 个用户`)
|
||||
load()
|
||||
}
|
||||
|
||||
async function toggleEnabled(row: FrontUser) {
|
||||
// 当前 enabled: 0=正常 1=禁用; 要切换到对端
|
||||
const next = row.enabled === 0 ? 1 : 0
|
||||
const action = next === 1 ? '禁用' : '启用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认${action}用户「${row.nickName}」?`, `${action}确认`, { type: 'warning' })
|
||||
} catch { return }
|
||||
try { await ElMessageBox.confirm(`确认${action}用户「${row.nickName}」?`, `${action}确认`, { type: 'warning' }) } catch { return }
|
||||
try {
|
||||
await httpPost('/user/user/update', { id: row.id, enabled: next })
|
||||
ElMessage.success(`${action}成功`)
|
||||
row.enabled = next
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.msg || e?.message || `${action}失败`)
|
||||
}
|
||||
} catch (e: any) { ElMessage.error(e?.msg || e?.message || `${action}失败`) }
|
||||
}
|
||||
|
||||
async function deleteUser(row: FrontUser) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除用户「${row.nickName}」?该操作不可恢复`, '删除确认', { type: 'warning' })
|
||||
} catch { return }
|
||||
try { await ElMessageBox.confirm(`确认删除用户「${row.nickName}」?该操作不可恢复`, '删除确认', { type: 'warning' }) } catch { return }
|
||||
try {
|
||||
await httpPost('/user/user/delete', { id: row.id })
|
||||
ElMessage.success('删除成功')
|
||||
load()
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.msg || e?.message || '删除失败')
|
||||
}
|
||||
} catch (e: any) { ElMessage.error(e?.msg || e?.message || '删除失败') }
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
@ -296,18 +300,14 @@ onMounted(load)
|
||||
|
||||
<template>
|
||||
<div class="rr-page">
|
||||
<PageHeader title="用户列表" :sub="`管理前台注册用户，共 ${enabledStats.normal + enabledStats.disabled} 个账号`">
|
||||
<PageHeader title="用户列表" :sub="`共 ${enabledStats.normal + enabledStats.disabled} 个注册账号`">
|
||||
<el-button @click="exportExcel" :loading="exporting">导出</el-button>
|
||||
<el-button type="primary" @click="onCreate">
|
||||
<el-icon style="margin-right: 4px; vertical-align: -2px;"><Plus /></el-icon>
|
||||
新建用户
|
||||
</el-button>
|
||||
</PageHeader>
|
||||
<UserFormDialog
|
||||
v-model:visible="dialogVisible"
|
||||
:user-id="editingUserId"
|
||||
@success="onDialogSuccess"
|
||||
/>
|
||||
<UserFormDialog v-model:visible="dialogVisible" :user-id="editingUserId" @success="onDialogSuccess" />
|
||||
|
||||
<ListTabs v-model="activeTab" :items="tabItems" @change="onTabChange" />
|
||||
|
||||
@ -325,6 +325,20 @@ onMounted(load)
|
||||
@reset="onReset"
|
||||
/>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<!-- 批量操作栏 (对齐企业列表) -->
|
||||
<div class="batch-bar" :class="{ 'has-selection': selectedCount > 0 }">
|
||||
<span v-if="selectedCount > 0" class="batch-count">
|
||||
已选 <strong>{{ selectedCount }}</strong> 个用户
|
||||
</span>
|
||||
<span v-else class="batch-hint">勾选用户后可批量操作</span>
|
||||
<span class="batch-actions">
|
||||
<el-button size="small" type="warning" plain :disabled="!selectedCount" @click="batchToggle(1)">批量禁用</el-button>
|
||||
<el-button size="small" type="success" plain :disabled="!selectedCount" @click="batchToggle(0)">批量启用</el-button>
|
||||
<el-button size="small" type="danger" :disabled="!selectedCount" @click="batchDelete">批量删除</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
@ -339,11 +353,55 @@ onMounted(load)
|
||||
empty-text="暂无用户"
|
||||
@page-change="onPageChange"
|
||||
@limit-change="onLimitChange"
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<template #enabled="{ row }">
|
||||
<el-tag v-if="row.enabled === 0" type="success" size="small" effect="light" round>正常</el-tag>
|
||||
<el-tag v-else type="danger" size="small" effect="light" round>禁用</el-tag>
|
||||
<!-- 用户单元: 头像 + 昵称 + 用户ID -->
|
||||
<template #user="{ row, index }">
|
||||
<div class="user-cell">
|
||||
<span class="user-avatar" :style="avatarStyle(row, index)">
|
||||
<el-image v-if="row.header" :src="row.header" fit="cover" class="user-avatar-img" />
|
||||
<template v-else>{{ (row.nickName || '用').charAt(0) }}</template>
|
||||
</span>
|
||||
<span class="user-text">
|
||||
<span class="user-name">{{ row.nickName }}</span>
|
||||
<span class="user-sub">ID: {{ row.id }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<template #mobile="{ row }">
|
||||
<span class="phone-cell"><el-icon><Phone /></el-icon>{{ row.mobile }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 企业认证: 胶囊 + 企业名两行 -->
|
||||
<template #enterprise="{ row }">
|
||||
<div class="two-line">
|
||||
<span class="chip" :style="{ color: CERT_META[row.isEnterprise].color, background: CERT_META[row.isEnterprise].bg }">
|
||||
{{ CERT_META[row.isEnterprise].label }}
|
||||
</span>
|
||||
<span class="line-sub">{{ row.enterpriseName || '--' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 平台余额 -->
|
||||
<template #balance="{ row }">
|
||||
<span class="balance-cell">{{ fmtMoney(row.accountBalance) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 状态: 圆点胶囊 -->
|
||||
<template #enabled="{ row }">
|
||||
<span class="status-tag" :style="{ color: ENABLED_META[row.enabled].color, background: ENABLED_META[row.enabled].bg }">
|
||||
<span class="status-dot"></span>{{ ENABLED_META[row.enabled].label }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- 注册时间 -->
|
||||
<template #createDate="{ row }">
|
||||
<span class="date-cell"><el-icon><Clock /></el-icon>{{ fmtDate(row.createDate) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 操作 -->
|
||||
<template #action="{ row }">
|
||||
<TableActions
|
||||
:row="row"
|
||||
@ -356,8 +414,57 @@ onMounted(load)
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rr-page { max-width: 100%; }
|
||||
.rr-page { max-width: 100%; padding: 16px; }
|
||||
.rr-list-card {
|
||||
background: var(--surface); border-radius: 12px; overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===== 批量操作栏 ===== */
|
||||
.batch-bar {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px 16px; border-bottom: 1px solid var(--border);
|
||||
transition: background .2s;
|
||||
}
|
||||
.batch-bar.has-selection { background: var(--primary-soft, #e0ecff); }
|
||||
.batch-count { font-size: 13px; color: var(--ink-2); }
|
||||
.batch-count strong { color: var(--primary); font-size: 15px; }
|
||||
.batch-hint { font-size: 12px; color: var(--ink-3); }
|
||||
.batch-actions { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
|
||||
|
||||
/* ===== 用户单元 ===== */
|
||||
.user-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.user-avatar {
|
||||
flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.user-avatar-img { width: 100%; height: 100%; border-radius: 10px; }
|
||||
.user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.user-name {
|
||||
font-size: 14px; font-weight: 600; color: var(--ink);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.user-sub { font-size: 12px; color: var(--ink-3); font-family: 'SF Mono', Menlo, Consolas, monospace; }
|
||||
|
||||
/* ===== 单元格通用 ===== */
|
||||
.two-line { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
||||
.line-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.phone-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); font-family: 'SF Mono', Menlo, Consolas, monospace; }
|
||||
.date-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); font-family: 'SF Mono', Menlo, Consolas, monospace; }
|
||||
.balance-cell { font-size: 13px; font-weight: 600; color: var(--ink); font-family: 'SF Mono', Menlo, Consolas, monospace; }
|
||||
|
||||
/* ===== 胶囊 (对齐企业列表, 全局 --st-* 变量暗色自适应) ===== */
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; width: fit-content;
|
||||
font-size: 12px; font-weight: 500; padding: 2px 12px; border-radius: 20px; white-space: nowrap;
|
||||
}
|
||||
.status-tag {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 20px; white-space: nowrap;
|
||||
}
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user