Merge pull request #637 from xinnan-tech/web-API-admin

Web api admin
This commit is contained in:
Sakura-RanChen
2025-04-02 11:02:43 +08:00
committed by GitHub
3 changed files with 175 additions and 50 deletions
+44 -6
View File
@@ -4,20 +4,58 @@ import {getServiceUrl} from '../api'
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()
.url(`${getServiceUrl()}/api/v1/admin/users`)
.method('GET')
.url(`${getServiceUrl()}/api/v1/admin/users/${id}`)
.method('DELETE')
.success((res) => {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
console.error('请求失败:', err)
console.error('删除失败:', err)
RequestService.reAjaxFun(() => {
this.getUserList(callback)
this.deleteUser(id, callback)
})
}).send()
},
// 重置用户密码
resetUserPassword(id, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/admin/users/${id}`)
.method('PUT')
.success((res) => {
RequestService.clearRequestTime()
callback(res)
})
.send()
.fail((err) => {
console.error('重置密码失败:', err)
RequestService.reAjaxFun(() => {
this.resetUserPassword(id, callback)
})
}).send()
}
}
@@ -0,0 +1,77 @@
<template>
<el-dialog :visible.sync="visible" width="400px" center>
<div style="margin: 22px 15px;">
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
<div style="color: red;display: inline-block;">*</div>
用户密码
</div>
<div class="input-46" style="margin-top: 12px;">
<el-input v-model="password" type="text" :readonly="true" style="font-weight: bold; color: #333;"/>
</div>
</div>
<div style="display: flex;margin: 15px 15px;gap: 7px;">
<div class="dialog-btn" style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;" @click="closeDialog">
关闭
</div>
<div class="dialog-btn" style="background: #5778ff;color: white;" @click="copyPassword">
复制密码
</div>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'ViewPasswordDialog',
props: {
visible: { type: Boolean, required: true },
password: { type: String, default: '' }
},
methods: {
closeDialog() {
this.$emit('update:visible', false)
},
copyPassword() {
navigator.clipboard.writeText(this.password)
this.$message.success('密码已复制')
}
}
}
</script>
<style scoped>
.input-46 {
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 15px;
}
.dialog-btn {
cursor: pointer;
flex: 1;
border-radius: 23px;
height: 40px;
font-weight: 500;
font-size: 12px;
line-height: 40px;
text-align: center;
}
::v-deep .el-dialog {
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
::v-deep .el-dialog__headerbtn {
display: none;
}
::v-deep .el-dialog__body {
padding: 4px 6px;
}
::v-deep .el-input__inner {
background-color: #f6f8fb !important;
cursor: default !important;
}
</style>
+54 -44
View File
@@ -13,9 +13,9 @@
<el-card class="user-card" shadow="never">
<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="用户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="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="操作" align="center">
<template slot-scope="scope">
@@ -42,13 +42,7 @@
<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)"
>
<button v-for="page in visiblePages" :key="page" class="pagination-btn" :class="{ active: page === currentPage }" @click="goToPage(page)">
{{ page }}
</button>
@@ -61,6 +55,7 @@
<div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
©2025 xiaozhi-esp32-server
</div>
<view-password-dialog :visible.sync="showViewPassword" :password="currentPassword"/>
</el-main>
</div>
</template>
@@ -68,18 +63,19 @@
<script>
import HeaderBar from "@/components/HeaderBar.vue";
import adminApi from '@/apis/module/admin';
import ViewPasswordDialog from '@/components/ViewPasswordDialog.vue'
export default {
components: { HeaderBar },
components: { HeaderBar, ViewPasswordDialog },
data() {
return {
showViewPassword: false,
currentPassword: '', // 存储获取到的密码
searchPhone: '',
userList: [],
originalUserList: [], // 原始数据
currentPage: 1,
pageSize: 5,
total: 20
total: 0
};
},
created() {
@@ -108,43 +104,43 @@ export default {
methods: {
// 获取用户列表
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();
adminApi.getUserList({
page: this.currentPage,
limit: this.pageSize,
mobile: this.searchPhone
}, ({ data }) => {
if (data.code === 0) {
this.userList = data.data.list.map(user => ({
...user,
status: user.status === '1' ? '正常' : '禁用'
}));
this.total = data.data.total;
}
});
},
// 搜索
handleSearch() {
if (!this.searchPhone) {
this.userList = [...this.originalUserList];
return;
}
this.userList = this.originalUserList.filter(user =>
user.mobile.includes(this.searchPhone)
)},
this.currentPage = 1;
this.fetchUsers();
},
batchDelete() {
console.log('执行批量删除操作');
},
batchDisable() {
console.log('执行批量禁用操作');
},
// 重置密码
resetPassword(row) {
console.log('重置用户密码,用户:', row);
},
adminApi.resetUserPassword(row.userid, ({ data }) => {
if (data.code === 0) {
this.currentPassword = data.data
this.showViewPassword = true
} else {
this.$message.error(data.msg || '获取密码失败')
}
})
},
disableUser(row) {
row.status = '禁用';
console.log('禁用用户:', row);
@@ -153,8 +149,22 @@ export default {
row.status = '正常';
console.log('恢复用户:', row);
},
// 用户删除
deleteUser(row) {
console.log('删除用户', row);
this.$confirm('确定要删除用户吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
adminApi.deleteUser(row.userid, ({data}) => {
if (data.code === 0) {
this.$message.success('删除成功')
this.fetchUsers()
} else {
this.$message.error(data.msg || '删除失败')
}
})
}).catch(() => {})
},
handleSizeChange(val) {
this.pageSize = val;
@@ -168,23 +178,23 @@ export default {
},
goFirst() {
this.currentPage = 1;
this.handleCurrentChange(1);
this.fetchUsers();
},
goPrev() {
if (this.currentPage > 1) {
this.currentPage--;
this.handleCurrentChange(this.currentPage);
this.fetchUsers();
}
},
goNext() {
if (this.currentPage < this.pageCount) {
this.currentPage++;
this.handleCurrentChange(this.currentPage);
this.fetchUsers();
}
},
goToPage(page) {
this.currentPage = page;
this.handleCurrentChange(page);
this.fetchUsers();
},
}
};