diff --git a/src/actions/ConversationActions.js b/src/actions/ConversationActions.js index 914af6e..7908463 100644 --- a/src/actions/ConversationActions.js +++ b/src/actions/ConversationActions.js @@ -82,6 +82,15 @@ export const fetchCleanUnreadMsgCount = async (params) => { return errcode !== 0 ? {} : result; }; +/** + * 标记未未读 + * @param {object} body conversationItem: { sn, ... } + */ +export const fetchConversationItemUnread = async (body) => { + const { errcode, result } = await fetchJSON(`${API_HOST}/set_state_unread`, body); + return errcode !== 0 ? {} : result; +}; + /** * ------------------------------------------------------------------------------------------------ * 历史记录 @@ -105,6 +114,7 @@ export const fetchConversationsSearch = async (params) => { OPI_Name: `${ele.OPI_Name || ele.opi_name || ''}`.trim(), dateText: dayjs((ele.lasttime || ele.lasttime)).format('MM-DD HH:mm'), matchMsgList: parseRenderMessageList((ele.msglist_AsJOSN || [])), // .reverse()), + coli_id: '', })); return list; }; diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css index df12ffe..02c482b 100644 --- a/src/views/Conversations/Conversations.css +++ b/src/views/Conversations/Conversations.css @@ -158,6 +158,9 @@ height: 10px; right: -9px; } +.chatwindow-wrapper .rce-citem-avatar{ + border-bottom: 1px solid #0000000d; +} .chatwindow-wrapper .rce-avatar-letter{ margin-top: 0; /* margin-left: 5px; */ diff --git a/src/views/Conversations/Online/ConversationsList.jsx b/src/views/Conversations/Online/ConversationsList.jsx index e171cbe..457440e 100644 --- a/src/views/Conversations/Online/ConversationsList.jsx +++ b/src/views/Conversations/Online/ConversationsList.jsx @@ -1,15 +1,17 @@ import { useEffect, useState, useRef } from 'react'; import { useParams, useNavigate, useLocation } from 'react-router-dom'; -import { Dropdown, Input, Button, Empty, Tooltip } from 'antd'; -import { PlusOutlined, WhatsAppOutlined, LoadingOutlined, HistoryOutlined, FireOutlined } from '@ant-design/icons'; -import { fetchConversationsList, fetchOrderConversationsList, fetchConversationItemClose, fetchConversationsSearch, postNewConversationItem } from '@/actions/ConversationActions'; +import { Dropdown, Input, Button, Empty, Tooltip, Tag, Select } from 'antd'; +import { PlusOutlined, WhatsAppOutlined, LoadingOutlined, HistoryOutlined, FireOutlined, MessageFilled, FilterOutlined, PlusSquareOutlined } from '@ant-design/icons'; +import { fetchConversationsList, fetchOrderConversationsList, fetchConversationItemClose, fetchConversationsSearch, postNewConversationItem, fetchConversationItemUnread } from '@/actions/ConversationActions'; import { ChatItem } from 'react-chat-elements'; import ConversationsNewItem from './ConversationsNewItem'; import { isEmpty, olog } 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' +const { Option, OptGroup } = Select; /** * [] */ @@ -27,6 +29,7 @@ const Conversations = ({ mobile }) => { const [conversationsListLoading, setConversationsListLoading] = useConversationStore((state) => [state.conversationsListLoading, state.setConversationsListLoading]); const addToConversationList = useConversationStore((state) => state.addToConversationList); const delConversationitem = useConversationStore((state) => state.delConversationitem); + const updateConversationItem = useConversationStore((state) => state.updateConversationItem); const closedConversationsList = useConversationStore((state) => state.closedConversationsList); const setClosedConversationList = useConversationStore((state) => state.setClosedConversationList); @@ -38,7 +41,7 @@ const Conversations = ({ mobile }) => { async function refreshConversationList() { setConversationsListLoading(mobile !== undefined ? true : false); - const _list = await fetchConversationsList({opisn:userId}); + const _list = await fetchConversationsList({ opisn: userId }); addToConversationList(_list); setConversationsListLoading(false); } @@ -58,7 +61,6 @@ const Conversations = ({ mobile }) => { return () => {}; }, [isVisible]); - const [dataSource, setDataSource] = useState(conversationsList); useEffect(() => { setDataSource(conversationsList); @@ -138,21 +140,46 @@ const Conversations = ({ mobile }) => { setClosedConversationList(_clist); }; + const handleConversationItemUnread = async (item) => { + // updateConversationItem({ sn: item.sn, unread_msg_count: 1000 }); + // const bak_dataSource = dataSource; + // const targetIndex = bak_dataSource.findIndex((ele) => String(ele.sn) === String(item.sn)); + // bak_dataSource.splice(targetIndex, 1, { + // ...conversationsList[targetIndex], + // ...{ sn: item.sn, unread_msg_count: 1000 }, + // }) + setDataSource((prev) => + prev.map((ele) => { + return String(ele.sn) === String(item.sn) ? { ...ele, unread_msg_count: 1000 } : ele; + }) + ); + // setDataSource(bak_dataSource); + // setDataSource(conversationsList); + await fetchConversationItemUnread({ conversationid: item.sn }); + refreshConversationList(); + } + const searchInputRef = useRef(null); const [searchContent, setSearchContent] = useState(''); const handleSearchConversations = (val) => { + const fromSource = activeList ? conversationsList : closedConversationsList; if (val.toLowerCase().trim() !== '') { - const res = conversationsList.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()) + 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(conversationsList); + setDataSource(fromSource); }; + const handleRichSearchConvs = (params) => { + // alert('1') + } + const [newChatModalVisible, setNewChatModalVisible] = useState(false); const [newChatFormValues, setNewChatFormValues] = useState(); const handleNewChat = async (values) => { @@ -168,7 +195,7 @@ const Conversations = ({ mobile }) => { // setCurrentConversation(newItem); // } // setNewChatFormValues(values); - } + }; const [activeList, setActiveList] = useState(true); // const closedVisible = closedConversationsList.length > 0; @@ -177,16 +204,41 @@ const Conversations = ({ mobile }) => { setDataSource(_active ? closedConversationsList : conversationsList); setActiveList(!activeList); 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 = ( + + ); return (