test: 邮件详情

src/actions/EmailActions.js

@@ -30,11 +30,13 @@ export const postSendEmail = async (body) => {
   return result;
 };
 
+/**
+ * 邮件详情
+ * @param {object} { mai_sn }
+ */
 export const getEmailDetailAction = async (param) => {
-  const { MailContent, MailInfo } = testData
-  return testData
-  // const { MailContent } = await fetchJSON(
-  //   `http://202.103.68.18:888/service-mail/getmail?mai_sn=5036841`
-  // );
-  // return MailContent;
+  const { result } = await fetchJSON(
+    `${EMAIL_HOST}/getmail?mai_sn=5036841`, // param
+  );
+  return { info: result.MailInfo?.[0] || {}, content: result.MailContent || '', attachments: result?.AttachList || [] };
 }

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

@@ -16,9 +16,10 @@ const TagColorStyle = (tag) => {
   }
 }
 
-const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
-  let { emailOrigin } = emailDetail
-  emailOrigin = emailOrigin || {}
+const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
+  // console.log('emailMsg', emailMsg);
+
+  let { conversationid, msg_id } = emailMsg
   // const [open, setOpen] = useState(false);
   const [initialPosition, setInitialPosition] = useState({})
   const [initialSize, setInitialSize] = useState({})
@@ -48,32 +49,31 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
 
   const [mobile] = useStyleStore((state) => [state.mobile])
 
-  const [mailData, setMailData] = useState({})
-  const [mailInfo, setMailInfo] = useState({})
+  const [mailData, setMailData] = useState({info: {}, content: {}, attachments: []})
   const getEmailDetail = async () => {
-    const data = await getEmailDetailAction()
-    const { MailContent, MailInfo } = data
+    const data = await getEmailDetailAction({ mai_sn: msg_id })
+    console.log('data', data);
+
     setMailData(data)
-    setMailInfo((JSON.parse(MailInfo))[0]);
   }
 
   useEffect(() => {
     getEmailDetail()
 
     return () => {}
-  }, [emailDetail])
+  }, [emailMsg])
 
   const ActionBtns = (props) => (
     <div className={`flex items-center w-full ${props.className || ''}`}>
       <Button
-        onClick={() => onOpenEditor(emailOrigin, 'reply')}
+        onClick={() => onOpenEditor(emailMsg, 'reply')}
         size='small'
         type='text'
         icon={<ReplyIcon className='text-indigo-500' />}>
         回复
       </Button>
       <Button
-        onClick={() => onOpenEditor(emailOrigin, 'forward')}
+        onClick={() => onOpenEditor(emailMsg, 'forward')}
         size='small'
         type='text'
         icon={<ShareForwardIcon className='text-primary' />}>
@@ -87,19 +87,14 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
       <DnDModal
         open={open}
         setOpen={setOpen}
-        title={emailOrigin.subject}
+        title={mailData.info?.subject}
         initial={{ top: 74 }}
         onMove={onHandleMove}
         onResize={onHandleResize}
         footer={mobile ? <ActionBtns className='w-full' /> : null}>
-        {/* email toolbar */}
+
         <div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
-          {/* <div className='flex items-center justify-start '>
-            <Button size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
-              回复
-            </Button>
-          </div> */}
-          <div className=' font-bold'>{emailOrigin.subject}</div>
+          <div className=' font-bold'>{mailData.info?.subject}</div>
 
           <div>
             <div
@@ -111,54 +106,62 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
                 <Avatar
                   className=''
                   // style={TagColorStyle(emailOrigin.fromEmail)}>
-                  style={TagColorStyle(mailInfo.MAI_From)}>
-                  {(mailInfo.MAI_From || '').substring(0, 1)}
+                  style={TagColorStyle(mailData.info?.MAI_From)}>
+                  {(mailData.info?.MAI_From || '').substring(0, 1)}
                 </Avatar>
                 <div className=' flex flex-col'>
                   <span className=' font-bold text-base'>
-                    {mailInfo.MAI_From}
+                    {mailData.info?.fromName}
                   </span>
                   <span className='text-neutral-500'>
-                    {mailInfo.MAI_To}
-                    </span>
+                    {mailData.info?.MAI_From}
+                  </span>
                 </div>
               </div>
               <div className='flex flex-col justify-start gap-1 items-end'>
                 <ActionBtns />
                 {/* <div>{emailDetail.dateText}</div> */}
-                <div className='text-xs '>{emailDetail.localDate}</div>
+                <div className='text-xs '>{emailMsg.localDate}</div>
               </div>
             </div>
             <div className='text-sm'>
               <span className='text-neutral-500 pr-2'>收件人:</span>
-              {mailInfo.MAI_To}
-              <span className='text-neutral-600'>
-                &nbsp;&nbsp;&lt;{mailInfo.MAI_To}&gt;
-              </span>
+              {mailData.info?.MAI_To}
+              {/* <span className='text-neutral-600'>
+                &nbsp;&nbsp;&lt;{mailData.info?.toEmail}&gt;
+              </span> */}
             </div>
-            {mailInfo.cc && (
+            {mailData.info?.cc && (
               <div className='text-sm'>
                 <span className='text-neutral-500 pr-2'>抄送:</span>
-                {mailInfo.cc}
+                {mailData.info.cc}
               </div>
             )}
-            {mailInfo.bcc && (
+            {mailData.info?.bcc && (
               <div className='text-sm'>
                 <span className='text-neutral-500 pr-2'>密送:</span>
-                {mailInfo.bcc}
+                {mailData.info.bcc}
               </div>
             )}
             {/* <div className='text-sm'>
               <span className='text-neutral-500 pr-2'>主题:</span>
               {emailOrigin.subject}
             </div> */}
+            {mailData.attachments.length > 0 && (
+              <div className='mt-2 *:ml-2'>
+                <span>共{mailData.attachments.length}个附件</span>
+                {mailData.attachments.map((atta) => (
+                  <a href={atta.url} key={atta.name} target='_blank' rel='noreferrer'>{atta.name}</a>
+                ))}
+              </div>
+            )}
             <Divider className='my-2' />
             {/* <div className='mt-2'>{emailOrigin.body}</div> */}
             <div
               className='mt-2'
               // mailData
-              dangerouslySetInnerHTML={{ __html: mailData.MailContent }}></div>
-            {/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
+              dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
+            {/* <div className='mt-2'>{mailData.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
           </div>
         </div>
       </DnDModal>
@@ -166,6 +169,7 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
         open={openEmailEditor}
         setOpen={setOpenEmailEditor}
         fromEmail={fromEmail}
+        conversationID={conversationid}
         quote={ReferEmailMsg}
         initial={{ ...initialPosition, ...initialSize }}
         action={action}

src/views/Conversations/Online/MessagesWrapper.jsx

@@ -192,9 +192,9 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
         }}
         onCancel={() => setNewChatModalVisible(false)}
       />
-      {/* <EmailEditor open={openEmailEditor} setOpen={setOpenEmailEditor} reference={ReferEmailMsg} setRefernce={setReferEmailMsg} {...{ fromEmail, }} key={'email-editor-reply'} /> */}
+      {/* <EmailEditor open ={openEmailEditor} setOpen={setOpenEmailEditor} reference={ReferEmailMsg} setRefernce={setReferEmailMsg} {...{ fromEmail, }} key={'email-editor-reply'} /> */}
       <EmailEditorPopup open={openEmailEditor} setOpen={setOpenEmailEditor} fromEmail={fromEmail} quote={ReferEmailMsg} key={`email-editor-reply-top-popup_${ReferEmailMsg.id}`} />
-      <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailDetail={emailDetail} key={`email-detail-${emailDetail.id}`} />
+      <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailMsg={emailDetail} key={`email-detail-${emailDetail.id}`} />
       </>
   );
 };