会话列表: 搜索会话

src/views/Conversations/ChatWindow.jsx

@@ -28,7 +28,7 @@ const ChatWindow = () => {
         <Sider
           width={240}
           theme={'light'}
-          className='h-full overflow-y-auto'
+          className='h-full overflow-y-auto h-parent'
           style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}
           collapsible={true}
           breakpoint='xl'

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import { Button, Dropdown } from 'antd';
+import { Button, Dropdown, Input } from 'antd';
 import { MoreOutlined } from '@ant-design/icons';
 import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages } from '@/actions/ConversationActions';
 import { ChatList, ChatItem } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';
-import useAuthStore from '@/stores/AuthStore'
+import useAuthStore from '@/stores/AuthStore';
 
 /**
  * []
@@ -16,7 +16,7 @@ const Conversations = () => {
   const { coli_guest_WhatsApp } = orderRow || {};
   const { order_sn } = useParams();
   const navigate = useNavigate();
-  const userId = useAuthStore(state => state.loginUser.userId);
+  const userId = useAuthStore((state) => state.loginUser.userId);
   const initialState = useConversationStore((state) => state.initialState);
   const activeConversations = useConversationStore((state) => state.activeConversations);
   const currentConversation = useConversationStore((state) => state.currentConversation);
@@ -27,6 +27,8 @@ const Conversations = () => {
   const receivedMessageList = useConversationStore((state) => state.receivedMessageList);
   const setMsgLoading = useConversationStore((state) => state.setMsgLoading);
 
+  const [dataSource, setDataSource] = useState(conversationsList);
+
   const [switchToC, setSwitchToC] = useState({});
   const [shouldFetchCList, setShouldFetchCList] = useState(true);
   useEffect(() => {
@@ -91,14 +93,44 @@ const Conversations = () => {
       navigate(`/order/chat`, { replace: true });
     }
   };
+
+  const searchInputRef = useRef(null);
+  const [searchContent, setSearchContent] = useState('');
+  const handleSearchConversations = (val) => {
+    if (val.toLowerCase().trim() !== '') {
+      const res = conversationsList.filter(
+        (item) => (item.whatsapp_name.toLowerCase()).includes(val.toLowerCase().trim())
+          || (item.whatsapp_name.toLowerCase()).includes(val.toLowerCase().trim())
+          || (item.coli_id.toLowerCase()).includes(val.toLowerCase().trim())
+      );
+      setDataSource(res);
+      return false;
+    }
+    setDataSource(conversationsList);
+  };
+
   return (
-    <>
-      <div className=' overflow-x-hidden'>
-        {conversationsList.map((item) => (
+    <div className='flex flex-col h-inherit'>
+      <div className=''>
+        <Input.Search
+          className=''
+          ref={searchInputRef}
+          onSearch={handleSearchConversations}
+          allowClear
+          value={searchContent}
+          onChange={(e) => {
+            setSearchContent(e.target.value);
+            handleSearchConversations(e.target.value);
+          }}
+          placeholder='搜索名称'
+        />
+      </div>
+      <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
+        {dataSource.map((item) => (
           <Dropdown
             key={item.sn}
             menu={{
-              items: [{ label: '关闭会话', key: 'close', danger: true, }],
+              items: [{ label: '关闭会话', key: 'close', danger: true }],
               onClick: ({ key, domEvent }) => {
                 domEvent.stopPropagation();
                 switch (key) {
@@ -115,19 +147,21 @@ const Conversations = () => {
               {...item}
               key={item.sn}
               id={item.sn}
-              letterItem={{id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: (item.whatsapp_name.trim() || item.whatsapp_phone_number).slice(0, 5)}}
+              letterItem={{ id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: (item.whatsapp_name.trim() || item.whatsapp_phone_number).slice(0, 5) }}
               alt={`${item.whatsapp_name.trim()}`}
               title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
               subtitle={item.coli_id}
               date={item.last_received_time}
               unread={item.unread_msg_count}
-              className={String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : ''}
+              className={
+                String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : ''
+              }
               onClick={() => onSwitchConversation(item)}
             />
           </Dropdown>
         ))}
       </div>
-    </>
+    </div>
   );
 };
 export default Conversations;

src/views/Conversations/Conversations.css

@@ -42,6 +42,9 @@
 }
 
 /** Chat Window */
+.chatwindow-wrapper .h-parent .ant-layout-side-children, .chatwindow-wrapper .h-inherit{
+    height: inherit;
+}
 .chatwindow-wrapper .rce-container-mbox .rce-mbox{
     max-width: 500px;
 }