129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
import { IGroup, IGroupMembers } from '@/pages/ChatLogs/ChatLogsType';
|
||
import { post } from '@/services/ajax';
|
||
import { useEffect, useRef, useState } from 'react';
|
||
|
||
import {
|
||
adminList,
|
||
getAdminList,
|
||
groupMembersCount,
|
||
groupMembersCount2,
|
||
groupMembersListItem,
|
||
} from '@/pages/ChatLogs/ChatUtils';
|
||
import { Spin } from 'antd';
|
||
import { stringify } from 'qs';
|
||
|
||
type Iprops = {
|
||
record: IGroup;
|
||
};
|
||
export const GroupDetailContent: React.FC<Iprops> = (props) => {
|
||
const { record } = props;
|
||
|
||
const [groupMembersList, setGroupMembersList] = useState<IGroupMembers[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const groupMembersObjRef = useRef<any>({});
|
||
|
||
useEffect(() => {
|
||
record.adminUserIDs = getAdminList(record.admin_list);
|
||
getList();
|
||
}, [props.record]);
|
||
|
||
const getList = () => {
|
||
setLoading(true);
|
||
post({
|
||
url: '/GroupMembers/GroupMembersList',
|
||
data: stringify({ group_id: props.record.group_id }),
|
||
}).then((res) => {
|
||
setLoading(false);
|
||
if (res.err_code == 0) {
|
||
if (Array.isArray(res.data)) {
|
||
groupMembersObjRef.current = {};
|
||
let owner: IGroupMembers[] = [];
|
||
let admin_list: IGroupMembers[] = [];
|
||
let other: IGroupMembers[] = [];
|
||
res.data.forEach((item: IGroupMembers) => {
|
||
item.avatar = item.staff_avatar || item.avatar;
|
||
groupMembersObjRef.current[item.user_id] = item;
|
||
if (item.user_id == record?.owner) {
|
||
owner.push(item);
|
||
} else if (record?.adminUserIDs.includes(item.user_id)) {
|
||
admin_list.push(item);
|
||
} else {
|
||
other.push(item);
|
||
}
|
||
});
|
||
// 对群员 创建者 > 管理员 > 普通成员 排序
|
||
setGroupMembersList([...owner, ...admin_list, ...other]);
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Spin spinning={loading} style={{ minHeight: 400, display: 'block' }}>
|
||
{groupMembersList.length ? (
|
||
<div>
|
||
<div style={{ marginBottom: 8, textIndent: '2em' }}>
|
||
群主：
|
||
{groupMembersObjRef.current[record?.owner as string]?.name}
|
||
</div>
|
||
<div style={{ marginBottom: 8 }}>
|
||
{adminList(record?.admin_list, groupMembersObjRef.current)}
|
||
</div>
|
||
<div style={{ marginBottom: 8 }}>创建时间：{record?.create_time}</div>
|
||
<div style={{ textIndent: '1em' }}>群公告：{record?.notice}</div>
|
||
<div
|
||
style={{
|
||
fontWeight: 'bold',
|
||
marginTop: 24,
|
||
marginBottom: 8,
|
||
borderBottom: '1px solid #ddd',
|
||
paddingBottom: 8,
|
||
}}
|
||
>
|
||
群成员 • {groupMembersList.length}
|
||
</div>
|
||
{groupMembersList.map((item) => {
|
||
return item.group_members_type == '2' || item.state == 0
|
||
? null
|
||
: groupMembersListItem(item, record);
|
||
})}
|
||
{groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
|
||
<div
|
||
style={{
|
||
fontWeight: 'bold',
|
||
marginTop: 24,
|
||
marginBottom: 8,
|
||
borderBottom: '1px solid #ddd',
|
||
paddingBottom: 8,
|
||
}}
|
||
>
|
||
微信：
|
||
</div>
|
||
) : null}
|
||
{groupMembersList.map((item) => {
|
||
return item.group_members_type == '1' || item.state == 0
|
||
? null
|
||
: groupMembersListItem(item, record);
|
||
})}
|
||
{groupMembersCount(groupMembersList, 0) != 0 ? (
|
||
<div
|
||
style={{
|
||
fontWeight: 'bold',
|
||
marginTop: 24,
|
||
marginBottom: 8,
|
||
borderBottom: '1px solid #ddd',
|
||
paddingBottom: 8,
|
||
}}
|
||
>
|
||
已离群：
|
||
</div>
|
||
) : null}
|
||
{groupMembersList.map((item) => {
|
||
return item.state == 1 ? null : groupMembersListItem(item, record);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
</Spin>
|
||
);
|
||
};
|