Skip to content

X
xiaomai-cloud-class-web
Commit 14a1f959 by yuananting
Options

feat:上传文件bug

parent 0e1a2057
Showing with 122 additions and 424 deletions
src/common/constants/punchClock/punchClock.js
/*
* @Author: 陈剑宇
* @Date: 2020-10-28 14:27:07
* @LastEditTime: 2021-03-17 20:27:44
* @LastEditTime: 2021-03-18 10:30:41
* @LastEditors: yuananting
* @Description:
* @FilePath: /xiaomai-web-b/app/common/constants/punchClock/punchClock.js
......@@ -114,9 +114,9 @@ export const FILE_ACCEPT = {
}
export const MEDIA_FILE_ACCEPT = {
PICTURE: 'JPG,JPEG,PNG,BMP,GIF',
VIDEO: 'MP4',
VOICE: 'MP3'
PICTURE: 'image/jpg,image/jpeg,image/png,image/bmp,image/gif,JPG,JPEG,PNG,BMP,GIF',
VIDEO: 'audio/mp4,video/mp4,MP4',
VOICE: 'audio/x-mpeg,audio/mp3,audio/mpeg,audio/wav,audio/x-m4a,MP3'
}
export const QUESTION_FILE_ACCEPT = {
......
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 09:32:02
* @LastEditTime: 2021-03-18 11:15:19
* @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 { defineQuestionInfo } from "./components/model";
import { defineOptionInfo, defineQuestionInfo } from "./components/model";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
import User from "@/common/js/user";
import UploadOss from "@/core/upload";
......@@ -21,13 +21,13 @@ const { TabPane } = Tabs;
class AddNewQuestion extends Component {
constructor(props) {
super(props);
let activeKey = ""
let activeKey = "";
if (getParameterByName("type")) {
activeKey = getParameterByName("type")
activeKey = getParameterByName("type");
} else if (getParameterByName("key")) {
activeKey = getParameterByName("key")
activeKey = getParameterByName("key");
} else {
activeKey = "SINGLE_CHOICE"
activeKey = "SINGLE_CHOICE";
}
this.state = {
activeKey: activeKey,
......@@ -77,6 +77,38 @@ class AddNewQuestion extends Component {
});
};
handleRest = (type) => {
switch (type) {
case "SINGLE_CHOICE":
this.setState({
singleChoiceContent: defineQuestionInfo("SINGLE_CHOICE"),
}, () => this.state.singleChoiceContent.optionList.push(defineOptionInfo()));
break;
case "MULTI_CHOICE":
this.setState({
multiChoiceContent: defineQuestionInfo("MULTI_CHOICE"),
}, () => this.state.multiChoiceContent.optionList.push(defineOptionInfo()));
break;
case "JUDGE":
this.setState({ judgeContent: defineQuestionInfo("JUDGE") });
break;
case "GAP_FILLING":
this.setState({
gapFillingContent: defineQuestionInfo("GAP_FILLING"),
});
break;
case "INDEFINITE_CHOICE":
this.setState({
indefiniteChoiceContent: defineQuestionInfo("INDEFINITE_CHOICE"),
}, () => this.state.indefiniteChoiceContent.optionList.push(defineOptionInfo()));
break;
}
};
initOption = (content) => {
chooseOptions.push(defineJudgeOptionInfo(content));
};
saveCurrentQuestion = (content, type, next) => {
content.questionStemList.map((item, index) => {
item.sort = index;
......@@ -109,12 +141,13 @@ class AddNewQuestion extends Component {
QuestionBankService.editQuestion(params).then((res) => {
if (res.success) {
message.success("保存成功");
if (next === 'add') {
if (next === "add") {
// this.handleRest(type);
window.RCHistory.push({
pathname: `/create-new-question?categoryId=${params.categoryId}&key=${type}`,
});
}
if (next === 'close') {
if (next === "close") {
window.RCHistory.push({
pathname: `/question-bank-index?categoryId=${params.categoryId}`,
});
......@@ -132,12 +165,12 @@ class AddNewQuestion extends Component {
QuestionBankService.addQuestion(params).then((res) => {
if (res.success) {
message.success("保存成功");
if (next === 'add') {
if (next === "add") {
window.RCHistory.push({
pathname: `/create-new-question?categoryId=${params.categoryId}&key=${type}`,
});
}
if (next === 'close') {
if (next === "close") {
window.RCHistory.push({
pathname: `/question-bank-index?categoryId=${params.categoryId}`,
});
......@@ -150,16 +183,18 @@ class AddNewQuestion extends Component {
// 取消编辑并返回上一级路由
handleGoBack = () => {
Modal.confirm({
title: '确定要返回吗？',
content: '返回后，本次编辑的内容将不被保存',
okText: '确认返回',
cancelText: '留在本页',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
title: "确定要返回吗？",
content: "返回后，本次编辑的内容将不被保存",
okText: "确认返回",
cancelText: "留在本页",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe6f4;</span>
),
onOk: () => {
window.RCHistory.goBack();
}
})
}
},
});
};
confirmSaveQuestion = (next) => {
const {
......@@ -192,7 +227,11 @@ class AddNewQuestion extends Component {
break;
case "INDEFINITE_CHOICE":
if (this.indefiniteRef.checkInput() === 0) {
this.saveCurrentQuestion(indefiniteChoiceContent, "INDEFINITE_CHOICE", next);
this.saveCurrentQuestion(
indefiniteChoiceContent,
"INDEFINITE_CHOICE",
next
);
}
break;
}
......@@ -240,7 +279,7 @@ class AddNewQuestion extends Component {
}}
questionInfo={singleChoiceContent}
onSetState={(newContent) => {
console.log("newContent:", newContent)
console.log("newContent:", newContent);
Object.assign(singleChoiceContent, newContent);
}}
onLogger={this.handleLogger}
......@@ -319,10 +358,20 @@ class AddNewQuestion extends Component {
</Tabs>
</div>
<div className="footer">
<Button onClick={() => { this.handleGoBack() }}>取消</Button>
<Button onClick={() => {
<Button
onClick={() => {
this.handleGoBack();
}}
>
取消
</Button>
<Button
onClick={() => {
this.confirmSaveQuestion("add");
}}>保存并继续添加</Button>
}}
>
保存并继续添加
</Button>
<Button
type="primary"
onClick={() => {
......
src/modules/teach-tool/components/GapFillingStem.jsx deleted 100644 → 0
import React, { Component } from "react";
import { message, Button } from "antd";
import UploadOss from "@/core/upload";
import "./GapFillingStem.less";
const MEDIA_MAP = [
{
title: "音频",
icon: <React.Fragment>&#xe756;</React.Fragment>,
key: "VOICE",
},
{
title: "录音",
icon: <React.Fragment>&#xe7bb;</React.Fragment>,
key: "RECORD",
},
{
title: "图片",
icon: <React.Fragment>&#xe758;</React.Fragment>,
key: "PICTURE",
},
{
title: "视频",
icon: <React.Fragment>&#xe755;</React.Fragment>,
key: "VIDEO",
},
];
class GapFillingStem extends Component {
constructor(props) {
super(props);
this.state = {
visibleMediaBox: false,
zIndex: 9,
focusFlag: false,
isShowSingleInput: true,
contentLength: 0,
errorInput: false,
blanksList: [],
originBlanksList: [],
};
}
componentDidUpdate() {
const stemInput = document.getElementById("editor-box_content");
stemInput.addEventListener("DOMSubtreeModified", this.watchStemContent);
}
watchStemContent = () => {
var _blanksList = [];
const stemInput = document.getElementById("editor-box_content");
stemInput.childNodes.forEach((item) => {
if (item.nodeName === "SPAN" && item.id) {
_blanksList.push(item);
}
});
this.setState({blanksList:_blanksList})
this.handleStemStyle();
this.props.onChange(stemInput.innerHTML)
this.props.changeBlankCount(_blanksList);
};
/**
* 插入占位符
*
* @memberof QuestionInputItem
*/
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 = "填空";
blanks.id = window.random_string(16); // 填空id
blanks.contentEditable = false;
_blanksList.push(blanks);
this.setState({ blanksList: _blanksList });
var sel, range;
sel = window.getSelection();
console.log("*****:", sel)
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.appendChild(blanks);
var frag = document.createDocumentFragment(),
node,
lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
};
// 输入框样式
handleStemStyle = () => {
const stemInput = document.getElementById("editor-box_content");
const textLength = stemInput.innerText.replace(/\&nbsp\;/gi, " ").length;
const imgLength = stemInput.innerHTML.match(/<img/g)
? stemInput.innerHTML.match(/<img/g).length * 2
: 0;
const contentLength = imgLength + textLength;
this.setState({ contentLength });
const divHeight = document.getElementById("editor-box_content")
.offsetHeight;
if (divHeight > 22 || imgLength > 0) {
this.setState({ isShowSingleInput: false });
} else {
this.setState({ isShowSingleInput: true });
}
};
handleUploadMedia = (key) => {
this.props.onUploadMedia && this.props.onUploadMedia(key);
};
render() {
const {
visibleMediaBox,
zIndex,
focusFlag,
contentLength,
isShowSingleInput,
errorInput,
} = this.state;
const {
mediaBtn = ["VOICE", "RECORD", "PICTURE", "VIDEO"],
limitLength = 1000,
} = this.props;
return (
<div
className="gap-question-edtior_box"
style={{ zIndex }}
onMouseEnter={() => {
if (visibleMediaBox || focusFlag) return;
const setZIndex = 101;
this.setState({
visibleMediaBox: true,
zIndex: setZIndex,
});
}}
onMouseLeave={() => {
if (!visibleMediaBox || focusFlag) return;
this.setState({
visibleMediaBox: false,
zIndex: 9,
});
}}
>
<div
className={
isShowSingleInput ? "editor-box-single " : "editor-box-multiple"
}
style={{
border:
this.props.validateStatus === "error" ? "1px solid red" : "",
}}
>
<div
placeholder="示例：党章规定，凡事有&nbsp;&nbsp;填空1&nbsp;&nbsp;
人以上的&nbsp;&nbsp;填空2&nbsp;&nbsp;
，都应该成立党的基层组织"
contentEditable
suppressContentEditableWarning
className="editor-box_content"
id="editor-box_content"
></div>
<div className="editor-limit">
<span style={{ color: errorInput ? "red" : "" }}>
{contentLength}
</span>
/{limitLength}
</div>
</div>
<div className="editor-fill-info" style={{ top: this.props.validateStatus === "error" ? "56px" : "36px" }}>
在需要填写答案的地方
<Button
type="link"
className="editor-fill-info_icon icon iconfont"
onClick={this.insertBlanks}
>
&#xe7fd; 插入占位符
</Button>
</div>
<div
className={`editor-limit-tip${
contentLength > limitLength ? " mt6" : ""
}`}
style={{ height: contentLength > limitLength ? 20 : 0 }}
>
最多只能输入1000字
</div>
{visibleMediaBox && !_.isEmpty(mediaBtn) && (
<div className="edtior-media_box">
<div className="edtior-media_list">
{_.map(mediaBtn, (mediaItem) => {
const mediaBtnMap = _.find(
MEDIA_MAP,
(mapItem) => mapItem.key === mediaItem
);
return (
mediaBtnMap && (
<div
className="edtior-media_item"
key={mediaItem}
onClick={() => this.handleUploadMedia(mediaItem)}
>
<div className="edtior-media_item__icon icon iconfont">
{mediaBtnMap.icon}
</div>
<div className="edtior-media_item__name">
{mediaBtnMap.title}
</div>
</div>
)
);
})}
</div>
</div>
)}
</div>
);
}
}
export default GapFillingStem;
src/modules/teach-tool/components/GapFillingStem.less deleted 100644 → 0
.gap-question-edtior_box {
position: relative;
.editor-box-single {
border-radius: 4px;
padding: 4px 0 4px 10px;
border: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
.editor-box_content {
width: calc(100% - 80px);
.fill-line {
padding: 0 10px;
border-bottom: 1px solid;
}
}
.editor-limit {
padding-right: 12px;
line-height: 22px;
font-size: 12px;
color: #cccccc;
}
}
.editor-box-multiple {
border-radius: 4px;
padding: 4px 0 4px 10px;
border: 1px solid #e8e8e8;
.editor-box_content {
display: inline-block;
overflow-y: scroll;
max-height: 110px;
width: 100%;
.fill-line {
padding: 0 10px;
border-bottom: 1px solid;
}
}
.editor-limit {
text-align: right;
padding-right: 12px;
line-height: 22px;
font-size: 12px;
color: #cccccc;
padding-top: 3px;
}
}
.editor-box_content:empty:before {
content: attr(placeholder);
color: #ddd;
}
.editor-box_content:focus {
border: none;
outline: none;
}
.editor-fill-info {
// position: absolute;
height: 20px;
font-size: 14px;
line-height: 20px;
color: #999999;
margin-top: 8px;
.editor-fill-info_icon {
color: #5289fa;
font-size: 14px;
padding-left: 9px;
cursor: pointer;
}
}
.editor-limit-tip {
height: 20px;
text-align: right;
color: #ec4b35;
transition: height 0.5s ease-in-out;
overflow: hidden;
}
.editor-placehold {
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 14px;
color: #cccccc;
line-height: 22px;
margin: 6px 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.edtior-media_box {
position: absolute;
top: 100%;
left: 0;
padding-top: 9px;
&::before {
content: "";
border: 6px solid transparent;
border-bottom-color: #ffffff;
position: absolute;
top: -3px;
left: 50%;
margin-left: -3px;
filter: drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.06));
}
.edtior-media_list {
background: #ffffff;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
border-radius: 4px;
display: flex;
align-items: center;
padding: 12px 24px;
}
.edtior-media_item {
margin-right: 24px;
cursor: pointer;
&:hover {
.edtior-media_item__icon {
color: #ffb714;
}
}
&:last-child {
margin-right: 0;
}
.edtior-media_item__icon {
color: #999999;
text-align: center;
font-size: 20px;
}
.edtior-media_item__name {
text-align: center;
font-size: 12px;
color: #999999;
line-height: 17px;
}
}
}
}
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 09:33:34
* @LastEditTime: 2021-03-18 11:03:21
* @Description: 助学工具-题库-题目管理-新建题目Tab
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -84,6 +84,7 @@ class NewQuestionTab extends Component {
};
static getDerivedStateFromProps(nextProps, prevState) {
console.log("nextProps:", nextProps)
// 控制录音组件展示
if (nextProps.showBox && !prevState.showBox) {
return {
......@@ -99,6 +100,7 @@ class NewQuestionTab extends Component {
shouldComponentUpdate(nextProps, nextState) {
const { questionInfo } = nextProps;
if (this.props.questionInfo !== questionInfo) {
console.log("*********改变了：", questionInfo)
this.setState(
{
stemContent: JSON.parse(
......@@ -319,6 +321,7 @@ class NewQuestionTab extends Component {
*/
handleChangeMedia = (key, uploadItemTarget, contentType) => {
this.setState({ contentType });
this.setState({ mediaType: key });
const pictureMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "PICTURE";
});
......@@ -657,8 +660,8 @@ class NewQuestionTab extends Component {
renderJudgeOption = (judgeOptions) => {
return (
<div dangerouslySetInnerHTML={{ __html: judgeOptions[0].content }}/>
)
<div dangerouslySetInnerHTML={{ __html: judgeOptions[0].content }} />
);
};
/**
* 渲染输入内容
......@@ -1128,8 +1131,6 @@ class NewQuestionTab extends Component {
} = this.state;
const { stemValidate, stemText, radioValidate, radioText } = this.state;
const isJudge = this.props.questionTypeKey === "JUDGE";
console.log("this.props.questionTypeKey:", this.props.questionTypeKey)
console.log("判断：", isJudge)
const isGapFilling = this.props.questionTypeKey === "GAP_FILLING";
const placehold = isGapFilling ? (
<span>
......@@ -1144,21 +1145,24 @@ class NewQuestionTab extends Component {
);
let acceptType = "";
let selectTypeList = [];
console.log("mediaType", mediaType);
switch (mediaType) {
case "PICTURE":
acceptType = "image/png,image/jpg";
selectTypeList = ["JPG", "PNG"];
acceptType = MEDIA_FILE_ACCEPT.PICTURE;
selectTypeList = ["jpg", "png", "jpeg"];
break;
case "VOICE":
acceptType = "audio/mp3";
selectTypeList = ["MP3"];
acceptType = MEDIA_FILE_ACCEPT.VOICE;
selectTypeList = ["mp3", "mpeg"];
break;
case "VIDEO":
acceptType = "video/mp4";
selectTypeList = ["MP4"];
acceptType = MEDIA_FILE_ACCEPT.VIDEO;
selectTypeList = ["mp4"];
break;
}
console.log(acceptType, selectTypeList);
return (
<div className="question-input-item_wrapper">
{/* 题干 */}
......@@ -1228,7 +1232,10 @@ class NewQuestionTab extends Component {
questionOptionContentList,
isCorrectAnswer,
} = optionItem;
console.log("questionOptionContentList:", questionOptionContentList)
console.log(
"questionOptionContentList:",
questionOptionContentList
);
optionItem.optionSort = optionIndex;
const mediaBtn = ["VOICE", "RECORD", "PICTURE"];
const placeHold =
......
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 09:35:03
* @LastEditTime: 2021-03-18 10:24:47
* @Description: 助学工具-题库-题目管理主页面列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -212,7 +212,6 @@ class QuestionManageContent extends Component {
// 表头设置
parseColumns = () => {
const isPermiss = ["CloudManager", "StoreManager"].includes(User.getUserRole());
console.log(isPermiss, User.getUserRole())
const columns = [
{
title: "题目",
......
src/modules/teach-tool/modal/QuestionPreviewModal.jsx
......@@ -50,6 +50,13 @@ class QuestionPreviewModal extends Component {
});
};
transferStemDocument = (txt) => {
const template = `<p class='content'>${txt}</p>`;
let doc = new DOMParser().parseFromString(template, "text/html");
let p = doc.querySelector(".content");
return p;
};
render() {
const {
showScanFile,
......@@ -111,6 +118,18 @@ class QuestionPreviewModal extends Component {
let { type, content, size } = item;
switch (type) {
case "RICH_TEXT":
if (questionTypeEnum === "GAP_FILLING") {
content = content.replace(
/_/g,
`<input
class="add-fill-line"
disabled
answerTagList=""
id=${window.random_string(16)}
value="填空"
/>`
);
}
dom = (
<div
key={index}
......@@ -262,11 +281,14 @@ class QuestionPreviewModal extends Component {
{_.map(gapFillingAnswerList, (item, index) => {
return (
<div>
<div className="gap-label">填空{index+1}.</div>
<div className="gap-label">填空{index + 1}.</div>
<div className="gap-content" key={index}>
{_.map(item.correctAnswerList, (childItem, childIndex) => {
return <span>{childItem}</span>
})}
{_.map(
item.correctAnswerList,
(childItem, childIndex) => {
return <span>{childItem}</span>;
}
)}
</div>
</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