From 97324bdfef99a2acc1a2ddebeca3faf9856f7936 Mon Sep 17 00:00:00 2001 From: zhengw <247276359@qq.com> Date: Fri, 5 May 2023 17:12:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B0=8F=E5=B1=8F=E6=88=90?= =?UTF-8?q?=E5=91=98=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2,=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0css=E9=99=8D=E7=BA=A7=E9=85=8D=E7=BD=AE,=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8Dios=E6=97=B6=E9=97=B4=E6=A0=BC=E5=BC=8F=E5=8C=96bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.ts | 8 + src/app.tsx | 19 +- src/global.less | 12 + src/pages/ChatLogs/components/ChatImage.tsx | 6 +- src/pages/ChatLogs/components/ChatTime.tsx | 6 +- .../ChatLogs/components/index.module.scss | 6 + src/pages/ChatLogs/index.module.scss | 6 + src/pages/ChatLogs/index.tsx | 6 + .../ChatLogsPhone/components/LogsContent.tsx | 103 +++ src/pages/ChatLogsPhone/index.module.scss | 156 +++++ src/pages/ChatLogsPhone/index.tsx | 653 ++++++++++++++++++ src/pages/CustomList/index.tsx | 12 +- 12 files changed, 980 insertions(+), 13 deletions(-) create mode 100644 src/pages/ChatLogsPhone/components/LogsContent.tsx create mode 100644 src/pages/ChatLogsPhone/index.module.scss create mode 100644 src/pages/ChatLogsPhone/index.tsx diff --git a/config/routes.ts b/config/routes.ts index c44aa4c..e96f9ab 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -10,6 +10,8 @@ * @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 则取值应为 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', + }, ], }, ], diff --git a/src/app.tsx b/src/app.tsx index 4e59705..37d3ca9 100644 --- a/src/app.tsx +++ b/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, + ); + } } /** diff --git a/src/global.less b/src/global.less index b1be474..ad4be4f 100644 --- a/src/global.less +++ b/src/global.less @@ -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; + } } \ No newline at end of file diff --git a/src/pages/ChatLogs/components/ChatImage.tsx b/src/pages/ChatLogs/components/ChatImage.tsx index b494e77..5cc14f5 100644 --- a/src/pages/ChatLogs/components/ChatImage.tsx +++ b/src/pages/ChatLogs/components/ChatImage.tsx @@ -27,7 +27,11 @@ export const ChatImage: React.FC = (props) => { }, }} src={`/api/${msg.path}`} - style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} + style={{ + width: '100%', + height: '100%', + objectFit: 'contain', + }} alt="" /> diff --git a/src/pages/ChatLogs/components/ChatTime.tsx b/src/pages/ChatLogs/components/ChatTime.tsx index ee8fad7..f0ab88c 100644 --- a/src/pages/ChatLogs/components/ChatTime.tsx +++ b/src/pages/ChatLogs/components/ChatTime.tsx @@ -12,7 +12,9 @@ export const ChatTime: React.FC = (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 = (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; diff --git a/src/pages/ChatLogs/components/index.module.scss b/src/pages/ChatLogs/components/index.module.scss index 7c04edd..dfefba0 100644 --- a/src/pages/ChatLogs/components/index.module.scss +++ b/src/pages/ChatLogs/components/index.module.scss @@ -171,3 +171,9 @@ content: ''; } } + +@media (max-width: 768px) { + .chatContentBox { + max-width: calc(100vw - 24px - 16px - 34px - 12px) !important; + } +} diff --git a/src/pages/ChatLogs/index.module.scss b/src/pages/ChatLogs/index.module.scss index 54f53e5..8a8d41a 100644 --- a/src/pages/ChatLogs/index.module.scss +++ b/src/pages/ChatLogs/index.module.scss @@ -95,6 +95,12 @@ } } +@media (max-width: 768px) { + .groupMenu { + height: calc(100vh - 164px); + } +} + .delFollowList { position: absolute; top: calc(100% - 34px); diff --git a/src/pages/ChatLogs/index.tsx b/src/pages/ChatLogs/index.tsx index 6fd1684..1307aa3 100644 --- a/src/pages/ChatLogs/index.tsx +++ b/src/pages/ChatLogs/index.tsx @@ -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('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(); diff --git a/src/pages/ChatLogsPhone/components/LogsContent.tsx b/src/pages/ChatLogsPhone/components/LogsContent.tsx new file mode 100644 index 0000000..1e3f4f4 --- /dev/null +++ b/src/pages/ChatLogsPhone/components/LogsContent.tsx @@ -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 = (props) => { + const { + tabKeyRef, + selectInnerStaffRef, + selectCustFollowRef, + chatLogLoading, + page, + isAllChatRef, + curr_page, + chatLogs, + selectStaff, + groupMembersObjRef, + chatLogLoadingRef, + } = props; + + const chatBoxRef = useRef(); + + // 监听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 ( + +
{ + if (e.target?.scrollTop == 0 && !isAllChatRef.current && !chatLogLoadingRef.current) { + page(curr_page + 1); + } + }} + > + {isAllChatRef.current ? ( +
+ 没有更多聊天记录了 +
+ ) : null} + {chatLogs.map((item: any) => { + if (item.curr_page) { + return ( +
+ ); + } else { + return ( +
+ {/* {item.show_time ? : null} */} + + {tabKeyRef.current == '2' ? ( + + ) : ( + + )} +
+ ); + } + })} +
+ + ); +}; diff --git a/src/pages/ChatLogsPhone/index.module.scss b/src/pages/ChatLogsPhone/index.module.scss new file mode 100644 index 0000000..39325ae --- /dev/null +++ b/src/pages/ChatLogsPhone/index.module.scss @@ -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; + } +} diff --git a/src/pages/ChatLogsPhone/index.tsx b/src/pages/ChatLogsPhone/index.tsx new file mode 100644 index 0000000..d7968bf --- /dev/null +++ b/src/pages/ChatLogsPhone/index.tsx @@ -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('0'); + const tabKeyRef = useRef('0'); + // 员工 + const [staffsList, setStaffsList] = useState([]); + const [selectStaff, setSelectStaff] = useState(); + const selectStaffRef = useRef(); + + // 内部联系人 + const [innerStaffsList, setInnerStaffsList] = useState([]); + const selectInnerStaffRef = useRef(); + const [selectInnerStaff, setSelectInnerStaff] = useState(); + const [loadingInner, setLoadingInner] = useState(false); + + // 外部联系人 + const [custFollowsList, setCustFollowsList] = useState([]); + const [selectCustFollow, setSelectCustFollow] = useState(); + const selectCustFollowRef = useRef(); + const [loadingOuter, setLoadingOuter] = useState(false); + + // 群聊 + const [groupList, setGroupList] = useState([]); + const selectGroupRef = useRef(); + const [selectGroup, setSelectGroup] = useState(); + const [loadingGroup, setLoadingGroup] = useState(false); + + // 群成员 + const [groupMembersList, setGroupMembersList] = useState([]); + const groupMembersObjRef = useRef({}); + + const [chatLogs, setChatLogs] = useState([]); + + const [tabs] = useState([ + { + key: '0', + label: '内部联系人', + children: '', + }, + { + key: '1', + label: '外部联系人', + children: '', + }, + { + key: '2', + label: '客户群聊', + children: '', + }, + ]); + + const [searchWord, setSearchWord] = useState({ + '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({}); + + 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 ( +
{ + 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, + }} + > +
+ +
+
+
+ {item.name} +
+
{item.remark}
+
+
+ ); + }; + + 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 ( +
+
{ + setDelFollowListShow(!delFollowListShow); + }} + > + 已删联系人（{checkCustFollowsIsEmpty(0)}） + {delFollowListShow ? : } +
+
+ {custFollowsList.map((item, i) => { + return item.state == 1 ? null : custFollowsListItem(item, i); + })} +
+ {checkCustFollowsIsEmpty(0) == 0 ? '暂无已删联系人' : ''} +
+
+
+ ); + } else { + return <>; + } + }; + + // const { notification } = App.useApp(); + const tabContent = () => { + //
{tabContent()}
+ + return ( + <> + {/* 内部联系人 */} +
+ + {innerStaffsList.length + ? innerStaffsList.map((item) => { + if (item.user_id == selectStaff?.user_id) { + return null; + } + return ( +
{ + 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' }} + > +
+ {item.avatar ? ( + + ) : ( + <>{item.name[0]} + )} +
+
+
+ {item.name} +
+
+
+ ); + }) + : null} +
+ {checkInnerIsEmpty() == 0 ? '暂无内部联系人' : ''} +
+ +
+
+ + {custFollowsList.length + ? custFollowsList.map((item, i) => { + return item.state == 0 ? null : custFollowsListItem(item, i); + }) + : null} +
+ {checkCustFollowsIsEmpty(1) == 0 ? '暂无外部联系人' : ''} +
+ +
+ {tabContentDel()} +
+ + { + 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} + /> + +
+ + ); + }; + + return ( + +
+
+ { + setStaffSearchWord(e.target.value.trim()); + }} + allowClear + /> +
+ {staffsList.map((item) => { + if (!item.name.includes(staffSearchWord)) return null; + return ( +
{ + 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' : '' }} + > +
+ {item.avatar ? ( + + ) : ( + <>{item.name[0]} + )} +
+
+
+ {item.name} +
+
+
+ ); + })} +
+ { + setOpenContactsDrawer(false); + }} + > + { + searchWord[tabKey] = e.target.value.trim(); + setSearchWord({ ...searchWord }); + }} + allowClear + /> + { + setTabKey(val); + // if (val == '1') { + // getCustFollowsList(); + // } else if (val == '2') { + // getGroupList(); + // } + }} + /> + {tabContent()} + + +
{ + setOpen(true); + }} + > + {tabKeyRef.current == '0' ? ( + <>{selectInnerStaffRef.current?.name} + ) : tabKeyRef.current == '1' ? ( + <>{selectCustFollowRef.current?.name} + ) : ( + <> + {selectGroupRef.current ? selectGroupRef.current?.name || '未知群名' : ''} + {selectGroupRef.current ? <>（{groupMembersList.length}） : null} + + )} +
+ {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' ? ( + + ) : tabKeyRef.current == '1' ? ( + + ) : ( + + )} + +
+ } + onClose={() => { + setOpenChatContentDrawer(false); + }} + bodyStyle={{ padding: 0, background: '#F5F5F5' }} + > + + + + ); +}; + +export default ChatLogsPhone; diff --git a/src/pages/CustomList/index.tsx b/src/pages/CustomList/index.tsx index eb0455d..5128ff1 100644 --- a/src/pages/CustomList/index.tsx +++ b/src/pages/CustomList/index.tsx @@ -229,6 +229,9 @@ const CustomList: React.FC = () => { +
跟进员工：{item?.staff_name || '暂无'}
+
添加方式：{AddWay[item.add_way]}
+
添加时间：{item?.create_time}
); })} @@ -389,14 +392,7 @@ const CustomList: React.FC = () => { }} dataIndex={'tags'} /> - { - return <>{record?.staff_name}; - }} - dataIndex={'user_id'} - /> + {/* */}