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

import React, {useEffect, useState} from 'react';
import {Flex, message, Spin, Tag, Typography} from "antd";
import TableTransfer from "../../../component/TableTransfer";
import creatMessageCommonAxios from "../../../http/CreatMessageCommonAxios";

const ContentConfig = props => {

    const {allowNext, request, setRequest} = props;

    const {Title, Paragraph, Text} = Typography;
    const [messageApi, contentHolder] = message.useMessage();
    const commonAxios = creatMessageCommonAxios(messageApi);

    const generateTag = (courseNature) => {
        let color = '';
        let text = '';
        if (courseNature === '01') {
            color = 'green';
            text = '公共课';
        }
        if (courseNature === '02') {
            color = 'blue';
            text = '专业课';
        }
        if (courseNature === '03') {
            color = 'purple';
            text = '校选课';
        }
        return (
            <Tag color={color} key={courseNature}>
                {text}
            </Tag>
        );
    }

    const tableColumns = [
        {
            dataIndex: 'semester',
            title: '学期',
        },
        {
            dataIndex: 'courseNature',
            title: '课程性质',
            render: (_, {courseNature}) => (
                <>
                    {
                        generateTag(courseNature)
                    }
                </>
            ),
        },
        {
            dataIndex: 'courseName',
            title: '课程名称',
            width: 200
        },
        {
            dataIndex: 'actualClassSize',
            title: '学生人数',
        },
        {
            dataIndex: 'totalClassHours',
            title: '总学时数',
        },
    ]

    const mockData = [
        {
            key: '1',
            semester: '2020-2021-1',
            courseNature: '必修',
            courseName: '计算机网络',
            actualClassSize: '30',
            totalClassHours: '48',
        },
        {
            key: '2',
            semester: '2020-2021-1',
            courseNature: '必修',
            courseName: '计算机网络',
            actualClassSize: '30',
            totalClassHours: '48',
        },
        {
            key: '3',
            semester: '2020-2021-1',
            courseNature: '必修',
            courseName: '计算机网络',
            actualClassSize: '30',
            totalClassHours: '48',
        },
        {
            key: '4',
            semester: '2020-2021-1',
            courseNature: '必修',
            courseName: '计算机网络',
            actualClassSize: '30',
            totalClassHours: '48',
        },
        {
            key: '5',
            semester: '2020-2021-1',
            courseNature: '必修',
            courseName: '计算机网络',
            actualClassSize: '30',
            totalClassHours: '48',
        },
    ]

    const [targetKeys, setTargetKeys] = useState([]);
    const [disabled, setDisabled] = useState(false);
    const [spinning, setSpinning] = useState(true);
    const [workloadList, setWorkloadList] = useState([
        {
            key: '',
            semester: '',
            courseNature: '',
            courseName: '',
            actualClassSize: '',
            totalClassHours: '',
        }
    ]);

    const onChange = (nextTargetKeys) => {
        setTargetKeys(nextTargetKeys);
        sessionStorage.setItem('targetKeys', JSON.stringify(nextTargetKeys));
        setRequest({...request, ids: nextTargetKeys});
        if (nextTargetKeys.length === 0) {
            allowNext(false)
        } else {
            allowNext(true)
        }
    };
    const toggleDisabled = (checked) => {
        setDisabled(checked);
    };

    useEffect(() => {
        commonAxios.get(`/api/v1/workload/detail/queryList/${request.stuffNumber}`)
            .then((response) => {
                if (response.data.data) {
                    console.log(response.data.data);
                    let dataInfo = response.data.data.map((item, index) => {
                            return {
                                key: item.id,
                                semester: item.semesterInfo,
                                courseNature: item.courseNature,
                                courseName: item.courseName,
                                actualClassSize: item.actualClassSize,
                                totalClassHours: item.totalClassHours,
                            }
                        }
                    );
                    setWorkloadList(dataInfo);
                    setSpinning(false)
                }
            });

        let item = sessionStorage.getItem('targetKeys');
        if (item !== null) {
            item = JSON.parse(item);
            setTargetKeys(item);
            if (item.length === 0) {
                allowNext(false)
            } else {
                allowNext(true)
            }
        }
    }, [request]);

    return (
        <div>
            {contentHolder}
            <Flex vertical justify={"start"} align={"start"} gap={"middle"}>
                <div>
                    <Title level={4}>证明内容配置</Title>
                    <Text level={4}
                          type={'secondary'}>选择您想体现在证明上的工作量数据，无论是课时证明还是任职后工作情况证明，都将会通过您的选择进而渲染合适的数据到您需要的报告中。</Text>
                </div>
                <div style={{width: '100%'}}>
                    <Spin spinning={spinning}>
                        <TableTransfer
                            dataSource={workloadList}
                            targetKeys={targetKeys}
                            disabled={disabled}
                            // showSearch
                            showSelectAll={false}
                            onChange={onChange}
                            // filterOption={filterOptxion}
                            leftColumns={tableColumns}
                            rightColumns={tableColumns}
                        />
                    </Spin>
                </div>

            </Flex>
        </div>
    );
};

ContentConfig.propTypes = {};

export default ContentConfig;