xiaozhi-esp32-server/main/manager-web/src/views/UserManagement.vue

<template>
  <div class="welcome">
    <HeaderBar />
    <el-main class="main" style="padding: 20px; display: flex; flex-direction: column;">
      <div class="top-area">
        <div class="page-title">用户管理</div>
        <div class="page-search">
          <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
          <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" style="width: 100%;">
          <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="操作">
            <template slot-scope="scope">
            <el-button size="mini" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
            <el-button size="mini" type="text"
              v-if="scope.row.status === '正常'"
              @click="disableUser(scope.row)">禁用</el-button>
            <el-button size="mini" type="text"
              v-if="scope.row.status === '禁用'"
              @click="restoreUser(scope.row)">恢复</el-button>
            <el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
		  
        <div class="table_bottom">
          <div class="ctrl_btn">
            <el-button size="mini" type="primary">全选</el-button>
            <el-button size="mini" type="success" icon="el-icon-circle-check">启用</el-button>
            <el-button size="mini" type="warning" icon="el-icon-circle-close">禁用</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete">删除</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>
        </div>
      </el-card>

      <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
        ©2025 xiaozhi-esp32-server
      </div>
    </el-main>
  </div>
</template>

<script>
import HeaderBar from "@/components/HeaderBar.vue";
import Api from '@/apis/api';
import adminApi from '@/apis/module/admin';


export default {
  components: { HeaderBar },
  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 }
      ],
      currentPage: 1,
      pageSize: 4,
      total: 20
    };
  },
  created() {
    adminApi.getUserList(({data}) => {
      //mock偶尔会返回-1导致出错，又会返回两个list，所以这里只取第一个
      this.userList = data.data[0].list;
      console.log('用户列表：', this.userList);
    })
  },
  methods: {
    handleSearch() {
      // 模拟搜索逻辑
      console.log('执行查询，搜索号码：', this.searchPhone);
    },
    batchDelete() {
      console.log('执行批量删除操作');
    },
    batchDisable() {
      console.log('执行批量禁用操作');
    },
    resetPassword(row) {
      console.log('重置用户密码，用户：', row);
    },
    disableUser(row) {
      row.status = '禁用';
      console.log('禁用用户：', row);
    },
    restoreUser(row) {
      row.status = '正常';
      console.log('恢复用户：', row);
    },
    deleteUser(row) {
      console.log('删除用户：', row);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      console.log('当前页码：', page);
    },
  }
};
</script>

<style lang="scss" scoped>
.main {
  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: 20px;
  .page-title {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
  }
  .page-search {
    display: flex;
    align-items: center;
    .btn-search {
      margin-left: 10px;
      background: linear-gradient(to right, #5778ff, #c793f3);
      width: 100px;
      color: #fff;
    }
  }
}
.welcome {
  min-width: 900px;
  min-height: 506px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url("@/assets/home/background.png");
  background-size: cover;
  background-position: center;
  -webkit-background-size: cover;
  -o-background-size: cover;
}

.user-search-operate {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.user-search-operate > * {
  margin-right: 10px;
}

.el-table__header th {
  background-color: #f5f7fa;
  color: #606266;
}

.user-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  opacity: 0.9;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table_bottom {
  display: flex;
  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;
}

</style>