Public/scrm.antd
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

开发: 修改页面, 修改引入录音js

Browse Source
This commit is contained in:
zhengw
2023-04-19 15:30:29 +08:00
parent 079739223a
commit 21c1790dc4
15 changed files with 423 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

586
src/pages/ChatLogs/index.tsx
View File

@@ -5,12 +5,13 @@ import { Drawer, Form, Input, Tabs } from 'antd';
import Spin from 'antd/lib/spin';
import { stringify } from 'qs';
import React, { useEffect, useRef, useState } from 'react';
import { CustDetailContent } from '../CustomList/components/CustDetailContent';
import { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
import { adminList, formatTags, groupMembersCount, groupMembersCount2 } from './ChatUtils';
import { adminList, getAdminList, groupMembersCount, groupMembersCount2 } from './ChatUtils';
import { ChatBar } from './components/ChatBar';
import { ChatTime } from './components/ChatTime';
import { Gender } from './components/Gender';
import { AdminSvg, OwnerSvg } from './components/Svgs';
import styles from './index.module.scss';
const ChatLogs: React.FC = () => {
@@ -187,11 +188,22 @@ const ChatLogs: React.FC = () => {
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 == selectGroupRef.current?.owner) {
owner.push(item);
} else if (selectGroupRef.current?.adminUserIDs.includes(item.user_id)) {
admin_list.push(item);
} else {
other.push(item);
}
});
setGroupMembersList(res.data);
// 对群员 创建者 > 管理员 > 普通成员 排序
setGroupMembersList([...owner, ...admin_list, ...other]);
page(1);
}
}
@@ -256,18 +268,79 @@ const ChatLogs: React.FC = () => {
getStaffsList();
observer.observe(chatBoxRef.current, { childList: true });
const myScript = document.createElement('script');
myScript.src = '/public/scripts/amrnb.js';
myScript.async = false;
document.body.appendChild(myScript);
return () => {
document.removeEventListener('click', show, false);
observer.disconnect();
document.body.removeChild(myScript);
};
}, []);
// 外部联系人Item
const custFollowsListItem = (item: ICustFollow) => {
return (
<div
key={item.cust_id}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
}`}
onClick={() => {
tabKeyRef.current = tabKey;
setSelectInnerStaff(undefined);
selectInnerStaffRef.current = undefined;
setSelectGroup(undefined);
selectGroupRef.current = undefined;
setSelectCustFollow(item);
selectCustFollowRef.current = item;
page(1);
}}
style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
>
<div className={styles.avatar} style={{ background: item?.avatar ? '#fff' : '' }}>
<img src={item.avatar} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} />
</div>
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
<div className={styles.chatAName} title={item.name}>
{item.name}
</div>
<div>{item.remark}</div>
</div>
</div>
);
};
// 客户群聊列表项
const groupListItem = (item: IGroup) => {
return (
<div
key={item.group_id}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${selectGroup?.group_id == item.group_id ? styles.active : ''}`}
onClick={() => {
tabKeyRef.current = tabKey;
setSelectCustFollow(undefined);
selectCustFollowRef.current = undefined;
setSelectInnerStaff(undefined);
selectInnerStaffRef.current = undefined;
setSelectGroup(item);
selectGroupRef.current = item;
selectGroupRef.current.adminUserIDs = getAdminList(item.admin_list);
getGroupMembersList();
}}
style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
>
<div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
<div className={styles.chatAName} title={item.name}>
{item.name || '未定义群名'}
</div>
<div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
</div>
</div>
);
};
// const { notification } = App.useApp();
const tabContent = () => {
if (tabKey == '0') {
@@ -282,9 +355,7 @@ const ChatLogs: React.FC = () => {
return (
<div
key={`${item.user_id}_${item.name}`}
className={`${styles.chatB} ${
selectInnerStaff?.user_id == item.user_id ? styles.active : ''
}`}
className={`${styles.chatB} ${selectInnerStaff?.user_id == item.user_id ? styles.active : ''}`}
onClick={() => {
tabKeyRef.current = tabKey;
@@ -324,9 +395,7 @@ const ChatLogs: React.FC = () => {
);
})
) : (
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
暂无内部联系人
</div>
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>暂无内部联系人</div>
)}
</>
);
@@ -335,53 +404,12 @@ const ChatLogs: React.FC = () => {
<>
{custFollowsList.length ? (
custFollowsList.map((item) => {
if (item.state == 0) return null;
return (
<div
key={item.cust_id}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
}`}
onClick={() => {
tabKeyRef.current = tabKey;
setSelectInnerStaff(undefined);
selectInnerStaffRef.current = undefined;
setSelectGroup(undefined);
selectGroupRef.current = undefined;
setSelectCustFollow(item);
selectCustFollowRef.current = item;
page(1);
}}
style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
>
<div className={styles.avatar} style={{ background: item?.avatar ? '#fff' : '' }}>
<img
src={item.avatar}
alt=""
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
/>
</div>
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
<div className={styles.chatAName} title={item.name}>
{item.name}
</div>
<div>{item.remark}</div>
</div>
</div>
);
return item.state == 0 ? null : custFollowsListItem(item);
})
) : (
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
暂无外部联系人
</div>
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>暂无外部联系人</div>
)}
<div
className={`${styles.delFollowList} ${
delFollowListShow ? styles.delFollowListShow : ''
}`}
>
<div className={`${styles.delFollowList} ${delFollowListShow ? styles.delFollowListShow : ''}`}>
<div
className={styles.delFollowListBar}
onClick={() => {
@@ -391,51 +419,9 @@ const ChatLogs: React.FC = () => {
<span>已删联系人</span>
{delFollowListShow ? <UpOutlined /> : <DownOutlined />}
</div>
<div
className={`${styles.delFollowListBox} ${
delFollowListShow ? styles.delFollowListBoxShow : ''
}`}
>
<div className={`${styles.delFollowListBox} ${delFollowListShow ? styles.delFollowListBoxShow : ''}`}>
{custFollowsList.map((item) => {
if (item.state == 1) return null;
return (
<div
key={item.cust_id}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
}`}
onClick={() => {
tabKeyRef.current = tabKey;
setSelectInnerStaff(undefined);
selectInnerStaffRef.current = undefined;
setSelectGroup(undefined);
selectGroupRef.current = undefined;
setSelectCustFollow(item);
selectCustFollowRef.current = item;
page(1);
}}
style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
>
<div
className={styles.avatar}
style={{ background: item?.avatar ? '#fff' : '' }}
>
<img
src={item.avatar}
alt=""
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
/>
</div>
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
<div className={styles.chatAName} title={item.name}>
{item.name}
</div>
<div>{item.remark}</div>
</div>
</div>
);
return item.state == 1 ? null : custFollowsListItem(item);
})}
</div>
</div>
@@ -446,45 +432,12 @@ const ChatLogs: React.FC = () => {
<>
{groupList.length ? (
groupList.map((item) => {
if (item.state == 0) return null;
return (
<div
key={item.group_id}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
selectGroup?.group_id == item.group_id ? styles.active : ''
}`}
onClick={() => {
tabKeyRef.current = tabKey;
setSelectCustFollow(undefined);
selectCustFollowRef.current = undefined;
setSelectInnerStaff(undefined);
selectInnerStaffRef.current = undefined;
setSelectGroup(item);
selectGroupRef.current = item;
getGroupMembersList();
}}
style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
>
<div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
<div className={styles.chatAName} title={item.name}>
{item.name || '未定义群名'}
</div>
<div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
</div>
</div>
);
return item.state == 0 ? null : groupListItem(item);
})
) : (
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
暂无客户群聊
</div>
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>暂无客户群聊</div>
)}
<div
className={`${styles.delFollowList} ${
delGroupListShow ? styles.delFollowListShow : ''
}`}
>
<div className={`${styles.delFollowList} ${delGroupListShow ? styles.delFollowListShow : ''}`}>
<div
className={styles.delFollowListBar}
onClick={() => {
@@ -494,40 +447,9 @@ const ChatLogs: React.FC = () => {
<span>已解散的群</span>
{delGroupListShow ? <UpOutlined /> : <DownOutlined />}
</div>
<div
className={`${styles.delFollowListBox} ${
delGroupListShow ? styles.delFollowListBoxShow : ''
}`}
>
<div className={`${styles.delFollowListBox} ${delGroupListShow ? styles.delFollowListBoxShow : ''}`}>
{groupList.map((item) => {
if (item.state == 1) return null;
return (
<div
key={item.group_id}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
selectGroup?.group_id == item.group_id ? styles.active : ''
}`}
onClick={() => {
tabKeyRef.current = tabKey;
setSelectCustFollow(undefined);
selectCustFollowRef.current = undefined;
setSelectInnerStaff(undefined);
selectInnerStaffRef.current = undefined;
setSelectGroup(item);
selectGroupRef.current = item;
getGroupMembersList();
}}
style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
>
<div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
<div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
<div className={styles.chatAName} title={item.name}>
{item.name || '未定义群名'}
</div>
<div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
</div>
</div>
);
return item.state == 1 ? null : groupListItem(item);
})}
</div>
</div>
@@ -536,6 +458,104 @@ const ChatLogs: React.FC = () => {
}
};
// 删除的联系人/群
const tabContentDel = () => {
if (tabKey == '0') {
return <></>;
} else if (tabKey == '1') {
return (
<div className={`${styles.delFollowList} ${delFollowListShow ? styles.delFollowListShow : ''}`}>
<div
className={styles.delFollowListBar}
onClick={() => {
setDelFollowListShow(!delFollowListShow);
}}
>
<span>已删联系人</span>
{delFollowListShow ? <UpOutlined /> : <DownOutlined />}
</div>
<div className={`${styles.delFollowListBox} ${delFollowListShow ? styles.delFollowListBoxShow : ''}`}>
{custFollowsList.map((item) => {
return item.state == 1 ? null : custFollowsListItem(item);
})}
</div>
</div>
);
} else {
return (
<div className={`${styles.delFollowList} ${delGroupListShow ? styles.delFollowListShow : ''}`}>
<div
className={styles.delFollowListBar}
onClick={() => {
setDelGroupListShow(!delGroupListShow);
}}
>
<span>已解散的群</span>
{delGroupListShow ? <UpOutlined /> : <DownOutlined />}
</div>
<div className={`${styles.delFollowListBox} ${delGroupListShow ? styles.delFollowListBoxShow : ''}`}>
{groupList.map((item) => {
return item.state == 1 ? null : groupListItem(item);
})}
</div>
</div>
);
}
};
// 群 Drawer 群员
const groupMembersListItem = (item: IGroupMembers) => {
return (
<div
key={item.user_id}
style={{
display: 'inline-flex',
justifyContent: 'flex-start',
alignItems: 'center',
width: 80,
flexDirection: 'column',
verticalAlign: 'top',
marginTop: 12,
}}
>
<div className={styles.inGroupAvatar}>
{item.avatar ? (
<img
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'cover',
borderRadius: 4,
}}
src={item.avatar}
alt=""
/>
) : item.name ? (
item.name[0]
) : (
''
)}
{item.user_id == selectGroupRef.current?.owner ? <OwnerSvg /> : null}
{selectGroupRef.current?.adminUserIDs?.includes(item.user_id) ? <AdminSvg /> : null}
</div>
<div
style={{
padding: '0 4px',
whiteSpace: 'nowrap',
minWidth: 0,
textOverflow: 'ellipsis',
overflow: 'hidden',
width: 72,
textAlign: 'center',
}}
title={item.name}
>
{item.name}
</div>
</div>
);
};
return (
<PageContainer>
<div className={styles.box}>
@@ -646,6 +666,7 @@ const ChatLogs: React.FC = () => {
}}
/>
<div className={styles.chatBBox}>{tabContent()}</div>
{tabContentDel()}
</div>
<div style={{ flex: 1 }}>
<div className={styles.logTop}>
@@ -687,53 +708,15 @@ const ChatLogs: React.FC = () => {
{tabKeyRef.current == '0' ? (
<DepartmentMembersDetail record={selectInnerStaff as IStaffsItem} />
) : tabKeyRef.current == '1' ? (
<div>
<div
style={{
display: 'flex',
borderBottom: '1px solid #ddd',
paddingBottom: 12,
marginBottom: 12,
}}
>
<div className={styles.modalAvatar}>
<img src={selectCustFollow?.avatar} alt="" />
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ fontSize: 16 }}>
<span style={{ marginRight: 8 }}>{selectCustFollow?.name}</span>
<Gender gender={selectCustFollow?.gender} />
</div>
<div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
</div>
</div>
<div>备注名称：{selectCustFollow?.remark}</div>
<div
style={{
paddingTop: 12,
marginBottom: 12,
paddingBottom: 12,
borderBottom: '1px solid #ddd',
fontSize: 16,
fontWeight: 'bold',
}}
>
标签
</div>
{formatTags(selectCustFollow?.tags)}
</div>
<CustDetailContent record={selectCustFollow as ICustFollow} />
) : (
<div>
<div style={{ marginBottom: 8, textIndent: '2em' }}>
群主：
{groupMembersObjRef.current[selectGroupRef.current?.owner as string]?.name}
</div>
<div style={{ marginBottom: 8 }}>
{adminList(selectGroupRef.current?.admin_list, groupMembersObjRef.current)}
</div>
<div style={{ marginBottom: 8 }}>
创建时间：{selectGroupRef.current?.create_time}
</div>
<div style={{ marginBottom: 8 }}>{adminList(selectGroupRef.current?.admin_list, groupMembersObjRef.current)}</div>
<div style={{ marginBottom: 8 }}>创建时间：{selectGroupRef.current?.create_time}</div>
<div style={{ textIndent: '1em' }}>群公告：{selectGroupRef.current?.notice}</div>
<div
style={{
@@ -747,54 +730,7 @@ const ChatLogs: React.FC = () => {
群成员 • {groupMembersList.length}
</div>
{groupMembersList.map((item) => {
if (item.group_members_type == '2' || item.state == 0) return null;
return (
<div
key={item.user_id}
style={{
display: 'inline-flex',
justifyContent: 'flex-start',
alignItems: 'center',
width: 80,
flexDirection: 'column',
verticalAlign: 'top',
marginTop: 12,
}}
>
<div className={styles.avatar}>
{item.avatar ? (
<img
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'cover',
borderRadius: 4,
}}
src={item.avatar}
alt=""
/>
) : item.name ? (
item.name[0]
) : (
''
)}
</div>
<div
style={{
padding: '0 4px',
whiteSpace: 'nowrap',
minWidth: 0,
textOverflow: 'ellipsis',
overflow: 'hidden',
width: 72,
textAlign: 'center',
}}
title={item.name}
>
{item.name}
</div>
</div>
);
return item.group_members_type == '2' || item.state == 0 ? null : groupMembersListItem(item);
})}
{groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
<div
@@ -810,54 +746,7 @@ const ChatLogs: React.FC = () => {
</div>
) : null}
{groupMembersList.map((item) => {
if (item.group_members_type == '1' || item.state == 0) return null;
return (
<div
key={item.user_id}
style={{
display: 'inline-flex',
justifyContent: 'flex-start',
alignItems: 'center',
width: 80,
flexDirection: 'column',
verticalAlign: 'top',
marginTop: 12,
}}
>
<div className={styles.avatar}>
{item.avatar ? (
<img
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'cover',
borderRadius: 4,
}}
src={item.avatar}
alt=""
/>
) : item.name ? (
item.name[0]
) : (
''
)}
</div>
<div
style={{
padding: '0 4px',
whiteSpace: 'nowrap',
minWidth: 0,
textOverflow: 'ellipsis',
overflow: 'hidden',
width: 72,
textAlign: 'center',
}}
title={item.name}
>
{item.name}
</div>
</div>
);
return item.group_members_type == '1' || item.state == 0 ? null : groupMembersListItem(item);
})}
{groupMembersCount(groupMembersList, 0) != 0 ? (
<div
@@ -873,54 +762,7 @@ const ChatLogs: React.FC = () => {
</div>
) : null}
{groupMembersList.map((item) => {
if (item.state == 1) return null;
return (
<div
key={item.user_id}
style={{
display: 'inline-flex',
justifyContent: 'flex-start',
alignItems: 'center',
width: 80,
flexDirection: 'column',
verticalAlign: 'top',
marginTop: 12,
}}
>
<div className={styles.avatar}>
{item.avatar ? (
<img
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'cover',
borderRadius: 4,
}}
src={item.avatar}
alt=""
/>
) : item.name ? (
item.name[0]
) : (
''
)}
</div>
<div
style={{
padding: '0 4px',
whiteSpace: 'nowrap',
minWidth: 0,
textOverflow: 'ellipsis',
overflow: 'hidden',
width: 72,
textAlign: 'center',
}}
title={item.name}
>
{item.name}
</div>
</div>
);
return item.state == 1 ? null : groupMembersListItem(item);
})}
</div>
)}
@@ -931,48 +773,26 @@ const ChatLogs: React.FC = () => {
className={styles.chatLogBox}
ref={chatBoxRef}
onScroll={(e: any) => {
if (
e.target?.scrollTop == 0 &&
!isAllChatRef.current &&
!chatLogLoadingRef.current
) {
if (e.target?.scrollTop == 0 && !isAllChatRef.current && !chatLogLoadingRef.current) {
page(param.curr_page + 1);
}
}}
>
{isAllChatRef.current ? (
<div style={{ marginBottom: 12, textAlign: 'center', color: '#999' }}>
没有更多聊天记录了
</div>
) : null}
{isAllChatRef.current ? <div style={{ marginBottom: 12, textAlign: 'center', color: '#999' }}>没有更多聊天记录了</div> : null}
{chatLogs.map((item) => {
if (item.curr_page) {
return (
<div
key={item.curr_page}
className={`curr_page${param.curr_page}`}
style={{ height: 0 }}
/>
);
return <div key={item.curr_page} className={`curr_page${param.curr_page}`} style={{ height: 0 }} />;
} else {
return (
<div key={item.msg_id}>
{/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
<ChatTime msgtime={item.msg_time} />
{tabKey == '2' ? (
<ChatBar
from={selectStaff}
to={groupMembersObjRef.current[item.msg_from]}
chat={item}
/>
<ChatBar from={selectStaff} to={groupMembersObjRef.current[item.msg_from]} chat={item} />
) : (
<ChatBar
from={selectStaff}
to={
tabKeyRef.current == '0'
? selectInnerStaffRef.current
: selectCustFollowRef.current
}
to={tabKeyRef.current == '0' ? selectInnerStaffRef.current : selectCustFollowRef.current}
chat={item}
/>
)}