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*
**/test
*.bak

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

@ -142,6 +142,72 @@ export const fetchEmailBindOrderAction = async (params) => {
* @param {object} { 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);
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 MailAddLineSVG from '@/assets/icons/mail-add-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';
@ -32,6 +33,7 @@ export const EditIcon = (props) => <Icon component={EditLineSVG} {...props} />;
export const MailDownloadIcon = (props) => <Icon component={MailDownloadLineSVG} {...props} />;
export const MailAddloadIcon = (props) => <Icon component={MailAddLineSVG} {...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} />;

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 useFormStore from '@/stores/FormStore'
import { useOrderStore } from '@/stores/OrderStore'
import { copy, isNotEmpty, isEmpty } from '@/utils/commons'
import { copy, isNotEmpty, isEmpty, groupBy, cloneDeep, sortBy, sortArrayByOrder } from '@/utils/commons'
import {
WhatsAppOutlined,
ImportOutlined,
@ -17,7 +17,8 @@ import {
SaveOutlined,
PlusOutlined,
SearchOutlined,
ReloadOutlined,ReadOutlined,
ReloadOutlined,
ReadOutlined,
CompassOutlined,
CheckSquareTwoTone,
CarryOutTwoTone,
@ -29,22 +30,61 @@ import {
FolderTwoTone,
CalendarTwoTone,
CalendarOutlined,
HeartTwoTone, MoneyCollectTwoTone
HeartTwoTone,
MoneyCollectTwoTone, FolderOutlined, DeleteOutlined,
SendOutlined,
ClockCircleOutlined,
FormOutlined,
} 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 { useCallback, useEffect, useState } from 'react'
import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
import { Link } from 'react-router-dom'
import { useShallow } from 'zustand/react/shallow'
import { UNREAD_MARK } from '@/actions/ConversationActions'
import AdvanceSearchForm from './AdvanceSearchForm'
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([
['1', 'CH直销组'],
const deptMap = new Map([
['1', 'CH'], // CH直销组
['2', 'CH大客户组'],
['7', '市场推广'],
['8', '德语市场'],
@ -66,31 +106,30 @@ function OrderGroupTable({ formValues }) {
['25', '上海站'],
['26', '北京站'],
['27', '西藏站'],
['28', 'AH亚洲项目组'],
['28', 'AH'], // AH亚洲项目组
['29', 'DMC地接组'],
['30', 'Trippest项目组'],
['30', 'Trippest项目组'], //
['31', '花梨鹰'],
['32', 'Daytours板块'],
['33', 'GH项目组'],
['33', 'GH'], // GH项目组
['34', 'trippest网站'],
['35', 'newsletter营销'],
])
])
}
function OrderGroupTable({ formValues }) {}
function Follow() {
const orderList = useOrderStore((state) => state.orderList)
const fetchOrderList = useOrderStore((state) => state.fetchOrderList)
const [openMail, setOpenMail] = useState(false);
const [mailSubject, setSubject] = useState('');
const [openOrder, setOpenOrder] = useState(false);
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 [advanceChecked, toggleAdvance] = useFormStore(useShallow((state) => [state.orderFollowAdvanceChecked, state.setOrderFollowAdvanceChecked]))
const batchImportEmailMessage = useOrderStore((state) => state.batchImportEmailMessage)
const [isPermitted] = useAuthStore((state) => [state.isPermitted])
const [loginUser, isPermitted] = useAuthStore((state) => [state.loginUser, state.isPermitted])
const handleImportEmail = useCallback(() => {
batchImportEmailMessage()
@ -100,17 +139,69 @@ const [collapsed, setCollapsed] = useState(false)
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 (
<>
<Layout>
<Layout.Sider width='300' style={{
<Layout.Sider
width='300'
style={{
backgroundColor: '#fff',
}}>
}}>
<Flex justify='start' align='start' vertical>
<Segmented className='w-full' block shape='round' options={['AH', 'CH', 'GH']} />
<Tree
<Tree blockNode
showIcon
showLine
onSelect={(selectedKeys, e) => {
@ -118,130 +209,134 @@ const [collapsed, setCollapsed] = useState(false)
}}
defaultExpandedKeys={['0-0-today-task', '0-1-todo-list']}
defaultSelectedKeys={['0-0-0']}
treeData={[
{
title: '今日任务',
key: '0-0-today-task',
icon: <StarTwoTone />,
children: [
{
title: '(新订单)HXZ240913082',
key: '0-0-0',
},
{
title: '(老邮件)HXZ241017089',
key: '0-0-1',
},
],
},
{
title: '待办任务',
key: '0-1-todo-list',
icon: <CalendarTwoTone />,
children: [
{
title: '(一催)HXZ250213117',
key: '0-1-0',
},
{
title: '(二催)HXZ250213117',
key: '0-1-1',
},
{
title: '(三催)HXZ250213117',
key: '0-1-2',
},
{
title: '(余款收付)HXZ250209048',
key: '0-1-3',
},
{
title: '(入境提醒)HXZ250209048',
key: '0-1-4',
},
],
},
{
title: '草稿',
key: '0-2-draft',
icon: <BookTwoTone />,
},
{
title: '收件箱',
key: '0-3-inbox',
icon: <MailTwoTone />,
children: [
{
title: '1月',
key: '0-3-0',
icon: <FolderTwoTone />,
},
{
title: '2月',
key: '0-3-1',
icon: <FolderTwoTone />,
},
{
title: '3月',
key: '0-3-2',
icon: <FolderTwoTone />,
},
{
title: '4月',
key: '0-3-3',
icon: <FolderTwoTone />,
},
{
title: '5月',
key: '0-3-4',
icon: <FolderTwoTone />,
children: [
{
title: 'Albee240422193452',
key: 'Albee240422193452',
},
{
title: 'Albee240422193285',
key: 'Albee240422193285',
},
{
title: 'Albee240422193752',
key: 'Albee240422193752',
},
{
title: 'Albee2404221934583',
key: 'Albee2404221934583',
},
{
title: 'Albee2404221937836',
key: 'Albee2404221937836',
},
],
},
],
},
{
title: '已发送',
key: '0-4-sent',
icon: <RightSquareTwoTone />,
},
{
title: '已处理',
key: '0-5-completed',
icon: <CheckSquareTwoTone />,
},
]}
treeData={[...deiStickyTree['28']||deiStickyTree['30']||[], ...mailboxDir]
// [
// {
// title: '今日任务',
// key: '0-0-today-task',
// icon: <StarTwoTone />,
// children: [
// {
// title: '(新订单)HXZ240913082',
// key: '0-0-0',
// },
// {
// title: '(老邮件)HXZ241017089',
// key: '0-0-1',
// },
// ],
// },
// {
// title: '待办任务',
// key: '0-1-todo-list',
// icon: <CalendarTwoTone />,
// children: [
// {
// title: '(一催)HXZ250213117',
// key: '0-1-0',
// },
// {
// title: '(二催)HXZ250213117',
// key: '0-1-1',
// },
// {
// title: '(三催)HXZ250213117',
// key: '0-1-2',
// },
// {
// title: '(余款收付)HXZ250209048',
// key: '0-1-3',
// },
// {
// title: '(入境提醒)HXZ250209048',
// key: '0-1-4',
// },
// ],
// },
// {
// title: '草稿',
// key: '0-2-draft',
// icon: <BookTwoTone />,
// },
// {
// title: '收件箱',
// key: '0-3-inbox',
// icon: <MailTwoTone />,
// children: [
// {
// title: '1月',
// key: '0-3-0',
// icon: <FolderTwoTone />,
// },
// {
// title: '2月',
// key: '0-3-1',
// icon: <FolderTwoTone />,
// },
// {
// title: '3月',
// key: '0-3-2',
// icon: <FolderTwoTone />,
// },
// {
// title: '4月',
// key: '0-3-3',
// icon: <FolderTwoTone />,
// },
// {
// title: '5月',
// key: '0-3-4',
// icon: <FolderTwoTone />,
// children: [
// {
// title: 'Albee240422193452',
// key: 'Albee240422193452',
// },
// {
// title: 'Albee240422193285',
// key: 'Albee240422193285',
// },
// {
// title: 'Albee240422193752',
// key: 'Albee240422193752',
// },
// {
// title: 'Albee2404221934583',
// key: 'Albee2404221934583',
// },
// {
// title: 'Albee2404221937836',
// key: 'Albee2404221937836',
// },
// ],
// },
// ],
// },
// {
// title: '已发送',
// key: '0-4-sent',
// icon: <RightSquareTwoTone />,
// },
// {
// title: '已处理',
// 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' }}>
<Row>
<Row>
<Col className='bg-white' span={14}>
<div className='bg-white h-auto px-1 flex gap-1 items-center'>
<Dropdown.Button className='w-auto' placement="bottom" arrow type={'primary'} menu={{
<Dropdown.Button
className='w-auto'
placement='bottom'
arrow
type={'primary'}
menu={{
items: [
{
key: '1',
@ -250,7 +345,8 @@ const [collapsed, setCollapsed] = useState(false)
{
key: '2',
label: '一催模板二，询问客人是否修改行程',
},{
},
{
type: 'divider',
},
{
@ -260,15 +356,22 @@ const [collapsed, setCollapsed] = useState(false)
{
key: '4',
label: '二催模板二，表达服务的意识',
},{
},
{
type: 'divider',
},
{
key: '5',
label: '三催模板三，强调价格有效期',
}],
onClick: (item)=> {console.info('menu', item)},
}} onClick={() => {console.info('新邮件')}}>
},
],
onClick: (item) => {
console.info('menu', item)
},
}}
onClick={() => {
console.info('新邮件')
}}>
新邮件
</Dropdown.Button>
<Input.Search
@ -280,28 +383,29 @@ const [collapsed, setCollapsed] = useState(false)
}}
placeholder={`邮件主题`}
/>
<Button onClick={() => {}} >高级搜索</Button>
<Button onClick={() => {}}>高级搜索</Button>
</div>
<div className='bg-white overflow-y-auto'
style={{height: 'calc(100vh - 198px)'}}>
<List
<div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
<List
// header={null}
header={ <Flex wrap gap="small">
<Tooltip title="选择">
header={
<Flex wrap gap='small'>
<Tooltip title='选择'>
<Checkbox></Checkbox>
</Tooltip>
<Tooltip title="标记已读">
<Button shape="circle" type="text" size='small' icon={<ReadOutlined />} />
<Tooltip title='标记已读'>
<Button shape='circle' type='text' size='small' icon={<ReadOutlined />} />
</Tooltip>
<Tooltip title="已处理">
<Button shape="circle" type="text" size='small' icon={<CheckSquareOutlined />} />
<Tooltip title='已处理'>
<Button shape='circle' type='text' size='small' icon={<CheckSquareOutlined />} />
</Tooltip>
<Tooltip title="刷新">
<Button shape="circle" type="text" size='small' icon={<ReloadOutlined />} />
<Tooltip title='刷新'>
<Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} />
</Tooltip>
</Flex>}
itemLayout="vertical"
size="large"
</Flex>
}
itemLayout='vertical'
size='large'
pagination={false}
dataSource={[
{
@ -409,22 +513,26 @@ const [collapsed, setCollapsed] = useState(false)
country: 'Thailand',
},
]}
renderItem={item => (
<List.Item className={item.key===activeEmailId?`bg-blue-100`:''}
renderItem={(item) => (
<List.Item
className={item.key === activeEmailId ? `bg-blue-100` : ''}
key={item.title}
// actions={[
// <a key="list-vertical-star-o">回复</a>,
// <a key="list-vertical-refor">转发</a>,
// ]}
extra={
<Checkbox></Checkbox>
}
>
extra={<Checkbox></Checkbox>}>
<List.Item.Meta
className='cursor-pointer'
onClick={() => {console.info('item: ', item); setActiveEmailId(item.key)}}
title={<a href={item.href} onClick={() => setSubject(item.title)}>{item.title}</a>}
onClick={() => {
console.info('item: ', item)
setActiveEmailId(item.key)
}}
title={
<a href={item.href} onClick={() => {}}>
{item.title}
</a>
}
description={item.description + ' ' + item.mailDate}
/>
{item.content}LSS250501006, Thailand
@ -433,20 +541,28 @@ const [collapsed, setCollapsed] = useState(false)
/>
</div>
</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={5277561} emailMsg={{}} variant={'outline'} size={'small'} /> */}
</Col>
</Col>
</Row>
</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'>
<Typography.Text>
<FieldNumberOutlined className='pr-1' />
LSS250501006
<HeartTwoTone twoToneColor="#eb2f96"/>
<MoneyCollectTwoTone twoToneColor="#eb2f96" />
<HeartTwoTone twoToneColor='#eb2f96' />
<MoneyCollectTwoTone twoToneColor='#eb2f96' />
</Typography.Text>
<Typography.Text>
<UserOutlined className=' pr-1' />
@ -485,98 +601,58 @@ const [collapsed, setCollapsed] = useState(false)
泰国马来水灯节
</Typography.Text>
</Flex>
<Divider orientation="left">
<Divider orientation='left'>
<Typography.Text strong>表单信息</Typography.Text>
<FileAddOutlined className='pl-1' />
</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>
<Space.Compact block>
<Input addonBefore="附加信息" />
<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>
<Space.Compact block>
<Input addonBefore='附加信息' />
<Button icon={<SaveOutlined />} />
</Space.Compact>
<Flex gap="small">
<Button color="cyan" variant="outlined" onClick={() => {
<Flex gap='small'>
<Button
color='cyan'
variant='outlined'
onClick={() => {
setOpenOrder(true)
}}>
订单状态
</Button>
</Flex></Layout.Sider>
</Flex>
</Layout.Sider>
</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
title={'订单状态'}
placement="right"
placement='right'
// getContainer={false}
size={'large'}
mask={false}
maskClosable={true}
open={openOrder}
onClose={() => setOpenOrder(false)}
>
<Divider orientation="left">
onClose={() => setOpenOrder(false)}>
<Divider orientation='left'>
<Typography.Text strong>是否重要</Typography.Text>
</Divider>
<Radio.Group options={[
<Radio.Group
options={[
{ label: '重点', value: '1' },
{ label: '次重点', value: '2' },
{ label: '一般', value: '3' },
]} />
]}
/>
<Divider orientation="left">
<Divider orientation='left'>
<Typography.Text strong>状态</Typography.Text>
</Divider>
<Radio.Group options={[
<Radio.Group
options={[
{ label: '新订单', value: '4' },
{ label: '报价中', value: '5' },
{ label: '以后联系', value: '6' },
@ -585,21 +661,23 @@ const [collapsed, setCollapsed] = useState(false)
{ label: '丢失', value: '9' },
{ label: '取消', value: '10' },
{ label: '未报价', value: '11' },
]} />
]}
/>
<Divider orientation="left">
<Divider orientation='left'>
<Typography.Text strong> 催信</Typography.Text>
</Divider>
<Checkbox.Group options={[
<Checkbox.Group
options={[
{ label: '一催', value: 'Apple', className: 'label-1' },
{ label: '二催', value: 'Pear', className: 'label-2' },
{ label: '三催', value: 'Orange', className: 'label-3' },
{ label: '重点团', value: '2233342', className: 'label-3' },
{ label: '已发 travel advisor survey', value: '43535', className: 'label-3' },
]} defaultValue={['Apple']} />
]}
defaultValue={['Apple']}
/>
</Drawer>
</>
)
}

Write Preview
Loading…
Cancel
Save