xs-manage/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 Link from 'umi/link'
import moment from 'moment';
import BuildSelect from '../../components/SelectButton/BuildSelect'
import apis from '../../services/apis';
import request from '../../utils/request'
import AuthButton from '@/components/AuthButton';
import { exportExcel } from '@/utils/utils'

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

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

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

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.integralMall.taPointsExchange, params: { ...params }, }).then((data) => {
      setData(data)
      console.log("data:", data)
    })
  }

  //重置搜索
  function handleReset() {
    props.form.resetFields();
  }



  // 提交事件
  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
        }

        setQueryParam(submitValue)

        console.log(submitValue)
        getList({ pageNum: 1, pageSize: 10, ...submitValue })
      }
    });
  }

  const handleExport = () => {
    request({ ...apis.integralMall.taPointsExchangeExport, params: queryParam, }).then((data) => {
      exportExcel(data, '积分兑换记录')
    })
  }

  const changePageNum = (pageNumber) => {
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNum: pageNumber, pageSize: 10, ...values })
      }
    });
  }

  const columns = [

    {
      title: '用户姓名',
      dataIndex: 'personName',
      key: 'personName',
      align: 'center',
      render: (_, row) => row.propId ? <Link to={`/property/proprietor/detail?id=${row.propId}`}>{row.personName}</Link> : row.personName
    },
    {
      title: '房产',
      dataIndex: 'roomInfo',
      key: 'roomInfo',
      // align: 'center',
      // render: (personType) => <><span>{personType === 'prop' ? '物业相关' : personType === 'life-consultant' ? '生活管家' : ''}</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: (_, recorde) => <><span>{moment(recorde.createDate).format('YYYY-MM-DD HH:mm')}</span></>,
    },
    {
      title: '领取时间',
      dataIndex: 'verifyDate',
      key: 'verifyDate',
      align: 'center',
      render: (_, recorde) => <><span>{recorde.verifyDate != null ? moment(recorde.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={{ minWidth: '1.1rem' }} placeholder="用户类型">
                <Option value="Realty Consultant">置业顾问</Option>
                <Option value="customer">客户</Option>
                <Option value="estate agent">经纪人</Option>
              </Select>,
            )}
          </Form.Item> */}
          <Form.Item>
            {getFieldDecorator('status')(
              <Select style={{ minWidth: '1.1rem' }} placeholder="状态">
                <Option value="1">已领取</Option>
                <Option value="0">未领取</Option>
              </Select>,
            )}
          </Form.Item>

        </div>
        <div style={{ margin: '10px 0' }}>
          <Form.Item>
            <span style={{ marginRight: '10px' }}>兑换时间：</span>
            {getFieldDecorator('exchangeTime')(
              <RangePicker placeholder={['开始时间', '结束时间']} />
            )}
          </Form.Item>
          <Form.Item>
            <span style={{ marginRight: '10px' }}>领取时间：</span>
            {getFieldDecorator('receiveTime')(
              <RangePicker placeholder={['开始时间', '结束时间']} />
            )}
          </Form.Item>
          <Form.Item >
            <AuthButton name="admin.taGoods.exchange" noRight={null}>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
            </AuthButton>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </div>

      </Form>
      <div style={{marginTop: 24}}>
        <Button onClick={handleExport}>导出</Button>
      </div>
      <Table rowKey="exchangeRecords" 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} current={data.current} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'record' })(record);

export default WrappedHeader