feat: 首页逻辑

src/components/category-list/index.jsx

@@ -137,9 +137,29 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
      * @returns
      */
     const onChangeLabel = (secondCategoryIndex, thirdCategoryIndex, active) => () => {
+        const { isMultipleChoice } = props;
         const list = _.cloneDeep(secondCategoryList)
-        _.set(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'active'], !active)
+        if (isMultipleChoice) {
-        setSecondCategoryList(list)
+            // 三级标签支持多选
+            _.set(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'active'], !active)
+            setSecondCategoryList(list)
+        } else {
+            // 三级标签支持单选
+            let formatLabelList = list[secondCategoryIndex].children.map((item, index) => {
+                let flag = false;
+                if (index === thirdCategoryIndex) {
+                    flag = !active; // 将三级标签设置选中/未选中
+                }
+                return {
+                    ...item,
+                    active: flag,
+                };
+            });
+            _.set(list, [secondCategoryIndex, 'children'], formatLabelList);
+            setSecondCategoryList(list)
+        }
+        // console.log(currentActive, _.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id']))
+        props.onChangeLabel(_.get(list, [secondCategoryIndex, 'id']), _.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id']))
     };
 
     /**
@@ -148,23 +168,15 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
     * @returns
     */
     const onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => {
-        return
-        let { secondCategoryList } = this.state;
         _.set(secondCategoryList, [secondCategoryIndex, 'isOpen'], !isOpen);
-        this.setState({
+        setSecondCategoryList(secondCategoryList)
-            secondCategoryList,
-        });
     };
 
     /**
      * 展开/收起
      */
     const onChangePutAway = () => {
-        return
+        setIsPutAway(!isPutAway)
-        let { isPutAway } = this.state;
-        this.setState({
-            isPutAway: !isPutAway,
-        });
     };
 
     /**
@@ -211,31 +223,33 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
                                                                 thirdCategoryIndex,
                                                                 (thirdCategoryItem.active || false)
                                                             )}>
-                                                            {thirdCategoryItem.labelName}·
+                                                            {thirdCategoryItem.labelName}
-                                                            {thirdCategoryItem.subjectCount || 0}
                                                         </div>
                                                     );
                                                 }
                                             )}
                                         </div>
-                                        <div
+                                        {
-                                            id={`second_id_${secondCategoryIndex}`}
+                                            secondCategoryItem.children.length > 5 ? <div
-                                            className="second-category-item-status"
+                                                id={`second_id_${secondCategoryIndex}`}
-                                            onClick={onChangeOpenStatus(
+                                                className="second-category-item-status"
-                                                secondCategoryIndex,
+                                                onClick={onChangeOpenStatus(
-                                                secondCategoryItem.isOpen
+                                                    secondCategoryIndex,
-                                            )}>
+                                                    secondCategoryItem.isOpen
-                                            <div className="second-category-item-type" style={{ fontSize: 12 }}>
+                                                )}>
-                                                {secondCategoryItem.isOpen ? '收起' : '展开'}
+                                                <div className="second-category-item-type" style={{ fontSize: 12 }}>
-                                            </div>
+                                                    {secondCategoryItem.isOpen ? '收起' : '展开'}
-                                            <div className="second-category-item-icon" style={{ fontSize: 12 }}>
+                                                </div>
-                                                {secondCategoryItem.isOpen ? (
+                                                <div className="second-category-item-icon" style={{ fontSize: 12 }}>
-                                                    <UpOutlined />
+                                                    {secondCategoryItem.isOpen ? (
-                                                ) : (
+                                                        <UpOutlined />
-                                                    <DownOutlined />
+                                                    ) : (
-                                                )}
+                                                        <DownOutlined />
-                                            </div>
+                                                    )}
-                                        </div>
+                                                </div>
+                                            </div> : null
+                                        }
+
                                     </div>
                                 )}
                             </div>
@@ -248,6 +262,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
                             style={{
                                 marginTop: 10,
                                 fontSize: 13,
+                                cursor: 'pointer'
                             }}>
                             {isPutAway ? '展开' : '收起'}
                             {isPutAway ? (
@@ -405,7 +420,7 @@ class CategoryList1 extends Component {
         if (isMultipleChoice) {
             // 三级标签支持多选
             _.set(childrenLevelList, [thirdCategoryIndex, 'active'], !active);
-            _.set(secondCategoryList, [secondCategoryIndex, 'labelInfoList'], childrenLevelList);
+            _.set(secondCategoryList, [secondCategoryIndex, 'children'], childrenLevelList);
         } else {
             // 三级标签支持单选
             let formatLabelList = childrenLevelList.map((item, index) => {
@@ -418,7 +433,7 @@ class CategoryList1 extends Component {
                     active: flag,
                 };
             });
-            _.set(secondCategoryList, [secondCategoryIndex, 'labelInfoList'], formatLabelList);
+            _.set(secondCategoryList, [secondCategoryIndex, 'children'], formatLabelList);
         }
         this.setState(
             {
@@ -427,7 +442,7 @@ class CategoryList1 extends Component {
             () => {
                 let activeList = [];
                 secondCategoryList.forEach((categoryItem) => {
-                    categoryItem.labelInfoList.forEach((item) => {
+                    categoryItem.children.forEach((item) => {
                         if (item.active) {
                             activeList.push(item.assembleId);
                         }
@@ -545,8 +560,7 @@ class CategoryList1 extends Component {
                                                             thirdCategoryIndex,
                                                             thirdCategoryItem.active
                                                         )}>
-                                                        {thirdCategoryItem.labelName}·
+                                                        {thirdCategoryItem.labelName}
-                                                        {thirdCategoryItem.subjectCount}
                                                     </div>
                                                 );
                                             }

src/components/question-list/index.jsx

@@ -37,11 +37,11 @@ const QuestionList = (props) => {
       </div></div>,
       key: "questionNo",
       align: "centlefter",
-      render: (item) => {
+      render: (item, record) => {
         return (
           <div className="question-info-container">
             <div className="question-info-desc">
-              {item.questionTitle}
+              {record.subjectName}
 
             </div>
             <div className="question-info-tags">
@@ -60,8 +60,8 @@ const QuestionList = (props) => {
     },
     {
       title: "难度",
-      dataIndex: "grade",
+      dataIndex: "subjectDifficult",
-      key: "grade",
+      key: "subjectDifficult",
       align: "center",
       filters: [
         {

src/components/tags-editor/index.jsx

@@ -207,7 +207,7 @@ export default class TagsEditor extends Component {
         let labelList = [];
         list.forEach((item) => {
             if (item.active) {
-                labelList.push(item.categoryId);
+                labelList.push(item.id);
             }
         });
         return labelList;
@@ -242,10 +242,10 @@ export default class TagsEditor extends Component {
                                     backgroundColor: '#fff',
                                     cursor: 'pointer',
                                 }}
-                                key={item.categoryId}
+                                key={item.id}
                                 // 支持删除标签
                                 closable={item.isShowClose && isDeleteTag}
-                                className={`tags-editor-item ${item.active && 'tag-active'}`}
+                                className={`tags-editor-item ${item.active ? 'tag-active' : ''}`}
                                 onClick={this.onChangeLabel(index, item.active)}
                                 onClose={() => this.handleClose(index, item.categoryId)}>
                                 {isLongTag
@@ -254,7 +254,7 @@ export default class TagsEditor extends Component {
                             </Tag>
                         );
                         return isLongTag ? (
-                            <Tooltip title={item.categoryName} key={item.categoryId}>
+                            <Tooltip title={item.categoryName} key={item.id}>
                                 {tagElem}
                             </Tooltip>
                         ) : (

src/components/tags-editor/index.less

@@ -3,9 +3,12 @@
     display: flex;
     flex-wrap: wrap;
     .tag-active {
-        @include box-backgroundColor(0.1);
+        // @include box-backgroundColor(0.1);
-        @include box-border();
+        // @include box-border();
-        @include font-color();
+        // @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)
     }
     .ant-tag .anticon-close {
         font-size: 11px;

src/components/top-menu/index.jsx

@@ -23,7 +23,6 @@ const MENULIST = [
     key: 'interList',
     title: '模拟面试',
     route: '/inter-list',
-    // isOpenNewWindow: true,
   },
 ]
 

src/views/question-bank/constant.ts

@@ -66,6 +66,9 @@ export const apiName = {
      */
     queryCategoryByPrimary: '/category/queryCategoryByPrimary',
 
+    // 获取题目列表
+    getSubjectPage: '/getSubjectPage'
+
 };
 
 export const imgObject = {

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>

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) => {
+                        // ref={(ref) => {
-                            this.rankLabelBox = ref;
+                        //     this.rankLabelBox = ref;
-                        }}
+                        // }}
                         subjectName={subjectName}
                         onChangeRankLabel={this.onChangeRankLabel}
                         handleChangeRank={this.handleChangeRank}

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>
+        );
+    }
 }
 

src/views/upload-questions/components/rank-label-box/index.less

@@ -36,9 +36,9 @@
             height: 40px;
         }
         .tag-active {
-            @include box-backgroundColor(0.1);
+            background-color: rgba(60, 110, 238, 0.1);
-            @include box-border();
+            color: rgba(60, 110, 238, 1);
-            @include font-color();
+            border: 1px solid rgba(60, 110, 238, 1)
         }
     }
 }

src/views/upload-questions/constant.js

@@ -5,7 +5,10 @@ export const apiName = {
     /**
      * 获取一级
      */
-    queryPrimaryCategory: '/subject/category/queryPrimaryCategory',
+    queryPrimaryCategory: '/category/queryPrimaryCategory',
+
+    // 根据一级分类查询二级及标签
+    queryLabelByCategoryId: '/label/queryLabelByCategoryId',
 
     /**
      * 获取三级分类标签