perf:增加面包屑;调整邮件单选框位置

dev/ckeditor
LiaoYijun 4 weeks ago
parent 3519c4a414
commit 9823214e4b

@ -7,7 +7,7 @@ import {
HeartTwoTone,
MoneyCollectTwoTone,
FolderOutlined,
DeleteOutlined, ClockCircleOutlined,
DeleteOutlined, EditOutlined,
FormOutlined
} from '@ant-design/icons'
@ -124,7 +124,7 @@ const OrderProfile = (props) => {
<Divider orientation='left'>
<Typography.Text strong>附加信息</Typography.Text>
<Tooltip title='修改'>
<FileAddOutlined className='pl-1' />
<EditOutlined className='pl-1' />
</Tooltip>
</Divider>
<Typography.Text>

@ -1,9 +1,39 @@
import { useCallback, useEffect, useState } from 'react'
import { ReloadOutlined, ReadOutlined, CheckSquareOutlined } from '@ant-design/icons'
import { Flex, Button, Tooltip, List, Radio, Typography, Divider, Drawer, Dropdown, Input, Checkbox } from 'antd'
import { ReloadOutlined, ReadOutlined, CheckSquareOutlined, StarOutlined, HomeOutlined } from '@ant-design/icons'
import { Flex, Button, Tooltip, List, Form, Row, Col, Drawer, Dropdown, Input, Checkbox, DatePicker, Select, Breadcrumb } from 'antd'
import dayjs from 'dayjs';
const { RangePicker } = DatePicker;
const MailBox = (props) => {
const DATE_RANGE_PRESETS = [
{
label: '本周',
value: [dayjs().startOf('w'), dayjs().endOf('w')],
},
{
label: '上周',
value: [dayjs().startOf('w').subtract(7, 'days'), dayjs().endOf('w').subtract(7, 'days')],
},
{
label: '本月',
value: [dayjs().startOf('M'), dayjs().endOf('M')],
},
{
label: '上月',
value: [dayjs().subtract(1, 'M').startOf('M'), dayjs().subtract(1, 'M').endOf('M')],
},
{
label: '前三月',
value: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
},
{
label: '本年',
value: [dayjs().startOf('y'), dayjs().endOf('y')],
},
];
const [openOrder, setOpenOrder] = useState(false)
const [form] = Form.useForm()
return (
<>
<div className='bg-white h-auto px-1 flex gap-1 items-center'>
@ -83,176 +113,79 @@ const MailBox = (props) => {
<div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
<List
// header={null}
header={<div>{props.title}</div>}
header={<Breadcrumb
items={[
{
title: (
<>
<StarOutlined />
<span>今日任务</span>
</>
),
},
{
title: (
<>
<span>lyj20210810144702</span>
</>
),
},
]}
/>}
itemLayout='vertical'
size='large'
pagination={false}
dataSource={props.dataSource}
dataSource1={[...props.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) => (
<li className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-gray-100 p-2'>
<div className='flex-1'>
<li className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2'>
<div className=''>
<Checkbox></Checkbox>
</div>
<div className='flex-1 pl-2'>
<Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
<span className="font-bold">{item.title}</span>
<span className="text-neutral-500 text-wrap break-words break-all ">{item.description + ' ' + item.mailDate}</span>
{item.orderNo + ' ' + item.country}
{item.orderNo + ' ' + (item.country===null?'' : item.country)}
</Flex>
</div>
<div className=''>
<Checkbox></Checkbox>
</div>
</li>
)}
/>
</div>
<Drawer title={'高级搜索'} placement='top' getContainer={false} size={'large'} mask={true} maskClosable={true} open={openOrder} onClose={() => setOpenOrder(false)}>
<Divider orientation='left'>
<Typography.Text strong>是否重要</Typography.Text>
</Divider>
<Radio.Group
options={[
{ label: '重点', value: '1' },
{ label: '次重点', value: '2' },
{ label: '一般', value: '3' },
]}
/>
<Divider orientation='left'>
<Typography.Text strong>状态</Typography.Text>
</Divider>
<Radio.Group
options={[
{ label: '新订单', value: '4' },
{ label: '报价中', value: '5' },
{ label: '以后联系', value: '6' },
{ label: '等待付订金', value: '7' },
{ label: '成行', value: '8' },
{ label: '丢失', value: '9' },
{ label: '取消', value: '10' },
{ label: '未报价', value: '11' },
]}
/>
<Divider orientation='left'>
<Typography.Text strong> 催信</Typography.Text>
</Divider>
<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']}
/>
<Form
layout={'vertical'}
form={form}
initialValues={{
}}
// onFinish={handleSubmit}
>
<Row justify='start' gutter={16}>
<Col span={4}>
<Form.Item label='订单号' name='orderNumber'>
<Input placeholder='订单号' allowClear />
</Form.Item>
</Col>
<Col span={4}>
<Form.Item label='出发日期' name='startDateRange'>
<RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
</Form.Item>
</Col>
<Col span={4}>
<Form.Item label='确认日期' name='confirmDateRange'>
<RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
</Form.Item>
</Col>
</Row>
<Row justify='start' align='middle' gutter={16}>
<Col span={1} offset={1}>
<Button type='primary' htmlType='submit'>
搜索
</Button>
</Col>
</Row>
</Form>
</Drawer>
</>
)

Loading…
Cancel
Save