efc-workload-base-web/src/page/Dashboard/DataManager/ImportDataDrawer.jsx

import React, {useEffect, useState} from 'react';
import PropTypes from 'prop-types';
import {Button, Divider, Drawer, Form, Input, message, Radio, Space, Upload} from "antd";
import {UploadOutlined} from "@ant-design/icons";
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";
import ImportHistoryTable from "./ImportHistoryTable";

const ImportDataDrawer = props => {

    const {open, onClose, fetchWorkloadData} = props;

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

    const [drawerParam, setDrawerParam] = useState({
        open: false
    });
    const [fileList, setFileList] = useState([]);

    useEffect(() => {
        console.log('open drawer', open)
        setDrawerParam(prevDrawerParam => ({...prevDrawerParam, open: open}))
    }, [open]);

    const onReset = () => {
        form.resetFields();
        setFileList([]);
    }

    const onSubmit = () => {
        form.submit();
    }

    const onFinish = (values) => {
        const formData = new FormData();
        formData.append('file', fileList[0]);
        formData.append('startYear', values.startYear);
        formData.append('endYear', parseInt(values.startYear) + 1);
        formData.append('semester', values.term);
        commonAxios.post('/api/v1/workload/import', formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then((res) => {
            if (res.data.data && res.data.success === true && res.data.data.uploadStatus === '03') {
                messageApi.success("导入成功");
                onReset();
                onClose();
                fetchWorkloadData();
            } else {
                messageApi.warning('导入失败，请检查文件格式或数据');
                onClose();
            }
        })
    };

    return (
        <div>
            {contextHolder}
            <Drawer open={drawerParam.open}
                    size={"large"}
                    extra={
                        <Space direction={"horizontal"} size={"middle"}>
                            <Button onClick={onReset}>重置</Button>
                            <Button type={"primary"} onClick={onSubmit}>提交</Button>
                        </Space>
                    }
                    title={'导入数据'}
                    placement={'right'}
                    onClose={onClose}
            >
                <div>
                    <Form
                        form={form}
                        labelAlign={'left'}
                        onFinish={onFinish}
                    >
                        {/*<Form.Item
                            label={'起始年度'}
                            name={'startYear'}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}
                            rules={[{required: true, message: '请输入起始年度'},
                                {pattern: /^20[0-9]{2}$/, message: '请输入正确的年度'}]}
                        >
                            <Input placeholder={'请输入起始年度'}/>
                        </Form.Item>
                        <Form.Item
                            label={'学期'}
                            name={'term'}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}
                            rules={[{required: true, message: '请选择学期'}]}
                        >
                            <Radio.Group
                                optionType="button"
                                buttonStyle="solid"
                            >
                                <Radio value={1}>第一学期</Radio>
                                <Radio value={2}>第二学期</Radio>
                            </Radio.Group>
                        </Form.Item>*/}
                        <Form.Item
                            name={'file'}
                            label={'数据文件'}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}
                            rules={[{required: true, message: '请上传数据文件'}]}
                        >
                            <Upload
                                beforeUpload={(file) => {
                                    setFileList([file]);
                                    return false;
                                }}
                                onRemove={() => setFileList([])}
                                multiple={false}
                                fileList={fileList}
                            >
                                <Button icon={<UploadOutlined/>}>点击此处上传</Button>
                            </Upload>
                        </Form.Item>
                    </Form>
                </div>
                <Divider/>
                <ImportHistoryTable messageApi={messageApi} commonAxios={commonAxios}
                                    fetchWorkloadData={fetchWorkloadData}/>
            </Drawer>
        </div>);
};

ImportDataDrawer.propTypes = {
    open: PropTypes.bool,
    onClose: PropTypes.func
};

export default ImportDataDrawer;