Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

⏳ 邮件文件夹

Browse Source
dev/ckeditor
Lei OT 1 month ago
parent 55e787b97f
commit b6903c7a9d
6 changed files with 647 additions and 498 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape Escape View File

@ -38,3 +38,4 @@ schema*
vonage-client* vonage-client*
**/test **/test
*.bak

66
src/actions/EmailActions.js
Unescape Escape View File

@ -142,6 +142,72 @@ export const fetchEmailBindOrderAction = async (params) => {
* @param {object} { opi_sn } * @param {object} { opi_sn }
*/ */
export const getEmailDirAction = async (params = { opi_sn: '' }) => { export const getEmailDirAction = async (params = { opi_sn: '' }) => {
return [
{
"MDR_SN": 1474,
"MDR_Name": "收件箱",
"MDR_ParentSN": 1,
"MDR_Type": 1,
"MDR_Order": 1
},
{
"MDR_SN": 1475,
"MDR_Name": "未读邮件",
"MDR_ParentSN": 1,
"MDR_Type": 2,
"MDR_Order": 2
},
{
"MDR_SN": 1476,
"MDR_Name": "已发邮件",
"MDR_ParentSN": 1,
"MDR_Type": 3,
"MDR_Order": 3
},
{
"MDR_SN": 1477,
"MDR_Name": "待发邮件",
"MDR_ParentSN": 1,
"MDR_Type": 4,
"MDR_Order": 4
},
{
"MDR_SN": 1478,
"MDR_Name": "草稿",
"MDR_ParentSN": 1,
"MDR_Type": 5,
"MDR_Order": 5
},
{
"MDR_SN": 1479,
"MDR_Name": "垃圾邮件",
"MDR_ParentSN": 1,
"MDR_Type": 6,
"MDR_Order": 6
},
{
"MDR_SN": 1480,
"MDR_Name": "已处理邮件",
"MDR_ParentSN": 1,
"MDR_Type": 7,
"MDR_Order": 7
},
{
"MDR_SN": 1504,
"MDR_Name": "客户信息模板",
"MDR_ParentSN": 1,
"MDR_Type": 0,
"MDR_Order": 100
},
{
"MDR_SN": 1505,
"MDR_Name": "客户信息模板",
"MDR_ParentSN": 1474,
"MDR_Type": 0,
"MDR_Order": 100
}
];
const { errcode, result } = await fetchJSON(`${EMAIL_HOST}/email/dir`, params); const { errcode, result } = await fetchJSON(`${EMAIL_HOST}/email/dir`, params);
return errcode === 0 ? [] : result; return errcode === 0 ? [] : result;
} ; } ;

1
src/assets/icons/mail-unread-fill.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.8032 8.4928C19.4663 8.81764 20.2118 9 21 9C21.3425 9 21.6769 8.96557 22 8.89998V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H16.1C16.0344 3.32311 16 3.65753 16 4C16 5.23672 16.449 6.36857 17.1929 7.24142L12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L18.8032 8.4928ZM21 7C19.3431 7 18 5.65685 18 4C18 2.34315 19.3431 1 21 1C22.6569 1 24 2.34315 24 4C24 5.65685 22.6569 7 21 7Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 539 B

1
src/assets/icons/mail-unread-line.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.1 3C16.0344 3.32311 16 3.65753 16 4C16 4.34247 16.0344 4.67689 16.1 5H4.51146L12.0619 11.662L17.1098 7.14141C17.5363 7.66888 18.0679 8.10787 18.6728 8.42652L12.0718 14.338L4 7.21594V19H20V8.89998C20.3231 8.96557 20.6575 9 21 9C21.3425 9 21.6769 8.96557 22 8.89998V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H16.1ZM21 1C22.6569 1 24 2.34315 24 4C24 5.65685 22.6569 7 21 7C19.3431 7 18 5.65685 18 4C18 2.34315 19.3431 1 21 1Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 572 B

2
src/components/Icons.jsx
Unescape Escape View File

@ -15,6 +15,7 @@ import EditLineSVG from '@/assets/icons/quill-pen-line.svg?react';
import MailDownloadLineSVG from '@/assets/icons/mail-download-line.svg?react'; import MailDownloadLineSVG from '@/assets/icons/mail-download-line.svg?react';
import MailAddLineSVG from '@/assets/icons/mail-add-line.svg?react'; import MailAddLineSVG from '@/assets/icons/mail-add-line.svg?react';
import MailCheckSVG from '@/assets/icons/mail-check-line.svg?react'; import MailCheckSVG from '@/assets/icons/mail-check-line.svg?react';
import MailUnreadSVG from '@/assets/icons/mail-unread-line.svg?react';
import TextSVG from '@/assets/icons/text.svg?react'; import TextSVG from '@/assets/icons/text.svg?react';
@ -32,6 +33,7 @@ export const EditIcon = (props) => <Icon component={EditLineSVG} {...props} />;
export const MailDownloadIcon = (props) => <Icon component={MailDownloadLineSVG} {...props} />; export const MailDownloadIcon = (props) => <Icon component={MailDownloadLineSVG} {...props} />;
export const MailAddloadIcon = (props) => <Icon component={MailAddLineSVG} {...props} />; export const MailAddloadIcon = (props) => <Icon component={MailAddLineSVG} {...props} />;
export const MailCheckIcon = (props) => <Icon component={MailCheckSVG} {...props} />; export const MailCheckIcon = (props) => <Icon component={MailCheckSVG} {...props} />;
export const MailUnreadIcon = (props) => <Icon component={MailUnreadSVG} {...props} />;
export const TextIcon = (props) => <Icon component={TextSVG} {...props} />; export const TextIcon = (props) => <Icon component={TextSVG} {...props} />;

578
src/views/orders/Follow.jsx
Unescape Escape View File

@ -3,7 +3,7 @@ import useAuthStore from '@/stores/AuthStore'
import { PERM_IMPORT_EMAIL } from '@/stores/AuthStore' import { PERM_IMPORT_EMAIL } from '@/stores/AuthStore'
import useFormStore from '@/stores/FormStore' import useFormStore from '@/stores/FormStore'
import { useOrderStore } from '@/stores/OrderStore' import { useOrderStore } from '@/stores/OrderStore'
import { copy, isNotEmpty, isEmpty } from '@/utils/commons' import { copy, isNotEmpty, isEmpty, groupBy, cloneDeep, sortBy, sortArrayByOrder } from '@/utils/commons'
import { import {
WhatsAppOutlined, WhatsAppOutlined,
ImportOutlined, ImportOutlined,
@ -17,7 +17,8 @@ import {
SaveOutlined, SaveOutlined,
PlusOutlined, PlusOutlined,
SearchOutlined, SearchOutlined,
ReloadOutlined,ReadOutlined, ReloadOutlined,
ReadOutlined,
CompassOutlined, CompassOutlined,
CheckSquareTwoTone, CheckSquareTwoTone,
CarryOutTwoTone, CarryOutTwoTone,
@ -29,22 +30,61 @@ import {
FolderTwoTone, FolderTwoTone,
CalendarTwoTone, CalendarTwoTone,
CalendarOutlined, CalendarOutlined,
HeartTwoTone, MoneyCollectTwoTone HeartTwoTone,
MoneyCollectTwoTone, FolderOutlined, DeleteOutlined,
SendOutlined,
ClockCircleOutlined,
FormOutlined,
} from '@ant-design/icons' } from '@ant-design/icons'
import { App, Badge, Empty, Flex, Button, Drawer , Space, Radio, Table, Tabs, Divider, Tag, Tooltip, List, Dropdown , Segmented, Tree, Typography, Input, Descriptions, Checkbox, Layout, Row, Col } from 'antd' import {
App,
Badge,
Empty,
Flex,
Button,
Drawer,
Space,
Radio,
Table,
Tabs,
Divider,
Tag,
Tooltip,
List,
Dropdown,
Segmented,
Tree,
Typography,
Input,
Descriptions,
Checkbox,
Layout,
Row,
Col,
} from 'antd'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { useShallow } from 'zustand/react/shallow' import { useShallow } from 'zustand/react/shallow'
import { UNREAD_MARK } from '@/actions/ConversationActions' import { UNREAD_MARK } from '@/actions/ConversationActions'
import AdvanceSearchForm from './AdvanceSearchForm' import AdvanceSearchForm from './AdvanceSearchForm'
import EmailDetailInline from '../Conversations/Online/Components/EmailDetailInline' import EmailDetailInline from '../Conversations/Online/Components/EmailDetailInline'
import { getEmailDirAction } from '@/actions/EmailActions'
function OrderGroupTable({ formValues }) { const EmailDirTypeIcons = {
'0': { component: FolderOutlined, color: '#ffe78f', className: 'text-blue-500' },
'1': { component: InboxIcon, color: '', className: 'text-indigo-500' },
'2': { component: MailUnreadIcon, color: '', className: 'text-indigo-500' },
'3': { component: SendPlaneFillIcon, color: '', className: 'text-primary' },
'4': { component: ClockCircleOutlined, color: '', className: 'text-yellow-500' },
'5': { component: FormOutlined, color: '', className: 'text-blue-500' },
'6': { component: DeleteOutlined, color: '', className: 'text-red-500' },
'7': { component: MailCheckIcon, color: '', className: 'text-yellow-600' },
}
const deptMap = new Map([ const deptMap = new Map([
['1', 'CH直销组'], ['1', 'CH'], // CH直销组
['2', 'CH大客户组'], ['2', 'CH大客户组'],
['7', '市场推广'], ['7', '市场推广'],
['8', '德语市场'], ['8', '德语市场'],
@ -66,31 +106,30 @@ function OrderGroupTable({ formValues }) {
['25', '上海站'], ['25', '上海站'],
['26', '北京站'], ['26', '北京站'],
['27', '西藏站'], ['27', '西藏站'],
['28', 'AH亚洲项目组'], ['28', 'AH'], // AH亚洲项目组
['29', 'DMC地接组'], ['29', 'DMC地接组'],
['30', 'Trippest项目组'], ['30', 'Trippest项目组'], //
['31', '花梨鹰'], ['31', '花梨鹰'],
['32', 'Daytours板块'], ['32', 'Daytours板块'],
['33', 'GH项目组'], ['33', 'GH'], // GH项目组
['34', 'trippest网站'], ['34', 'trippest网站'],
['35', 'newsletter营销'], ['35', 'newsletter营销'],
]) ])
} function OrderGroupTable({ formValues }) {}
function Follow() { function Follow() {
const orderList = useOrderStore((state) => state.orderList)
const fetchOrderList = useOrderStore((state) => state.fetchOrderList)
const [openMail, setOpenMail] = useState(false); const [openOrder, setOpenOrder] = useState(false)
const [mailSubject, setSubject] = useState(''); const [collapsed, setCollapsed] = useState(false)
const [openOrder, setOpenOrder] = useState(false);
const [collapsed, setCollapsed] = useState(false)
const [formValues, setFormValues] = useFormStore(useShallow((state) => [state.orderFollowForm, state.setOrderFollowForm])) const [formValues, setFormValues] = useFormStore(useShallow((state) => [state.orderFollowForm, state.setOrderFollowForm]))
const [advanceChecked, toggleAdvance] = useFormStore(useShallow((state) => [state.orderFollowAdvanceChecked, state.setOrderFollowAdvanceChecked])) const [advanceChecked, toggleAdvance] = useFormStore(useShallow((state) => [state.orderFollowAdvanceChecked, state.setOrderFollowAdvanceChecked]))
const batchImportEmailMessage = useOrderStore((state) => state.batchImportEmailMessage) const batchImportEmailMessage = useOrderStore((state) => state.batchImportEmailMessage)
const [isPermitted] = useAuthStore((state) => [state.isPermitted]) const [loginUser, isPermitted] = useAuthStore((state) => [state.loginUser, state.isPermitted])
const handleImportEmail = useCallback(() => { const handleImportEmail = useCallback(() => {
batchImportEmailMessage() batchImportEmailMessage()
@ -100,17 +139,69 @@ const [collapsed, setCollapsed] = useState(false)
setFormValues({ ...values, type: 'advance' }) setFormValues({ ...values, type: 'advance' })
}, []) }, [])
const [activeEmailId, setActiveEmailId] = useState(0); const [activeEmailId, setActiveEmailId] = useState(0)
const [mailboxDir, setMailboxDir] = useState([]);
const DirTypeIcon = ({ type }) => {
const Icon = EmailDirTypeIcons[type || '0'].component
const className = EmailDirTypeIcons[type || '0'].className
return <Icon className={className} />
}
const getOPIEmailDir = async (opi_sn=0) => {
const x = await getEmailDirAction(opi_sn)
const mailboxSort = x.sort(sortBy('MDR_Order'));
const dirs = mailboxSort.map((ele) => {
return { ...ele, key: ele.MDR_SN, title: ele.MDR_Name, icon: <DirTypeIcon type={ele.MDR_Type} /> }
})
setMailboxDir(dirs)
}
const [stickyTreeData, setStickyTreeData] = useState([{ title: '今日任务', key: 'today' }, { title: '待办任务', key: 'todo' }]);
const [deiStickyTree, setDeiStickyTree] = useState({});
useEffect(() => {
fetchOrderList({ type: 'today' }, loginUser)
getOPIEmailDir();
return () => {}
}, [])
// 1新订单；2未读消息；3需一催；4需二催；5需三催；6未处理邮件；入境提醒coli_ordertype=7，余款提醒coli_ordertype=8
useEffect(() => {
const byDEI = groupBy(orderList, 'OPI_DEI_SN');
// console.log(byDEI, 'byDEI')
const byState = Object.keys(byDEI).reduce((acc, key) => {
// const stickyIndex0 = byDEI[key].filter(ele => [1, 2, 6].includes(ele.COLI_StateCode))
// const stickyIndex1 = byDEI[key].filter(ele => ![1, 2, 6].includes(ele.COLI_StateCode))
const sticky = groupBy(byDEI[key], ele => [1, 2, 6].includes(ele.COLI_StateCode) ? 0 : 1);
// const sticky = groupBy(byDEI[key], ele => [1, 2, 6].includes(ele.COLI_StateCode) ? 'today' : 'todo');
// console.log(sticky, ';;;;');
const deiName = deptMap.get(`${key}`);
const treeNode = [{ title: '今日任务', key: 'today', icon: <StarTwoTone />,children: (sticky[0]||[]).map(o => ({...o, key: o.COLI_SN, title: `(${o.COLI_State})${o.COLI_ID}`})) }, { title: '待办任务', key: 'todo', icon: <CalendarTwoTone />,children: (sticky[1] || []).map(o => ({...o, key: o.COLI_SN, title: `(${o.COLI_State})${o.COLI_ID}`})) }];
// { key, title: deiName, children: sticky[0] };
return {...acc, [key]: treeNode};
}, {});
setDeiStickyTree(byState);
console.log(byState, 'byState')
return () => {
}
}, [orderList])
return ( return (
<> <>
<Layout> <Layout>
<Layout.Sider width='300' style={{ <Layout.Sider
width='300'
style={{
backgroundColor: '#fff', backgroundColor: '#fff',
}}> }}>
<Flex justify='start' align='start' vertical> <Flex justify='start' align='start' vertical>
<Segmented className='w-full' block shape='round' options={['AH', 'CH', 'GH']} /> <Segmented className='w-full' block shape='round' options={['AH', 'CH', 'GH']} />
<Tree <Tree blockNode
showIcon showIcon
showLine showLine
onSelect={(selectedKeys, e) => { onSelect={(selectedKeys, e) => {
@ -118,130 +209,134 @@ const [collapsed, setCollapsed] = useState(false)
}} }}
defaultExpandedKeys={['0-0-today-task', '0-1-todo-list']} defaultExpandedKeys={['0-0-today-task', '0-1-todo-list']}
defaultSelectedKeys={['0-0-0']} defaultSelectedKeys={['0-0-0']}
treeData={[ treeData={[...deiStickyTree['28']||deiStickyTree['30']||[], ...mailboxDir]
{ // [
title: '今日任务', // {
key: '0-0-today-task', // title: '今日任务',
icon: <StarTwoTone />, // key: '0-0-today-task',
children: [ // icon: <StarTwoTone />,
{ // children: [
title: '(新订单)HXZ240913082', // {
key: '0-0-0', // title: '(新订单)HXZ240913082',
}, // key: '0-0-0',
{ // },
title: '(老邮件)HXZ241017089', // {
key: '0-0-1', // title: '(老邮件)HXZ241017089',
}, // key: '0-0-1',
], // },
}, // ],
{ // },
title: '待办任务', // {
key: '0-1-todo-list', // title: '待办任务',
icon: <CalendarTwoTone />, // key: '0-1-todo-list',
children: [ // icon: <CalendarTwoTone />,
{ // children: [
title: '(一催)HXZ250213117', // {
key: '0-1-0', // title: '(一催)HXZ250213117',
}, // key: '0-1-0',
{ // },
title: '(二催)HXZ250213117', // {
key: '0-1-1', // title: '(二催)HXZ250213117',
}, // key: '0-1-1',
{ // },
title: '(三催)HXZ250213117', // {
key: '0-1-2', // title: '(三催)HXZ250213117',
}, // key: '0-1-2',
{ // },
title: '(余款收付)HXZ250209048', // {
key: '0-1-3', // title: '(余款收付)HXZ250209048',
}, // key: '0-1-3',
{ // },
title: '(入境提醒)HXZ250209048', // {
key: '0-1-4', // title: '(入境提醒)HXZ250209048',
}, // key: '0-1-4',
], // },
}, // ],
{ // },
title: '草稿', // {
key: '0-2-draft', // title: '草稿',
icon: <BookTwoTone />, // key: '0-2-draft',
}, // icon: <BookTwoTone />,
{ // },
title: '收件箱', // {
key: '0-3-inbox', // title: '收件箱',
icon: <MailTwoTone />, // key: '0-3-inbox',
children: [ // icon: <MailTwoTone />,
{ // children: [
title: '1月', // {
key: '0-3-0', // title: '1月',
icon: <FolderTwoTone />, // key: '0-3-0',
}, // icon: <FolderTwoTone />,
{ // },
title: '2月', // {
key: '0-3-1', // title: '2月',
icon: <FolderTwoTone />, // key: '0-3-1',
}, // icon: <FolderTwoTone />,
{ // },
title: '3月', // {
key: '0-3-2', // title: '3月',
icon: <FolderTwoTone />, // key: '0-3-2',
}, // icon: <FolderTwoTone />,
{ // },
title: '4月', // {
key: '0-3-3', // title: '4月',
icon: <FolderTwoTone />, // key: '0-3-3',
}, // icon: <FolderTwoTone />,
{ // },
title: '5月', // {
key: '0-3-4', // title: '5月',
icon: <FolderTwoTone />, // key: '0-3-4',
children: [ // icon: <FolderTwoTone />,
{ // children: [
title: 'Albee240422193452', // {
key: 'Albee240422193452', // title: 'Albee240422193452',
}, // key: 'Albee240422193452',
{ // },
title: 'Albee240422193285', // {
key: 'Albee240422193285', // title: 'Albee240422193285',
}, // key: 'Albee240422193285',
{ // },
title: 'Albee240422193752', // {
key: 'Albee240422193752', // title: 'Albee240422193752',
}, // key: 'Albee240422193752',
{ // },
title: 'Albee2404221934583', // {
key: 'Albee2404221934583', // title: 'Albee2404221934583',
}, // key: 'Albee2404221934583',
{ // },
title: 'Albee2404221937836', // {
key: 'Albee2404221937836', // title: 'Albee2404221937836',
}, // key: 'Albee2404221937836',
], // },
}, // ],
], // },
}, // ],
{ // },
title: '已发送', // {
key: '0-4-sent', // title: '已发送',
icon: <RightSquareTwoTone />, // key: '0-4-sent',
}, // icon: <RightSquareTwoTone />,
{ // },
title: '已处理', // {
key: '0-5-completed', // title: '已处理',
icon: <CheckSquareTwoTone />, // key: '0-5-completed',
}, // icon: <CheckSquareTwoTone />,
]} // },
// ]
}
/> />
</Flex></Layout.Sider> </Flex>
</Layout.Sider>
<Layout.Content style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)', minWidth: '360px' }}> <Layout.Content style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)', minWidth: '360px' }}>
<Row>
<Row>
<Col className='bg-white' span={14}> <Col className='bg-white' span={14}>
<div className='bg-white h-auto px-1 flex gap-1 items-center'> <div className='bg-white h-auto px-1 flex gap-1 items-center'>
<Dropdown.Button
<Dropdown.Button className='w-auto' placement="bottom" arrow type={'primary'} menu={{ className='w-auto'
placement='bottom'
arrow
type={'primary'}
menu={{
items: [ items: [
{ {
key: '1', key: '1',
@ -250,7 +345,8 @@ const [collapsed, setCollapsed] = useState(false)
{ {
key: '2', key: '2',
label: '一催模板二，询问客人是否修改行程', label: '一催模板二，询问客人是否修改行程',
},{ },
{
type: 'divider', type: 'divider',
}, },
{ {
@ -260,15 +356,22 @@ const [collapsed, setCollapsed] = useState(false)
{ {
key: '4', key: '4',
label: '二催模板二，表达服务的意识', label: '二催模板二，表达服务的意识',
},{ },
{
type: 'divider', type: 'divider',
}, },
{ {
key: '5', key: '5',
label: '三催模板三，强调价格有效期', label: '三催模板三，强调价格有效期',
}], },
onClick: (item)=> {console.info('menu', item)}, ],
}} onClick={() => {console.info('新邮件')}}> onClick: (item) => {
console.info('menu', item)
},
}}
onClick={() => {
console.info('新邮件')
}}>
新邮件 新邮件
</Dropdown.Button> </Dropdown.Button>
<Input.Search <Input.Search
@ -280,28 +383,29 @@ const [collapsed, setCollapsed] = useState(false)
}} }}
placeholder={`邮件主题`} placeholder={`邮件主题`}
/> />
<Button onClick={() => {}} >高级搜索</Button> <Button onClick={() => {}}>高级搜索</Button>
</div> </div>
<div className='bg-white overflow-y-auto' <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
style={{height: 'calc(100vh - 198px)'}}> <List
<List
// header={null} // header={null}
header={ <Flex wrap gap="small"> header={
<Tooltip title="选择"> <Flex wrap gap='small'>
<Tooltip title='选择'>
<Checkbox></Checkbox> <Checkbox></Checkbox>
</Tooltip> </Tooltip>
<Tooltip title="标记已读"> <Tooltip title='标记已读'>
<Button shape="circle" type="text" size='small' icon={<ReadOutlined />} /> <Button shape='circle' type='text' size='small' icon={<ReadOutlined />} />
</Tooltip> </Tooltip>
<Tooltip title="已处理"> <Tooltip title='已处理'>
<Button shape="circle" type="text" size='small' icon={<CheckSquareOutlined />} /> <Button shape='circle' type='text' size='small' icon={<CheckSquareOutlined />} />
</Tooltip> </Tooltip>
<Tooltip title="刷新"> <Tooltip title='刷新'>
<Button shape="circle" type="text" size='small' icon={<ReloadOutlined />} /> <Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} />
</Tooltip> </Tooltip>
</Flex>} </Flex>
itemLayout="vertical" }
size="large" itemLayout='vertical'
size='large'
pagination={false} pagination={false}
dataSource={[ dataSource={[
{ {
@ -409,22 +513,26 @@ const [collapsed, setCollapsed] = useState(false)
country: 'Thailand', country: 'Thailand',
}, },
]} ]}
renderItem={item => ( renderItem={(item) => (
<List.Item className={item.key===activeEmailId?`bg-blue-100`:''} <List.Item
className={item.key === activeEmailId ? `bg-blue-100` : ''}
key={item.title} key={item.title}
// actions={[ // actions={[
// <a key="list-vertical-star-o">回复</a>, // <a key="list-vertical-star-o">回复</a>,
// <a key="list-vertical-refor">转发</a>, // <a key="list-vertical-refor">转发</a>,
// ]} // ]}
extra={ extra={<Checkbox></Checkbox>}>
<Checkbox></Checkbox>
}
>
<List.Item.Meta <List.Item.Meta
className='cursor-pointer' className='cursor-pointer'
onClick={() => {console.info('item: ', item); setActiveEmailId(item.key)}} onClick={() => {
title={<a href={item.href} onClick={() => setSubject(item.title)}>{item.title}</a>} console.info('item: ', item)
setActiveEmailId(item.key)
}}
title={
<a href={item.href} onClick={() => {}}>
{item.title}
</a>
}
description={item.description + ' ' + item.mailDate} description={item.description + ' ' + item.mailDate}
/> />
{item.content}LSS250501006, Thailand {item.content}LSS250501006, Thailand
@ -433,20 +541,28 @@ const [collapsed, setCollapsed] = useState(false)
/> />
</div> </div>
</Col> </Col>
<Col span={10} className='' style={{height: 'calc(100vh - 166px)'}}> <Col span={10} className='' style={{ height: 'calc(100vh - 166px)' }}>
<EmailDetailInline mailID={activeEmailId || 5291957} emailMsg={{}} variant={'outline'} size={'small'} /> <EmailDetailInline mailID={activeEmailId || 5291957} emailMsg={{}} variant={'outline'} size={'small'} />
{/* <EmailDetailInline mailID={5277561} emailMsg={{}} variant={'outline'} size={'small'} /> */} {/* <EmailDetailInline mailID={5277561} emailMsg={{}} variant={'outline'} size={'small'} /> */}
</Col> </Col>
</Row> </Row>
</Layout.Content> </Layout.Content>
<Layout.Sider zeroWidthTriggerStyle={{top: '30px'}} width='280' theme={'light'} style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)' }} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)} collapsedWidth={0} reverseArrow={true}> <Layout.Sider
zeroWidthTriggerStyle={{ top: '30px' }}
width='280'
theme={'light'}
style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)' }}
collapsible
collapsed={collapsed}
onCollapse={(value) => setCollapsed(value)}
collapsedWidth={0}
reverseArrow={true}>
<Flex gap={6} vertical={true} justify='space-between'> <Flex gap={6} vertical={true} justify='space-between'>
<Typography.Text> <Typography.Text>
<FieldNumberOutlined className='pr-1' /> <FieldNumberOutlined className='pr-1' />
LSS250501006 LSS250501006
<HeartTwoTone twoToneColor="#eb2f96"/> <HeartTwoTone twoToneColor='#eb2f96' />
<MoneyCollectTwoTone twoToneColor="#eb2f96" /> <MoneyCollectTwoTone twoToneColor='#eb2f96' />
</Typography.Text> </Typography.Text>
<Typography.Text> <Typography.Text>
<UserOutlined className=' pr-1' /> <UserOutlined className=' pr-1' />
@ -485,98 +601,58 @@ const [collapsed, setCollapsed] = useState(false)
泰国马来水灯节 泰国马来水灯节
</Typography.Text> </Typography.Text>
</Flex> </Flex>
<Divider orientation="left"> <Divider orientation='left'>
<Typography.Text strong>表单信息</Typography.Text> <Typography.Text strong>表单信息</Typography.Text>
<FileAddOutlined className='pl-1' /> <FileAddOutlined className='pl-1' />
</Divider> </Divider>
<p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: 'orderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detail' }}></p> <p
<Space.Compact block> className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap'
<Input addonBefore="附加信息" /> dangerouslySetInnerHTML={{
__html:
'orderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detail',
}}></p>
<Space.Compact block>
<Input addonBefore='附加信息' />
<Button icon={<SaveOutlined />} /> <Button icon={<SaveOutlined />} />
</Space.Compact> </Space.Compact>
<Flex gap="small"> <Flex gap='small'>
<Button color="cyan" variant="outlined" onClick={() => { <Button
color='cyan'
variant='outlined'
onClick={() => {
setOpenOrder(true) setOpenOrder(true)
}}> }}>
订单状态 订单状态
</Button> </Button>
</Flex></Layout.Sider> </Flex>
</Layout.Sider>
</Layout> </Layout>
<Drawer
title={mailSubject}
placement="right"
// getContainer={false}
size={'large'}
mask={false}
maskClosable={true}
open={openMail}
onClose={() => setOpenMail(false)}
extra={
<Space>
<Button color="primary" variant="solid">
回复
</Button>
<Button color="primary" variant="outlined">
回复全部
</Button>
<Button color="primary" variant="outlined" >
转发
</Button>
<Button color="cyan" variant="outlined">
已处理
</Button>
</Space>
}
footer={
<Space>footer</Space>
}
>
<Descriptions column={1} title="Your Thailand Private tour by 'Asia Highlights' 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到" items={[
{
key: '1',
label: '发件人',
children: '"阿里邮箱" <no-reply@mailsupport.aliyun.com>',
},
{
key: '2',
label: '收件人',
children: '<liaoyijun@chinahighlights.com>',
},
{
key: '3',
label: '发送日期',
children: '2025-05-16 14:11',
},
]} />
<p>{Math.random().toString(36).substring(2, 9)}Some contents...</p>
<p>Some {Math.random().toString(36).substring(2, 9)}contents...</p>
<p>Some contents...{Math.random().toString(36).substring(2, 9)}</p>
</Drawer>
<Drawer <Drawer
title={'订单状态'} title={'订单状态'}
placement="right" placement='right'
// getContainer={false} // getContainer={false}
size={'large'} size={'large'}
mask={false} mask={false}
maskClosable={true} maskClosable={true}
open={openOrder} open={openOrder}
onClose={() => setOpenOrder(false)} onClose={() => setOpenOrder(false)}>
> <Divider orientation='left'>
<Divider orientation="left">
<Typography.Text strong>是否重要</Typography.Text> <Typography.Text strong>是否重要</Typography.Text>
</Divider> </Divider>
<Radio.Group options={[ <Radio.Group
options={[
{ label: '重点', value: '1' }, { label: '重点', value: '1' },
{ label: '次重点', value: '2' }, { label: '次重点', value: '2' },
{ label: '一般', value: '3' }, { label: '一般', value: '3' },
]} /> ]}
/>
<Divider orientation="left"> <Divider orientation='left'>
<Typography.Text strong>状态</Typography.Text> <Typography.Text strong>状态</Typography.Text>
</Divider> </Divider>
<Radio.Group options={[ <Radio.Group
options={[
{ label: '新订单', value: '4' }, { label: '新订单', value: '4' },
{ label: '报价中', value: '5' }, { label: '报价中', value: '5' },
{ label: '以后联系', value: '6' }, { label: '以后联系', value: '6' },
@ -585,21 +661,23 @@ const [collapsed, setCollapsed] = useState(false)
{ label: '丢失', value: '9' }, { label: '丢失', value: '9' },
{ label: '取消', value: '10' }, { label: '取消', value: '10' },
{ label: '未报价', value: '11' }, { label: '未报价', value: '11' },
]} /> ]}
/>
<Divider orientation="left"> <Divider orientation='left'>
<Typography.Text strong> 催信</Typography.Text> <Typography.Text strong> 催信</Typography.Text>
</Divider> </Divider>
<Checkbox.Group options={[ <Checkbox.Group
options={[
{ label: '一催', value: 'Apple', className: 'label-1' }, { label: '一催', value: 'Apple', className: 'label-1' },
{ label: '二催', value: 'Pear', className: 'label-2' }, { label: '二催', value: 'Pear', className: 'label-2' },
{ label: '三催', value: 'Orange', className: 'label-3' }, { label: '三催', value: 'Orange', className: 'label-3' },
{ label: '重点团', value: '2233342', className: 'label-3' }, { label: '重点团', value: '2233342', className: 'label-3' },
{ label: '已发 travel advisor survey', value: '43535', className: 'label-3' }, { label: '已发 travel advisor survey', value: '43535', className: 'label-3' },
]} defaultValue={['Apple']} /> ]}
defaultValue={['Apple']}
/>
</Drawer> </Drawer>
</> </>
) )
} }

Write Preview
Loading…
Cancel
Save