test: 新建会话 按钮

src/views/Conversations/Online/ConversationsList.jsx

@@ -4,6 +4,7 @@ import { Dropdown, Input, Button, } from 'antd';
 import { PlusOutlined, WhatsAppOutlined, LoadingOutlined } from '@ant-design/icons';
 import { fetchConversationsList, fetchOrderConversationsList, fetchConversationItemClose, postNewConversationItem } 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';
@@ -71,9 +72,9 @@ const Conversations = ({ mobile }) => {
     return () => {};
   }, [order_sn, shouldFetchCList, initialState]);
 
-  const getOrderConversationList = async (colisn) => {
+  const getOrderConversationList = async (colisn, WHATSAPP_ID = null) => {
     const { whatsapp_phone_number } = switchToC;
-    const whatsappID = coli_guest_WhatsApp || whatsapp_phone_number || '';
+    const whatsappID = WHATSAPP_ID || coli_guest_WhatsApp || whatsapp_phone_number || '';
     // let findCurrentOrderChats = conversationsList.filter((item) => `${item.coli_sn}` === `${colisn}`);
     // 使用opisn + whatsappID 判断, 解决订单修改whatsappID号码之后获取新会话, 登录账号此处省略
     let findCurrentOrderChats = conversationsList.filter((item) => `${item.whatsapp_phone_number}` === `${whatsappID}`);
@@ -97,6 +98,7 @@ const Conversations = ({ mobile }) => {
     }
     if (findCurrentIndex >= 0) {
       setCurrentConversation(findCurrent);
+      return findCurrent;
     } else {
       // reset chat window
       setCurrentConversation({ sn: '', customer_name: '', coli_sn: order_sn });
@@ -146,9 +148,27 @@ const Conversations = ({ mobile }) => {
     setDataSource(conversationsList);
   };
 
+  const [newChatModalVisible, setNewChatModalVisible] = useState(false);
+  const [newChatFormValues, setNewChatFormValues] = useState();
+  const handleNewChat = async (values) => {
+    // console.log(values);
+    const hasNewCurrent = await getOrderConversationList(values.coli_sn, values.phone_number);
+    if (hasNewCurrent !== false) {
+      //
+    }
+    setNewChatModalVisible(false);
+    // const newItem = await postNewConversationItem({...values, opi_sn: userId });
+    // if ( ! isEmpty(newItem)) {
+    //   addToConversationList(newItem);
+    //   setCurrentConversation(newItem);
+    // }
+    // setNewChatFormValues(values);
+  }
+
   return (
     <div className='flex flex-col h-inherit'>
-      <div className=''>
+      <div className='flex gap-1'>
+        {([404, 383].includes(userId)) && <Button onClick={() => setNewChatModalVisible(true)} icon={<PlusOutlined />} type={'primary'} />}
         <Input.Search
           className=''
           ref={searchInputRef}
@@ -177,7 +197,7 @@ const Conversations = ({ mobile }) => {
             setTabSelectedConversation({});
             return false;
           }}
-          placeholder={`搜索名称${conversationsListLoading ? '...' : ''}`}
+          placeholder={`搜索名称/号码/订单号${conversationsListLoading ? '...' : ''}`}
         />
       </div>
       <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
@@ -225,6 +245,7 @@ const Conversations = ({ mobile }) => {
           </Dropdown>
         ))}
       </div>
+      <ConversationsNewItem initialValues={{coli_id: currentConversation.coli_id, coli_sn: currentConversation.coli_sn}} open={newChatModalVisible} onCreate={handleNewChat} onCancel={() => setNewChatModalVisible(false)} />
     </div>
   );
 };

src/views/Conversations/Online/ConversationsNewItem.jsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import { Form, Input, Modal } from 'antd';
+import { isEmpty } from '@/utils/commons';
+
+export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) => {
+  const [form] = Form.useForm();
+  useEffect(() => {
+    onFormInstanceReady(form);
+  }, []);
+  return (
+    <Form layout='horizontal' form={form} name='form_in_modal' initialValues={initialValues}>
+      <Form.Item name={'phone_number'} label='WhatsApp号码' rules={[{ required: true, message: '请输入联系人手机号' }]}>
+        <Input placeholder='请输入联系人手机号' />
+      </Form.Item>
+      {/* <Form.Item name={'coli_id'} label={!isEmpty(initialValues?.coli_id) ? '关联当前订单' : '关联订单'} rules={[{ required: true, message: '关联的订单' }]}>
+        <Input placeholder='关联的订单'  />
+      </Form.Item> */}
+      <Form.Item name={'coli_sn'} label='订单SN' rules={[{ required: true, message: '订单SN' }]}>
+        <Input placeholder='订单SN'  />
+      </Form.Item>
+      {/* <Form.Item name={'name'} label='联系人名称' rules={[{ required: true, message: '请输入联系人名称' }]}>
+        <Input placeholder='请输入联系人名称' />
+      </Form.Item> */}
+    </Form>
+  );
+};
+export const ConversationItemFormModal = ({ open, onCreate, onCancel, initialValues }) => {
+  const [formInstance, setFormInstance] = useState();
+  return (
+    <Modal
+      open={open}
+      title='新建会话'
+      okText='创建'
+      // cancelText='Cancel'
+      okButtonProps={{
+        autoFocus: true,
+      }}
+      onCancel={() => { onCancel(); formInstance?.resetFields();}}
+      destroyOnClose
+      onOk={async () => {
+        try {
+          const values = await formInstance?.validateFields();
+          // formInstance?.resetFields();
+          onCreate(values);
+        } catch (error) {
+          console.log('Failed:', error);
+        }
+      }}>
+      <ConversationItemForm
+        initialValues={initialValues}
+        onFormInstanceReady={(instance) => {
+          setFormInstance(instance);
+        }}
+      />
+    </Modal>
+  );
+};
+export default ConversationItemFormModal;