commit

.env

@@ -1,2 +1,2 @@
-REACT_APP_BASE_URL=http://162.254.37.253:8082/api/v1
-SKIP_PREFLIGHT_CHECK=true 
+SKIP_PREFLIGHT_CHECK=true
+GENERATE_SOURCEMAP=false

env

@@ -1 +1,2 @@
-REACT_APP_BASE_URL=http://14.29.101.215:30303/api/v1
+SKIP_PREFLIGHT_CHECK=true
+GENERATE_SOURCEMAP=false

src/api/chat.ts

@@ -1,4 +1,8 @@
 import $axios from '@/utils/axios'
 
 export const chat_userList = (params) => $axios.post('/admin/openImUserList', params)
-export const chat_groupList = (params) => $axios.post('/admin/openImGroupList', params)
+export const chat_groupList = (params) => $axios.post('/admin/openImGroupList', params)
+export const chat_groupMemberList = (params) => $axios.post('/admin/openImGroupMemberList', params)
+
+export const chat_inviteUsetToGroup = (params) => $axios.post('/admin/openImInviteUserToGroup', params)
+export const chat_kickGroup = (params) => $axios.post('/admin/openImKickGroup', params)

src/app.css

@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .text-overflow {
   display: -webkit-box;
   -webkit-box-orient: vertical;

src/components/MyTable/index.tsx

@@ -46,7 +46,8 @@ interface TableProps {
   sortConfig?: (arg0?: object) => any;
   expandedRowRender?: () => ReactNode;
   onExpand?: () => void;
-  header?: JSX.Element
+  header?: JSX.Element;
+  disableKeys?: string[]
 }
 
 const MyTable: FC<TableProps> = forwardRef(
@@ -73,7 +74,8 @@ const MyTable: FC<TableProps> = forwardRef(
       sortConfig,
       expandedRowRender,
       onExpand,
-      header
+      header,
+      disableKeys
     } = props
 
     // 搜索参数,如果有特殊需要处理的参数，就处理
@@ -134,6 +136,11 @@ const MyTable: FC<TableProps> = forwardRef(
       total = validData.total;
     }
 
+    if (validData.members) {
+      tableData = validData.members;
+      total = validData.total;
+    }
+
     // const validData = response?.data ? response.data : {}
     // const { rows: tableData = [], total } = validData
 
@@ -180,7 +187,12 @@ const MyTable: FC<TableProps> = forwardRef(
     // 复选框配置
     const rowSelection = {
       selectedRowKeys: selectedKeys,
-      onChange: onSelectChange
+      onChange: onSelectChange,
+      getCheckboxProps: (record: any) => {
+        return ({
+          disabled: disableKeys && disableKeys.indexOf(record.userID) > -1 ? true : false, // Column configuration not to be checked
+        })
+      },
     }
     // 判断是否有复选框显示
     const showCheckbox = onSelectRow ? { rowSelection } : {}
@@ -243,6 +255,9 @@ const MyTable: FC<TableProps> = forwardRef(
           ? searchForm.current.resetFields([...field])
           : searchForm.current.resetFields()
       },
+      getSelectedKeys(): CommonObjectType[] {
+        return selectedKeys
+      },
       // 获取当前列表数据
       getTableData(): CommonObjectType[] {
         return tableData

src/pages/chat/group-list/index.tsx

@@ -4,9 +4,13 @@ import BuzzFaceURL from "@/components/buzzup/BuzzFaceURL";
 import MyTable from "@/components/MyTable"
 import { getTime, isGender, isPlatformId } from "@/utils";
 import React from "react"
+import { useLocation, useHistory } from "react-router-dom";
+
 
 const ChatGroupList = () => {
 
+  const history = useHistory()
+
   const columns = [
     {
       title: '头像',
@@ -70,11 +74,13 @@ const ChatGroupList = () => {
     {
       title: 'options',
       fixed: 'right',
-      width: 100,
+      width: 250,
       render: (item) => (
-        <div className="flex">
-          <div className="text-4xl">群成员</div>
-          <div className="text-4xl">群成员</div>
+        <div className="" style={{ display: 'flex' }}>
+          <div style={{ fontSize: 12, color: '#1890ff', textWrap: 'nowrap', cursor: 'pointer' }} onClick={() => history.push(`/group-member?id=${item.groupInfo.groupID}`)}>群成员</div>
+          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>群聊设置</div>
+          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>全体禁言</div>
+          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>解散群组</div>
         </div>
       )
     }

src/pages/chat/group-member/index.tsx

@@ -0,0 +1,138 @@
+import { chat_groupMemberList, chat_inviteUsetToGroup, chat_userList } from "@/api/chat";
+import BuzzFaceURL from "@/components/buzzup/BuzzFaceURL";
+import MyTable from "@/components/MyTable";
+import { getTime, GRole, isPlatformId, joinGR } from "@/utils";
+import { Button, Modal, notification } from "antd";
+import React, { useRef, useState } from "react"
+import { useParams, useHistory } from "react-router-dom"
+
+const GroupMember = () => {
+
+  const hash = window.location.hash
+  const queryString = hash.split('?')[1];
+  const queryParams = new URLSearchParams(queryString)
+
+  const tableUserRef = useRef(null)
+  const tableMemberRef = useRef(null)
+
+  const [visible, setVisible] = useState(false)
+
+  const columns = [
+    {
+      title: '头像',
+      dataIndex: "",
+      width: 100,
+      render: (row) => (
+        <div>
+          <BuzzFaceURL faceUrl={row.faceURL} name={row.nickname} />
+        </div>
+      )
+    },
+    {
+      title: '用户ID',
+      dataIndex: "userID",
+      width: 150
+    },
+    {
+      title: '群员角色',
+      dataIndex: "roleLevel",
+      width: 150,
+      render: (role) => <div>{GRole[role]}</div>
+    },
+    {
+      title: '群昵称',
+      dataIndex: "nickname",
+      width: 150
+    },
+    {
+      title: '入群方式',
+      dataIndex: "joinSource",
+      width: 150,
+      render: (type) => <div>{joinGR[type]}</div>
+    },
+    {
+      title: '入群时间',
+      dataIndex: "joinTime",
+      render: (time) => <div>{getTime(time)}</div>
+    },
+    {
+      title: 'options',
+      fixed: 'right',
+      width: 200,
+      render: (item) => (
+        <div className="" style={{ display: 'flex' }}>
+          <div style={{ fontSize: 12, color: '#1890ff', textWrap: 'nowrap', cursor: 'pointer' }} >设置群身份</div>
+          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>禁言</div>
+          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>移除</div>
+        </div>
+      )
+    }
+  ]
+
+  const userColumnData = [
+    {
+      title: '头像',
+      dataIndex: "",
+      width: 100,
+      render: (row) => (
+        <div>
+          <BuzzFaceURL size={30} faceUrl={row.faceURL} name={row.nickname} />
+        </div>
+      )
+    },
+    {
+      title: '用户昵称',
+      dataIndex: "nickname",
+      width: 200
+    },
+    {
+      title: '用户ID',
+      dataIndex: "userID",
+    },
+  ]
+
+  const joinG = async () => {
+    const keys = tableUserRef.current.getSelectedKeys()
+    setVisible(false)
+    const res: any = await chat_inviteUsetToGroup({
+      groupID: queryParams.get('id'),
+      reason: '',
+      invitedUserIDs: keys
+    })
+    if (res.code === 0) {
+      tableMemberRef.current.update()
+      notification.success({
+        message: '添加成功'
+      })
+    }
+  }
+
+  return (
+    <>
+      <MyTable
+        header={
+          <div style={{ marginBottom: 15, display: 'flex', justifyContent: 'flex-end' }}>
+            <Button type="primary" onClick={() => setVisible(true)}>添加群成员</Button>
+          </div>
+        }
+        ref={tableMemberRef}
+        apiFun={chat_groupMemberList}
+        columns={columns}
+        extraProps={{
+          groupID: queryParams.get('id')
+        }}
+      />
+      {visible && <Modal title="添加群成员" visible={visible} closable width="70%" onCancel={() => setVisible(false)} onOk={joinG}>
+        <MyTable
+          ref={tableUserRef}
+          rowKey={"userID"}
+          apiFun={chat_userList}
+          columns={userColumnData}
+          disableKeys={tableMemberRef.current && tableMemberRef.current.getTableData().map(v => v.userID)}
+        />
+      </Modal>}
+    </>
+  )
+}
+
+export default GroupMember

src/pages/chat/user-list/index.tsx

@@ -29,14 +29,6 @@ const ChatUserList = () => {
       dataIndex: "userID",
       width: 300
     },
-    {
-      title: '性别',
-      dataIndex: "gender",
-      width: 200,
-      render: (gender) => (
-        <div>{isGender(gender)}</div>
-      )
-    },
     {
       title: 'BuzzID',
       dataIndex: "publicKey",

src/route/routes.ts

@@ -8,6 +8,7 @@ import LotteryTime from "@/pages/lotteryTime"
 import WalletVersion from "@/pages/walletVersion"
 import ChatUserList from "@/pages/chat/user-list"
 import ChatGroupList from "@/pages/chat/group-list"
+import GroupMember from "@/pages/chat/group-member"
 
 const routes = [
   {
@@ -19,6 +20,16 @@ const routes = [
     component: Home,
     routes: []
   },
+  {
+    path: '/group-member',
+    name: '群组成员',
+    exact: false,
+    key: 'group-member',
+    icon: HomeOutlined,
+    component: GroupMember,
+    remove: true,
+    routes: []
+  },
   {
     path: '/chat',
     name: 'IM模块',

src/utils/index.ts

@@ -5,6 +5,14 @@ import { store } from '@/store';
 
 const genders = ['保密', '男', '女']
 const platformId = ['-', 'IOS', 'Android', 'Windows', 'OSX', 'Web', 'MiniWeb', 'Linux', 'APad', 'IPad', 'Admin']
+export const joinGR = {
+  0: '0',
+  2: '邀请入群'
+}
+
+export const GRole = {
+  100: '群主', 60: '群管理员', 20: '普通群员'
+}
 
 export const isGender = (index: number | string) => {
   let _idx = typeof index === 'string' ? Number(index) : index