feat: 新建会话

src/actions/ConversationActions.js

@@ -63,6 +63,14 @@ export const fetchConversationItemClose = async (body) => {
   return result;
 };
 
+/**
+ * @param {object} body { phone_number, name }
+ */
+export const postNewConversationItem = async (body) => {
+  const { errcode, result } = await postJSON(`${API_HOST}/newconversation`, body);
+  return errcode !== 0 ? {} : result;
+};
+
 /**
  * @param {object} params { opisn, whatsappid }
  */

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,11 +1,13 @@
 import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import { Dropdown, Input } from 'antd';
-import { fetchOrderConversationsList, fetchConversationItemClose, } from '@/actions/ConversationActions';
+import { Dropdown, Input, Button, Modal, Form } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { fetchOrderConversationsList, fetchConversationItemClose, postNewConversationItem } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore';
+import ConversationsNewItem from './ConversationsNewItem';
 
 /**
  * []
@@ -127,9 +129,22 @@ const Conversations = ({ mobile }) => {
     setDataSource(conversationsList);
   };
 
+  const [newChatModalVisible, setNewChatModalVisible] = useState(false);
+  const [newChatFormValues, setNewChatFormValues] = useState();
+  const handleNewChat = async (values) => {
+    console.log(values);
+    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'>
+        <Button onClick={() => setNewChatModalVisible(true)} icon={<PlusOutlined />} type={'primary'} />
         <Input.Search
           className=''
           ref={searchInputRef}
@@ -142,10 +157,10 @@ const Conversations = ({ mobile }) => {
             setTabCnt(-1);
             setTabSelectedConversation({});
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             if (e.key === 'Tab') {
               e.preventDefault();
-              const _this = tabCnt >= dataSource.length-1 ? 0 : tabCnt + 1
+              const _this = tabCnt >= dataSource.length - 1 ? 0 : tabCnt + 1;
               setTabCnt(_this);
               setTabSelectedConversation(dataSource[_this]);
             }
@@ -153,12 +168,12 @@ const Conversations = ({ mobile }) => {
           onPressEnter={(e) => {
             handleSearchConversations(e.target.value);
             searchInputRef.current.blur();
-            onSwitchConversation(dataSource[(tabCnt < 0 ? 0 : tabCnt)]);
+            onSwitchConversation(dataSource[tabCnt < 0 ? 0 : tabCnt]);
             setTabCnt(-1);
             setTabSelectedConversation({});
             return false;
           }}
-          placeholder='搜索名称'
+          placeholder='搜索名称/号码/订单号'
         />
       </div>
       <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
@@ -189,16 +204,16 @@ const Conversations = ({ mobile }) => {
               subtitle={item.coli_id}
               date={item.last_received_time}
               unread={item.unread_msg_count}
-              className={
-                [String(item.sn) === String(currentConversation.sn) ? '__active text-primary  bg-whatsapp-bg' : '',
-                String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : ''
-              ].join(' ')
-              }
+              className={[
+                String(item.sn) === String(currentConversation.sn) ? '__active text-primary  bg-whatsapp-bg' : '',
+                String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : '',
+              ].join(' ')}
               onClick={() => onSwitchConversation(item)}
             />
           </Dropdown>
         ))}
       </div>
+      <ConversationsNewItem open={newChatModalVisible} onCreate={handleNewChat} onCancel={() => setNewChatModalVisible(false)} />
     </div>
   );
 };

src/views/Conversations/Components/ConversationsNewItem.jsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { Form, Input, Modal } from 'antd';
+
+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={'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;