estateagents-admin-manager/src/pages/integralMall/exchangeRecords.jsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, DatePicker, Table, Pagination } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';
import moment from 'moment';
import BuildSelect from '../../components/SelectButton/BuildSelect'

import request from '../../utils/request'

/**
  @param {*} props
  @returns
 */
const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

function record(props) {
  const { getFieldDecorator } = props.form

  // 获取初始化数据
  const [ data, setData ] = useState({})

  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 });
  },[])

  // 查询列表
  const getList = (params) => {
    request({
        url: '/api/admin/taPointsExchange',
        method: 'GET',
        params: { ...params },
    }).then((data) => {
        setData(data)
    })
  }
  
  // 提交事件
  const handleSubmit = (e, props) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        let {exchangeTime,receiveTime, ...submitValue} = values
        if(null != exchangeTime && exchangeTime.length > 0){
          const [startCreateDate, endCreateDate] = exchangeTime
          submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
          submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
        }else{
          submitValue.startCreateDate = null
          submitValue.endCreateDate = null
        }
        
        if(null != receiveTime && receiveTime.length > 0){
          const [startVerifyDate, endVerifyDate] = receiveTime
          submitValue.startVerifyDate = moment(startVerifyDate).format('YYYY-MM-DD');
          submitValue.endVerifyDate = moment(endVerifyDate).format('YYYY-MM-DD');
        }else{
          submitValue.startVerifyDate = null
          submitValue.endVerifyDate = null
        }
        
        console.log(submitValue)
        getList({ pageNum: 1, pageSize: 10, ...submitValue })
      }
    });
  }

  const changePageNum = (pageNumber) => {
    getList({ pageNum: pageNumber, pageSize: 10 })
  }

  const columns = [

    {
      title: '用户姓名',
      dataIndex: 'personName',
      key: 'personName',
      align: 'center',
    },
    {
      title: '用户类型',
      dataIndex: 'personType',
      key: 'personType',
      align: 'center',
      render: (personType)=> <><span>{personType === 'Realty Consultant' ? '置业顾问' : personType === 'Sales Executive' ? '销售主管' : personType === 'estate agent' ? '经纪人' : ''}</span></>
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '商品图片',
      dataIndex: 'image',
      key: 'image',
      align: 'center',
      render: (text, record) => <img src={record.image} className={styles.touxiang} />,
    },
    {
      title: '商品名称',
      dataIndex: 'targetName',
      key: 'targetName',
      align: 'center',
    },
    {
      title: '兑换时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (createDate) => <><span>{moment(createDate).format('YYYY-MM-DD HH:mm')}</span></>
    },
    {
      title: '领取时间',
      dataIndex: 'verifyDate',
      key: 'verifyDate',
      align: 'center',
      render: (verifyDate) => <><span>{verifyDate != null ? moment(verifyDate).format('YYYY-MM-DD HH:mm') : ''}</span></>
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status)=> <><span>{status == 1 ? '已领取' : '未领取'}</span></>
    },
  ];

  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <div style={{ display: 'flex' }}>
          <Form.Item>
            {getFieldDecorator('personName')(
              <Input
                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="用户姓名"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('phone')(
              <Input
                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="手机号"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('targetName')(
              <Input
                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="商品名称"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('personType')(
              <Select style={{ width: '220px' }} placeholder="用户类型">
                <Option value="Realty Consultant">置业顾问</Option>
                <Option value="Sales Executive">销售主管</Option>
                <Option value="estate agent">经纪人</Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('status')(
              <Select style={{ width: '220px' }} placeholder="状态">
                <Option value="1">已领取</Option>
                <Option value="0">未领取</Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('exchangeTime')(
              <RangePicker placeholder={['兑换开始时间','兑换结束时间']}/>
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('receiveTime')(
              <RangePicker placeholder={['领取开始时间','领取结束时间']}/>
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className={styles.searchBtn}>
              搜索
          </Button>
          </Form.Item>
        </div>
      </Form>
      <Table style={{marginTop:'40px'}} dataSource={data.records} columns={columns} pagination={false} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'record' })(record);

export default WrappedHeader