初始化

src/page/Dashboard/GenerateCertificate/ContentConfig.jsx

@@ -0,0 +1,203 @@
+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;