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

Merge pull request #608 from xinnan-tech/web-api-admin-get

Browse Source 
Web api admin get
This commit is contained in:
Sakura-RanChen
2025-03-31 15:35:31 +08:00
committed by GitHub
parent 1b25ed5903 587b9e8800
commit d36ea8a906
2 changed files with 228 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/apis/module/admin.js
+8 -5
View File
@@ -5,16 +5,19 @@ import {getServiceUrl} from '../api'
export default {
// 用户列表
getUserList(callback) {
RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/admin/users`)
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/admin/users`)
.method('GET')
.success((res) => {
RequestService.clearRequestTime()
callback(res)
})
.fail(() => {
.fail((err) => {
console.error('请求失败:', err)
RequestService.reAjaxFun(() => {
this.getList()
this.getUserList(callback)
})
}).send()
},
})
.send()
}
}
main/manager-web/src/views/UserManagement.vue
+220 -62
View File
@@ -5,35 +5,27 @@
<div class="top-area">
<div class="page-title">用户管理</div>
<div class="page-search">
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" />
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" @keyup.enter.native="handleSearch"/>
<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" />
<el-button @click="handleSearch">查询</el-button>
<el-button type="danger" @click="batchDelete">批量删除</el-button>
<el-button type="danger" @click="batchDisable">批量禁用</el-button>
</div> -->
<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="操作">
<el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
<el-table-column label="用户Id" prop="user_id" align="center"></el-table-column>
<el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
<el-table-column label="设备数量" prop="device_count" align="center"></el-table-column>
<el-table-column label="状态" prop="status" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<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>
@click="disableUser(scope.row)">禁用账户</el-button>
<el-button size="mini" type="text"
v-if="scope.row.status === '禁用'"
@click="restoreUser(scope.row)">恢复</el-button>
@click="restoreUser(scope.row)">恢复账号</el-button>
<el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
</template>
</el-table-column>
@@ -46,16 +38,22 @@
<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"
/>
<div class="custom-pagination">
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
<button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
<button
v-for="page in visiblePages"
:key="page"
class="pagination-btn"
:class="{ active: page === currentPage }"
@click="goToPage(page)"
>
{{ page }}
</button>
<button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
<span class="total-text">共{{ total }}条记录</span>
</div>
</div>
</el-card>
@@ -69,7 +67,6 @@
<script>
import HeaderBar from "@/components/HeaderBar.vue";
import Api from '@/apis/api';
import adminApi from '@/apis/module/admin';
@@ -78,29 +75,67 @@ export default {
data() {
return {
searchPhone: '',
userList: [
{ userId: '123456', phone: '13800138000', status: '正常', deviceCount: 10 },
{ userId: '123456', phone: '13800138000', status: '正常', deviceCount: 9 },
{ userId: '123456', phone: '13800138000', status: '正常', deviceCount: 7 },
{ userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
],
userList: [],
originalUserList: [], // 原始数据
currentPage: 1,
pageSize: 4,
pageSize: 5,
total: 20
};
},
created() {
adminApi.getUserList(({data}) => {
//mock偶尔会返回-1导致出错，又会返回两个list，所以这里只取第一个
this.userList = data.data[0].list;
console.log('用户列表：', this.userList);
})
this.fetchUsers();
},
computed: {
pageCount() {
return Math.ceil(this.total / this.pageSize);
},
visiblePages() {
const pages = [];
const maxVisible = 3;
let start = Math.max(1, this.currentPage - 1);
let end = Math.min(this.pageCount, start + maxVisible - 1);
if (end - start + 1 < maxVisible) {
start = Math.max(1, end - maxVisible + 1);
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
return pages;
}
},
methods: {
handleSearch() {
// 模拟搜索逻辑
console.log('执行查询，搜索号码：', this.searchPhone);
// 获取用户列表
fetchUsers() {
adminApi.getUserList(({data}) => {
if (data.code === 0) {
const responseData = data.data[0] || data.data;
this.originalUserList = responseData.list.map(user => ({
...user,
status: user.status === '1' ? '正常' : '禁用'
}));
this.userList = [...this.originalUserList];
this.total = responseData.totalCount || 0;
}
});
},
// 分页变化
handleCurrentChange(page) {
this.currentPage = page;
this.fetchUsers();
},
// 搜索
handleSearch() {
if (!this.searchPhone) {
this.userList = [...this.originalUserList];
return;
}
this.userList = this.originalUserList.filter(user =>
user.mobile.includes(this.searchPhone)
)},
batchDelete() {
console.log('执行批量删除操作');
},
@@ -121,15 +156,35 @@ export default {
deleteUser(row) {
console.log('删除用户：', row);
},
handleCurrentChange(page) {
this.currentPage = page;
console.log('当前页码：', page);
handleSizeChange(val) {
this.pageSize = val;
console.log('每页条数：', val);
},
headerCellClassName({ column, columnIndex }) {
if (columnIndex === 0) {
return 'custom-selection-header'
}
return ''
headerCellClassName({column, columnIndex}) {
if (columnIndex === 0) {
return 'custom-selection-header'
}
return ''
},
goFirst() {
this.currentPage = 1;
this.handleCurrentChange(1);
},
goPrev() {
if (this.currentPage > 1) {
this.currentPage--;
this.handleCurrentChange(this.currentPage);
}
},
goNext() {
if (this.currentPage < this.pageCount) {
this.currentPage++;
this.handleCurrentChange(this.currentPage);
}
},
goToPage(page) {
this.currentPage = page;
this.handleCurrentChange(page);
},
}
};
@@ -140,22 +195,29 @@ export default {
$table-bg-color: #ecf1fd;
.main {
padding: 20px; display: flex; flex-direction: column;
padding: 20px;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
}
.top-area {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.page-title {
font-size: 20px;
font-weight: 600;
color: #303133;
margin-left: 20px;
}
.page-search {
display: flex;
align-items: center;
.btn-search {
margin-left: 10px;
background: linear-gradient(to right, #5778ff, #c793f3);
@@ -164,6 +226,7 @@ $table-bg-color: #ecf1fd;
}
}
}
.welcome {
min-width: 900px;
min-height: 506px;
@@ -196,7 +259,7 @@ $table-bg-color: #ecf1fd;
background: $table-bg-color;
border-radius: 12px;
padding: 20px;
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin: 15px;
}
.table_bottom {
@@ -204,18 +267,14 @@ $table-bg-color: #ecf1fd;
justify-content: space-between;
align-items: center;
margin-top: 20px;
.ctrl_btn {
display: flex;
align-items: center;
margin-left: 25px;
}
}
.pagination-container {
display: flex;
justify-content: flex-end;
}
.rotated-icon {
display: inline-block;
transform: rotate(45deg);
@@ -232,8 +291,22 @@ $table-bg-color: #ecf1fd;
color: black;
}
&::before {
display: none;
}
&:last-child td {
border-bottom: none !important;
}
.el-table__body tr {
background-color: $table-bg-color;
td {
border: {
top: 1px solid rgba(0, 0, 0, 0.04);
bottom: 1px solid rgba(0, 0, 0, 0.04);
}
}
}
}
}
@@ -241,12 +314,15 @@ $table-bg-color: #ecf1fd;
.search-input {
width: 300px;
margin-right: 10px;
:deep(.el-input__inner) {
background-color: transparent;
border-color: #d3d6dc;
&:focus {
border-color: #409eff; // 保持聚焦状态下的边框颜色
border-color: #409eff;
}
//文字颜色
&::placeholder {
color: #606266;
opacity: 0.7;
@@ -268,4 +344,86 @@ $table-bg-color: #ecf1fd;
}
}
</style>
.custom-pagination {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
/* 导航按钮样式 (首页、上一页、下一页) */
.pagination-btn:first-child,
.pagination-btn:nth-child(2),
.pagination-btn:nth-last-child(2) {
min-width: 60px;
height: 32px;
padding: 0 12px;
border-radius: 4px;
border: 1px solid #e4e7ed;
background: #DEE7FF;
color: #606266;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: #d7dce6;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
/* 数字按钮样式 */
.pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)) {
min-width: 28px;
height: 32px;
padding: 0;
border-radius: 4px;
border: 1px solid transparent;
background: transparent;
color: #606266;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: rgba(245, 247, 250, 0.3);
}
}
.pagination-btn.active {
background: #5f70f3 !important;
color: #ffffff !important;
border-color: #5f70f3 !important;
&:hover {
background: #6d7cf5 !important;
}
}
.total-text {
color: #909399;
font-size: 14px;
margin-left: 10px;
}
}
:deep(.el-checkbox__inner) {
background-color: #eeeeee !important;
border-color: #cccccc !important;
}
:deep(.el-checkbox__inner:hover) {
border-color: #cccccc !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: #5f70f3 !important;
border-color: #5f70f3 !important;
}
</style>