【优化】优化用户管理界面

This commit is contained in:
2025-11-03 11:43:37 +08:00
parent 0f2cc6a33c
commit 44f817eced

View File

@@ -13,12 +13,9 @@
<body id="app">
<div class="main-container">
<div class="table-container">
<!-- 页面标题 -->
<h4 class="mb-3">用户管理</h4>
<!-- 多参数搜索栏 -->
<div class="search-bar">
<!-- 搜索参数1关键词 -->
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
@@ -49,7 +46,6 @@
</div>
</div>
<!-- 搜索参数2状态筛选 -->
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
@@ -67,7 +63,6 @@
</div>
</div>
<!-- 搜索和重置按钮 -->
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchData()">
<i class="bi bi-search me-1"></i> 搜索
@@ -78,19 +73,16 @@
</div>
</div>
<!-- 新增按钮 -->
<div class="mb-2">
<button class="btn btn-info" @click="openAddModal()">
<i class="bi bi-plus-circle me-1"></i> 新增
</button>
</div>
<!-- 表格 -->
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered ">
<thead class="table-light">
<tr>
<!-- 全选复选框 -->
<th style="width: 50px;">
<input
type="checkbox"
@@ -172,12 +164,10 @@
</table>
</div>
<!-- 批量操作(表格下方左侧) -->
<div class="batch-actions mt-3">
<div class="d-flex align-items-center gap-2">
<span class="text-muted">已选中 {{ selectedIds.length }} 条数据</span>
<!-- 使用select标签实现批量操作选择 -->
<select
class="form-select"
v-model="batchAction"
@@ -201,7 +191,6 @@
</div>
</div>
<!-- 分页控件 -->
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
共 {{ total }} 条数据,当前第 {{ pageNum }}/{{ totalPages }} 页
@@ -530,7 +519,7 @@
}
} catch (error) {
console.error('删除失败:', error);
alert('删除失败,请重试!');
$message.error('删除失败,请重试!');
}
}
});