chore: 部分完成用户组页面数据展示

后端： - 用户组列表接口增加返回用户头像、昵称等信息前端： - 用户组页面分组下用户展示头像、昵称 - 用户组页面member分组展示注册用户数量
jorben · Jul 19, 2024 · 73473e9 · 73473e9
1 parent affd4d5
commit 73473e9
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 23 deletions.
diff --git a/dal/userdal.go b/dal/userdal.go
@@ -95,6 +95,15 @@ func (u *UserDal) GetUserList(where *model.User, offset int, limit int) (*model.
 	}, nil
 }
 
+// GetUserListbyIds 根据用户ID列表获取用户基本信息
+func (u *UserDal) GetUserListbyIds(idList []int) ([]*model.User, error) {
+	var list []*model.User
+	if err := u.db.Model(&model.User{}).Where("ID IN ?", idList).Find(&list).Error; err != nil {
+		return nil, err
+	}
+	return list, nil
+}
+
 // GetUserListbySearch 用户列表查询接口
 func (u *UserDal) GetUserListbySearch(searchKey string, offset int, limit int, order []string) (*model.UserList, error) {
 	var count int64

diff --git a/go.mod b/go.mod
@@ -53,6 +53,7 @@ require (
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/pelletier/go-toml/v2 v2.2.2 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230126093431-47fa9a501578 // indirect
+	github.com/spf13/cast v1.6.0 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.12 // indirect
 	go.uber.org/multierr v1.11.0 // indirect

diff --git a/go.sum b/go.sum
@@ -153,6 +153,8 @@ github.com/remyoudompheng/bigfft v0.0.0-20230126093431-47fa9a501578 h1:VstopitMQ
 github.com/remyoudompheng/bigfft v0.0.0-20230126093431-47fa9a501578/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
 github.com/rogpeppe/go-internal v1.12.0 h1:exVL4IDcn6na9z1rAb56Vxr+CgyK3nn3O+epU5NdKM8=
 github.com/rogpeppe/go-internal v1.12.0/go.mod h1:E+RYuTGaKKdloAfM02xzb0FW3Paa99yedzYV+kq4uf4=
+github.com/spf13/cast v1.6.0 h1:GEiTHELF+vaR5dhz3VqZfFSzZjYbgeKDpBxQVS4GYJ0=
+github.com/spf13/cast v1.6.0/go.mod h1:ancEpBxwJDODSW/UG4rDrAqiKolqNNh2DX3mk86cAdo=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=

diff --git a/service/userservice.go b/service/userservice.go
@@ -4,6 +4,7 @@ import (
 	"errors"
 	"fmt"
 	"github.com/gin-gonic/gin"
+	"github.com/spf13/cast"
 	"gorm.io/gorm"
 	"league/dal"
 	"league/log"
@@ -27,7 +28,7 @@ func NewUserService(ctx *gin.Context) *UserService {
 }
 
 // GetGroups 获取用户组及所包含的用户ID
-func (u *UserService) GetGroups() (map[string][]string, error) {
+func (u *UserService) GetGroups() (map[string][]*model.User, error) {
 	groups, err := u.CasbinDal.GetAllGroups()
 	if err != nil {
 		log.Errorf(u.Ctx, "Casbin get all groups failed, err: %s", err.Error())
@@ -36,7 +37,7 @@ func (u *UserService) GetGroups() (map[string][]string, error) {
 	if len(groups) == 0 {
 		return nil, nil
 	}
-	result := make(map[string][]string, len(groups))
+	result := make(map[string][]*model.User, len(groups))
 	// 遍历用户组 获取用户
 	for _, group := range groups {
 		users, err := u.CasbinDal.GetGroupUsers(group)
@@ -45,7 +46,21 @@ func (u *UserService) GetGroups() (map[string][]string, error) {
 			log.Errorf(u.Ctx, "Casbin get group users failed, group: %s, err: %s", group, err.Error())
 			continue
 		}
-		result[group] = users
+		// 批量转换ID类型
+		idList, err := cast.ToIntSliceE(users)
+		if err != nil {
+			result[group] = nil
+			log.Errorf(u.Ctx, "user list cast failed, err: %s", err.Error())
+			continue
+		}
+		// 获取用户头像、昵称
+		userinfo, err := u.UserDal.GetUserListbyIds(idList)
+		if err != nil {
+			result[group] = nil
+			log.Errorf(u.Ctx, "get user list by ids failed, err: %s", err.Error())
+			continue
+		}
+		result[group] = userinfo
 	}
 	return result, nil
 }

diff --git a/web/src/pages/admin/user/UserGroup.js b/web/src/pages/admin/user/UserGroup.js
@@ -10,15 +10,20 @@ import {
   Modal,
   message,
   Input,
+  Form,
 } from "antd";
 import { UsergroupAddOutlined, PlusOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
 import ApiClient from "../../../services/client";
+import CONSTANTS from "../../../constants";
 
 const UserGroup = () => {
   const [isLoading, setIsLoading] = React.useState(true);
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [groupList, setGroupList] = React.useState(null);
+  const [memberCount, setMemberCount] = React.useState(0);
 
+  const navigate = useNavigate();
   const [messageApi, contextHolder] = message.useMessage();
   React.useEffect(() => {
     const getGroups = async () => {
@@ -38,8 +43,36 @@ const UserGroup = () => {
           setIsLoading(false);
         });
     };
+
+    const getMembers = async () => {
+      ApiClient.get("/admin/user/list")
+        .then((response) => {
+          if (response.data?.code === 0) {
+            setMemberCount(response.data?.data?.Count || 0);
+          } else if (
+            response.data?.code === CONSTANTS.ERRCODE.ErrAuthNoLogin ||
+            response.data?.code === CONSTANTS.ERRCODE.ErrAuthUnauthorized
+          ) {
+            messageApi.error(response.data?.message, () => {
+              navigate(
+                `/login?redirect_uri=${encodeURIComponent(
+                  window.location.pathname
+                )}`
+              );
+            });
+          } else {
+            messageApi.error(response.data?.message);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          messageApi.error("请求失败，请稍后重试！");
+        });
+    };
+
     getGroups();
-  }, [messageApi]);
+    getMembers();
+  }, [messageApi, navigate]);
 
   const loadingStyle = {
     padding: 50,
@@ -65,18 +98,19 @@ const UserGroup = () => {
           <Divider orientation="left">分组：{group}</Divider>
         </Col>
       </Row>
-      <Row>
+      <Row style={{ marginBottom: "20px" }}>
         <Col span={24}>
-          <Space>
+          <Space split={<Divider type="vertical" />}>
             {Array.isArray(users) &&
               users.length > 0 &&
               users.map((u) => (
-                <Avatar
-                  style={{ backgroundColor: "#fde3cf", color: "#f56a00" }}
-                  key={u}
-                >
-                  {u}
-                </Avatar>
+                <Space key={u.ID}>
+                  <Avatar size="large" src={u?.avatar} />
+                  <Space direction="vertical" size="4">
+                    <span>用户ID: {u?.ID}</span>
+                    <span>昵称: {u?.nickname}</span>
+                  </Space>
+                </Space>
               ))}
           </Space>
         </Col>
@@ -122,7 +156,7 @@ const UserGroup = () => {
         <Col span={24}>
           <Space>
             <Avatar style={{ backgroundColor: "#00a2ae" }}>M</Avatar>
-            <span>共计256位注册用户</span>
+            <span>共计 {memberCount} 位注册用户</span>
           </Space>
         </Col>
       </Row>
@@ -134,16 +168,32 @@ const UserGroup = () => {
         okText="确认添加"
         cancelText="取消"
       >
-        <Space direction="vertical">
-          <Space>
-            <span>组名称：</span>
-            <Input placeholder="请输入分组名称，仅支持英文字母" />
-          </Space>
-          <Space>
-            <span>用户ID：</span>
-            <Input placeholder="请输入加入该分组的用户ID" />
-          </Space>
-        </Space>
+        <Form
+          labelCol={{
+            span: 6,
+          }}
+          wrapperCol={{
+            span: 16,
+          }}
+          style={{ margin: "40px 0" }}
+        >
+          <Form.Item
+            label="分组名称"
+            name="groupName"
+            rules={[{ required: true, message: "请输入分组名称" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="用户ID"
+            name="userId"
+            rules={[
+              { required: true, message: "请输入一个添加到该分组的用户ID" },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
       </Modal>
       {contextHolder}
     </>