fix：在线聊天显示关联订单

src/components/OrderProfile.jsx

@@ -9,18 +9,18 @@ import {
   CalendarOutlined,
   EditOutlined,
   CheckOutlined,
-  ReloadOutlined,
 } from '@ant-design/icons'
 
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { App, Flex, Select, Tooltip, Divider, Typography, Skeleton, Checkbox, Drawer, Button, Form, Input } from 'antd'
+import { App, Flex, Select, Tooltip, Divider, Typography, Skeleton, Checkbox, Drawer, Button, Empty, Form, Input } from 'antd'
 import { useOrderStore, fetchSetRemindStateAction, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
 import { copy, isEmpty } from '@/utils/commons'
 import { useShallow } from 'zustand/react/shallow'
 import useConversationStore from '@/stores/ConversationStore'
 import useAuthStore from '@/stores/AuthStore'
 const OrderProfile = ({ coliSN, ...props }) => {
+
   const { notification, message } = App.useApp()
   const [formComment] = Form.useForm()
   const [formWhatsApp] = Form.useForm()
@@ -97,6 +97,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
     return orderDetail.DidPlan === 0 ? '未做计划' : '已做计划'
   }
 
+  const renderOrderDetail = () => {
     return (
       <>
       <Skeleton active loading={loading}>
@@ -226,12 +227,8 @@ const OrderProfile = ({ coliSN, ...props }) => {
         <Typography.Text>{orderDetail.customer_request}</Typography.Text>
         <Divider orientation='left'>
           <Typography.Text strong>外联备注</Typography.Text>
-          {/* <Tooltip title='修改'>
-            <EditOutlined className='pl-1' />
-          </Tooltip> */}
         </Divider>
         <Typography.Text>{orderDetail.wl_memo}</Typography.Text>
-
         <Divider orientation='left'>
           <Typography.Text strong>附加信息</Typography.Text>
           <Tooltip title='修改'>
@@ -353,4 +350,18 @@ const OrderProfile = ({ coliSN, ...props }) => {
     )
   }
 
+  const renderDefaultEmpty = () => {
+    return (
+      <Empty description={<span>没有订单关联</span>}>
+			</Empty>
+    )
+  }
+
+  if (orderId) {
+    return renderOrderDetail()
+  } else {
+    return props.renderEmpty ? props.renderEmpty() : renderDefaultEmpty()
+  }
+}
+
 export default OrderProfile

src/views/ChatWindow.jsx

@@ -1,30 +1,36 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react'
-import { Layout, Spin, Button } from 'antd';
+import { Layout, Empty, Button } from 'antd'
-import { RightCircleOutlined, RightOutlined, ReloadOutlined, MenuFoldOutlined, MenuUnfoldOutlined,  LeftOutlined } from '@ant-design/icons';
+import { RightOutlined, LeftOutlined } from '@ant-design/icons'
-// import { useParams, useNavigate } from 'react-router-dom';
+import MessagesHeader from './Conversations/Online/MessagesHeader'
-import MessagesHeader from './Conversations/Online/MessagesHeader';
+import MessagesWrapper from './Conversations/Online/MessagesWrapper'
-import MessagesWrapper from './Conversations/Online/MessagesWrapper';
+import ConversationsList from './Conversations/Online/ConversationsList'
-import ConversationsList from './Conversations/Online/ConversationsList';
 import OrderProfile from '@/components/OrderProfile'
-import ReplyWrapper from './Conversations/Online/ReplyWrapper';
+import useAuthStore from '@/stores/AuthStore'
-import useConversationStore from '@/stores/ConversationStore';
+import ReplyWrapper from './Conversations/Online/ReplyWrapper'
-import { useShallow } from 'zustand/react/shallow';
+import useConversationStore from '@/stores/ConversationStore'
+import { useShallow } from 'zustand/react/shallow'
 
-import './Conversations/Conversations.css';
+import ConversationBind from '@/views/Conversations/Online/ConversationBind'
-import EmailEditorPopup from './Conversations/Online/Input/EmailEditorPopup';
+import './Conversations/Conversations.css'
+import EmailEditorPopup from './Conversations/Online/Input/EmailEditorPopup'
 
-const { Sider, Content, Header, Footer } = Layout;
+const { Sider, Content, Header, Footer } = Layout
 
-/**
- *
- */
 const ChatWindow = () => {
+  const [collapsedRight, setCollapsedRight] = useState(true)
 
-  const [collapsedLeft, setCollapsedLeft] = useState(false);
+  const loginUser = useAuthStore((state) => state.loginUser)
-  const [collapsedRight, setCollapsedRight] = useState(true);
+  const currentOrder = useConversationStore(useShallow((state) => state.currentConversation?.coli_sn || ''))
+  const currentConversationID = useConversationStore(useShallow((state) => state.currentConversation?.sn || ''))
+  const [updateCurrentConversation] = useConversationStore((state) => [state.updateCurrentConversation])
 
-
+  const renderEmptyOrder = () => {
-    const currentOrder = useConversationStore(useShallow(state => state.currentConversation?.coli_sn || ""));
+    return (
+      <Empty description={<span>没有订单关联</span>}>
+        <ConversationBind currentConversationID={currentConversationID} userId={loginUser.userId} onBoundSuccess={(coli_sn) => updateCurrentConversation({ coli_sn })} />
+      </Empty>
+    )
+  }
 
   return (
     <>
@@ -54,7 +60,7 @@ const ChatWindow = () => {
               {/* <Button type='text' icon={<ReloadOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className='' title='最新消息记录' /> */}
               <Button type='text' icon={collapsedRight ? <RightOutlined /> : <LeftOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className=' rounded-none rounded-r' />
             </Header>
-            <Content className="flex-grow bg-whatsapp-bg relative" >
+            <Content className='flex-grow bg-whatsapp-bg relative'>
               <MessagesWrapper />
             </Content>
             <Footer className='ant-layout-sider-light p-0'>
@@ -75,12 +81,12 @@ const ChatWindow = () => {
           collapsedWidth={0}
           trigger={null}
           collapsed={collapsedRight}>
-          <OrderProfile coliSN={currentOrder} />
+          <OrderProfile coliSN={currentOrder} renderEmpty={renderEmptyOrder} />
         </Sider>
       </Layout>
       <EmailEditorPopup key='email-editor-online' />
     </>
-  );
+  )
-};
+}
 
-export default ChatWindow;
+export default ChatWindow