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

perf: 使用四列布局订单跟踪

Browse Source
dev/ckeditor
LiaoYijun 4 months ago
parent 7449ad9e44
commit b6efb24a87
1 changed files with 209 additions and 10 deletions
Show Stats Download Patch File Download Diff File

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

@ -17,7 +17,7 @@ import {
SaveOutlined,
PlusOutlined,
MehOutlined,
SmileOutlined,
CompassOutlined,
CheckSquareTwoTone,
CarryOutTwoTone,
MailTwoTone,
@ -27,7 +27,7 @@ import {
CalendarOutlined,
HeartTwoTone, MoneyCollectTwoTone
} from '@ant-design/icons'
import { App, Badge, Empty, Flex, Button, Drawer , Space, Radio, Table, Tabs, Divider, Tag, Tooltip, Row, Col, Segmented, Tree, Typography, Input, Descriptions, Checkbox, Layout, } 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 { Link } from 'react-router-dom'
@ -340,7 +340,7 @@ function Follow() {
const [mailSubject, setSubject] = useState('');
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]))
@ -490,6 +490,30 @@ function Follow() {
<Layout.Header className='bg-white h-auto px-1 flex gap-1 items-center'>
<Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'}>新邮件</Button>
<Dropdown menu={{ items: [
{
key: '1',
label: '一催：模板一',
},
{
key: '2',
label: '一催：模板二',
},
{
key: '3',
label: '一催：模板三',
},
]}} trigger={['click']}>
<Button>
<Space>
使用模板
<DownOutlined />
</Space>
</Button>
</Dropdown>
<Button onClick={() => {}} >多选</Button>
<Input.Search
className=''
allowClear
@ -500,12 +524,183 @@ function Follow() {
placeholder={`名称/号码/订单号`}
/>
<Button onClick={() => {}} >高级搜索</Button>
<Button onClick={() => {}} >多选</Button>
</Layout.Header>
<Layout>
<Layout.Content>
<Table
<Row>
<Col className='bg-white' span={16} style={{height: 'calc(100vh - 196px)', overflowY: 'auto'}}>
<List
itemLayout="vertical"
size="small"
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>,
// ]}
>
<List.Item.Meta
title={<a href={item.href} onClick={() => setSubject(item.title)}>{item.title}</a>}
description={item.description + ' ' + item.mailDate}
/>
{item.content}LSS250501006, Thailand
</List.Item>
)}
/></Col>
<Col span={8}>
<div>
<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>
<Descriptions column={2} title={mailSubject} 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>
</div></Col>
</Row>
{/* <Table
onRow={(record) => {
return {
onClick: (event) => {console.info(event)}, // 点击行
@ -672,10 +867,10 @@ function Follow() {
country: 'Thailand',
},
]}
/>
/> */}
</Layout.Content>
</Layout>
<Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
{/* <Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
<Descriptions title="Your Thailand Private tour by 'Asia Highlights' 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到" items={[
{
@ -714,12 +909,12 @@ function Follow() {
</Button>
</Flex>
<div id='__preHtml__' className='whitespace-pre-wrap break-words' dangerouslySetInnerHTML={{ __html: '邮件内容。。。。。<br/>换行了。。。看看 ' }}></div>
</Layout.Footer>
</Layout.Footer> */}
</Layout>
</Layout.Content>
<Layout.Sider width='400' style={{
<Layout.Sider width='350' style={{
backgroundColor: '#fff',
}}>
}} 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' />
@ -731,6 +926,10 @@ function Follow() {
<UserOutlined className=' pr-1' />
Jorgina(R1)
</Typography.Text>
<Typography.Text>
<CompassOutlined className=' pr-1' />
Thailand
</Typography.Text>
<Typography.Text>
<PhoneOutlined className=' pr-1' />
<Button type='link' size={'small'} onClick={() => {}}>

Write Preview
Loading…
Cancel
Save