From 773dc83fbb52ef24a2174225dcd638368aab7de5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=8B=E6=B0=B4=E6=B5=AE=E5=B0=98?= <18510549872@163.comm> Date: Tue, 24 Oct 2023 01:33:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0=E9=A2=98=E7=9B=AE?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/category-list/index.jsx | 8 +- src/views/question-bank/index.tsx | 17 ++-- .../components/brief-questions/index.jsx | 85 ++++++++----------- .../components/question-editor/index.jsx | 23 +++-- .../components/rank-label-box/index.jsx | 33 ++++++- 5 files changed, 97 insertions(+), 69 deletions(-) diff --git a/src/components/category-list/index.jsx b/src/components/category-list/index.jsx index 050dac9..da17272 100644 --- a/src/components/category-list/index.jsx +++ b/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([]) /** * 选择标签-支持单选（多选） diff --git a/src/views/question-bank/index.tsx b/src/views/question-bank/index.tsx index c621bcb..f56dd1f 100644 --- a/src/views/question-bank/index.tsx +++ b/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 ( diff --git a/src/views/upload-questions/components/brief-questions/index.jsx b/src/views/upload-questions/components/brief-questions/index.jsx index 968c475..548368f 100644 --- a/src/views/upload-questions/components/brief-questions/index.jsx +++ b/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; - rankLabelBox = RankLabelBox | null; + kindEditor = createRef(); + rankLabelBox = createRef(); rankId = 1; //职级 subjectAnswer = ''; // 答案 firstCategoryValue = ''; // 一级分类的值 @@ -73,26 +73,26 @@ export default class BriefQuestions extends Component { if (!isSubmit) { return; } - // if (!!!subjectName) { - // message.warning('请输入题目名称'); - // return; - // } - // if (!!!this.subjectAnswer) { - // message.warning('请输入题目答案'); - // return; - // } - // if (!!!this.firstCategoryValue) { - // message.warning('请选择一级分类'); - // return; - // } - // if (this.secondCategoryValue.length <= 0) { - // message.warning('请选择二级分类'); - // return; - // } - // if (this.thirdCategoryValue.length <= 0) { - // message.warning('请选择三级标签'); - // return; - // } + if (!!!subjectName) { + message.warning('请输入题目名称'); + return; + } + if (!!!this.subjectAnswer) { + message.warning('请输入题目答案'); + return; + } + if (!!!this.firstCategoryValue) { + message.warning('请选择一级分类'); + return; + } + if (this.secondCategoryValue.length <= 0) { + message.warning('请选择二级分类'); + return; + } + if (this.thirdCategoryValue.length <= 0) { + message.warning('请选择三级标签'); + 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 = {}; - // if (res.data && res.data.insertStatus) { - // this.setState( - // { - // 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, - // }); - // } + this.setState({ + isSubmit: true, + }, () => { + this.successModalConfirm(); + }); }) .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.rankLabelBox.initRankLabel(); + this.kindEditor.current.onClear(); + 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} />
@@ -350,6 +332,7 @@ export default class BriefQuestions extends Component {
); diff --git a/src/views/upload-questions/components/question-editor/index.jsx b/src/views/upload-questions/components/question-editor/index.jsx index 5cfdfba..370bbc8 100644 --- a/src/views/upload-questions/components/question-editor/index.jsx +++ b/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 \ No newline at end of file +export default forwardRef(MyEditor) \ No newline at end of file diff --git a/src/views/upload-questions/components/rank-label-box/index.jsx b/src/views/upload-questions/components/rank-label-box/index.jsx index 1355a24..1cdc26d 100644 --- a/src/views/upload-questions/components/rank-label-box/index.jsx +++ b/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 {