feat: 上传题目完善

src/components/category-list/index.jsx

@@ -37,6 +37,8 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
     const [currentActive, setCurrentActive] = useState(categoryList[0])
     const [isPutAway, setIsPutAway] = useState(true)
     const [loading, setLoading] = useState(false)
+    const [currentLabelIndex, setCurrentLabelIndex] = useState([])
+
 
     const getLabels = (id) => {
         return new Promise(resolve => {
@@ -65,8 +67,13 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
             let list = res.data
             for (let i = 0; i < list.length; i++) {
                 list[i].children = await getLabels(list[i].id)
+                if (i === 0) {
+                    list[i].children[0].active = true
+                }
             }
             setSecondCategoryList(_.cloneDeep(list))
+            setCurrentLabelIndex([0, 0])
+            props.onChangeLabel(_.get(list, [0, 'id']), _.get(list, [0, 'children', 0, 'id']))
         })
     }
 
@@ -128,7 +135,6 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
         );
     };
 
-    const [currentLabelIndex, setCurrentLabelIndex] = useState([])
 
     /**
      * 选择标签-支持单选（多选）

src/views/question-bank/index.tsx

@@ -1,5 +1,6 @@
 // import { Component } from 'react';
 import { useState, useEffect, memo } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import QuestionList from '@components/question-list';
 import CategoryList from '@components/category-list';
 import ContributionList from './components/contribution-list';
@@ -19,7 +20,14 @@ const QuestionBank = () => {
     const [total, setTotal] = useState(0); // 总条数
     const [pageIndex, setPageIndex] = useState(0);
     const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
+    const [secondCategoryId, setSecondCategoryId] = useState('')
 
+    let [searchParams, setSearchParams] = useSearchParams();
+    const changeUrlParam = () => {
+        // console.log(searchParams.size)
+        setSearchParams({ id: 1 })
+        // window.history.pushState({}, '0', window.location.href + '?url=' + '参数');
+    }
 
     /**
      * 获取大类分类
@@ -56,15 +64,13 @@ const QuestionBank = () => {
         setTotal(0)
     };
 
-    const [secondCategoryId, setSecondCategoryId] = useState('')
 
     /**
     * 选择标签时，请求列表数据
-    * @param {*} primaryCategoryId 一级分类id
+    * @param {*} secondCategoryId 一级分类id
     * @param {*} assembleIds 三级标签 assembleIds
     */
     const onChangeLabel = (secondCategoryId: any, assembleIds: string) => {
-        // setPromaryCategoryId(primaryCategory)
         setSecondCategoryId(secondCategoryId)
         setLabelList(assembleIds)
         setPageIndex(1)
@@ -95,10 +101,11 @@ const QuestionBank = () => {
     }, [])
 
     useEffect(() => {
-        if (labelList && primaryCategoryId) {
+        if (labelList && secondCategoryId) {
+            setSearchParams({ second: secondCategoryId, label: labelList })
             queryQuestionList()
         }
-    }, [labelList, primaryCategoryId, pageIndex])
+    }, [labelList, pageIndex, secondCategoryId])
 
 
     return (

src/views/upload-questions/components/brief-questions/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, createRef } from 'react';
 import { Input, Modal, message, Spin } from 'antd';
 
 import req from '@utils/request';
@@ -20,8 +20,8 @@ export default class BriefQuestions extends Component {
             isSubmit: true, // 是否支持提交
         };
     }
-    kindEditor = KindEditor | null;
+    kindEditor = createRef();
-    rankLabelBox = RankLabelBox | null;
+    rankLabelBox = createRef();
     rankId = 1; //职级
     subjectAnswer = ''; // 答案
     firstCategoryValue = ''; // 一级分类的值
@@ -73,26 +73,26 @@ export default class BriefQuestions extends Component {
         if (!isSubmit) {
             return;
         }
-        // if (!!!subjectName) {
+        if (!!!subjectName) {
-        //     message.warning('请输入题目名称');
+            message.warning('请输入题目名称');
-        //     return;
+            return;
-        // }
+        }
-        // if (!!!this.subjectAnswer) {
+        if (!!!this.subjectAnswer) {
-        //     message.warning('请输入题目答案');
+            message.warning('请输入题目答案');
-        //     return;
+            return;
-        // }
+        }
-        // if (!!!this.firstCategoryValue) {
+        if (!!!this.firstCategoryValue) {
-        //     message.warning('请选择一级分类');
+            message.warning('请选择一级分类');
-        //     return;
+            return;
-        // }
+        }
-        // if (this.secondCategoryValue.length <= 0) {
+        if (this.secondCategoryValue.length <= 0) {
-        //     message.warning('请选择二级分类');
+            message.warning('请选择二级分类');
-        //     return;
+            return;
-        // }
+        }
-        // if (this.thirdCategoryValue.length <= 0) {
+        if (this.thirdCategoryValue.length <= 0) {
-        //     message.warning('请选择三级标签');
+            message.warning('请选择三级标签');
-        //     return;
+            return;
-        // }
+        }
         this.setState({
             isSubmit: false,
         });
@@ -104,39 +104,19 @@ export default class BriefQuestions extends Component {
             subjectParse: '解析什么',
             subjectAnswer: this.subjectAnswer,
             categoryIds: this.secondCategoryValue.filter(item => item.active).map(t => t.id),
-            labelIds: [4, 5, 6],
+            labelIds: this.thirdCategoryValue.filter(item => item.active).map(t => t.id),
         };
-        // return console.log('录入 ----', params);
         req({
             method: 'post',
             data: params,
             url: apiName.add,
         })
             .then((res) => {
-                this.repeatInfo = {};
+                this.setState({
-                // if (res.data && res.data.insertStatus) {
+                    isSubmit: true,
-                //     this.setState(
+                }, () => {
-                //         {
+                    this.successModalConfirm();
-                //             isSubmit: true,
+                });
-                //         },
-                //         () => {
-                //             this.successModalConfirm();
-                //         }
-                //     );
-                // } else if (!res.data.insertStatus) {
-                //     this.repeatInfo = {
-                //         repeatDocId: res.data.docId, // 重复题目id
-                //         repeatRate: res.data.repeatRate, // 重复率
-                //         repeatSubjectName: res.data.subjectName, // 重复题目
-                //         repeatSubjectAnswe: res.data.subjectAnswer, // 重复答案
-                //         repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
-                //         repeatSetterName: res.data.subjectSetterName, // 出题人姓名
-                //     };
-                //     this.setState({
-                //         isShowModalBox: true,
-                //         isSubmit: true,
-                //     });
-                // }
             })
             .catch((err) => {
                 this.setState({
@@ -170,14 +150,15 @@ export default class BriefQuestions extends Component {
      * 取消
      */
     onCancel = () => {
+        console.log(this.kindEditor)
         this.subjectAnswer = ''; // 答案
         this.rankId = 1;
         this.firstCategoryValue = '';
         this.secondCategoryValue = [];
         this.thirdCategoryValue = [];
         this.repeatInfo = {};
-        this.kindEditor.onClear();
+        this.kindEditor.current.onClear();
-        this.rankLabelBox.initRankLabel();
+        this.rankLabelBox.current.initRankLabel();
         this.setState({
             subjectName: '',
             isShowModalBox: false,
@@ -318,6 +299,7 @@ export default class BriefQuestions extends Component {
                         subjectName={subjectName}
                         onChangeRankLabel={this.onChangeRankLabel}
                         handleChangeRank={this.handleChangeRank}
+                        ref={this.rankLabelBox}
                     />
                     <div className="brief-questions-btns-container">
                         <div className="brief-questions-btn" onClick={this.onCancel}>
@@ -350,6 +332,7 @@ export default class BriefQuestions extends Component {
             <div className="brief-questions-main">
                 <QuestionEditor
                     onChange={this.onChangeEditor}
+                    ref={this.kindEditor}
                 />
             </div>
         );

src/views/upload-questions/components/question-editor/index.jsx

@@ -1,12 +1,15 @@
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
-import React, { useState, useEffect } from 'react'
+import React, {
+    useState, useEffect, forwardRef,
+    useImperativeHandle,
+} from 'react'
 import { Editor, Toolbar } from '@wangeditor/editor-for-react'
-import { DomEditor } from '@wangeditor/editor'
+
 
 // 当前菜单排序和分组
 
-function MyEditor(props) {
+function MyEditor(props, ref) {
     // editor 实例
     const [editor, setEditor] = useState(null)
 
@@ -33,13 +36,15 @@ function MyEditor(props) {
         props.onChange(html)
     }
 
+    const onClear = () => setHtml('')
+    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
+    useImperativeHandle(ref, () => ({
+        // onCallback 就是暴露给父组件的方法
+        onClear
+    }));
+
     // 及时销毁 editor ，重要！
     useEffect(() => {
-        // if (editor) {
-        //     const toolbar = DomEditor.getToolbar(editor)
-        //     const curToolbarConfig = toolbar.getConfig()
-        //     console.log(curToolbarConfig.toolbarKeys)
-        // }
         return () => {
             if (editor == null) return
             editor.destroy()
@@ -69,4 +74,4 @@ function MyEditor(props) {
     )
 }
 
-export default MyEditor
+export default forwardRef(MyEditor)

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

@@ -1,11 +1,14 @@
-import React, { Component, Fragment, useState, useEffect } from 'react';
+import React, {
+    Component, Fragment, useState, useEffect, forwardRef,
+    useImperativeHandle,
+} from 'react';
 import req from '@utils/request';
 import TagsEditor from '@components/tags-editor';
 import { apiName, ModuleType, starList } from '../../constant';
 import './index.less';
 
 
-const RankLabelBox = (props) => {
+const RankLabelBox = (props, ref) => {
 
     const [rankList, setRankList] = useState(starList)
     const [firstCategoryList, setFirstCategoryList] = useState([])
@@ -40,6 +43,30 @@ const RankLabelBox = (props) => {
         geFirstCategoryList()
     }, [])
 
+    /**
+     * 初始化数据
+     */
+    const initRankLabel = () => {
+        // const [rankList, setRankList] = useState(starList)
+        // const [firstCategoryList, setFirstCategoryList] = useState([])
+        // const [firstSelected, setFirstSelected] = useState(null)
+        // const [secondCategoryList, setSecondCategoryList] = useState([])
+        // const [thirdCategoryList, setThirdCategoryList] = useState([])
+        setRankList(starList)
+        setFirstCategoryList([])
+        setFirstSelected(null)
+        setSecondCategoryList([])
+        setThirdCategoryList([])
+        setTimeout(() => {
+            geFirstCategoryList()
+        })
+    };
+
+    useImperativeHandle(ref, () => ({
+        // onCallback 就是暴露给父组件的方法
+        initRankLabel
+    }));
+
     /**
     * 选择职级-单选
     * @param {*} handleStatusList
@@ -225,7 +252,7 @@ const RankLabelBox = (props) => {
     )
 }
 
-export default RankLabelBox
+export default forwardRef(RankLabelBox)
 
 
 class RankLabelBox1 extends Component {