Global-sales/src/views/OrderFollow.jsx

import {
  App,
  Badge,
  Button,
  DatePicker,
  Divider,
  Flex, Form,
  Input,
  Radio, Row, Col, Select,
  Space,
  Switch,
  Table,
  Tag
} from 'antd'
import { memo, useCallback, useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom'
import dayjs from 'dayjs'
import { Conditional } from '@/components/Conditional'
import { useAuthContext } from '@/stores/AuthContext'
import { prepareUrl } from '@/utils/commons'

const { RangePicker } = DatePicker

const AdvanceSearchForm = memo(function ({ onSubmit }) {

  const DATE_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 [form] = Form.useForm()
  function handleSubmit(values) {
    onSubmit?.(values)
  }
  return (
    <Form
      layout={'vertical'}
      // layout={'inline'}
      form={form}
      initialValues={{ orderLabel: '', orderStatus: '', remindState: '',
      startDateRange: [dayjs().startOf('M'), dayjs().endOf('M')]
      }}
      onFinish={handleSubmit}
      // style={{
      //   maxWidth: '200',
      // }}
    >
    <Row justify='start' align='middle' gutter={16}>
   <Col span={4}>
   <Form.Item label='订单号' name='orderNumber'>
     <Input placeholder='订单号' allowClear />
   </Form.Item>
   </Col>
   <Col span={4}>
   <Form.Item label='FirstName' name='firstName'>
     <Input placeholder='FirstName' allowClear />
   </Form.Item>
   </Col>
   <Col span={4}>
   <Form.Item label='LastName' name='lastName'>
     <Input placeholder='LastName' allowClear />
   </Form.Item>
   </Col>
   <Col span={4}>
   <Form.Item label='邮件地址/客人电话/传真' name='email'>
     <Input placeholder='邮件地址/客人电话/传真' allowClear />
   </Form.Item>
   </Col>
   
 </Row>
       <Row justify='start' align='middle' gutter={16}>
      <Col span={2}>
      <Form.Item label='标签' name='orderLabel'>
        <Select
          options={[
            { value: '', label: '全部' },
            { value: '240003', label: '重点' },
            { value: '240002', label: '次重点' },
            { value: '240001', label: '一般' }
          ]}
        />
      </Form.Item>
      </Col>
      <Col span={2}>
      <Form.Item label='状态' name='orderStatus'>
        <Select
          options={[
            { value: '', label: '全部' },
            { value: '1', label: '新订单' },
            { value: '2', label: '报价中' },
            { value: '3', label: '以后联系' },
            { value: '4', label: '等待付订金' },
            { value: '5', label: '成行' },
            { value: '6', label: '丢失' },
            { value: '7', label: '取消' }
          ]}
        />
      </Form.Item>
      </Col>
      <Col span={2}>
      <Form.Item label='催信' name='remindState'>
        <Select
          options={[
            { value: '', label: '全部' },
            { value: '1', label: '一催' },
            { value: '2', label: '二催' },
            { value: '3', label: '三催' }
          ]}
        />
      </Form.Item>
      </Col>
      <Col span={4}>
      <Form.Item label='出发日期' name='startDateRange'>
        <RangePicker 
          allowClear={false}
          inputReadOnly={true}
          presets={DATE_PRESETS}
        />
      </Form.Item>
      </Col>
      <Col span={4}>
      <Form.Item label='确认日期' name='confirmDateRange'>
        <RangePicker 
          allowClear={false}
          inputReadOnly={true}
          presets={DATE_PRESETS}
        />
      </Form.Item>
      </Col>
      <Col flex="auto">
      {/* <Form.Item > */}
        <Button type='primary' htmlType='submit'>搜索</Button>
      {/* </Form.Item> */}
      </Col>
    </Row>
    </Form>
  )
})

function OrderList({ formValues }) {

  const orderColumns = [
    {
      title: '订单号',
      dataIndex: 'COLI_ID',
      width: 222,
      render: (text, record) => {
        if (record.COLI_LineGrade === 240003) return <Space>{text}<Tag color='red'>重点</Tag></Space>
        else if (record.COLI_LineGrade === 240002) return <Space>{text}<Tag color='green'>次重点</Tag></Space>
        else if (record.COLI_LineGrade === 240001) return <Space>{text}<Tag color='blue'>一般</Tag></Space>
        else return <Space>{text}</Space>
      }
    },
    {
      title: '客人姓名',
      dataIndex: 'coli_guest',
      render: (text, record) => {
        let regularText = ''
        if (record.buytime > 0) regularText = '(R' + record.buytime + ')'
        return (
          <Space>
            <NavLink to={`/order/chat/${record.COLI_SN}`}>{text + regularText}</NavLink>
            <Badge
              count={record.unread_msg}
              style={{
                backgroundColor: '#52c41a',
              }}
            />
          </Space>
        )
      }
    },
    {
      title: '订单状态',
      dataIndex: 'COLI_State',
      width: 120,
      render: (text, record) => {
        let extra = ''
        if (record.RemindState === 1) extra = '(一催)'
        if (record.RemindState === 2) extra = '(二催)'
        if (record.RemindState === 3) extra = '(三催)'
        return text + extra
      }
    },
    {
      title: '报价title',
      dataIndex: 'lettertitle',
      ellipsis: true,
    },
    {
      title: '客人最后一次回复时间',
      dataIndex: 'last_received_time',
    },
    {
      title: '附加信息',
      dataIndex: 'COLI_Introduction',
    },
  ]
  const { notification } = App.useApp()
  const [orderData, setOrderData] = useState([])
  const [loading, setLoading] = useState(false)  
  const { loginUser } = useAuthContext()
  let fetchOrderUrl = `https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback/getwlorder?opisn=${loginUser.userId}&otype=${formValues.type}`
  
  if (formValues.type === 'advance') {
    const fromDate = formValues.startDateRange[0].format('YYYY-MM-DD')
    const thruDate = formValues.startDateRange[1].format('YYYY-MM-DD')
    fetchOrderUrl = prepareUrl('https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback/getdvancedwlorder')    
      .append('opisn', loginUser.userId)
      .append('startdate', fromDate)
      .append('enddate', thruDate)
      .append('tag', formValues.orderLabel)
      .append('orderstate', formValues.orderStatus)
      .append('remindstate', formValues.remindState)      
      .append('coli_id', formValues.orderNumber)
      .build()
  }

  useEffect(() => {
    setLoading(true)
    fetch(fetchOrderUrl)
      .then(response => response.json())
      .then(json => {
        if (json.errcode === 0) {
          const testOrder = [{
            "key": 240129001,
            "COLI_SN": 240129001,
            "COLI_ID": "LYJ240129001",
            "unread_msg": Math.floor(Math.random() * (100 - 2 + 1) + 2),
            "COLI_LineGrade": 240001,
            "coli_guest": "LiaoYijun",
            "buytime": 1,
            "COLI_StateCode": 1,
            "COLI_State": "新订单",
            "lettertitle": "1st Trip Plan: 8-Day Essential Japan Family Trip with Disneyland",
            "last_received_time": new Date().toDateString(),
            "COLI_Introduction": "",
            "RemindState": 0
            },{
              "key": 240129002,
              "COLI_SN": 240129002,
              "COLI_ID": "QQS240129002",
              "unread_msg": Math.floor(Math.random() * (100 - 2 + 1) + 2),
              "COLI_LineGrade": 240002,
              "coli_guest": "QinQianSheng",
              "buytime": 2,
              "COLI_StateCode": 1,
              "COLI_State": "新订单",
              "lettertitle": "2nd Trip Plan: 2-Week Japan Private Family Vacation",
              "last_received_time": new Date().toDateString(),
              "COLI_Introduction": "",
              "RemindState": 0
            },{
              "key": 240129003,
              "COLI_SN": 240129003,
              "COLI_ID": "LYT240129003",
              "unread_msg": Math.floor(Math.random() * (100 - 2 + 1) + 2),
              "COLI_LineGrade": 240003,
              "coli_guest": "LeiYuanTing",
              "buytime": 3,
              "COLI_StateCode": 1,
              "COLI_State": "新订单",
              "lettertitle": "3rd Trip Plan: 12-Day Best of Thailand and Cambodia Tour",
              "last_received_time": new Date().toDateString(),
              "COLI_Introduction": "",
              "RemindState": 0
          }]
          const fetchData = json.result.map((order) => { return {...order, key: order.COLI_ID}})
          setOrderData([...testOrder, ...fetchData])
        } else {
          notification.error({
            message: '查询出错',
            description: json?.errmsg,
            placement: 'top',
            duration: 60,
          })
        }
      })
      .finally(() => setLoading(false))
      .catch(reason => {
        notification.error({
          message: '查询出错',
          description: reason.message,
          placement: 'top',
          duration: 60,
        })
      })
  }, [formValues])

  return (
    <Table key='Order Table' loading={loading} dataSource={orderData} 
    columns={orderColumns}
    pagination={{
      showQuickJumper: true,
      showLessItems: true,
      showSizeChanger: true,
      showTotal: (total) => {return `总数：${total}`}
    }} />
  )
}
function OrderFollow() {

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

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

  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: 'zhongdian' },
              { label: '次重点客户', value: 'qianli' },
              { label: '成行', value: 'chengxing' },
              { label: '走团中', value: 'zoutuan' },
              { label: '走团后一月', value: 'zoutuanhou' }
            ]}
            value={formValues.type}
            onChange={({ target: { value } }) => {
              setFormValues({
                ...formValues,
                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>
      <OrderList formValues={formValues} />
    </>
  )
}

export default OrderFollow