Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 15:13:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化了“用户管理”，分页还未调整

Browse Source
This commit is contained in:
Ran_Chen
2025-03-28 15:24:53 +08:00
parent 97b777f1b2
commit 3a2261107c
1 changed files with 82 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/UserManagement.vue
+82 -24
View File
@@ -5,13 +5,13 @@
<div class="top-area">
<div class="page-title">用户管理</div>
<div class="page-search">
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" />
<el-button class="btn-search" @click="handleSearch">搜索</el-button>
<!-- <el-button type="danger" @click="batchDelete">批量删除</el-button>
<el-button type="danger" @click="batchDisable">批量禁用</el-button> -->
</div>
</div>
<el-card class="user-card" shadow="never">
<!-- <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
@@ -19,45 +19,42 @@
<el-button type="danger" @click="batchDelete">批量删除</el-button>
<el-button type="danger" @click="batchDisable">批量禁用</el-button>
</div> -->
<el-table :data="userList" style="width: 100%;">
<el-table-column label="选择"
type="selection"
width="55">
</el-table-column>
<el-table :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
<el-table-column label="选择" type="selection" width="55"></el-table-column>
<el-table-column label="用户Id" prop="user_id"></el-table-column>
<el-table-column label="手机号码" prop="mobile"></el-table-column>
<el-table-column label="设备数量" prop="device_count"></el-table-column>
<el-table-column label="状态" prop="status"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
<el-button size="mini" type="text" @click="resetPassword(scope.row)" style="color: #989fdd">重置密码</el-button>
<el-button size="mini" type="text"
v-if="scope.row.status === '正常'"
@click="disableUser(scope.row)">禁用</el-button>
<el-button size="mini" type="text"
v-if="scope.row.status === '禁用'"
@click="restoreUser(scope.row)">恢复</el-button>
<el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
<el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
</template>
</el-table-column>
</el-table>
<div class="table_bottom">
<div class="ctrl_btn">
<el-button size="mini" type="primary">全选</el-button>
<el-button size="mini" type="success" icon="el-icon-circle-check">启用</el-button>
<el-button size="mini" type="warning" icon="el-icon-circle-close">禁用</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="primary" style="width: 72px; background: #5f70f3">全选</el-button>
<el-button size="mini" type="success" icon="el-icon-circle-check" style="background: #5bc98c">启用</el-button>
<el-button size="mini" type="warning" style="color: black; background: #f6d075"><i class="el-icon-remove-outline rotated-icon"></i>禁用</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" style="background: #fd5b63">删除</el-button>
</div>
<div class="pagination-container">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15]"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15]"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
/>
</div>
</div>
@@ -128,11 +125,20 @@ export default {
this.currentPage = page;
console.log('当前页码：', page);
},
headerCellClassName({ column, columnIndex }) {
if (columnIndex === 0) {
return 'custom-selection-header'
}
return ''
},
}
};
</script>
<style lang="scss" scoped>
$table-bg-color: #ecf1fd;
.main {
padding: 20px; display: flex; flex-direction: column;
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
@@ -141,7 +147,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
margin-bottom: 10px;
.page-title {
font-size: 20px;
font-weight: 600;
@@ -187,11 +193,10 @@ export default {
}
.user-card {
background: #fff;
background: $table-bg-color;
border-radius: 12px;
padding: 20px;
opacity: 0.9;
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.table_bottom {
@@ -210,4 +215,57 @@ export default {
justify-content: flex-end;
}
.rotated-icon {
display: inline-block;
transform: rotate(45deg);
margin-right: 4px;
color: black;
}
:deep(.el-table) {
background: $table-bg-color;
&.transparent-table {
.el-table__header th {
background: $table-bg-color !important;
color: black;
}
.el-table__body tr {
background-color: $table-bg-color;
}
}
}
.search-input {
width: 300px;
margin-right: 10px;
:deep(.el-input__inner) {
background-color: transparent;
&:focus {
border-color: #409eff; // 保持聚焦状态下的边框颜色
}
//文字颜色
&::placeholder {
color: #606266;
opacity: 0.7;
}
}
}
:deep(.custom-selection-header) {
.el-checkbox {
display: none !important;
}
&::after {
content: '选择';
display: inline-block;
color: black;
font-weight: bold;
padding-bottom: 18px;
}
}
</style>