“分页查找用户”有问题,“用户删除”已完成

This commit is contained in:
CGD
2025-04-02 08:05:03 +08:00
parent 9430094072
commit 143d33e285
2 changed files with 78 additions and 39 deletions
+28 -7
View File
@@ -4,20 +4,41 @@ import {getServiceUrl} from '../api'
export default { export default {
// 用户列表 // 用户列表
getUserList(callback) { getUserList(params, callback) {
const queryParams = new URLSearchParams({
page: params.page,
limit: params.limit,
mobile: params.mobile
}).toString();
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/admin/users?${queryParams}`)
.method('GET')
.success((res) => {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
console.error('请求失败:', err)
RequestService.reAjaxFun(() => {
this.getUserList(callback)
})
}).send()
},
// 删除用户
deleteUser(id, callback) {
RequestService.sendRequest() RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/admin/users`) .url(`${getServiceUrl()}/api/v1/admin/users/${id}`)
.method('GET') .method('DELETE')
.success((res) => { .success((res) => {
RequestService.clearRequestTime() RequestService.clearRequestTime()
callback(res) callback(res)
}) })
.fail((err) => { .fail((err) => {
console.error('请求失败:', err) console.error('删除失败:', err)
RequestService.reAjaxFun(() => { RequestService.reAjaxFun(() => {
this.getUserList(callback) this.deleteUser(id, callback)
}) })
}) }).send()
.send()
} }
} }
+50 -32
View File
@@ -13,9 +13,9 @@
<el-card class="user-card" shadow="never"> <el-card class="user-card" shadow="never">
<el-table :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName"> <el-table :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
<el-table-column label="选择" type="selection" align="center" width="120"></el-table-column> <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="用户Id" prop="userid" align="center"></el-table-column>
<el-table-column label="手机号码" prop="mobile" 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="deviceCount" align="center"></el-table-column>
<el-table-column label="状态" prop="status" align="center"></el-table-column> <el-table-column label="状态" prop="status" align="center"></el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
@@ -76,10 +76,9 @@ export default {
return { return {
searchPhone: '', searchPhone: '',
userList: [], userList: [],
originalUserList: [], // 原始数据
currentPage: 1, currentPage: 1,
pageSize: 5, pageSize: 5,
total: 20 total: 0
}; };
}, },
created() { created() {
@@ -87,7 +86,9 @@ export default {
}, },
computed: { computed: {
pageCount() { pageCount() {
return Math.ceil(this.total / this.pageSize); const count = Math.ceil(this.total / this.pageSize);
console.log('总页数计算:', this.total, '/', this.pageSize, '=', count);
return count;
}, },
visiblePages() { visiblePages() {
const pages = []; const pages = [];
@@ -108,34 +109,34 @@ export default {
methods: { methods: {
// 获取用户列表 // 获取用户列表
fetchUsers() { 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;
}
});
},
// 分页变化 console.log('请求参数:', {
handleCurrentChange(page) { page: this.currentPage,
this.currentPage = page; limit: this.pageSize,
this.fetchUsers(); mobile: this.searchPhone
});
adminApi.getUserList({
page: this.currentPage,
limit: this.pageSize,
mobile: this.searchPhone
}, ({ data }) => {
console.log('响应数据:', data);
if (data.code === 0) {
this.userList = data.data.list.map(user => ({
...user,
status: user.status === '1' ? '正常' : '禁用'
}));
this.total = data.data.total;
}
});
}, },
// 搜索 // 搜索
handleSearch() { handleSearch() {
if (!this.searchPhone) { this.currentPage = 1;
this.userList = [...this.originalUserList]; this.fetchUsers();
return; },
}
this.userList = this.originalUserList.filter(user =>
user.mobile.includes(this.searchPhone)
)},
batchDelete() { batchDelete() {
console.log('执行批量删除操作'); console.log('执行批量删除操作');
}, },
@@ -154,7 +155,22 @@ export default {
console.log('恢复用户:', row); console.log('恢复用户:', row);
}, },
deleteUser(row) { deleteUser(row) {
console.log('删除用户', row); this.$confirm('确定要删除用户吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
adminApi.deleteUser(row.userid, ({data}) => {
console.log("33333333")
if (data.code === 0) {
this.$message.success('删除成功')
// 删除后重新获取数据(或前端直接过滤)
this.fetchUsers()
} else {
this.$message.error(data.msg || '删除失败')
}
})
}).catch(() => {})
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
@@ -173,18 +189,20 @@ export default {
goPrev() { goPrev() {
if (this.currentPage > 1) { if (this.currentPage > 1) {
this.currentPage--; this.currentPage--;
this.handleCurrentChange(this.currentPage); this.fetchUsers();
} }
}, },
goNext() { goNext() {
console.log("1111111111111")
if (this.currentPage < this.pageCount) { if (this.currentPage < this.pageCount) {
console.log("2222222222")
this.currentPage++; this.currentPage++;
this.handleCurrentChange(this.currentPage); this.fetchUsers();
} }
}, },
goToPage(page) { goToPage(page) {
this.currentPage = page; this.currentPage = page;
this.handleCurrentChange(page); this.fetchUsers();
}, },
} }
}; };