efc-workload-base-web/src/page/Dashboard/DataPrint/index.jsx

import React, {useEffect, useState} from 'react';
import {Button, Col, Empty, FloatButton, message, Pagination, Row, Skeleton, Space, Spin, Typography} from "antd";
import PrintRecordCard from "./RecordCard/PrintRecordCard";
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";
import QueryConditionBox from "./QueryConditionBox";
import CardDiv from "../../../component/CardDiv/CardDiv";
import {PlusOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";

const DataPrint = props => {
    const [downloadDisabled, setDownloadDisabled] = useState(true);
    const previewClicked = () => {
        setDownloadDisabled(false);
    }

    const navigate = useNavigate();

    const [messageApi, contextHolder] = message.useMessage();

    const [loading, setLoading] = useState(true);
    const [spinLoading, setSpinLoading] = useState(false);

    const commonAxios = creatMessageCommonAxios(messageApi);

    const [queryRequest, setQueryRequest] = useState({
        page: 1,
        size: 6,
        id: null,
        staffNumber: null,
        fileType: null,
        status: null,
        startTime: null,
        endTime: null
    });

    const [records, setRecords] = useState([{
        "id": "",
        "stuffNumber": "",
        "currentOperatorUser": "",
        "recordType": "",
        "status": "",
        "failReason": null,
        "requestTime": "",
        "madeTime": "",
        "extraInfo": null
    }]);

    const [pageInfo, setPageInfo] = useState({
        current: 1,
        pageSize: 6,
        total: 2
    });

    const onPageChange = (page) => {
        setQueryRequest({...queryRequest, page: page});
        setSpinLoading(true)
    }


    useEffect(() => {
        setTimeout(() => {
            commonAxios.post('/api/v1/workload/certificate/record', queryRequest).then((response) => {
                if (response.data.data != null) {
                    setRecords(response.data.data.list);
                    setPageInfo({...pageInfo, current: response.data.data.pageNum, total: response.data.data.total});
                } else {
                    setRecords([]);
                }
                setLoading(false)
                setSpinLoading(false)
            });
            // 动态调整
        }, 0)

    }, [queryRequest]);

    return (
        <div style={{width: '100%'}}>
            {contextHolder}
            <Space direction="vertical" size="large" style={{display: "flex"}}>
                <CardDiv>
                    <QueryConditionBox setQueryRequest={(req) => setQueryRequest(req)}
                                       setLoading={(loading) => setLoading(loading)}/>
                </CardDiv>
                <Skeleton active={true} loading={loading}>
                    <CardDiv>
                        {
                            records && records.length > 0 ? <Spin spinning={spinLoading}>
                                <Space direction="vertical" size="large" style={{display: "flex"}}>
                                    <Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
                                        {
                                            records.map((record, index) => {
                                                return (<Col key={record.id} xxl={8} xl={12} lg={12} md={24} sm={24} xs={24}>
                                                    <PrintRecordCard key={index} record={record} fileType={1}
                                                                     messageApi={messageApi}/>
                                                </Col>)
                                            })
                                        }
                                    </Row>
                                    <Pagination
                                        showQuickJumper
                                        defaultCurrent={1}
                                        showSizeChanger={false}
                                        total={pageInfo.total}
                                        pageSize={pageInfo.pageSize}
                                        onChange={onPageChange}
                                        align={'end'}
                                    />
                                </Space>
                            </Spin> : <>
                                <Empty
                                    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                                    styles={{
                                        image: {
                                            height: 60,
                                        },
                                    }}
                                    description={
                                        <Typography.Text>
                                            暂无历史证明生成记录数据
                                        </Typography.Text>
                                    }
                                >
                                    <Button type="primary" icon={<PlusOutlined/>}
                                            onClick={() => navigate('/generate-certificate')}>生成报告</Button>
                                </Empty>
                            </>
                        }
                    </CardDiv>
                </Skeleton>
                <FloatButton.BackTop visibilityHeight={1000}/>
            </Space>
        </div>
    );
};

DataPrint.propTypes = {};

export default DataPrint;