feat: 刷题页面

src/views/upload-questions/pages/single-box/index.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import UploadLeftLayout from '../../components/upload-left-layout';
+import BriefQuestions from '../../components/brief-questions';
+import SingleQuestions from '../../components/single-questions';
+import MultipleQuestions from '../../components/multiple-questions';
+import JudgeQuestions from '../../components/judge-questions';
+import { uploadLayout } from '../../constant';
+import './index.less';
+export default class SingleBox extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            layoutList: uploadLayout,
+            currentIndex: 0,
+        };
+    }
+    /**
+     * 切换题型
+     * @param {*} id
+     */
+    onChangeQuestionsType = (layoutIndex) => {
+        let { layoutList, currentIndex } = this.state;
+        if (currentIndex === layoutIndex) {
+            return;
+        }
+        let list = layoutList.map((item, index) => {
+            let flag = false;
+            if (layoutIndex === index) {
+                flag = true;
+            }
+            return {
+                ...item,
+                active: flag,
+            };
+        });
+        this.setState({
+            layoutList: list,
+            currentIndex: layoutIndex,
+        });
+    };
+
+    render() {
+        const { currentIndex, layoutList } = this.state;
+        return (
+            <div style={{ display: 'flex' }}>
+                <UploadLeftLayout layoutList={layoutList} onChange={this.onChangeQuestionsType} />
+                <div className="upload-questions-modular">{this.changeReander(currentIndex)}</div>
+            </div>
+        );
+    }
+
+    changeReander = (i) => {
+        switch (i) {
+            case 0:
+                return <BriefQuestions questionsType={i + 1} key={`question_${i}`} />;
+            case 1:
+                return <SingleQuestions questionsType={i + 1} key={`question_${i}`} />;
+            case 2:
+                return <MultipleQuestions questionsType={i + 1} key={`question_${i}`} />;
+            case 3:
+                return <JudgeQuestions questionsType={i + 1} key={`question_${i}`} />;
+        }
+    };
+}