QingYu-Club/qing-yu-club-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 上传题目完善

Browse Source
This commit is contained in:
秋水浮尘
2023-10-24 01:33:45 +08:00
parent 26f51df723
commit 773dc83fbb
5 changed files with 97 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/category-list/index.jsx
View File

@@ -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([])
/**
* 选择标签-支持单选（多选）

17
src/views/question-bank/index.tsx
View File

@@ -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 (

85
src/views/upload-questions/components/brief-questions/index.jsx
View File

@@ -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}
/>
<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>
);

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

@@ -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)

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

@@ -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 {