diff --git a/src/hooks/useConversation.js b/src/hooks/useConversation.js index fd14b9f..24dbd91 100644 --- a/src/hooks/useConversation.js +++ b/src/hooks/useConversation.js @@ -39,7 +39,7 @@ export function useConversationNewItem() { * 创建新会话/编辑会话 */ const newConversation = async (body) => { - const { wa_id, remark, opi_sn, conversationid } = body; + const { wa_id, remark, opi_sn: opisn, conversationid } = body; const newChat = { whatsapp_phone_number: wa_id, remark: remark || '', @@ -47,9 +47,9 @@ export function useConversationNewItem() { guest_phone: body.phone_number || '', guest_name: body.name || '', } - const createdNew = await postNewOrEditConversationItem({ ...newChat, opi_sn, conversationid }); + const createdNew = await postNewOrEditConversationItem({ ...newChat, opisn, conversationid }); // addToConversationList([{...createdNew, sn: createdNew.conversationid}]); - const _list = await fetchConversationsList({ opisn: opi_sn }); + const _list = await fetchConversationsList({ opisn }); addToConversationList(_list); if (!body.conversationid) { const newChat = _list.find(item => item.sn === createdNew.conversationid); diff --git a/src/stores/ConversationStore.js b/src/stores/ConversationStore.js index 64e262a..66eeba6 100644 --- a/src/stores/ConversationStore.js +++ b/src/stores/ConversationStore.js @@ -411,7 +411,7 @@ export const useConversationStore = create( // const closedList = await fetchConversationsSearch({ opisn: userIds, session_enable: 0 }); // setClosedConversationList(closedList); - const myTags = await fetchTags({ opi_sn: userIds}); + const myTags = await fetchTags({ opisn: userIds}); setTags(myTags); setInitial(true); diff --git a/src/views/Conversations/Online/Components/ChatListFilter.jsx b/src/views/Conversations/Online/Components/ChatListFilter.jsx index e039c27..78a68b9 100644 --- a/src/views/Conversations/Online/Components/ChatListFilter.jsx +++ b/src/views/Conversations/Online/Components/ChatListFilter.jsx @@ -20,9 +20,9 @@ const TagColorStyle = (tag, outerStyle = false) => { const outerStyleObj = outerStyle ? { borderColor: `${color}66`, backgroundColor: `${color}0D` } : {}; return { color: `${color}`, ...outerStyleObj }; }; -const ChatListFilter = ({ onFilterChange, ...props }) => { +const ChatListFilter = ({ onFilterChange, activeList, ...props }) => { const [ - { tags: selectedTags, otype: selectedOType, ...filter }, + { tags: selectedTags, otype: selectedOType, search, ...filter }, setFilterTags, setFilterOtype, resetFilter ] = useConversationStore((state) => [ state.filter, @@ -33,6 +33,22 @@ const ChatListFilter = ({ onFilterChange, ...props }) => { const closedConversationsList = useConversationStore((state) => state.closedConversationsList); const handleFilter = async () => { + const fromSource = activeList ? conversationsList : closedConversationsList; + + // input 搜索框 + let filterSearchFun = () => true; + if (search.toLowerCase().trim() !== '') { + const _search = search.toLowerCase().trim(); + filterSearchFun = (item) => + (item.conversation_memo || '').toLowerCase().includes(_search) || + (item.whatsapp_name || '').toLowerCase().includes(_search) || + (item.whatsapp_phone_number || '').toLowerCase().includes(_search) || + (item?.channels?.email || '').toLowerCase().includes(_search) || + (item.coli_id || '').toLowerCase().includes(_search); + } + + + // 订单筛选: 标签, 状态, 团内 const [otypeC, v] = selectedOType ? selectedOType.split('@') : []; const otypeV = v ? parseInt(v) : ''; let filterOTypeFun = () => true; @@ -50,19 +66,18 @@ const ChatListFilter = ({ onFilterChange, ...props }) => { default: break } + // 会话自定义标签 const filterTagFun = (item) => { const itemTagKeys = (item.tags || []).map(t => t.key); return isEmpty(selectedTags) ? true : (selectedTags || []).some(tele => (itemTagKeys).includes(tele)); } - const filterWithOType = conversationsList.filter(filterOTypeFun).filter(filterTagFun); - const filterWithOTypeInClose = closedConversationsList.filter(filterOTypeFun); + const filterWithParamRes = fromSource.filter(filterSearchFun).filter(filterOTypeFun).filter(filterTagFun); if (typeof onFilterChange === 'function') { - onFilterChange(filterWithOType); + onFilterChange(filterWithParamRes); } }; - const [tags] = useConversationStore((state) => [state.tags]); const [form] = Form.useForm(); const handleTagsChange = (tag, checked) => { @@ -83,15 +98,15 @@ const ChatListFilter = ({ onFilterChange, ...props }) => { resetFilter(); form.resetFields(); if (typeof onFilterChange === 'function') { - onFilterChange(conversationsList); + const fromSource = activeList ? conversationsList : closedConversationsList; + onFilterChange(fromSource); } } + useEffect(() => { handleFilter() - return () => { - - } + return () => {} }, [selectedTags, selectedOType, filter ]) const [openPopup, setOpenPopup] = useState(false); diff --git a/src/views/Conversations/Online/Components/ChatListItem.jsx b/src/views/Conversations/Online/Components/ChatListItem.jsx index e9adb0b..9ddf62f 100644 --- a/src/views/Conversations/Online/Components/ChatListItem.jsx +++ b/src/views/Conversations/Online/Components/ChatListItem.jsx @@ -134,7 +134,7 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch conversationid: item.sn, tag_id: tagKey || '', tag_label: tagLabel || '', - opi_sn: userId, + opisn: userId, }) if (isEmpty(tagKey)) { addTag({ label: rtag.tag_label, key: rtag.tag_key, value: rtag.tag_key }) diff --git a/src/views/Conversations/Online/ConversationsList.jsx b/src/views/Conversations/Online/ConversationsList.jsx index 389ec3d..e59e47c 100644 --- a/src/views/Conversations/Online/ConversationsList.jsx +++ b/src/views/Conversations/Online/ConversationsList.jsx @@ -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 = ( - - ); - return (