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

feat: 独立邮件箱组件

Browse Source
dev/ckeditor
LiaoYijun 4 weeks ago
parent f4a64f0a03
commit e4fc6f79c0
2 changed files with 224 additions and 209 deletions
Show Stats Download Patch File Download Diff File

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

@ -72,6 +72,7 @@ import AdvanceSearchForm from './AdvanceSearchForm'
import EmailDetailInline from '../Conversations/Online/Components/EmailDetailInline'
import { getEmailDirAction } from '@/actions/EmailActions'
import OrderProfile from '@/components/OrderProfile'
import Mailbox from './components/Mailbox'
const EmailDirTypeIcons = {
'0': { component: FolderOutlined, color: '#ffe78f', className: 'text-blue-500' },
@ -219,215 +220,8 @@ function Follow() {
<Layout.Content style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)', minWidth: '360px' }}>
<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={{
items: [
{
key: '1',
label: '一催模板一，询问客人是否收到报价信',
},
{
key: '2',
label: '一催模板二，询问客人是否修改行程',
},
{
type: 'divider',
},
{
key: '3',
label: '二催模板一，询问客人对行程的看法',
},
{
key: '4',
label: '二催模板二，表达服务的意识',
},
{
type: 'divider',
},
{
key: '5',
label: '三催模板三，强调价格有效期',
},
],
onClick: (item) => {
console.info('menu', item)
},
}}
onClick={() => {
console.info('新邮件')
}}>
新邮件
</Dropdown.Button>
<Input.Search
className=''
allowClear
onChange={(e) => {}}
onPressEnter={(e) => {
return false
}}
placeholder={`邮件主题`}
/>
<Button onClick={() => {}}>高级搜索</Button>
<Flex wrap gap="small">
<Tooltip title="选择">
<Checkbox></Checkbox>
</Tooltip>
<Tooltip title="标记已读">
<Button shape="circle" type="text" size='small' icon={<ReadOutlined />} />
</Tooltip>
<Tooltip title="已处理">
<Button shape="circle" type="text" size='small' icon={<CheckSquareOutlined />} />
</Tooltip>
<Tooltip title="刷新">
<Button shape="circle" type="text" size='small' icon={<ReloadOutlined />} />
</Tooltip>
</Flex>
</div>
<div className='bg-white overflow-y-auto'
style={{height: 'calc(100vh - 198px)'}}>
<List
// header={null}
header={<div>今日任务</div>}
itemLayout="vertical"
size="large"
pagination={false}
dataSource={[
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: '250520-LSS250429038 团的 变更 <20>确认：Japan Fleet',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Personal information',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Your Future Trip with Asia Highlights',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: '回复： 回复：中华游251110-LSS250413051(AH)团计划',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Greeting from Asia Highlights Alisa',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Have you made any decisions about your Japan trip',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Sri Lanka tour',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: How do you like the itinerary 3',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Re: Re: Final cost',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Reference Number: LSS240628079',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Personal information and Hiroshima tour for 2 people',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Asia Travel Tips /LSS250429038',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
]}
renderItem={item => (
<List.Item
key={item.title}
// actions={[
// <a key="list-vertical-star-o">回复</a>,
// <a key="list-vertical-refor">转发</a>,
// ]}
extra={
<Checkbox></Checkbox>
}
>
<List.Item.Meta
className='cursor-pointer'
onClick={() => console.info('item: ', item)}
title={<a href={item.href} onClick={() => setSubject(item.title)}>{item.title}</a>}
description={item.description + ' ' + item.mailDate}
/>
{item.content}LSS250501006, Thailand
</List.Item>
)}
/>
</div>
</Col>
<Mailbox />
</Col>
<Col span={8}>

221
src/views/orders/components/MailBox.jsx
Unescape Escape View File

@ -0,0 +1,221 @@
import {
ReloadOutlined,
ReadOutlined, CheckSquareOutlined
} from '@ant-design/icons'
import {
Flex,
Button, Tooltip,
List,
Dropdown, Input, Checkbox
} from 'antd'
const MailBox = (props) => {
return (
<>
<div className='bg-white h-auto px-1 flex gap-1 items-center'>
<Dropdown.Button
className='w-auto'
placement='bottom'
arrow
type={'primary'}
menu={{
items: [
{
key: '1',
label: '一催模板一，询问客人是否收到报价信',
},
{
key: '2',
label: '一催模板二，询问客人是否修改行程',
},
{
type: 'divider',
},
{
key: '3',
label: '二催模板一，询问客人对行程的看法',
},
{
key: '4',
label: '二催模板二，表达服务的意识',
},
{
type: 'divider',
},
{
key: '5',
label: '三催模板三，强调价格有效期',
},
],
onClick: (item) => {
console.info('menu', item)
},
}}
onClick={() => {
console.info('新邮件')
}}>
新邮件
</Dropdown.Button>
<Input.Search
className=''
allowClear
onChange={(e) => {}}
onPressEnter={(e) => {
return false
}}
placeholder={`邮件主题`}
/>
<Button onClick={() => {}}>高级搜索</Button>
<Flex wrap gap='small'>
<Tooltip title='选择'>
<Checkbox></Checkbox>
</Tooltip>
<Tooltip title='标记已读'>
<Button shape='circle' type='text' size='small' icon={<ReadOutlined />} />
</Tooltip>
<Tooltip title='已处理'>
<Button shape='circle' type='text' size='small' icon={<CheckSquareOutlined />} />
</Tooltip>
<Tooltip title='刷新'>
<Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} />
</Tooltip>
</Flex>
</div>
<div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
<List
// header={null}
header={<div>今日任务</div>}
itemLayout='vertical'
size='large'
pagination={false}
dataSource={[
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: '250520-LSS250429038 团的 变更 <20>确认：Japan Fleet',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Personal information',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Your Future Trip with Asia Highlights',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: '回复： 回复：中华游251110-LSS250413051(AH)团计划',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Greeting from Asia Highlights Alisa',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Have you made any decisions about your Japan trip',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Sri Lanka tour',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: How do you like the itinerary 3',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Re: Re: Final cost',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Reference Number: LSS240628079',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Personal information and Hiroshima tour for 2 people',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
description: 'Fran Grundman <frangrundman@rogers.com>',
title: 'Re: Asia Travel Tips /LSS250429038',
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
]}
renderItem={(item) => (
<List.Item
key={item.title}
// actions={[
// <a key="list-vertical-star-o">回复</a>,
// <a key="list-vertical-refor">转发</a>,
// ]}
extra={<Checkbox></Checkbox>}>
<List.Item.Meta
className='cursor-pointer'
onClick={() => console.info('item: ', item)}
title={<a href={item.href} onClick={() => console.info('')}></a>}
description={item.description + ' ' + item.mailDate}
/>
{item.content}LSS250501006, Thailand
</List.Item>
)}
/>
</div>
</>
)
}
export default MailBox
Write Preview
Loading…
Cancel
Save