From 1246657f2430b20673fcf6c355b5d36194beed4b Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 5 Nov 2024 10:44:00 +0800 Subject: [PATCH] =?UTF-8?q?todo:=20=E9=82=AE=E4=BB=B6=E9=87=8D=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/actions/EmailActions.js | 9 +- src/assets/icons/reset-left-fill.svg | 1 + src/assets/icons/reset-left-line.svg | 1 + src/assets/icons/restart-fill.svg | 1 + src/assets/icons/restart-line.svg | 1 + src/components/Icons.jsx | 4 + .../Online/Components/BubbleEmail.jsx | 6 +- .../Online/Components/EmailDetail.jsx | 90 +++++++++++++------ .../Online/Input/EmailEditorPopup.jsx | 20 ++++- 9 files changed, 104 insertions(+), 29 deletions(-) create mode 100644 src/assets/icons/reset-left-fill.svg create mode 100644 src/assets/icons/reset-left-line.svg create mode 100644 src/assets/icons/restart-fill.svg create mode 100644 src/assets/icons/restart-line.svg diff --git a/src/actions/EmailActions.js b/src/actions/EmailActions.js index 7706241..f6c0465 100644 --- a/src/actions/EmailActions.js +++ b/src/actions/EmailActions.js @@ -17,6 +17,9 @@ export const salesSignature = async (opisn, lgc = 1) => { } }; +/** + * 发送邮件 + */ export const postSendEmail = async (body) => { const { attaList, atta, content, ...bodyData } = body; const formData = new FormData(); @@ -30,7 +33,11 @@ export const postSendEmail = async (body) => { return result; }; -export const postResendEmail = async (body) => { +/** + * 重发邮件 + * @param {object} { mai_sn } + */ +export const postResendEmailAction = async (body) => { const { attaList, atta, content, ...bodyData } = body; const formData = new FormData(); Object.keys(bodyData).forEach(function (key) { diff --git a/src/assets/icons/reset-left-fill.svg b/src/assets/icons/reset-left-fill.svg new file mode 100644 index 0000000..552333e --- /dev/null +++ b/src/assets/icons/reset-left-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/reset-left-line.svg b/src/assets/icons/reset-left-line.svg new file mode 100644 index 0000000..4a5ea68 --- /dev/null +++ b/src/assets/icons/reset-left-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/restart-fill.svg b/src/assets/icons/restart-fill.svg new file mode 100644 index 0000000..21ccfca --- /dev/null +++ b/src/assets/icons/restart-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/restart-line.svg b/src/assets/icons/restart-line.svg new file mode 100644 index 0000000..63c519e --- /dev/null +++ b/src/assets/icons/restart-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx index 8ac97be..53c2465 100644 --- a/src/components/Icons.jsx +++ b/src/components/Icons.jsx @@ -10,6 +10,8 @@ import InboxSVG from '@/assets/icons/inbox-2-fill.svg?react'; import MailSendFillSVG from '@/assets/icons/mail-send-fill.svg?react'; import SendPlaneFillSVG from '@/assets/icons/send-plane-fill.svg?react'; 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'; export const ReplyIcon = (props) => ; @@ -21,6 +23,8 @@ export const InboxIcon = (props) => ; export const MailSendIcon = (props) => ; export const SendPlaneFillIcon = (props) => ; export const SendPlaneLineIcon = (props) => ; +export const ResendIcon = (props) => ; +export const EditIcon = (props) => ; const WABSvg = () => ( diff --git a/src/views/Conversations/Online/Components/BubbleEmail.jsx b/src/views/Conversations/Online/Components/BubbleEmail.jsx index b87bc5c..0a9a37e 100644 --- a/src/views/Conversations/Online/Components/BubbleEmail.jsx +++ b/src/views/Conversations/Online/Components/BubbleEmail.jsx @@ -3,7 +3,7 @@ import { Button } from 'antd'; import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons'; import { MessageBox } from 'react-chat-elements'; import { groupBy, isEmpty, } from '@/utils/commons'; -import { postResendEmail } from '@/actions/EmailActions'; +// import { } from '@/actions/EmailActions'; const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message }) => { @@ -26,7 +26,7 @@ const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message }) => { } const handleResend = async (emailMsgContent) => { - const result = await postResendEmail({ id: emailMsgContent.id, actionId: '' }); + // const result = await postResendEmail({ id: emailMsgContent.id, actionId: emailMsgContent.actionId }); }; return ( { // titleColor={message.sender !== 'me' ? '#4f46e5' : ''} // 600 notch={false} position={message.sender === 'me' ? 'right' : 'left'} + // debug: 0 todo: 编辑器无法更新 + replyButton={false} onReplyClick={() => onOpenEditor(message.msgOrigin)} onForwardClick={ () => { handleResend(message.msgOrigin); }} onOpen={() => handlePreview(message)} diff --git a/src/views/Conversations/Online/Components/EmailDetail.jsx b/src/views/Conversations/Online/Components/EmailDetail.jsx index 2f989ff..2db18be 100644 --- a/src/views/Conversations/Online/Components/EmailDetail.jsx +++ b/src/views/Conversations/Online/Components/EmailDetail.jsx @@ -1,12 +1,12 @@ import { useState, useEffect } from 'react' import { Button, Divider, Avatar } from 'antd' -import { ReplyIcon, ShareForwardIcon } from '@/components/Icons' +import { EditIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons' import { isEmpty, stringToColour } from '@/utils/commons' import EmailEditorPopup from '../Input/EmailEditorPopup' import DnDModal from '@/components/DndModal' import useStyleStore from '@/stores/StyleStore' -import { getEmailDetailAction } from '@/actions/EmailActions' -import { useEmailDetail } from '@/hooks/useEmail'; +import { useEmailDetail, } from '@/hooks/useEmail'; +import { postResendEmailAction } from '@/actions/EmailActions'; const TagColorStyle = (tag) => { const color = stringToColour(tag) @@ -20,7 +20,7 @@ const TagColorStyle = (tag) => { const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => { let { conversationid, order_opi } = emailMsg - const { mai_sn, id } = emailMsg.msgOrigin?.email || emailMsg.msgOrigin || {} // todo: 发送之后, 复制id, 否则详情打不开 + const { mai_sn, id } = emailMsg.msgOrigin?.email || emailMsg.msgOrigin || {} // todo: 发送之后, 赋值id, 否则详情打不开 const mailID = mai_sn || id const [initialPosition, setInitialPosition] = useState({}) const [initialSize, setInitialSize] = useState({}) @@ -38,12 +38,10 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => { const [openEmailEditor, setOpenEmailEditor] = useState(false) const [fromEmail, setFromEmail] = useState('') - const [ReferEmailMsg, setReferEmailMsg] = useState('') const onOpenEditor = (msgOrigin, action) => { const { from } = msgOrigin setOpenEmailEditor(true) setFromEmail(from) - setReferEmailMsg(msgOrigin) setAction(action) setOpen(false) } @@ -52,24 +50,66 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => { const mailData = useEmailDetail(mailID) - const ActionBtns = (props) => ( -
- - -
- ) + const handleResend = async () => { + if (isEmpty(mai_sn)) { + return false + } + try { + const data = await postResendEmailAction({ mai_sn }) + setOpen(false) + + } catch (err) {} + + } + + /** + * 根据状态, 显示操作 + * * 已保存: [] + * * 已发送: 回复, 转发 + * * 失败: 重发 + */ + const ActionBtns = (props) => { + // const { status } = mailData.info // todo: 1 需要后端返回`状态` [accepted, sent, failed] + const { status } = { status: 'failed' } // debug: 0 + + const btns = [] + switch (status) { + case 'accepted': + break + case 'sent': + btns.push( + + ) + btns.push( + + ) + break + case 'failed': + btns.push( + + ) + btns.push( + + ) + break + default: + break + } + + return ( +
+ {btns} +
+ ) +} return ( <> @@ -154,7 +194,7 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => { initial={{ ...initialPosition, ...initialSize }} mailData={mailData} action={action} - key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`} + key={`email-editor-inner-${action}-popup_${mailID}`} /> ) diff --git a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx index 8339023..46b9848 100644 --- a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx +++ b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx @@ -55,6 +55,11 @@ const generateQuoteContent = (mailData) => `

`; +const generateMailContent = (mailData) => ` +

+ ${mailData.content} +

` + const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, conversationid, quoteid, initial = {}, mailData: _mailData, action = 'reply', ...props }) => { const [mobile] = useStyleStore((state) => [state.mobile]); const [userId, username, emailList] = useAuthStore((state) => [state.loginUser.userId, state.loginUser.username, state.loginUser.emailList]); @@ -120,8 +125,9 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, conversationid, const preQuoteBody = generateQuoteContent(mailData); - if ( !isEmpty(mailData.info)) + if ( !isEmpty(mailData.info) && action !== 'edit') { setInitialContent(preQuoteBody); + } const _formValues = { to: info?.MAI_From || fromEmail, @@ -136,6 +142,18 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, conversationid, } else if (action === 'forward') { form.setFieldsValue(forwardValues); setInitialForm(forwardValues); + } else if (action === 'edit') { + const thisFormValues = { + to: info?.MAI_To || '', + cc: info?.MAI_CS || '', + subject: info?.MAI_Subject || '', + }; + form.setFieldsValue(thisFormValues); + setInitialForm(thisFormValues); + const thisBody = generateMailContent(mailData); + console.log('thisBody', thisBody); + + setInitialContent(thisBody) } return () => {};