Global-sales/src/views/orders/components/MailBox.jsx

import { useCallback, useEffect, useState } from 'react'
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'>
        <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>
        <Flex wrap gap='middle' justify={'center'} className='min-w-40'>
          <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>
        <Input.Search
          className=''
          allowClear
          onChange={(e) => {}}
          onPressEnter={(e) => {
            return false
          }}
          placeholder={`邮件主题`}
        />
        <Button
          onClick={() => {
            setOpenOrder(true)
          }}>
          高级搜索
        </Button>
      </div>

      <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
        <List
          header={<Breadcrumb
    items={[
      {
        title: (
          <>
            <StarOutlined />
            <span>今日任务</span>
          </>
        ),
      },
      {
        title: (
          <>
            <span>lyj20210810144702</span>
          </>
        ),
      },
    ]}
  />}
          itemLayout='vertical'
          size='large'
          pagination={false}
          dataSource={props.dataSource}
          renderItem={(item) => (
            <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===null?'' : item.country)}
                </Flex>
              </div>
            </li>
          )}
        />
      </div>

      <Drawer title={'高级搜索'} placement='top' getContainer={false} size={'large'} mask={true} maskClosable={true} open={openOrder} onClose={() => setOpenOrder(false)}>
        <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>
    </>
  )
}

export default MailBox