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

开发: 添加表情匹配, 添加客群中心页面,修复弹框关闭

Browse Source
This commit is contained in:
zhengw
2023-04-20 17:38:19 +08:00
parent 21c1790dc4
commit 2156976a8c
19 changed files with 1135 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
import { post } from '@/services/ajax';
import { groupStatus } from '@/services/config';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Drawer, Form, Input, Tabs } from 'antd';
@@ -8,10 +9,15 @@ 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, getAdminList, groupMembersCount, groupMembersCount2 } from './ChatUtils';
import {
adminList,
getAdminList,
groupMembersCount,
groupMembersCount2,
groupMembersListItem,
} from './ChatUtils';
import { ChatBar } from './components/ChatBar';
import { ChatTime } from './components/ChatTime';
import { AdminSvg, OwnerSvg } from './components/Svgs';
import styles from './index.module.scss';
const ChatLogs: React.FC = () => {
@@ -70,13 +76,6 @@ const ChatLogs: React.FC = () => {
},
]);
const groupStatus: any = {
'0': '跟进人正常',
'1': '跟进人离职',
'2': '离职继承中',
'3': '离职继承完成',
};
const [searchWord, setSearchWord] = useState<any>({
'0': '',
'1': '',
@@ -163,7 +162,7 @@ const ChatLogs: React.FC = () => {
const getGroupList = () => {
post({
url: '/Groups/GroupsList',
url: '/Groups/ChatGroups',
data: stringify({ user_id: selectStaffRef.current?.user_id }),
}).then((res) => {
if (res.err_code == 0) {
@@ -298,7 +297,11 @@ const ChatLogs: React.FC = () => {
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' }} />
<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}>
@@ -315,7 +318,9 @@ const ChatLogs: React.FC = () => {
return (
<div
key={item.group_id}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${selectGroup?.group_id == item.group_id ? styles.active : ''}`}
className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
selectGroup?.group_id == item.group_id ? styles.active : ''
}`}
onClick={() => {
tabKeyRef.current = tabKey;
setSelectCustFollow(undefined);
@@ -333,7 +338,7 @@ const ChatLogs: React.FC = () => {
<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 || '未定义群名'}
{item.name || '未知群名'}
</div>
<div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
</div>
@@ -355,7 +360,9 @@ 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;
@@ -395,7 +402,9 @@ const ChatLogs: React.FC = () => {
);
})
) : (
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>暂无内部联系人</div>
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
暂无内部联系人
</div>
)}
</>
);
@@ -407,9 +416,15 @@ const ChatLogs: React.FC = () => {
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={() => {
@@ -419,7 +434,11 @@ 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) => {
return item.state == 1 ? null : custFollowsListItem(item);
})}
@@ -435,9 +454,15 @@ const ChatLogs: React.FC = () => {
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={() => {
@@ -447,7 +472,11 @@ 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) => {
return item.state == 1 ? null : groupListItem(item);
})}
@@ -464,7 +493,9 @@ const ChatLogs: React.FC = () => {
return <></>;
} else if (tabKey == '1') {
return (
<div className={`${styles.delFollowList} ${delFollowListShow ? styles.delFollowListShow : ''}`}>
<div
className={`${styles.delFollowList} ${delFollowListShow ? styles.delFollowListShow : ''}`}
>
<div
className={styles.delFollowListBar}
onClick={() => {
@@ -474,7 +505,11 @@ 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) => {
return item.state == 1 ? null : custFollowsListItem(item);
})}
@@ -483,7 +518,9 @@ const ChatLogs: React.FC = () => {
);
} else {
return (
<div className={`${styles.delFollowList} ${delGroupListShow ? styles.delFollowListShow : ''}`}>
<div
className={`${styles.delFollowList} ${delGroupListShow ? styles.delFollowListShow : ''}`}
>
<div
className={styles.delFollowListBar}
onClick={() => {
@@ -493,7 +530,11 @@ 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) => {
return item.state == 1 ? null : groupListItem(item);
})}
@@ -503,59 +544,6 @@ const ChatLogs: React.FC = () => {
}
};
// 群 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}>
@@ -682,7 +670,7 @@ const ChatLogs: React.FC = () => {
<>{selectCustFollowRef.current?.name}</>
) : (
<>
{selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}
{selectGroupRef.current ? selectGroupRef.current?.name || '未知群名' : ''}
{selectGroupRef.current ? <>（{groupMembersList.length}）</> : null}
</>
)}
@@ -695,7 +683,7 @@ const ChatLogs: React.FC = () => {
<>{selectCustFollowRef.current?.name} 详细信息</>
) : (
<>
{selectGroupRef.current?.name || '未定义群名'} （{groupMembersList.length}
{selectGroupRef.current?.name || '未知群名'} （{groupMembersList.length}
）详细信息
</>
)
@@ -715,8 +703,12 @@ const ChatLogs: React.FC = () => {
群主：
{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={{
@@ -730,7 +722,9 @@ const ChatLogs: React.FC = () => {
群成员 • {groupMembersList.length}
</div>
{groupMembersList.map((item) => {
return item.group_members_type == '2' || item.state == 0 ? null : groupMembersListItem(item);
return item.group_members_type == '2' || item.state == 0
? null
: groupMembersListItem(item, selectGroupRef.current);
})}
{groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
<div
@@ -746,7 +740,9 @@ const ChatLogs: React.FC = () => {
</div>
) : null}
{groupMembersList.map((item) => {
return item.group_members_type == '1' || item.state == 0 ? null : groupMembersListItem(item);
return item.group_members_type == '1' || item.state == 0
? null
: groupMembersListItem(item, selectGroupRef.current);
})}
{groupMembersCount(groupMembersList, 0) != 0 ? (
<div
@@ -762,7 +758,9 @@ const ChatLogs: React.FC = () => {
</div>
) : null}
{groupMembersList.map((item) => {
return item.state == 1 ? null : groupMembersListItem(item);
return item.state == 1
? null
: groupMembersListItem(item, selectGroupRef.current);
})}
</div>
)}
@@ -773,26 +771,48 @@ 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}
/>
)}