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

import React, {useEffect} from 'react';
import {Button, Form, message, Select, Space, Spin} from "antd";
import DataCheckTable from "./DataCheckTable/DataCheckTable";
import CardDiv from "../../../component/CardDiv/CardDiv";
import ResourceFinder from "../../../util/ResourceFinder";
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";

const DataCheck = props => {

    const [messageApi, contextHolder] = message.useMessage();
    const commonAxios = creatMessageCommonAxios(messageApi);
    const [form] = Form.useForm();

    const [semesterList, setSemesterList] = React.useState([]);
    const [profile, setProfile] = React.useState({});
    const [queryRequest, setQueryRequest] = React.useState({
        page: 1,
        size: 10,
        startSemester: null,
        endSemester: null,
        staffNumber: profile.staffNumber,
    });
    const [spinLoading, setSpinLoading] = React.useState(true);
    const [queryResult, setQueryResult] = React.useState({});


    const fetchSemesterList = () => {
        let resourceFinder = new ResourceFinder('efc.workload.oms.workload', 'efc.workload.oms.workload.semester.list', commonAxios, null);
        resourceFinder.getResource().then((response) => {
            let semesterList = response.data.data.data || [];
            setSemesterList(semesterList);
        });
    }

    const fetchWorkloadData = () => {
        let uri = `/api/v1/workload/query?page=${queryRequest.page}&size=${queryRequest.size}`;
        if (queryRequest.staffNumber) {
            uri += `&staffNumber=${queryRequest.staffNumber}`;
        }
        if (queryRequest.startSemester) {
            uri += `&startSemester=${queryRequest.startSemester}`;
        }
        if (queryRequest.endSemester) {
            uri += `&endSemester=${queryRequest.endSemester}`;
        }
        commonAxios.get(uri).then((response) => {
            if (!response.data.data) {
                setSpinLoading(false)
                setQueryResult([]);
                return
            }
            let workloadData = response.data.data || {};
            setQueryResult(workloadData);
            setSpinLoading(false)
        });
    }

    const onFormSubmit = (values) => {
        console.log(values)
        setQueryRequest({
            ...queryRequest,
            page: 1,
            size: 10,
            startSemester: values.startTerm,
            endSemester: values.endTerm,
        })
    }


    useEffect(() => {
        fetchSemesterList();
        commonAxios.get('/api/auth/profile').then((response) => {
            if (response.data.data != null) {
                setProfile({
                    id: response.data.data.id,
                    name: response.data.data.name,
                    staffNumber: response.data.data.staffNumber
                });
                setQueryRequest({...queryRequest, staffNumber: response.data.data.staffNumber});
            }
        });
    }, [props]);

    useEffect(() => {
        fetchWorkloadData();
    }, [queryRequest]);


    return (
        <div>
            {contextHolder}
            <Space direction={'vertical'} size={'middle'} style={{display: 'flex'}}>
                <CardDiv id={'data-check-param'}>
                    <Form
                        layout={"inline"}
                        form={form}
                        onFinish={onFormSubmit}
                    >
                        <Form.Item label={'起始学期'} name={'startTerm'}>
                            <Select
                                style={{
                                    width: 200
                                }}
                                showSearch
                                allowClear
                                placeholder={'请选择起始学期'}
                                options={semesterList.map(semester => {
                                    return {label: semester, value: semester}
                                })}
                            />
                        </Form.Item>

                        <Form.Item label={'结束学期'} name={'endTerm'}>
                            <Select
                                style={{
                                    width: 200
                                }}
                                showSearch
                                allowClear
                                placeholder={'请选择结束学期'}
                                options={semesterList.map(semester => {
                                    return {label: semester, value: semester}
                                })}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type={"primary"} htmlType={"submit"}>获取数据</Button>
                        </Form.Item>
                    </Form>
                </CardDiv>
                <CardDiv
                    id={'data-check-table'}
                    style={{
                        height: '100%',
                        width: '100%',
                        overflow: 'auto'
                    }}
                >
                    <Spin spinning={spinLoading}>
                        <DataCheckTable queryResult={queryResult} queryRequest={queryRequest}
                                        setQueryRequest={setQueryRequest}/>
                    </Spin>
                </CardDiv>
            </Space>
        </div>
    );
};

DataCheck.propTypes = {};

export default DataCheck;