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

Web api admin

main/manager-web/src/apis/module/admin.js

@@ -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`)
+            .url(`${getServiceUrl()}/api/v1/admin/users/${id}`)
-            .method('GET')
+            .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()
     }
+
 }

main/manager-web/src/components/ViewPasswordDialog.vue

@@ -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>

main/manager-web/src/views/UserManagement.vue

@@ -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
+            <button v-for="page in visiblePages" :key="page" class="pagination-btn" :class="{ active: page === currentPage }" @click="goToPage(page)">
-              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}) => {
+        adminApi.getUserList({
-        if (data.code === 0) {
+            page: this.currentPage,
-          const responseData = data.data[0] || data.data;
+            limit: this.pageSize,
-          this.originalUserList = responseData.list.map(user => ({
+            mobile: this.searchPhone
-            ...user,
+        }, ({ data }) => {
-            status: user.status === '1' ? '正常' : '禁用'
+            if (data.code === 0) {
-          }));
+                this.userList = data.data.list.map(user => ({
-          this.userList = [...this.originalUserList];
+                    ...user,
-          this.total = responseData.totalCount || 0;
+                    status: user.status === '1' ? '正常' : '禁用'
-        }
+                }));
-      });
+                this.total = data.data.total;
-    },
+            }
-
+        });
-    // 分页变化
-    handleCurrentChange(page) {
-      this.currentPage = page;
-      this.fetchUsers();
     },
 
     // 搜索
     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() {
       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();
     },
   }
 };