Skip to content

X
xiaomai-cloud-class-web
Commit 462c5b38 by yuananting
Options

feat:填空修改暂存

parent 96b7a4c4
Showing with 341 additions and 32 deletions
src/data-source/questionBank/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-03 15:13:12
* @LastEditors: yuananting
* @LastEditTime: 2021-03-15 19:44:31
* @LastEditTime: 2021-03-16 15:11:25
* @Description: 助学工具接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -52,3 +52,7 @@ export function queryQuestionDetails(params: object) {
export function editQuestion(params: object) {
return Service.Hades("anon/hades/question/editQuestion", params);
}
export function batchImport(params: object) {
return Service.Hades("anon/hades/question/batchImport", params);
}
\ No newline at end of file
src/domains/question-bank-domain/QuestionBankService.ts
......@@ -2,11 +2,11 @@
* @Author: yuananting
* @Date: 2021-03-11 11:34:37
* @LastEditors: yuananting
* @LastEditTime: 2021-03-15 19:45:10
* @LastEditTime: 2021-03-16 15:12:09
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import { queryCategoryTree, addCategory, delCategory, editCategory, editCategoryTree, queryQuestionCategoryTree, addQuestion, queryQuestionPageList, deleteQuestion, queryQuestionDetails, editQuestion } from '@/data-source/questionBank/request-apis';
import { queryCategoryTree, addCategory, delCategory, editCategory, editCategoryTree, queryQuestionCategoryTree, addQuestion, queryQuestionPageList, deleteQuestion, queryQuestionDetails, editQuestion, batchImport } from '@/data-source/questionBank/request-apis';
export default class QuestionBankService {
// 获取题目分类树
static queryCategoryTree(params: any) {
......@@ -62,4 +62,9 @@ export default class QuestionBankService {
static editQuestion(params: any) {
return editQuestion(params);
}
// 批量导入
static batchImport(params: any) {
return batchImport(params);
}
}
\ No newline at end of file
src/modules/store-manage/StoreWebDecorationTab.jsx
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2021-01-18 14:59:57
* @LastEditors: yuananting
* @LastEditTime: 2021-03-16 15:28:55
* @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......
src/modules/teach-tool/AddNewQuestion.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 13:46:35
* @LastEditors: yuananting
* @LastEditTime: 2021-03-15 21:14:47
* @LastEditTime: 2021-03-16 16:44:23
* @Description: 助学工具-题库-题目管理-新增题目
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -15,6 +15,7 @@ import NewQuestionTab from "./components/NewQuestionTab";
import { defineQuestionInfo } from "./components/model";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
import User from "@/common/js/user";
import UploadOss from "@/core/upload";
const { TabPane } = Tabs;
class AddNewQuestion extends Component {
......@@ -144,10 +145,14 @@ class AddNewQuestion extends Component {
}
break;
case "JUDGE":
this.judgeRef.checkInput();
if (this.judgeRef.checkInput() === 0) {
this.saveCurrentQuestion(judgeContent);
}
break;
case "GAP_FILLING":
this.CompletionRef.checkInput();
if (this.gapRef.checkInput() === 0) {
// this.saveCurrentQuestion(gapFillingContent);
}
break;
case "INDEFINITE_CHOICE":
if (this.indefiniteRef.checkInput() === 0) {
......@@ -242,10 +247,11 @@ class AddNewQuestion extends Component {
<NewQuestionTab
questionTypeKey="GAP_FILLING"
onRef={(ref) => {
this.CompletionRef = ref;
this.gapRef = ref;
}}
questionInfo={gapFillingContent}
onSetState={(newContent) => {
console.log("gapFillingContent:", newContent);
Object.assign(gapFillingContent, newContent);
}}
/>
......
src/modules/teach-tool/components/CompletionStem.jsx → src/modules/teach-tool/components/GapFillingStem.jsx
import React, { Component } from "react";
import { message, Button } from "antd";
import UploadOss from "@/core/upload";
import "./CompletionStem.less";
import "./GapFillingStem.less";
const MEDIA_MAP = [
{
title: "音频",
......@@ -24,7 +24,7 @@ const MEDIA_MAP = [
key: "VIDEO",
},
];
class CompletionStem extends Component {
class GapFillingStem extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -48,13 +48,14 @@ class CompletionStem extends Component {
var _blanksList = [];
const stemInput = document.getElementById("editor-box_content");
stemInput.childNodes.forEach((item) => {
if (item.nodeName === "SPAN") {
if (item.nodeName === "SPAN" && item.id) {
_blanksList.push(item);
}
});
this.setState({blanksList:_blanksList})
this.handleStemStyle();
this.props.changeBlankCount(this.state.blanksList);
this.props.onChange(stemInput.innerHTML)
this.props.changeBlankCount(_blanksList);
};
/**
......@@ -66,6 +67,7 @@ class CompletionStem extends Component {
insertBlanks = () => {
document.getElementById("editor-box_content").focus();
const _blanksList = this.state.blanksList;
console.log("888888888888:", _blanksList);
var blanks = document.createElement("span");
blanks.className = "fill-line";
blanks.innerHTML = "填空";
......@@ -75,6 +77,7 @@ class CompletionStem extends Component {
this.setState({ blanksList: _blanksList });
var sel, range;
sel = window.getSelection();
console.log("*****:", sel)
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
......@@ -134,7 +137,7 @@ class CompletionStem extends Component {
} = this.props;
return (
<div
className="completion-question-edtior_box"
className="gap-question-edtior_box"
style={{ zIndex }}
onMouseEnter={() => {
if (visibleMediaBox || focusFlag) return;
......@@ -177,7 +180,7 @@ class CompletionStem extends Component {
/{limitLength}
</div>
</div>
<div className="editor-fill-info">
<div className="editor-fill-info" style={{ top: this.props.validateStatus === "error" ? "56px" : "36px" }}>
在需要填写答案的地方
<Button
type="link"
......@@ -227,4 +230,4 @@ class CompletionStem extends Component {
);
}
}
export default CompletionStem;
export default GapFillingStem;
src/modules/teach-tool/components/CompletionStem.less → src/modules/teach-tool/components/GapFillingStem.less
.completion-question-edtior_box {
.gap-question-edtior_box {
position: relative;
.editor-box-single {
border-radius: 4px;
......@@ -56,6 +56,7 @@
}
.editor-fill-info {
// position: absolute;
height: 20px;
font-size: 14px;
line-height: 20px;
......
src/modules/teach-tool/components/NewQuestionTab.less
......@@ -12,7 +12,8 @@
// display: flex;
// justify-content: space-between;
.fill-line {
text-decoration: underline;
padding: 0 10px;
border-bottom: 1px solid;
}
}
.editor-fill-box_single:focus {
......@@ -369,16 +370,16 @@
}
}
.completion-answer-box {
.gap-answer-box {
display: inline-flex;
width: 100%;
padding: 6px 0;
.completion-answer-label {
.gap-answer-label {
margin-right: 16px;
padding-top: 6px;
width: 50px;
}
.completion-answer-content {
.gap-answer-content {
display: flex;
background: #ffffff;
border-radius: 4px;
......
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-15 21:08:28
* @LastEditTime: 2021-03-16 15:34:57
* @Description: 助学工具-题库-题目管理主页面列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -27,6 +27,8 @@ import User from "@/common/js/user";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
import _ from "underscore";
import QuestionPreviewModal from "../modal/QuestionPreviewModal";
import BatchImportQuestionModal from "../modal/BatchImportQuestionModal";
const { Search } = Input;
const questionTypeEnum = {
......@@ -273,7 +275,9 @@ class QuestionManageContent extends Component {
<span className="record-operate__item split"> | </span>
<div
className="record-operate__item"
onClick={() => this.toEditQuetion(record.id, record.questionTypeEnum)}
onClick={() =>
this.toEditQuetion(record.id, record.questionTypeEnum)
}
>
编辑
</div>
......@@ -346,6 +350,29 @@ class QuestionManageContent extends Component {
);
};
batchImportQuestion = () => {
const ImportQuestionModal = <BatchImportQuestionModal
close={() => {
this.setState({ ImportQuestionModal: null });
}}
onEdit={(record) => {
this.handleEditRecord(record);
}}
showTip={() => {
Modal.confirm({
title: `提醒`,
content: '系统拼命处理中，为避免你等待时间过长，请前往“任务中心”查看导入结果',
onOk: () => {
RCHistory.push(`/download_center/import_record`);
},
okText: '前往任务中心',
cancelText: '关闭',
});
}}
/>;
this.setState({ ImportQuestionModal });
}
render() {
const { dataSource = [], total, query } = this.state;
const { current, size, categoryId, questionName, questionType } = query;
......@@ -417,13 +444,7 @@ class QuestionManageContent extends Component {
<Button type="primary" onClick={this.handleCreateQuestionBank}>
新建题目
</Button>
<Button
onClick={() => {
console.log("批量导入");
}}
>
批量导入
</Button>
<Button onClick={this.batchImportQuestion}>批量导入</Button>
</Space>
)}
<div className="question-manage-list">
......@@ -455,6 +476,7 @@ class QuestionManageContent extends Component {
</div>
)}
{this.state.QuestionPreviewModal}
{this.state.ImportQuestionModal}
</div>
</div>
);
......
src/modules/teach-tool/components/QuestionManageContent.less
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:26:28
* @LastEditors: yuananting
* @LastEditTime: 2021-03-15 09:42:30
* @LastEditTime: 2021-03-16 11:14:55
* @Description: 助学工具-题库-题目管理右侧内容样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -77,3 +77,8 @@
}
}
}
.fill-line {
padding: 0 10px;
border-bottom: 1px solid;
}
src/modules/teach-tool/modal/BatchImportQuestionModal.jsx 0 → 100644
/*
* @Author: zhangyi
* @Date: 2019-12-09 10:29:55
* @Last Modified by: mikey.wanghaofeng
* @Last Modified time: 2020-09-25 11:03:47
*/
import React, { Component } from "react";
import { Modal, Button, Upload, message } from "antd";
import "./BatchImportQuestionModal.less";
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
class BatchImportQuestionModal extends Component {
constructor(props) {
super(props);
this.state = {
showSelectFileModal: false, // 云盘列表弹窗显隐
diskList: [], // 资料云盘文件列表
fileList: [], // 上传的文件列表
uploadBtnType: "add", // 上传按钮类型（上传文件 | 重新上传）
uploadBlob: null, // 上传的文件
uploadProps: {
accept: "application/vnd.ms-excel",
beforeUpload(file) {
this.setState({ uploadBtnType: "reAdd" });
this.setState({ uploadBlob: file });
return false;
},
onChange(info) {
let fileList = [...info.fileList];
fileList = fileList.slice(-1);
this.setState({ fileList });
},
onRemove() {
this.setState({ uploadBtnType: "add" });
},
},
};
}
// 下载题目模板
handleDownTemplate = () => {
console.log("下载");
const a = document.createElement("a");
a.href = "https://image.xiaomaiketang.com/xm/question_template.xlsx";
a.click();
};
render() {
const {
diskList,
showSelectFileModal,
uploadBtnType,
uploadProps,
} = this.state;
return (
<div>
<Modal
className="import-score-modal"
title="导入题目信息"
visible={true}
width={560}
maskClosable={false}
footer={[
<Button onClick={this.props.close}>取消</Button>,
<Button type="primary" onClick={this.handleImport}>
导入
</Button>,
]}
onCancel={() => {
this.props.close();
}}
>
<div className="step-section">
<h4 className="step-title">1.下载导入模板，按要求填写信息</h4>
<div
className="down-btn"
style={{ fontSize: "14px" }}
onClick={this.handleDownTemplate}
>
下载题目导入模板
</div>
</div>
<div className="step-section">
<h4 className="step-title">2.选择需要导入的Excel文件</h4>
<Button type="primary" className="add-btn" onClick={() => this.setState({showSelectFileModal: true})}>
{uploadBtnType == "reAdd" ? "重新添加" : "添加文件"}
</Button>
</div>
</Modal>
<SelectPrepareFileModal
operateType="select"
accept="image/jpeg,image/png,image/jpg"
selectTypeList={["JPG", "JPEG", "PNG"]}
tooltip="支持文件类型：jpg、jpeg、png"
isOpen={showSelectFileModal}
diskList={diskList}
onClose={() => {
this.setState({ showSelectFileModal: false });
}}
onSelect={this.handleSelectImg}
/>
</div>
);
}
}
export default BatchImportQuestionModal;
src/modules/teach-tool/modal/BatchImportQuestionModal.less 0 → 100644
@import '../../../core/mixins.less';
.import-score-modal {
.step-section {
margin-bottom: 24px;
.step-title {
font-size: 16px;
font-weight: 400;
margin-bottom: 16px;
color: #333;
}
.tip-box {
border: 1px dashed #e8e8e8;
padding: 8px;
margin-bottom: 16px;
.tip-title {
margin-bottom: 4px;
}
.tip-content {
font-size: 12px;
}
}
.add-btn {
border-radius: 2px;
font-size: 14px;
box-shadow: none;
text-shadow: none;
span {
font-weight: 400;
}
}
.remark-input {
width: 304px;
margin-bottom: 8px;
}
.remark-tip {
color: #999;
font-size: 12px;
}
.down-btn {
text-align: left;
color: #FC9C6B;
font-size: 12px;
display: block;
margin-top: 8px;
cursor: pointer;
}
.upload-box {
width: 200px;
.ant-upload-list-item-name {
.text-overflow-ellipsis();
width:70%;
}
}
}
.import-status-box {
height:430px;
overflow: hidden;
.status-content {
margin:auto;
text-align: center;
margin-top:100px;
>img {
width: 76px;
}
.status {
font-size: 16px;
font-weight: 500;
margin: 18px 0 16px;
}
.status-tip {
line-height: 20px;
.num {
color: #FC9C6B;
}
}
.down-btn {
margin-top: 16px;
}
}
}
}
\ No newline at end of file
src/modules/teach-tool/modal/QuestionPreviewModal.jsx
......@@ -60,6 +60,7 @@ class QuestionPreviewModal extends Component {
const {
questionTypeEnum,
questionStemList,
gapFillingAnswerList,
optionList,
questionAnswerDescList,
} = questionInfo;
......@@ -152,6 +153,12 @@ class QuestionPreviewModal extends Component {
</div>
</div>
<hr style={{ margin: "16px 0", color: "#E8E8E8", height: "1px" }} />
{[
"INDEFINITE_CHOICE",
"MULTI_CHOICE",
"SINGLE_CHOICE",
"JUDGE",
].includes(questionTypeEnum) && (
<div className="question-option">
<div className="question-option__title">选项：</div>
<div className="question-option__content">
......@@ -169,14 +176,29 @@ class QuestionPreviewModal extends Component {
<div className="option-sort">
{NUM_TO_WORD_MAP[optionIndex]}.
</div>
{[
"INDEFINITE_CHOICE",
"MULTI_CHOICE",
"SINGLE_CHOICE",
].includes(questionTypeEnum) && (
<div
className="input-box"
dangerouslySetInnerHTML={{
__html: inputcontent[0].content,
}}
/>
)}
{["JUDGE"].includes(questionTypeEnum) &&
_.map(questionOptionContentList, (item, index) => {
return <span key={index}>{item.content}</span>;
})}
</div>
{_.map(questionOptionContentList, (item, index) => {
{[
"INDEFINITE_CHOICE",
"MULTI_CHOICE",
"SINGLE_CHOICE",
].includes(questionTypeEnum) &&
_.map(questionOptionContentList, (item, index) => {
let dom = "";
let { type, content, size } = item;
switch (type) {
......@@ -216,8 +238,15 @@ class QuestionPreviewModal extends Component {
})}
</div>
</div>
)}
<div className="question-answer">
<div className="question-answer__title">答案：</div>
{[
"INDEFINITE_CHOICE",
"MULTI_CHOICE",
"SINGLE_CHOICE",
"JUDGE",
].includes(questionTypeEnum) && (
<div className="question-answer__content">
{_.map(rightAnswerSort, (item, index) => {
return (
......@@ -227,6 +256,23 @@ class QuestionPreviewModal extends Component {
);
})}
</div>
)}
{questionTypeEnum === "GAP_FILLING" && (
<div className="question-gap-answer">
{_.map(gapFillingAnswerList, (item, index) => {
return (
<div>
<div className="gap-label">填空{index+1}.</div>
<div className="gap-content" key={index}>
{_.map(item.correctAnswerList, (childItem, childIndex) => {
return <span>{childItem}</span>
})}
</div>
</div>
);
})}
</div>
)}
</div>
<hr style={{ margin: "16px 0", color: "#E8E8E8", height: "1px" }} />
<div className="question-desc">
......
src/modules/teach-tool/modal/QuestionPreviewModal.less
......@@ -117,6 +117,25 @@
margin-right: 8px;
}
}
.question-gap-answer {
margin-bottom: 8px;
.gap-label {
display: inline-block;
width: 48px;
height: 20px;
color: #666666;
line-height: 20px;
}
.gap-content {
display: inline-block;
span {
background: #F7F8F9;
border-radius: 2px;
padding: 2px 12px;
margin-right: 8px;
}
}
}
}
.question-desc {
margin-bottom: 16px;
......@@ -195,3 +214,7 @@
.question-preview-modal.ant-modal {
max-height: 60% !important;
}
.fill-line {
padding: 0 10px;
border-bottom: 1px solid;
}
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