feat: 首页逻辑

2023-10-18 01:49:01 +08:00
parent 5214648d90
commit 9828f6cbbb
11 changed files with 291 additions and 79 deletions
--- a/src/views/question-bank/constant.ts
+++ b/src/views/question-bank/constant.ts
@@ -66,6 +66,9 @@ export const apiName = {
     */
    queryCategoryByPrimary: '/category/queryCategoryByPrimary',

+    // 获取题目列表
+    getSubjectPage: '/getSubjectPage'
+
 };

 export const imgObject = {
--- a/src/views/question-bank/index.tsx
+++ b/src/views/question-bank/index.tsx
@@ -15,10 +15,10 @@ const QuestionBank = () => {
    const [firstCategoryList, setFirstCategoryList] = useState([])
    const [questionList, setQuestionList] = useState([])
    const [isShowSpin, setIsShowSpin] = useState(false)
-    const [labelList, setLabelList] = useState<string[]>([]); // 选中的标签列表
+    const [labelList, setLabelList] = useState<string | number>(); // 选中的标签列表
    const [difficulty, setDiffculty] = useState(0); //困难度（全部）
    const [total, setTotal] = useState(0); // 总条数
-    const [pageIndex, setPageIndex] = useState(1);
+    const [pageIndex, setPageIndex] = useState(0);
    const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id


@@ -50,7 +50,7 @@ const QuestionBank = () => {
    * @param {*} e
    */
    const onChangeCategory = (item: Record<string, any>) => {
-        setLabelList([])
+        setLabelList('')
        setPromaryCategoryId(item.id)
        setPageIndex(1)
    };
@@ -60,18 +60,44 @@ const QuestionBank = () => {
    * @param {*} primaryCategoryId 一级分类id
    * @param {*} assembleIds 三级标签 assembleIds
    */
-    const onChangeLabel = (primaryCategoryId: string, assembleIds: string[]) => {
+    const onChangeLabel = (primaryCategory: any, assembleIds: string) => {
+        setPromaryCategoryId(primaryCategory)
        setLabelList(assembleIds)
-        setPromaryCategoryId(primaryCategoryId)
        setPageIndex(1)
    };

+    const queryQuestionList = () => {
+        const params = {
+            pageNo: pageIndex,
+            pageSize: 10,
+            labelId: labelList,
+            categoryId: primaryCategoryId,
+            subjectDifficult: 1
+        }
+        req({
+            method: 'post',
+            url: apiName.getSubjectPage,
+            data: params
+        }).then(res => {
+            console.log(res)
+            setTotal(res.data.total)
+            setQuestionList(res.data.result)
+        })
+    }
+
    useEffect(() => {
        if (!primaryCategoryId) {
            getPrimaryCategoryInfo()
        }
    }, [])

+    useEffect(() => {
+        if (labelList && primaryCategoryId) {
+            queryQuestionList()
+        }
+    }, [labelList, primaryCategoryId, pageIndex])
+
+
    return (
        <div className="question-bank-box">
            <Spin spinning={isShowSpin}>
@@ -83,6 +109,7 @@ const QuestionBank = () => {
                                categoryList={firstCategoryList}
                                onChangeLabel={onChangeLabel}
                                primaryCategoryId={primaryCategoryId}
+                                isMultipleChoice={false}
                            />
                        )}
                    </div>
--- a/src/views/upload-questions/components/brief-questions/index.jsx
+++ b/src/views/upload-questions/components/brief-questions/index.jsx
@@ -308,12 +308,12 @@ export default class BriefQuestions extends Component {
                    </div>
                    <div className="brief-questions-container">
                        <div className="brief-questions-title">题目答案：</div>
-                        {this.reanderAnser()}
+                        {/* {this.reanderAnser()} */}
                    </div>
                    <RankLabelBox
-                        ref={(ref) => {
-                            this.rankLabelBox = ref;
-                        }}
+                        // ref={(ref) => {
+                        //     this.rankLabelBox = ref;
+                        // }}
                        subjectName={subjectName}
                        onChangeRankLabel={this.onChangeRankLabel}
                        handleChangeRank={this.handleChangeRank}
--- a/src/views/upload-questions/components/rank-label-box/index.jsx
+++ b/src/views/upload-questions/components/rank-label-box/index.jsx
@@ -1,9 +1,170 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, useState, useEffect } from 'react';
 import req from '@utils/request';
 import TagsEditor from '@components/tags-editor';
 import { apiName, ModuleType, starList } from '../../constant';
 import './index.less';
-export default class RankLabelBox extends Component {
+
+
+const RankLabelBox = (props) => {
+
+    const [rankList, setRankList] = useState(starList)
+    const [firstCategoryList, setFirstCategoryList] = useState([])
+    const [firstSelected, setFirstSelected] = useState(null)
+    const [secondCategoryList, setSecondCategoryList] = useState([])
+
+    /**
+     * 获得一级分类数据
+     */
+    const geFirstCategoryList = () => {
+        const params = { categoryType: 1 };
+        req({
+            method: 'post',
+            data: params,
+            url: apiName.queryPrimaryCategory,
+        })
+            .then((res) => {
+                console.log(res)
+                const list = res.data.map((item, index) => {
+                    return {
+                        ...item,
+                        active: index == 0 ? true : false,
+                    };
+                });
+                setFirstCategoryList(list)
+                setFirstSelected(list[0].id)
+            })
+            .catch((err) => console.log(err));
+    }
+
+    useEffect(() => {
+        geFirstCategoryList()
+    }, [])
+
+    /**
+    * 选择职级-单选
+    * @param {*} handleStatusList
+    * @param {*} selectList
+    */
+    const onHandleChangeRank = (handleStatusList, selectList) => {
+        // console.log(handleStatusList, selectList)
+        setRankList(handleStatusList)
+        // this.props.handleChangeRank(selectList);
+    };
+
+    /**
+     * 职级选择
+     * @param {*} rankList
+     * @returns
+     */
+    const rendeRrankModule = () => {
+        return (
+            <div className="upload-single-container">
+                <div className="upload-single-title">职级选择：</div>
+                <div className="upload-single-main">
+                    <TagsEditor
+                        categoryList={rankList}
+                        isSingleChoice={true}
+                        onChangeLabel={onHandleChangeRank}
+                        isDisabledReverseSelection={true}
+                    />
+                    {/* <span style={{ marginLeft: '8px', color: 'red' }}>
+                        注：所选职级应为熟练掌握该题的最低职级
+                    </span> */}
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * 选择一级分类-单选
+     * @param {*} handleStatusList 带有是否选中状态的原数组
+     * @param {*} selectList 选中id的数组
+     */
+    const onChangeFirst = (handleStatusList, selectList) => {
+        setFirstCategoryList(handleStatusList)
+        setFirstSelected(selectList[0])
+    };
+
+    /**
+     * 获得二级分类数据
+     * @param {*} id 一级分类id
+     */
+    const getSecondCategoryList = (id) => {
+        const params = { categoryId: id };
+        req({
+            method: 'post',
+            data: params,
+            url: apiName.queryLabelByCategoryId,
+        })
+            .then((res) => {
+                setSecondCategoryList(res.data)
+                // this.firstCategoryValue = id;
+                // this.secondCategoryValue = [];
+                // this.thirdCategoryValue = [];
+                // if (res.data && res.data.length > 0) {
+                //     this.setState({
+                //         secondCategoryList: res.data,
+                //     });
+                // } else {
+                //     // 若需要新增时，则需要将数组第一个item，重置如下
+                //     this.setState({
+                //         secondCategoryList: [{ categoryName: '空', categoryId: -9999 }],
+                //     });
+                // }
+            })
+            .catch((err) => console.log(err));
+    }
+
+    useEffect(() => {
+        if (firstSelected) {
+            getSecondCategoryList(firstSelected);
+        }
+
+    }, [firstSelected])
+
+    /**
+     * 一级分类选择
+     * @param {*} firstCategoryList
+     * @returns
+     */
+    const renderFirstModule = (firstCategoryList) => {
+        return (
+            <Fragment>
+                {firstCategoryList?.length > 0 && (
+                    <div className="upload-single-container">
+                        <div className="upload-single-title">一级分类：</div>
+                        <div className="upload-single-main">
+                            <TagsEditor
+                                categoryList={firstCategoryList}
+                                isSingleChoice={true}
+                                onChangeLabel={onChangeFirst}
+                                isDisabledReverseSelection={true}
+                            />
+                        </div>
+                    </div>
+                )}
+            </Fragment>
+        );
+    };
+
+    return (
+        <Fragment>
+            {rendeRrankModule()}
+            {renderFirstModule(firstCategoryList)}
+            {/* {secondCategoryList?.length > 0 && (
+                <Fragment>
+                    {this.renderSecondModule(secondCategoryList)}
+                    {thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)}
+                </Fragment>
+            )} */}
+        </Fragment>
+    )
+}
+
+export default RankLabelBox
+
+
+class RankLabelBox1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
@@ -234,21 +395,7 @@ export default class RankLabelBox extends Component {
        );
    };

-    render() {
-        const { firstCategoryList, secondCategoryList, thirdCategoryList, rankList } = this.state;
-        return (
-            <Fragment>
-                {this.rendeRrankModule(rankList)}
-                {this.renderFirstModule(firstCategoryList)}
-                {secondCategoryList?.length > 0 && (
-                    <Fragment>
-                        {this.renderSecondModule(secondCategoryList)}
-                        {thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)}
-                    </Fragment>
-                )}
-            </Fragment>
-        );
-    }
+

    /**
     * 职级选择
@@ -346,5 +493,21 @@ export default class RankLabelBox extends Component {
            </div>
        );
    };
+
+    render() {
+        const { firstCategoryList, secondCategoryList, thirdCategoryList, rankList } = this.state;
+        return (
+            <Fragment>
+                {this.rendeRrankModule(rankList)}
+                {this.renderFirstModule(firstCategoryList)}
+                {secondCategoryList?.length > 0 && (
+                    <Fragment>
+                        {this.renderSecondModule(secondCategoryList)}
+                        {thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)}
+                    </Fragment>
+                )}
+            </Fragment>
+        );
+    }
 }

--- a/src/views/upload-questions/components/rank-label-box/index.less
+++ b/src/views/upload-questions/components/rank-label-box/index.less
@@ -36,9 +36,9 @@
            height: 40px;
        }
        .tag-active {
-            @include box-backgroundColor(0.1);
-            @include box-border();
-            @include font-color();
+            background-color: rgba(60, 110, 238, 0.1);
+            color: rgba(60, 110, 238, 1);
+            border: 1px solid rgba(60, 110, 238, 1)
        }
    }
 }
--- a/src/views/upload-questions/constant.js
+++ b/src/views/upload-questions/constant.js
@@ -5,7 +5,10 @@ export const apiName = {
    /**
     * 获取一级
     */
-    queryPrimaryCategory: '/subject/category/queryPrimaryCategory',
+    queryPrimaryCategory: '/category/queryPrimaryCategory',
+
+    // 根据一级分类查询二级及标签
+    queryLabelByCategoryId: '/label/queryLabelByCategoryId',

    /**
     * 获取三级分类标签