Merge branch 'dev/unassign'
Lei OT
1 year ago
commit
75352ad656
@ -0,0 +1,52 @@
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
import { Divider, Layout, Flex, Image } from 'antd';
|
||||
import useFormStore from '@/stores/FormStore';
|
||||
import SearchForm from './Conversations/History/SearchForm';
|
||||
import ConversationsList from './Conversations/History/ConversationsList';
|
||||
import MessagesMatchList from './Conversations/History/MessagesMatchList';
|
||||
import MessagesList from './Conversations/History/MessagesList';
|
||||
import ImageAlbumPreview from './Conversations/History/ImageAlumPreview';
|
||||
import { flush, pick } from '@/utils/commons';
|
||||
import { fetchConversationsSearch, fetchConversationsUnassigned } from '@/actions/ConversationActions';
|
||||
|
||||
const { Sider, Content } = Layout;
|
||||
const Unassign = (props) => {
|
||||
const [selectedConversation, setSelectedConversation] = useFormStore((state) => [state.chatHistorySelectChat, state.setChatHistorySelectChat]);
|
||||
|
||||
const [conversationsListLoading, setConversationsListLoading] = useState(false);
|
||||
const [conversationsList, setConversationsList] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
getConversationsList();
|
||||
return () => {};
|
||||
}, []);
|
||||
|
||||
const getConversationsList = async () => {
|
||||
setConversationsListLoading(true);
|
||||
const params = {};
|
||||
const data = await fetchConversationsSearch(params);
|
||||
setConversationsListLoading(false);
|
||||
setConversationsList(data);
|
||||
if (data.length === 1) {
|
||||
setSelectedConversation(data[0]);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 279px)', height: 'calc(100% - 279px)' }}>
|
||||
<Sider width={300} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)' }}>
|
||||
<p className='text-center '>未分配会话</p>
|
||||
<ConversationsList {...{ conversationsListLoading, conversationsList, selectedConversation, handleChatItemClick: setSelectedConversation }} />
|
||||
</Sider>
|
||||
<Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}>
|
||||
{/* <Flex className='h-full relative'>
|
||||
<MessagesMatchList />
|
||||
<MessagesList />
|
||||
</Flex>
|
||||
<ImageAlbumPreview /> */}
|
||||
</Content>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Unassign;
|
||||
@ -0,0 +1,55 @@
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { Layout, Button } from 'antd';
|
||||
import MessagesHeader from '@/views/Conversations/Online/MessagesHeader';
|
||||
import MessagesWrapper from '@/views/Conversations/Online/MessagesWrapper';
|
||||
import InputComposer from '@/views/Conversations/Online/InputComposer';
|
||||
import { UnorderedListOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import useConversationStore from '@/stores/ConversationStore';
|
||||
import useAuthStore from '@/stores/AuthStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import InputAssign from './InputAssign';
|
||||
|
||||
import { fetchConversationsList, fetchConversationsSearch } from '@/actions/ConversationActions';
|
||||
|
||||
const { Content, Header, Footer } = Layout;
|
||||
|
||||
function ChatAssign() {
|
||||
const navigate = useNavigate();
|
||||
const { whatsappid, conversationid } = useParams();
|
||||
|
||||
const [currentConversation, setCurrentConversation] = useConversationStore(useShallow((state) => [state.currentConversation, state.setCurrentConversation]));
|
||||
|
||||
async function refreshConversationList() {
|
||||
const _list = await fetchConversationsSearch({ whatsapp_id: whatsappid });
|
||||
if (_list.length > 0) {
|
||||
setCurrentConversation(_list[0]);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
refreshConversationList();
|
||||
|
||||
return () => {};
|
||||
}, [whatsappid]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 32px)', height: 'calc(100vh - 32px)', minWidth: '360px' }}>
|
||||
<Header className=' px-2 ant-layout-sider-light ant-card h-auto flex flex-col justify-between gap-1 '>
|
||||
<MessagesHeader />
|
||||
<InputAssign className={'block py-2'} initialValues={{ conversationid, whatsappid }} />
|
||||
</Header>
|
||||
<Content className='flex-grow bg-whatsapp-bg relative'>
|
||||
<MessagesWrapper updateRead={false} forceGetMessages={true} />
|
||||
</Content>
|
||||
{/* <Footer className='ant-layout-sider-light p-0 h-40'>
|
||||
<InputAssign mobile />
|
||||
</Footer> */}
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChatAssign;
|
||||
@ -0,0 +1,43 @@
|
||||
import { useState } from 'react';
|
||||
import { App, Button, Form, Input } from 'antd';
|
||||
import SearchInput from '@/components/SearchInput';
|
||||
import { fetchSalesAgent } from '@/actions/CommonActions';
|
||||
import { postAssignConversation } from '@/actions/ConversationActions';
|
||||
|
||||
const InputAssign = ({ initialValues, ...props }) => {
|
||||
const { message } = App.useApp();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [subLoading, setSubLoading] = useState(false);
|
||||
async function handleSubmit(values) {
|
||||
const valuesSub = {
|
||||
...values,
|
||||
opi_sn: values.opi_sn.value,
|
||||
};
|
||||
setSubLoading(true);
|
||||
await postAssignConversation(valuesSub);
|
||||
setSubLoading(false);
|
||||
message.success('分配成功');
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Form layout={'inline'} form={form} initialValues={initialValues} onFinish={handleSubmit} {...props}>
|
||||
<Form.Item label='分配至' name='opi_sn' rules={[{ required: true, message: '请选择分配的顾问' }]}>
|
||||
<SearchInput placeholder='搜索顾问, 如Coco' fetchOptions={fetchSalesAgent} allowClear={true} />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name='conversationid'>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<div className='flex justify-end gap-2 items-end'>
|
||||
{/* <Button type='primary' ghost htmlType='submit' size={'small'}>
|
||||
分配给我
|
||||
</Button> */}
|
||||
<Button type='primary' htmlType='submit' loading={subLoading}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default InputAssign;
|
||||
Loading…
Reference in New Issue