984 lines
35 KiB
TypeScript
984 lines
35 KiB
TypeScript
import { post } from '@/services/ajax';
|
||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||
import { PageContainer } from '@ant-design/pro-components';
|
||
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 { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
|
||
import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
|
||
import { adminList, formatTags, groupMembersCount, groupMembersCount2 } from './ChatUtils';
|
||
import { ChatBar } from './components/ChatBar';
|
||
import { ChatTime } from './components/ChatTime';
|
||
import { Gender } from './components/Gender';
|
||
import styles from './index.module.scss';
|
||
interface ISearchWord {
|
||
'0': string;
|
||
'1': string;
|
||
'2': string;
|
||
}
|
||
const ChatLogs: React.FC = () => {
|
||
const [param] = useState({
|
||
curr_page: 1,
|
||
page_count: 20,
|
||
msg_from: '',
|
||
msg_to_list: '',
|
||
room_id: '',
|
||
});
|
||
const [tabKey, setTabKey] = useState<string>('0');
|
||
const tabKeyRef = useRef('0');
|
||
|
||
const [open, setOpen] = useState(false);
|
||
// 员工
|
||
const [staffsList, setStaffsList] = useState<IStaffsItem[]>([]);
|
||
const [selectStaff, setSelectStaff] = useState<IStaffsItem>();
|
||
const selectStaffRef = useRef<IStaffsItem>();
|
||
|
||
// 内部联系人
|
||
const [innerStaffsList, setInnerStaffsList] = useState<IStaffsItem[]>([]);
|
||
const selectInnerStaffRef = useRef<IStaffsItem>();
|
||
const [selectInnerStaff, setSelectInnerStaff] = useState<IStaffsItem>();
|
||
|
||
// 外部联系人
|
||
const [custFollowsList, setCustFollowsList] = useState<ICustFollow[]>([]);
|
||
const [selectCustFollow, setSelectCustFollow] = useState<ICustFollow>();
|
||
const selectCustFollowRef = useRef<ICustFollow>();
|
||
|
||
// 群聊
|
||
const [groupList, setGroupList] = useState<IGroup[]>([]);
|
||
const selectGroupRef = useRef<IGroup>();
|
||
const [selectGroup, setSelectGroup] = useState<IGroup>();
|
||
|
||
// 群成员
|
||
const [groupMembersList, setGroupMembersList] = useState<IGroupMembers[]>([]);
|
||
const groupMembersObjRef = useRef<any>({});
|
||
|
||
const [chatLogs, setChatLogs] = useState<IChat[]>([]);
|
||
|
||
const [tabs] = useState([
|
||
{
|
||
key: '0',
|
||
label: '内部联系人',
|
||
children: '',
|
||
},
|
||
{
|
||
key: '1',
|
||
label: '外部联系人',
|
||
children: '',
|
||
},
|
||
{
|
||
key: '2',
|
||
label: '客户群聊',
|
||
children: '',
|
||
},
|
||
]);
|
||
|
||
const groupStatus: any = {
|
||
'0': '跟进人正常',
|
||
'1': '跟进人离职',
|
||
'2': '离职继承中',
|
||
'3': '离职继承完成',
|
||
};
|
||
|
||
const [searchWord, setSearchWord] = useState<ISearchWord>({
|
||
'0': '',
|
||
'1': '',
|
||
'2': '',
|
||
});
|
||
|
||
const [flolowsBoxShow, setFlolowsBox] = useState(false);
|
||
const [delFollowListShow, setDelFollowListShow] = useState(false);
|
||
const [delGroupListShow, setDelGroupListShow] = useState(false);
|
||
|
||
const timeShowRef = useRef(false);
|
||
const chatBoxRef = useRef<any>();
|
||
const isAllChatRef = useRef(false);
|
||
const chatLogLoadingRef = useRef(false);
|
||
const [chatLogLoading, setChatLogLoading] = useState(false);
|
||
|
||
function show() {
|
||
setFlolowsBox(false);
|
||
}
|
||
|
||
// 监听DOM变动
|
||
const callback = function (mutationsList: any) {
|
||
// Use traditional 'for loops' for IE 11
|
||
for (let mutation of mutationsList) {
|
||
if (mutation.type === 'childList') {
|
||
document.querySelector('.curr_page' + param.curr_page)?.scrollIntoView(true);
|
||
} else if (mutation.type === 'attributes') {
|
||
console.log('The ' + mutation.attributeName + ' attribute was modified.');
|
||
}
|
||
}
|
||
};
|
||
const observer = new MutationObserver(callback);
|
||
|
||
useEffect(() => {
|
||
document.addEventListener('click', show, false);
|
||
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);
|
||
};
|
||
}, []);
|
||
|
||
// 获取员工
|
||
const getStaffsList = () => {
|
||
post({ url: '/Staffs/Data' }).then((res) => {
|
||
if (res.err_code == 0) {
|
||
if (Array.isArray(res.data) && res.data.length) {
|
||
// setSelectStaff(res.data[0]);
|
||
// selectStaffRef.current = res.data[0];
|
||
res.data.forEach((element: IStaffsItem) => {
|
||
if (element.user_id == 'yangxb') {
|
||
setSelectStaff(element);
|
||
selectStaffRef.current = element;
|
||
}
|
||
});
|
||
setStaffsList(res.data);
|
||
setInnerStaffsList(res.data);
|
||
getCustFollowsList();
|
||
getGroupList();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const page = (curr: number) => {
|
||
param.curr_page = curr;
|
||
param.msg_from = selectStaffRef.current?.user_id + '';
|
||
if (tabKey == '0') {
|
||
param.msg_to_list = selectInnerStaffRef.current?.user_id + '';
|
||
} else if (tabKey == '1') {
|
||
param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
|
||
} else {
|
||
param.room_id = selectGroupRef.current?.group_id + '';
|
||
}
|
||
timeShowRef.current = false;
|
||
getChatLogsList();
|
||
};
|
||
|
||
const getChatLogsList = () => {
|
||
chatLogLoadingRef.current = true;
|
||
setChatLogLoading(true);
|
||
post({
|
||
url: tabKey == '2' ? '/ChatLogs/GroupList' : '/ChatLogs/List',
|
||
data: stringify(param),
|
||
}).then((res) => {
|
||
const count = res.count || 0;
|
||
chatLogLoadingRef.current = false;
|
||
|
||
setChatLogLoading(false);
|
||
isAllChatRef.current = count < param.page_count * param.curr_page;
|
||
if (res.err_code == 0) {
|
||
if (Array.isArray(res.data) && res.data.length) {
|
||
let arr: IChat[] = [];
|
||
const temp = res.data.reverse();
|
||
const mark = { curr_page: param.curr_page, msg_time: temp[temp.length - 1].msg_time };
|
||
if (param.curr_page == 1) {
|
||
arr = [...temp, mark];
|
||
} else {
|
||
arr = [...temp, mark, ...chatLogs];
|
||
}
|
||
// 5分钟外显示时间
|
||
// if (arr) {
|
||
// let show_time = '';
|
||
// arr.forEach((el, i) => {
|
||
// el.show_time = false;
|
||
// if (i == 0) {
|
||
// el.show_time = true;
|
||
// } else {
|
||
// if (show_time == '') {
|
||
// show_time = el.msg_time;
|
||
// } else {
|
||
// if (
|
||
// new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
|
||
// 5 * 60 * 1000
|
||
// ) {
|
||
// el.show_time = true;
|
||
// show_time = el.msg_time;
|
||
// }
|
||
// }
|
||
// }
|
||
// });
|
||
// }
|
||
setChatLogs(arr);
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const getGroupList = () => {
|
||
post({
|
||
url: '/Groups/GroupsList',
|
||
data: stringify({ user_id: selectStaffRef.current?.user_id }),
|
||
}).then((res) => {
|
||
if (res.err_code == 0) {
|
||
if (Array.isArray(res.data)) {
|
||
setGroupList(res.data);
|
||
// if (res.data.length) {
|
||
// setCustFollow(res.data[0]);
|
||
// selectCustFollowRef.current = res.data[0];
|
||
// page(1);
|
||
// }
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 群成员
|
||
const getGroupMembersList = () => {
|
||
post({
|
||
url: '/GroupMembers/GroupMembersList',
|
||
data: stringify({ group_id: selectGroupRef.current?.group_id }),
|
||
}).then((res) => {
|
||
if (res.err_code == 0) {
|
||
if (Array.isArray(res.data)) {
|
||
setGroupMembersList(res.data);
|
||
groupMembersObjRef.current = {};
|
||
res.data.forEach((item: IGroupMembers) => {
|
||
groupMembersObjRef.current[item.user_id] = item;
|
||
});
|
||
page(1);
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const getCustFollowsList = () => {
|
||
post({
|
||
url: '/CustFollows/List',
|
||
data: stringify({ user_id: selectStaffRef.current?.user_id }),
|
||
}).then((res) => {
|
||
if (res.err_code == 0) {
|
||
if (Array.isArray(res.data)) {
|
||
setCustFollowsList(res.data);
|
||
// if (res.data.length) {
|
||
// setCustFollow(res.data[0]);
|
||
// selectCustFollowRef.current = res.data[0];
|
||
// page(1);
|
||
// }
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// const { notification } = App.useApp();
|
||
const tabContent = () => {
|
||
if (tabKey == '0') {
|
||
// 内部联系人
|
||
return (
|
||
<>
|
||
{innerStaffsList.length ? (
|
||
innerStaffsList.map((item) => {
|
||
if (item.user_id == selectStaff?.user_id) {
|
||
return null;
|
||
}
|
||
return (
|
||
<div
|
||
key={`${item.user_id}_${item.name}`}
|
||
className={`${styles.chatB} ${
|
||
selectInnerStaff?.user_id == item.user_id ? styles.active : ''
|
||
}`}
|
||
onClick={() => {
|
||
tabKeyRef.current = tabKey;
|
||
|
||
setSelectCustFollow(undefined);
|
||
selectCustFollowRef.current = undefined;
|
||
setSelectGroup(undefined);
|
||
selectGroupRef.current = undefined;
|
||
|
||
setSelectInnerStaff(item);
|
||
selectInnerStaffRef.current = item;
|
||
page(1);
|
||
}}
|
||
style={{ display: item.name.includes(searchWord['0']) ? '' : 'none' }}
|
||
>
|
||
<div className={styles.avatar}>
|
||
{item.avatar ? (
|
||
<img
|
||
src={item.avatar}
|
||
alt=""
|
||
style={{
|
||
maxWidth: '100%',
|
||
maxHeight: '100%',
|
||
objectFit: 'cover',
|
||
borderRadius: 4,
|
||
}}
|
||
/>
|
||
) : (
|
||
<>{item.name[0]}</>
|
||
)}
|
||
</div>
|
||
<div className={styles.chatAMsg}>
|
||
<div className={styles.chatAName} title={item.name}>
|
||
{item.name}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
|
||
暂无内部联系人
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
} else if (tabKey == '1') {
|
||
return (
|
||
<>
|
||
{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>
|
||
);
|
||
})
|
||
) : (
|
||
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
|
||
暂无外部联系人
|
||
</div>
|
||
)}
|
||
<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) => {
|
||
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>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
} else {
|
||
return (
|
||
<>
|
||
{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>
|
||
);
|
||
})
|
||
) : (
|
||
<div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
|
||
暂无客户群聊
|
||
</div>
|
||
)}
|
||
<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) => {
|
||
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>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<PageContainer>
|
||
<div className={styles.box}>
|
||
<div className={styles.personnelBox}>
|
||
<div className={`${styles.flolowsBox} ${flolowsBoxShow ? styles.show : ''}`}>
|
||
{staffsList.map((item) => {
|
||
return (
|
||
<div
|
||
key={item.user_id}
|
||
className={styles.chatB}
|
||
onClick={(e) => {
|
||
setSelectCustFollow(undefined);
|
||
selectCustFollowRef.current = undefined;
|
||
setSelectInnerStaff(undefined);
|
||
selectInnerStaffRef.current = undefined;
|
||
setSelectGroup(undefined);
|
||
selectGroupRef.current = undefined;
|
||
isAllChatRef.current = false;
|
||
setChatLogs([]);
|
||
setSelectStaff({ ...item });
|
||
selectStaffRef.current = { ...item };
|
||
setFlolowsBox(false);
|
||
getCustFollowsList();
|
||
getGroupList();
|
||
}}
|
||
style={{ background: selectStaff?.user_id == item.user_id ? '#bae0ff' : '' }}
|
||
>
|
||
<div className={styles.avatar}>
|
||
{item.avatar ? (
|
||
<img
|
||
src={item.avatar}
|
||
alt=""
|
||
style={{
|
||
maxWidth: '100%',
|
||
maxHeight: '100%',
|
||
objectFit: 'cover',
|
||
borderRadius: 4,
|
||
}}
|
||
/>
|
||
) : (
|
||
<>{item.name[0]}</>
|
||
)}
|
||
</div>
|
||
<div className={styles.chatAMsg}>
|
||
<div className={styles.chatAName} title={item.name}>
|
||
{item.name}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div
|
||
className={`${styles.chatA}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setFlolowsBox(!flolowsBoxShow);
|
||
}}
|
||
>
|
||
{selectStaff ? (
|
||
<>
|
||
<div className={styles.avatar}>
|
||
{selectStaff.avatar ? (
|
||
<img
|
||
src={selectStaff.avatar}
|
||
alt=""
|
||
style={{
|
||
maxWidth: '100%',
|
||
maxHeight: '100%',
|
||
objectFit: 'cover',
|
||
borderRadius: 4,
|
||
}}
|
||
/>
|
||
) : (
|
||
<>{selectStaff.name[0]}</>
|
||
)}
|
||
</div>
|
||
<div className={styles.chatAMsg}>
|
||
<div className={styles.chatAName} title={selectStaff.name}>
|
||
{selectStaff.name}
|
||
</div>
|
||
</div>
|
||
{flolowsBoxShow ? <UpOutlined /> : <DownOutlined />}
|
||
</>
|
||
) : null}
|
||
</div>
|
||
<Form autoComplete="off">
|
||
<Input
|
||
placeholder="搜索"
|
||
style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
|
||
autoComplete="off"
|
||
defaultValue={searchWord[tabKey]}
|
||
key={tabKey}
|
||
onChange={(e) => {
|
||
searchWord[tabKey] = e.target.value.trim();
|
||
setSearchWord({ ...searchWord });
|
||
}}
|
||
allowClear
|
||
></Input>
|
||
</Form>
|
||
<Tabs
|
||
items={tabs}
|
||
size="small"
|
||
style={{ padding: '0 12px' }}
|
||
tabBarGutter={12}
|
||
onChange={(val) => {
|
||
setTabKey(val);
|
||
}}
|
||
></Tabs>
|
||
<div className={styles.chatBBox}>{tabContent()}</div>
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div className={styles.logTop}>
|
||
<div
|
||
style={{ cursor: 'pointer', fontSize: 18 }}
|
||
onClick={() => {
|
||
setOpen(true);
|
||
}}
|
||
>
|
||
{tabKeyRef.current == '0' ? (
|
||
<>{selectInnerStaffRef.current?.name}</>
|
||
) : tabKeyRef.current == '1' ? (
|
||
<>{selectCustFollowRef.current?.name}</>
|
||
) : (
|
||
<>
|
||
{selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}
|
||
{selectGroupRef.current ? <>（{groupMembersList.length}）</> : null}
|
||
</>
|
||
)}
|
||
</div>
|
||
<Drawer
|
||
title={
|
||
tabKeyRef.current == '0' ? (
|
||
<>{selectInnerStaffRef.current?.name} 详细信息</>
|
||
) : tabKeyRef.current == '1' ? (
|
||
<>{selectCustFollowRef.current?.name} 详细信息</>
|
||
) : (
|
||
<>
|
||
{selectGroupRef.current?.name || '未定义群名'} （{groupMembersList.length}
|
||
）详细信息
|
||
</>
|
||
)
|
||
}
|
||
open={open}
|
||
width={600}
|
||
onClose={() => setOpen(false)}
|
||
footer={false}
|
||
>
|
||
{tabKeyRef.current == '0' ? (
|
||
<DepartmentMembersDetail
|
||
record={selectInnerStaff as IStaffsItem}
|
||
></DepartmentMembersDetail>
|
||
) : 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}></Gender>
|
||
</div>
|
||
<div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
|
||
</div>
|
||
</div>
|
||
<div>备注名称：{selectCustFollow?.remark}</div>
|
||
{formatTags(selectCustFollow?.tags)}
|
||
</div>
|
||
) : (
|
||
<div>
|
||
<div style={{ marginBottom: 8, textIndent: '2em' }}>
|
||
群主：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.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={{ textIndent: '1em' }}>群公告：{selectGroupRef.current?.notice}</div>
|
||
<div
|
||
style={{
|
||
fontWeight: 'bold',
|
||
marginTop: 24,
|
||
marginBottom: 8,
|
||
borderBottom: '1px solid #ddd',
|
||
paddingBottom: 8,
|
||
}}
|
||
>
|
||
群成员 • {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>
|
||
);
|
||
})}
|
||
{groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
|
||
<div
|
||
style={{
|
||
fontWeight: 'bold',
|
||
marginTop: 24,
|
||
marginBottom: 8,
|
||
borderBottom: '1px solid #ddd',
|
||
paddingBottom: 8,
|
||
}}
|
||
>
|
||
微信：
|
||
</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>
|
||
);
|
||
})}
|
||
{groupMembersCount(groupMembersList, 0) != 0 ? (
|
||
<div
|
||
style={{
|
||
fontWeight: 'bold',
|
||
marginTop: 24,
|
||
marginBottom: 8,
|
||
borderBottom: '1px solid #ddd',
|
||
paddingBottom: 8,
|
||
}}
|
||
>
|
||
已离群：
|
||
</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>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</Drawer>
|
||
</div>
|
||
<Spin spinning={chatLogLoading} style={{ display: 'block' }} size="large">
|
||
<div
|
||
className={styles.chatLogBox}
|
||
ref={chatBoxRef}
|
||
onScroll={(e: any) => {
|
||
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}
|
||
{chatLogs.map((item, i) => {
|
||
if (item.curr_page) {
|
||
return (
|
||
<div
|
||
key={item.curr_page}
|
||
className={`curr_page${param.curr_page}`}
|
||
style={{ height: 0 }}
|
||
></div>
|
||
);
|
||
} else {
|
||
return (
|
||
<div key={item.msg_id}>
|
||
{/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
|
||
<ChatTime msgtime={item.msg_time}></ChatTime>
|
||
{tabKey == '2' ? (
|
||
<ChatBar
|
||
from={selectStaff}
|
||
to={groupMembersObjRef.current[item.msg_from]}
|
||
chat={item}
|
||
></ChatBar>
|
||
) : (
|
||
<ChatBar
|
||
from={selectStaff}
|
||
to={
|
||
tabKeyRef.current == '0'
|
||
? selectInnerStaffRef.current
|
||
: selectCustFollowRef.current
|
||
}
|
||
chat={item}
|
||
></ChatBar>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
})}
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
</div>
|
||
</PageContainer>
|
||
);
|
||
};
|
||
|
||
export default ChatLogs;
|