|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
|
import { App, Button, Divider, Avatar, List, Flex, Typography } from 'antd'
|
|
|
|
|
import { useState, useEffect, useRef } from 'react'
|
|
|
|
|
import { App, Button, Divider, Avatar, List, Flex, Typography, Tooltip } from 'antd'
|
|
|
|
|
import { LoadingOutlined, ApiOutlined, FilePdfOutlined, FileOutlined, FileWordOutlined, FileExcelOutlined, FileJpgOutlined, FileImageOutlined, FileTextOutlined, FileGifOutlined, GlobalOutlined, FileZipOutlined } from '@ant-design/icons'
|
|
|
|
|
import { EditIcon, ReplyAllIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons'
|
|
|
|
|
import { EditIcon, MailCheckIcon, ReplyAllIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons'
|
|
|
|
|
import { isEmpty, TagColorStyle } from '@/utils/commons'
|
|
|
|
|
import EmailEditorPopup from '../Input/EmailEditorPopup'
|
|
|
|
|
import DnDModal from '@/components/DnDModal'
|
|
|
|
|
@ -30,8 +30,19 @@ const extTypeMapped = {
|
|
|
|
|
/**
|
|
|
|
|
* @property {*} emailMsg - 邮件数据. { conversationid, actionId, order_opi, coli_sn, msgOrigin: { from, to, id, email: { subject, mai_sn, } } }
|
|
|
|
|
*/
|
|
|
|
|
const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props }) => {
|
|
|
|
|
const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, variant, size, ...props }) => {
|
|
|
|
|
// console.log('emailDetail', emailMsg);
|
|
|
|
|
const componentRef = useRef(null);
|
|
|
|
|
const [compactBtn, setCompactBtn] = useState(size==='small');
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (componentRef.current) {
|
|
|
|
|
// console.log(componentRef.current.getBoundingClientRect().width);
|
|
|
|
|
setCompactBtn(componentRef.current.offsetWidth < 769);
|
|
|
|
|
}
|
|
|
|
|
return () => {}
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { notification, message } = App.useApp()
|
|
|
|
|
|
|
|
|
|
@ -50,7 +61,7 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props }
|
|
|
|
|
}, [mailID])
|
|
|
|
|
|
|
|
|
|
const onOpenEditor = (msgOrigin, action='reply') => {
|
|
|
|
|
window.open(`/email/${action}/${msgOrigin.email.mai_sn || 0}`, `${action}-${msgOrigin.email.mai_sn || 0}`,POPUP_FEATURES)
|
|
|
|
|
window.open(`/email/${action}/${mailID || 0}`, `${action}-${mailID || 0}`,POPUP_FEATURES)
|
|
|
|
|
console.log('first000', emailMsg)
|
|
|
|
|
console.log('first', msgOrigin)
|
|
|
|
|
if (typeof props.onOpenEditor === 'function') {
|
|
|
|
|
@ -106,10 +117,11 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props }
|
|
|
|
|
|
|
|
|
|
let btns = []
|
|
|
|
|
|
|
|
|
|
btns.push(<Button type='text' onClick={() => { alert('todo')}} icon={<MailCheckIcon className={'text-yellow-600'} />} size='small'>已处理</Button>)
|
|
|
|
|
// 没有关联订单的邮件`绑定订单`
|
|
|
|
|
if (showBindBtn) {
|
|
|
|
|
btns.push(<EmailBindFormModal key={'bind'} onBoundSuccess={() => setShowBindBtn(false)} {...{ conversationid, mai_sn, showBindBtn }} />)
|
|
|
|
|
btns.push(<Divider key='divider1' type='vertical' />)
|
|
|
|
|
btns.push(<Divider key='divider1' type='vertical' className='mx-0' />)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
switch (status) {
|
|
|
|
|
@ -118,51 +130,62 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props }
|
|
|
|
|
case 'sent':
|
|
|
|
|
case '': // 接收的邮件没有发送状态
|
|
|
|
|
btns.push(
|
|
|
|
|
<Tooltip key='reply-t' title='回复'>
|
|
|
|
|
<Button key={'reply'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
|
|
|
|
|
回复
|
|
|
|
|
</Button>,
|
|
|
|
|
{compactBtn ? '' : '回复'}
|
|
|
|
|
</Button>
|
|
|
|
|
</Tooltip>,
|
|
|
|
|
)
|
|
|
|
|
btns.push(
|
|
|
|
|
<Button key={'replyall'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'replyall')} size='small' type='text' icon={<ReplyAllIcon className='text-indigo-500' />}>
|
|
|
|
|
回复全部
|
|
|
|
|
</Button>,
|
|
|
|
|
<Tooltip key='replyall-t' title='回复全部'>
|
|
|
|
|
<Button key={'replyall'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'replyall')} size='small' type='text' icon={<ReplyAllIcon className='text-indigo-500' />} >{compactBtn ? '' : '回复全部'}</Button>
|
|
|
|
|
</Tooltip>,
|
|
|
|
|
)
|
|
|
|
|
btns.push(
|
|
|
|
|
<Button key={'forward'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
|
|
|
|
|
转发
|
|
|
|
|
</Button>,
|
|
|
|
|
<Tooltip key='forward-t' title='转发'>
|
|
|
|
|
<Button key={'forward'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>{compactBtn ? '' : '转发'}</Button></Tooltip>,
|
|
|
|
|
)
|
|
|
|
|
break
|
|
|
|
|
case 'failed':
|
|
|
|
|
btns.push(
|
|
|
|
|
<Button key={'resend'} onClick={() => handleResend()} size='small' type='text' icon={<ResendIcon className='text-orange-500' />}>
|
|
|
|
|
重发
|
|
|
|
|
</Button>,
|
|
|
|
|
<Tooltip key='resend-t' title='重发'>
|
|
|
|
|
<Button key={'resend'} onClick={() => handleResend()} size='small' type='text' icon={<ResendIcon className='text-orange-500' />}>{compactBtn ? '' : '重发'}</Button></Tooltip>,
|
|
|
|
|
)
|
|
|
|
|
btns.push(
|
|
|
|
|
<Tooltip key='edit-t' title='编辑'>
|
|
|
|
|
<Button
|
|
|
|
|
key={'edit'}
|
|
|
|
|
onClick={() => onOpenEditor({ ...(emailMsg.msgOrigin || {}), content: mailData.content }, 'edit')}
|
|
|
|
|
size='small'
|
|
|
|
|
type='text'
|
|
|
|
|
icon={<EditIcon className='text-indigo-500' />}>
|
|
|
|
|
编辑
|
|
|
|
|
</Button>,
|
|
|
|
|
icon={<EditIcon className='text-indigo-500' />}>{compactBtn ? '' : '编辑'}</Button></Tooltip>,
|
|
|
|
|
)
|
|
|
|
|
break
|
|
|
|
|
default:
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return <div className={`flex justify-end items-center gap-1 w-full ${className || ''}`}>{btns}</div>
|
|
|
|
|
return <div className={`flex justify-end items-center gap-1 ${className || ''}`}>{btns}</div>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const variantCls = (variant) => {
|
|
|
|
|
switch (variant) {
|
|
|
|
|
case 'outline':
|
|
|
|
|
return 'border-y-0 border-x border-solid border-neutral-200'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className='email-container h-full flex flex-col gap-0 divide-y divide-neutral-200 divide-solid *:p-2 *:border-0'>
|
|
|
|
|
<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=''>
|
|
|
|
|
{loading ? <LoadingOutlined className='mr-1' /> : null}
|
|
|
|
|
<span className=' font-bold '>{mailData.info?.MAI_Subject || emailMsg?.msgOrigin?.subject}</span>
|
|
|
|
|
<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 className={'ml-auto'}/>
|
|
|
|
|
</div>
|
|
|
|
|
<Divider className='my-2' />
|
|
|
|
|
<div className={['flex flex-wrap justify-end', window.innerWidth < 600 ? 'flex-col' : 'flex-row '].join(' ')}>
|
|
|
|
|
<div className=' flex-auto basis-0 flex flex-wrap gap-2 mb-2 items-center'>
|
|
|
|
|
@ -175,12 +198,12 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props }
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className=' ml-auto flex flex-col justify-start gap-1 items-end'>
|
|
|
|
|
<ActionBtns />
|
|
|
|
|
{/* <ActionBtns /> */}
|
|
|
|
|
<div className='text-xs '>{mailData.info?.MAI_SendDate || emailMsg.localDate}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='text-sm'>
|
|
|
|
|
<span className='text-neutral-500 pr-2 w-12 inline-block text-justify' style={{ textAlignLast: 'justify' }}>
|
|
|
|
|
<span className='text-neutral-500 pr-2 w-14 inline-block text-justify' style={{ textAlignLast: 'justify' }}>
|
|
|
|
|
收件人
|
|
|
|
|
</span>
|
|
|
|
|
{mailData.info?.MAI_To}
|
|
|
|
|
@ -203,14 +226,14 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props }
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className='overflow-auto'>
|
|
|
|
|
<Flex className=' divide-y-0 divide-x divide-gray-200 divide-solid gap-0'>
|
|
|
|
|
<Flex className={` divide-gray-200 divide-solid gap-0 ${compactBtn === false ? 'divide-y-0 divide-x' : 'flex-col-reverse divide-x-0 '}`}>
|
|
|
|
|
{mailData.info?.mailType === 'text/html' ? (
|
|
|
|
|
<EmailContent content={mailData.content} id={mailID} key={mailID} />
|
|
|
|
|
) : (
|
|
|
|
|
<div className='mt-2 whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
|
|
|
|
|
)}
|
|
|
|
|
{mailData.attachments.length > 0 && (
|
|
|
|
|
<div className='w-48 overflow-hidden'>
|
|
|
|
|
<div className={`${compactBtn === false ? 'w-48' : 'border-b border-t-0'} overflow-hidden`}>
|
|
|
|
|
<span> 附件 ({mailData.attachments.length})</span>
|
|
|
|
|
<List
|
|
|
|
|
dataSource={mailData.attachments || []}
|
|
|
|
|
|
Lei OT
1 month ago
