添加小屏成员聊天页面, 添加css降级配置, 修复ios时间格式化bug
This commit is contained in:
zhengw
@@ -10,6 +10,8 @@
|
||||
* @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User
|
||||
* @doc https://umijs.org/docs/guides/routes
|
||||
*/
|
||||
|
||||
// const isPhone = getDevice() === 'phone';
|
||||
export default [
|
||||
{
|
||||
path: '/user',
|
||||
@@ -96,6 +98,12 @@ export default [
|
||||
path: '/scrm/chat/list',
|
||||
component: './ChatLogs',
|
||||
},
|
||||
{
|
||||
name: '成员聊天',
|
||||
icon: 'table',
|
||||
path: '/scrm/chat/phonelist',
|
||||
component: './ChatLogsPhone',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
19
src/app.tsx
19
src/app.tsx
@@ -1,4 +1,5 @@
|
||||
import Footer from '@/components/Footer';
|
||||
import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
|
||||
import { LinkOutlined } from '@ant-design/icons';
|
||||
import { Settings as LayoutSettings } from '@ant-design/pro-components';
|
||||
import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
|
||||
@@ -10,9 +11,9 @@ import AvatarSvg from '../public/avatar.svg';
|
||||
import { AvatarDropdown, AvatarName } from './components/RightContent/AvatarDropdown';
|
||||
import { errorConfig } from './requestErrorConfig';
|
||||
import { post } from './services/ajax';
|
||||
import { getDevice } from './services/utils';
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const loginPath = '/user/login';
|
||||
|
||||
/**
|
||||
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
|
||||
* */
|
||||
@@ -153,7 +154,21 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
|
||||
};
|
||||
|
||||
export function rootContainer(container: any) {
|
||||
return React.createElement(App, null, container);
|
||||
// 降级css
|
||||
const isDesktop = getDevice() == 'desktop';
|
||||
if (isDesktop) {
|
||||
return React.createElement(App, null, container);
|
||||
} else {
|
||||
return React.createElement(
|
||||
StyleProvider,
|
||||
{
|
||||
hashPriority: 'high',
|
||||
transformers: [legacyLogicalPropertiesTransformer],
|
||||
autoClear: true,
|
||||
},
|
||||
container,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -71,6 +71,10 @@ input {
|
||||
}
|
||||
}
|
||||
|
||||
li[data-menu-id*="/scrm/chat/phonelist"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ant-table {
|
||||
width: 100%;
|
||||
@@ -101,4 +105,12 @@ input {
|
||||
max-width: 90vw;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
li[data-menu-id*="/scrm/chat/phonelist"] {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
li[data-menu-id*="/scrm/chat/list"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,11 @@ export const ChatImage: React.FC<IChatItem> = (props) => {
|
||||
},
|
||||
}}
|
||||
src={`/api/${msg.path}`}
|
||||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,9 @@ export const ChatTime: React.FC<IChatTimeProps> = (props) => {
|
||||
|
||||
const formatTime = () => {
|
||||
const now = new Date();
|
||||
const msgtime = new Date(props.msgtime);
|
||||
const msgtimeStr = props.msgtime.replace(/-/g, '/');
|
||||
const msgtime = new Date(msgtimeStr);
|
||||
console.log(msgtime);
|
||||
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
@@ -20,7 +22,7 @@ export const ChatTime: React.FC<IChatTimeProps> = (props) => {
|
||||
(new Date(
|
||||
`${now.getFullYear()}-${padWith(now.getMonth() + 1)}-${padWith(now.getDate())} 00:00:00`,
|
||||
).getTime() -
|
||||
new Date(props.msgtime).getTime()) /
|
||||
new Date(msgtimeStr).getTime()) /
|
||||
(24 * 60 * 60 * 1000) +
|
||||
1;
|
||||
|
||||
|
||||
@@ -171,3 +171,9 @@
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chatContentBox {
|
||||
max-width: calc(100vw - 24px - 16px - 34px - 12px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,6 +95,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.groupMenu {
|
||||
height: calc(100vh - 164px);
|
||||
}
|
||||
}
|
||||
|
||||
.delFollowList {
|
||||
position: absolute;
|
||||
top: calc(100% - 34px);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { post } from '@/services/ajax';
|
||||
import { getDevice } from '@/services/utils';
|
||||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { history } from '@umijs/max';
|
||||
import { Drawer, Input, Tabs } from 'antd';
|
||||
import Spin from 'antd/lib/spin';
|
||||
import { stringify } from 'qs';
|
||||
@@ -23,6 +25,7 @@ const ChatLogs: React.FC = () => {
|
||||
msg_to_list: '',
|
||||
room_id: '',
|
||||
});
|
||||
const isPhone = getDevice() === 'phone';
|
||||
const [tabKey, setTabKey] = useState<string>('0');
|
||||
const tabKeyRef = useRef('0');
|
||||
|
||||
@@ -265,6 +268,9 @@ const ChatLogs: React.FC = () => {
|
||||
const observer = new MutationObserver(callback);
|
||||
|
||||
useEffect(() => {
|
||||
if (isPhone) {
|
||||
history.push('/scrm/chat/phonelist');
|
||||
}
|
||||
document.addEventListener('click', show, false);
|
||||
getStaffsList();
|
||||
|
||||
|
||||
103
src/pages/ChatLogsPhone/components/LogsContent.tsx
Normal file
103
src/pages/ChatLogsPhone/components/LogsContent.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import { ChatBar } from '@/pages/ChatLogs/components/ChatBar';
|
||||
import { ChatTime } from '@/pages/ChatLogs/components/ChatTime';
|
||||
import { Spin } from 'antd';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import styles from '../index.module.scss';
|
||||
|
||||
type IProps = {
|
||||
tabKeyRef: any;
|
||||
selectInnerStaffRef: any;
|
||||
selectCustFollowRef: any;
|
||||
chatLogLoading: any;
|
||||
page: any;
|
||||
isAllChatRef: any;
|
||||
curr_page: any;
|
||||
chatLogs: any;
|
||||
selectStaff: any;
|
||||
groupMembersObjRef: any;
|
||||
chatLogLoadingRef: any;
|
||||
};
|
||||
|
||||
export const LogsContent: React.FC<IProps> = (props) => {
|
||||
const {
|
||||
tabKeyRef,
|
||||
selectInnerStaffRef,
|
||||
selectCustFollowRef,
|
||||
chatLogLoading,
|
||||
page,
|
||||
isAllChatRef,
|
||||
curr_page,
|
||||
chatLogs,
|
||||
selectStaff,
|
||||
groupMembersObjRef,
|
||||
chatLogLoadingRef,
|
||||
} = props;
|
||||
|
||||
const chatBoxRef = useRef<any>();
|
||||
|
||||
// 监听DOM变动
|
||||
const callback = function () {
|
||||
// Use traditional 'for loops' for IE 11
|
||||
document.querySelector('.curr_page' + curr_page)?.scrollIntoView(true);
|
||||
};
|
||||
const observer = new MutationObserver(callback);
|
||||
|
||||
useEffect(() => {
|
||||
observer.observe(chatBoxRef.current, { childList: true });
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [props.curr_page]);
|
||||
|
||||
return (
|
||||
<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(curr_page + 1);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isAllChatRef.current ? (
|
||||
<div style={{ marginBottom: 12, textAlign: 'center', color: '#999' }}>
|
||||
没有更多聊天记录了
|
||||
</div>
|
||||
) : null}
|
||||
{chatLogs.map((item: any) => {
|
||||
if (item.curr_page) {
|
||||
return (
|
||||
<div key={item.curr_page} className={`curr_page${curr_page}`} style={{ height: 0 }} />
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={item.seq}>
|
||||
{/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
|
||||
<ChatTime msgtime={item.msg_time} />
|
||||
{tabKeyRef.current == '2' ? (
|
||||
<ChatBar
|
||||
from={selectStaff}
|
||||
to={groupMembersObjRef.current[item.msg_from]}
|
||||
chat={item}
|
||||
/>
|
||||
) : (
|
||||
<ChatBar
|
||||
from={selectStaff}
|
||||
to={
|
||||
tabKeyRef.current == '0'
|
||||
? selectInnerStaffRef.current
|
||||
: selectCustFollowRef.current
|
||||
}
|
||||
chat={item}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
156
src/pages/ChatLogsPhone/index.module.scss
Normal file
156
src/pages/ChatLogsPhone/index.module.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.chatA,
|
||||
.chatB {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 65px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
&.active {
|
||||
background-color: #bae0ff;
|
||||
}
|
||||
}
|
||||
|
||||
.chatB {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.chatAMsg {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
padding-left: 12px;
|
||||
|
||||
.chatAName {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
background-color: #cfd1d4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.chatBBox {
|
||||
position: relative;
|
||||
height: calc(100vh - 164px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.groupMenu {
|
||||
position: relative;
|
||||
height: calc(100vh - 164px);
|
||||
|
||||
.groupListContent {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s;
|
||||
}
|
||||
|
||||
.groupListContentShow {
|
||||
height: calc(100% - 34px * 3);
|
||||
}
|
||||
|
||||
.groupListContentShowOver {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.delFollowList {
|
||||
position: absolute;
|
||||
top: calc(100% - 34px);
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
background-color: #f5f5f5;
|
||||
transition: top 0.3s, height 0.3s;
|
||||
.chatB {
|
||||
margin-top: 0;
|
||||
}
|
||||
&.delFollowListShow {
|
||||
top: 152px;
|
||||
height: calc(100% - 164px);
|
||||
}
|
||||
}
|
||||
|
||||
.groupNav,
|
||||
.delFollowListBar {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
color: #1890ff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.delFollowListBox {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.delFollowListBoxShow {
|
||||
height: calc(100% - 34px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.state0 {
|
||||
position: relative;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.chatLogBox {
|
||||
height: calc(100vh - 86px);
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.logTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.flolowsBox {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modalAvatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
background-color: #69b1ff;
|
||||
border-radius: 6px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
653
src/pages/ChatLogsPhone/index.tsx
Normal file
653
src/pages/ChatLogsPhone/index.tsx
Normal file
@@ -0,0 +1,653 @@
|
||||
import { post } from '@/services/ajax';
|
||||
import { getDevice } from '@/services/utils';
|
||||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { history } from '@umijs/max';
|
||||
import { Drawer, Input, Tabs } from 'antd';
|
||||
import Spin from 'antd/lib/spin';
|
||||
import { stringify } from 'qs';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from '../ChatLogs/ChatLogsType';
|
||||
import { getAdminList } from '../ChatLogs/ChatUtils';
|
||||
import { GroupListWidget } from '../ChatLogs/GroupList';
|
||||
import { CustDetailContent } from '../CustomList/components/CustDetailContent';
|
||||
import { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
|
||||
import { GroupDetailContent } from '../GroupList/components/GroupDetailContent';
|
||||
import { LogsContent } from './components/LogsContent';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
const ChatLogsPhone: React.FC = () => {
|
||||
const [param] = useState({
|
||||
curr_page: 1,
|
||||
page_count: 20,
|
||||
msg_from: '',
|
||||
msg_to_list: '',
|
||||
room_id: '',
|
||||
});
|
||||
const [open, setOpen] = useState(false);
|
||||
const isDesktop = getDevice() === 'desktop';
|
||||
const [tabKey, setTabKey] = useState<string>('0');
|
||||
const tabKeyRef = useRef('0');
|
||||
// 员工
|
||||
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 [loadingInner, setLoadingInner] = useState(false);
|
||||
|
||||
// 外部联系人
|
||||
const [custFollowsList, setCustFollowsList] = useState<ICustFollow[]>([]);
|
||||
const [selectCustFollow, setSelectCustFollow] = useState<ICustFollow>();
|
||||
const selectCustFollowRef = useRef<ICustFollow>();
|
||||
const [loadingOuter, setLoadingOuter] = useState(false);
|
||||
|
||||
// 群聊
|
||||
const [groupList, setGroupList] = useState<IGroup[]>([]);
|
||||
const selectGroupRef = useRef<IGroup>();
|
||||
const [selectGroup, setSelectGroup] = useState<IGroup>();
|
||||
const [loadingGroup, setLoadingGroup] = useState(false);
|
||||
|
||||
// 群成员
|
||||
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 [searchWord, setSearchWord] = useState<any>({
|
||||
'0': '',
|
||||
'1': '',
|
||||
'2': '',
|
||||
});
|
||||
|
||||
const [openContactsDrawer, setOpenContactsDrawer] = useState(false);
|
||||
const [openChatContentDrawer, setOpenChatContentDrawer] = useState(false);
|
||||
const [delFollowListShow, setDelFollowListShow] = useState(false);
|
||||
|
||||
const timeShowRef = useRef(false);
|
||||
const isAllChatRef = useRef(false);
|
||||
const chatLogLoadingRef = useRef(false);
|
||||
const [chatLogLoading, setChatLogLoading] = useState(false);
|
||||
const [staffSearchWord, setStaffSearchWord] = useState('');
|
||||
|
||||
const avatarObjRef = useRef<any>({});
|
||||
|
||||
const getChatLogsList = () => {
|
||||
chatLogLoadingRef.current = true;
|
||||
setChatLogLoading(true);
|
||||
post({
|
||||
url: tabKeyRef.current == '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) {
|
||||
let arr: IChat[] = [];
|
||||
if (Array.isArray(res.data) && res.data.length) {
|
||||
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 page = (curr: number) => {
|
||||
param.curr_page = curr;
|
||||
param.msg_from = selectStaffRef.current?.user_id + '';
|
||||
|
||||
if (tabKeyRef.current == '0') {
|
||||
param.msg_to_list = selectInnerStaffRef.current?.user_id + '';
|
||||
} else if (tabKeyRef.current == '1') {
|
||||
param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
|
||||
} else {
|
||||
param.room_id = selectGroupRef.current?.group_id + '';
|
||||
}
|
||||
timeShowRef.current = false;
|
||||
getChatLogsList();
|
||||
};
|
||||
|
||||
const getGroupList = () => {
|
||||
setLoadingGroup(true);
|
||||
post({
|
||||
url: '/Groups/ChatGroups',
|
||||
data: stringify({ user_id: selectStaffRef.current?.user_id }),
|
||||
}).then((res) => {
|
||||
setLoadingGroup(false);
|
||||
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);
|
||||
// }
|
||||
}
|
||||
avatarObjRef.current = res.avatar || {};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 群成员
|
||||
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)) {
|
||||
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([...owner, ...admin_list, ...other]);
|
||||
page(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getCustFollowsList = () => {
|
||||
setLoadingOuter(true);
|
||||
post({
|
||||
url: '/CustFollows/List',
|
||||
data: stringify({ user_id: selectStaffRef.current?.user_id }),
|
||||
}).then((res) => {
|
||||
setLoadingOuter(false);
|
||||
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 getStaffsList = () => {
|
||||
setLoadingInner(true);
|
||||
post({ url: '/Staffs/Data' }).then((res) => {
|
||||
setLoadingInner(false);
|
||||
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();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isDesktop) {
|
||||
history.push('/scrm/chat/list');
|
||||
}
|
||||
// const sc = document.createElement('script');
|
||||
// sc.src = 'https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js';
|
||||
// document.body.appendChild(sc);
|
||||
// sc.onload = () => {
|
||||
// let vConsole = new VConsole();
|
||||
// };
|
||||
|
||||
getStaffsList();
|
||||
}, []);
|
||||
|
||||
// 外部联系人Item
|
||||
const custFollowsListItem = (item: ICustFollow, i: number) => {
|
||||
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);
|
||||
setOpenChatContentDrawer(true);
|
||||
}}
|
||||
style={{
|
||||
display: item.name.includes(searchWord['1']) ? '' : 'none',
|
||||
marginTop: i == 0 && item.state == 1 ? 1 : 0,
|
||||
}}
|
||||
>
|
||||
<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 checkCustFollowsIsEmpty = (state: number) => {
|
||||
let count = 0;
|
||||
for (const el of custFollowsList) {
|
||||
if (el.name.includes(searchWord['1']) && el.state == state) {
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
};
|
||||
|
||||
const checkInnerIsEmpty = () => {
|
||||
for (const el of innerStaffsList) {
|
||||
if (el.name.includes(searchWord['0']) && selectInnerStaff?.user_id != el.user_id) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
// 删除的联系人/群
|
||||
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>已删联系人（{checkCustFollowsIsEmpty(0)}）</span>
|
||||
{delFollowListShow ? <UpOutlined /> : <DownOutlined />}
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.delFollowListBox} ${
|
||||
delFollowListShow ? styles.delFollowListBoxShow : ''
|
||||
}`}
|
||||
>
|
||||
{custFollowsList.map((item, i) => {
|
||||
return item.state == 1 ? null : custFollowsListItem(item, i);
|
||||
})}
|
||||
<div style={{ lineHeight: '34px', color: '#999', textAlign: 'center' }}>
|
||||
{checkCustFollowsIsEmpty(0) == 0 ? '暂无已删联系人' : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <></>;
|
||||
}
|
||||
};
|
||||
|
||||
// const { notification } = App.useApp();
|
||||
const tabContent = () => {
|
||||
// <div className={styles.chatBBox}>{tabContent()}</div>
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 内部联系人 */}
|
||||
<div className={styles.chatBBox} style={{ display: tabKey == '0' ? 'block' : 'none' }}>
|
||||
<Spin spinning={loadingInner}>
|
||||
{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);
|
||||
setOpenChatContentDrawer(true);
|
||||
}}
|
||||
style={{ display: item.name.includes(searchWord['0']) ? '' : 'none' }}
|
||||
>
|
||||
<div className={styles.avatar}>
|
||||
{item.avatar ? (
|
||||
<img
|
||||
src={item.avatar}
|
||||
alt=""
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '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>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
<div style={{ lineHeight: '34px', textAlign: 'center', color: '#999' }}>
|
||||
{checkInnerIsEmpty() == 0 ? '暂无内部联系人' : ''}
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
<div className={styles.chatBBox} style={{ display: tabKey == '1' ? 'block' : 'none' }}>
|
||||
<Spin spinning={loadingOuter}>
|
||||
{custFollowsList.length
|
||||
? custFollowsList.map((item, i) => {
|
||||
return item.state == 0 ? null : custFollowsListItem(item, i);
|
||||
})
|
||||
: null}
|
||||
<div style={{ lineHeight: '34px', textAlign: 'center', color: '#999' }}>
|
||||
{checkCustFollowsIsEmpty(1) == 0 ? '暂无外部联系人' : ''}
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
{tabContentDel()}
|
||||
<div className={styles.chatBBox} style={{ display: tabKey == '2' ? 'block' : 'none' }}>
|
||||
<Spin spinning={loadingGroup}>
|
||||
<GroupListWidget
|
||||
groupAvatar={avatarObjRef.current}
|
||||
groupList={groupList}
|
||||
searchWord={searchWord['2']}
|
||||
onClick={(item: IGroup) => {
|
||||
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();
|
||||
setOpenChatContentDrawer(true);
|
||||
}}
|
||||
selectGroup={selectGroup}
|
||||
/>
|
||||
</Spin>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<div className={`${styles.flolowsBox}`}>
|
||||
<div style={{ padding: '12px 0', background: '#fff', position: 'sticky', top: 0 }}>
|
||||
<Input
|
||||
placeholder="搜索"
|
||||
style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
|
||||
defaultValue={staffSearchWord}
|
||||
onChange={(e) => {
|
||||
setStaffSearchWord(e.target.value.trim());
|
||||
}}
|
||||
allowClear
|
||||
/>
|
||||
</div>
|
||||
{staffsList.map((item) => {
|
||||
if (!item.name.includes(staffSearchWord)) return null;
|
||||
return (
|
||||
<div
|
||||
key={item.user_id}
|
||||
className={styles.chatB}
|
||||
onClick={() => {
|
||||
setSelectCustFollow(undefined);
|
||||
selectCustFollowRef.current = undefined;
|
||||
setSelectInnerStaff(undefined);
|
||||
selectInnerStaffRef.current = undefined;
|
||||
setSelectGroup(undefined);
|
||||
selectGroupRef.current = undefined;
|
||||
isAllChatRef.current = false;
|
||||
setChatLogs([]);
|
||||
setSelectStaff({ ...item });
|
||||
selectStaffRef.current = { ...item };
|
||||
tabKeyRef.current = '0';
|
||||
setTabKey('0');
|
||||
// if (tabKey == '1') {
|
||||
getCustFollowsList();
|
||||
// } else if (tabKey == '2') {
|
||||
getGroupList();
|
||||
setOpenContactsDrawer(true);
|
||||
// }
|
||||
}}
|
||||
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>
|
||||
<Drawer
|
||||
open={openContactsDrawer}
|
||||
destroyOnClose
|
||||
width={'100%'}
|
||||
title="联系人列表"
|
||||
bodyStyle={{ padding: 0 }}
|
||||
onClose={() => {
|
||||
setOpenContactsDrawer(false);
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
placeholder="搜索"
|
||||
style={{ margin: '0 12px', width: 'calc(100% - 24px)', marginTop: 12 }}
|
||||
defaultValue={searchWord[tabKey]}
|
||||
key={tabKey}
|
||||
onChange={(e) => {
|
||||
searchWord[tabKey] = e.target.value.trim();
|
||||
setSearchWord({ ...searchWord });
|
||||
}}
|
||||
allowClear
|
||||
/>
|
||||
<Tabs
|
||||
items={tabs}
|
||||
size="small"
|
||||
style={{ padding: '0 12px' }}
|
||||
tabBarGutter={12}
|
||||
onChange={(val) => {
|
||||
setTabKey(val);
|
||||
// if (val == '1') {
|
||||
// getCustFollowsList();
|
||||
// } else if (val == '2') {
|
||||
// getGroupList();
|
||||
// }
|
||||
}}
|
||||
/>
|
||||
{tabContent()}
|
||||
</Drawer>
|
||||
<Drawer
|
||||
open={openChatContentDrawer}
|
||||
destroyOnClose
|
||||
width={'100%'}
|
||||
title={
|
||||
<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={'85%'}
|
||||
onClose={() => setOpen(false)}
|
||||
footer={false}
|
||||
destroyOnClose
|
||||
>
|
||||
{tabKeyRef.current == '0' ? (
|
||||
<DepartmentMembersDetail record={selectInnerStaff as IStaffsItem} />
|
||||
) : tabKeyRef.current == '1' ? (
|
||||
<CustDetailContent record={selectCustFollow as ICustFollow} />
|
||||
) : (
|
||||
<GroupDetailContent record={selectGroup as IGroup} />
|
||||
)}
|
||||
</Drawer>
|
||||
</div>
|
||||
}
|
||||
onClose={() => {
|
||||
setOpenChatContentDrawer(false);
|
||||
}}
|
||||
bodyStyle={{ padding: 0, background: '#F5F5F5' }}
|
||||
>
|
||||
<LogsContent
|
||||
tabKeyRef={tabKeyRef}
|
||||
selectInnerStaffRef={selectInnerStaffRef}
|
||||
selectCustFollowRef={selectCustFollowRef}
|
||||
chatLogLoading={chatLogLoading}
|
||||
page={page}
|
||||
isAllChatRef={isAllChatRef}
|
||||
curr_page={param.curr_page}
|
||||
chatLogs={chatLogs}
|
||||
selectStaff={selectStaff}
|
||||
groupMembersObjRef={groupMembersObjRef}
|
||||
chatLogLoadingRef={chatLogLoadingRef}
|
||||
/>
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatLogsPhone;
|
||||
@@ -229,6 +229,9 @@ const CustomList: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 8 }}>跟进员工：{item?.staff_name || '暂无'}</div>
|
||||
<div>添加方式：{AddWay[item.add_way]}</div>
|
||||
<div>添加时间：{item?.create_time}</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
@@ -389,14 +392,7 @@ const CustomList: React.FC = () => {
|
||||
}}
|
||||
dataIndex={'tags'}
|
||||
/>
|
||||
<Table.Column
|
||||
title="跟进员工"
|
||||
width={120}
|
||||
render={(v, record: ICustFollow) => {
|
||||
return <>{record?.staff_name}</>;
|
||||
}}
|
||||
dataIndex={'user_id'}
|
||||
/>
|
||||
<Table.Column title="跟进员工" width={120} dataIndex={'staff_name'} />
|
||||
{/* <Table.Column title="商机阶段" width={160} dataIndex={'position'} /> */}
|
||||
<Table.Column
|
||||
title="添加方式"
|
||||
|
||||
Reference in New Issue
Block a user