user表role改为role_id；后台管理用户增删改查封装成component

2023-03-28 22:13:59 +08:00 · 2023-03-28 22:13:59 +08:00 · cf962a92da
commit cf962a92da
parent 880e4f8941
33 changed files with 865 additions and 281 deletions
--- a/backend/microservice-common/pom.xml
+++ b/backend/microservice-common/pom.xml
@ -28,5 +28,14 @@
            <artifactId>spring-beans</artifactId>
            <version>5.3.22</version>
        </dependency>
+        <!-- 分页 -->
+        <dependency>
+            <groupId>com.github.pagehelper</groupId>
+            <artifactId>pagehelper-spring-boot-starter</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.alibaba.fastjson2</groupId>
+            <artifactId>fastjson2</artifactId>
+        </dependency>
    </dependencies>
 </project>
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/enums/EditType.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/enums/EditType.java
@ -0,0 +1,17 @@
+package com.cxyxiaomo.epp.common.enums;
+
+public enum EditType {
+    PLAIN_TEXT("plainText"),
+    INPUT("input"),
+    SELECT("select");
+
+    private final String value;
+
+    private EditType(String value) {
+        this.value = value;
+    }
+
+    public String getValue() {
+        return value;
+    }
+}
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/enums/SearchType.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/enums/SearchType.java
@ -0,0 +1,17 @@
+package com.cxyxiaomo.epp.common.enums;
+
+public enum SearchType {
+    CAN_NOT_SEARCH(null),
+    INPUT("input"),
+    SELECT("select");
+
+    private final String value;
+
+    private SearchType(String value) {
+        this.value = value;
+    }
+
+    public String getValue() {
+        return value;
+    }
+}
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/pojo/Role.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/pojo/Role.java
@ -0,0 +1,18 @@
+package com.cxyxiaomo.epp.common.pojo;
+
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import lombok.experimental.Accessors;
+
+import java.io.Serializable;
+
+// 数据库关系映射
+
+@Data
+@NoArgsConstructor
+@Accessors(chain = true) // 链式写法
+// 微服务必须要实现Serializable
+public class Role implements Serializable {
+    private Integer id;
+    private String roleName;
+}
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/pojo/User.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/pojo/User.java
@ -20,7 +20,7 @@ public class User implements Serializable {
    private String realname;
    private String idNumber;
    private String phoneNumber;
-    private Integer role;
+    private Integer roleId;
    private String buildingId;
    private String doorplate;
    private String permission;
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/query/PageQuery.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/query/PageQuery.java
@ -0,0 +1,27 @@
+package com.cxyxiaomo.epp.common.query;
+
+import lombok.Getter;
+
+@Getter
+public class PageQuery {
+
+    private int pageIndex = 1; // 第几页
+    private int pageSize = 10; // 每页几条数据
+
+    public void setPageIndex(int page) {
+        if (page < 1) {
+            page = 1;
+        }
+        this.pageIndex = page;
+    }
+
+    public void setPageSize(int pageSize) {
+        if (pageSize < 1) {
+            pageSize = 1;
+        }
+        if (pageSize > 20) {
+            pageSize = 20;
+        }
+        this.pageSize = pageSize;
+    }
+}
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/utils/PageTableFieldBuilder.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/utils/PageTableFieldBuilder.java
@ -0,0 +1,58 @@
+package com.cxyxiaomo.epp.common.utils;
+
+import com.alibaba.fastjson2.JSONArray;
+import com.alibaba.fastjson2.JSONObject;
+import com.cxyxiaomo.epp.common.enums.EditType;
+import com.cxyxiaomo.epp.common.enums.SearchType;
+
+public class PageTableFieldBuilder {
+
+    private JSONArray columns;
+
+    public static PageTableFieldBuilder create() {
+        PageTableFieldBuilder builder = new PageTableFieldBuilder();
+        builder.columns = new JSONArray();
+        return builder;
+    }
+
+    /**
+     * @param field          对应 POJO 中的属性名称 <br>
+     *                       用于新增/修改弹窗 <br>
+     * @param prop           显示的字段名 如果需要翻译（例如roleId->roleName）则填写翻译后的字段 <br>
+     *                       用于渲染表格时指定显示列 <br>
+     * @param label          列的显示名称 <br>
+     * @param canSearch      该字段能否在表格上方被筛选 <br>
+     * @param searchType     该筛选字段显示为什么类型 <br>
+     * @param canEdit        该字段能否在新增/修改弹窗中被修改 <br>
+     * @param editType       新增/修改弹窗中该字段显示为什么类型 <br>
+     * @param defaultWhenAdd 新增弹窗中的默认值 <br>
+     * @return
+     */
+    public PageTableFieldBuilder add(String field, String prop, String label,
+                                     Boolean canSearch, SearchType searchType,
+                                     Boolean canEdit, EditType editType, Object defaultWhenAdd) {
+        JSONObject jsonObject = new JSONObject(2);
+        // 表格数据
+        jsonObject.put("prop", prop);
+        jsonObject.put("label", label);
+
+        // 上方筛选条件
+        jsonObject.put("canSearch", canSearch);
+        jsonObject.put("searchType", searchType.getValue());
+
+        // 新增、修改弹窗
+        jsonObject.put("field", field);
+        jsonObject.put("canEdit", canEdit);
+        jsonObject.put("editType", editType.getValue());
+
+        // 新增弹窗 字段默认值
+        jsonObject.put("default", defaultWhenAdd);
+
+        columns.add(jsonObject);
+        return this;
+    }
+
+    public JSONArray build() {
+        return columns;
+    }
+}
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/utils/PageTableFieldMapperBuilder.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/utils/PageTableFieldMapperBuilder.java
@ -0,0 +1,42 @@
+package com.cxyxiaomo.epp.common.utils;
+
+import com.alibaba.fastjson2.JSONArray;
+import com.alibaba.fastjson2.JSONObject;
+
+import java.util.HashMap;
+
+public class PageTableFieldMapperBuilder {
+
+    private JSONArray columns;
+
+    public static PageTableFieldMapperBuilder create() {
+        PageTableFieldMapperBuilder builder = new PageTableFieldMapperBuilder();
+        builder.columns = new JSONArray();
+        return builder;
+    }
+
+    // public PageTableFieldMapperBuilder add(String prop, String label, List mapper) {
+    //     if (mapper == null || mapper.size() == 0) {
+    //         return this;
+    //     }
+    //     JSONObject jsonObject = new JSONObject(2);
+    //     jsonObject.put("key", prop);
+    //     jsonObject.put("value", label);
+    //     jsonObject.put("mapper", mapper);
+    //     columns.add(jsonObject);
+    //     return this;
+    // }
+
+    public PageTableFieldMapperBuilder add(String prop, String label, HashMap mapper) {
+        JSONObject jsonObject = new JSONObject(2);
+        jsonObject.put("key", prop);
+        jsonObject.put("value", label);
+        jsonObject.put("mapper", mapper);
+        columns.add(jsonObject);
+        return this;
+    }
+
+    public JSONArray build() {
+        return columns;
+    }
+}
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/utils/PageUtils.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/utils/PageUtils.java
@ -0,0 +1,32 @@
+package com.cxyxiaomo.epp.common.utils;
+
+import com.github.pagehelper.PageInfo;
+import org.springframework.beans.BeanUtils;
+
+import java.util.List;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+public class PageUtils {
+
+    /**
+     * 转换PageInfo中的List
+     *
+     * @param pageInfoPo 原来的pageInfo
+     * @param convert    转换方式
+     * @param <P>        原来的类型
+     * @param <V>        转换后的类型
+     * @return 转换后的pageInfo
+     */
+    public static <P, V> PageInfo<V> convert(PageInfo<P> pageInfoPo, Function<P, V> convert) {
+        //视图pageInfo
+        PageInfo<V> vPageInfo = new PageInfo<>();
+        //copy属性
+        BeanUtils.copyProperties(pageInfoPo, vPageInfo);
+        //转化
+        List<V> vList = pageInfoPo.getList().stream().map(convert).collect(Collectors.toList());
+        //赋值
+        vPageInfo.setList(vList);
+        return vPageInfo;
+    }
+}
--- a/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/vo/UserVO.java
+++ b/backend/microservice-common/src/main/java/com/cxyxiaomo/epp/common/vo/UserVO.java
@ -8,6 +8,8 @@ import org.springframework.beans.BeanUtils;

 import java.io.Serializable;
 import java.time.LocalDateTime;
+import java.util.List;
+import java.util.stream.Collectors;

 // 数据库关系映射

@ -21,7 +23,7 @@ public class UserVO implements Serializable {
    private String realname;
    private String idNumber;
    private String phoneNumber;
-    private Integer role;
+    private Integer roleId;
    private String buildingId;
    private String doorplate;
    private String permission;
@ -35,4 +37,12 @@ public class UserVO implements Serializable {
        BeanUtils.copyProperties(user, userVO);
        return userVO;
    }
+
+    public static List<UserVO> convertFrom(List<User> userList) {
+        if (userList == null) {
+            return null;
+        }
+        List<UserVO> userVOList = userList.stream().map(UserVO::convertFrom).collect(Collectors.toList());
+        return userVOList;
+    }
 }
--- a/backend/microservice-provider-user-8001/pom.xml
+++ b/backend/microservice-provider-user-8001/pom.xml
@ -82,6 +82,16 @@
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>

+        <!-- 分页 -->
+        <dependency>
+            <groupId>com.github.pagehelper</groupId>
+            <artifactId>pagehelper-spring-boot-starter</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>com.alibaba.fastjson2</groupId>
+            <artifactId>fastjson2</artifactId>
+        </dependency>
+
        <!-- 密码 Hash 加密 -->
        <dependency>
            <groupId>commons-codec</groupId>
@ -89,11 +99,10 @@
        </dependency>

        <!-- 热部署 -->
-        <!--<dependency>-->
-        <!--    <groupId>org.springframework.boot</groupId>-->
-        <!--    <artifactId>spring-boot-devtools</artifactId>-->
-        <!--    <version>2.7.5</version>-->
-        <!--</dependency>-->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+        </dependency>

    </dependencies>

--- a/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/controller/UserController.java
+++ b/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/controller/UserController.java
@ -1,25 +1,37 @@
 package com.cxyxiaomo.epp.user.controller;

+import com.alibaba.fastjson2.JSONArray;
+import com.alibaba.fastjson2.JSONObject;
+import com.cxyxiaomo.epp.common.enums.EditType;
+import com.cxyxiaomo.epp.common.enums.SearchType;
+import com.cxyxiaomo.epp.common.pojo.Role;
 import com.cxyxiaomo.epp.common.pojo.User;
+import com.cxyxiaomo.epp.common.query.PageQuery;
 import com.cxyxiaomo.epp.common.response.Res;
+import com.cxyxiaomo.epp.common.utils.PageTableFieldBuilder;
+import com.cxyxiaomo.epp.common.utils.PageTableFieldMapperBuilder;
 import com.cxyxiaomo.epp.common.vo.UserVO;
-import com.cxyxiaomo.epp.user.service.UserServiceImpl;
+import com.cxyxiaomo.epp.user.service.RoleService;
+import com.cxyxiaomo.epp.user.service.UserService;
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
 import org.apache.commons.codec.digest.DigestUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.*;

 import java.util.HashMap;
+import java.util.List;

@Controller
@RequestMapping("/user")
 public class UserController {

    @Autowired
-    private UserServiceImpl userService;
+    private UserService userService;
+
+    @Autowired
+    private RoleService roleService;

    /**
     * 用户登录
@ -58,6 +70,71 @@ public class UserController {
        return userService.getUserById(id);
    }

+    /**
+     * 获取用户列表
+     *
+     * @return
+     */
+    @GetMapping("/manage/getUserList")
+    @ResponseBody
+    public Res getUserList(PageQuery pageQuery, UserVO userVO) {
+
+        // 查询分页数据
+        PageHelper.startPage(pageQuery.getPageIndex(), pageQuery.getPageSize());
+        List<User> userList = userService.getUserList(userVO);
+        PageInfo<User> userPageInfo = new PageInfo<>(userList);
+        List<User> list = userPageInfo.getList();
+        List<UserVO> voList = UserVO.convertFrom(list);
+
+        // 指定前端表格显示列
+        JSONArray columns = PageTableFieldBuilder.create()
+                .add("username", "username", "用户名",
+                        true, SearchType.INPUT,
+                        false, EditType.PLAIN_TEXT, null)
+                .add("roleId", "roleName", "角色",
+                        true, SearchType.SELECT,
+                        true, EditType.SELECT, 0)
+                .add("realname", "realname", "真实姓名",
+                        true, SearchType.INPUT,
+                        true, EditType.INPUT, "")
+                .add("phoneNumber", "phoneNumber", "电话",
+                        true, SearchType.INPUT,
+                        true, EditType.INPUT, "")
+                .add("idNumber", "idNumber", "身份证号",
+                        true, SearchType.INPUT,
+                        true, EditType.INPUT, "")
+                .add("buildingId", "buildingId", "门栋/单元号",
+                        true, SearchType.INPUT,
+                        true, EditType.INPUT, "")
+                .add("doorplate", "doorplate", "门牌号",
+                        true, SearchType.INPUT,
+                        true, EditType.INPUT, "")
+                .build();
+
+        // 指定需要翻译的字段
+        // role -> roleName
+        List<Role> roleList = roleService.getRoleList();
+        HashMap roleMap = new HashMap();
+        for (Role role : roleList) {
+            roleMap.put(role.getId(), role.getRoleName());
+        }
+        // build
+        JSONArray fieldMapper = PageTableFieldMapperBuilder.create()
+                .add("roleId", "roleName", roleMap)
+                .build();
+
+        // 拼装返回结果
+        JSONObject map = new JSONObject(2);
+        map.put("total", userPageInfo.getTotal());
+        map.put("list", voList);
+        map.put("columns", columns);
+        map.put("fieldMapper", fieldMapper);
+
+        // 返回结果
+        return Res.success(map);
+    }
+
+
    @RequestMapping("/person")
    @ResponseBody
    public User person(String username) {
--- a/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/dao/RoleDao.java
+++ b/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/dao/RoleDao.java
@ -0,0 +1,14 @@
+package com.cxyxiaomo.epp.user.dao;
+
+import com.cxyxiaomo.epp.common.pojo.Role;
+import org.apache.ibatis.annotations.Mapper;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Mapper
+@Repository
+public interface RoleDao {
+
+    public List<Role> getRoleList();
+}
--- a/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/dao/UserDao.java
+++ b/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/dao/UserDao.java
@ -1,9 +1,12 @@
 package com.cxyxiaomo.epp.user.dao;

 import com.cxyxiaomo.epp.common.pojo.User;
+import com.cxyxiaomo.epp.common.vo.UserVO;
 import org.apache.ibatis.annotations.Mapper;
 import org.springframework.stereotype.Repository;

+import java.util.List;
+
@Mapper
@Repository
 public interface UserDao {
@ -13,4 +16,6 @@ public interface UserDao {
    public User getUserById(Long id);

    User getUserByUsername(String username);
+
+    public List<User> getUserList(UserVO userVO);
 }
--- a/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/service/RoleService.java
+++ b/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/service/RoleService.java
@ -0,0 +1,20 @@
+package com.cxyxiaomo.epp.user.service;
+
+import com.cxyxiaomo.epp.common.pojo.Role;
+import com.cxyxiaomo.epp.user.dao.RoleDao;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class RoleService {
+
+    @Autowired
+    private RoleDao roleDao;
+
+    public List<Role> getRoleList() {
+        List<Role> roleList = roleDao.getRoleList();
+        return roleList;
+    }
+}
--- a/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/service/UserService.java
+++ b/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/service/UserService.java
@ -1,10 +1,29 @@
 package com.cxyxiaomo.epp.user.service;

 import com.cxyxiaomo.epp.common.pojo.User;
+import com.cxyxiaomo.epp.common.vo.UserVO;
+import com.cxyxiaomo.epp.user.dao.UserDao;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;

-public interface UserService {
+import java.util.List;

-    User getUserByUsername(String username);
+@Service
+public class UserService {

-    User getUserById(Long id);
+    @Autowired
+    private UserDao userDao;
+
+    public User getUserByUsername(String username) {
+        return userDao.getUserByUsername(username);
+    }
+
+    public User getUserById(Long id) {
+        return userDao.getUserById(id);
+    }
+
+    public List<User> getUserList(UserVO userVO) {
+        List<User> userList = userDao.getUserList(userVO);
+        return userList;
+    }
 }
--- a/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/service/UserServiceImpl.java
+++ b/backend/microservice-provider-user-8001/src/main/java/com/cxyxiaomo/epp/user/service/UserServiceImpl.java
@ -1,23 +0,0 @@
-package com.cxyxiaomo.epp.user.service;
-
-import com.cxyxiaomo.epp.common.pojo.User;
-import com.cxyxiaomo.epp.user.dao.UserDao;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.stereotype.Service;
-
-@Service
-public class UserServiceImpl implements UserService {
-
-    @Autowired
-    private UserDao userDao;
-
-    @Override
-    public User getUserByUsername(String username) {
-        return userDao.getUserByUsername(username);
-    }
-
-    @Override
-    public User getUserById(Long id) {
-        return userDao.getUserById(id);
-    }
-}
--- a/backend/microservice-provider-user-8001/src/main/resources/mybatis/mapper/RoleMapper.xml
+++ b/backend/microservice-provider-user-8001/src/main/resources/mybatis/mapper/RoleMapper.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.cxyxiaomo.epp.user.dao.RoleDao">
+    <select id="getRoleList" resultType="com.cxyxiaomo.epp.common.pojo.Role">
+        select * from role
+    </select>
+</mapper>
--- a/backend/microservice-provider-user-8001/src/main/resources/mybatis/mapper/UserMapper.xml
+++ b/backend/microservice-provider-user-8001/src/main/resources/mybatis/mapper/UserMapper.xml
@ -8,10 +8,39 @@
        VALUES (#{username}, #{password})
    </insert>
    <select id="getUserById" parameterType="java.lang.Long" resultType="com.cxyxiaomo.epp.common.pojo.User">
-        SELECT * FROM user
+        SELECT *
+        FROM user
        WHERE id = #{id}
    </select>
    <select id="getUserByUsername" resultType="com.cxyxiaomo.epp.common.pojo.User">
-        select * from user where username = #{username}
+        select *
+        from user
+        where username = #{username}
+    </select>
+    <select id="getUserList" resultType="com.cxyxiaomo.epp.common.pojo.User">
+        select *
+        from user
+        where 1 = 1
+        <if test="roleId != null">
+            AND role_id = #{roleId}
+        </if>
+        <if test="username != null &amp;&amp; username != ''">
+            AND username LIKE concat('%',#{username,jdbcType=VARCHAR},'%')
+        </if>
+        <if test="realname != null &amp;&amp; realname != ''">
+            AND realname LIKE concat('%',#{realname,jdbcType=VARCHAR},'%')
+        </if>
+        <if test="idNumber != null &amp;&amp; idNumber != ''">
+            AND id_number LIKE concat('%',#{idNumber,jdbcType=VARCHAR},'%')
+        </if>
+        <if test="phoneNumber != null &amp;&amp; phoneNumber != ''">
+            AND phone_number LIKE concat('%',#{phoneNumber,jdbcType=VARCHAR},'%')
+        </if>
+        <if test="buildingId != null &amp;&amp; buildingId != ''">
+            AND building_id LIKE concat('%',#{buildingId,jdbcType=VARCHAR},'%')
+        </if>
+        <if test="doorplate != null &amp;&amp; doorplate != ''">
+            AND doorplate LIKE concat('%',#{doorplate,jdbcType=VARCHAR},'%')
+        </if>
    </select>
 </mapper>
--- a/backend/pom.xml
+++ b/backend/pom.xml
@ -135,6 +135,13 @@
                <version>2.7.6</version>
            </dependency>

+            <!-- 分页 -->
+            <dependency>
+                <groupId>com.github.pagehelper</groupId>
+                <artifactId>pagehelper-spring-boot-starter</artifactId>
+                <version>1.4.6</version>
+            </dependency>
+
            <!-- Fastjson -->
            <dependency>
                <groupId>com.alibaba.fastjson2</groupId>
--- a/database/epp.sql
+++ b/database/epp.sql
@ -11,7 +11,7 @@
 Target Server Version : 80012
 File Encoding         : 65001

- Date: 28/03/2023 13:51:00
+ Date: 28/03/2023 22:11:06
 */

 SET NAMES utf8mb4;
@ -348,6 +348,26 @@ INSERT INTO `report` VALUES (59, 3, '用户 密码user', '2023-03-17 00:27:21',
 INSERT INTO `report` VALUES (60, 3, '用户 密码user', '2023-03-20 00:47:22', '0', '湖北省武汉市武昌区武车路');
 INSERT INTO `report` VALUES (61, 3, '用户 密码user', '2023-03-23 22:24:14', '0', '湖北省武汉市武昌区修远路');

+-- ----------------------------
+-- Table structure for role
+-- ----------------------------
+DROP TABLE IF EXISTS `role`;
+CREATE TABLE `role`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'role_id',
+  `role_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT 'roleName',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of role
+-- ----------------------------
+INSERT INTO `role` VALUES (1, '系统管理员');
+INSERT INTO `role` VALUES (2, '社区管理员');
+INSERT INTO `role` VALUES (3, '社区居民_房主');
+INSERT INTO `role` VALUES (4, '社区居民_家庭成员');
+INSERT INTO `role` VALUES (5, '社区居民_租客');
+INSERT INTO `role` VALUES (6, '访客');
+
 -- ----------------------------
 -- Table structure for setting
 -- ----------------------------
@ -375,20 +395,30 @@ CREATE TABLE `user`  (
  `realname` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '真实姓名',
  `id_number` varchar(18) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '身份证号',
  `phone_number` varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '手机号',
-  `role` int(11) NOT NULL COMMENT '角色 (1-超级管理员 2-工作人员 3-社区居民_房主 4-社区居民_家庭成员 5-社区居民_租客 6-访客)',
+  `role_id` int(11) NOT NULL COMMENT '角色id',
  `building_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '门栋号+单元号',
  `doorplate` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '门牌号',
  `permission` int(11) NOT NULL DEFAULT 0 COMMENT '进出权限 (0-无 1-继承(普通居民) 2-永久 3-限时)',
  `permission_time` datetime NULL DEFAULT NULL COMMENT '进出权限失效时间',
-  PRIMARY KEY (`id`) USING BTREE
+  PRIMARY KEY (`id`) USING BTREE,
+  UNIQUE INDEX `username`(`username`) USING BTREE
 ) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = DYNAMIC;

 -- ----------------------------
 -- Records of user
 -- ----------------------------
-INSERT INTO `user` VALUES (1, 'root', '99adc231b045331e514a516b4b7680f588e3823213abe901738bc3ad67b2f6fcb3c64efb93d18002588d3ccc1a49efbae1ce20cb43df36b38651f11fa75678e8', '管理员 密码root', '420111111111111111', NULL, 1, NULL, NULL, 0, NULL);
-INSERT INTO `user` VALUES (2, 'admin', 'c7ad44cbad762a5da0a452f9e854fdc1e0e7a52a38015f23f3eab1d80b931dd472634dfac71cd34ebc35d16ab7fb8a90c81f975113d6c7538dc69dd8de9077ec', '社区管理员 密码admin', '420111111111111111', NULL, 2, NULL, NULL, 0, NULL);
-INSERT INTO `user` VALUES (3, 'user', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户 密码user', '420111111111111111', NULL, 3, NULL, NULL, 0, NULL);
+INSERT INTO `user` VALUES (1, 'root', '99adc231b045331e514a516b4b7680f588e3823213abe901738bc3ad67b2f6fcb3c64efb93d18002588d3ccc1a49efbae1ce20cb43df36b38651f11fa75678e8', '管理员 密码root', '420111111111111111', '110', 1, '28-1', '1101', 0, NULL);
+INSERT INTO `user` VALUES (2, 'admin', 'c7ad44cbad762a5da0a452f9e854fdc1e0e7a52a38015f23f3eab1d80b931dd472634dfac71cd34ebc35d16ab7fb8a90c81f975113d6c7538dc69dd8de9077ec', '社区管理员 密码admin', '420111111111111111', '111', 2, '16-3', '0203', 0, NULL);
+INSERT INTO `user` VALUES (3, 'user', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (4, 'user2', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户2 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (5, 'user3', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户3 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (6, 'user4', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户4 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (7, 'user5', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户5 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (8, 'user6', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户6 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (9, 'user7', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户7 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (10, 'user8', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户8 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (11, 'user9', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户9 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);
+INSERT INTO `user` VALUES (12, 'user10', 'b14361404c078ffd549c03db443c3fede2f3e534d73f78f77301ed97d4a436a9fd9db05ee8b325c0ad36438b43fec8510c204fc1c1edb21d0941c00e9e2c1ce2', '用户10 密码user', '420111111111111111', '112', 3, '20-2', '0802', 0, NULL);

 -- ----------------------------
 -- Table structure for visitor1
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@ -51,6 +51,7 @@ declare module '@vue/runtime-core' {
    ElTree: typeof import('element-plus/es')['ElTree']
    ElUpload: typeof import('element-plus/es')['ElUpload']
    Header: typeof import('./src/components/header.vue')['default']
+    ManageList: typeof import('./src/components/manage-list.vue')['default']
    Popover: typeof import('./src/components/popover.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
--- a/frontend/src/api/user.js
+++ b/frontend/src/api/user.js
@ -12,6 +12,26 @@ export function userLogin({ username, password }) {
        params: {
            "username": username,
            "password": password,
-        }
+        },
+    });
+};
+
+/**
+ * 用户退出登录
+ * @returns
+ */
+export function userLogout() {
+    return null;
+};
+
+/**
+ * 获取用户列表
+ * @returns
+ */
+export function getUserList(params) {
+    return send_request({
+        url: '/user/manage/getUserList',
+        method: 'GET',
+        params: params,
    });
 };
--- a/frontend/src/components/header.vue
+++ b/frontend/src/components/header.vue
@ -52,6 +52,7 @@ import { ElMessage } from 'element-plus';
 import send_request from '../utils/send_request';
 import imgurl from '../assets/img/img.jpg';
 import settings from '../utils/settings';
+import * as userApi from '../api/user';

 const username: string | null = localStorage.getItem('ms_username');
 const message: number = 2;
@ -74,10 +75,7 @@ const router = useRouter();
 const handleCommand = (command: string) => {
    if (command == 'loginout') {
        // 发送退出登录请求
-        send_request({
-            url: 'v1/user/logout',
-            method: "POST",
-        } as any);
+        userApi.userLogout()
        // 关闭全部标签 (销毁页面对象)
        const tags = useTagsStore();
        tags.clearTags();
--- a/frontend/src/components/manage-list.vue
+++ b/frontend/src/components/manage-list.vue
@ -0,0 +1,305 @@
+<template>
+    <div class="manage-list-container">
+        <div v-if="tableData">
+            <!-- 筛选 -->
+            <div class="handle-box">
+                <template v-for="field in searchFields">
+                    <el-input v-if="field.searchType == 'input'" v-model="query[field.field]"
+                        @keyup.enter.native="handleSearch" :placeholder="field.placeholder"
+                        class="handle-input mr10"></el-input>
+                    <el-select v-else-if="field.searchType == 'select'" v-model="query[field.field]" @change="handleSearch"
+                        :placeholder="field.placeholder" class="handle-select mr10">
+                        <el-option key="" :label="'全部' + field.placeholder" value=""></el-option>
+                        <el-option v-for="optKey in Object.keys(field.options)" :key="optKey" :label="field.options[optKey]" :value="optKey"></el-option>
+                    </el-select>
+                    <template v-else>{{ field }}</template>
+                </template>
+                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
+                <el-button type="primary" :icon="Plus" @click="handleNew" v-permiss="props.editPermiss">新增</el-button>
+            </div>
+            <div>
+                {{ query }}
+            </div>
+            <!-- 表格 -->
+            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
+                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
+                <el-table-column v-for="field in tableFields" :prop="field.prop" :label="field.label"
+                    align="center"></el-table-column>
+                <el-table-column label="操作" width="220" align="center">
+                    <template #default="scope">
+                        <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
+                            v-permiss="props.editPermiss">
+                            编辑
+                        </el-button>
+                        <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
+                            v-permiss="props.editPermiss">
+                            删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!-- 分页 -->
+            <div class="pagination">
+                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
+                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
+            </div>
+        </div>
+        <div v-else style="padding-top: 11vh;">
+            <el-empty description="暂无数据" />
+        </div>
+
+        <!-- 新增 / 编辑弹出框 -->
+        <el-dialog title="编辑" v-model="editVisible" width="30%">
+            <el-form label-width="70px">
+                <el-form-item label="用户名">
+                    <el-input v-model="form.username"></el-input>
+                </el-form-item>
+                <el-form-item label="角色">
+                    <el-select v-model="form.roleName" placeholder="角色类型" class="handle-select mr10">
+                        <el-option key="1" label="管理员" value="管理员"></el-option>
+                        <el-option key="2" label="普通用户" value="普通用户"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="电话">
+                    <el-input v-model="form.telephone"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="editVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="saveEdit">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
+import send_request from '../utils/send_request';
+
+const props = defineProps({
+    // 获取列表 接口函数
+    'getListFunc': {
+        type: Function,
+        required: true,
+    },
+    // 修改、删除权限
+    'editPermiss': {
+        type: String,
+        required: true,
+    }
+})
+
+// 筛选列
+const searchFields: any = ref([]);
+
+const query = reactive({
+    pageIndex: 1,
+    pageSize: 10
+    // 其他筛选条件
+});
+
+// 表格数据
+const tableData: any = ref(null);
+
+// 表格列
+const tableFields: any = ref([]);
+
+// 总页数
+const pageTotal = ref(0);
+
+// 新增/编辑 弹窗列
+const dialogFields: any = ref([]);
+
+// 新增/编辑 弹窗
+const editVisible = ref(false);
+let form = reactive({} as any);
+let idx: number = -1;
+
+// 获取表格数据
+const getData = async () => {
+    props.getListFunc(query).then((data: any) => {
+        console.log(data)
+
+        // 深拷贝一份
+        let _tableData = JSON.parse(JSON.stringify(data.list));
+        // 字段映射
+        let fieldsMapper = data.fieldMapper;
+        if (fieldsMapper) {
+            // 对于每一个需要映射的字段
+            for (let m of fieldsMapper) {
+                // console.log("mapper", m)
+                _tableData = _tableData.map((row: any) => {
+                    let oldValue = row[m.key]
+                    let newValue = m.mapper[oldValue]
+                    row[m.value] = newValue
+                    return row
+                })
+            }
+        }
+
+        // 表格列
+        tableFields.value = data.columns
+            .map((field: any) => {
+                return { prop: field.prop, label: field.label }
+            });
+        // 表格数据
+        tableData.value = _tableData;
+        // 总页数
+        pageTotal.value = data.total;
+
+        // 筛选字段
+        searchFields.value = data.columns
+            .filter((field: any) => field.canSearch)
+            .map((field: any) => {
+                let f: any = {
+                    placeholder: field.label,
+                    field: field.field,
+                    searchType: field.searchType,
+                }
+                switch (field.searchType) {
+                    case 'select':
+                        f.options = fieldsMapper.find((field: any) => field.key == f.field).mapper
+                        break;
+                    default:
+                        break;
+                }
+                return f
+            });
+        console.log("searchFields", searchFields.value);
+
+        // 新增/修改弹窗列
+        dialogFields.value = data.columns
+            .map((field: any) => {
+                if (typeof (query[field.field]) === "undefined") {
+                    query[field.field] = ''
+                }
+                let f: any = {
+                    label: field.label,
+                    field: field.field,
+                    editType: field.editType,
+                }
+                return f
+            });
+        console.log("dialogFields", dialogFields.value);
+
+        // 拼装 新增/修改弹窗 字段
+        // form =
+    })
+};
+
+// 查询按钮
+const handleSearch = () => {
+    query.pageIndex = 1;
+    getData();
+};
+
+// 分页导航
+const handlePageChange = (val: number) => {
+    query.pageIndex = val;
+    getData();
+};
+
+// 删除操作
+const handleDelete = (index: number, row: any) => {
+    idx = index;
+    // 二次确认删除
+    ElMessageBox.confirm('确定要删除吗？', '提示', { type: 'warning' })
+        .then(async () => {
+            await send_request('v1/user/delete', "POST", {
+                userId: row.id
+            }, (data: any) => {
+                // console.log("delete index", index);
+                // console.log(data);
+                if (data) {
+                    ElMessage.success('删除成功');
+                    tableData.value.splice(idx, 1);
+                }
+            });
+
+        })
+        .catch(() => { });
+};
+
+// 点击进入编辑框
+const handleEdit = (index: number, row: any) => {
+    idx = index;
+    form.id = row.id;
+    form.username = row.username;
+    form.roleName = row.roleName;
+    form.roleId = row.roleId;
+    form.telephone = row.telephone;
+    editVisible.value = true;
+};
+
+// 编辑保存到数据库
+const saveEdit = async () => {
+    editVisible.value = false;
+    await send_request('v1/user/edit', "POST", {
+        id: form.id,
+        username: form.username,
+        roleId: form.roleId,
+        roleName: form.roleName,
+        telephone: form.telephone
+    }, (data: any) => {
+        if (data) {
+            ElMessage.success('修改成功');
+            tableData.value[idx].username = form.username;
+            tableData.value[idx].roleName = form.roleName;
+            tableData.value[idx].telephone = form.telephone;
+        }
+    });
+
+};
+
+const handleNew = () => {
+    editVisible.value = true;
+    ElMessage.success(`修改第 ${idx + 1} 行成功`);
+    tableData.value[idx].username = form.username;
+    tableData.value[idx].roleName = form.roleName;
+    tableData.value[idx].telephone = form.telephone;
+};
+
+// 网页加载完成后加载数据
+onMounted(() => {
+    getData();
+});
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+    line-height: 2.5em;
+}
+
+.handle-select {
+    width: 150px;
+}
+
+.handle-input {
+    width: 150px;
+}
+
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+
+.red {
+    color: #F56C6C;
+}
+
+.mr10 {
+    margin-right: 10px;
+}
+
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+</style>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -20,8 +20,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 const permiss = usePermissStore();
 app.directive('permiss', { // 元素级权限控制
    mounted(el, binding) {
-        const role = localStorage.getItem('ms_role_id');
-        if (!permiss[role as string] || !permiss[role as string].includes(binding.value as string)) {
+        const roleId = localStorage.getItem('ms_role_id');
+        const currentUserPermiss = permiss[roleId as string];
+        if (!currentUserPermiss || !currentUserPermiss.includes(binding.value as string)) {
            el['hidden'] = true;
        }
    },
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@ -199,9 +199,9 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
    document.title = `${to.meta.title} | ${settings.siteTitle}`;
    const username = localStorage.getItem('ms_username');
-    const role = localStorage.getItem('ms_role_id');
+    const roleId = localStorage.getItem('ms_role_id');
    const permiss = usePermissStore();
-    const currentUserPermiss = permiss[role as string];
+    const currentUserPermiss = permiss[roleId as string];
    // console.log("currentUserPermiss", currentUserPermiss)
    if (!username && to.path !== '/login') {
        next({
--- a/frontend/src/views/login.vue
+++ b/frontend/src/views/login.vue
@ -121,7 +121,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
            localStorage.setItem('ms_username', data.userInfo?.username);
            localStorage.setItem('ms_realname', data.userInfo?.realname);
            localStorage.setItem('ms_user_id', data.userInfo?.id);
-            localStorage.setItem('ms_role_id', data.userInfo?.role);
+            localStorage.setItem('ms_role_id', data.userInfo?.roleId);

            let targetRoute: any = router.currentRoute?.value?.query?.redirectTo
            if (targetRoute && !targetRoute.includes('/login')) {
--- a/frontend/src/views/privilege-user-setting.vue
+++ b/frontend/src/views/privilege-user-setting.vue
@ -1,221 +1,11 @@
 <template>
-	<div>
-		<div class="container">
-			<!-- 筛选 -->
-			<div class="handle-box">
-				<!-- <el-select v-model="query.address" placeholder="角色类型" class="handle-select mr10">
-					<el-option key="1" label="管理员" value="管理员"></el-option>
-					<el-option key="2" label="普通用户" value="普通用户"></el-option>
-				</el-select> -->
-				<!-- <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
-				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button> -->
-				<el-button type="primary" :icon="Plus" @click="handleNew">新增用户</el-button>
-			</div>
-			<!-- 表格 -->
-			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
-				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
-				<el-table-column prop="username" label="用户名" align="center"></el-table-column>
-				<el-table-column prop="roleName" label="角色" align="center"></el-table-column>
-				<el-table-column prop="telephone" label="电话" align="center"></el-table-column>
-				<el-table-column prop="roleId" label="" align="center" v-if="false"></el-table-column>
-				<el-table-column label="操作" width="220" align="center">
-					<template #default="scope">
-						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
-							v-permiss="'user-setting'">
-							编辑
-						</el-button>
-						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
-							v-permiss="'user-setting'">
-							删除
-						</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-			<!-- 分页 -->
-			<div class="pagination">
-				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
-					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
-			</div>
-		</div>
-
-		<!-- 编辑弹出框 -->
-		<el-dialog title="编辑" v-model="editVisible" width="30%">
-			<el-form label-width="70px">
-				<el-form-item label="用户名">
-					<el-input v-model="form.username"></el-input>
-				</el-form-item>
-				<el-form-item label="角色">
-					<el-select v-model="form.roleName" placeholder="角色类型" class="handle-select mr10">
-						<el-option key="1" label="管理员" value="管理员"></el-option>
-						<el-option key="2" label="普通用户" value="普通用户"></el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="电话">
-					<el-input v-model="form.telephone"></el-input>
-				</el-form-item>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="editVisible = false">取 消</el-button>
-					<el-button type="primary" @click="saveEdit">确 定</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
+    <div class="container">
+        <manageList :get-list-func="userApi.getUserList" editPermiss="privilege-user-setting" />
+    </div>
 </template>

 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { ElLoading } from 'element-plus';
-import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
-import send_request from '../utils/send_request';
-
-const query = reactive({
-	id: 0,
-	address: '',
-	name: '',
-	roleId: 0,
-	pageIndex: 1,
-	pageSize: 5
-});
-const tableData: any = ref([]);
-const pageTotal = ref(0);
-// 获取表格数据
-const getData = async () => {
-
-	const loading = ElLoading.service({
-		lock: true,
-		text: '请稍候',
-		background: 'rgba(0, 0, 0, 0.7)',
-	});
-
-	await send_request('v1/user/list', "GET", {
-		page: query.pageIndex,
-		pageSize: query.pageSize
-	}, (data: any) => {
-		console.log(data)
-		tableData.value = data.list;
-		pageTotal.value = data.total;
-	});
-	loading.close();
-};
-getData();
-
-// 查询操作
-const handleSearch = () => {
-	query.pageIndex = 1;
-	getData();
-};
-// 分页导航
-const handlePageChange = (val: number) => {
-	query.pageIndex = val;
-	getData();
-};
-
-// 删除操作
-const handleDelete = (index: number, row: any) => {
-	idx = index;
-	// 二次确认删除
-
-	ElMessageBox.confirm('确定要删除吗？', '提示', {
-		type: 'warning'
-	})
-		.then(async () => {
-			await send_request('v1/user/delete', "POST", {
-				userId: row.id
-			}, (data: any) => {
-				// console.log("delete index", index);
-				// console.log(data);
-				if (data) {
-					ElMessage.success('删除成功');
-					tableData.value.splice(idx, 1);
-				}
-			});
-
-		})
-		.catch(() => { });
-};
-
-// 表格编辑时弹窗和保存
-const editVisible = ref(false);
-let form = reactive({
-	id: 0,
-	username: '',
-	roleId: 0,
-	roleName: '',
-	telephone: ''
-});
-let idx: number = -1;
-// 点击进入编辑框
-const handleEdit = (index: number, row: any) => {
-	idx = index;
-	form.id = row.id;
-	form.username = row.username;
-	form.roleName = row.roleName;
-	form.roleId = row.roleId;
-	form.telephone = row.telephone;
-	editVisible.value = true;
-};
-// 编辑保存到数据库
-const saveEdit = async () => {
-	editVisible.value = false;
-	await send_request('v1/user/edit', "POST", {
-		id: form.id,
-		username: form.username,
-		roleId: form.roleId,
-		roleName: form.roleName,
-		telephone: form.telephone
-	}, (data: any) => {
-		if (data) {
-			ElMessage.success('修改成功');
-			tableData.value[idx].username = form.username;
-			tableData.value[idx].roleName = form.roleName;
-			tableData.value[idx].telephone = form.telephone;
-		}
-	});
-
-};
-
-const handleNew = () => {
-	editVisible.value = true;
-	ElMessage.success(`修改第 ${idx + 1} 行成功`);
-	tableData.value[idx].username = form.username;
-	tableData.value[idx].roleName = form.roleName;
-	tableData.value[idx].telephone = form.telephone;
-};
+import manageList from '../components/manage-list.vue';
+import * as userApi from '../api/user';
 </script>
-
-<style scoped>
-.handle-box {
-	margin-bottom: 20px;
-}
-
-.handle-select {
-	width: 120px;
-}
-
-.handle-input {
-	width: 300px;
-}
-
-.table {
-	width: 100%;
-	font-size: 14px;
-}
-
-.red {
-	color: #F56C6C;
-}
-
-.mr10 {
-	margin-right: 10px;
-}
-
-.table-td-thumb {
-	display: block;
-	margin: auto;
-	width: 40px;
-	height: 40px;
-}
-</style>
--- a/postman-collection/epp.postman_collection.json
+++ b/postman-collection/epp.postman_collection.json
@ -130,6 +130,49 @@
 						}
 					},
 					"response": []
+				},
+				{
+					"name": "[微服务] 管理后台 获取用户列表",
+					"request": {
+						"method": "GET",
+						"header": [],
+						"url": {
+							"raw": "http://localhost:8001/user/manage/getUserList",
+							"protocol": "http",
+							"host": [
+								"localhost"
+							],
+							"port": "8001",
+							"path": [
+								"user",
+								"manage",
+								"getUserList"
+							]
+						}
+					},
+					"response": []
+				},
+				{
+					"name": "[线上] 管理后台 获取用户列表",
+					"request": {
+						"method": "GET",
+						"header": [],
+						"url": {
+							"raw": "http://epp.only4.work/user/manage/getUserList",
+							"protocol": "http",
+							"host": [
+								"epp",
+								"only4",
+								"work"
+							],
+							"path": [
+								"user",
+								"manage",
+								"getUserList"
+							]
+						}
+					},
+					"response": []
 				}
 			]
 		},
--- a/weixin-miniprogram/pages/index/index.js
+++ b/weixin-miniprogram/pages/index/index.js
@ -32,7 +32,7 @@ Page({
      return
    } else {
      // 用户已登录
-      let userGroup = getUserGroupByRole(userInfo.role)
+      let userGroup = getUserGroupByRole(userInfo.roleId)
      this.setData({
        debugText: JSON.stringify(options, null, 4),
        userInfo: userInfo,
--- a/weixin-miniprogram/pages/index/login.js
+++ b/weixin-miniprogram/pages/index/login.js
@ -114,13 +114,13 @@ Page({
          let result = d.data;
          if (result.success) {
            // 登录成功
-            if ([3, 4, 5, 6].includes(result.data.userInfo.role)) {
+            if (![3, 4, 5, 6].includes(result.data.userInfo.roleId)) {
              wx.showModal({
                title: '你不是社区居民',
                content: '管理员请前往网页版登录',
                showCancel: false,
                complete: (res) => {
-                  // 
+                  //
                }
              })
              return
--- a/weixin-miniprogram/utils/const.js
+++ b/weixin-miniprogram/utils/const.js
@ -1,12 +1,12 @@
 module.exports = {
  user: {
    role: {
-      ADMIN: 0,
-      STAFF: 1,
-      RESIDENTS_OWNER: 2,
-      RESIDENTS_MEMBER: 3,
-      RESIDENTS_TENENT: 4,
-      VISITOR: 5
+      ADMIN: 1,
+      STAFF: 2,
+      RESIDENTS_OWNER: 3,
+      RESIDENTS_MEMBER: 4,
+      RESIDENTS_TENENT: 5,
+      VISITOR: 6
    }
  }
 }