【优化】优化用户管理界面
This commit is contained in:
@@ -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('删除失败,请重试!');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user