Skip to content

X
xiaomai-cloud-class-web
Commit acb5ccd5 by yuananting
Options

feat:样式调整+保存继续添加

parent 14a1f959
Showing with 89 additions and 90 deletions
src/modules/teach-tool/AddNewQuestion.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 13:46:35
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 11:15:19
* @LastEditTime: 2021-03-18 14:12:22
* @Description: 助学工具-题库-题目管理-新增题目
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,7 +12,7 @@ import Breadcrumbs from "@/components/Breadcrumbs";
import ShowTips from "@/components/ShowTips";
import "./AddNewQuestion.less";
import NewQuestionTab from "./components/NewQuestionTab";
import { defineOptionInfo, defineQuestionInfo } from "./components/model";
import { defineJudgeOptionInfo, defineOptionInfo, defineQuestionInfo } from "./components/model";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
import User from "@/common/js/user";
import UploadOss from "@/core/upload";
......@@ -37,12 +37,14 @@ class AddNewQuestion extends Component {
judgeContent: defineQuestionInfo("JUDGE"), // 判断题
gapFillingContent: defineQuestionInfo("GAP_FILLING"), // 填空题
indefiniteChoiceContent: defineQuestionInfo("INDEFINITE_CHOICE"), // 不定项选择题
currentOperate: "new",
};
}
componentDidMount() {
if (getParameterByName("id")) {
// 编辑
this.setState({ currentOperate: "edit" });
this.queryQuestionDetails();
}
}
......@@ -78,19 +80,29 @@ class AddNewQuestion extends Component {
};
handleRest = (type) => {
this.setState({ currentOperate: "add" });
switch (type) {
case "SINGLE_CHOICE":
this.setState({
singleChoiceContent: defineQuestionInfo("SINGLE_CHOICE"),
}, () => this.state.singleChoiceContent.optionList.push(defineOptionInfo()));
let singleChoiceContent = defineQuestionInfo("SINGLE_CHOICE");
for (var i = 0; i < 4; i++) {
singleChoiceContent.optionList.push(defineOptionInfo());
}
this.setState({ singleChoiceContent });
break;
case "MULTI_CHOICE":
this.setState({
multiChoiceContent: defineQuestionInfo("MULTI_CHOICE"),
}, () => this.state.multiChoiceContent.optionList.push(defineOptionInfo()));
let multiChoiceContent = defineQuestionInfo("MULTI_CHOICE");
for (var i = 0; i < 4; i++) {
multiChoiceContent.optionList.push(defineOptionInfo());
}
this.setState({ multiChoiceContent });
break;
case "JUDGE":
this.setState({ judgeContent: defineQuestionInfo("JUDGE") });
let judgeContent = defineQuestionInfo("JUDGE");
var judgeOptions = ["正确", "错误"];
judgeOptions.forEach(item=>{
judgeContent.optionList.push(defineJudgeOptionInfo(item));
})
this.setState({ judgeContent });
break;
case "GAP_FILLING":
this.setState({
......@@ -98,10 +110,11 @@ class AddNewQuestion extends Component {
});
break;
case "INDEFINITE_CHOICE":
this.setState({
indefiniteChoiceContent: defineQuestionInfo("INDEFINITE_CHOICE"),
}, () => this.state.indefiniteChoiceContent.optionList.push(defineOptionInfo()));
break;
let indefiniteChoiceContent = defineQuestionInfo("INDEFINITE_CHOICE");
for (var i = 0; i < 4; i++) {
indefiniteChoiceContent.optionList.push(defineOptionInfo());
}
this.setState({ indefiniteChoiceContent });
}
};
......@@ -127,8 +140,7 @@ class AddNewQuestion extends Component {
});
let params = {};
let categoryId = getParameterByName("categoryId");
if (getParameterByName("id")) {
if (getParameterByName("id") && this.state.currentOperate === "edit") {
params = {
...content,
id: getParameterByName("id"),
......@@ -142,10 +154,10 @@ class AddNewQuestion extends Component {
if (res.success) {
message.success("保存成功");
if (next === "add") {
// this.handleRest(type);
window.RCHistory.push({
pathname: `/create-new-question?categoryId=${params.categoryId}&key=${type}`,
});
this.handleRest(type);
// window.RCHistory.push({
// pathname: `/create-new-question?categoryId=${params.categoryId}&key=${type}`,
// });
}
if (next === "close") {
window.RCHistory.push({
......@@ -166,9 +178,7 @@ class AddNewQuestion extends Component {
if (res.success) {
message.success("保存成功");
if (next === "add") {
window.RCHistory.push({
pathname: `/create-new-question?categoryId=${params.categoryId}&key=${type}`,
});
this.handleRest(type);
}
if (next === "close") {
window.RCHistory.push({
......@@ -254,7 +264,7 @@ class AddNewQuestion extends Component {
return (
<div className="page add-new-question">
<Breadcrumbs
navList={getParameterByName("id") ? "编辑题目" : "新增题目"}
navList={getParameterByName("id") && this.state.currentOperate==="edit" ? "编辑题目" : "新增题目"}
goBack={() => this.handleGoBack()}
/>
<div className="box">
......@@ -279,7 +289,6 @@ class AddNewQuestion extends Component {
}}
questionInfo={singleChoiceContent}
onSetState={(newContent) => {
console.log("newContent:", newContent);
Object.assign(singleChoiceContent, newContent);
}}
onLogger={this.handleLogger}
......@@ -328,7 +337,6 @@ class AddNewQuestion extends Component {
questionInfo={gapFillingContent}
onSetState={(newContent) => {
Object.assign(gapFillingContent, newContent);
console.log("gapFillingContent:", newContent);
}}
/>
</TabPane>
......
src/modules/teach-tool/QuestionCategoryManage.less
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-23 19:41:42
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:32:37
* @LastEditTime: 2021-03-18 13:58:30
* @Description: 助学工具-题库-题目分类管理样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -53,10 +53,11 @@
}
}
}
// .ant-tree-treenode-selected:hover::before,
// .ant-tree-treenode-selected::before {
// background: rgb(255 251 240);
// }
.ant-tree-treenode-selected:hover::before,
.ant-tree-treenode-selected::before {
background: #ffb714;
opacity: 0.06;
}
}
}
.xm-show-tip {
......
src/modules/teach-tool/components/NewQuestionTab.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 14:34:29
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 11:03:21
* @LastEditTime: 2021-03-18 14:11:46
* @Description: 助学工具-题库-题目管理-新建题目Tab
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -23,7 +23,6 @@ import XMRecord from "./XMRecord";
import ScanFileModal from "@/modules/resource-disk/modal/ScanFileModal";
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
import _ from "lodash";
import UploadOss from "@/core/upload";
class NewQuestionTab extends Component {
constructor(props) {
......@@ -84,7 +83,6 @@ class NewQuestionTab extends Component {
};
static getDerivedStateFromProps(nextProps, prevState) {
console.log("nextProps:", nextProps)
// 控制录音组件展示
if (nextProps.showBox && !prevState.showBox) {
return {
......@@ -100,22 +98,9 @@ class NewQuestionTab extends Component {
shouldComponentUpdate(nextProps, nextState) {
const { questionInfo } = nextProps;
if (this.props.questionInfo !== questionInfo) {
console.log("*********改变了：", questionInfo)
this.setState(
{
stemContent: JSON.parse(
JSON.stringify(questionInfo.questionStemList)
),
},
() => {
const editorHtml = this.transferStemDocument(
questionInfo.questionStemList[0].content
);
const _blanksList = editorHtml.getElementsByClassName("fill-line");
// this.setState({blanksList:_blanksList})
console.log("转:", editorHtml.getElementsByClassName("fill-line"));
}
); // 题干内容
this.setState({
stemContent: JSON.parse(JSON.stringify(questionInfo.questionStemList)),
}); // 题干内容
this.setState({
chooseOptions: JSON.parse(JSON.stringify(questionInfo.optionList)),
}); // 单选多选不定项-选项列表
......@@ -217,7 +202,7 @@ class NewQuestionTab extends Component {
if (
optionContent.length === 1 &&
optionContent[0].type === "RICH_TEXT" &&
optionContent[0].content.length === 0
optionContent[0].textLength === 0
) {
this.setState({ [`optionsValidate_${index}`]: "error" });
this.setState({ [`optionsText_${index}`]: "请输入选项" });
......@@ -328,8 +313,8 @@ class NewQuestionTab extends Component {
const voiceMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "VOICE";
});
const recordMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "RECORD";
const audioMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "AUDIO";
});
const videodMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "VIDEO";
......@@ -343,8 +328,8 @@ class NewQuestionTab extends Component {
if (voiceMediaArr.length > 0) {
existType.push("VOICE");
}
if (recordMediaArr.length > 0) {
existType.push("RECORD");
if (audioMediaArr.length > 0) {
existType.push("AUDIO");
}
if (videodMediaArr.length > 0) {
existType.push("VIDEO");
......@@ -371,8 +356,8 @@ class NewQuestionTab extends Component {
if (voiceMediaArr.length > 0) {
existType.push("VOICE");
}
if (recordMediaArr.length > 0) {
existType.push("RECORD");
if (audioMediaArr.length > 0) {
existType.push("AUDIO");
}
if (videodMediaArr.length > 0) {
existType.push("VIDEO");
......@@ -389,8 +374,8 @@ class NewQuestionTab extends Component {
if (voiceMediaArr.length > 0) {
existType.push("VOICE");
}
if (recordMediaArr.length > 0) {
existType.push("RECORD");
if (audioMediaArr.length > 0) {
existType.push("AUDIO");
}
if (videodMediaArr.length > 0) {
existType.push("VIDEO");
......@@ -404,7 +389,7 @@ class NewQuestionTab extends Component {
if (key === "VOICE" && voiceMediaArr.length > 2) {
return message.warning("只能添加3个音频");
}
if (key === "RECORD" && recordMediaArr.length > 2) {
if (key === "AUDIO" && audioMediaArr.length > 2) {
return message.warning("只能添加3个录音");
}
if (key === "VIDEO" && videodMediaArr.length > 2) {
......@@ -427,13 +412,13 @@ class NewQuestionTab extends Component {
},
() => {
this.uploadInput.current.value = "";
this.setState({ showSelectFileModal: key !== "RECORD" });
this.setState({ showSelectFileModal: key !== "AUDIO" });
// this.uploadInput.current.click();
}
);
// 录音
if (key === "RECORD") {
if (key === "AUDIO") {
this.setState({
showRecord: true,
});
......@@ -686,8 +671,8 @@ class NewQuestionTab extends Component {
const voiceMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "VOICE";
});
const recordMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "RECORD";
const audioMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "AUDIO";
});
const videoMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "VIDEO";
......@@ -768,26 +753,26 @@ class NewQuestionTab extends Component {
})}
</div>
)}
{recordMediaList.length > 0 && (
{audioMediaList.length > 0 && (
<div className="desc-audio-box">
{_.map(recordMediaList, (recordItem, recordIndex) => {
let { content, status, size } = recordItem;
{_.map(audioMediaList, (audioItem, audioIndex) => {
let { content, status, size } = audioItem;
if (["init", "fail"].includes(status)) {
return (
<div className="mt12" key={recordIndex}>
<div className="mt12" key={audioIndex}>
<UploadingProgress
fileDesc={recordItem}
fileDesc={audioItem}
canCancelUpload
onReupload={() => this.handleReupload(recordItem)}
onReupload={() => this.handleReupload(audioItem)}
onAbort={() =>
this.handleAbort(recordItem, recordIndex)
this.handleAbort(audioItem, audioIndex)
}
/>
</div>
);
} else {
return (
<div className="audio-box" key={recordIndex}>
<div className="audio-box" key={audioIndex}>
<XMAudio
forbidParse
url={content}
......@@ -795,14 +780,14 @@ class NewQuestionTab extends Component {
size = durationSize;
this.setState({});
}}
index={recordIndex}
index={audioIndex}
size={size || 1000}
/>
<span
className="icon_sider iconfont"
onClick={() => {
contentList.map((item, index) => {
if (item.contentName === recordItem.contentName) {
if (item.contentName === audioItem.contentName) {
contentList.splice(index, 1);
return item;
}
......@@ -962,7 +947,7 @@ class NewQuestionTab extends Component {
</div>
);
break;
case "RECORD":
case "AUDIO":
dom = (
<div className="audio-box">
<XMAudio
......@@ -1089,7 +1074,7 @@ class NewQuestionTab extends Component {
const { uploadItemTarget, contentType } = this.state;
uploadItemTarget.push({
contentType,
type: "RECORD",
type: "AUDIO",
contentName: `${window.random_string(16)}.${originType}`, // 文件名
fileType: originType, // 文件后缀
content: mp3URL,
......@@ -1177,7 +1162,7 @@ class NewQuestionTab extends Component {
{this.renderContent(
stemContent,
placehold,
["VOICE", "RECORD", "PICTURE"],
["VOICE", "AUDIO", "PICTURE"],
"QUESTION_STEM",
stemValidate
)}
......@@ -1237,7 +1222,7 @@ class NewQuestionTab extends Component {
questionOptionContentList
);
optionItem.optionSort = optionIndex;
const mediaBtn = ["VOICE", "RECORD", "PICTURE"];
const mediaBtn = ["VOICE", "AUDIO", "PICTURE"];
const placeHold =
"必填（1000字以内，可粘贴小图；可以不输入文字，只添加音频或图片）";
return (
......@@ -1366,7 +1351,7 @@ class NewQuestionTab extends Component {
{this.renderContent(
questionAnswerDesc,
"1000字以内，可粘贴小图",
["VOICE", "RECORD", "PICTURE", "VIDEO"],
["VOICE", "AUDIO", "PICTURE", "VIDEO"],
"QUESTION_ANSWER_DESC"
)}
</div>
......
src/modules/teach-tool/components/QuestionBankSider.less
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-22 12:02:34
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:34:06
* @LastEditTime: 2021-03-18 13:59:24
* @Description: 助学工具-题库-题库主页面侧边栏样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -54,6 +54,11 @@
color: #666666;
}
}
.ant-tree-treenode-selected:hover::before,
.ant-tree-treenode-selected::before {
background: #ffb714;
opacity: 0.06;
}
}
}
}
src/modules/teach-tool/components/QuestionEditor.jsx
......@@ -12,7 +12,7 @@ const MEDIA_MAP = [
{
title: "录音",
icon: <React.Fragment>&#xe7bb;</React.Fragment>,
key: "RECORD",
key: "AUDIO",
},
{
title: "图片",
......@@ -233,7 +233,7 @@ class QuestionEditor extends Component {
} = this.state;
const {
placehold,
mediaBtn = ["VOICE", "RECORD", "PICTURE", "VIDEO"],
mediaBtn = ["VOICE", "AUDIO", "PICTURE", "VIDEO"],
limitLength = 1000,
markKey,
} = this.props;
......
src/modules/teach-tool/components/QuestionManageContent.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 10:24:47
* @LastEditTime: 2021-03-18 14:21:22
* @Description: 助学工具-题库-题目管理主页面列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -69,7 +69,7 @@ class QuestionManageContent extends Component {
query: {
current: 1,
size: 10,
order: "ACCURACY_DESC", // 排序规则[ ACCURACY_DESC, ACCURACY_ASC, CREATED_DESC, CREATED_ASC, UPDATED_DESC, UPDATED_ASC ]
order: "UPDATED_DESC", // 排序规则[ ACCURACY_DESC, ACCURACY_ASC, CREATED_DESC, CREATED_ASC, UPDATED_DESC, UPDATED_ASC ]
categoryId: null, // 当前题库分类Id
questionName: null, // 题目名称
questionType: null, // 题目类型
......
src/modules/teach-tool/modal/QuestionPreviewModal.jsx
......@@ -87,8 +87,8 @@ class QuestionPreviewModal extends Component {
const voiceDescList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "VOICE";
});
const recordDescList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "RECORD";
const audioDescList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "AUDIO";
});
const videoDeacList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "VIDEO";
......@@ -327,12 +327,12 @@ class QuestionPreviewModal extends Component {
})}
</div>
)}
{recordDescList.length > 0 && (
{audioDescList.length > 0 && (
<div className="desc-audio-box">
{_.map(recordDescList, (recordItem, recordIndex) => {
let { content, size } = recordItem;
{_.map(audioDescList, (audioItem, audioIndex) => {
let { content, size } = audioItem;
return (
<div className="audio-box" key={recordIndex}>
<div className="audio-box" key={audioIndex}>
<XMAudio
forbidParse
url={content}
......@@ -340,7 +340,7 @@ class QuestionPreviewModal extends Component {
size = durationSize;
this.setState({});
}}
index={recordIndex}
index={audioIndex}
size={size || 1000}
/>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment