feat(前端): 放大供应商邮件区域, +搜索, 上下分栏

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

@@ -13,7 +13,7 @@ import EmailBindFormModal from './EmailBind';
 /**
  * @property {*} emailMsg - 邮件数据. { conversationid, actionId, order_opi, coli_sn, msgOrigin: { from, to, id, email: { subject, mai_sn, } } }
  */
-const EmailDetailInline = ({ mailID, open, setOpen, emailMsg={}, disabled=false, ...props }) => {
+const EmailDetailInline = ({ mailID, open, setOpen = () => {}, emailMsg={}, disabled=false, ...props }) => {
 
   // console.log('emailDetail', emailMsg);
 
@@ -27,12 +27,18 @@ const EmailDetailInline = ({ mailID, open, setOpen, emailMsg={}, disabled=false,
 
   const [openEmailEditor, setOpenEmailEditor] = useState(false)
   const [fromEmail, setFromEmail] = useState('')
+  useEffect(() => {
+    setOpenEmailEditor(false)
+
+    return () => {}
+  }, [mailID])
+
   const onOpenEditor = (msgOrigin, action) => {
     const { from, to } = msgOrigin
     setOpenEmailEditor(true)
     setFromEmail(action === 'edit' ? from : to)
     setAction(action)
-    setOpen(false)
+    // setOpen(false)
   }
 
   const { loading, mailData, orderDetail, postEmailResend } = useEmailDetail(mailID)
@@ -48,7 +54,7 @@ const EmailDetailInline = ({ mailID, open, setOpen, emailMsg={}, disabled=false,
     }
     try {
       await postEmailResend({ mai_sn, conversationid, actionId })
-      setOpen(false)
+      // setOpen(false)
     } catch (err) {
       notification.error({
         message: "请求失败",
@@ -169,8 +175,7 @@ const EmailDetailInline = ({ mailID, open, setOpen, emailMsg={}, disabled=false,
             <div className='mt-2 whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
           </div>
         </div>
-        {/* todo: */}
-      {/* <EmailEditorPopup
+      <EmailEditorPopup
         open={openEmailEditor}
         setOpen={setOpenEmailEditor}
         fromEmail={fromEmail}
@@ -181,11 +186,11 @@ const EmailDetailInline = ({ mailID, open, setOpen, emailMsg={}, disabled=false,
         customerDetail={orderDetail.customerDetail}
         // emailMsg={ReferEmailMsg}
         quoteid={mailID}
-        initial={{ ...initialPosition, ...initialSize }}
-        mailData={mailData}
+        // initial={{ ...initialPosition, ...initialSize }}
+        mailData={void 0}
         action={action}
-        key={`email-detail-inner-${action}-popup_${mailID}`}
-      /> */}
+        key={`email-detail-inner-${action}-inline_${mailID}`}
+      />
     </>
   )
 }

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

@@ -5,13 +5,15 @@ import { InboxIcon, SendPlaneFillIcon, ExpandIcon } from '@/components/Icons'
 import EmailDetailInline from '../Components/EmailDetailInline'
 import { debounce, isEmpty } from '@/utils/commons'
 
-const SupplierEmailDrawer = ({ list: otherEmailList, ...props }) => {
+const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_sn, oid, ...props }) => {
   const [open, setOpen] = useState(false)
   const [selectedEmail, setSelectedEmail] = useState({})
   const searchInputRef = useRef(null)
   const [dataSource, setDataSource] = useState([])
   useEffect(() => {
+    setOpen(false);
     setDataSource(otherEmailList)
+    // setSelectedEmail({ MAI_SN: -1000 });
 
     return () => {}
   }, [otherEmailList])
@@ -67,30 +69,43 @@ const SupplierEmailDrawer = ({ list: otherEmailList, ...props }) => {
             showSizeChanger: false,
             size: 'small',
           }}
-          renderItem={(email) => (
+          renderItem={(emailItem) => (
             <List.Item
-              className={`hover:bg-stone-50 cursor-pointer !py-1 ${selectedEmail.MAI_SN === email.MAI_SN ? 'bg-blue-100 font-bold ' : ''}`}
+              className={`hover:bg-stone-50 cursor-pointer !py-1 ${selectedEmail.MAI_SN === emailItem.MAI_SN ? 'bg-blue-100 font-bold ' : ''}`}
               onClick={() => {
-                setSelectedEmail(email)
+                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)
               }}>
               <Flex vertical={false} wrap={false} className='w-full'>
                 <div className='flex-auto ml-auto min-w-40 line-clamp-1'>
-                  {email.Direction === '收' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
-                  {/* <Tooltip title={email.MAI_Subject}> */}
-                  <Typography.Text >{email.MAI_Subject}</Typography.Text>
+                  {emailItem.Direction === '收' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
+                  {/* <Tooltip title={emailItem.MAI_Subject}> */}
+                  <Typography.Text >{emailItem.MAI_Subject}</Typography.Text>
                   {/* </Tooltip> */}
                 </div>
-                <div className='max-w-40'>
-                  <Typography.Text ellipsis={{ tooltip: email.SenderReceiver }}>{email.SenderReceiver}</Typography.Text>
+                <div className='ml-1 max-w-40'>
+                  <Typography.Text ellipsis={{ tooltip: emailItem.SenderReceiver }}>{emailItem.SenderReceiver}</Typography.Text>
                 </div>
-                <div className='max-w-20'>
-                  <Typography.Text ellipsis={{ tooltip: email.MAI_SendDate }}>{dayjs(email.MAI_SendDate).format('MM-DD HH:mm')}</Typography.Text>
+                <div className='ml-1 max-w-20'>
+                  <Typography.Text ellipsis={{ tooltip: emailItem.MAI_SendDate }}>{dayjs(emailItem.MAI_SendDate).format('MM-DD HH:mm')}</Typography.Text>
                 </div>
               </Flex>
             </List.Item>
           )}
         />
-        <EmailDetailInline {...{ mailID: selectedEmail.MAI_SN }} />
+        <EmailDetailInline {...{ mailID: selectedEmail.MAI_SN, emailMsg: selectedEmail }} />
       </Drawer>
     </>
   )

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

@@ -285,7 +285,7 @@ const CustomerProfile = () => {
 					<Flex vertical={true} className="p-2 ">
 						<Conditional
 							condition={quotationList.length > 0}
-							whenFalse={<Empty description={<span>暂无报价</span>}></Empty>}
+							whenFalse={<Empty imageStyle={{ height: 30 }} escription={<span>暂无报价</span>}></Empty>}
 							whenTrue={
 								<>
 									<p className="m-0 py-2 line-clamp-2 ">
@@ -304,7 +304,7 @@ const CustomerProfile = () => {
 
           <Divider orientation="left">
             <Typography.Text strong>供应商邮件</Typography.Text>
-            <SupplierEmailDrawer list={otherEmailList} />
+            <SupplierEmailDrawer list={otherEmailList} currentConversationID={currentConversationID} opi_sn={orderDetail.opi_sn} oid={currentOrder} />
           </Divider>
           <List
             dataSource={otherEmailList}