perf: 供应商邮件

src/views/Conversations/Online/Components/SupplierEmailDrawer.jsx

@@ -6,7 +6,7 @@ import { InboxIcon, SendPlaneFillIcon, ExpandIcon } from '@/components/Icons'
 import EmailDetailInline from '../Components/EmailDetailInline'
 import { debounce, isEmpty } from '@/utils/commons'
 
-const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_sn, oid, ...props }) => {
+const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_sn, oid, emailItem: clickItem, ...props }) => {
   const [open, setOpen] = useState(false)
   const [selectedEmail, setSelectedEmail] = useState({})
   const searchInputRef = useRef(null)
@@ -18,6 +18,7 @@ const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_
 
     return () => {}
   }, [otherEmailList])
+
   const onClearSearch = () => {
     setDataSource(otherEmailList)
   }
@@ -26,6 +27,33 @@ const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_
     const res = otherEmailList.filter((ele) => `${ele.MAI_Subject}${ele.SenderReceiver}`.toLowerCase().includes(value.toLowerCase()))
     setDataSource(res)
   }
+
+  const onClickEmailItem = (emailItem) => {
+    const emailMsg = {
+      conversationid: currentConversationID,
+      order_opi: opi_sn,
+      coli_sn: oid,
+      id: emailItem.MAI_SN,
+      MAI_SN: emailItem.MAI_SN,
+      msgOrigin: {
+        from: '',
+        to: '',
+        id: emailItem.MAI_SN,
+        email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
+      },
+    }
+    setSelectedEmail(emailMsg)
+  };
+
+  useEffect(() => {
+    if (!isEmpty(clickItem)) {
+      onClickEmailItem(clickItem)
+      setOpen(true);
+    }
+
+    return () => {}
+  }, [clickItem]);
+
   return (
     <>
       <Button
@@ -71,22 +99,7 @@ const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_
               renderItem={(emailItem) => (
                 <List.Item
                   className={`hover:bg-stone-50 cursor-pointer !py-1 ${selectedEmail.MAI_SN === emailItem.MAI_SN ? 'bg-blue-100 font-bold ' : ''}`}
-                  onClick={() => {
-                    const emailMsg = {
-                      conversationid: currentConversationID,
-                      order_opi: opi_sn,
-                      coli_sn: oid,
-                      id: emailItem.MAI_SN,
-                      MAI_SN: emailItem.MAI_SN,
-                      msgOrigin: {
-                        from: '',
-                        to: '',
-                        id: emailItem.MAI_SN,
-                        email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
-                      },
-                    }
-                    setSelectedEmail(emailMsg)
-                  }}>
+                  onClick={() => onClickEmailItem(emailItem)}>
                   <Flex vertical={false} wrap={false} className='w-full'>
                     <div className='flex-auto ml-auto min-w-40 line-clamp-2'>
                       {emailItem.Direction === '收' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}

src/views/Conversations/Online/order/CustomerProfile.jsx

@@ -32,7 +32,6 @@ const CustomerProfile = () => {
 	const currentConversationID = useConversationStore(useShallow(state => state.currentConversation?.sn || ""));
 	const channels = useConversationStore(state => state.currentConversation?.channels);
 	const [updateCurrentConversation] = useConversationStore(state => [state.updateCurrentConversation]);
-	const [emailMsg, setEmailMsg, detailPopupOpen, setDetailOpen, openDetail] = useConversationStore(state => [state.emailMsg, state.setEmailMsg, state.detailPopupOpen, state.setDetailOpen, state.openDetail]);
 	const loginUser = useAuthStore(state => state.loginUser);
 	const [
     orderDetail, customerDetail, lastQuotation, quotationList, fetchOrderDetail, setOrderPropValue, appendOrderComment, fetchOtherEmail, otherEmailList, fetchHistoryOrder
@@ -126,22 +125,7 @@ const CustomerProfile = () => {
 		setNewChatModalVisible(false);
 	};
 
-  const handle3rdEmailItemClick = useCallback((emailItem) => {
-    const emailMsg = {
-      conversationid: currentConversationID,
-      order_opi: orderDetail.opi_sn,
-      coli_sn: currentOrder,
-      id: emailItem.MAI_SN,
-      msgOrigin: {
-        from: '',
-        to: '',
-        id: emailItem.MAI_SN,
-        email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
-      },
-    }
-    setEmailMsg(emailMsg);
-    openDetail();
-  }, [])
+  const [clicked3rdEmailItem, setClicked3rdEmailItem] = useState({});
 
   const handleOrderSwitch = async (coli_sn) => {
     await postEditConversationItemColiAction({conversationid: currentConversationID, coli_sn });
@@ -312,7 +296,7 @@ const CustomerProfile = () => {
           <Divider orientation="left">
             <Typography.Text strong>供应商邮件</Typography.Text>
             <Badge count={otherEmailList.length} className='ml-2' color="oklch(62.3% 0.214 259.815)" />
-            <SupplierEmailDrawer list={otherEmailList} currentConversationID={currentConversationID} opi_sn={orderDetail.opi_sn} oid={currentOrder} />
+            <SupplierEmailDrawer list={otherEmailList} currentConversationID={currentConversationID} opi_sn={orderDetail.opi_sn} oid={currentOrder} emailItem={clicked3rdEmailItem} />
           </Divider>
           <List
             dataSource={otherEmailList}
@@ -326,9 +310,7 @@ const CustomerProfile = () => {
             renderItem={(email) => (
               <List.Item
                 className='hover:bg-stone-50 cursor-pointer [&.ant-list-item]:py-1 [&.ant-list-item]:px-2'
-                onClick={() => {
-                  handle3rdEmailItemClick(email)
-                }}>
+                onClick={() => setClicked3rdEmailItem(email) }>
                   <Flex
                     vertical className="grow"
                   >
@@ -381,7 +363,6 @@ const CustomerProfile = () => {
 					</Modal>
 				</Spin>
 				<ConversationsNewItem initialValues={newChatFormValues} open={newChatModalVisible} onCreate={handleNewChat} onCancel={() => setNewChatModalVisible(false)} />
-        <EmailDetail open={detailPopupOpen} setOpen={setDetailOpen} emailMsg={emailMsg} key={`supplier-email-detail-1-${emailMsg?.id}`} />
 
 			</div>
 		);