diff --git a/src/components/DnDModal.jsx b/src/components/DnDModal.jsx index b53da9c..9ee7714 100644 --- a/src/components/DnDModal.jsx +++ b/src/components/DnDModal.jsx @@ -46,7 +46,7 @@ const DnDModal = ({ children, open, setOpen, onCancel, onMove, onResize, initial maskClosable={false} // theme='dark' // className={'!border !border-solid !border-indigo-500 rounded !p-2' } - titleBarClassName='!bg-neutral-100 !rounded !rounded-b-none !border-none !p-3 !font-bold !text-slate-600' + titleBarClassName={`!bg-neutral-100 !rounded !rounded-b-none !border-none !p-3 !font-bold !text-slate-600 ${props.titleClassName}`} contentClassName='!p-2' footerClassName='!p-2' className={`!rounded-t !rounded-b-none !border !border-solid !shadow-heavy ${props.rootClassName}`} diff --git a/src/main.jsx b/src/main.jsx index ca5dd95..3b95ab8 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -31,6 +31,7 @@ import useAuthStore from '@/stores/AuthStore' import '@/assets/index.css' import CustomerRelation from '@/views/customer_relation/index' +import NewEmail from './views/NewEmail' useAuthStore.getState().loadUserSession() @@ -86,6 +87,8 @@ const router = createBrowserRouter([ { path: 'customer_relation/index', element: }, ], }, + { path: 'email/:action/:quoteid', element: }, + { path: 'email/new', element: }, ], }, { diff --git a/src/stores/ConversationStore.js b/src/stores/ConversationStore.js index 6e0c479..3c9b289 100644 --- a/src/stores/ConversationStore.js +++ b/src/stores/ConversationStore.js @@ -557,11 +557,63 @@ const messageSlice = (set, get) => ({ */ const emailSlice = (set, get) => ({ emailMsg: { id: -1, conversationid: '', actionId: '', order_opi: '', coli_sn: '', msgOrigin: {} }, - setEmailMsg: (emailMsg) => set({ emailMsg }), + setEmailMsg: (emailMsg) => { + const { editorOpen } = get(); + return editorOpen ? false : set({ emailMsg }); // 已经打开的不更新 + }, detailPopupOpen: false, setDetailOpen: (v) => set({ detailPopupOpen: v }), openDetail: () => set(() => ({ detailPopupOpen: true })), closeDetail: () => set(() => ({ detailPopupOpen: false })), + editorOpen: false, + setEditorOpen: (v) => set({ editorOpen: v }), + openEditor: () => set(() => ({ editorOpen: true })), + closeEditor: () => set(() => ({ editorOpen: false })), + + // EmailEditorPopup 组件的 props + // @property {string} fromEmail - 发件人邮箱 + // @property {string} fromUser - 发件人用户 + // @property {string} fromOrder - 发件订单 + // @property {string} toEmail - 收件人邮箱 + // @property {string} conversationid - 会话ID + // @property {string} quoteid - 引用邮件ID + // @property {object} draft - 草稿 + // @property {string} action - reply / forward / new / edit + // @property {string} oid - coli_sn + // @property {object} mailData - 邮件内容 + // @property {string} receiverName - 收件人称呼 + emailEdiorProps: new Map(), + setEditorProps: (v) => { + const { emailEdiorProps } = get(); + const uniqueKey = v.quoteid || Date.now().toString(32); + const currentEditValue = {...v, key: `${v.action}-${uniqueKey}`}; + const news = new Map(emailEdiorProps).set(currentEditValue.key, currentEditValue); + for (const [key, value] of news.entries()) { + console.log(value); + } + return set((state) => ({ emailEdiorProps: news, currentEditKey: currentEditValue.key, currentEditValue })) + // return set((state) => ({ emailEdiorProps: { ...state.emailEdiorProps, ...v } })) + }, + closeEditor1: (key) => { + const { emailEdiorProps } = get(); + const newProps = new Map(emailEdiorProps); + newProps.delete(key); + return set(() => ({ emailEdiorProps: newProps })) + }, + clearEditor: () => { + return set(() => ({ emailEdiorProps: new Map() })) + }, + currentEditKey: '', + setCurrentEditKey: (key) => { + const { emailEdiorProps, setCurrentEditValue } = get(); + const value = emailEdiorProps.get(key); + setCurrentEditValue(value); + return set(() => ({ currentEditKey: key })) + }, + currentEditValue: {}, + setCurrentEditValue: (v) => { + return set(() => ({ currentEditValue: v })) + } }) export const useConversationStore = create( diff --git a/src/views/ChatWindow.jsx b/src/views/ChatWindow.jsx index 0c5a150..2f6d47d 100644 --- a/src/views/ChatWindow.jsx +++ b/src/views/ChatWindow.jsx @@ -12,6 +12,7 @@ import CustomerProfile from './Conversations/Online/order/CustomerProfile'; import ReplyWrapper from './Conversations/Online/ReplyWrapper'; import './Conversations/Conversations.css'; +import EmailEditorPopup from './Conversations/Online/Input/EmailEditorPopup'; const { Sider, Content, Header, Footer } = Layout; @@ -75,6 +76,7 @@ const ChatWindow = () => { + ); }; diff --git a/src/views/Conversations/Online/Components/EmailContent.jsx b/src/views/Conversations/Online/Components/EmailContent.jsx index 0d0344b..d56ff88 100644 --- a/src/views/Conversations/Online/Components/EmailContent.jsx +++ b/src/views/Conversations/Online/Components/EmailContent.jsx @@ -72,7 +72,7 @@ const EmailContent = ({ id, content: MailContent, className='', ...props }) => { } catch (error) { console.error('Error calculating height:', error) } - setIframeHeight(200) + // setIframeHeight(200) } useEffect(() => { diff --git a/src/views/Conversations/Online/Components/EmailDetail.jsx b/src/views/Conversations/Online/Components/EmailDetail.jsx index 1203c47..e0eeb8f 100644 --- a/src/views/Conversations/Online/Components/EmailDetail.jsx +++ b/src/views/Conversations/Online/Components/EmailDetail.jsx @@ -149,7 +149,7 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, disabled=false, ...props }) = footer={}> - + key={`email-detail-inner-${action}_${mailID}`} + /> */} ) } diff --git a/src/views/Conversations/Online/Components/EmailDetailInline.jsx b/src/views/Conversations/Online/Components/EmailDetailInline.jsx index 20bc068..53f5c76 100644 --- a/src/views/Conversations/Online/Components/EmailDetailInline.jsx +++ b/src/views/Conversations/Online/Components/EmailDetailInline.jsx @@ -49,12 +49,19 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props } return () => {} }, [mailID]) - const onOpenEditor = (msgOrigin, action) => { - const { from, to } = msgOrigin - setOpenEmailEditor(true) - setFromEmail(action === 'edit' ? from : to) - setAction(action) - // setOpen(false) + const onOpenEditor = (msgOrigin, action='reply') => { + window.open(`/email/${action}/${msgOrigin.email.mai_sn || 0}`, `${action}-${msgOrigin.email.mai_sn || 0}`,'left=20,width=1000') + console.log('first000', emailMsg) + console.log('first', msgOrigin) + if (typeof props.onOpenEditor === 'function') { + props.onOpenEditor(msgOrigin, action); + } else { + const { from, to } = msgOrigin + setOpenEmailEditor(true) + setFromEmail(action === 'edit' ? from : to) + setAction(action) + // // setOpen(false) + } } const { loading, mailData, orderDetail, postEmailResend } = useEmailDetail(mailID) @@ -219,7 +226,7 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, ...props } - + key={`email-detail-inline-${action}_${mailID}`} + /> */} ) } diff --git a/src/views/Conversations/Online/Components/EmailListDrawer.jsx b/src/views/Conversations/Online/Components/EmailListDrawer.jsx index a1b68e1..9849138 100644 --- a/src/views/Conversations/Online/Components/EmailListDrawer.jsx +++ b/src/views/Conversations/Online/Components/EmailListDrawer.jsx @@ -5,8 +5,12 @@ import dayjs from 'dayjs' import { InboxIcon, SendPlaneFillIcon, ExpandIcon } from '@/components/Icons' import EmailDetailInline from './EmailDetailInline' import { debounce, isEmpty } from '@/utils/commons' +import useConversationStore from '@/stores/ConversationStore'; + +const EmailListDrawer = ({ showExpandBtn=true, title, list: otherEmailList, currentConversationID, opi_sn, oid, emailItem: clickItem, onOpenEditor, ...props }) => { + + const [, setEmailMsg] = useConversationStore((state) => [state.emailMsg, state.setEmailMsg]); -const EmailListDrawer = ({ showExpandBtn=true, title, list: otherEmailList, currentConversationID, opi_sn, oid, emailItem: clickItem, ...props }) => { const [open, setOpen] = useState(false) const [selectedEmail, setSelectedEmail] = useState({}) const searchInputRef = useRef(null) @@ -38,11 +42,15 @@ const EmailListDrawer = ({ showExpandBtn=true, title, list: otherEmailList, curr msgOrigin: { from: '', to: '', + ...(emailItem?.msgOrigin || {}), id: emailItem.MAI_SN, email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN }, + subject: emailItem.MAI_Subject, }, } + console.log('emailItem', emailItem); setSelectedEmail(emailMsg) + setEmailMsg(emailMsg); }; const [pageCurrent, setPageCurrent] = useState(1); @@ -52,11 +60,11 @@ const EmailListDrawer = ({ showExpandBtn=true, title, list: otherEmailList, curr useEffect(() => { if (!isEmpty(clickItem)) { - onClickEmailItem(clickItem) - setOpen(true); const itemIndex = dataSource.findIndex((ele) => ele.MAI_SN === clickItem.MAI_SN); const page = Math.ceil((itemIndex+1) / 8) || 1; setPageCurrent(page); + onClickEmailItem({...clickItem, ...dataSource[itemIndex]}); + setOpen(true); } return () => {} @@ -129,7 +137,7 @@ const EmailListDrawer = ({ showExpandBtn=true, title, list: otherEmailList, curr setOpen(false) }} open={open}> - + ) diff --git a/src/views/Conversations/Online/Components/EmailQuotation.jsx b/src/views/Conversations/Online/Components/EmailQuotation.jsx index 58f3d25..b959128 100644 --- a/src/views/Conversations/Online/Components/EmailQuotation.jsx +++ b/src/views/Conversations/Online/Components/EmailQuotation.jsx @@ -69,7 +69,7 @@ const EmailQuotation = ({ sfi_sn, ...props }) => { 邮件 - { // customerDetail={customerDetail} action={'new'} key={`email-quotation-new-popup_${currentConversation.sn}`} - /> + /> */} ) } diff --git a/src/views/Conversations/Online/Input/EmailComposer.jsx b/src/views/Conversations/Online/Input/EmailComposer.jsx index caa9833..62f3626 100644 --- a/src/views/Conversations/Online/Input/EmailComposer.jsx +++ b/src/views/Conversations/Online/Input/EmailComposer.jsx @@ -258,7 +258,7 @@ const EmailComposer = ({ ...props }) => { } - { customerDetail={customerDetail} action='new' key={'email-new-editor-popup'} - /> + /> */} ) } diff --git a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx index 9af4298..6582c33 100644 --- a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx +++ b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from 'react'; -import { App, ConfigProvider, Button, Form, Input, Flex, Checkbox, Popconfirm, Select, Space, Upload, Divider, Modal } from 'antd'; +import { useEffect, useState, useRef, useCallback } from 'react'; +import { App, ConfigProvider, Button, Form, Input, Flex, Checkbox, Popconfirm, Select, Space, Upload, Divider, Modal, Tabs } from 'antd'; import { UploadOutlined, LoadingOutlined } from '@ant-design/icons'; import '@dckj/react-better-modal/dist/index.css'; import DnDModal from '@/components/DnDModal'; @@ -10,7 +10,7 @@ import useAuthStore from '@/stores/AuthStore'; import LexicalEditor from '@/components/LexicalEditor'; import { v4 as uuid } from 'uuid'; -import { cloneDeep, isEmpty, } from '@/utils/commons'; +import { cloneDeep, debounce, isEmpty, writeIndexDB, } from '@/utils/commons'; import './EmailEditor.css'; import { postSendEmail } from '@/actions/EmailActions'; import { sentMsgTypeMapped, } from '@/channel/bubbleMsgUtils'; @@ -60,10 +60,9 @@ const generateMailContent = (mailData) => `

${mailData.content}

` * @property {string} quoteid - 引用邮件ID * @property {object} draft - 草稿 */ -const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, toEmail, conversationid, quoteid, initial = {}, mailData: _mailData, action = 'reply', draft = {}, customerDetail={}, ...props }) => { +const EmailEditorPopup = () => { 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 })) || []; @@ -72,8 +71,35 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, const emailListMatMapped = emailListOption?.reduce((r, v) => ({ ...r, [v.mat_sn]: v }), {}); // console.log('emailListMapped', emailListOption, emailListAddrMapped); - const mai_sn = quoteid; - const { loading: getLoading, mailData } = useEmailDetail(mai_sn, _mailData) + 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(currentEditKey) || {}); + // const { fromEmail, fromUser, fromOrder, oid, toEmail, conversationid, quoteid, initial = {}, mailData: _mailData, action = 'reply', draft = {}, receiverName, ...props } = emailEdiorProps.get(currentEditKey) || {}; + + const onChangeActiveEditor = (key) => { + setCurrentEditKey(key); + const _find = emailEdiorProps.get(key) || {}; + setActiveEdit(_find); + }; + + const onEditTab = (targetKey, action) => { + if (action === 'add') { + // + } else { + if (propsKeysArr.length === 1) { + setOpen(false); + } + closeEditor1(targetKey); + } + }; + + + const mai_sn = activeEdit.quoteid; + const { loading: getLoading, mailData } = useEmailDetail(mai_sn, activeEdit.mailData) const [stickToProps, setStickToProps] = useState({}); @@ -99,24 +125,24 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, // 存储: 会话ID, // 这个窗口没有模态, 即使不是focus, 还是需要保持会话ID // 否则, 会话列表切换之后, 会话ID更新, 导致消息关联错误 - const [stickToCid, setStickToCid] = useState(conversationid); + const [stickToCid, setStickToCid] = useState(activeEdit.conversationid); useEffect(() => { - const propsObj = { open, setOpen, fromEmail, fromUser, fromOrder, oid, toEmail, conversationid, quoteid, mai: _mailData?.info?.MAI_MAT_SN, action, draft } + const propsObj = { ...activeEdit, mai: activeEdit.mailData?.info?.MAI_MAT_SN, } - setContentPrefix(oid ? `

Dear Mr./Ms. ${customerDetail.name || ''}

Reference Number: ${oid}

` : ''); + setContentPrefix(activeEdit.oid ? `

Dear Mr./Ms. ${activeEdit.receiverName || ''}

Reference Number: ${activeEdit.oid}

` : ''); // 没有引用邮件 - if (isEmpty(quoteid)) { + if (isEmpty(activeEdit.quoteid)) { setStickToProps(propsObj) setPropsSerialize(JSON.stringify(propsObj)) - setStickToCid(conversationid) - setEmailOrder(fromOrder) - setEmailOPI(fromUser) - setNewFromEmail(fromEmail) - setNewToEmail(toEmail) + setStickToCid(activeEdit.conversationid) + setEmailOrder(activeEdit.fromOrder) + setEmailOPI(activeEdit.fromUser) + setNewFromEmail(activeEdit.fromEmail) + setNewToEmail(activeEdit.toEmail) - const _findMat = emailListAddrMapped?.[fromEmail]?.mat_sn + const _findMat = emailListAddrMapped?.[activeEdit.fromEmail]?.mat_sn setEmailMat(_findMat) // if (open !== true) { @@ -129,7 +155,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, const reEmailUser = mailData.info?.MAI_OPI_SN const reEmailUserMat = mailData.info?.MAI_MAT_SN - setEmailOrder((prev) => reEmailO || prev || fromOrder) + setEmailOrder((prev) => reEmailO || prev || activeEdit.fromOrder) setEmailOPI((prev) => reEmailUser || prev) setEmailMat((prev) => reEmailUserMat || prev) @@ -178,6 +204,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, setTextContent(textContent); form.setFieldValue('content', htmlContent); form.setFieldValue('abstract', getAbstract(textContent)); + debouncedSave({htmlContent}); }; const [initialForm, setInitialForm] = useState({}); @@ -189,7 +216,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, useEffect(() => { // console.log('quoteid', quoteid, isEmpty(quoteid), isEmpty(mailData.info)); - if (isEmpty(quoteid) && action !== 'new') { + if (isEmpty(activeEdit.quoteid) && activeEdit.action !== 'new') { return () => {} } const { info } = mailData @@ -201,7 +228,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, // const _initialContent = isEmpty(mailData.info) ? signatureBody : signatureBody+preQuoteBody - if (!isEmpty(mailData.info) && action !== 'edit') { + if (!isEmpty(mailData.info) && activeEdit.action !== 'edit') { setInitialContent(contentPrefix + signatureBody) } @@ -212,14 +239,14 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, subject: `Re: ${info.MAI_Subject || ''}`, } const forwardValues = { from: newFromEmail, subject: `Fw: ${info.MAI_Subject || ''}` } - if (action === 'reply') { + if (activeEdit.action === 'reply') { form.setFieldsValue(_formValues) setInitialForm(_formValues) - } else if (action === 'forward') { + } else if (activeEdit.action === 'forward') { setStickToCid('0') form.setFieldsValue(forwardValues) setInitialForm(forwardValues) - } else if (action === 'edit') { + } else if (activeEdit.action === 'edit') { const thisFormValues = { to: info?.MAI_To || '', cc: info?.MAI_CS || '', @@ -231,11 +258,11 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, // console.log('thisBody', thisBody); setInitialContent(thisBody) - } else if (action === 'new') { - const newEmail = { to: newToEmail, subject: draft?.subject || '' } + } else if (activeEdit.action === 'new') { + const newEmail = { to: newToEmail, subject: activeEdit.draft?.subject || '' } form.setFieldsValue(newEmail) setInitialForm(newEmail) - setInitialContent((draft?.content || contentPrefix || '') + signatureBody) + setInitialContent((activeEdit.draft?.content || contentPrefix || '') + signatureBody) } return () => {} @@ -391,7 +418,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, body.coli_sn = emailOrder || ''; // console.log('body', body, '\n', emailOrder); const values = await form.validateFields(); - const preQuoteBody = quoteid ? (quoteContent ? quoteContent : generateQuoteContent(mailData, isRichText)) : ''; + const preQuoteBody = activeEdit.quoteid ? (quoteContent ? quoteContent : generateQuoteContent(mailData, isRichText)) : ''; body.mailcontent = isRichText ? EmailBuilder({ subject: values.subject, content: htmlContent+preQuoteBody }) : textContent+preQuoteBody body.cc = values.cc || ''; body.bcc = values.bcc || ''; @@ -450,6 +477,32 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, const [openDrawerSnippet] = useSnippetStore((state) => [state.openDrawer]) const [openPaymentDrawer] = useOrderStore((state) => [state.openDrawer]) + const [bakData, setBakData] = useState({}); + const idleCallbackId = useRef(null); + const debouncedSave = useCallback( + debounce((data) => { + idleCallbackId.current = window.requestIdleCallback(() => { + console.log('Saving data (idle, debounced):', data); + if (currentEditKey) writeIndexDB({ ...data, key: currentEditKey }, 'draft', 'EmailEditor') + }); + }, 1500), // 1.5s + [] + ); + const onEditChange = (changedValues, allValues) => { + console.log('onEditChange', changedValues,'\n', allValues) + // const { name, value } = e.target; + // setBakData(prevData => ({ ...prevData, [name]: value })); + // debouncedSave(bakData); + }; + + useEffect(() => { + return () => { + if (idleCallbackId.current && window.cancelIdleCallback) { + window.cancelIdleCallback(idleCallbackId.current); + } + }; + }, [debouncedSave]); + return ( <> @@ -457,15 +510,19 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, rootClassName='email-editor-wrapper !border-indigo-300 ' open={open} setOpen={setOpen} - initial={{ width: window.innerWidth - 600, height: window.innerHeight - 40, left: 300 + 24, top: 20 }} + // 300 + 24 + // window.innerWidth - 600 + initial={{ width: 880, height: window.innerHeight - 40, left: 20, top: 20 }} onCancel={() => { form.resetFields() stateReset() }} + titleClassName={`!pl-0 !pt-0 !pb-0`} title={ <> - {getLoading ? : null} - {initialForm.subject || `${!isEmpty(quoteid) ? '回复: ' : '写邮件: '} ${newFromEmail || ''}`} + {/* {getLoading ? : null} */} + {/* {initialForm.subject || `${!isEmpty(quoteid) ? '回复: ' : '写邮件: '} ${newFromEmail || ''}`} */} + ({...ele, label: (!isEmpty(activeEdit.quoteid) ? '回复: ' : '新邮件: ')+ele.subject}))} onEdit={onEditTab} hideAdd /> } footer={ @@ -486,7 +543,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, }>
- {quoteid && !showQuoteContent && ( + {activeEdit.quoteid && !showQuoteContent && (
+ )} + {!showBcc && ( + + )} + + + {/* + {!showCc && ( + + )} + {!showBcc && ( + + )} + + } + /> */} + + + + + + + + + + + + + + + + {/* 更多工具 */} + {/* + +
+ } + trigger='click' + > */} + + + + + + + + {activeEdit.quoteid && !showQuoteContent && ( +
+ + {/* */} +
+ )} + {showQuoteContent && ( +
setQuoteContent(`
${e.target.innerHTML}
`)} + dangerouslySetInnerHTML={{ __html: generateQuoteContent(mailData) }}>
+ )} + + + ) +} +export default NewEmail