Global-sales/src/views/customer_relation/index.jsx

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { Form, Input, Button, DatePicker, Select, Table } from 'antd'
import dayjs from 'dayjs'
import useCustomerRelationStore from '@/stores/CustomerRelationStore'

const { RangePicker } = DatePicker
const { Option } = Select

const Index = () => {
  const { loading, tasksList, fetchSearchTasks } = useCustomerRelationStore()

  // 定义默认值
  const initialFormValues = {
    crt_coli_id: '', // 客人名字默认空
    dateRange: [dayjs().startOf('M'), dayjs().endOf('M')], // 默认本月
    crt_status: '', // 状态默认所有
  }

  // 搜索表单提交
  const onFinish = (values) => {
    const formattedValues = {
      ...values,
      start_date: values.dateRange ? values.dateRange[0].format('YYYY-MM-DD') : '',
      end_date: values.dateRange ? values.dateRange[1].endOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
    }
    fetchSearchTasks(formattedValues)
  }

  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 columns = [
    { title: '团号', dataIndex: 'crt_coli_id', key: 'crt_coli_id' },
    { title: '客人', dataIndex: 'crt_mei_firstname', key: 'crt_mei_firstname', render: (text, record) => record.crt_mei_firstname + ' ' + record.crt_mei_lastname },
    { title: '国家', dataIndex: 'crt_coi2_country', key: 'crt_coi2_country' },
    // { title: '时区', dataIndex: 'ct_coi_code', key: 'ct_coi_code' },

    {
      title: '状态',
      dataIndex: 'crt_status',
      key: 'crt_status',
      render: (status) => {
        if (status == '0') {
          return '待发送'
        } else if (status == '99') {
          return '已发送'
        }
        return '失败'
      },
    },
    { title: '发送时间', dataIndex: 'crt_send_datetime', key: 'crt_send_datetime', sorter: (a, b) => dayjs(a.crt_send_datetime).unix() - dayjs(b.crt_send_datetime).unix() },
    { title: '模板', dataIndex: 'crt_template', key: 'crt_template' },
    { title: 'WhatsApp', dataIndex: 'crt_whatsapp', key: 'crt_whatsapp' },
    {
      title: '会话',
      dataIndex: 'crt_conversation_id',
      key: 'crt_conversation_id',
      render: (text, record) => {
        if (text) {
          return <Link to={`/order/chat/${record.crt_conversation_id}`}>查看会话</Link>
        }
      },
    },
    // { title: '消息ID', dataIndex: 'crt_message_id', key: 'crt_message_id' },
    // { title: '邮箱', dataIndex: 'crt_mei_maillist', key: 'crt_mei_maillist' },
    // { title: '创建时间', dataIndex: 'ct_datetime', key: 'ct_datetime' },
    // { title: '客人国家', dataIndex: 'crt_mei_country', key: 'crt_mei_country' },
  ]

  return (
    <>
      {/* 搜索栏 */}
      <Form layout='inline' onFinish={onFinish} style={{ marginBottom: 24 }} initialValues={initialFormValues}>
        <Form.Item label='团号' name='crt_coli_id'>
          <Input placeholder='输入团号' />
        </Form.Item>
        <Form.Item label='任务时间' name='dateRange'>
          <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
        </Form.Item>
        <Form.Item label='状态' name='crt_status'>
          <Select placeholder='请选择状态' style={{ width: 120 }}>
            <Option value=''>所有</Option>
            <Option value='0'>待发送</Option>
            <Option value='99'>已发送</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type='primary' htmlType='submit'>
            搜索
          </Button>
        </Form.Item>
      </Form>

      {/* 搜索结果 */}

      <span>搜索结果总数: {tasksList && tasksList.length}</span>

      <Table dataSource={tasksList} columns={columns} pagination={false} rowKey='crt_sn' loading={loading} />
    </>
  )
}

export default Index