pc-channel/src/pages/fundManagement/AccountManagement.jsx

import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Pagination, Card, Button, Icon, Tooltip, message, notification, Modal, Table, Select, Input, DatePicker } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import className from 'classnames';
import Cell from '../../components/Cell';
import styles from './style.less';
import { fetch, apis } from '../../utils/request';
import request from '../../utils/request';
import AuthButton from '@/components/AuthButton';
import Recharge from './components/Recharge'
import Refund from './components/Refund'
import { regFenToYuan } from '@/utils/money';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

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

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

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


    // 提交事件
    const handleSubmit = (e, props) => {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                let { miniAppName } = values

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

    const changePageNum = (pageNumber) => {
        let { miniAppName } = props.form.getFieldsValue()

        getList({ pageNum: pageNumber, pageSize: 10, miniAppName, })
    }

    /**
     *
     *
     * @param {*} props
     * @returns
     */
    const columns = [
        {
            title: '账户',
            dataIndex: 'miniappName',
            key: 'miniappName',
            align: 'center',
            render: (x, row) => (
                <>
                    <span style={{ color: '#FF925C', cursor: 'pointer', marginRight: '16px' }} onClick={() => toDeatil(row)} >
                        {row.miniappName}
                    </span>
                </>
            ),
        },
        {
            title: '总充值金额',
            dataIndex: 'totalRechargeAmount',
            key: 'totalRechargeAmount',
            align: 'center',
            render: (x, row) => <span>{regFenToYuan(x)}</span>
        },
        {
            title: '已消费金额',
            dataIndex: 'purchaseAmount',
            key: 'purchaseAmount',
            align: 'center',
            render: (x, row) => <span>{regFenToYuan(x)}</span>
        },
        {
            title: '已退款金额',
            dataIndex: 'totalRefund',
            key: 'totalRefund',
            align: 'center',
            render: (x, row) => <span>{regFenToYuan(x)}</span>
        },
        {
            title: '余额',
            dataIndex: 'realBalance',
            key: 'realBalance',
            align: 'center',
            render: (x, row) => <span>{regFenToYuan(x)}</span>
        },
        {
            title: '操作',
            dataIndex: 'handle',
            key: 'handle',
            align: 'center',
            width: '120px',
            render: (x, row) => (
                <>
                    <span style={{ color: '#FF925C', cursor: 'pointer', marginRight: '16px', display: 'inline-block' }}><Recharge onClick={handleReset} orgId={row.orgId} accountId={row.accountId} /></span>
                    <span style={{ color: '#FF925C', cursor: 'pointer', display: 'inline-block' }} >
                        <Refund orgId={row.orgId} accountId={row.accountId} onClick={handleReset} realBalance={row.realBalance || '0'} />
                    </span>
                </>
            ),
        },

    ];
    function handleReset() {
        props.form.resetFields();
        getList({ pageNum: 1, pageSize: 10 })
    }

    const toDeatil = (row) => {
        router.push({
            pathname: '/fundManagement/AccountDetail',
            query: {
                id: row.orgId
            },
        });
    }

    const { getFieldDecorator } = props.form
    return (

        <>
            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{ marginBottom: '16px' }}>
                <Form.Item>
                    {getFieldDecorator('miniAppName')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="输入小程序名"
                        />,
                    )}
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
                        搜索
                    </Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
            <Table rowKey={r => r.accountId} 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: 'header' })(header);

export default WrappedHeader