|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import { useEffect, useState, useRef, useCallback } from 'react'
|
|
|
|
|
import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
|
|
|
|
|
import { useParams, useNavigate, useLocation } from 'react-router-dom';
|
|
|
|
|
import { App, ConfigProvider, Button, Form, Input, Flex, Checkbox, Popconfirm, Select, Space, Upload, Divider, Modal, Tabs, Radio } from 'antd'
|
|
|
|
|
import { App, ConfigProvider, Button, Form, Input, Flex, Checkbox, Popconfirm, Select, Space, Upload, Divider, Modal, Tabs, Radio, Typography } from 'antd'
|
|
|
|
|
import { UploadOutlined, LoadingOutlined, SaveOutlined, SendOutlined, CheckCircleOutlined } from '@ant-design/icons'
|
|
|
|
|
import '@dckj/react-better-modal/dist/index.css'
|
|
|
|
|
import useStyleStore from '@/stores/StyleStore'
|
|
|
|
|
@ -10,11 +10,11 @@ import useAuthStore from '@/stores/AuthStore'
|
|
|
|
|
import LexicalEditor from '@/components/LexicalEditor'
|
|
|
|
|
|
|
|
|
|
import { v4 as uuid } from 'uuid'
|
|
|
|
|
import { cloneDeep, debounce, isEmpty, writeIndexDB, readIndexDB, deleteIndexDBbyKey } from '@/utils/commons'
|
|
|
|
|
import { cloneDeep, debounce, isEmpty, writeIndexDB, readIndexDB, deleteIndexDBbyKey, olog } from '@/utils/commons'
|
|
|
|
|
import '@/views/Conversations/Online/Input/EmailEditor.css'
|
|
|
|
|
import { parseHTMLString, postSendEmail, saveEmailDraftOrSendAction } from '@/actions/EmailActions'
|
|
|
|
|
import { sentMsgTypeMapped } from '@/channel/bubbleMsgUtils'
|
|
|
|
|
import { EmailBuilder, useEmailDetail, useEmailSignature } from '@/hooks/useEmail'
|
|
|
|
|
import { EmailBuilder, useEmailDetail, useEmailSignature, useEmailTemplate } from '@/hooks/useEmail'
|
|
|
|
|
import useSnippetStore from '@/stores/SnippetStore'
|
|
|
|
|
// import { useOrderStore } from '@/stores/OrderStore'
|
|
|
|
|
import PaymentlinkBtn from '@/views/Conversations/Online/Input/PaymentlinkBtn'
|
|
|
|
|
@ -70,39 +70,31 @@ const generateQuoteContent = (mailData, isRichText = true) => {
|
|
|
|
|
const generateMailContent = (mailData) => `<br><p>${mailData.content}</p><br>`
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 独立窗口编辑器
|
|
|
|
|
*
|
|
|
|
|
* - 从销售平台进入: 自动复制 storage, 可读取loginUser
|
|
|
|
|
*
|
|
|
|
|
* ! 无状态管理
|
|
|
|
|
*/
|
|
|
|
|
const NewEmail = () => {
|
|
|
|
|
const pageParam = useParams();
|
|
|
|
|
const editorKey = pageParam.action==='new' ? `new-${Date.now().toString(32)}` : `${pageParam.action}-${pageParam.quoteid}`
|
|
|
|
|
const { templateKey } = pageParam
|
|
|
|
|
const editorKey = pageParam.action==='new' ? `new-0-${pageParam.oid}` : `${pageParam.action}-${pageParam.quoteid}`
|
|
|
|
|
|
|
|
|
|
const { notification, message } = App.useApp()
|
|
|
|
|
const [form] = Form.useForm()
|
|
|
|
|
const [mobile] = useStyleStore((state) => [state.mobile])
|
|
|
|
|
const [userId, username, emailList] = useAuthStore((state) => [state.loginUser.userId, state.loginUser.username, state.loginUser.emailList])
|
|
|
|
|
const emailListOption = emailList?.map((ele) => ({ ...ele, label: ele.email, key: ele.email, value: ele.email })) || []
|
|
|
|
|
// const emailListMapped = emailListOption?.reduce((r, v) => ({ ...r, [v.opi_sn]: v }), {});
|
|
|
|
|
const emailListAddrMapped = emailListOption?.reduce((r, v) => ({ ...r, [v.email]: v }), {})
|
|
|
|
|
const emailListMatMapped = emailListOption?.reduce((r, v) => ({ ...r, [v.mat_sn]: v }), {})
|
|
|
|
|
const emailListOption = useMemo(() => emailList?.map((ele) => ({ ...ele, label: ele.email, key: ele.email, value: ele.email })) || [], [emailList])
|
|
|
|
|
const emailListOPIMapped = useMemo(() => emailListOption?.reduce((r, v) => ({ ...r, [v.opi_sn]: v }), {}), [emailListOption]);
|
|
|
|
|
const emailListAddrMapped = useMemo(() => emailListOption?.reduce((r, v) => ({ ...r, [v.email]: v }), {}), [emailListOption])
|
|
|
|
|
const emailListMatMapped = useMemo(() => emailListOption?.reduce((r, v) => ({ ...r, [v.mat_sn]: v }), {}), [emailListOption])
|
|
|
|
|
// console.log('emailListMapped', emailListOption, emailListAddrMapped);
|
|
|
|
|
|
|
|
|
|
// const emailEdiorProps = useConversationStore((state) => state.emailEdiorProps)
|
|
|
|
|
// const [open, setOpen, closeEditor1, currentEditKey, setCurrentEditKey] = useConversationStore((state) => [
|
|
|
|
|
// state.editorOpen,
|
|
|
|
|
// state.setEditorOpen,
|
|
|
|
|
// state.closeEditor1,
|
|
|
|
|
// state.currentEditKey,
|
|
|
|
|
// state.setCurrentEditKey,
|
|
|
|
|
// ])
|
|
|
|
|
|
|
|
|
|
// const propsKeysArr = Array.from(emailEdiorProps.keys())
|
|
|
|
|
// const propsArr = Array.from(emailEdiorProps.values())
|
|
|
|
|
|
|
|
|
|
// const [activeEdit, setActiveEdit] = useState(emailEdiorProps.get(editorKey) || {})
|
|
|
|
|
// const { fromEmail, fromUser, fromOrder, oid, toEmail, conversationid, quoteid, initial = {}, mailData: _mailData, action = 'reply', draft = {}, receiverName, ...props } = emailEdiorProps.get(currentEditKey) || {};
|
|
|
|
|
|
|
|
|
|
const mai_sn = pageParam.quoteid // activeEdit.quoteid
|
|
|
|
|
const { loading: getLoading, mailData, orderDetail } = useEmailDetail(mai_sn)
|
|
|
|
|
const { loading: quoteLoading, mailData, orderDetail } = useEmailDetail(mai_sn, null, pageParam.oid)
|
|
|
|
|
const { loading: loadingTamplate, templateContent } = useEmailTemplate(templateKey, {coli_sn: pageParam.oid, opi_sn: orderDetail.opi_sn || mailData.info?.MAI_OPI_SN || 0, lgc: 1});
|
|
|
|
|
const { signature } = useEmailSignature(orderDetail.opi_sn || mailData.info?.MAI_OPI_SN || 0)
|
|
|
|
|
|
|
|
|
|
const [newFromEmail, setNewFromEmail] = useState('')
|
|
|
|
|
const [newToEmail, setNewToEmail] = useState('')
|
|
|
|
|
@ -121,35 +113,198 @@ const NewEmail = () => {
|
|
|
|
|
const [contentPrefix, setContentPrefix] = useState('')
|
|
|
|
|
const [localDraft, setLocalDraft] = useState();
|
|
|
|
|
|
|
|
|
|
const readMailboxLocalCache = async () => {
|
|
|
|
|
const readCache = await readIndexDB(editorKey, 'draft', 'mailbox')
|
|
|
|
|
if (readCache) {
|
|
|
|
|
const btn = (
|
|
|
|
|
<Space>
|
|
|
|
|
<Button type='link' size='small' onClick={() => notification.destroy()}>
|
|
|
|
|
关闭
|
|
|
|
|
</Button>
|
|
|
|
|
{/* <Button type="primary" size="small" onClick={() => notification.destroy()}>
|
|
|
|
|
Confirm
|
|
|
|
|
</Button> */}
|
|
|
|
|
</Space>
|
|
|
|
|
)
|
|
|
|
|
// notification.open({
|
|
|
|
|
// key: editorKey,
|
|
|
|
|
// placement: 'top',
|
|
|
|
|
// // message: '提示',
|
|
|
|
|
// description: '已从本地缓存中读取邮件内容',
|
|
|
|
|
// duration: 0,
|
|
|
|
|
// actions: btn,
|
|
|
|
|
// })
|
|
|
|
|
setLocalDraft(readCache);
|
|
|
|
|
// const readMailboxLocalCache = async () => {
|
|
|
|
|
// console.log('===============', 'readMailboxLocalCache')
|
|
|
|
|
// const readCache = await readIndexDB(editorKey, 'draft', 'mailbox')
|
|
|
|
|
// if (readCache) {
|
|
|
|
|
// const btn = (
|
|
|
|
|
// <Space>
|
|
|
|
|
// <Button type='link' size='small' onClick={() => notification.destroy()}>
|
|
|
|
|
// 关闭
|
|
|
|
|
// </Button>
|
|
|
|
|
// {/* <Button type="primary" size="small" onClick={() => notification.destroy()}>
|
|
|
|
|
// Confirm
|
|
|
|
|
// </Button> */}
|
|
|
|
|
// </Space>
|
|
|
|
|
// )
|
|
|
|
|
// // notification.open({
|
|
|
|
|
// // key: editorKey,
|
|
|
|
|
// // placement: 'top',
|
|
|
|
|
// // // message: '提示',
|
|
|
|
|
// // description: '已从本地缓存中读取邮件内容',
|
|
|
|
|
// // duration: 0,
|
|
|
|
|
// // actions: btn,
|
|
|
|
|
// // })
|
|
|
|
|
// setLocalDraft(readCache)
|
|
|
|
|
|
|
|
|
|
// if (!isEmpty(localDraft)) {
|
|
|
|
|
// const { htmlContent, ...draftFormsValues } = localDraft
|
|
|
|
|
|
|
|
|
|
// const _findMatOld = emailListMatMapped?.[draftFormsValues.mat_sn]
|
|
|
|
|
// const _from = draftFormsValues?.from || _findMatOld?.email || ''
|
|
|
|
|
|
|
|
|
|
// form.setFieldsValue(draftFormsValues)
|
|
|
|
|
// setNewFromEmail(_from)
|
|
|
|
|
// setEmailOPI(draftFormsValues.opi_sn)
|
|
|
|
|
// setEmailMat(draftFormsValues.mat_sn)
|
|
|
|
|
// setEmailOrder(draftFormsValues.coli_sn)
|
|
|
|
|
// requestAnimationFrame(() => {
|
|
|
|
|
// setInitialContent(htmlContent)
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// return false
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// readMailboxLocalCache()
|
|
|
|
|
// return () => {}
|
|
|
|
|
// }, [])
|
|
|
|
|
|
|
|
|
|
// 填充表单
|
|
|
|
|
// - 从原邮件内容
|
|
|
|
|
// - 从订单
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('useEffect 1---- \nform.setFieldsValue ');
|
|
|
|
|
if (isEmpty(mailData.content) && isEmpty(orderDetail.order_no)) {
|
|
|
|
|
return () => {}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const docTitle = mailData.info?.MAI_Subject || 'New Email-';
|
|
|
|
|
document.title = docTitle
|
|
|
|
|
|
|
|
|
|
const { info } = mailData
|
|
|
|
|
const { ...templateFormValues } = templateContent;
|
|
|
|
|
|
|
|
|
|
const orderReceiver = orderDetail.contact?.[0]?.email || ''
|
|
|
|
|
|
|
|
|
|
const _findMatOld = emailListOPIMapped?.[orderDetail.opi_sn]
|
|
|
|
|
const orderSender = _findMatOld?.email || ''
|
|
|
|
|
|
|
|
|
|
const _findMatOldE = emailListMatMapped?.[info.MAI_MAT_SN]
|
|
|
|
|
const quotedMailSender = _findMatOldE?.email || ''
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const sender = quotedMailSender || orderSender
|
|
|
|
|
const quotedMailSenderObj = sender; // { key: sender, label: sender, value: sender }
|
|
|
|
|
const defaultMAT = emailListAddrMapped?.[sender]?.mat_sn || ''
|
|
|
|
|
|
|
|
|
|
const _form2 = {
|
|
|
|
|
coli_sn: pageParam.oid || info?.coli_sn || '',
|
|
|
|
|
mat_sn: info?.MAI_MAT_SN || defaultMAT,
|
|
|
|
|
opi_sn: info?.MAI_OPI_SN || orderDetail.opi_sn || '',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let readyToInitialContent = '';
|
|
|
|
|
let _formValues = {};
|
|
|
|
|
|
|
|
|
|
// setShowCc(!isEmpty(mailData.info?.MAI_CS));
|
|
|
|
|
|
|
|
|
|
const signatureBody = generateMailContent({ content: signature })
|
|
|
|
|
|
|
|
|
|
// const preQuoteBody = generateQuoteContent(mailData)
|
|
|
|
|
|
|
|
|
|
// const _initialContent = isEmpty(mailData.info) ? signatureBody : signatureBody+preQuoteBody
|
|
|
|
|
|
|
|
|
|
if (!isEmpty(mailData.info) && !['edit', 'new'].includes(pageParam.action)) {
|
|
|
|
|
readyToInitialContent = contentPrefix + signatureBody
|
|
|
|
|
}
|
|
|
|
|
switch (pageParam.action) {
|
|
|
|
|
case 'reply':
|
|
|
|
|
_formValues = {
|
|
|
|
|
from: quotedMailSenderObj,
|
|
|
|
|
to: info?.replyTo || orderReceiver,
|
|
|
|
|
cc: info?.MAI_CS || '',
|
|
|
|
|
// bcc: quote.bcc || '',
|
|
|
|
|
subject: `Re: ${info.MAI_Subject || ''}`,
|
|
|
|
|
..._form2
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
case 'replyall':
|
|
|
|
|
_formValues = {
|
|
|
|
|
from: quotedMailSenderObj,
|
|
|
|
|
to: info?.replyToAll || orderReceiver,
|
|
|
|
|
cc: info?.MAI_CS || '',
|
|
|
|
|
// bcc: quote.bcc || '',
|
|
|
|
|
subject: `Re: ${info.MAI_Subject || ''}`,
|
|
|
|
|
..._form2
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
case 'forward':
|
|
|
|
|
_formValues = {
|
|
|
|
|
from: quotedMailSenderObj,
|
|
|
|
|
subject: `Fw: ${info.MAI_Subject || ''}`,
|
|
|
|
|
// coli_sn: pageParam.oid,
|
|
|
|
|
..._form2
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
case 'edit':
|
|
|
|
|
_formValues = {
|
|
|
|
|
from: quotedMailSenderObj,
|
|
|
|
|
to: info?.MAI_To || '',
|
|
|
|
|
cc: info?.MAI_CS || '',
|
|
|
|
|
subject: `Fw: ${info.MAI_Subject || ''}`,
|
|
|
|
|
id: pageParam.quoteid,
|
|
|
|
|
mai_sn: pageParam.quoteid,
|
|
|
|
|
..._form2
|
|
|
|
|
}
|
|
|
|
|
readyToInitialContent = generateMailContent(mailData)
|
|
|
|
|
break
|
|
|
|
|
case 'new':
|
|
|
|
|
_formValues = {
|
|
|
|
|
...templateFormValues,
|
|
|
|
|
from: quotedMailSenderObj,
|
|
|
|
|
to: orderReceiver,
|
|
|
|
|
..._form2
|
|
|
|
|
}
|
|
|
|
|
readyToInitialContent = generateMailContent({ content: templateContent.bodycontent })
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
olog('222', _formValues, pageParam.action)
|
|
|
|
|
form.setFieldsValue(_formValues) // todo: from
|
|
|
|
|
setInitialContent(readyToInitialContent);
|
|
|
|
|
|
|
|
|
|
return () => {}
|
|
|
|
|
}, [orderDetail.order_no, quoteLoading, loadingTamplate])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const readFromTemplate = () => {
|
|
|
|
|
// const { mailcontent, ...templateFormValues } = templateContent;
|
|
|
|
|
// if (mailcontent) {
|
|
|
|
|
// const _findMatOld = emailListOPIMapped?.[orderDetail.opi_sn]
|
|
|
|
|
// const _from = _findMatOld?.email || ''
|
|
|
|
|
// form.setFieldsValue({...templateFormValues, to: orderDetail?.contact?.[0]?.email || '', from1: { key: _from, value: _from, label: _from}});
|
|
|
|
|
// // setNewFromEmail(_from);
|
|
|
|
|
// // setEmailOPI(draftFormsValues.opi_sn)
|
|
|
|
|
// requestAnimationFrame(() => {
|
|
|
|
|
// setInitialContent(mailcontent);
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
readMailboxLocalCache()
|
|
|
|
|
// readMailboxLocalCache()
|
|
|
|
|
if (loadingTamplate) {
|
|
|
|
|
notification.open({
|
|
|
|
|
key: editorKey,
|
|
|
|
|
placement: 'top',
|
|
|
|
|
// message: '提示',
|
|
|
|
|
description: '正在加载邮件模板...',
|
|
|
|
|
duration: 0,
|
|
|
|
|
icon: <LoadingOutlined />,
|
|
|
|
|
// actions: btn,
|
|
|
|
|
// closeIcon: null,
|
|
|
|
|
closable: false,
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
notification.destroy(editorKey)
|
|
|
|
|
}
|
|
|
|
|
// readFromTemplate();
|
|
|
|
|
|
|
|
|
|
return () => {}
|
|
|
|
|
}, [])
|
|
|
|
|
}, [loadingTamplate])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -157,6 +312,8 @@ const NewEmail = () => {
|
|
|
|
|
console.log('useeffect\n', orderDetail.order_no);
|
|
|
|
|
|
|
|
|
|
setContentPrefix(orderDetail.order_no ? `<p>Dear Mr./Ms. ${orderDetail.contact?.[0]?.name || ''}</p><p>Reference Number: ${orderDetail.order_no}</p>` : '')
|
|
|
|
|
// form.setFieldsValue({ to: orderDetail.contact?.[0]?.email || '' })
|
|
|
|
|
setNewToEmail(orderDetail.contact?.[0]?.email || '')
|
|
|
|
|
|
|
|
|
|
return () => {}
|
|
|
|
|
}, [orderDetail.order_no, editorKey])
|
|
|
|
|
@ -169,7 +326,6 @@ const NewEmail = () => {
|
|
|
|
|
setEmailOPI(_findMat?.opi_sn)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const { signature } = useEmailSignature(emailOPI)
|
|
|
|
|
|
|
|
|
|
const [isRichText, setIsRichText] = useState(mobile === false)
|
|
|
|
|
// const [isRichText, setIsRichText] = useState(false); // 默认纯文本
|
|
|
|
|
@ -193,11 +349,11 @@ const NewEmail = () => {
|
|
|
|
|
form.setFieldValue('content', htmlContent)
|
|
|
|
|
const { bodyText: abstract } = parseHTMLString(htmlContent, true);
|
|
|
|
|
const body = {
|
|
|
|
|
from: newFromEmail,
|
|
|
|
|
attaList: fileList,
|
|
|
|
|
opi_sn: emailOPI,
|
|
|
|
|
mat_sn: emailMat,
|
|
|
|
|
coli_sn: emailOrder || '',
|
|
|
|
|
// from: newFromEmail,
|
|
|
|
|
// attaList: fileList,
|
|
|
|
|
// opi_sn: emailOPI,
|
|
|
|
|
// mat_sn: emailMat,
|
|
|
|
|
// coli_sn: emailOrder || '',
|
|
|
|
|
}
|
|
|
|
|
// form.setFieldValue('abstract', getAbstract(textContent))
|
|
|
|
|
debouncedSave({ ...form.getFieldsValue(), ...body, htmlContent, abstract, })
|
|
|
|
|
@ -205,129 +361,111 @@ const NewEmail = () => {
|
|
|
|
|
|
|
|
|
|
const [initialContent, setInitialContent] = useState('')
|
|
|
|
|
const [showQuoteContent, setShowQuoteContent] = useState(false)
|
|
|
|
|
const [mergeQuote, setMergeQuote] = useState(true)
|
|
|
|
|
// const [mergeQuote, setMergeQuote] = useState(true)
|
|
|
|
|
const [quoteContent, setQuoteContent] = useState('')
|
|
|
|
|
|
|
|
|
|
const setPreFillInProperty = () => { };
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('useEffect 2---- \nform.setFieldsValue ');
|
|
|
|
|
const docTitle = localDraft?.subject || mailData.info?.MAI_Subject || 'New Email-';
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
document.title = docTitle
|
|
|
|
|
}, 1500);
|
|
|
|
|
|
|
|
|
|
if (!isEmpty(localDraft)) {
|
|
|
|
|
const {htmlContent, ...draftFormsValues} = localDraft;
|
|
|
|
|
|
|
|
|
|
const _findMatOld = emailListMatMapped?.[draftFormsValues.mat_sn]
|
|
|
|
|
const _from = draftFormsValues?.from || _findMatOld?.email || ''
|
|
|
|
|
|
|
|
|
|
form.setFieldsValue(draftFormsValues);
|
|
|
|
|
setNewFromEmail(_from);
|
|
|
|
|
setEmailOPI(draftFormsValues.opi_sn)
|
|
|
|
|
setEmailMat(draftFormsValues.mat_sn)
|
|
|
|
|
setEmailOrder(draftFormsValues.coli_sn)
|
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
|
setInitialContent(htmlContent);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return () => {};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 没有引用邮件
|
|
|
|
|
if (isEmpty(pageParam.quoteid)) {
|
|
|
|
|
|
|
|
|
|
// setEmailOrder(orderDetail.order_no)
|
|
|
|
|
// setEmailOPI(orderDetail.opi_sn)
|
|
|
|
|
// setNewFromEmail(activeEdit.fromEmail)
|
|
|
|
|
// setNewToEmail(activeEdit.toEmail)
|
|
|
|
|
|
|
|
|
|
// const _findMat = emailListAddrMapped?.[activeEdit.fromEmail]?.mat_sn
|
|
|
|
|
// setEmailMat(_findMat)
|
|
|
|
|
|
|
|
|
|
// if (open !== true) {
|
|
|
|
|
// form.resetFields()
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
// 转发/回复时, 使用详情的账户信息
|
|
|
|
|
if (mailData.info?.MAI_MAT_SN) {
|
|
|
|
|
const reEmailO = mailData.info?.MAI_COLI_SN
|
|
|
|
|
const reEmailUser = mailData.info?.MAI_OPI_SN
|
|
|
|
|
const reEmailUserMat = mailData.info?.MAI_MAT_SN
|
|
|
|
|
|
|
|
|
|
setEmailOrder((prev) => reEmailO || prev ) // activeEdit.fromOrder
|
|
|
|
|
setEmailOPI((prev) => reEmailUser || prev)
|
|
|
|
|
setEmailMat((prev) => reEmailUserMat || prev)
|
|
|
|
|
|
|
|
|
|
const _findMatOld = emailListMatMapped?.[reEmailUserMat]
|
|
|
|
|
if (_findMatOld) {
|
|
|
|
|
setNewFromEmail(_findMatOld.email)
|
|
|
|
|
setEmailOPI(_findMatOld.opi_sn)
|
|
|
|
|
setEmailMat(_findMatOld.mat_sn)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setShowQuoteContent(false)
|
|
|
|
|
setMergeQuote(true)
|
|
|
|
|
setQuoteContent('')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (isEmpty(pageParam.quoteid) && pageParam.action !== 'new') {
|
|
|
|
|
return () => {}
|
|
|
|
|
}
|
|
|
|
|
const { info } = mailData
|
|
|
|
|
// setShowCc(!isEmpty(mailData.info?.MAI_CS));
|
|
|
|
|
|
|
|
|
|
const signatureBody = generateMailContent({ content: signature })
|
|
|
|
|
|
|
|
|
|
// const preQuoteBody = generateQuoteContent(mailData)
|
|
|
|
|
|
|
|
|
|
// const _initialContent = isEmpty(mailData.info) ? signatureBody : signatureBody+preQuoteBody
|
|
|
|
|
|
|
|
|
|
if (!isEmpty(mailData.info) && pageParam.action !== 'edit') {
|
|
|
|
|
setInitialContent(contentPrefix + signatureBody)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const forwardValues = { from: newFromEmail, subject: `Fw: ${info.MAI_Subject || ''}` }
|
|
|
|
|
if (pageParam.action === 'reply') {
|
|
|
|
|
const _formValues = {
|
|
|
|
|
to: info?.replyTo || newFromEmail,
|
|
|
|
|
cc: info?.MAI_CS || '',
|
|
|
|
|
// bcc: quote.bcc || '',
|
|
|
|
|
subject: `Re: ${info.MAI_Subject || ''}`,
|
|
|
|
|
}
|
|
|
|
|
form.setFieldsValue(_formValues)
|
|
|
|
|
} else if (pageParam.action === 'replyall') {
|
|
|
|
|
const _formValues = {
|
|
|
|
|
to: info?.replyToAll || newFromEmail,
|
|
|
|
|
cc: info?.MAI_CS || '',
|
|
|
|
|
// bcc: quote.bcc || '',
|
|
|
|
|
subject: `Re: ${info.MAI_Subject || ''}`,
|
|
|
|
|
}
|
|
|
|
|
form.setFieldsValue(_formValues)
|
|
|
|
|
} else if (pageParam.action === 'forward') {
|
|
|
|
|
form.setFieldsValue(forwardValues)
|
|
|
|
|
} else if (pageParam.action === 'edit') {
|
|
|
|
|
const thisFormValues = {
|
|
|
|
|
to: info?.MAI_To || '',
|
|
|
|
|
cc: info?.MAI_CS || '',
|
|
|
|
|
subject: info?.MAI_Subject || '',
|
|
|
|
|
id: pageParam.quoteid,
|
|
|
|
|
}
|
|
|
|
|
form.setFieldsValue(thisFormValues)
|
|
|
|
|
const thisBody = generateMailContent(mailData)
|
|
|
|
|
// console.log('thisBody', thisBody);
|
|
|
|
|
|
|
|
|
|
setInitialContent(thisBody)
|
|
|
|
|
} else if (pageParam.action === 'new') {
|
|
|
|
|
// todo: 附件
|
|
|
|
|
const newEmail = { to: newToEmail, subject: '' }
|
|
|
|
|
form.setFieldsValue(newEmail)
|
|
|
|
|
setInitialContent((contentPrefix || '') + signatureBody)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return () => {}
|
|
|
|
|
}, [ mailData.info, signature, newToEmail, contentPrefix, localDraft])
|
|
|
|
|
// const setPreFillInProperty = () => { };
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// console.log('useEffect 2---- \nform.setFieldsValue ');
|
|
|
|
|
// const docTitle = localDraft?.subject || mailData.info?.MAI_Subject || 'New Email-';
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// document.title = docTitle
|
|
|
|
|
// }, 1500);
|
|
|
|
|
|
|
|
|
|
// // 没有引用邮件
|
|
|
|
|
// if (isEmpty(pageParam.quoteid)) {
|
|
|
|
|
|
|
|
|
|
// // setEmailOrder(orderDetail.order_no)
|
|
|
|
|
// // setEmailOPI(orderDetail.opi_sn)
|
|
|
|
|
// // setNewFromEmail(activeEdit.fromEmail)
|
|
|
|
|
// // setNewToEmail(activeEdit.toEmail)
|
|
|
|
|
|
|
|
|
|
// // const _findMat = emailListAddrMapped?.[activeEdit.fromEmail]?.mat_sn
|
|
|
|
|
// // setEmailMat(_findMat)
|
|
|
|
|
|
|
|
|
|
// // if (open !== true) {
|
|
|
|
|
// // form.resetFields()
|
|
|
|
|
// // }
|
|
|
|
|
// }
|
|
|
|
|
// // 转发/回复时, 使用详情的账户信息
|
|
|
|
|
// if (mailData.info?.MAI_MAT_SN) {
|
|
|
|
|
// const reEmailO = mailData.info?.MAI_COLI_SN
|
|
|
|
|
// const reEmailUser = mailData.info?.MAI_OPI_SN
|
|
|
|
|
// const reEmailUserMat = mailData.info?.MAI_MAT_SN
|
|
|
|
|
|
|
|
|
|
// setEmailOrder((prev) => reEmailO || prev ) // activeEdit.fromOrder
|
|
|
|
|
// setEmailOPI((prev) => reEmailUser || prev)
|
|
|
|
|
// setEmailMat((prev) => reEmailUserMat || prev)
|
|
|
|
|
|
|
|
|
|
// const _findMatOld = emailListMatMapped?.[reEmailUserMat]
|
|
|
|
|
// if (_findMatOld) {
|
|
|
|
|
// setNewFromEmail(_findMatOld.email)
|
|
|
|
|
// setEmailOPI(_findMatOld.opi_sn)
|
|
|
|
|
// setEmailMat(_findMatOld.mat_sn)
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// setShowQuoteContent(false)
|
|
|
|
|
// // setMergeQuote(true)
|
|
|
|
|
// setQuoteContent('')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (isEmpty(pageParam.quoteid) && pageParam.action !== 'new') {
|
|
|
|
|
// return () => {}
|
|
|
|
|
// }
|
|
|
|
|
// const { info } = mailData
|
|
|
|
|
// // setShowCc(!isEmpty(mailData.info?.MAI_CS));
|
|
|
|
|
|
|
|
|
|
// const signatureBody = generateMailContent({ content: signature })
|
|
|
|
|
|
|
|
|
|
// // const preQuoteBody = generateQuoteContent(mailData)
|
|
|
|
|
|
|
|
|
|
// // const _initialContent = isEmpty(mailData.info) ? signatureBody : signatureBody+preQuoteBody
|
|
|
|
|
|
|
|
|
|
// if (!isEmpty(mailData.info) && pageParam.action !== 'edit') {
|
|
|
|
|
// setInitialContent(contentPrefix + signatureBody)
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// const forwardValues = { from: newFromEmail, subject: `Fw: ${info.MAI_Subject || ''}` }
|
|
|
|
|
// if (pageParam.action === 'reply') {
|
|
|
|
|
// const _formValues = {
|
|
|
|
|
// to: info?.replyTo || newFromEmail,
|
|
|
|
|
// cc: info?.MAI_CS || '',
|
|
|
|
|
// // bcc: quote.bcc || '',
|
|
|
|
|
// subject: `Re: ${info.MAI_Subject || ''}`,
|
|
|
|
|
// }
|
|
|
|
|
// form.setFieldsValue(_formValues)
|
|
|
|
|
// } else if (pageParam.action === 'replyall') {
|
|
|
|
|
// const _formValues = {
|
|
|
|
|
// to: info?.replyToAll || newFromEmail,
|
|
|
|
|
// cc: info?.MAI_CS || '',
|
|
|
|
|
// // bcc: quote.bcc || '',
|
|
|
|
|
// subject: `Re: ${info.MAI_Subject || ''}`,
|
|
|
|
|
// }
|
|
|
|
|
// form.setFieldsValue(_formValues)
|
|
|
|
|
// } else if (pageParam.action === 'forward') {
|
|
|
|
|
// form.setFieldsValue(forwardValues)
|
|
|
|
|
// } else if (pageParam.action === 'edit') {
|
|
|
|
|
// const thisFormValues = {
|
|
|
|
|
// to: info?.MAI_To || '',
|
|
|
|
|
// cc: info?.MAI_CS || '',
|
|
|
|
|
// subject: info?.MAI_Subject || '',
|
|
|
|
|
// id: pageParam.quoteid,
|
|
|
|
|
// }
|
|
|
|
|
// form.setFieldsValue(thisFormValues)
|
|
|
|
|
// const thisBody = generateMailContent(mailData)
|
|
|
|
|
// // console.log('thisBody', thisBody);
|
|
|
|
|
|
|
|
|
|
// setInitialContent(thisBody)
|
|
|
|
|
// } else if (pageParam.action === 'new') {
|
|
|
|
|
// // todo: 附件
|
|
|
|
|
// const newEmail = { to: newToEmail, subject: '' }
|
|
|
|
|
// // form.setFieldsValue(newEmail)
|
|
|
|
|
// // setInitialContent((contentPrefix || '') + signatureBody)
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// return () => {}
|
|
|
|
|
// }, [ mailData.info, signature, newToEmail, contentPrefix])
|
|
|
|
|
|
|
|
|
|
const [openPlainTextConfirm, setOpenPlainTextConfirm] = useState(false)
|
|
|
|
|
const handlePlainTextOpenChange = ({ target }) => {
|
|
|
|
|
@ -470,11 +608,11 @@ const NewEmail = () => {
|
|
|
|
|
|
|
|
|
|
const onHandleSaveOrSend = async (isDraft = false) => {
|
|
|
|
|
// console.log('onSend callback', '\nisRichText', isRichText);
|
|
|
|
|
// console.log(form.getFieldsValue());
|
|
|
|
|
console.log(form.getFieldsValue());
|
|
|
|
|
const body = structuredClone(form.getFieldsValue())
|
|
|
|
|
body.mailtype = ''; // todo: 邮件类型
|
|
|
|
|
// body.mailtype = ''; // todo: 邮件类型
|
|
|
|
|
// body.id = ''; // todo: 已保存的草稿
|
|
|
|
|
body.from = newFromEmail
|
|
|
|
|
// body.from = newFromEmail // todo:
|
|
|
|
|
body.attaList = fileList
|
|
|
|
|
body.opi_sn = emailOPI
|
|
|
|
|
body.mat_sn = emailMat
|
|
|
|
|
@ -513,7 +651,7 @@ const NewEmail = () => {
|
|
|
|
|
|
|
|
|
|
// console.log('postSendEmail', body, '\n', msgObj);
|
|
|
|
|
// return;
|
|
|
|
|
// todo: 保存后不在草稿箱, 在待发目录
|
|
|
|
|
// todo: 保存后不在草稿箱, 在待发目录; 传了ID但每次都新增
|
|
|
|
|
const result = await saveEmailDraftOrSendAction(body, isDraft)
|
|
|
|
|
const mailSavedId = result.id || ''
|
|
|
|
|
bubbleMsg.email.mai_sn = mailSavedId
|
|
|
|
|
@ -582,12 +720,32 @@ const NewEmail = () => {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
|
|
|
|
|
<Form
|
|
|
|
|
form={form}
|
|
|
|
|
onValuesChange={onEditChange}
|
|
|
|
|
// onFinishFailed={onFinishFailed}
|
|
|
|
|
preserve={false}
|
|
|
|
|
name={`email_max_form`}
|
|
|
|
|
size='small'
|
|
|
|
|
layout={'inline'}
|
|
|
|
|
variant={'borderless'}
|
|
|
|
|
// initialValues={{}}
|
|
|
|
|
// onFinish={() => {}}
|
|
|
|
|
className='email-editor-wrapper *:mb-2 *:border-b *:border-t-0 *:border-x-0 *:border-indigo-100 *:border-solid '
|
|
|
|
|
requiredMark={false}
|
|
|
|
|
// labelCol={{ span: 3 }}
|
|
|
|
|
>
|
|
|
|
|
<div className='w-full flex gap-4 justify-start items-center text-indigo-600 pb-1 mb-2 border-x-0 border-t-0 border-b border-solid border-neutral-200'>
|
|
|
|
|
<Button type='primary' onClick={onHandleSaveOrSend} loading={sendLoading} icon={<SendOutlined />}>
|
|
|
|
|
<Button type='primary' size='middle' onClick={onHandleSaveOrSend} loading={sendLoading} icon={<SendOutlined />}>
|
|
|
|
|
发送
|
|
|
|
|
</Button>
|
|
|
|
|
<Select labelInValue options={emailListOption} value={{ key: newFromEmail, value: newFromEmail, label: newFromEmail }} onChange={handleSwitchEmail} labelRender={item => `发件人: ${item.label || '选择'}`} variant={'borderless'} className='[&_.ant-select-selection-item]:font-bold' />
|
|
|
|
|
<Form.Item noStyle name={'from'} rules={[{ required: true, message: '请选择发件地址' }]}>
|
|
|
|
|
<Select labelInValue={false} options={emailListOption} labelRender={item => `发件人: ${item?.label || '选择'}`} variant={'borderless'} placeholder='发件人: 选择' className='[&_.ant-select-selection-item]:font-bold [&_.ant-select-selection-placeholder]:font-bold [&_.ant-select-selection-placeholder]:text-black' classNames={{popup: {root:'min-w-60'}}} />
|
|
|
|
|
<div className="ant-form-item-explain-error text-red-500" >请选择发件地址</div>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<div className='ml-auto'></div>
|
|
|
|
|
<span>{orderDetail.order_no}</span>
|
|
|
|
|
<span>{templateContent.mailtypeName}</span>
|
|
|
|
|
<Popconfirm trigger1={['hover', 'click']}
|
|
|
|
|
description='切换内容为纯文本格式将丢失信件和签名的格式, 确定使用纯文本?'
|
|
|
|
|
onConfirm={confirmPlainText}
|
|
|
|
|
@ -601,20 +759,6 @@ const NewEmail = () => {
|
|
|
|
|
</Popconfirm>
|
|
|
|
|
<Button onClick={() => onHandleSaveOrSend(true)} type='dashed' icon={<SaveOutlined />} size='small' className='' >存草稿</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<Form
|
|
|
|
|
form={form}
|
|
|
|
|
onValuesChange={onEditChange}
|
|
|
|
|
preserve={false}
|
|
|
|
|
name={`email_max_form-${Date.now().toString(32)}`}
|
|
|
|
|
size='small'
|
|
|
|
|
layout={'inline'}
|
|
|
|
|
variant={'borderless'}
|
|
|
|
|
// initialValues={{}}
|
|
|
|
|
// onFinish={() => {}}
|
|
|
|
|
className='email-editor-wrapper *:mb-2 *:border-b *:border-t-0 *:border-x-0 *:border-indigo-100 *:border-solid '
|
|
|
|
|
requiredMark={false}
|
|
|
|
|
// labelCol={{ span: 3 }}
|
|
|
|
|
>
|
|
|
|
|
<Form.Item className='w-full'>
|
|
|
|
|
<Space.Compact className='w-full'>
|
|
|
|
|
<Form.Item name={'to'} label='收件人' rules={[{ required: true }]} className='!flex-1'>
|
|
|
|
|
@ -675,9 +819,24 @@ const NewEmail = () => {
|
|
|
|
|
<Form.Item name='id' hidden>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name='mai_sn' hidden>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name='mat_sn' hidden>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name='coli_sn' hidden>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name='opi_sn' hidden>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name='mailtype' hidden>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Form>
|
|
|
|
|
<LexicalEditor {...{ isRichText }} onChange={handleEditorChange} defaultValue={initialContent} />
|
|
|
|
|
{pageParam.quoteid && pageParam.action!=='edit' && !showQuoteContent && (
|
|
|
|
|
{!isEmpty(Number(pageParam.quoteid)) && pageParam.action!=='edit' && !showQuoteContent && (
|
|
|
|
|
<div className='flex justify-start items-center ml-2'>
|
|
|
|
|
<Button className='flex gap-2 ' type='link' onClick={() => setShowQuoteContent(!showQuoteContent)}>
|
|
|
|
|
显示引用内容 ↓ {/*(不可更改)*/}
|
|
|
|
|
|
Lei OT
3 weeks ago