|
|
|
|
@ -1,35 +1,21 @@
|
|
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
|
|
|
|
import { useParams, useNavigate, useLocation } from 'react-router-dom';
|
|
|
|
|
import { Dropdown, Input, Button, Empty, Tooltip, Tag, Select, Divider, Radio, Popover, theme } from 'antd';
|
|
|
|
|
import { PlusOutlined, WhatsAppOutlined, LoadingOutlined, HistoryOutlined, FireOutlined,AudioTwoTone, FilterOutlined, TagsOutlined, TagsTwoTone, FilterTwoTone } from '@ant-design/icons';
|
|
|
|
|
import { fetchConversationsList, fetchOrderConversationsList, fetchConversationItemClose, fetchConversationsSearch, fetchConversationItemUnread, UNREAD_MARK } from '@/actions/ConversationActions';
|
|
|
|
|
import { ChatItem } from 'react-chat-elements';
|
|
|
|
|
import { Input, Button, Empty, Tooltip } from 'antd';
|
|
|
|
|
import { PlusOutlined, LoadingOutlined, HistoryOutlined, FireOutlined,AudioTwoTone } from '@ant-design/icons';
|
|
|
|
|
import { fetchConversationsList, fetchOrderConversationsList } from '@/actions/ConversationActions';
|
|
|
|
|
import ConversationsNewItem from './ConversationsNewItem';
|
|
|
|
|
import { isEmpty, olog, stringToColour } from '@/utils/commons';
|
|
|
|
|
import { isEmpty } from '@/utils/commons';
|
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
|
import useAuthStore from '@/stores/AuthStore';
|
|
|
|
|
import { useVisibilityState } from '@/hooks/useVisibilityState';
|
|
|
|
|
import { OrderLabelDefaultOptions, OrderStatusDefaultOptions, RemindStateDefaultOptions } from '@/stores/OrderStore'
|
|
|
|
|
import ChatListItem from './Components/ChatListItem';
|
|
|
|
|
import ChatListFilter from './Components/ChatListFilter';
|
|
|
|
|
import useStyleStore from '@/stores/StyleStore';
|
|
|
|
|
|
|
|
|
|
const { Option, OptGroup } = Select;
|
|
|
|
|
const { useToken } = theme;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* []
|
|
|
|
|
*/
|
|
|
|
|
const Conversations = () => {
|
|
|
|
|
const { token } = useToken();
|
|
|
|
|
const contentStyle = {
|
|
|
|
|
backgroundColor: token.colorBgElevated,
|
|
|
|
|
borderRadius: token.borderRadiusLG,
|
|
|
|
|
boxShadow: token.boxShadowSecondary,
|
|
|
|
|
};
|
|
|
|
|
const menuStyle = {
|
|
|
|
|
boxShadow: 'none',
|
|
|
|
|
};
|
|
|
|
|
const [mobile] = useStyleStore((state) => [state.mobile]);
|
|
|
|
|
const routerReplace = mobile === false ? true : false; // : true;
|
|
|
|
|
const routePrefix = mobile === false ? `/order/chat` : `/m/chat`;
|
|
|
|
|
@ -43,10 +29,8 @@ const Conversations = () => {
|
|
|
|
|
const conversationsList = useConversationStore((state) => state.conversationsList);
|
|
|
|
|
const [conversationsListLoading, setConversationsListLoading] = useConversationStore((state) => [state.conversationsListLoading, state.setConversationsListLoading]);
|
|
|
|
|
const addToConversationList = useConversationStore((state) => state.addToConversationList);
|
|
|
|
|
const delConversationitem = useConversationStore((state) => state.delConversationitem);
|
|
|
|
|
|
|
|
|
|
const closedConversationsList = useConversationStore((state) => state.closedConversationsList);
|
|
|
|
|
const setClosedConversationList = useConversationStore((state) => state.setClosedConversationList);
|
|
|
|
|
|
|
|
|
|
const isVisible = useVisibilityState();
|
|
|
|
|
|
|
|
|
|
@ -148,42 +132,10 @@ const Conversations = () => {
|
|
|
|
|
// switchConversation(item);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleConversationItemClose = async (item) => {
|
|
|
|
|
await fetchConversationItemClose({ conversationid: item.sn, opisn: item.opi_sn });
|
|
|
|
|
delConversationitem(item);
|
|
|
|
|
if (String(order_sn) === String(item.coli_sn)) {
|
|
|
|
|
navigate(routePrefix, { replace: routerReplace });
|
|
|
|
|
}
|
|
|
|
|
const _clist = await fetchConversationsSearch({ opisn: userId, session_enable: 0 });
|
|
|
|
|
setClosedConversationList(_clist);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleConversationItemUnread = async (item) => {
|
|
|
|
|
await fetchConversationItemUnread({ conversationid: item.sn });
|
|
|
|
|
await refreshConversationList();
|
|
|
|
|
setListUpdateFlag(Math.random());
|
|
|
|
|
}
|
|
|
|
|
const [{ search: searchContent, ...filter }, setSearchContent] =
|
|
|
|
|
useConversationStore((state) => [state.filter, state.setFilterSearch])
|
|
|
|
|
|
|
|
|
|
const searchInputRef = useRef(null);
|
|
|
|
|
const [searchContent, setSearchContent] = useState('');
|
|
|
|
|
const handleSearchConversations = (val) => {
|
|
|
|
|
const fromSource = activeList ? conversationsList : closedConversationsList;
|
|
|
|
|
if (val.toLowerCase().trim() !== '') {
|
|
|
|
|
const res = fromSource.filter(
|
|
|
|
|
(item) =>
|
|
|
|
|
item.whatsapp_name.toLowerCase().includes(val.toLowerCase().trim()) ||
|
|
|
|
|
item.whatsapp_phone_number.toLowerCase().includes(val.toLowerCase().trim()) ||
|
|
|
|
|
item.coli_id.toLowerCase().includes(val.toLowerCase().trim())
|
|
|
|
|
);
|
|
|
|
|
setDataSource(res);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
setDataSource(fromSource);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleRichSearchConvs = (params) => {
|
|
|
|
|
// alert('1')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const [newChatModalVisible, setNewChatModalVisible] = useState(false);
|
|
|
|
|
const [editingChat, setEditingChat] = useState({});
|
|
|
|
|
@ -196,32 +148,6 @@ const Conversations = () => {
|
|
|
|
|
setCurrentConversation({});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const filterTags = [
|
|
|
|
|
{ color: 'volcano', label: '重点', value: '重点' },
|
|
|
|
|
{ color: 'success', label: '成行', value: '成行' },
|
|
|
|
|
{ color: 'gold', label: '老客户', value: '老客户' },
|
|
|
|
|
{ color: 'blue', label: '走团中', value: '走团中' },
|
|
|
|
|
{ color: 'red-inverse', label: '投诉', value: '投诉' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* todo: 弹出, 多选
|
|
|
|
|
*/
|
|
|
|
|
const filterTag = (
|
|
|
|
|
<Select defaultValue="" dropdownStyle={{ width: '10rem', maxHeight: 400, overflow: 'auto' }}>
|
|
|
|
|
<Option value="">所有</Option>
|
|
|
|
|
<OptGroup key={'label'} label={'标签'}>
|
|
|
|
|
{filterTags.map((item, index) => (<Option value={item.value} key={item.value}>{item.label}</Option>))}
|
|
|
|
|
</OptGroup>
|
|
|
|
|
<OptGroup key={'remind'} label={'提醒'}>
|
|
|
|
|
{RemindStateDefaultOptions.map((item, index) => (<Option value={item.value} key={item.value}>{item.label}</Option>))}
|
|
|
|
|
</OptGroup>
|
|
|
|
|
<OptGroup key={'stat'} label={'状态'}>
|
|
|
|
|
{OrderStatusDefaultOptions.map((item, index) => (<Option value={`state.${item.value}`} key={`state.${item.value}`}>{item.label}</Option>))}
|
|
|
|
|
</OptGroup>
|
|
|
|
|
</Select>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='flex flex-col h-inherit'>
|
|
|
|
|
<div className='flex gap-1 items-center'>
|
|
|
|
|
@ -243,7 +169,6 @@ const Conversations = () => {
|
|
|
|
|
value={searchContent}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setSearchContent(e.target.value)
|
|
|
|
|
handleSearchConversations(e.target.value)
|
|
|
|
|
setTabCnt(-1)
|
|
|
|
|
setTabSelectedConversation({})
|
|
|
|
|
}}
|
|
|
|
|
@ -256,7 +181,6 @@ const Conversations = () => {
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
onPressEnter={(e) => {
|
|
|
|
|
handleSearchConversations(e.target.value)
|
|
|
|
|
searchInputRef.current.blur()
|
|
|
|
|
onSwitchConversation(dataSource[tabCnt < 0 ? 0 : tabCnt])
|
|
|
|
|
setTabCnt(-1)
|
|
|
|
|
@ -266,7 +190,7 @@ const Conversations = () => {
|
|
|
|
|
placeholder={`名称/号码/订单号${
|
|
|
|
|
conversationsListLoading ? '...' : ''
|
|
|
|
|
}`}
|
|
|
|
|
onSearch={handleRichSearchConvs}
|
|
|
|
|
// onSearch={handleRichSearchConvs}
|
|
|
|
|
// addonBefore={filterTag}
|
|
|
|
|
// addonBefore={<FilterOutlined />}
|
|
|
|
|
// enterButton={'Filter'}
|
|
|
|
|
@ -294,7 +218,7 @@ const Conversations = () => {
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<ChatListFilter onFilterChange={(list) => setDataSource(list)} />
|
|
|
|
|
<ChatListFilter onFilterChange={(list) => setDataSource(list)} activeList={activeList} />
|
|
|
|
|
<div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
|
|
|
|
|
{conversationsListLoading && dataSource.length === 0 ? (
|
|
|
|
|
<div className='text-center py-2'>
|
|
|
|
|
|
Lei OT
11 months ago