Global-sales/src/views/OrderFollow.jsx

import { useNavigate } from 'react-router-dom'
import { memo, useMemo, useCallback, useEffect, useState } from 'react'
import {
  Row, Badge, Divider, Table, Card, Button, Input,
  Space, Tag, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
} from 'antd'
import {
  StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
} from '@ant-design/icons'
import { Conditional } from '@/components/Conditional'
import { useGetJson } from '@/hooks/userFetch'

const { RangePicker } = DatePicker;

const dataSource = [
  {
    key: '1',
    orderNumber: 'LU231218115(3)',
    fullname: 'Giacomo Guilizzoni(R1)',
    orderStatus: '新订单',
    trip: 'Itinerary2: Tkyoto tour',
    lastMessage: '2024-03-25 16:02',
    comment: '吃素、蜜月',
  },
  {
    key: '2',
    orderNumber: 'LU231218115(3)',
    fullname: 'Giacomo Guilizzoni(R1)',
    orderStatus: '新订单',
    trip: 'Itinerary2: Tkyoto tour',
    lastMessage: '2024-03-25 16:02',
    comment: '吃素、蜜月',
  },
  {
    key: '3',
    orderNumber: 'LU231218115(3)',
    fullname: 'Giacomo Guilizzoni(R1)',
    orderStatus: '新订单',
    trip: 'Itinerary2: Tkyoto tour',
    lastMessage: '2024-03-25 16:02',
    comment: '吃素、蜜月',
  },
  {
    key: '4',
    orderNumber: 'LU231218115(3)',
    fullname: 'Giacomo Guilizzoni(R1)',
    orderStatus: '新订单',
    trip: 'Itinerary2: Tkyoto tour 超级无敌长的报价标题',
    lastMessage: '2024-03-25 16:02',
    comment: '吃素、蜜月',
  },
  {
    key: '5',
    orderNumber: 'LU231218115(3)',
    fullname: 'Giacomo Guilizzoni(R1)',
    orderStatus: '新订单',
    trip: 'Itinerary2: Tkyoto tour',
    lastMessage: '2024-03-25 16:02',
    comment: '吃素、蜜月',
  },
  {
    key: '6',
    orderNumber: 'LU231218115(3)',
    fullname: 'Giacomo Guilizzoni(R1)',
    orderStatus: '新订单',
    trip: 'Itinerary2: Tkyoto tour',
    lastMessage: '2024-03-25 16:02',
    comment: '吃素、蜜月',
  },
  {
    key: '7',
    orderNumber: 'LU231218115(3)',
    fullname: 'Giacomo Guilizzoni(R1)',
    orderStatus: '新订单',
    trip: 'Itinerary2: Tkyoto tour',
    lastMessage: '2024-03-25 16:02',
    comment: '吃素、蜜月',
  },
];

const columns = [
  {
    title: '订单号',
    dataIndex: 'orderNumber',
    key: 'orderNumber',
    width: 222,
    render: (text, record, index) => {
      if (index === 1) return <Space size='middle'>{text}<Tag color='red'>重点</Tag></Space>
      else if (index === 2) return <Space size='middle'>{text}<Tag color='green'>潜力</Tag></Space>
      else return <Space size='middle'>{text}<Tag color='blue'>休眠</Tag></Space>
    }
  },
  {
    title: '客人姓名',
    dataIndex: 'fullname',
    key: 'fullname',
    render: (text, record, index) => {
      return (
        <Space size='middle'>
          <a>{text}</a>
          <Badge
        className="site-badge-count-109"
        count={Math.floor(Math.random() * (100 - 2 + 1) + 2)}
        style={{
          backgroundColor: '#52c41a',
        }}
      />
        </Space>
      )
    }
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
    width: 120,
    render: (text, record, index) => {
      if (index === 1) return text + '(一催)'
      else if (index === 2) return text + '(二催)'
      else if (index === 3) return text + '(三催)'
      else return text
    }
  },
  {
    title: '报价title',
    dataIndex: 'trip',
    key: 'trip',
    ellipsis: true,
  },
  {
    title: '客人最后一次回复时间',
    dataIndex: 'lastMessage',
    key: 'lastMessage',
  },
  {
    title: '附加信息',
    dataIndex: 'comment',
    key: 'comment',
  },
]

const AdvanceSearchForm = memo(function ({ onSubmit }) {
  const [form] = Form.useForm()
  function handleSubmit(values) {
    onSubmit?.(values)
  }
  return (
    <Form
      layout={'inline'}
      form={form}
      initialValues={{ orderLabel: '全部' }}
      onFinish={handleSubmit}
      style={{
        maxWidth: 'none',
      }}
    >
      <Form.Item label='标签' name='orderLabel'>
        <Select
          style={{
            width: 100,
          }}
          options={[
            {
              value: '潜力',
              label: '潜力',
            },
            {
              value: '重点',
              label: '重点',
            },
            {
              value: '休眠',
              label: '休眠',
            }
          ]}
        />
      </Form.Item>
      <Form.Item label='状态' name='orderStatus'>
        <Select
          style={{
            width: 100,
          }}
          options={[
            {
              value: '新订单',
              label: '新订单',
            },
            {
              value: '报价中',
              label: '报价中',
            },
            {
              value: '丢失',
              label: '丢失',
            },
            {
              value: '一催',
              label: '一催',
            },
            {
              value: '二催',
              label: '二催',
            },
            {
              value: '三催',
              label: '三催',
            },
          ]}
        />
      </Form.Item>
      <Form.Item label='订单号' name='orderNumber'>
        <Input placeholder='订单号' allowClear />
      </Form.Item>
      <Form.Item label='出发日期' name='startDate'>
        <RangePicker />
      </Form.Item>
      <Form.Item >
        <Button type='primary' htmlType='submit'>搜索</Button>
      </Form.Item>
    </Form>
  )
})

function OrderFollow() {

  const [advanceChecked, toggleAdvance] = useState(false)
  const [searchCriteria, setSearchCriteria] = useState({
    type: 'today',
    orderStatus: '新状态',
    orderNumber: '订单号',
    orderLabel: '订单标签',
    startDate: '走团时间'
  })

  const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])

  const handleSubmit = useCallback((criteria) => {
    setSearchCriteria({
      ...criteria,
      type: 'advance'
    })
  }, [])

  useEffect(() => {
  }, [])

  return (
    <>
      <Space direction='vertical' size='large' style={{ width: '100%' }}>
        <Flex gap='large' justify='start' align='center' horizontal='true'>
          <Radio.Group
            options={[
              { label: '今日任务', value: 'today' },
              { label: '潜力客户', value: 'star' },
              { label: '重点订单', value: 'important' },
              { label: '成行', value: 'myfavorites' },
              { label: '走团中', value: 'ing' },
              { label: '走团后一月', value: 'lastMonth' }
            ]}
            value={searchCriteria.type}
            onChange={({ target: { value } }) => {
              setSearchCriteria({
                ...searchCriteria,
                type: value
              })
            }}
            optionType='button'
            buttonStyle='solid'
            disabled={advanceChecked}
          />

          <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
            defaultChecked={false}
            onChange={() => { toggleAdvance(!advanceChecked) }} />
        </Flex>
        <Conditional condition={advanceChecked} whenTrue={<AdvanceSearchForm onSubmit={handleSubmit} />}
        />
      </Space>
      <Divider plain orientation='left'></Divider>
      {orderListMemo}
    </>
  )

  function OrderList({ searchCriteria }) {
    console.info(searchCriteria)
    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
  
    return (
      <Table loading={countryList === null} dataSource={countryList === null ? null : dataSource} columns={columns} />
    )
  }
}

export default OrderFollow