xs-manage/estateagents-admin-manager/src/pages/funds/accountfunds/components/RechargeOrder.jsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb, DatePicker } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import Navigate from '@/components/Navigate'
import apis from '../../../../services/apis';
import request from '../../../../utils/request';
import AuthButton from '@/components/AuthButton';
import ShowVoucher from './ShowVoucher';

const { RangePicker } = DatePicker


const { Option } = Select

function RechargeOrder(props) {

    // const [taNoticeList, setTaNoticeList] = useState([])
    const [data, setData] = useState({})

    const [showVoucher, setShowVoucher] = useState({})
    //     {
    //         visible: false,
    //         bannerList: ['//njcj.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1591609582282-1584614514971-504167f68a5d43ee693949b26498ef21.jpg', '//njcj.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1591609582282-1584614514971-504167f68a5d43ee693949b26498ef21.jpg'],
    //     },
    // )

    useEffect(() => {
        getList({ pageNum: 1, pageSize: 10 });
    }, [])
    // 查询列表

    const getList = params => {


        const { LocalDate, ...values } = params
        if (LocalDate != null && LocalDate.length > 0) {
            const [payStartTime, payEndTime] = LocalDate
            values.payStartTime = `${moment(payStartTime).format('YYYY-MM-DDT00:00:00')}Z`;
            values.payEndTime = `${moment(payEndTime).format('YYYY-MM-DDT23:59:59')}Z`;
        } else {
            values.payStartTime = null
            values.payEndTime = null
        }
        // if (params.payStartTime) {
        //     params.payStartTime = `${moment(params.payStartTime).format('YYYY-MM-DDT00:00:00')}Z`;
        // }
        // if (params.payEndTime) {
        //     params.payEndTime = `${moment(params.payEndTime).format('YYYY-MM-DDT23:59:59')}Z`;
        // }

        request({ ...apis.funds.czlist, params: { ...values } }).then(data => {
            setData(data)
        })
    }
    const openImg = data => {
        setShowVoucher(
            {
                visible: true,
                bannerList: data,
            },
        )
    }

    const changePageNum = e => {
        props.form.validateFields((err, values) => {
            if (!err) {
                // eslint-disable-next-line no-console
                console.log('提交数据: ', values)
                getList({ pageNum: e, pageSize: 10, ...values })
            }
        });

    }


    function handleSubmit(e) {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                // eslint-disable-next-line no-console
                console.log('提交数据: ', values)
                getList({ pageNum: 1, pageSize: 10, ...values })
            }
        });
    }

    function handleReset() {
        props.form.resetFields();

        getList({ pageNum: 1, pageSize: 10 })
    }

    const columns = [
        {
            title: '订单编号',
            dataIndex: 'tradeNo',
            key: 'tradeNo',
            align: 'center',
        },
        {
            title: '充值金额',
            dataIndex: 'amount',
            key: 'amount',
            align: 'center',
            render: x => <><span>{x / 100 || ''}</span></>,
        },
        {
            title: '充值方式',
            dataIndex: 'isOffline',
            key: 'isOffline',
            align: 'center',
            render: x => <><span>{x ? '运营手工充值' : '业务线上充值'}</span></>,
        },
        {
            title: '下单时间',
            dataIndex: 'createDate',
            key: 'createDate',
            align: 'center',
            render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
        },
        {
            title: '充值凭证',
            dataIndex: 'certificateUrlList',
            key: 'certificateUrlList',
            align: 'center',
            render: (x, row) => <>{row.certificateUrlList == null ? '' : <Navigate onClick={() => openImg(x)}>查看</Navigate>}</>,
        },
        {
            title: '充值状态',
            dataIndex: 'tradingStatus',
            key: 'tradingStatus',
            align: 'center',
            render: (x, row) => <><span>{row.tradingStatus == 'processing' ? '待支付' : (row.tradingStatus == 'success' ? '已支付' : '失败')}</span></>,
        },
        {
            title: '支付时间',
            dataIndex: 'payDate',
            key: 'payDate',
            align: 'center',
            render: (x, row) => <><span>{row.payDate == null ? "" : `${moment(row.payDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
        },
    ]

    const { getFieldDecorator } = props.form

    function download(data) {
        // if (!data) {
        //     console.log('234')
        //     return
        // }
        const url = window.URL.createObjectURL(new Blob([data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '充值订单.xlsx')
        document.body.append(link)
        link.click()
    }

    const exportReport = () => {
        const requestParams = props.form.getFieldsValue();

        
        const { LocalDate, ...values } = requestParams
        if (LocalDate != null && LocalDate.length > 0) {
            const [payStartTime, payEndTime] = LocalDate
            values.payStartTime = `${moment(payStartTime).format('YYYY-MM-DDT00:00:00')}Z`;
            values.payEndTime = `${moment(payEndTime).format('YYYY-MM-DDT23:59:59')}Z`;
        } else {
            values.payStartTime = null
            values.payEndTime = null
        }
        // if (requestParams.payStartTime) {
        //     requestParams.payStartTime = `${moment(requestParams.payStartTime).format('YYYY-MM-DDT00:00:00')}Z`;
        // }
        // if (requestParams.payEndTime) {
        //     requestParams.payEndTime = `${moment(requestParams.payEndTime).format('YYYY-MM-DDT23:59:59')}Z`;
        // }
        request({ ...apis.funds.czexportList, responseType: 'blob', params: { ...values } }).then(data => {
            download(data)
        }).catch()
    }

    return (

        <>
            <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
                <Form.Item>
                    {getFieldDecorator('tradeNo')(
                        <Input
                            placeholder="订单编号"
                        />,
                    )}
                </Form.Item>

                <Form.Item>
                    {getFieldDecorator('LocalDate')(
                        <RangePicker placeholder={['支付开始时间', '支付结束时间']} />,
                    )}
                </Form.Item>


                {/* <Form.Item>
                    {getFieldDecorator('payStartTime')(
                        <DatePicker placeholder="支付开始时间" />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('payEndTime')(
                        <DatePicker placeholder="支付结束时间" />,
                    )}
                </Form.Item> */}
                <Form.Item>
                    {getFieldDecorator('isOffline')(
                        <Select style={{ width: '180px' }} placeholder="充值方式">
                            <Option value="">全部</Option>
                            <Option value={0}>业务线上充值</Option>
                            <Option value={1}>运营手工充值</Option>
                        </Select>,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('tradingStatus')(
                        <Select style={{ width: '180px' }} placeholder="充值状态">
                            <Option value="">全部</Option>
                            <Option value="processing">待支付</Option>
                            <Option value="success">已支付</Option>
                            <Option value="fail">失败</Option>
                        </Select>,
                    )}
                </Form.Item>
                {/* <Form.Item>
                    {getFieldDecorator('tel')(
                        <Input
                            placeholder="充值方式"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('tel')(
                        <Input
                            placeholder="充值状态"
                        />,
                    )}
                </Form.Item> */}
                <Form.Item>
                    <Button type="primary" htmlType="submit"> 搜索</Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                </Form.Item>
            </Form>
            <div style={{ marginTop: '20px' }}>
                <AuthButton name="admin.funds.account.export" noRight={null}>
                    <Button type="primary" onClick={() => exportReport()} style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} >导出</Button>
                </AuthButton>
            </div>
            <Table dataSource={data.records} columns={columns} pagination={false} style={{ marginTop: '20px' }} />
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination
                    showQuickJumper
                    defaultCurrent={1}
                    total={data.total} onChange={e => changePageNum(e)} current={data.current} />
            </div>

            {showVoucher.visible && <ShowVoucher bannerList={showVoucher.bannerList} closeSwiper={() => setShowVoucher({ visible: false })} />}
        </>

    )
}


const WrappedRechargeOrder = Form.create({ name: 'RechargeOrder' })(RechargeOrder);

export default WrappedRechargeOrder