feat: 邮件: 打开详情: 设为`已读`

src/components/Icons.jsx

@@ -13,6 +13,7 @@ import SendPlaneLineSVG from '@/assets/icons/send-plane-line.svg?react';
 import ResendLineSVG from '@/assets/icons/reset-left-line.svg?react';
 import EditLineSVG from '@/assets/icons/quill-pen-line.svg?react';
 import MailDownloadLineSVG from '@/assets/icons/mail-download-line.svg?react';
+import MailOpenLineSVG from '@/assets/icons/mail-open-line.svg?react';
 import MailAddLineSVG from '@/assets/icons/mail-add-line.svg?react';
 import MailCheckSVG from '@/assets/icons/mail-check-line.svg?react';
 import MailUnreadSVG from '@/assets/icons/mail-unread-line.svg?react';
@@ -32,6 +33,7 @@ export const SendPlaneLineIcon = (props) => <Icon component={SendPlaneLineSVG} {
 export const ResendIcon = (props) => <Icon component={ResendLineSVG} {...props} />;
 export const EditIcon = (props) => <Icon component={EditLineSVG} {...props} />;
 export const MailDownloadIcon = (props) => <Icon component={MailDownloadLineSVG} {...props} />;
+export const MailOpenIcon = (props) => <Icon component={MailOpenLineSVG} {...props} />;
 export const MailAddloadIcon = (props) => <Icon component={MailAddLineSVG} {...props} />;
 export const MailCheckIcon = (props) => <Icon component={MailCheckSVG} {...props} />;
 export const MailUnreadIcon = (props) => <Icon component={MailUnreadSVG} {...props} />;

src/hooks/useEmail.js

@@ -75,6 +75,12 @@ export const useEmailDetail = (mai_sn=0, data={}, oid=0) => {
       setMailData(data)
       setColiSN(oid === false ? 0 : data.info.MAI_COLI_SN)
       setLoading(false)
+      // `已读`
+      updateEmailAction({
+        opi_sn: data.info.MAI_OPI_SN,
+        mai_sn_list: [Number(mai_sn) || maiSN],
+        set: { read: 1 },
+      })
     } catch (err) {
       setLoading(false)
       notification.error({

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

@@ -6,7 +6,7 @@ import { isEmpty, TagColorStyle } from '@/utils/commons'
 import EmailEditorPopup from '../Input/EmailEditorPopup'
 import DnDModal from '@/components/DnDModal'
 import useStyleStore from '@/stores/StyleStore'
-import { openPopup, useEmailDetail, useEmailList, } from '@/hooks/useEmail'
+import { openPopup, useEmailDetail, } from '@/hooks/useEmail'
 import { EMAIL_ATTA_HOST, POPUP_FEATURES } from '@/config'
 import EmailBindFormModal from './EmailBind'
 import EmailContent from './EmailContent'
@@ -202,16 +202,16 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, variant, s
     }
   }
 
-  return mailID ?(
+  return mailID ? (
     <>
-      <div ref={componentRef} className={`email-container h-full flex flex-col gap-0 divide-y divide-neutral-200 divide-solid *:p-2 *:border-0 bg-white ${variantCls(variant)}`} >
+      <div ref={componentRef} className={`email-container h-full flex flex-col gap-0 divide-y divide-neutral-200 divide-solid *:p-2 *:border-0 bg-white ${variantCls(variant)}`}>
         <div className=''>
           <div className='flex flex-wrap justify-between'>
-          <span className=' font-bold '>
-            {loading ? <LoadingOutlined className='mr-1' /> : null}
-            {mailData.info?.MAI_Subject || emailMsg?.msgOrigin?.subject}
-          </span>
-          <ActionBtns key='actions' className={'ml-auto'}/>
+            <span className={(mailData.info?.MAI_ReadState || 0) > 0 ? '' : ' font-bold '}>
+              {loading ? <LoadingOutlined className='mr-1' /> : null}
+              {mailData.info?.MAI_Subject || emailMsg?.msgOrigin?.subject}
+            </span>
+            <ActionBtns key='actions' className={'ml-auto'} />
           </div>
           <Divider className='my-2' />
           <div className={['flex flex-wrap justify-end', window.innerWidth < 800 ? 'flex-col' : 'flex-row '].join(' ')}>
@@ -260,26 +260,29 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, variant, s
               <div className='mt-2 whitespace-pre-wrap flex-auto' dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
             )}
             {mailData.AttachList.length > 0 && (
-            <div className={`${compactBtn === false ? 'w-48' : 'border-b border-t-0'} overflow-hidden`}>
-            {mailData.attachments.length > 0 && (<>
-              <span>&nbsp;附件 ({mailData.attachments.length})</span>
-              <List
-                dataSource={mailData.attachments || []}
-                size='small' className='[&_.ant-list-item]:p-1 [&_.ant-list-item]:justify-start'
-                renderItem={(atta) => (
-                  <List.Item>
-                    <FileTypeIcon fileName={atta.ATI_Name} />
-                    <Typography.Text ellipsis={{ tooltip: { title: atta.ATI_Name, placement: 'left' } }} className='text-inherit'>
-                      <span key={atta.ATI_SN} onClick={() => openPopup(`${EMAIL_ATTA_HOST}${atta.ATI_ServerFile}`, atta.ATI_SN)} size='small' className='text-blue-500 cursor-pointer'>
-                        {atta.ATI_Name}
-                      </span>
-                    </Typography.Text>
-                  </List.Item>
+              <div className={`${compactBtn === false ? 'w-48' : 'border-b border-t-0'} overflow-hidden`}>
+                {mailData.attachments.length > 0 && (
+                  <>
+                    <span>&nbsp;附件 ({mailData.attachments.length})</span>
+                    <List
+                      dataSource={mailData.attachments || []}
+                      size='small'
+                      className='[&_.ant-list-item]:p-1 [&_.ant-list-item]:justify-start'
+                      renderItem={(atta) => (
+                        <List.Item>
+                          <FileTypeIcon fileName={atta.ATI_Name} />
+                          <Typography.Text ellipsis={{ tooltip: { title: atta.ATI_Name, placement: 'left' } }} className='text-inherit'>
+                            <span key={atta.ATI_SN} onClick={() => openPopup(`${EMAIL_ATTA_HOST}${atta.ATI_ServerFile}`, atta.ATI_SN)} size='small' className='text-blue-500 cursor-pointer'>
+                              {atta.ATI_Name}
+                            </span>
+                          </Typography.Text>
+                        </List.Item>
+                      )}
+                    />
+                  </>
                 )}
-              /></>
-            )}
-              {mailData.insideAttachments.length > 0 && <span className='text-gray-500 italic'>&nbsp;文内附件 ({mailData.insideAttachments.length}) 已在正文显示</span>}
-            </div>
+                {mailData.insideAttachments.length > 0 && <span className='text-gray-500 italic'>&nbsp;文内附件 ({mailData.insideAttachments.length}) 已在正文显示</span>}
+              </div>
             )}
           </Flex>
         </div>

src/views/orders/components/MailBox.jsx

@@ -5,7 +5,7 @@ import dayjs from 'dayjs'
 import { useEmailList } from '@/hooks/useEmail'
 import { isEmpty } from '@/utils/commons'
 import { MailboxDirIcon } from './MailboxDirIcon'
-import { AttachmentIcon, MailCheckIcon } from '@/components/Icons'
+import { AttachmentIcon, MailCheckIcon, MailOpenIcon, MailUnreadIcon } from '@/components/Icons'
 import NewEmailButton from './NewEmailButton'
 
 const { RangePicker } = DatePicker
@@ -162,7 +162,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
             ></Checkbox>
           </Tooltip>
           <Tooltip title='标记已读'>
-            <Button shape='circle' type='text' size='small' icon={<ReadOutlined />}
+            <Button shape='circle' type='text' size='small' icon={<MailOpenIcon />}
             onClick={() => {
               console.info('markAsRead: ', selectedItems.map((item) => item.MAI_SN))
               markAsRead(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))

src/views/orders/components/NewEmailButton.jsx

@@ -1,24 +1,24 @@
 import { useMemo } from 'react'
 import { App, Dropdown } from 'antd'
 import useConversationStore from '@/stores/ConversationStore'
-import { emailTemplates, openPopup } from '@/hooks/useEmail';
-import { isEmpty } from '@/utils/commons';
+import { emailTemplates, openPopup } from '@/hooks/useEmail'
+import { isEmpty } from '@/utils/commons'
 
 const NewEmailButton = ({ ...props }) => {
-  const { notification } = App.useApp();
-  const [mailboxActiveNode, setMailboxActiveNode] = useConversationStore((state) => [state.mailboxActiveNode, state.setMailboxActiveNode])
+  const { notification } = App.useApp()
+  const [mailboxActiveNode] = useConversationStore((state) => [state.mailboxActiveNode])
+  const [mailboxActiveCOLI] = useConversationStore((state) => [state.mailboxActiveCOLI])
 
-  const COLI_SN = useMemo(() => mailboxActiveNode?.COLI_SN || 0, [mailboxActiveNode.COLI_SN])
+  const COLI_SN = useMemo(() => mailboxActiveCOLI || mailboxActiveNode?.COLI_SN || 0, [mailboxActiveNode.COLI_SN, mailboxActiveCOLI])
   const handleTemplateDropdown = ({ key, domEvent }) => {
     if (isEmpty(COLI_SN)) {
-      notification.warning({ message: '请选择到订单目录', placement: 'top' })
+      notification.warning({ message: '无法绑定订单', description: '请先选择到订单目录或订单邮件', placement: 'top' })
       return false
     }
     openPopup(`/email/new/0/${COLI_SN}/${key}`, `new-0-${COLI_SN}-${key}`)
-  };
+  }
 
   const handleNewEmail = () => {
-    console.info('新邮件')
     openPopup(`/email/new/0/${COLI_SN}`, `new-0-${COLI_SN}`)
   }