efc-workload-base-web/src/page/Dashboard/GenerateCertificate/ParameterConfig.jsx

import React, {useEffect, useState} from 'react';
import PropTypes from 'prop-types';
import {Flex, Form, Input, Radio, Typography} from "antd";

const ParameterConfig = props => {

    const {allowNext, request, setRequest} = props;

    const {Title, Text} = Typography;
    const [form] = Form.useForm();

    const [hideWorkloadParam, setHideWorkloadParam] = React.useState(true);
    const [admin, setAdmin] = React.useState(true);

    const [tempParam, setTempParam] = useState({
        recordType: null,
        total: '',
        annual: '',
    })

    useEffect(() => {
        let item = sessionStorage.getItem("certificateParam");

        // TODO 判断是否是管理员
        setAdmin(true);

        if (item !== null) {
            item = JSON.parse(item);
            setTempParam(item);
            allowNext(item.recordType !== null)
            if (item.recordType === '02' && admin) {
                setHideWorkloadParam(false);
            }
        }
    }, []);

    return (
        <div>
            <Flex vertical justify={"start"} align={"start"} gap={"middle"}>
                <div>
                    <Title level={4}>参数配置</Title>
                    <Text level={4}
                          type={'secondary'}>配置这份证明，如指定这份证明的类型、手动设定它的计算数据。这将决定您即将看到的报告的样式和数据。</Text>
                </div>
                <div style={{width: '100%'}}>
                    <Form
                        form={form}
                        labelCol={{
                            span: 4,
                        }}

                        style={{
                            maxWidth: 500,
                        }}
                    >
                        <Form.Item
                            label={"证书类型"}
                            name='recordType'
                            rules={[{required: true, message: '请选择证书类型'}]}
                        >
                            <Radio.Group
                                onChange={(event) => {
                                    const recordType = event.target.value;
                                    let item = sessionStorage.getItem("certificateParam");
                                    if (item !== null) {
                                        item = JSON.parse(item);
                                    } else item = tempParam;
                                    item.recordType = recordType;
                                    setTempParam(item)
                                    if (recordType === '02' && admin) {
                                        setHideWorkloadParam(false);
                                        setRequest({...request, recordType: recordType});
                                    } else {
                                        setHideWorkloadParam(true);
                                        setRequest({
                                            ...request,
                                            recordType: recordType,
                                            totalTeachingWorkload: '',
                                            annualAverageTeachingWorkload: ''
                                        });
                                        item.total = '';
                                        item.annual = '';
                                        form.setFieldsValue({
                                            total: '',
                                            annual: ''
                                        });

                                    }
                                    sessionStorage.setItem("certificateParam", JSON.stringify(item))
                                    allowNext(true);
                                }}
                                defaultValue={() => {
                                    let item = sessionStorage.getItem("certificateParam");
                                    if (item !== null) {
                                        item = JSON.parse(item);
                                        return item.recordType;
                                    }
                                }}
                                options={[
                                    {label: '本科课堂工时证明', value: '01'},
                                    {label: '任现职后工作情况证明', value: '02'}
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label={"总工作量"}
                            name='total'
                            hidden={hideWorkloadParam}
                        >
                            <Input
                                type={'number'}
                                addonAfter={'课时'}
                                allowClear
                                onChange={(event) => {
                                    const total = event.target.value;
                                    let item = sessionStorage.getItem("certificateParam");
                                    if (item !== null) {
                                        item = JSON.parse(item);
                                    } else item = tempParam;
                                    item.total = total;
                                    setTempParam(item)
                                    sessionStorage.setItem("certificateParam", JSON.stringify(item))
                                    setRequest({...request, totalTeachingWorkload: total});
                                }}
                                defaultValue={() => {
                                    let item = sessionStorage.getItem("certificateParam");
                                    if (item !== null) {
                                        item = JSON.parse(item);
                                        return item.total;
                                    }
                                }}
                            />
                        </Form.Item>
                        <Form.Item
                            label={"年均工作量"}
                            name='annual'
                            hidden={hideWorkloadParam}
                        >
                            <Input
                                addonAfter={'课时'}
                                allowClear
                                type={'number'}
                                onChange={(event) => {
                                    const annualHours = event.target.value;
                                    let item = sessionStorage.getItem("certificateParam");
                                    if (item !== null) {
                                        item = JSON.parse(item);
                                    } else item = tempParam;
                                    item.annual = annualHours;
                                    setTempParam(item)
                                    sessionStorage.setItem("certificateParam", JSON.stringify(item))
                                    setRequest({
                                        ...request,
                                        annualAverageTeachingWorkload: annualHours
                                    });
                                }}
                                defaultValue={() => {
                                    let item = sessionStorage.getItem("certificateParam");
                                    if (item !== null) {
                                        item = JSON.parse(item);
                                        return item.annual;
                                    }
                                }}
                            />
                        </Form.Item>
                    </Form>
                </div>
            </Flex>
        </div>
    );
};

ParameterConfig.propTypes = {};

export default ParameterConfig;