From 261ecfea4d3da6c9dfe9dda83e795fc18e4e44e2 Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Mon, 31 Mar 2025 10:24:37 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E7=94=A8?=
=?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
main/manager-web/src/views/UserManagement.vue | 226 ++++++++++++++----
1 file changed, 185 insertions(+), 41 deletions(-)
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index cee70991..da8012be 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -7,25 +7,17 @@
搜索
-
-
-
-
-
-
-
-
+
+
+
+
+
+
重置密码
禁用
删除
-
@@ -85,7 +83,7 @@ export default {
{ userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
],
currentPage: 1,
- pageSize: 4,
+ pageSize: 5,
total: 20
};
},
@@ -95,6 +93,26 @@ export default {
this.userList = data.data[0].list;
console.log('用户列表：', this.userList);
})
+ },
+ 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() {
@@ -125,11 +143,35 @@ export default {
this.currentPage = page;
console.log('当前页码：', page);
},
- headerCellClassName({ column, columnIndex }) {
- if (columnIndex === 0) {
- return 'custom-selection-header'
- }
- return ''
+ handleSizeChange(val) {
+ this.pageSize = val;
+ console.log('每页条数：', val);
+ },
+ 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 +182,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 +213,7 @@ $table-bg-color: #ecf1fd;
}
}
}
+
.welcome {
min-width: 900px;
min-height: 506px;
@@ -196,7 +246,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 +254,13 @@ $table-bg-color: #ecf1fd;
justify-content: space-between;
align-items: center;
margin-top: 20px;
+
.ctrl_btn {
display: flex;
align-items: center;
}
}
-.pagination-container {
- display: flex;
- justify-content: flex-end;
-}
-
-
.rotated-icon {
display: inline-block;
transform: rotate(45deg);
@@ -232,8 +277,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 +300,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 +330,86 @@ $table-bg-color: #ecf1fd;
}
}
-
\ No newline at end of file
+.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;
+}
+
+
+
From c3a1b0f6097b9f46bb8d743096f83f077c06b3c5 Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Mon, 31 Mar 2025 14:44:23 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E6=88=90=E2=80=9D=E8=8E=B7?=
=?UTF-8?q?=E5=8F=96=E7=94=A8=E6=88=B7=E5=88=97=E8=A1=A8=E2=80=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
main/manager-web/src/apis/module/admin.js | 13 +++--
main/manager-web/src/views/UserManagement.vue | 55 ++++++++++++-------
2 files changed, 43 insertions(+), 25 deletions(-)
diff --git a/main/manager-web/src/apis/module/admin.js b/main/manager-web/src/apis/module/admin.js
index 52468d6b..977437ab 100644
--- a/main/manager-web/src/apis/module/admin.js
+++ b/main/manager-web/src/apis/module/admin.js
@@ -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()
+ }
}
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index da8012be..b89a08b3 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -22,10 +22,10 @@
重置密码
禁用
+ @click="disableUser(scope.row)">禁用账户
恢复
+ @click="restoreUser(scope.row)">恢复账号
删除用户
@@ -76,25 +76,16 @@ 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: [],
currentPage: 1,
pageSize: 5,
total: 20
};
},
created() {
- adminApi.getUserList(({data}) => {
- //mock偶尔会返回-1导致出错，又会返回两个list，所以这里只取第一个
- this.userList = data.data[0].list;
- console.log('用户列表：', this.userList);
- })
+ this.fetchUsers();
},
- computed: {
+ computed: {
pageCount() {
return Math.ceil(this.total / this.pageSize);
},
@@ -115,9 +106,37 @@ export default {
}
},
methods: {
+ // 获取用户列表
+ fetchUsers() {
+ adminApi.getUserList(({data}) => {
+ if (data.code === 0) {
+ const responseData = data.data[0] || data.data
+
+ this.userList = responseData.list.map(user => ({
+ ...user,
+ status: user.status === '1' ? '正常' : '禁用'
+ }))
+
+ this.total = responseData.totalCount || 0
+ }
+ })
+ },
+
+ // 分页变化
+ handleCurrentChange(page) {
+ this.currentPage = page;
+ this.fetchUsers();
+ },
+
+ // 搜索
handleSearch() {
- // 模拟搜索逻辑
- console.log('执行查询，搜索号码：', this.searchPhone);
+ if (!this.searchPhone) {
+ this.fetchUsers()
+ return
+ }
+ this.userList = this.userList.filter(user =>
+ user.mobile.includes(this.searchPhone)
+ )
},
batchDelete() {
console.log('执行批量删除操作');
@@ -139,10 +158,6 @@ export default {
deleteUser(row) {
console.log('删除用户：', row);
},
- handleCurrentChange(page) {
- this.currentPage = page;
- console.log('当前页码：', page);
- },
handleSizeChange(val) {
this.pageSize = val;
console.log('每页条数：', val);
From 587b9e8800290c9b8a22c69c6e89c7165c6e8bb4 Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Mon, 31 Mar 2025 15:25:57 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=94=A8=E6=88=B7?=
=?UTF-8?q?=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=E7=9A=84=E6=90=9C=E7=B4=A2?=
=?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
main/manager-web/src/views/UserManagement.vue | 29 +++++++++----------
1 file changed, 14 insertions(+), 15 deletions(-)
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index b89a08b3..53697b8e 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -5,14 +5,14 @@
-
+
@@ -67,7 +67,6 @@