Global-sales/src/views/OrderFollow.jsx

import { useNavigate } from 'react-router-dom'
import { useRef, useEffect, useState } from 'react'
import { observer } from 'mobx-react'
import { Row, Col, Divider, Table , Card, Button, Input, 
  Space, Segmented, Radio, Select, AutoComplete, Spin, Typography, Flex
} from 'antd'
import {
  StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined , AppstoreOutlined
} from '@ant-design/icons'

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: 300,
    render: (text, record, inde) => {
      return (
        <Space size="middle">
          <a>{text}</a>
          <Segmented
    options={[
      {
        label: '潜力',
        value: '潜力',
      },
      {
        label: '重点',
        value: '重点',
      },
      {
        label: '休眠',
        value: '休眠',
      },
    ]}
  />
        </Space>
      )
    }
  },
  {
    title: '客人姓名',
    dataIndex: 'fullname',
    key: 'fullname',
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
    render: (text, record, inde) => {
      return (
        <Select
          defaultValue="新订单"
          style={{
            width: 100,
          }}
          bordered={false}
          options={[
            {
              value: '新订单',
              label: '新订单',
            },
            {
              value: '报价中',
              label: '报价中',
            },
            {
              value: '丢失',
              label: '丢失',
            },
            {
              value: '一催',
              label: '一催',
            },
            {
              value: '二催',
              label: '二催',
            },
            {
              value: '三催',
              label: '三催',
            },
          ]}
        />
      )
    }
  },
  {
    title: '报价title',
    dataIndex: 'trip',
    key: 'trip',
    ellipsis: true,
  },
  {
    title: '客人最后一次回复时间',
    dataIndex: 'lastMessage',
    key: 'lastMessage',
  },
  {
    title: '附加信息',
    dataIndex: 'comment',
    key: 'comment',
  },
];

function OrderFollow() {
  
  useEffect(() => {
  }, [])
  
  return (
    <Spin spinning={false} delay={500}>
      <Space direction='vertical' style={{ width: '100%' }}>
        <Row gutter={[16, 16]} justify='start' align='middle'>
          <Col span={24}>
            <Radio.Group
              options={[
                { label: '今日任务', value: 'today' },
                { label: '潜力客户', value: 'star' },
                { label: '重点订单', value: 'important' },
                { label: '成行', value: 'myfavorites' },
                { label: '走团中', value: 'ing' },
                { label: '走团后一月', value: 'lastMonth' },
                { label: '高级查询', value: 'advance' }
              ]}
              value={'today'}
              onChange={({ target: { value } }) => {              
                setSearchType(value)
              }}
              optionType='button'
              buttonStyle='solid'
            />
          </Col>
        </Row>
      </Space>
      <Divider plain orientation='left'></Divider>
      <Space
        direction='vertical'
        size='middle'
        style={{
          display: 'flex',
        }}
      >
        <Table dataSource={dataSource} columns={columns} />
      </Space>
    </Spin>
  )
}

export default observer(OrderFollow)