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

feat: 增加邮件批量操作工具栏

Browse Source
dev/ckeditor
LiaoYijun 4 months ago
parent 63ec5c0a28
commit b1efa2f4f3
1 changed files with 76 additions and 251 deletions
Show Stats Download Patch File Download Diff File

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

@ -8,19 +8,23 @@ import {
WhatsAppOutlined,
ImportOutlined,
FileAddOutlined,
BarsOutlined,
DownOutlined,
StarTwoTone,
StarOutlined,
MailOutlined,
PhoneOutlined,
UserOutlined,
FieldNumberOutlined,
SaveOutlined,
PlusOutlined,
MehOutlined,
SearchOutlined,
ReloadOutlined,ReadOutlined,
CompassOutlined,
CheckSquareTwoTone,
CarryOutTwoTone,
CheckSquareOutlined,
MailTwoTone,
BookTwoTone,
RightSquareTwoTone,
SwitcherTwoTone,
FolderTwoTone,
CalendarTwoTone,
@ -367,13 +371,16 @@ const [collapsed, setCollapsed] = useState(false)
<Tree
showIcon
showLine
defaultExpandedKeys={['0-0', '0-1']}
onSelect={(selectedKeys, e) => {
console.info('selectedKeys: ', selectedKeys)
}}
defaultExpandedKeys={['0-0-today-task', '0-1-todo-task']}
defaultSelectedKeys={['0-0-0']}
treeData={[
{
title: '今日任务',
key: '0-0',
icon: <CalendarTwoTone />,
key: '0-0-today-task',
icon: <StarTwoTone />,
children: [
{
title: '(新订单)HXZ240913082',
@ -387,8 +394,8 @@ const [collapsed, setCollapsed] = useState(false)
},
{
title: '待办任务',
key: '0-1',
icon: <SwitcherTwoTone />,
key: '0-1-todo-task',
icon: <CalendarTwoTone />,
children: [
{
title: '(一催)HXZ250213117',
@ -414,13 +421,13 @@ const [collapsed, setCollapsed] = useState(false)
},
{
title: '草稿',
key: '0-2',
icon: <MailTwoTone />,
key: '0-2-draft',
icon: <BookTwoTone />,
},
{
title: '收件箱',
key: '0-3',
icon: <FolderTwoTone />,
key: '0-3-inbox',
icon: <MailTwoTone />,
children: [
{
title: '1月',
@ -473,12 +480,12 @@ const [collapsed, setCollapsed] = useState(false)
},
{
title: '已发送',
key: '0-4',
icon: <CarryOutTwoTone />,
key: '0-4-sent',
icon: <RightSquareTwoTone />,
},
{
title: '已处理',
key: '0-5',
key: '0-5-completed',
icon: <CheckSquareTwoTone />,
},
]}
@ -486,34 +493,42 @@ const [collapsed, setCollapsed] = useState(false)
</Flex></Layout.Sider>
<Layout.Content>
<Layout>
<Layout.Header className='bg-white h-auto px-1 flex gap-1 items-center'>
<Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'}>新邮件</Button>
<Row>
<Col className='bg-white' span={16}>
<div className='bg-white h-auto px-1 flex gap-1 items-center'>
<Dropdown menu={{ items: [
<Dropdown.Button className='w-auto' placement="bottom" arrow type={'primary'} menu={{
items: [
{
key: '1',
label: '一催：模板一',
label: '一催模板一，询问客人是否收到报价信',
},
{
key: '2',
label: '一催：模板二',
label: '一催模板二，询问客人是否修改行程',
},{
type: 'divider',
},
{
key: '3',
label: '一催：模板三',
label: '二催模板一，询问客人对行程的看法',
},
]}} trigger={['click']}>
<Button>
<Space>
使用模板
<DownOutlined />
</Space>
</Button>
</Dropdown>
<Button onClick={() => {}} >多选</Button>
{
key: '4',
label: '二催模板二，表达服务的意识',
},{
type: 'divider',
},
{
key: '5',
label: '三催模板三，强调价格有效期',
}],
onClick: (item)=> {console.info('menu', item)},
}} onClick={() => {console.info('新邮件')}}>
新邮件
</Dropdown.Button>
<Input.Search
className=''
allowClear
@ -521,18 +536,30 @@ const [collapsed, setCollapsed] = useState(false)
onPressEnter={(e) => {
return false
}}
placeholder={`名称/号码/订单号`}
placeholder={`邮件主题`}
/>
<Button onClick={() => {}} >高级搜索</Button>
</Layout.Header>
<Layout>
<Layout.Content>
<Row>
<Col className='bg-white' span={16} style={{height: 'calc(100vh - 196px)', overflowY: 'auto'}}>
</div>
<div className='bg-white overflow-y-auto'
style={{height: 'calc(100vh - 198px)'}}>
<List
// header={null}
header={ <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>}
itemLayout="vertical"
size="small"
size="large"
pagination={false}
dataSource={[
{
@ -647,15 +674,23 @@ const [collapsed, setCollapsed] = useState(false)
// <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>
)}
/></Col>
/>
</div>
</Col>
<Col span={8}>
<div>
@ -706,217 +741,7 @@ const [collapsed, setCollapsed] = useState(false)
<p>Some contents...{Math.random().toString(36).substring(2, 9)}</p>
</div></Col>
</Row>
{/* <Table
onRow={(record) => {
return {
onClick: (event) => {console.info(event)}, // 点击行
onDoubleClick: (event) => {},
onContextMenu: (event) => {},
onMouseEnter: (event) => {}, // 鼠标移入行
onMouseLeave: (event) => {},
};
}}
pagination={false}
sticky={{ offsetHeader: 64 }}
columns={[
{
title: '主题',
dataIndex: 'subject',
key: 'subject',
width: 500,
render: (text) => <a onClick={() => {
setSubject(text)
setOpenMail(true)
}}>{text}</a>,
},
{
title: '收/发件人',
dataIndex: 'name',
key: 'name',
width: 380,
minWidth: 180,
render: (text) => <a>{text}</a>,
},
{
title: '收/发日期',
dataIndex: 'mailDate',
key: '收/发日期',
width: 180,
},
{
title: '订单号',
key: 'orderNo',
dataIndex: 'orderNo',
width: 140,
},
{
title: '国籍',
key: 'country',
dataIndex: 'country',
width: 120,
},
{
title: '操作',
key: 'action',
width: 120,
render: (_, record) => (
<Space size='middle'>
<a>回复</a>
<a>转发</a>
</Space>
),
},
]}
dataSource={[
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
{
key: Math.random().toString(36).substring(2, 9),
name: 'Fran Grundman <frangrundman@rogers.com>',
subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
mailDate: '2025-05-01 19:21:00',
orderNo: 'LSS250501006',
country: 'Thailand',
},
]}
/> */}
</Layout.Content>
</Layout>
{/* <Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
<Descriptions 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',
},
]} />
<Flex gap="small">
<Space.Compact>
<Button color="primary" variant="solid">
回复
</Button>
<Button color="primary" variant="outlined">
回复全部
</Button>
<Button color="primary" variant="outlined" >
转发
</Button>
</Space.Compact>
<Button color="cyan" variant="outlined">
已处理
</Button>
<Button color="cyan" variant="outlined">
绑定订单
</Button>
</Flex>
<div id='__preHtml__' className='whitespace-pre-wrap break-words' dangerouslySetInnerHTML={{ __html: '邮件内容。。。。。<br/>换行了。。。看看 ' }}></div>
</Layout.Footer> */}
</Layout>
</Layout.Content>
<Layout.Sider zeroWidthTriggerStyle={{top: '30px'}} width='280' style={{
backgroundColor: '#fff',

Write Preview
Loading…
Cancel
Save