Skip to content

X
xiaomai-cloud-class-web
Commit 113bb193 by yuananting
Options

Merge branch 'feature/yuananting/20210221/question-bank-tools' into dev

parents 99ed4231 14a1f959
Showing with 6624 additions and 23 deletions
src/common/constants/punchClock/punchClock.js
/* /*
* @Author: 陈剑宇 * @Author: 陈剑宇
* @Date: 2020-10-28 14:27:07 * @Date: 2020-10-28 14:27:07
* @LastEditTime: 2020-11-02 20:25:15 * @LastEditTime: 2021-03-18 10:30:41
* @LastEditors: 陈剑宇 * @LastEditors: yuananting
* @Description: * @Description:
* @FilePath: /xiaomai-web-b/app/common/constants/punchClock/punchClock.js * @FilePath: /xiaomai-web-b/app/common/constants/punchClock/punchClock.js
* @symbol_custom_string_obkoro1: Copyright © 2020 杭州杰竞科技有限公司 版权所有 * @symbol_custom_string_obkoro1: Copyright © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from "react";
export const DEFAULT_IMG_URL = 'https://image.xiaomaiketang.com/xm/2MWCKBNiya.png'; export const DEFAULT_IMG_URL = 'https://image.xiaomaiketang.com/xm/2MWCKBNiya.png';
export const DEFAULT_CALENDAR_TEXT = '<p>亲爱的同学：</p><p>欢迎参加《麦麦教育0基础21天英语打卡活动》，大家都知道21天养成一个好习惯。在未来的21天里，老师将和同学们一起完成21个打卡任务，0基础锻炼口语发音能力，让听英语并且跟读英语成为生活中的一部分。</p><p>打卡时间：2020年6月1日-6月23日（共21天）</p><p>其中休息日：6月6日、6月7日</p><p>打卡任务：坚持21天英语打卡学习，并且分享至朋友圈</p><p>分享格式：麦麦教育0基础21天英语打卡+学生名字 +第X天 +坚持就是胜利！</p><p>打卡奖励：</p><p>①坚持完成“21天打卡”的宝贝可以获得精美小礼品！</p><p>②每天分享打卡任务到朋友圈的小宝贝，还可以获得一份大礼包哦~</p><p>老师有话说：小宝贝每天只可完成1个打卡任务，做到真正吃透后再进行下一个任务哦。</p>'; export const DEFAULT_CALENDAR_TEXT = '<p>亲爱的同学：</p><p>欢迎参加《麦麦教育0基础21天英语打卡活动》，大家都知道21天养成一个好习惯。在未来的21天里，老师将和同学们一起完成21个打卡任务，0基础锻炼口语发音能力，让听英语并且跟读英语成为生活中的一部分。</p><p>打卡时间：2020年6月1日-6月23日（共21天）</p><p>其中休息日：6月6日、6月7日</p><p>打卡任务：坚持21天英语打卡学习，并且分享至朋友圈</p><p>分享格式：麦麦教育0基础21天英语打卡+学生名字 +第X天 +坚持就是胜利！</p><p>打卡奖励：</p><p>①坚持完成“21天打卡”的宝贝可以获得精美小礼品！</p><p>②每天分享打卡任务到朋友圈的小宝贝，还可以获得一份大礼包哦~</p><p>老师有话说：小宝贝每天只可完成1个打卡任务，做到真正吃透后再进行下一个任务哦。</p>';
export const DEFAULT_PASS_TEXT = '<p>亲爱的同学：</p><p>欢迎参加《麦麦芭蕾形体初级课打卡活动》，我们将通过芭蕾的几个特性如开、绷、直等，使身体各部位发展均衡，宝贝们每天需学完当前课时并完成打卡，才能解锁下一个课时内容</p><p>打卡时间：2020年6月1日-6月21日（共21天）</p><p>关卡数：共15关</p><p>每日可解锁上限：2关</p><p>打卡任务：坚持初级课闯关打卡课程，并且分享至朋友圈</p><p>分享格式：麦麦芭蕾0基础形体课打卡+学生名字 +第X关 +坚持就是胜利！</p><p>打卡奖励：</p><p>①坚持完成“闯关打卡”的宝贝可以获得精美小礼品！</p><p>②每关都分享打卡任务到朋友圈的小宝贝，还可以获得一份大礼包哦~</p><p>老师有话说：小宝贝每天最多完成2个任务，做到真正吃透后再进行下一个任务哦</p>'; export const DEFAULT_PASS_TEXT = '<p>亲爱的同学：</p><p>欢迎参加《麦麦芭蕾形体初级课打卡活动》，我们将通过芭蕾的几个特性如开、绷、直等，使身体各部位发展均衡，宝贝们每天需学完当前课时并完成打卡，才能解锁下一个课时内容</p><p>打卡时间：2020年6月1日-6月21日（共21天）</p><p>关卡数：共15关</p><p>每日可解锁上限：2关</p><p>打卡任务：坚持初级课闯关打卡课程，并且分享至朋友圈</p><p>分享格式：麦麦芭蕾0基础形体课打卡+学生名字 +第X关 +坚持就是胜利！</p><p>打卡奖励：</p><p>①坚持完成“闯关打卡”的宝贝可以获得精美小礼品！</p><p>②每关都分享打卡任务到朋友圈的小宝贝，还可以获得一份大礼包哦~</p><p>老师有话说：小宝贝每天最多完成2个任务，做到真正吃透后再进行下一个任务哦</p>';
...@@ -112,6 +113,12 @@ export const FILE_ACCEPT = { ...@@ -112,6 +113,12 @@ export const FILE_ACCEPT = {
VOICE: 'audio/x-mpeg,audio/mp3,audio/mpeg,audio/wav,audio/x-m4a' VOICE: 'audio/x-mpeg,audio/mp3,audio/mpeg,audio/wav,audio/x-m4a'
} }
export const MEDIA_FILE_ACCEPT = {
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 = { export const QUESTION_FILE_ACCEPT = {
PICTURE: 'image/jpg,image/jpeg,image/png,image/gif', PICTURE: 'image/jpg,image/jpeg,image/png,image/gif',
VIDEO: 'audio/mp4,video/mp4', VIDEO: 'audio/mp4,video/mp4',
......
src/common/less/icon-font.less
@font-face { @font-face {
font-family: 'iconfont'; /* project id 2223403 */ font-family: 'iconfont'; /* project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.eot'); src: url('//at.alicdn.com/t/font_2223403_v302rtv070a.eot');
src: url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.eot?#iefix') format('embedded-opentype'), src: url('//at.alicdn.com/t/font_2223403_v302rtv070a.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.woff2') format('woff2'), url('//at.alicdn.com/t/font_2223403_v302rtv070a.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.woff') format('woff'), url('//at.alicdn.com/t/font_2223403_v302rtv070a.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.ttf') format('truetype'), url('//at.alicdn.com/t/font_2223403_v302rtv070a.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.svg#iconfont') format('svg'); url('//at.alicdn.com/t/font_2223403_v302rtv070a.svg#iconfont') format('svg');
} }
.iconfont{ .iconfont{
font-family:"iconfont" !important; font-family:"iconfont" !important;
......
src/data-source/questionBank/request-apis.ts 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-03-03 15:13:12
* @LastEditors: yuananting
* @LastEditTime: 2021-03-17 11:40:41
* @Description: 助学工具接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import Service from "@/common/js/service";
export function queryCategoryTree(params: object) {
return Service.Hades("public/hades/queryCategoryTree", params);
}
export function addCategory(params: object) {
return Service.Hades("public/hades/addCategory", params);
}
export function delCategory(params: object) {
return Service.Hades("public/hades/delCategory", params);
}
export function editCategory(params: object) {
return Service.Hades("public/hades/editCategory", params);
}
export function editCategoryTree(params: object) {
return Service.Hades("public/hades/editCategoryTree", params);
}
export function queryQuestionCategoryTree(params: object) {
return Service.Hades("public/hades/queryQuestionCategoryTree", params);
}
export function queryQuestionPageList(params: object) {
return Service.Hades("public/hades/queryQuestionPageList", params);
}
export function addQuestion(params: object) {
return Service.Hades("public/hades/addQuestion", params);
}
export function deleteQuestion(params: object) {
return Service.Hades("public/hades/deleteQuestion", params);
}
export function queryQuestionDetails(params: object) {
return Service.Hades("public/hades/queryQuestionDetails", params);
}
export function editQuestion(params: object) {
return Service.Hades("public/hades/editQuestion", params);
}
export function batchImport(params: object) {
return Service.Hades("public/hades/batchImport", params);
}
\ No newline at end of file
src/domains/basic-domain/constants.ts
/* /*
* @Author: 陈剑宇 * @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01 * @Date: 2020-05-07 14:43:01
* @LastEditTime: 2021-03-01 10:09:42 * @LastEditTime: 2021-03-18 11:37:48
* @LastEditors: zhangleyuan * @LastEditors: yuananting
* @Description: * @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
*/ */
import { MapInterface } from '@/domains/basic-domain/interface' import { MapInterface } from '@/domains/basic-domain/interface'
// 默认是 dev 环境 // 默认是 dev 环境
const ENV: string = process.env.DEPLOY_ENV || 'dev'; const ENV: string = process.env.DEPLOY_ENV || 'dev1';
console.log("process.env.DEPLOY_ENV",process) console.log("process.env.DEPLOY_ENV",process)
const BASIC_HOST_MAP: MapInterface = { const BASIC_HOST_MAP: MapInterface = {
dev: 'https://dev-heimdall.xiaomai5.com/', dev: 'https://dev-heimdall.xiaomai5.com/',
......
src/domains/question-bank-domain/QuestionBankService.ts 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-03-11 11:34:37
* @LastEditors: yuananting
* @LastEditTime: 2021-03-16 15:12:09
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
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) {
return queryCategoryTree(params);
}
// 新增题目分类
static addCategory(params: any) {
return addCategory(params);
}
// 删除分类
static delCategory(params: any) {
return delCategory(params);
}
// 编辑分类
static editCategory(params: any) {
return editCategory(params);
}
// 编辑分类树（拖拽）
static editCategoryTree(params: any) {
return editCategoryTree(params);
}
// 查询分类树列表
static queryQuestionCategoryTree(params: any) {
return queryQuestionCategoryTree(params);
}
// 查询题目列表
static queryQuestionPageList(params: any) {
return queryQuestionPageList(params);
}
// 添加题目
static addQuestion(params: any) {
return addQuestion(params);
}
// 删除题目
static deleteQuestion(params: any) {
return deleteQuestion(params);
}
// 预览题目
static queryQuestionDetails(params: any) {
return queryQuestionDetails(params);
}
// 编辑题目
static editQuestion(params: any) {
return editQuestion(params);
}
// 批量导入
static batchImport(params: any) {
return batchImport(params);
}
}
\ No newline at end of file
src/modules/course-manage/video-course/components/VideoCourseList.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan * @LastEditors: yuananting
* @LastEditTime: 2021-03-15 17:05:01 * @LastEditTime: 2021-03-18 11:29:14
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/store-manage/StoreWebDecorationTab.jsx
/* /*
* @Author: wufan * @Author: wufan
* @Date: 2020-11-30 10:47:38 * @Date: 2020-11-30 10:47:38
* @LastEditors: zhangleyuan * @LastEditors: yuananting
* @LastEditTime: 2021-03-11 15:30:00 * @LastEditTime: 2021-03-18 11:29:43
* @Description: web店铺banner页面 * @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/teach-tool/AddNewQuestion.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-25 13:46:35
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 11:15:19
* @Description: 助学工具-题库-题目管理-新增题目
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Tabs, Button, Tooltip, message, Modal } from "antd";
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 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 {
constructor(props) {
super(props);
let activeKey = "";
if (getParameterByName("type")) {
activeKey = getParameterByName("type");
} else if (getParameterByName("key")) {
activeKey = getParameterByName("key");
} else {
activeKey = "SINGLE_CHOICE";
}
this.state = {
activeKey: activeKey,
// 构建题目基本结构
singleChoiceContent: defineQuestionInfo("SINGLE_CHOICE"), // 单选题
multiChoiceContent: defineQuestionInfo("MULTI_CHOICE"), // 多选题
judgeContent: defineQuestionInfo("JUDGE"), // 判断题
gapFillingContent: defineQuestionInfo("GAP_FILLING"), // 填空题
indefiniteChoiceContent: defineQuestionInfo("INDEFINITE_CHOICE"), // 不定项选择题
};
}
componentDidMount() {
if (getParameterByName("id")) {
// 编辑
this.queryQuestionDetails();
}
}
queryQuestionDetails = () => {
let query = {
id: getParameterByName("id"),
source: 0,
userId: User.getStoreUserId(),
tenantId: User.getStoreId(),
};
QuestionBankService.queryQuestionDetails(query).then((res) => {
const { result = [] } = res;
const { questionTypeEnum } = result;
switch (questionTypeEnum) {
case "SINGLE_CHOICE":
this.setState({ singleChoiceContent: result });
break;
case "MULTI_CHOICE":
this.setState({ multiChoiceContent: result });
break;
case "JUDGE":
this.setState({ judgeContent: result });
break;
case "GAP_FILLING":
this.setState({ gapFillingContent: result });
break;
case "INDEFINITE_CHOICE":
this.setState({ indefiniteChoiceContent: result });
break;
}
});
};
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;
return item;
});
content.optionList.map((item) => {
item.questionOptionContentList.map((childItem, childIndex) => {
childItem.sort = childIndex;
return childItem;
});
return item;
});
content.questionAnswerDescList.map((item, index) => {
item.sort = index;
return item;
});
let params = {};
let categoryId = getParameterByName("categoryId");
if (getParameterByName("id")) {
params = {
...content,
id: getParameterByName("id"),
categoryId: categoryId || null,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
QuestionBankService.editQuestion(params).then((res) => {
if (res.success) {
message.success("保存成功");
if (next === "add") {
// this.handleRest(type);
window.RCHistory.push({
pathname: `/create-new-question?categoryId=${params.categoryId}&key=${type}`,
});
}
if (next === "close") {
window.RCHistory.push({
pathname: `/question-bank-index?categoryId=${params.categoryId}`,
});
}
}
});
} else {
params = {
...content,
categoryId: getParameterByName("categoryId"),
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
QuestionBankService.addQuestion(params).then((res) => {
if (res.success) {
message.success("保存成功");
if (next === "add") {
window.RCHistory.push({
pathname: `/create-new-question?categoryId=${params.categoryId}&key=${type}`,
});
}
if (next === "close") {
window.RCHistory.push({
pathname: `/question-bank-index?categoryId=${params.categoryId}`,
});
}
}
});
}
};
// 取消编辑并返回上一级路由
handleGoBack = () => {
Modal.confirm({
title: "确定要返回吗？",
content: "返回后，本次编辑的内容将不被保存",
okText: "确认返回",
cancelText: "留在本页",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe6f4;</span>
),
onOk: () => {
window.RCHistory.goBack();
},
});
};
confirmSaveQuestion = (next) => {
const {
singleChoiceContent,
multiChoiceContent,
judgeContent,
gapFillingContent,
indefiniteChoiceContent,
} = this.state;
switch (this.state.activeKey) {
case "SINGLE_CHOICE":
if (this.singleChoiceRef.checkInput() === 0) {
this.saveCurrentQuestion(singleChoiceContent, "SINGLE_CHOICE", next);
}
break;
case "MULTI_CHOICE":
if (this.multiChoiceRef.checkInput() === 0) {
this.saveCurrentQuestion(multiChoiceContent, "MULTI_CHOICE", next);
}
break;
case "JUDGE":
if (this.judgeRef.checkInput() === 0) {
this.saveCurrentQuestion(judgeContent, "JUDGE", next);
}
break;
case "GAP_FILLING":
// if (this.gapRef.checkInput() === 0) {
this.saveCurrentQuestion(gapFillingContent, "GAP_FILLING", next);
// }
break;
case "INDEFINITE_CHOICE":
if (this.indefiniteRef.checkInput() === 0) {
this.saveCurrentQuestion(
indefiniteChoiceContent,
"INDEFINITE_CHOICE",
next
);
}
break;
}
};
handleLogger = (en, cn) => {
const { onLogger } = this.props;
onLogger && onLogger(en, cn);
};
render() {
const {
activeKey,
singleChoiceContent,
multiChoiceContent,
judgeContent,
gapFillingContent,
indefiniteChoiceContent,
} = this.state;
return (
<div className="page add-new-question">
<Breadcrumbs
navList={getParameterByName("id") ? "编辑题目" : "新增题目"}
goBack={() => this.handleGoBack()}
/>
<div className="box">
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
</div>
<Tabs
style={{ marginTop: 32 }}
activeKey={activeKey}
onChange={(activeKey) => {
this.setState({ activeKey });
}}
>
<TabPane
tab={<span className="icon iconfont">&#xe7fa; 单选题</span>}
key="SINGLE_CHOICE"
>
<NewQuestionTab
questionTypeKey={activeKey}
onRef={(ref) => {
this.singleChoiceRef = ref;
}}
questionInfo={singleChoiceContent}
onSetState={(newContent) => {
console.log("newContent:", newContent);
Object.assign(singleChoiceContent, newContent);
}}
onLogger={this.handleLogger}
/>
</TabPane>
<TabPane
tab={<span className="icon iconfont">&#xe7fb; 多选题</span>}
key="MULTI_CHOICE"
>
<NewQuestionTab
questionTypeKey={activeKey}
onRef={(ref) => {
this.multiChoiceRef = ref;
}}
questionInfo={multiChoiceContent}
onSetState={(newContent) => {
Object.assign(multiChoiceContent, newContent);
}}
onLogger={this.handleLogger}
/>
</TabPane>
<TabPane
tab={<span className="icon iconfont">&#xe7fc; 判断题</span>}
key="JUDGE"
>
<NewQuestionTab
questionTypeKey={activeKey}
onRef={(ref) => {
this.judgeRef = ref;
}}
questionInfo={judgeContent}
onSetState={(newContent) => {
Object.assign(judgeContent, newContent);
}}
/>
</TabPane>
<TabPane
tab={<span className="icon iconfont">&#xe7fd; 填空题</span>}
key="GAP_FILLING"
>
<NewQuestionTab
questionTypeKey={activeKey}
onRef={(ref) => {
this.gapRef = ref;
}}
questionInfo={gapFillingContent}
onSetState={(newContent) => {
Object.assign(gapFillingContent, newContent);
console.log("gapFillingContent:", newContent);
}}
/>
</TabPane>
<TabPane
tab={
<span className="icon iconfont">
&#xe7fe; 不定项选择题{" "}
<Tooltip title="至少有一项正确，至多不限的选择题，多项选择题的一种特殊形式">
<span style={{ color: "#BFBFBF" }}>&#xe7c4;</span>
</Tooltip>
</span>
}
key="INDEFINITE_CHOICE"
>
<NewQuestionTab
questionTypeKey={activeKey}
onRef={(ref) => {
this.indefiniteRef = ref;
}}
questionInfo={indefiniteChoiceContent}
onSetState={(newContent) => {
Object.assign(indefiniteChoiceContent, newContent);
}}
onLogger={this.handleLogger}
/>
</TabPane>
</Tabs>
</div>
<div className="footer">
<Button
onClick={() => {
this.handleGoBack();
}}
>
取消
</Button>
<Button
onClick={() => {
this.confirmSaveQuestion("add");
}}
>
保存并继续添加
</Button>
<Button
type="primary"
onClick={() => {
this.confirmSaveQuestion("close");
}}
>
保存
</Button>
</div>
</div>
);
}
}
export default AddNewQuestion;
src/modules/teach-tool/AddNewQuestion.less 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-25 13:52:01
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:32:11
* @Description: 助学工具-题库-题目管理-新增题目样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
.add-new-question {
position: relative !important;
.box {
margin-bottom: 66px !important;
.ant-tabs {
color: #666666;
}
}
.footer {
position: fixed;
bottom: 0;
height: 58px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 252px;
background: #fff;
border-top: 1px solid #e8e8e8;
z-index: 999;
.ant-btn {
margin-left: 10px;
}
}
}
src/modules/teach-tool/QuestionBankIndex.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-21 17:51:01
* @LastEditors: yuananting
* @LastEditTime: 2021-03-15 14:46:12
* @Description: 助学工具-题库-题库主页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import "./QuestionBankIndex.less";
import QuestionBankSider from "./components/QuestionBankSider";
import QuestionManageContent from "./components/QuestionManageContent";
import User from "@/common/js/user";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
class QuestionBankIndex extends Component {
constructor(props) {
super(props);
this.state = {
selectedCategoryId: "",
loading: true,
dataSource: [], // 题库列表数据
totalCount: 1, // 题库数据总条数
};
}
componentDidMount() {}
getCategoryIdFromSider = (selectedCategoryId) => {
if (selectedCategoryId && selectedCategoryId.length > 0) {
this.setState({ selectedCategoryId: selectedCategoryId[0] });
}
};
updatedSiderTreeFromList = (updatedCategoryId) => {
this.setState({updatedCategoryId});
};
render() {
return (
<div className="question-bank-index page">
<div className="content-header">题目</div>
<div className="box content-body">
<div className="sider">
<QuestionBankSider
getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
updatedCategoryId={this.state.updatedCategoryId}
/>
</div>
<div className="content">
<QuestionManageContent
updatedSiderTree={this.updatedSiderTreeFromList.bind(this)}
selectedCategoryId={this.state.selectedCategoryId}
/>
</div>
</div>
</div>
);
}
}
export default QuestionBankIndex;
src/modules/teach-tool/QuestionBankIndex.less 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-21 18:27:43
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:32:24
* @Description: 助学工具-题库-题库主页面样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
.question-bank-index {
.content-body {
display: flex;
.site-layout-background {
background: #fff;
}
.sider {
min-width: 260px;
}
.content {
width: 100%;
margin-left: 24px;
height: calc(100vh - 160px);
}
}
}
src/modules/teach-tool/QuestionCategoryManage.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-23 18:28:50
* @LastEditors: yuananting
* @LastEditTime: 2021-03-15 15:14:10
* @Description: 助学工具-题库-主页面分类管理
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import Breadcrumbs from "@/components/Breadcrumbs";
import "./QuestionCategoryManage.less";
import NewEditQuestionBankCategory from "./modal/NewEditQuestionBankCategory";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
import User from "@/common/js/user";
import {
Tree,
Input,
Space,
Button,
Menu,
Dropdown,
message,
Modal,
} from "antd";
import ShowTips from "@/components/ShowTips";
const { DirectoryTree } = Tree;
const { Search } = Input;
const { confirm } = Modal;
class QuestionCategoryManage extends Component {
constructor(props) {
super(props);
this.state = {
NewEditQuestionBankCategory: null, //新增或编辑分类模态框
treeData: [],
treeMap: {},
selectedKeys: ["0"],
};
}
componentDidMount() {
this.queryCategoryTree();
}
// 查询分类树
queryCategoryTree = (categoryName) => {
let query = {
source: 0,
categoryName,
userId: User.getStoreUserId(),
tenantId: User.getStoreId(),
};
QuestionBankService.queryCategoryTree(query).then((res) => {
const { result = [] } = res;
const defaultNode = { id: "0", categoryName: "未分类", categoryCount: 0 };
result.unshift(defaultNode);
this.setState({ treeData: this.renderTreeNodes(result, categoryName) });
this.setState({
expandedKeys: this.getFirstLevelKeys(result),
});
});
};
// 删除分类
delCategory = (item) => {
return confirm({
title: "确认删除该分类吗？",
content:
"此分类下存在关联项目，如删除，此分类下包含的所有内容将自动转入“未分类”中。",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => {
let params = {
categoryId: item.id,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
QuestionBankService.delCategory(params).then((res) => {
if (res.success) {
message.success("删除分类成功");
this.queryCategoryTree();
}
});
},
});
};
// 新增或编辑分类
newEditQuestionCategory = (categoryType, addLevelType, type, node) => {
let title = "";
let label = "";
switch (categoryType) {
case "newEqualLevelCategory":
title = "新增分类";
label = "分类名称";
break;
case "newChildLevelCategory":
title = "新增子分类";
label = "子分类名称";
break;
case "editEqualLevelCategory":
title = "编辑分类";
label = "分类名称";
break;
case "editChildLevelCategory":
title = "编辑子分类";
label = "子分类名称";
break;
}
const m = (
<NewEditQuestionBankCategory
node={node}
addLevelType={addLevelType}
type={type}
treeData={this.state.treeData}
title={title}
label={label}
close={() => {
this.queryCategoryTree();
this.setState({
NewEditQuestionBankCategory: null,
});
}}
/>
);
this.setState({ NewEditQuestionBankCategory: m });
};
initDropMenu = (item) => {
return (
<Menu>
<Menu.Item key="0">
<span
onClick={() => {
let categoryType =
item.categoryLevel === 0
? "editEqualLevelCategory"
: "editChildLevelCategory";
this.newEditQuestionCategory(categoryType, "equal", "edit", item);
}}
>
重命名
</span>
</Menu.Item>
<Menu.Item key="1">
<span
onClick={() => {
this.delCategory(item);
}}
>
删除
</span>
</Menu.Item>
</Menu>
);
};
getRelatedNodes = (parentId) => {
return this.state.treeMap[parentId]
? this.state.treeMap[parentId].sonCategoryList
: [];
};
onDrop = (info) => {
// 未分类不可以拖拽
if (
info.dragNode.categoryName === "未分类" ||
info.node.categoryName === "未分类"
)
return;
// 不允许其他节点拖拽到未分类之前
if (
info.node.categoryName === "未分类" &&
info.dropToGap &&
info.dropPosition === -1
)
return;
let targetParentId = info.dropToGap ? info.node.parentId : info.node.id;
let relatedNodes = this.getRelatedNodes(targetParentId);
const dropKey = info.node.key;
const dragKey = info.dragNode.key;
const dropPos = info.node.pos.split("-");
const dropPosition =
info.dropPosition - Number(dropPos[dropPos.length - 1]);
const loop = (data, key, callback) => {
for (let i = 0; i < data.length; i++) {
if (data[i].key === key) {
return callback(data[i], i, data);
}
if (data[i].sonCategoryList) {
loop(data[i].sonCategoryList, key, callback);
}
}
};
const data = [...this.state.treeData];
let getSuf = function (name, originCategoryName, sufIndex) {
if (relatedNodes && relatedNodes.length > 0) {
let sameNameNodes = [];
relatedNodes.forEach((item) => {
if (item.id === info.dragNode.id) return true;
if (item.categoryName === name) {
sameNameNodes.push(item);
}
});
if (sameNameNodes.length > 0) {
sufIndex++;
return getSuf(
originCategoryName + `(${sufIndex})`,
originCategoryName,
sufIndex
);
}
}
return sufIndex;
};
let dragObj;
loop(data, dragKey, (item, index, arr) => {
arr.splice(index, 1);
item.parentId = targetParentId;
if (item.originCategoryName) {
item.categoryName = item.originCategoryName;
} else {
item.originCategoryName = item.categoryName;
}
info.dragNode.categoryName = item.originCategoryName;
let sufIndex = getSuf(
info.dragNode.categoryName,
item.originCategoryName,
0
);
item.categoryName = item.categoryName + (sufIndex ? `(${sufIndex})` : "");
item.categoryName =
item.originCategoryName + (sufIndex ? `(${sufIndex})` : "");
dragObj = item;
});
if (!info.dropToGap) {
loop(data, dropKey, (item) => {
item.sonCategoryList = item.sonCategoryList || [];
item.sonCategoryList.unshift(dragObj);
});
} else if (
(info.node.props.sonCategoryList || []).length > 0 &&
info.node.props.expanded &&
dropPosition === 1
) {
loop(data, dropKey, (item) => {
item.sonCategoryList = item.children || [];
item.sonCategoryList.unshift(dragObj);
});
} else {
let ar;
let i;
loop(data, dropKey, (item, index, arr) => {
ar = arr;
i = index;
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
}
data.shift();
let newTreeData = this.renderTreeNodes(this.handleLoop(data, 0));
this.setState({ treeData: newTreeData });
let params = {
categoryList: newTreeData,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
QuestionBankService.editCategoryTree(params).then((res) => {
this.queryCategoryTree();
});
};
handleLoop = (data, level) => {
data.map((item, index) => {
item.sort = index;
item.categoryLevel = level;
if (item.sonCategoryList) {
item.children = this.handleLoop(item.sonCategoryList, level + 1);
item.sonCategoryList = this.handleLoop(item.sonCategoryList, level + 1);
}
return item;
});
return data;
};
/** 获取树状第一级key 设置默认展开第一项 */
getFirstLevelKeys = (data) => {
let firstLevelKeys = [];
data.forEach((item) => {
if (item.categoryLevel === 0) {
firstLevelKeys.push(item.key);
}
});
return firstLevelKeys;
};
/** 树状展开事件 */
onExpand = (expandedKeys) => {
this.setState({ expandedKeys });
};
renderTreeNodes = (data, value) => {
let newTreeData = data.map((item) => {
item.title = item.categoryName;
item.key = item.id;
item.title = (
<div
style={{
opacity:
!value || (value && item.categoryName.indexOf(value) > -1)
? 1
: 0.5,
}}
className="node-title-div"
onMouseOver={(e) => {
let mouseNodeOpts = e.currentTarget.getElementsByTagName("div")[0];
if (mouseNodeOpts) {
mouseNodeOpts.style.visibility = "visible";
}
}}
onMouseOut={(e) => {
let mouseNodeOpts = e.currentTarget.getElementsByTagName("div")[0];
if (mouseNodeOpts) {
mouseNodeOpts.style.visibility = "hidden";
}
}}
>
<span>{item.categoryName}</span>
{item.categoryName !== "未分类" && (
<Space className="title-opts" size={50}>
<span
className="icon iconfont"
onClick={() => {
let nodesCount = 0;
const { treeData } = this.state;
if (item.categoryLevel === 0) {
// 第一层级
nodesCount = treeData.length;
} else {
let parentNodes = this.getRelatedNodes(item.parentId);
if (
parentNodes.length > 0 &&
parentNodes[0].sonCategoryList
) {
nodesCount = parentNodes[0].sonCategoryList.length;
} else {
nodesCount = 0;
}
}
if (nodesCount >= 30) {
message.info("最多只能添加30个分类");
return;
}
this.newEditQuestionCategory(
"newEqualLevelCategory",
"equal",
"new",
item
);
}}
>
&#xe7f5; 同级
</span>
{item.categoryLevel < 4 && (
<span
className="icon iconfont"
onClick={() => {
if (
item.sonCategoryList &&
item.sonCategoryList.length >= 30
) {
message.info("最多只能添加30个子分类");
return;
}
this.newEditQuestionCategory(
"newChildLevelCategory",
"child",
"new",
item
);
}}
>
&#xe7f8; 子级
</span>
)}
<Dropdown overlay={this.initDropMenu(item)}>
<span className="icon iconfont">更多 &#xe7f7;</span>
</Dropdown>
</Space>
)}
</div>
);
item.icon =
item.id === "default" ? (
<span className="icon iconfont" style={{ color: "#FBD140" }}>
&#xe7f6;
</span>
) : (
<span className="icon iconfont" style={{ color: "#FBD140" }}>
&#xe7f1;
</span>
);
if (item.sonCategoryList) {
item.children = this.renderTreeNodes(item.sonCategoryList, value);
}
return item;
});
// this.getFirstLevelKeys(newTreeData);
let map = {};
let getChildren = function (data) {
data.forEach((item) => {
map[item.id] = item;
if (item.sonCategoryList && item.sonCategoryList.length > 0) {
getChildren(item.sonCategoryList);
}
});
};
getChildren(data);
this.setState({ treeMap: map });
return newTreeData;
};
/** 树状选中事件 */
onSelect = (selectedKeys) => {
this.setState({ selectedKeys });
};
render() {
const { treeData, expandedKeys, selectedKeys } = this.state;
return (
<div className="page question-category-manage">
<Breadcrumbs
navList="课程分类"
goBack={() =>
window.RCHistory.push({
pathname: "/question-bank-index",
})
}
/>
<div className="box">
<div className="search-condition">
<span className="search-label">搜索名称：</span>
<Search
placeholder="请输入名称"
style={{ width: "calc(100% - 84px)" }}
onSearch={(value) => this.queryCategoryTree(value)}
/>
</div>
<Button
type="primary"
onClick={() => {
if (treeData.length >= 30) {
message.info("最多只能添加30个分类");
return;
}
this.newEditQuestionCategory(
"newEqualLevelCategory",
"equal",
"new"
);
}}
>
新增一级分类
</Button>
<div className="show-tips" style={{ marginTop: 12 }}>
<ShowTips message="为方便管理，该分类用于课程、培训计划、题库、知识库等模块，改动将同步各模块更新" />
</div>
<div className="course-category-tree">
<DirectoryTree
expandedKeys={expandedKeys}
onExpand={this.onExpand}
selectedKeys={selectedKeys}
onSelect={this.onSelect}
draggable
blockNode
onDrop={this.onDrop}
treeData={treeData}
></DirectoryTree>
</div>
</div>
{this.state.NewEditQuestionBankCategory}
</div>
);
}
}
export default QuestionCategoryManage;
src/modules/teach-tool/QuestionCategoryManage.less 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-23 19:41:42
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:32:37
* @Description: 助学工具-题库-题目分类管理样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
.question-category-manage {
position: relative;
.search-condition {
width: 30%;
margin-bottom: 16px;
.search-label {
vertical-align: middle;
display: inline-block;
height: 32px;
line-height: 32px;
}
}
.course-category-tree {
position: relative;
margin-top: 16px;
.ant-tree.ant-tree-directory {
font-size: 14px;
font-weight: 400;
color: #666666;
.anticon {
color: #666666;
}
.ant-tree-treenode {
height: 44px;
padding: 0;
span {
line-height: 44px;
}
.ant-tree-node-content-wrapper.ant-tree-node-selected {
color: #666666;
}
.ant-tree-node-content-wrapper {
display: flex;
.ant-tree-title {
width: 100%;
display: flex;
*.node-title-div {
width: 100%;
display: flex;
justify-content: space-between;
.title-opts {
visibility: hidden;
}
}
}
}
}
// .ant-tree-treenode-selected:hover::before,
// .ant-tree-treenode-selected::before {
// background: rgb(255 251 240);
// }
}
}
.xm-show-tip {
background: #f1f3f6 !important;
span.icon {
color: #bfbfbf !important;
}
}
}
src/modules/teach-tool/components/NewQuestionTab.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-25 14:34:29
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 11:03:21
* @Description: 助学工具-题库-题目管理-新建题目Tab
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Form, Radio, message, Checkbox, Tag, Tooltip, Input } from "antd";
import "./NewQuestionTab.less";
import Upload from "@/core/upload";
import QuestionEditor from "./QuestionEditor";
import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
import {
NUM_TO_WORD_MAP,
MEDIA_FILE_ACCEPT,
} from "@/common/constants/punchClock/punchClock";
import { defineOptionInfo, defineJudgeOptionInfo } from "./model";
import UploadingProgress from "./UploadingProgress";
import XMAudio from "./XMAudio";
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) {
super(props);
const { questionInfo = {} } = props;
const {
questionStemList,
gapFillingAnswerList,
optionList,
questionAnswerDescList,
showBox,
} = questionInfo;
this.state = {
stemContent: JSON.parse(JSON.stringify(questionStemList)), // 题干内容
gapFillingAnswer: JSON.parse(JSON.stringify(gapFillingAnswerList)), // 填空题-选项列表
chooseOptions: JSON.parse(JSON.stringify(optionList)), // 单选多选不定项判断-选项列表
questionAnswerDesc: JSON.parse(JSON.stringify(questionAnswerDescList)), // 答案解析
accept: MEDIA_FILE_ACCEPT["PICTURE"], // 上传媒体类型
fileType: "PICTURE", // 媒体枚举
showRecord: false, // 录音弹窗
showBox: showBox,
gapFillingOptions: [],
blanksList: [], // 填空列表
showSelectFileModal: false,
mediaType: "",
diskList: [], // 资料云盘文件列表
};
this.uploadInput = React.createRef();
this.markKey = window.random_string(16);
}
componentDidMount() {
const { chooseOptions } = this.state;
if (
["INDEFINITE_CHOICE", "MULTI_CHOICE", "SINGLE_CHOICE"].includes(
this.props.questionTypeKey
)
) {
if (chooseOptions.length === 0) {
// 选择题（单选 多选 不定项）-插入4条默认选项
for (var i = 0; i < 4; i++) {
this.handleAddOption();
this.setState({ [`optionsValidate_${i}`]: "success" });
this.setState({ [`optionsText_${i}`]: "" });
}
}
} else if (this.props.questionTypeKey === "JUDGE") {
this.initJudgeOption("正确");
this.initJudgeOption("错误");
}
this.props.onRef(this);
}
handleLogger = (en, cn) => {
const { onLogger } = this.props;
onLogger && onLogger(en, cn);
};
static getDerivedStateFromProps(nextProps, prevState) {
console.log("nextProps:", nextProps)
// 控制录音组件展示
if (nextProps.showBox && !prevState.showBox) {
return {
showRecord: false,
showBox: nextProps.showBox,
};
}
return {
showBox: nextProps.showBox,
};
}
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({
chooseOptions: JSON.parse(JSON.stringify(questionInfo.optionList)),
}); // 单选多选不定项-选项列表
this.setState({
questionAnswerDesc: JSON.parse(
JSON.stringify(questionInfo.questionAnswerDescList)
),
}); // 答案解析
this._onSetState();
}
return true;
}
_onSetState = (params = {}) => {
this.setState({ ...params, updateKey: window.random_string(16) }, () => {
this.props.onSetState({
questionStemList: JSON.parse(JSON.stringify(this.state.stemContent)),
gapFillingAnswerList: JSON.parse(
JSON.stringify(this.state.gapFillingAnswer)
),
optionList: JSON.parse(JSON.stringify(this.state.chooseOptions)),
questionAnswerDescList: JSON.parse(
JSON.stringify(this.state.questionAnswerDesc)
),
});
});
};
transferStemDocument = (txt) => {
const template = `<div class='stem'>${txt}</div>`;
let doc = new DOMParser().parseFromString(template, "text/html");
let div = doc.querySelector(".stem");
return div;
};
// 保存校验
checkInput = () => {
let validateError = 0;
// 题干校验
let stemContent = _.find(
this.state.stemContent,
(contentItem) => contentItem.type === "RICH_TEXT"
);
const stem = stemContent.content.replace(/<[^>]+>/g, "");
if (this.props.questionTypeKey === "GAP_FILLING") {
if (this.state.blanksList.length === 0) {
this.setState({ stemValidate: "error" });
this.setState({
stemText: (
<div style={{ marginTop: 8, minWidth: "523px" }}>
请输入正确格式，示例：党章规定，凡事有
<span style={{ padding: "0 10px", borderBottom: "1px solid" }}>
填空1
</span>
人以上的
<span style={{ padding: "0 10px", borderBottom: "1px solid" }}>
填空2
</span>
，都应该成立党的基层组织
</div>
),
});
validateError++;
} else {
this.setState({ stemValidate: "success" });
this.setState({ stemText: "" });
}
} else {
if (stem.length === 0) {
this.setState({ stemValidate: "error" });
this.setState({ stemText: "请输入题干" });
validateError++;
} else {
this.setState({ stemValidate: "success" });
this.setState({ stemText: "" });
}
}
// 选项校验
let optionUnChecked = 0;
const { chooseOptions } = this.state;
if (this.props.questionTypeKey === "GAP_FILLING") {
this.state.blanksList.forEach((item, index) => {
if (item.answerTagList.length === 0) {
this.setState({ [`optionsValidate_${index}`]: "error" });
this.setState({ [`optionsText_${index}`]: "请输入答案" });
validateError++;
} else {
this.setState({ [`optionsValidate_${index}`]: "success" });
this.setState({ [`optionsText_${index}`]: "" });
}
});
} else {
chooseOptions.forEach((item, index) => {
const optionContent = item.questionOptionContentList;
optionUnChecked = item.isCorrectAnswer
? optionUnChecked
: optionUnChecked + 1;
if (
optionContent.length === 1 &&
optionContent[0].type === "RICH_TEXT" &&
optionContent[0].content.length === 0
) {
this.setState({ [`optionsValidate_${index}`]: "error" });
this.setState({ [`optionsText_${index}`]: "请输入选项" });
validateError++;
} else {
this.setState({ [`optionsValidate_${index}`]: "success" });
this.setState({ [`optionsText_${index}`]: "" });
}
});
if (optionUnChecked === chooseOptions.length) {
this.setState({ radioValidate: "error" });
this.setState({ radioText: "请选择正确答案" });
validateError++;
} else {
this.setState({ radioValidate: "success" });
this.setState({ radioText: "" });
}
if (
this.props.questionTypeKey === "MULTI_CHOICE" &&
this.state.chooseOptions.length - optionUnChecked === 1
) {
this.setState({ radioValidate: "error" });
this.setState({ radioText: "最少选两个" });
validateError++;
}
}
return validateError;
};
/**
* 预览
*
* @memberof QuestionInputItem
*/
handleScanFile = (scanFileType, scanFileAddress) => {
this.setState({
showScanFile: true,
scanFileAddress,
scanFileType,
});
};
/**
* 添加选项
*
* @memberof QuestionInputItem
*/
handleAddOption = (content) => {
const { chooseOptions } = this.state;
if (chooseOptions.length >= 20) {
message.warning("最多添加20个选项");
} else {
chooseOptions.push(defineOptionInfo(content));
this._onSetState();
}
};
/**
* 初始化判断选项
*
* @memberof QuestionInputItem
*/
initJudgeOption = (content) => {
const { chooseOptions } = this.state;
chooseOptions.push(defineJudgeOptionInfo(content));
this._onSetState();
};
/**
* 删除选项
*
* @memberof QuestionInputItem
*/
handleDelOption = (optionIndex) => {
const { chooseOptions } = this.state;
this.handleLogger("delete_option", "删除选项");
if (chooseOptions.length < 3) {
message.warning("至少保留2个选项");
} else {
chooseOptions.splice(optionIndex, 1);
this._onSetState();
}
};
/**
* 移动选项
*
* @memberof QuestionInputItem
*/
handleMoveOption = (optionIndex, moveLength) => {
const { chooseOptions } = this.state;
const optionItem = chooseOptions.splice(optionIndex + moveLength, 1);
this.handleLogger("sort_option", "选项排序");
chooseOptions.splice(optionIndex, 0, optionItem[0]);
this._onSetState();
};
/**
* 选择上传文件类型
*
* @memberof QuestionInputItem
*/
handleChangeMedia = (key, uploadItemTarget, contentType) => {
this.setState({ contentType });
this.setState({ mediaType: key });
const pictureMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "PICTURE";
});
const voiceMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "VOICE";
});
const recordMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "RECORD";
});
const videodMediaArr = _.filter(uploadItemTarget, (mediaItem) => {
return mediaItem.type === "VIDEO";
});
switch (contentType) {
case "QUESTION_STEM":
var existType = [];
if (pictureMediaArr.length > 0) {
existType.push("PICTURE");
}
if (voiceMediaArr.length > 0) {
existType.push("VOICE");
}
if (recordMediaArr.length > 0) {
existType.push("RECORD");
}
if (videodMediaArr.length > 0) {
existType.push("VIDEO");
}
if (existType.length > 0 && !existType.includes(key)) {
return message.warning("只能添加1种类型的多媒体文件");
} else {
if (key === "PICTURE" && pictureMediaArr.length > 8) {
return message.warning("只能添加9张图片");
}
if (key === "VOICE" && voiceMediaArr.length > 2) {
return message.warning("只能添加3个音频");
}
if (key === "VIDEO" && videodMediaArr.length > 2) {
return message.warning("只能添加3个视频");
}
}
break;
case "QUESTION_OPTION":
var existType = [];
if (pictureMediaArr.length > 0) {
existType.push("PICTURE");
}
if (voiceMediaArr.length > 0) {
existType.push("VOICE");
}
if (recordMediaArr.length > 0) {
existType.push("RECORD");
}
if (videodMediaArr.length > 0) {
existType.push("VIDEO");
}
if (existType.length > 0) {
return message.warning("只能添加1个多媒体文件");
}
break;
case "QUESTION_ANSWER_DESC":
var existType = [];
if (pictureMediaArr.length > 0) {
existType.push("PICTURE");
}
if (voiceMediaArr.length > 0) {
existType.push("VOICE");
}
if (recordMediaArr.length > 0) {
existType.push("RECORD");
}
if (videodMediaArr.length > 0) {
existType.push("VIDEO");
}
if (existType.length > 2 && !existType.includes(key)) {
return message.warning("只能添加3种类型的多媒体文件");
} else {
if (key === "PICTURE" && pictureMediaArr.length > 8) {
return message.warning("只能添加9张图片");
}
if (key === "VOICE" && voiceMediaArr.length > 2) {
return message.warning("只能添加3个音频");
}
if (key === "RECORD" && recordMediaArr.length > 2) {
return message.warning("只能添加3个录音");
}
if (key === "VIDEO" && videodMediaArr.length > 2) {
return message.warning("只能添加3个视频");
}
}
break;
}
this.setState(
{
uploadItemTarget,
},
() => {
MEDIA_FILE_ACCEPT[key] &&
this.setState(
{
accept: MEDIA_FILE_ACCEPT[key],
fileType: key,
},
() => {
this.uploadInput.current.value = "";
this.setState({ showSelectFileModal: key !== "RECORD" });
// this.uploadInput.current.click();
}
);
// 录音
if (key === "RECORD") {
this.setState({
showRecord: true,
});
}
}
);
};
async uploadFile(mediaFile) {
const { fileType, uploadItemTarget, contentType } = this.state;
if (!mediaFile) return;
if (fileType === "VOICE") {
if (
!MEDIA_FILE_ACCEPT.VOICE.split(",").includes(mediaFile.folderFormat)
) {
message.warning("文件格式不正确");
return;
}
if (mediaFile.size > 20 * 1024 * 1024) {
Modal.warning({
title: "音频过大",
content: "音频大小超过20M，请压缩后上传",
});
return;
}
}
if (fileType === "PICTURE") {
if (
!MEDIA_FILE_ACCEPT.PICTURE.split(",").includes(mediaFile.folderFormat)
) {
message.warning("文件格式不正确");
return;
}
if (mediaFile.folderSize > 1 * 1024 * 1024) {
Modal.warning({
title: "图片过大",
content: "图片大小超过1M，请压缩后上传",
});
return;
}
}
if (fileType === "VIDEO") {
if (
!MEDIA_FILE_ACCEPT.VIDEO.split(",").includes(mediaFile.folderFormat)
) {
message.warning("文件格式不正确");
return;
}
if (mediaFile.folderSize > 500 * 1024 * 1024) {
Modal.warning({
title: "视频过大",
content: "视频大小超过500G，请压缩后上传",
});
return;
}
}
const originArr = mediaFile.folderName.split(".");
const originType = originArr[originArr.length - 1];
const uploadObj = {
contentType,
type: fileType,
contentName: `${window.random_string(16)}.${originType}`, // 文件名
fileType: mediaFile.folderFormat, // 文件后缀
content: mediaFile.ossUrl, // url
};
if (["VIDEO", "VOICE"].includes(fileType)) {
try {
await new Promise((resolve) => {
const fileurl = URL.createObjectURL(mediaFile);
const audioElement = new Audio(fileurl);
audioElement.addEventListener("loadedmetadata", (_event) => {
const duration = audioElement.duration;
uploadObj.size = Math.ceil(duration) * 1000;
resolve();
});
});
} catch (error) {
console.log(error);
}
} else if (fileType === "PICTURE") {
uploadObj.size = mediaFile.folderSize;
}
uploadItemTarget.push(uploadObj);
this.setState({}, () => {
this._onSetState();
this.uploadInput.current.value = "";
});
}
changeBlankCount = (data) => {
console.log("data:", data);
data.forEach((item) => {
if (!item.answerTagList) {
item.answerTagList = [];
}
item.inputVisible = false;
item.errorHold = false;
item.editInput = false;
return item;
});
this.setState({ blanksList: data });
};
addAnswerTag = (optionItem) => {
const _blanksList = this.state.blanksList;
_blanksList.forEach((item) => {
if (item.id === optionItem.id) {
item.inputVisible = true;
}
});
this.setState({ blanksList: _blanksList });
};
handleInputConfirm = (optionItem, val) => {
const _blanksList = this.state.blanksList;
var gapFillingAnswer = [];
_blanksList.forEach((item) => {
gapFillingAnswer.push({ correctAnswerList: item.answerTagList });
if (item.id === optionItem.id) {
if (val) {
optionItem.answerTagList.push(val);
optionItem.inputVisible = false;
} else {
optionItem.errorHold = true;
}
}
});
this.setState({ gapFillingAnswer }, () => this._onSetState());
this.setState({ blanksList: _blanksList });
};
handleInputClose = (optionItem, removedTag) => {
const _blanksList = this.state.blanksList;
_blanksList.forEach((item) => {
if (item.id === optionItem.id) {
optionItem = optionItem.answerTagList.filter(
(tag) => tag !== removedTag
);
}
});
this.setState({ blanksList: _blanksList });
};
handleInputEdit = (optionItem, index) => {
const _blanksList = this.state.blanksList;
_blanksList.forEach((item) => {
if (item.id === optionItem.id) {
item.answerTagList.map();
}
});
this.setState({ blanksList: _blanksList });
};
renderGapFillingAnswer = (optionItem, optionIndex) => {
return (
<div className="gap-answer-box" key={optionIndex}>
<span className="gap-answer-label">
填空
{optionIndex + 1}.
</span>
<div className="gap-answer-content">
{optionItem.answerTagList.map((tag, index) => {
return optionItem.editInput ? (
<Input
placeholder={optionItem.errorHold ? "请输入" : ""}
style={{
border: optionItem.errorHold && "1px solid #FF4F4F",
}}
value={tag}
size="small"
suffix={<CloseOutlined style={{ color: "#999999" }} />}
onBlur={(e) =>
this.handleInputConfirm(optionItem, e.target.value, index)
}
onPressEnter={(e) =>
this.handleInputConfirm(optionItem, e.target.value, index)
}
/>
) : (
<Tag
className="edit-tag"
closable
onClose={() => this.handleInputClose(optionItem, tag)}
onDoubleClick={(e) => {
this.handleInputEdit(optionItem, index);
// e.preventDefault();
}}
>
{tag}
</Tag>
);
})}
{optionItem.inputVisible && (
<Input
placeholder={optionItem.errorHold && "请输入"}
style={{
border: optionItem.errorHold && "1px solid #FF4F4F",
}}
size="small"
suffix={<CloseOutlined style={{ color: "#999999" }} />}
onBlur={(e) =>
this.handleInputConfirm(optionItem, e.target.value, "save")
}
onPressEnter={(e) =>
this.handleInputConfirm(optionItem, e.target.value, "save")
}
/>
)}
<Tag
style={{ color: "#5289FA", fontSize: 14 }}
onClick={() => {
this.addAnswerTag(optionItem);
}}
>
<PlusOutlined /> 新增答案
</Tag>
</div>
</div>
);
};
renderJudgeOption = (judgeOptions) => {
return (
<div dangerouslySetInnerHTML={{ __html: judgeOptions[0].content }} />
);
};
/**
* 渲染输入内容
*
* @memberof QuestionInputItem
*/
renderContent = (
contentList,
placehold,
mediaBtn,
contentType,
validateStatus
) => {
const isGapFilling = this.props.questionTypeKey === "GAP_FILLING";
const editorContent = _.find(
contentList,
(contentItem) => contentItem.type === "RICH_TEXT"
);
const pictureMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "PICTURE";
});
const voiceMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "VOICE";
});
const recordMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "RECORD";
});
const videoMediaList = _.filter(contentList, (mediaItem) => {
return mediaItem.type === "VIDEO";
});
return (
<React.Fragment>
<div>
<QuestionEditor
markKey={this.markKey}
placehold={placehold}
validateStatus={validateStatus}
detailInfo={editorContent}
isGapFilling={isGapFilling}
contentType={contentType}
mediaBtn={mediaBtn}
changeBlankCount={this.changeBlankCount.bind(this)}
bindChangeContent={(cb, textElemId) => {
this.setState({ textElemId });
editorContent.handleChangeContent = cb;
}}
onChange={(content, textLength) => {
editorContent.content = content;
editorContent.textLength = textLength;
this._onSetState();
}}
onUploadMedia={(key) => {
this.handleChangeMedia(key, contentList, contentType);
}}
/>
</div>
{contentType === "QUESTION_ANSWER_DESC" ? (
<div className="question-desc-box">
{pictureMediaList.length > 0 && (
<div className="desc-picture-box">
{_.map(pictureMediaList, (pictureItem, pictureIndex) => {
let { content, status } = pictureItem;
if (["init", "fail"].includes(status)) {
return (
<div className="mt12" key={pictureIndex}>
<UploadingProgress
fileDesc={pictureItem}
canCancelUpload
onReupload={() => this.handleReupload(pictureItem)}
onAbort={() =>
this.handleAbort(pictureItem, pictureIndex)
}
/>
</div>
);
} else {
return (
<div className="picture-box" key={pictureIndex}>
<img
className="img-box"
src={content}
onClick={() => this.handleScanFile("JPG", content)}
/>
<span
className="icon_arrow iconfont"
onClick={() => {
contentList.map((item, index) => {
if (
item.contentName === pictureItem.contentName
) {
contentList.splice(index, 1);
return item;
}
});
this._onSetState();
}}
>
&#xe717;
</span>
</div>
);
}
})}
</div>
)}
{recordMediaList.length > 0 && (
<div className="desc-audio-box">
{_.map(recordMediaList, (recordItem, recordIndex) => {
let { content, status, size } = recordItem;
if (["init", "fail"].includes(status)) {
return (
<div className="mt12" key={recordIndex}>
<UploadingProgress
fileDesc={recordItem}
canCancelUpload
onReupload={() => this.handleReupload(recordItem)}
onAbort={() =>
this.handleAbort(recordItem, recordIndex)
}
/>
</div>
);
} else {
return (
<div className="audio-box" key={recordIndex}>
<XMAudio
forbidParse
url={content}
getDuration={(durationSize) => {
size = durationSize;
this.setState({});
}}
index={recordIndex}
size={size || 1000}
/>
<span
className="icon_sider iconfont"
onClick={() => {
contentList.map((item, index) => {
if (item.contentName === recordItem.contentName) {
contentList.splice(index, 1);
return item;
}
});
this._onSetState();
}}
>
&#xe717;
</span>
</div>
);
}
})}
</div>
)}
{voiceMediaList.length > 0 && (
<div className="desc-audio-box">
{_.map(voiceMediaList, (voiceItem, voiceIndex) => {
let { content, status, size } = voiceItem;
if (["init", "fail"].includes(status)) {
return (
<div className="mt12" key={voiceIndex}>
<UploadingProgress
fileDesc={voiceItem}
canCancelUpload
onReupload={() => this.handleReupload(voiceItem)}
onAbort={() =>
this.handleAbort(voiceItem, voiceIndex)
}
/>
</div>
);
} else {
return (
<div className="audio-box" key={voiceIndex}>
<XMAudio
forbidParse
url={content}
getDuration={(durationSize) => {
size = durationSize;
this.setState({});
}}
index={voiceIndex}
size={size || 1000}
/>
<span
className="icon_sider iconfont"
onClick={() => {
contentList.map((item, index) => {
if (item.contentName === voiceItem.contentName) {
contentList.splice(index, 1);
return item;
}
});
this._onSetState();
}}
>
&#xe717;
</span>
</div>
);
}
})}
</div>
)}
{videoMediaList.length > 0 && (
<div className="desc-video-box">
{_.map(videoMediaList, (videoItem, videoIndex) => {
let { content, status } = videoItem;
if (["init", "fail"].includes(status)) {
return (
<div className="mt12" key={videoIndex}>
<UploadingProgress
fileDesc={videoItem}
canCancelUpload
onReupload={() => this.handleReupload(videoItem)}
onAbort={() =>
this.handleAbort(videoItem, videoIndex)
}
/>
</div>
);
} else {
return (
<div className="video-box" key={videoIndex}>
<img
className="video-box_content"
src={`${content}?x-oss-process=video/snapshot,t_0,m_fast`}
/>
<img
className="video-box_btn"
src="https://image.xiaomaiketang.com/xm/r5H8cYm4ch.png"
onClick={() => this.handleScanFile("MP4", content)}
/>
<span
className="icon_arrow iconfont"
onClick={() => {
contentList.map((item, index) => {
if (item.contentName === videoItem.contentName) {
contentList.splice(index, 1);
return item;
}
});
this._onSetState();
}}
>
&#xe717;
</span>
</div>
);
}
})}
</div>
)}
</div>
) : (
_.map(contentList, (contentItem, index) => {
const { type, content, status } = contentItem;
let dom = "";
if (["init", "fail"].includes(status)) {
return (
<div className="mt12" key={index}>
<UploadingProgress
fileDesc={contentItem}
canCancelUpload
onReupload={() => this.handleReupload(contentItem)}
onAbort={() => this.handleAbort(contentItem, index)}
/>
</div>
);
}
switch (type) {
case "PICTURE":
dom = (
<div className="picture-box">
<img
className="img-box"
src={content}
onClick={() => this.handleScanFile("JPG", content)}
/>
</div>
);
break;
case "VOICE":
dom = (
<div className="audio-box">
<XMAudio
forbidParse
url={contentItem.content}
getDuration={(size) => {
contentItem.size = size;
this.setState({});
}}
index={index}
size={contentItem.size || 1000}
/>
</div>
);
break;
case "RECORD":
dom = (
<div className="audio-box">
<XMAudio
forbidParse
url={contentItem.content}
getDuration={(size) => {
contentItem.size = size;
this.setState({});
}}
index={index}
size={contentItem.size || 1000}
/>
</div>
);
break;
case "VIDEO":
dom = (
<div
className="video-box"
onClick={() => this.handleScanFile("MP4", content)}
>
<img
className="video-box_content"
src={`${content}?x-oss-process=video/snapshot,t_0,m_fast`}
/>
<img
className="video-box_btn"
src="https://image.xiaomaiketang.com/xm/r5H8cYm4ch.png"
/>
</div>
);
break;
}
return dom ? (
<div
className="question-item_question-content"
style={{
display: ["PICTURE", "VIDEO"].includes(type)
? "inline-grid"
: "flex",
}}
key={index}
>
{dom}
<span
className={
["PICTURE", "VIDEO"].includes(type)
? "icon_arrow iconfont"
: "icon_sider iconfont"
}
onClick={() => {
contentList.splice(index, 1);
this._onSetState();
}}
>
&#xe717;
</span>
</div>
) : null;
})
)}
</React.Fragment>
);
};
/**
* 重新上传
*
* @memberof QuestionInputItem
*/
handleReupload = (uploadItem) => {
console.log("uploadItem:", uploadItem);
uploadItem.status = "init";
Upload.uploadToOSSEvent(
uploadItem.mediaFile,
uploadItem.contentName,
(url, xhr) => {
uploadItem.content = url;
uploadItem.xhr = xhr;
},
(event) => {
var percent = Math.floor((event.loaded / event.total) * 100);
uploadItem.progress = percent;
this._onSetState();
},
() => {
uploadItem.status = "success";
delete uploadItem.xhr;
delete uploadItem.progress;
delete uploadItem.mediaFile;
this._onSetState();
},
() => {
uploadItem.status = "fail";
uploadItem.progress = 0;
delete uploadItem.xhr;
this._onSetState();
}
);
};
/**
* 取消上传
*
* @memberof QuestionInputItem
*/
handleAbort = (uploadItem, index) => {
const { uploadItemTarget } = this.state;
const { xhr } = uploadItem;
xhr && xhr.abort && xhr.abort();
uploadItemTarget.splice(index, 1);
this._onSetState();
};
/**
* 完成语音录制
*
* @memberof QuestionInputItem
*/
handleFinishRecord = (mp3URL, duration) => {
const originArr = mp3URL.split(".");
const originType = originArr[originArr.length - 1];
const { uploadItemTarget, contentType } = this.state;
uploadItemTarget.push({
contentType,
type: "RECORD",
contentName: `${window.random_string(16)}.${originType}`, // 文件名
fileType: originType, // 文件后缀
content: mp3URL,
size: duration,
});
this._onSetState({ showRecord: false });
};
/**
* 取消录制
*
* @memberof QuestionInputItem
*/
handleCancelRecord = () => {
this.setState({ showRecord: false });
};
handleSelectMedia = (file) => {
this.uploadFile(file);
this.setState({
showSelectFileModal: false,
});
};
render() {
const {
stemContent,
chooseOptions,
questionAnswerDesc,
accept,
showRecord,
showScanFile,
scanFileType,
scanFileAddress,
blanksList,
showSelectFileModal,
mediaType,
diskList,
} = this.state;
const { stemValidate, stemText, radioValidate, radioText } = this.state;
const isJudge = this.props.questionTypeKey === "JUDGE";
const isGapFilling = this.props.questionTypeKey === "GAP_FILLING";
const placehold = isGapFilling ? (
<span>
示例：党章规定，凡事有
<span className="fill-line">&nbsp;&nbsp;填空1&nbsp;&nbsp;</span>
人以上的
<span className="fill-line">&nbsp;&nbsp;填空2&nbsp;&nbsp;</span>
，都应该成立党的基层组织
</span>
) : (
"必填（1000字以内，可粘贴小图）"
);
let acceptType = "";
let selectTypeList = [];
console.log("mediaType", mediaType);
switch (mediaType) {
case "PICTURE":
acceptType = MEDIA_FILE_ACCEPT.PICTURE;
selectTypeList = ["jpg", "png", "jpeg"];
break;
case "VOICE":
acceptType = MEDIA_FILE_ACCEPT.VOICE;
selectTypeList = ["mp3", "mpeg"];
break;
case "VIDEO":
acceptType = MEDIA_FILE_ACCEPT.VIDEO;
selectTypeList = ["mp4"];
break;
}
console.log(acceptType, selectTypeList);
return (
<div className="question-input-item_wrapper">
{/* 题干 */}
<Form>
<Form.Item
name="stemContent"
label="题干"
required
validateStatus={stemValidate}
help={stemText}
>
{this.renderContent(
stemContent,
placehold,
["VOICE", "RECORD", "PICTURE"],
"QUESTION_STEM",
stemValidate
)}
</Form.Item>
{isGapFilling ? (
<Form.Item
name="answer"
label={
<span>
答案{" "}
{blanksList.length === 0 && (
<span
className="icon iconfont"
style={{ color: "#BFBFBF", fontSize: 14 }}
>
&#xe7c4;
</span>
)}
</span>
}
required
className="question-answer_control"
>
{blanksList.length === 0 ? (
<span className="answer-tip">请在题干中插入答案占位符</span>
) : (
_.map(blanksList, (item, index) => {
return (
<Form.Item
validateStatus={this.state[`optionsValidate_${index}`]}
help={this.state[`optionsText_${index}`]}
>
{this.renderGapFillingAnswer(item, index)}
</Form.Item>
);
})
)}
</Form.Item>
) : (
<Form.Item
name="options"
label="选项"
required
className="question-option_control"
>
<div
className="question-item_options__list"
data-label="正确答案"
>
{_.map(chooseOptions, (optionItem, optionIndex) => {
const {
questionOptionContentList,
isCorrectAnswer,
} = optionItem;
console.log(
"questionOptionContentList:",
questionOptionContentList
);
optionItem.optionSort = optionIndex;
const mediaBtn = ["VOICE", "RECORD", "PICTURE"];
const placeHold =
"必填（1000字以内，可粘贴小图；可以不输入文字，只添加音频或图片）";
return (
<div
className="question-item_options__content"
key={optionIndex}
>
<div className="question-item_options__setting">
<Form.Item
validateStatus={radioValidate}
help={
optionIndex === chooseOptions.length - 1
? radioText
: ""
}
>
{/* 单选 or 判断*/}
{["SINGLE_CHOICE", "JUDGE"].includes(
this.props.questionTypeKey
) && (
<Radio
checked={isCorrectAnswer}
onClick={() => {
_.each(chooseOptions, (o) => {
o.isCorrectAnswer = 0;
});
optionItem.isCorrectAnswer = 1;
this._onSetState();
}}
/>
)}
{/* 多选 or 不定项 */}
{["INDEFINITE_CHOICE", "MULTI_CHOICE"].includes(
this.props.questionTypeKey
) && (
<Checkbox
checked={isCorrectAnswer === 1}
onChange={(e) => {
const checked = e.target.checked ? 1 : 0;
optionItem.isCorrectAnswer = checked;
this._onSetState();
}}
/>
)}
</Form.Item>
</div>
<div className="question-item_options__sort mr12">
{NUM_TO_WORD_MAP[optionIndex]}.
</div>
<div className="question-item_options__input">
<Form.Item
validateStatus={
this.state[`optionsValidate_${optionIndex}`]
}
help={this.state[`optionsText_${optionIndex}`]}
>
{isJudge
? this.renderJudgeOption(questionOptionContentList)
: this.renderContent(
questionOptionContentList,
placeHold,
mediaBtn,
"QUESTION_OPTION",
this.state[`optionsValidate_${optionIndex}`]
)}
</Form.Item>
</div>
{[
"INDEFINITE_CHOICE",
"MULTI_CHOICE",
"SINGLE_CHOICE",
].includes(this.props.questionTypeKey) && (
<div className="question-item_options__extra">
<React.Fragment>
<span
className="option-operate_item__icon icon iconfont"
onClick={() => this.handleDelOption(optionIndex)}
>
&#xe81a;
</span>
{optionIndex > 0 && (
<span
className="option-operate_item__icon icon iconfont"
onClick={() =>
this.handleMoveOption(optionIndex, -1)
}
>
&#xe74a;
</span>
)}
{optionIndex < chooseOptions.length - 1 && (
<span
className="option-operate_item__icon icon iconfont"
style={{
transform: "rotate(180deg)",
display: "inline-block",
}}
onClick={() =>
this.handleMoveOption(optionIndex, 1)
}
>
&#xe74a;
</span>
)}
</React.Fragment>
</div>
)}
</div>
);
})}
{!isJudge && (
<div
className="question-item_options__add"
onClick={() => {
this.handleAddOption();
}}
>
+ 增加选项
</div>
)}
</div>
</Form.Item>
)}
<Form.Item name="analysis" label="答案解析">
<div className="question-item_analysis__content">
{this.renderContent(
questionAnswerDesc,
"1000字以内，可粘贴小图",
["VOICE", "RECORD", "PICTURE", "VIDEO"],
"QUESTION_ANSWER_DESC"
)}
</div>
</Form.Item>
</Form>
<input
type="file"
accept={accept}
ref={this.uploadInput}
style={{ display: "none" }}
onChange={(event) => {
this.uploadFile(event);
}}
/>
<div style={{ zIndex: 9999, position: "relative" }}>
<XMRecord
maxTime={600}
visible={showRecord}
onFinish={this.handleFinishRecord}
onCancel={this.handleCancelRecord}
/>
</div>
{showScanFile && (
<ScanFileModal
modalTitle={scanFileType === "MP4" ? "视频播放" : "查看大图"}
fileType={scanFileType}
item={{
ossAddress: scanFileAddress,
}}
close={() => {
this.setState({ showScanFile: false });
}}
/>
)}
<SelectPrepareFileModal
operateType="select"
accept={acceptType}
selectTypeList={selectTypeList}
isOpen={showSelectFileModal}
diskList={diskList}
onClose={() => {
this.setState({ showSelectFileModal: false });
}}
onSelect={this.handleSelectMedia}
/>
</div>
);
}
}
export default NewQuestionTab;
src/modules/teach-tool/components/NewQuestionTab.less 0 → 100644
.question-input-item_wrapper {
border-radius: 2px;
border: 1px solid #eeeeee;
padding: 16px;
position: relative;
margin-bottom: 50px;
.editor-fill-box_single {
border-radius: 4px;
padding: 4px 10px;
border: 1px solid #e8e8e8;
// display: flex;
// justify-content: space-between;
.fill-line {
padding: 0 10px;
border-bottom: 1px solid;
}
}
.editor-fill-box_single:focus {
border: 1px solid #e8e8e8;
outline: none;
}
.fill-info {
height: 20px;
font-size: 14px;
line-height: 20px;
color: #999999;
margin-top: 8px;
.fill-info_icon {
color: #5289fa;
font-size: 14px;
padding-left: 9px;
cursor: pointer;
}
}
&__active {
border-color: #ff8534;
}
.ant-form-item-explain,
.ant-form-item-extra {
font-size: 12px;
width: 70px;
min-height: 0;
}
.question-option_control {
margin: 40px 0 !important;
}
.question-option_control > .ant-form-item-control {
margin-top: 27px;
}
.question-answer_control {
margin: 40px 0 !important;
.answer-tip {
font-size: 14px;
color: #cccccc;
}
}
.question-item_question-content {
position: relative;
margin: 12px 12px 12px 0;
.picture-box {
width: 88px;
height: 88px;
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.audio-box {
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
}
.img-box {
max-width: 88px;
max-height: 88px;
border-radius: 4px;
}
.video-box {
width: 200px;
height: calc(200px * 9 / 16);
position: relative;
border-radius: 4px;
overflow: hidden;
background-color: #000;
&_content {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&_btn {
width: 32px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
}
}
.icon_arrow {
position: absolute;
top: -12px;
right: -7px;
color: #bfbfbf;
cursor: pointer;
font-size: 16px;
}
.icon_sider {
color: #bfbfbf;
cursor: pointer;
font-size: 16px;
padding: 12px;
}
}
.question-item_control {
position: absolute;
top: 8px;
right: 0;
.icon {
font-size: 18px;
color: rgba(0, 0, 0, 0.4);
cursor: pointer;
&:hover {
color: #ff8534;
}
}
}
.question-item_label {
font-size: 14px;
color: #333333;
line-height: 33px;
flex-shrink: 0;
align-self: stretch;
}
.question-item_number {
display: inline-block;
background: rgba(216, 216, 216, 0.3);
border-radius: 2px;
font-size: 14px;
color: #333333;
line-height: 20px;
padding: 4px 8px;
}
.question-item_score {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 20px;
}
.question-item_main {
display: flex;
align-items: center;
}
.question-item_main__content {
flex: 1;
margin-right: 187px;
}
// .question-item_options {
// display: flex;
// align-items: center;
// padding-bottom: 15px;
// }
.question-item_options__list {
flex: 1;
position: relative;
&::before {
content: attr(data-label);
position: absolute;
left: 11px;
transform: translateY(-100%);
font-size: 12px;
color: #666666;
line-height: 17px;
}
}
.question-item_true-false {
&::before {
transform: translateY(0);
top: 10px;
}
}
.question-item_options__content {
display: flex;
align-items: center;
}
.question-item_options__trur-false {
display: flex;
align-items: center;
height: 33px;
}
.question-item_options__sort {
line-height: 33px;
flex-shrink: 0;
align-self: stretch;
}
.question-item_options__input {
flex: 1;
}
.question-item_options__extra {
flex-shrink: 0;
padding: 0 20px 0 3px;
width: 108px;
line-height: 33px;
align-self: stretch;
.option-operate_item__icon:hover {
color: #ffb714;
}
.icon {
color: #bfbfbf;
margin-left: 10px;
cursor: pointer;
font-size: 16px;
}
}
.question-item_options__setting {
flex-shrink: 0;
width: 80px;
height: 33px;
text-align: center;
// display: flex;
// justify-content: center;
// align-items: center;
align-self: stretch;
}
.question-item_options__add {
height: 44px;
border-radius: 4px;
border: 1px dashed #e8e8e8;
font-size: 14px;
color: #5289fa;
line-height: 44px;
text-align: center;
cursor: pointer;
margin-right: 187px;
margin-left: 22px;
}
.question-item_other {
border-top: 1px solid #eeeeee;
padding-top: 15px;
}
.question-item_setting-score {
display: flex;
align-items: center;
}
.question-item_analysis {
display: flex;
align-items: center;
}
.question-item_analysis__content {
flex: 1;
margin-right: 187px;
.question-desc-box {
margin-top: 12px;
.desc-picture-box {
margin-bottom: 28px;
.picture-box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
overflow: hidden;
align-items: center;
justify-content: center;
padding: 12px 12px 0 0;
img {
max-width: 88px;
max-height: 88px;
border-radius: 4px;
}
.icon_arrow {
position: absolute;
top: 0px;
right: 5px;
color: #bfbfbf;
cursor: pointer;
font-size: 16px;
}
}
}
.desc-audio-box {
margin-bottom: 28px;
.audio-box {
position: relative;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
width: 320px;
margin-bottom: 12px;
.icon_sider {
color: #bfbfbf;
cursor: pointer;
font-size: 16px;
padding: 12px;
position: absolute;
top: 0px;
left: 320px;
}
}
}
.desc-video-box {
.video-box {
position: relative;
display: inline-block;
width: 208px;
// height: calc(208px * 9 / 16);
position: relative;
overflow: hidden;
// background-color: #000;
padding-top: 12px;
margin: 0px 12px 12px 0;
&_content {
max-width: 200px;
max-height: 200px;
border-radius: 4px;
}
&_btn {
width: 32px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -16px;
}
.icon_arrow {
position: absolute;
top: 0px;
right: 0px;
color: #bfbfbf;
cursor: pointer;
font-size: 16px;
}
}
}
}
}
.gap-answer-box {
display: inline-flex;
width: 100%;
padding: 6px 0;
.gap-answer-label {
margin-right: 16px;
padding-top: 6px;
width: 50px;
}
.gap-answer-content {
display: flex;
background: #ffffff;
border-radius: 4px;
border: 1px solid #e8e8e8;
padding: 6px 12px;
width: calc(100% - 50px);
::-webkit-input-placeholder { /* WebKit browsers */
color: #FF4F4F;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #FF4F4F;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #FF4F4F;
}
.ant-input-affix-wrapper {
border: none;
background: #f7f8f9;
:hover {
border-color: none;
}
width: 78px;
margin-right: 14px;
.ant-input:not(:last-child) {
padding-right: 0px !important;
}
.ant-input:focus {
border: none !important;
}
}
}
}
}
.question_skeleton {
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
background-size: 400% 100%;
animation: question-editor_skeleton__loading 1.4s ease infinite;
}
.question_skeleton__editor {
min-height: 33px;
max-height: 140px;
overflow: hidden;
}
.question_skeleton__img {
width: 88px;
height: 88px;
}
.question_skeleton__voice {
height: 48px;
width: 280px;
}
.question_skeleton__video {
width: 100%;
height: 100%;
}
@keyframes question-editor_skeleton__loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
src/modules/teach-tool/components/QuestionBankSider.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-22 10:59:43
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:33:50
* @Description: 助学工具-题库-题库主页面侧边栏
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Input, Button, Tree } from "antd";
import "./QuestionBankSider.less";
import User from "@/common/js/user";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
const { Search } = Input;
const { DirectoryTree } = Tree;
class QuestionBankSider extends Component {
constructor(props) {
super(props);
this.state = {
selectedKeys: getParameterByName("categoryId") ? [getParameterByName("categoryId")] : ["0"],
searchValue: null,
NewEditQuestionBankCategory: null, //新增或编辑分类模态框
ImportCourseCategory: null, // 引用课程分类模态框
treeData: this.props.treeData || [],
};
}
componentDidMount() {
this.queryCategoryTree();
this.props.getSelectedCategoryId(getParameterByName("categoryId") ? [getParameterByName("categoryId")] : ["0"],)
}
shouldComponentUpdate(nextProps, nextState) {
const { updatedCategoryId } = nextProps;
if (this.props.updatedCategoryId !== updatedCategoryId) {
this.setState({ selectedKeys: [updatedCategoryId] }, () => this.queryCategoryTree());
}
return true;
}
/** 获取树状第一级key 设置默认展开第一项 */
getFirstLevelKeys = (data) => {
let firstLevelKeys = [];
data.forEach((item) => {
if (item.categoryLevel === 0) {
firstLevelKeys.push(item.key);
}
});
return firstLevelKeys;
};
/** 树状展开事件 */
onExpand = (expandedKeys) => {
this.setState({ expandedKeys });
};
/** 树状选中事件 */
onSelect = (selectedKeys) => {
this.setState({ selectedKeys });
this.props.getSelectedCategoryId(selectedKeys)
};
// 查询分类树
queryCategoryTree = (categoryName) => {
let query = {
source: 0,
categoryName,
userId: User.getStoreUserId(),
tenantId: User.getStoreId(),
};
QuestionBankService.queryQuestionCategoryTree(query).then((res) => {
const { categoryList = [], noCategoryCnt = 0 } = res.result;
const defaultNode = { id: "0", categoryName:"未分类", categoryCount: noCategoryCnt}
categoryList.unshift(defaultNode);
this.setState({ treeData: this.renderTreeNodes(categoryList, categoryName) });
this.setState({
expandedKeys: this.getFirstLevelKeys(categoryList),
});
});
};
renderTreeNodes = (data, value) => {
return data.map((item) => {
item.title = item.categoryName;
item.key = item.id;
item.title =
!value || (value && item.categoryName.indexOf(value) > -1) ? (
<span>
{item.categoryName}（{item.categoryCount}）
</span>
) : (
<span style={{ opacity: 0.5 }}>
{item.categoryName}（{item.categoryCount}）
</span>
);
item.icon =
item.categoryName === "未分类" ? (
<span className="icon iconfont" style={{ color: "#FBD140" }}>
&#xe7f6;
</span>
) : (
<span className="icon iconfont" style={{ color: "#FBD140" }}>
&#xe7f1;
</span>
);
if (item.sonCategoryList) {
item.children = this.renderTreeNodes(item.sonCategoryList, value);
}
return item;
});
};
render() {
const { treeData, expandedKeys, selectedKeys } = this.state;
return (
<div className="question-bank-sider">
<div className="sider-title">题目分类</div>
<Search
className="sider-search"
placeholder="搜索名称分类"
onSearch={(value) => {
// TODO 调用查询分类接口
this.queryCategoryTree(value);
}}
/>
<div className="sider-btn">
<Button
onClick={() => {
window.RCHistory.push({
pathname: "/question-category-manage",
});
}}
>
分类管理
</Button>
</div>
<div className="sider-tree">
<DirectoryTree
expandedKeys={expandedKeys}
onExpand={this.onExpand}
selectedKeys={selectedKeys}
onSelect={this.onSelect}
showIcon
treeData={treeData}
/>
</div>
{this.state.NewEditQuestionBankCategory}
{this.state.ImportCourseCategory}
</div>
);
}
}
export default QuestionBankSider;
src/modules/teach-tool/components/QuestionBankSider.less 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-22 12:02:34
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:34:06
* @Description: 助学工具-题库-题库主页面侧边栏样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
.question-bank-sider {
position: relative;
.sider-title {
height: 22px;
font-size: 16px;
font-weight: 500;
color: #000000;
line-height: 22px;
margin-bottom: 16px;
}
.sider-search {
margin-bottom: 16px;
}
.sider-btn {
margin-bottom: 16px;
}
.sider-tree {
width: 266px;
overflow: scroll;
height: calc(100vh - 300px);
.empty-tree-tip {
text-align: center;
margin-top: 100%;
.empty-tree-btn {
color: #ffb714;
cursor: pointer;
}
}
.ant-tree.ant-tree-directory {
font-size: 14px;
font-weight: 400;
color: #666666;
width: 260px;
.anticon {
color: #666666;
}
.ant-tree-treenode {
height: 44px;
padding: 0;
span {
line-height: 44px;
white-space: nowrap;
}
.ant-tree-node-content-wrapper.ant-tree-node-selected {
color: #666666;
}
}
}
}
}
src/modules/teach-tool/components/QuestionEditor.jsx 0 → 100644
import React, { Component } from "react";
import E from "wangeditor";
import { message, Button } from "antd";
import UploadOss from "@/core/upload";
import "./QuestionEditor.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 QuestionEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorId: window.random_string(16),
visiblePlacehold: true,
visibleMediaBox: false,
zIndex: 9,
focusFlag: false,
isShowSingleInput: true,
contentLength: 0,
errorInput: false,
isGapFilling: props.isGapFilling,
contentType: props.contentType,
detailInfo: props.detailInfo || {},
gapFillingAnswer: props.gapFillingAnswer || [],
blanksList: props.blanksList || [],
};
}
componentDidMount() {
this.renderEditor();
}
static getDerivedStateFromProps(nextProps, prevState) {
return {
detailInfo: nextProps.detailInfo
}
}
shouldComponentUpdate(nextProps, nextState) {
const { detailInfo } = nextProps;
if (this.state.detailInfo !== detailInfo) {
this.setState({ detailInfo: nextProps.detailInfo }, () => {
this.renderEditor();
});
}
return true;
}
handleUploadMedia = (key) => {
this.props.onUploadMedia && this.props.onUploadMedia(key);
};
getBoxDom = () => {
const { markKey } = this.props;
const domList = document.getElementsByClassName(
`question-edtior_box__${markKey}`
);
let zIndex = 99;
_.find(domList, (domItem, domIndex) => {
if (domItem.getAttribute("editorid") === this.state.editorId) {
zIndex = zIndex + domList.length - domIndex;
return domItem;
}
});
return zIndex;
};
handleChangeContent = (content) => {
content &&
this.editorRoot.txt.html(
/^\<p/.test(content) ? content : `<p>${content}</p>`
);
this.editorRoot.change && this.editorRoot.change();
};
renderEditor() {
const { editorId, detailInfo } = this.state;
const { onChange, bindChangeContent } = this.props;
const editorRoot = new E(
`#editor${editorId}_tabbar`,
`#editor${editorId}_content`
);
editorRoot.customConfig.menus = [];
editorRoot.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;
editorRoot.customConfig.customAlert = function (info) {
message.warning(/1M/.test(info) ? "图片大于1M，请使用图片上传" : info);
};
editorRoot.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法
UploadOss.uploadBlobToOSS(files[0], window.random_string(16)).then(
(urlStr) => {
insert(urlStr);
}
);
};
editorRoot.customConfig.zIndex = 999;
editorRoot.customConfig.pasteFilterStyle = false;
// 自定义处理粘贴的文本内容
editorRoot.customConfig.pasteTextHandle = function (content) {
if (content == "" && !content) return "";
var str = content;
str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, "");
str = str.replace(/<style>[\s\S]*?<\/style>/gi, "");
str = str.replace(/<\/?[^>]*>/g, "");
str = str.replace(/[ | ]*\n/g, "\n");
str = str.replace(/\&nbsp\;/gi, " ");
str = str.replace(/[\r\n]/g, "");
if (str.length > 1000) {
str = str.substring(0, 1000);
message.error("内容过长，不能超过1000字");
}
return str;
};
editorRoot.customConfig.onchange = (html) => {
const { focusFlag } = this.state;
const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ")
.length;
const imgLength = html.match(/<img/g)
? html.match(/<img/g).length * 2
: 0;
const contentLength = imgLength + textLength;
const divHeight = document.getElementById(`editor${editorId}_content`)
.firstChild.offsetHeight;
if (divHeight > 30 || imgLength > 0) {
this.setState({ isShowSingleInput: false });
} else {
this.setState({ isShowSingleInput: true });
}
if (this.state.isGapFilling) {
this.props.changeBlankCount(this.state.blanksList);
}
this.setState(
{ contentLength, visiblePlacehold: contentLength === 0 && !focusFlag },
() => {
onChange && onChange(html, this.state.contentLength);
}
);
};
editorRoot.customConfig.onblur = (html) => {
editorRoot.change && editorRoot.change();
this.setState({
focusFlag: false,
visibleMediaBox: false,
visiblePlacehold: _.isEmpty(html.replace(/\<\/?[\w]+\>/g, "")),
zIndex: 9,
});
};
editorRoot.customConfig.onfocus = () => {
this.setState({
focusFlag: true,
visibleMediaBox: true,
visiblePlacehold: false,
});
};
editorRoot.create();
this.editorRoot = editorRoot;
// if (detailInfo && detailInfo.content) {
const contentHtml = /^\<p/.test(detailInfo.content)
? detailInfo.content
: `<p>${detailInfo.content}</p>`;
editorRoot.txt.html(detailInfo.content);
const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ")
.length;
const imgLength = contentHtml.match(/<img/g)
? contentHtml.match(/<img/g).length * 2
: 0;
const contentLength = imgLength + textLength;
this.setState(
{
contentLength,
visiblePlacehold: contentLength === 0 && !this.state.focusFlag,
},
() => {
onChange && onChange(contentHtml, this.state.contentLength);
}
);
// }
bindChangeContent && bindChangeContent(this.handleChangeContent);
}
insertBlank = (blanks) => {
var blanks = `<input class="add-fill-line" disabled answerTagList="" id=${window.random_string(
16
)} value="填空"/>`;
this.editorRoot.cmd.do("insertHTML", blanks);
document.getSelection().collapseToEnd();
var _blanksList = [];
_blanksList = document.getElementsByClassName("add-fill-line");
this.setState({ blanksList: _blanksList });
this.setState({
visiblePlacehold: false,
});
// this.props.changeBlankCount(_blanksList);
};
render() {
const {
editorId,
visiblePlacehold,
visibleMediaBox,
zIndex,
focusFlag,
contentLength,
isShowSingleInput,
errorInput,
isGapFilling,
contentType,
} = this.state;
const {
placehold,
mediaBtn = ["VOICE", "RECORD", "PICTURE", "VIDEO"],
limitLength = 1000,
markKey,
} = this.props;
return (
<div
className={`question-edtior_box question-edtior_box__${markKey}`}
editorid={editorId}
style={{ zIndex }}
onMouseEnter={() => {
if (visibleMediaBox || focusFlag) return;
const setZIndex = this.getBoxDom();
this.setState({
visibleMediaBox: true,
zIndex: setZIndex,
});
}}
onMouseLeave={() => {
if (!visibleMediaBox || focusFlag) return;
this.setState({
visibleMediaBox: false,
zIndex: 9,
});
}}
>
<div
className="editor-box"
id={`editor${editorId}_tabbar`}
style={{ display: "none" }}
></div>
<div
className={
isShowSingleInput ? "editor-box-single " : "editor-box-multiple"
}
style={{
border:
this.props.validateStatus === "error" ? "1px solid red" : "",
}}
>
<div
className="editor-box editor-box_content"
id={`editor${editorId}_content`}
></div>
<div className="editor-limit">
<span style={{ color: errorInput ? "red" : "" }}>
{contentLength}
</span>
/{limitLength}
</div>
</div>
{isGapFilling && contentType === "QUESTION_STEM" && (
<div className="editor-fill-info">
在需要填写答案的地方
<Button
type="link"
className="editor-fill-info_icon icon iconfont"
onClick={this.insertBlank}
>
&#xe7fd; 插入占位符
</Button>
</div>
)}
<div
className={`editor-limit-tip${contentLength > limitLength ? " mt6" : ""
}`}
style={{ height: contentLength > limitLength ? 20 : 0 }}
>
最多只能输入1000字
</div>
{visiblePlacehold && (
<div className="editor-placehold">{placehold}</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 QuestionEditor;
src/modules/teach-tool/components/QuestionEditor.less 0 → 100644
.question-edtior_box {
position: relative;
z-index: 9;
background-color: #ffffff;
.add-fill-line {
padding: 0 10px;
border-bottom: 1px solid !important;
margin: 0 4px;
text-align: center;
border: none;
width: 54px;
}
.editor-fill-info {
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-box-single {
border-radius: 4px;
padding: 4px 0;
border: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
.editor-box_content {
width: calc(100% - 80px);
p {
display: inline-block;
}
}
.editor-limit {
padding-right: 12px;
line-height: 17px;
font-size: 12px;
color: #cccccc;
}
}
.editor-box-multiple {
border-radius: 4px;
padding: 4px 0;
border: 1px solid #e8e8e8;
.editor-box_content {
max-height: 110px;
overflow: auto;
p {
display: inline-block;
overflow-y: scroll;
}
}
.editor-limit {
text-align: right;
padding-right: 12px;
line-height: 17px;
font-size: 12px;
color: #cccccc;
padding-top: 3px;
}
}
.editor-limit-tip {
text-align: right;
color: #ec4b35;
transition: height 0.5s ease-in-out;
overflow: hidden;
}
.editor-box_content {
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
img {
zoom: calc(100% / 3);
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
img {
zoom: calc(100% / 2);
}
}
}
.w-e-text p {
margin: 0;
line-height: inherit;
}
.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/QuestionManageContent.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 10:24:47
* @Description: 助学工具-题库-题目管理主页面列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import {
Table,
Switch,
ConfigProvider,
Empty,
Row,
Input,
Select,
Tooltip,
Space,
Button,
Modal,
message,
} from "antd";
import { PageControl } from "@/components";
import "./QuestionManageContent.less";
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 = {
SINGLE_CHOICE: "单选题",
MULTI_CHOICE: "多选题",
JUDGE: "判断题",
GAP_FILLING: "填空题",
INDEFINITE_CHOICE: "不定项选择题",
};
const questionTypeList = [
{
label: "单选题",
value: "SINGLE_CHOICE",
},
{
label: "多选题",
value: "MULTI_CHOICE",
},
{
label: "判断题",
value: "JUDGE",
},
{
label: "填空题",
value: "GAP_FILLING",
},
{
label: "不定项选择题",
value: "INDEFINITE_CHOICE",
},
];
class QuestionManageContent extends Component {
constructor(props) {
super(props);
this.state = {
query: {
current: 1,
size: 10,
order: "ACCURACY_DESC", // 排序规则[ ACCURACY_DESC, ACCURACY_ASC, CREATED_DESC, CREATED_ASC, UPDATED_DESC, UPDATED_ASC ]
categoryId: null, // 当前题库分类Id
questionName: null, // 题目名称
questionType: null, // 题目类型
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
},
questionTypeList: [], // 题型列表
dataSource: [],
totalCount: 0,
QuestionPreviewModal: null, // 题目预览模态框
};
}
componentDidMount() { }
shouldComponentUpdate(nextProps, nextState) {
const { selectedCategoryId } = nextProps;
const _query = this.state.query;
if (this.props.selectedCategoryId !== selectedCategoryId) {
_query.categoryId = selectedCategoryId;
_query.questionName = null;
_query.questionType = null;
_query.current = 1;
this.setState({ query: _query }, () => this.queryQuestionPageList());
}
return true;
}
queryQuestionPageList = () => {
const _query = this.state.query;
if (_query.categoryId === "0") _query.categoryId = null;
QuestionBankService.queryQuestionPageList(_query).then((res) => {
const { records = [], total = 0 } = res.result;
this.setState({ dataSource: records });
this.setState({ total });
});
};
handleCreateQuestionBank = () => {
window.RCHistory.push({
pathname: `/create-new-question?categoryId=${this.state.query.categoryId}`,
});
};
delCategoryConfirm(record) {
return Modal.confirm({
title: "提示",
content: "确定要删除此题目吗？",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
cancelText: "取消",
onOk: () => {
this.deleteQuestion(record);
},
});
}
deleteQuestion = (record) => {
let params = {
id: record.id,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
QuestionBankService.deleteQuestion(params).then((res) => {
if (res.success) {
message.success("删除成功");
this.queryQuestionPageList();
this.props.updatedSiderTree(this.props.selectedCategoryId);
}
});
};
// 排序
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
let sort = null;
if (columnKey === "accuracy" && order === "ascend") {
sort = "ACCURACY_ASC";
}
if (columnKey === "accuracy" && order === "descend") {
sort = "ACCURACY_DESC";
}
if (columnKey === "updateTime" && order === "ascend") {
sort = "UPDATED_ASC";
}
if (columnKey === "updateTime" && order === "descend") {
sort = "UPDATED_DESC";
}
const _query = this.state.query;
_query.order = sort;
_query.current = 1;
this.setState({ query: _query }, () => this.queryQuestionPageList());
};
// 清空搜索条件
handleReset = () => {
const _query = {
...this.state.query,
current: 1,
order: "ACCURACY_DESC", // 排序规则
questionName: null, // 题目名称
questionType: null, // 题目类型
};
this.setState({ query: _query }, () => {
this.queryQuestionPageList();
});
};
previewQuestion = (id) => {
const m = (
<QuestionPreviewModal
id={id}
close={() => {
this.setState({
QuestionPreviewModal: null,
});
}}
/>
);
this.setState({ QuestionPreviewModal: m });
};
toEditQuetion = (id, type) => {
const { categoryId } = this.state.query;
if (categoryId) {
window.RCHistory.push({
pathname: `/create-new-question?id=${id}&type=${type}&categoryId=${categoryId}`,
});
} else {
window.RCHistory.push({
pathname: `/create-new-question?id=${id}&type=${type}`,
});
}
};
// 表头设置
parseColumns = () => {
const isPermiss = ["CloudManager", "StoreManager"].includes(User.getUserRole());
const columns = [
{
title: "题目",
key: "questionStem",
dataIndex: "questionStem",
render: (val, record) => {
var handleVal = val;
handleVal = handleVal.replace(/<(?!img|input).*?>/g, "");
handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、");
handleVal = handleVal.replace(/<\s?img[^>]*>/gi, "【图片】");
handleVal = handleVal.replace(/\&nbsp\;/gi, " ");
return (
<Tooltip title={handleVal}>
<div className="record-name">{handleVal}</div>
</Tooltip>
);
},
},
{
title: "题型",
key: "questionTypeEnum",
dataIndex: "questionTypeEnum",
render: (val) => {
return questionTypeEnum[val];
},
},
{
title: "正确率",
key: "accuracy",
dataIndex: "accuracy",
sorter: true,
sortDirections: ["ascend", "descend", "ascend"],
showSorterTooltip: false,
render: (val) => {
return val + "%";
},
},
{
title: "更新时间",
key: "updateTime",
dataIndex: "updateTime",
sorter: true,
sortDirections: ["ascend", "descend", "ascend"],
showSorterTooltip: false,
render: (val) => {
return formatDate("YYYY-MM-DD H:i:s", val);
},
},
{
title: "操作",
key: "operate",
dataIndex: "operate",
fixed: "right",
render: (val, record) => {
return (
<div className="record-operate">
<div
className="record-operate__item"
onClick={() => this.previewQuestion(record.id)}
>
预览
</div>
{isPermiss && <span className="record-operate__item split"> | </span>}
{isPermiss && <div
className="record-operate__item"
onClick={() =>
this.toEditQuetion(record.id, record.questionTypeEnum)
}
>
编辑
</div>}
{isPermiss && <span className="record-operate__item split"> | </span>}
{isPermiss && <div
className="record-operate__item"
onClick={() => this.delCategoryConfirm(record)}
>
删除
</div>}
</div>
);
},
},
];
return columns;
};
// 自定义表格空状态
customizeRenderEmpty = () => {
return (
<Empty
image="https://image.xiaomaiketang.com/xm/emptyTable.png"
imageStyle={{
height: 100,
}}
description={
<div>
还没有题目，快去
<span
className="empty-list-tip"
onClick={() => {
this.handleCreateQuestionBank()
}}
>
新建一个
</span>
吧！
</div>
}
></Empty>
);
};
onShowSizeChange = (current, size) => {
if (current == size) {
return;
}
let _query = this.state.query;
_query.size = size;
this.setState({ query: _query }, () => this.queryQuestionPageList());
};
// 改变搜索条件
handleChangeQuery = (searchType, value) => {
this.setState(
{
query: {
...this.state.query,
[searchType]: value || null,
current: 1,
},
},
() => {
if (searchType === "questionName") return;
this.queryQuestionPageList();
}
);
};
batchImportQuestion = () => {
const { categoryId } = this.state.query;
const ImportQuestionModal = (
<BatchImportQuestionModal
close={() => {
this.setState({ ImportQuestionModal: null }, () => { this.queryQuestionPageList(); this.props.updatedSiderTree(this.props.selectedCategoryId) });
}}
categoryId={categoryId}
/>
);
this.setState({ ImportQuestionModal });
};
render() {
const { dataSource = [], total, query } = this.state;
const { current, size, categoryId, questionName, questionType } = query;
return (
<div className="question-manage-content">
<div className="question-manage-filter">
<Row type="flex" justify="space-between" align="top">
<div className="search-condition">
<div className="search-condition__item">
<span className="search-label">题目：</span>
<Search
placeholder="搜索题目名称"
value={questionName}
style={{ width: "calc(100% - 84px)" }}
onChange={(e) => {
this.handleChangeQuery("questionName", e.target.value);
}}
onSearch={() => {
this.queryQuestionPageList();
}}
/>
</div>
<div className="search-condition__item">
<span className="search-label">题型：</span>
<Select
placeholder="请选择题目类型"
value={questionType}
style={{ width: "calc(100% - 70px)" }}
showSearch
allowClear
filterOption={(inputVal, option) =>
option.props.children.includes(inputVal)
}
onChange={(value) => {
if (_.isEmpty(value)) {
this.handleChangeQuery("questionType", value);
}
}}
onSelect={(value) => {
this.handleChangeQuery("questionType", value);
}}
>
{_.map(questionTypeList, (item, index) => {
return (
<Select.Option value={item.value} key={item.key}>
{item.label}
</Select.Option>
);
})}
</Select>
</div>
</div>
<div className="reset-fold-area">
<Tooltip title="清空筛选">
<span
className="resetBtn iconfont icon"
onClick={this.handleReset}
>
&#xe61b;{" "}
</span>
</Tooltip>
</div>
</Row>
</div>
{(["CloudManager", "StoreManager"].includes(User.getUserRole()) && !["0", null].includes(categoryId)) && (
<Space size="large">
<Button type="primary" onClick={this.handleCreateQuestionBank}>
新建题目
</Button>
<Button onClick={this.batchImportQuestion}>批量导入</Button>
</Space>
)}
<div className="question-manage-list">
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
<Table
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
bordered
onChange={this.handleChangeTable}
/>
</ConfigProvider>
{total > 0 && (
<div className="box-footer">
<PageControl
current={current - 1}
pageSize={size}
total={total}
toPage={(page) => {
const _query = { ...query, current: page + 1 };
this.setState({ query: _query }, () =>
this.queryQuestionPageList()
);
}}
showSizeChanger={true}
onShowSizeChange={this.onShowSizeChange}
/>
</div>
)}
{this.state.QuestionPreviewModal}
{this.state.ImportQuestionModal}
</div>
</div>
);
}
}
export default QuestionManageContent;
src/modules/teach-tool/components/QuestionManageContent.less 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-25 11:26:28
* @LastEditors: yuananting
* @LastEditTime: 2021-03-16 11:14:55
* @Description: 助学工具-题库-题目管理右侧内容样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
.question-manage-content {
.question-manage-filter {
position: relative;
.search-condition {
width: calc(100% - 80px);
display: flex;
align-items: center;
flex-wrap: wrap;
&__item {
width: 30%;
margin-right: 3%;
margin-bottom: 12px;
.search-label {
vertical-align: middle;
display: inline-block;
height: 32px;
line-height: 32px;
}
}
}
.reset-fold-area {
position: absolute;
right: 12px;
.resetBtn {
color: #999999;
font-size: 18px;
margin-right: 8px;
}
.fold-btn {
font-size: 14px;
color: #666666;
line-height: 20px;
.fold-icon {
font-size: 12px;
margin-left: 4px;
}
}
}
}
.data-icon {
cursor: pointer;
}
.question-manage-list {
position: relative;
margin-top: 16px;
.empty-list-tip {
color: #ffb714;
cursor: pointer;
}
.record-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 232px;
}
.record-operate {
display: flex;
&__item {
color: #5289fa;
cursor: pointer;
&.split {
margin: 0 8px;
color: #bfbfbf;
}
}
}
}
}
.fill-line {
padding: 0 10px;
border-bottom: 1px solid;
}
src/modules/teach-tool/components/UploadingProgress.jsx 0 → 100644
/*
* @Author: 陈剑宇
* @Date: 2020-05-14 10:29:52
* @LastEditTime: 2021-03-02 10:11:25
* @LastEditors: yuananting
* @Description: 上传文件进度
* @FilePath: /xiaomai-web-b/app/modules/newAcademic_V5/punchClock/components/UploadingProgress.jsx
* @Copyright © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Tooltip } from 'antd';
import {
FileVerifyMap,
} from "@/common/constants/academic/lessonEnum";
import './UploadingProgress.less';
const FILE_ICON = {
WORD: 'https://image.xiaomaiketang.com/xm/5CCFBWrRMB.png',
PPT: 'https://image.xiaomaiketang.com/xm/3ypFCHEj3c.png',
EXCEL: 'https://image.xiaomaiketang.com/xm/AijpZjphPn.png',
PDF: 'https://image.xiaomaiketang.com/xm/3kZapsD3Pc.png',
VIDEO: 'https://image.xiaomaiketang.com/xm/rYCcpGaMW3.png',
VOICE: 'https://image.xiaomaiketang.com/xm/XT8eGhNhpb.png',
PICTURE: 'https://image.xiaomaiketang.com/xm/TXt5RHbFfF.png',
FAIL: 'https://image.xiaomaiketang.com/xm/EzmdwZz6mH.png'
}
const UPLOAD_FAIL = {
url: 'https://image.xiaomaiketang.com/xm/k8bynH452k.png',
title: '上传失败',
}
const UPLOAD_INIT = {
url: 'https://image.xiaomaiketang.com/xm/JbRFwhAaQ8.png',
title: '正在上传'
}
class UploadingProgress extends Component {
// 获取文件类型
getFileType(item) {
let fileEnum = 'FAIL';
if (FILE_ICON[item.contentType]) {
fileEnum = item.contentType;
} else if (FileVerifyMap[item.fileType] && FileVerifyMap[item.fileType].type) {
fileEnum = FileVerifyMap[item.fileType].type.toUpperCase()
}
return fileEnum;
}
render() {
const { fileDesc, fileDesc: { contentName, progress = 0, status = 'init' }, canCancelUpload, onAbort, onReupload } = this.props;
const isFail = status === 'fail';
const statusTips = isFail ? UPLOAD_FAIL : UPLOAD_INIT;
let imgUrl = (isFail && !canCancelUpload) ? FILE_ICON.FAIL : FILE_ICON[this.getFileType(fileDesc)];
return (
<div className="uploading-progress-box">
<div className="icon-box mr8">
<img src={imgUrl} alt="" />
</div>
<div className="file-box">
<div className="file-info">
<div className="file-title">{contentName}</div>
<div className="file-status">
<img src={statusTips.url} alt="" />
<span>{statusTips.title}</span>
</div>
</div>
{(!isFail || canCancelUpload) && <div className="file-progress-box">
<div className="file-progress" style={{ width: `${progress}%` }}></div>
</div>}
</div>
{canCancelUpload && ['init', 'fail'].includes(status) &&
<div className="file-extra-box">
<Tooltip title="取消上传"><span className="icon iconfont" onClick={() => onAbort && onAbort()} style={{transform:"scale(.8)"}}>&#xe6ef;</span></Tooltip>
{status === 'fail' && <Tooltip title='重新上传'><span className="icon iconfont" onClick={() => onReupload && onReupload()}>&#xe75a;</span></Tooltip>}
</div>
}
</div>
)
}
}
export default UploadingProgress;
\ No newline at end of file
src/modules/teach-tool/components/UploadingProgress.less 0 → 100644
.uploading-progress-box {
display: flex;
align-items: center;
.icon-box {
height: 44px;
width: 44px;
text-align: center;
img {
height: 100%;
}
}
.file-box {
width: 243px;
display: flex;
flex-direction: column;
justify-content: space-between;
line-height: unset;
.file- {
&info {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
&title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
color: #666666;
line-height: 17px;
}
&status {
flex-shrink: 0;
img {
width: 14px;
height: 14px;
font-size: 0;
margin-right: 4px;
}
span {
font-size: 12px;
color: #999999;
line-height: 17px;
}
}
&progress-box {
position: relative;
height: 4px;
border-radius: 2px;
background-color: #F0F2F5;
margin-top: 10px;
}
&progress {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(90deg, #FBD140 0%, #FFA201 100%);
border-radius: inherit;
}
}
}
.file-extra-box {
margin-left: 40px;
.icon {
color: #BFBFBF;
font-size: 14px;
margin-left: 12px;
cursor: pointer;
}
}
}
\ No newline at end of file
src/modules/teach-tool/components/XMAudio.jsx 0 → 100644
/*
* @Author: sunbingqing
* @Date: 2019-07-26 14:04:00
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-04-18 10:54:32
*/
import React, { useState, useEffect, useRef } from "react";
import "./XMAudio.less";
import VideoUpload from "@/core/upload";
import { string } from "prop-types";
// interface XMAudioProps {
// style?: any;
// index?: any;
// size?: number | string;
// url?: any;
// forbidParse?:boolean;
// getDuration?: (value: number) => void;
// }
let timerInterval;
const XMAudio = (props) => {
const ref = useRef();
const { style, size, getDuration } = props;
const [url, setUrl] = useState(props.url);
const [playing, setPlaying] = useState(false);
const [timer, setTimer] = useState(null);
const [playedTime, setPlayedTime] = useState(0);
const [leftTime, setLeftTime] = useState(Math.round(Number(size)));
const [totalTime, setTotalTime] = useState(Math.round(Number(size)));
const prevTimeRef = useRef();
useEffect(() => {
if(!props.forbidParse){
VideoUpload.getVideoParseRoute(props.url).then((newUrl) => {
setUrl(newUrl);
});
}
setLeftTime(Math.round(Number(size)));
setTotalTime(Math.round(Number(size)));
ref.current.addEventListener("pause", () => {
clearInterval(timer);
setPlaying(false);
setTimer(null);
if (ref.current && ref.current.ended) {
setLeftTime(totalTime);
setPlayedTime(0);
}
});
}, [props.url]);
useEffect(() => {
if (playing) {
timerInterval = setInterval(() => {
setPlayedTime((preTime) => {
prevTimeRef.current = preTime;
return prevTimeRef.current + 20;
});
if ((prevTimeRef.current + 20) % 1000 === 0) {
setLeftTime(totalTime - (prevTimeRef.current + 20));
}
if ((prevTimeRef.current + 30) >= totalTime) {
clearInterval(timerInterval);
setPlayedTime(0);
setLeftTime(totalTime);
setPlaying(false);
}
}, 20);
const audioDomList = document.querySelectorAll("audio");
for (let i = 0; i < Array.from(audioDomList).length; i++) {
if (audioDomList[i] === ref.current) {
ref.current.play();
setTimer(timerInterval)
} else {
audioDomList[i].pause();
}
}
} else {
ref.current.pause();
clearInterval(timer);
}
}, [playing]);
const audioImg = `https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/${
playing ? 1584514990496 : 1584514999661
}.png`;
function _togglePlay() {
playing ? pausePlay() : startPlay();
}
function pausePlay() {
setPlaying(false);
}
function startPlay() {
setPlaying(true);
}
function _changeTimeShow() {
let time = Math.floor(leftTime / 1000);
if (leftTime / 1000 > 60) {
const s = leftTime / 1000;
const second = Math.ceil(s % 60);
const minute = Math.floor(s / 60);
time = `${minute}'${second}`;
}
return time;
}
function _getDuration() {
const videoDiv = ref.current;
const videoSize = Math.round(videoDiv.duration) * 1000;
if (getDuration) {
setTotalTime(videoSize);
setLeftTime(videoSize);
getDuration(videoSize);
}
}
function _startTime() {
let time = Math.floor(playedTime / 1000);
let second = 0
let minute = 0;
let result = 0
if (time > 0) {
minute = Math.floor(time % 3600 / 60);
second = Math.floor((time - 60 * minute) % 60);
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
result = minute + ':' + second
}else{
result = "00:00"
}
return result;
}
function _endTime() {
let time = Math.floor(totalTime / 1000);
let second = 0
let minute = 0;
let result = 0
if (time > 0) {
minute = Math.floor(time % 3600 / 60);
second = Math.floor((time - 60 * minute) % 60);
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
result = minute + ':' + second
}
if(time === 0){
result = "00:00"
}
return result;
}
function putDownFlag(event) {
let dragDiv = event.target;
dragDiv.style.cursor = "pointer";
let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离
let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
// 按住鼠标时为div修改样式
dragDiv.style.width = "16px";
dragDiv.style.height = "16px";
dragDiv.style.top = "-7px";
dragDiv.style.backGround = "linear-gradient(180deg, #FFB467 0%, #FF9143 100%)"
// 鼠标移动的时候不停的修改div的left和top值
document.onmousemove = function (event) {
dragDiv.style.left = event.clientX - innerX + "px";
// 边界判断
if (parseInt(dragDiv.style.left) <= 0) {
dragDiv.style.left = "0px";
}
if (parseInt(dragDiv.style.left) >= 181) {
dragDiv.style.left = "176px";
}
setPlayedTime(parseInt(dragDiv.style.left) / 180 * totalTime)
}
// 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
// 否则鼠标抬起后还可以继续拖拽方块
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
// 清除border
dragDiv.style.top = "-4px";
dragDiv.style.width = "10px";
dragDiv.style.height = "10px";
}
}
function mouseOver(event){
let dragDiv = event.target;
dragDiv.style.cursor = "pointer";
dragDiv.style.width = "16px";
dragDiv.style.height = "16px";
dragDiv.style.top = "-7px";
dragDiv.style.backGround = "linear-gradient(180deg, #FFB467 0%, #FF9143 100%)"
}
function mouseLeave (event){
let dragDiv = event.target;
dragDiv.style.top = "-4px";
dragDiv.style.width = "10px";
dragDiv.style.height = "10px";
}
return (
<div className="xm-audio" style={style}>
<img src={audioImg} onClick={_togglePlay} className="audio-image" />
<div className="process-area">
<div
className="complete-area"
style={{ width: `${(playedTime / totalTime) * 150}px ` }}
/>
<div
className="flag"
style={{ left: `${(playedTime / totalTime) * 150}px ` }}
onMouseDown={(e) => putDownFlag(e)}
onMouseOver={(e)=> mouseOver(e)}
onMouseLeave={(e)=>mouseLeave(e)}
/>
</div>
<span className="sec-time">
{`${_startTime()}`}/{`${_endTime()}`}
</span>
<audio
src={url}
ref={ref}
autoPlay={false}
onCanPlayThrough={_getDuration}
/>
</div>
);
};
export default XMAudio;
src/modules/teach-tool/components/XMAudio.less 0 → 100644
/*
* @Author: Michael
* @Date: 2018-01-31 14:55:14
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-03-24 10:18:43
*/
.xm-audio {
display: flex;
align-items: center;
width: 280px;
border-radius: 5px;
background-color: #ffffff;
.audio-image {
width: 28px !important;
height: 28px;
margin-left: 0px !important;
}
.icon {
margin-left: 10px;
font-size: 25px;
margin-right: 15px;
cursor: pointer;
}
.play-icon {
color: #FC8540;
}
.sec-time{
white-space: nowrap;
color: #FF8534;
margin-left: 12px;
font-size: 13px;
}
.process-area {
height: 4px;
width: 154px;
border-radius: 3px;
margin-left: 12px;
position: relative;
background:rgba(255,133,52,0.2);
.complete-area {
height: 100%;
background-color: #FF8534;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.flag {
position: absolute;
top: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background:linear-gradient(180deg,rgba(255,180,103,1) 0%,rgba(255,145,67,1) 100%);
}
}
}
src/modules/teach-tool/components/XMRecord.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-03-18 10:01:28
* @LastEditors: yuananting
* @LastEditTime: 2021-03-02 10:59:09
* @Description: 录音组件
*/
import React, { Component } from 'react';
import { Button, Modal } from 'antd';
import UploadOss from '@/core/upload';
import { RECORD_ERROR } from '@/common/constants/academic';
import AudioRecorder from './audioRecord';
import './XMRecord.less';
class XMRecord extends Component {
constructor(props) {
super(props);
//从麦克风获取的音频流
this.mAudioContext = null;
this.mAudioFromMicrophone = null;
this.mMediaRecorder = null;
this.mChunks = [];
this.state = {
isFinished: true,
recordTime: 0,
};
}
componentDidMount() {
// 获取录音设备
this.getAudioRecorderDevice();
}
componentWillUnmount() {}
getAudioRecorderDevice = () => {
//仅用来进行录音
const constraints = { audio: true };
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia =
navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
};
}
};
openDeviceFailure = (reason) => {
const { title = '麦克风调用错误', content = '请检查麦克风是否可用' } =
RECORD_ERROR[reason.name] || {};
Modal.info({
title,
content,
okText: '我知道了',
});
};
handleCloseConfirm = () => {
this.$confirm = null;
this.forceUpdate();
};
handleStartRecord = () => {
navigator.mediaDevices
.getUserMedia({
audio: true,
})
.then((stream) => {
this.mMediaRecorder = new AudioRecorder(stream);
this.mMediaRecorder.start();
this.handleCountTime();
}, this.openDeviceFailure);
};
onProcessData = (audioData) => {
this.mChunks.push(audioData.data);
};
handleCountTime = () => {
const { maxTime = 180 } = this.props;
this.setState({ isFinished: false });
// 开始计时
this.timer = window.setInterval(() => {
const { recordTime } = this.state;
if (recordTime > maxTime - 1) {
window.clearInterval(this.timer);
this.handleFinishRecord();
return;
}
this.setState({
recordTime: this.state.recordTime + 1,
});
}, 1000);
};
handleFinishRecord = () => {
const blob = this.mMediaRecorder.upload();
UploadOss.uploadBlobToOSS(blob, window.random_string(16) + '.wav').then((mp3URL) => {
const { recordTime } = this.state;
this.props.onFinish(mp3URL, recordTime * 1000);
this.setState({
recordTime: 0,
isFinished: true,
});
window.clearInterval(this.timer);
});
};
// 格式化当前录音时长
formatRecordTime = (timeStamp) => {
let minutes = Math.floor(timeStamp / 60);
let seconds = timeStamp % 60;
minutes = minutes < 10 ? `0${minutes}` : minutes;
seconds = seconds < 10 ? `0${seconds}` : seconds;
return `${minutes}:${seconds}`;
};
handleCancel = () => {
window.clearInterval(this.timer);
this.setState(
{
recordTime: 0,
isFinished: true,
},
() => {
this.props.onCancel();
},
);
};
render() {
const { isFinished, recordTime } = this.state;
const { visible, maxTime = 180 } = this.props;
return (
<div className={`xm-record ${visible ? 'visible' : 'hidden'}`}>
<div className="record-left">
<div className="text">
{isFinished ? (
<img
style={{ width: 14, height: 14 }}
src="https://image.xiaomaiketang.com/xm/xCahGm2Q2J.png"
/>
) : (
<img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1584607726775.png" />
)}
{isFinished ? <span>录音</span> : <span>录音中...</span>}
</div>
<div className="time">{`${this.formatRecordTime(recordTime)}/${this.formatRecordTime(
maxTime,
)}`}</div>
</div>
<div className="btn-wrapper">
<Button onClick={this.handleCancel}>取消</Button>
{isFinished ? (
<Button type="primary" onClick={this.handleStartRecord}>
开始
</Button>
) : (
<Button type="primary" className="finish" onClick={this.handleFinishRecord}>
完成
</Button>
)}
</div>
</div>
);
}
}
export default XMRecord;
src/modules/teach-tool/components/XMRecord.less 0 → 100644
.xm-record {
position: fixed;
bottom: -100px;
left: 50%;
transform: translate(-50%, 0);
height: 56px;
width: 336px;
border-radius: 4px;
background: #FFF;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
margin-bottom: 32px;
transition: bottom 0.5s;
.record-left{
width: 100px;
height: 56px;
display: flex;
flex-direction: column;
margin-left: 24px;
align-items: flex-start;
justify-content: center;
}
&.visible {
animation: visibleRecord 0.5s;
bottom: 4px;
z-index: 10000;
}
&.hidden {
animation: hiddenRecord 0.5s;
bottom: -100px;
}
@keyframes visibleRecord {
from{
display: none;
}
to{
display: block;
}
}
@keyframes hiddenRecord {
from{
display: block;
}
to{
display: none;
}
}
.text {
height: 25px;
img {
margin-right: 3px;
}
}
.btn-wrapper {
position: absolute;
right: 24px;
top: 9px;
.ant-btn {
margin-left: 12px;
&.finish {
background-color: #FF483C !important;
}
}
}
}
\ No newline at end of file
src/modules/teach-tool/components/audioRecord.js 0 → 100644
export default function AudioRecorder(stream, config) {
config = config || {};
config.sampleBits = config.sampleBits || 16; //采样数位 8, 16
config.sampleRate = config.sampleRate || 16000; //采样率16khz
var context = new (window.webkitAudioContext || window.AudioContext)();
var audioInput = context.createMediaStreamSource(stream);
var createScript = context.createScriptProcessor || context.createJavaScriptNode;
var recorder = createScript.apply(context, [4096, 1, 1]);
var audioData = {
size: 0 //录音文件长度
, buffer: [] //录音缓存
, inputSampleRate: context.sampleRate //输入采样率
, inputSampleBits: 16 //输入采样数位 8, 16
, outputSampleRate: config.sampleRate //输出采样率
, oututSampleBits: config.sampleBits //输出采样数位 8, 16
, input: function (data) {
this.buffer.push(new Float32Array(data));
this.size += data.length;
}
, compress: function () { //合并压缩
//合并
var data = new Float32Array(this.size);
var offset = 0;
for (var i = 0; i < this.buffer.length; i++) {
data.set(this.buffer[i], offset);
offset += this.buffer[i].length;
}
//压缩
var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
var length = data.length / compression;
var result = new Float32Array(length);
var index = 0, j = 0;
while (index < length) {
result[index] = data[j];
j += compression;
index++;
}
return result;
}
, encodeWAV: function () {
var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
var bytes = this.compress();
var dataLength = bytes.length * (sampleBits / 8);
var buffer = new ArrayBuffer(44 + dataLength);
var data = new DataView(buffer);
var channelCount = 1;//单声道
var offset = 0;
var writeString = function (str) {
for (var i = 0; i < str.length; i++) {
data.setUint8(offset + i, str.charCodeAt(i));
}
}
// 资源交换文件标识符
writeString('RIFF'); offset += 4;
// 下个地址开始到文件尾总字节数,即文件大小-8
data.setUint32(offset, 36 + dataLength, true); offset += 4;
// WAV文件标志
writeString('WAVE'); offset += 4;
// 波形格式标志
writeString('fmt '); offset += 4;
// 过滤字节,一般为 0x10 = 16
data.setUint32(offset, 16, true); offset += 4;
// 格式类别 (PCM形式采样数据)
data.setUint16(offset, 1, true); offset += 2;
// 通道数
data.setUint16(offset, channelCount, true); offset += 2;
// 采样率,每秒样本数,表示每个通道的播放速度
data.setUint32(offset, sampleRate, true); offset += 4;
// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;
// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
// 每样本数据位数
data.setUint16(offset, sampleBits, true); offset += 2;
// 数据标识符
writeString('data'); offset += 4;
// 采样数据总数,即数据总大小-44
data.setUint32(offset, dataLength, true); offset += 4;
// 写入采样数据
if (sampleBits === 8) {
for (var i = 0; i < bytes.length; i++, offset++) {
var s = Math.max(-1, Math.min(1, bytes[i]));
var val = s < 0 ? s * 0x8000 : s * 0x7FFF;
val = parseInt(255 / (65535 / (val + 32768)));
data.setInt8(offset, val, true);
}
} else {
for (var i = 0; i < bytes.length; i++, offset += 2) {
var s = Math.max(-1, Math.min(1, bytes[i]));
data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
}
return new Blob([data], { type: 'audio/wav' });
}
};
//开始录音
this.start = function () {
audioInput.connect(recorder);
recorder.connect(context.destination);
}
//停止
this.stop = function () {
recorder.disconnect();
}
//获取音频文件
this.getBlob = function () {
this.stop();
return audioData.encodeWAV();
}
//回放
this.play = function (audio) {
var blob=this.getBlob();
// saveAs(blob, "F:/3.wav");
audio.src = window.URL.createObjectURL(this.getBlob());
}
//上传
this.upload = function () {
return this.getBlob()
}
//音频采集
recorder.onaudioprocess = function (e) {
audioData.input(e.inputBuffer.getChannelData(0));
//record(e.inputBuffer.getChannelData(0));
}
}
\ No newline at end of file
src/modules/teach-tool/components/model.js 0 → 100644
/*
* @Author: chenjianyu
* @Date: 2020-09-12 17:00:44
* @LastEditTime: 2021-03-18 09:33:26
* @LastEditors: yuananting
* @Description: 答题模式模板
* @Copyright © 2020 杭州杰竞科技有限公司 版权所有
*/
export function defineModuleData(index) {
return {
questionInfoVOList: [], // 题目内容
taskModuleContentVOList: [], // 模块说明内容
taskModuleInfoVO: {
key: window.random_string(16),
name: `题目模块${index}`,
}
}
}
export function defineQuestionData(questionType) {
return {
taskModuleQuestionVO: { // 题目信息
key: window.random_string(16),
questionType, // 题目类型
itemTypeEnum: 'RIGHT_OR_WRONG',
questionLevel: 0,
questionTypeEnum: questionType,
// score: 1, // 本题分值
},
itemInfoVOList: [], // 选项
topicDescribeVOList: [{
content: '',
type: 'TEXT',
contentType: 'TEXT'
}], // 题干
parsingDescribeVOList: [{
content: '',
type: 'TEXT',
contentType: 'TEXT'
}], // 答案解析
lowerLevelQuestionInfoVOList: [],
showBox: true,
}
}
export function defineQuestionInfo(questionType) {
return {
questionTypeEnum: questionType, // 题目类型
questionStemList:[
{
contentType: "QUESTION_STEM", // 内容类型（默认题干）
content: "", // 内容
type: "RICH_TEXT", // 内容项形式（0:富文本 1:文字 2:图片 3:语音 4:视频 5文件 6.课件）
}
], // 题干
optionList: questionType === "JUDGE" ? [] : [], // 非填空题选项
gapFillingAnswerList: [
{
correctAnswerList: []
}
], //填空题填空项
questionAnswerDescList: [
{
contentType: "QUESTION_ANSWER_DESC", // 内容类型（默认解析）
content: "", // 内容
type: "RICH_TEXT", // 内容项形式（0:富文本 1:文字 2:图片 3:语音 4:视频 5文件 6.课件）
}
], //答案解析
showBox: true, // 显示录音弹窗
}
}
export function defineOptionInfo() {
return {
isCorrectAnswer: 0, // 是否为正确答案选项
questionOptionContentList: [ // 选项内容
{
contentType: "QUESTION_OPTION", // 内容类型（默认选项）
content: "", // 内容
type: "RICH_TEXT", // 内容项形式（0:富文本 1:文字 2:图片 3:语音 4:视频 5文件 6.课件）
}
]
}
}
export function defineJudgeOptionInfo(content) {
return {
isCorrectAnswer: 0, // 是否为正确答案选项
questionOptionContentList: [ // 选项内容
{
contentType: "QUESTION_OPTION", // 内容类型（默认选项）
content, // 内容
type: "RICH_TEXT",
}
]
}
}
export function defineOptionData(content = '') {
return {
itemContentVOList: [{
content,
type: 'TEXT',
contentType: 'TEXT'
}], // 题目项内容
questionItemVO: { // 题目项信息
ifCorrectAnswerItem: false,
key: window.random_string(16),
}
}
}
\ No newline at end of file
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, Spin, Progress } from "antd";
import "./BatchImportQuestionModal.less";
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
import User from "@/common/js/user";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
import { LoadingOutlined } from "@ant-design/icons";
class BatchImportQuestionModal extends Component {
constructor(props) {
super(props);
this.state = {
showSelectFileModal: false, // 云盘列表弹窗显隐
diskList: [], // 资料云盘文件列表
uploadFile: null, // 上传的文件
uploadResult: {
elapsedTime: 0,
failCnt: 0,
resourceUrl: null,
successCnt: 0,
}, // 上传返回结果
message: null,
status: "init",
};
}
// 下载题目模板
handleDownTemplate = () => {
const a = document.createElement("a");
a.href = "https://image.xiaomaiketang.com/xm/question_template.xlsx";
a.click();
};
// 选择云盘资源
handleSelectExcel = (file) => {
console.log(file);
this.setState({ uploadFile: file });
this.setState({
showSelectFileModal: false,
});
};
// 导入
handleImport = async () => {
const { uploadFile } = this.state;
if (!uploadFile) {
message.warning("请选择要导入的文件");
} else {
let flag = false;
setTimeout(() => {
if (!flag) {
this.setState({ status: "uploading" });
}
}, 1000);
let params = {
categoryId: this.props.categoryId,
resourceId: this.state.uploadFile.resourceId,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
const res = await QuestionBankService.batchImport(params);
const { result } = res;
const { bizSuccess, bizMessage } = result;
if (res) {
flag = true;
this.setState({ status: bizSuccess ? "success" : "fail" });
this.setState({ uploadResult: result });
this.setState({ message: bizMessage });
}
}
};
// 下载错误报告
downErrorReport = async () => {
const { uploadResult } = this.state;
const { resourceUrl } = uploadResult;
const a = document.createElement("a");
a.href = resourceUrl;
a.click();
};
render() {
const {
diskList,
showSelectFileModal,
uploadFile,
status,
uploadResult,
message,
} = this.state;
const { failCnt, resourceUrl, successCnt } = uploadResult;
const loadingIcon = <LoadingOutlined style={{ fontSize: 76 }} spin />;
return (
<div>
<Modal
closable={status !== "uploading"}
className="import-score-modal"
title="导入题目信息"
visible={true}
width={560}
maskClosable={false}
footer={
status === "init" && [
<Button onClick={this.props.close}>取消</Button>,
<Button type="primary" onClick={this.handleImport}>
导入
</Button>,
]
}
onCancel={() => {
this.props.close();
}}
>
{status === "init" && (
<div>
<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 })}
>
{uploadFile ? "重新添加" : "添加文件"}
</Button>
{uploadFile && (
<div className="file-box">
<div>
<img
className="link-img"
src="https://image.xiaomaiketang.com/xm/link.png"
/>
<span>{uploadFile.folderName}</span>
<img
className="del-img"
src="https://image.xiaomaiketang.com/xm/del.png"
onClick={() => this.setState({ uploadFile: null })}
/>
</div>
</div>
)}
</div>
</div>
)}
{status === "uploading" && (
<div className="import-status-box">
<div className="status-content">
<Spin indicator={loadingIcon} />
<p className="status">题目导入中...</p>
<p className="status-tip">请勿关闭页面和此弹窗</p>
<p className="status-tip">
<span>以防题目导入失败</span>
</p>
</div>
</div>
)}
{status === "success" && (
<div className="import-status-box">
<div className="status-content">
<img
src="https://image.xiaomaiketang.com/xm/success.png"
alt=""
/>
<p className="status">导入完成</p>
<p className="status-tip">
<span style={{ color: successCnt === 0 ? "" : "#FF9D14" }}>
{successCnt}
</span>
个题目导入成功，
<span style={{ color: failCnt === 0 ? "" : "#FF9D14" }}>
{failCnt}
</span>
个题目导入失败。
</p>
{resourceUrl ? (
<Button
type="primary"
className="down-btn"
onClick={() => this.downErrorReport(resourceUrl)}
>
下载错误报告
</Button>
) : (
<Button
onClick={() => {
this.props.close();
}}
>
关闭
</Button>
)}
</div>
</div>
)}
{status === "fail" && (
<div className="import-status-box">
<div className="status-content">
<img src="https://image.xiaomaiketang.com/xm/fail.png" alt="" />
<p className="status">导入失败</p>
<p className="status-tip">{message}</p>
{message ? (
<Button
type="primary"
className="down-btn"
onClick={() => {
this.setState({ status: "init" })
this.setState({ uploadFile: null })
this.setState({ showSelectFileModal: true })
}}
>
重新上传文件
</Button>
) : (
<Button
onClick={() => {
this.props.close();
}}
>
关闭
</Button>
)}
</div>
</div>
)}
</Modal>
<SelectPrepareFileModal
operateType="select"
accept="xls/xlsx"
selectTypeList={[
"vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"vnd.ms-excel",
]}
tooltip="支持文件类型：xls、xlsx"
isOpen={showSelectFileModal}
diskList={diskList}
onClose={() => {
this.setState({ showSelectFileModal: false });
}}
onSelect={this.handleSelectExcel}
/>
</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;
}
}
.file-box {
line-height: 20px;
color: #999999;
line-height: 20px;
margin-top: 10px;
span {
vertical-align: middle;
margin-right: 16px;
}
.link-img {
width: 14px;
vertical-align: middle;
margin-right: 4px;
}
.del-img {
width: 18px;
vertical-align: middle;
visibility: hidden;
}
}
.file-box :hover {
background-color: #FFF8E8;
.del-img {
visibility: visible !important;
}
}
.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/NewEditQuestionBankCategory.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-02-22 17:51:28
* @LastEditors: yuananting
* @LastEditTime: 2021-03-18 09:32:59
* @Description: 助学工具-题库-题库新建或编辑题库分类模态框
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Modal, Form, Input, message } from "antd";
import User from "@/common/js/user";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
class NewEditQuestionBankCategory extends Component {
formRef = React.createRef();
constructor(props) {
super(props);
this.state = {
treeData: [],
categoryName:
this.props.type === "edit" ? this.props.node.categoryName : null,
};
}
componentDidMount() {
this.queryCategoryTree();
// this.getSameLevelNodes(this.props.treeData);
}
// 查询分类树
queryCategoryTree = () => {
let query = {
source: 0,
userId: User.getStoreUserId(),
tenantId: User.getStoreId(),
};
QuestionBankService.queryCategoryTree(query).then((res) => {
const { result = [] } = res;
this.setState({ treeData: result });
});
};
// 确定新增或编辑
confirmOperate = async () => {
const { categoryName } = this.state;
const { node, addLevelType, type } = this.props;
let params = {
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
};
if (type === "new") {
//新增
params.categoryName = categoryName;
if (addLevelType === "equal") {
params.parentId = node ? node.parentId : 0
params.categoryLevel = node ? node.categoryLevel : 0;
} else {
params.parentId = node.id;
params.categoryLevel = node.categoryLevel + 1;
}
try {
await this.formRef.current.validateFields();
QuestionBankService.addCategory(params).then((res) => {
if (res.success) {
this.props.close();
}
});
} catch (e) {
console.log(e);
}
} else {
// 编辑
params.categoryId = node.id;
params.parentId = node.parentId;
params.categoryLevel = node.categoryLevel;
params.categoryName = categoryName;
try {
await this.formRef.current.validateFields();
QuestionBankService.editCategory(params).then((res) => {
if (res.success) {
this.props.close();
}
});
} catch (e) {
console.log(e);
}
}
};
getEqualLevelNodes = (data, parentId) => {
let nodes = [];
data.forEach((item) => {
if (item.parentId === parentId) {
nodes.push(item);
}
if (item.children) {
nodes.push(...this.getEqualLevelNodes(item.children, parentId));
}
});
return nodes;
};
getChildLevelNodes = (data, id) => {
let nodes = [];
data.forEach((item) => {
if (item.id === id && item.children) {
nodes.push(...item.children);
}
if (item.children) {
nodes.push(...this.getChildLevelNodes(item.children, id));
}
});
return nodes;
};
getSameLevelNodes = (data, type) => {
let sameLevelNodes = [];
if (type === "equal") {
let parentId = this.props.node ? this.props.node.parentId : "0";
sameLevelNodes = this.getEqualLevelNodes(data, parentId);
} else {
sameLevelNodes = this.getChildLevelNodes(data, this.props.node.id);
}
return sameLevelNodes;
};
// 查询是否重名
checkExist = (sameLevelNodes, categoryName) => {
var result = null;
sameLevelNodes.forEach((item) => {
if (result != null) {
return result;
}
if (item.categoryName === categoryName) {
result = item;
}
});
return result;
};
render() {
const { title, label, treeData, addLevelType } = this.props;
const { categoryName } = this.state;
const _that = this;
return (
<Modal
visible={true}
title={title}
onOk={this.confirmOperate}
onCancel={() => this.props.close()}
>
<Form ref={this.formRef}>
<Form.Item
name="categoryName"
label={label}
required
rules={[
{
required: true,
message: `请输入${label}`,
},
({ getFieldValue }) => ({
validator(_, value) {
let sameLevelNodes = _that.getSameLevelNodes(
treeData,
addLevelType
);
if (_that.checkExist(sameLevelNodes, value)) {
return Promise.reject("此分类名称已存在");
} else {
return Promise.resolve();
}
},
}),
]}
>
<Input
defaultValue={categoryName}
placeholder={`请输入${title}，最多10个字`}
maxLength={10}
onChange={(e) => {
this.setState({
categoryName: e.target.value,
});
}}
/>
</Form.Item>
</Form>
</Modal>
);
}
}
export default NewEditQuestionBankCategory;
src/modules/teach-tool/modal/QuestionPreviewModal.jsx 0 → 100644
import React, { Component } from "react";
import { Modal, Divider } from "antd";
import User from "@/common/js/user";
import QuestionBankService from "@/domains/question-bank-domain/QuestionBankService";
import "./QuestionPreviewModal.less";
import ScanFileModal from "@/modules/resource-disk/modal/ScanFileModal";
import _ from "underscore";
import XMAudio from "../components/XMAudio";
import { NUM_TO_WORD_MAP } from "@/common/constants/punchClock/punchClock";
const questionTypeList = {
SINGLE_CHOICE: "单选题",
MULTI_CHOICE: "多选题",
JUDGE: "判断题",
GAP_FILLING: "填空题",
INDEFINITE_CHOICE: "不定项选择题",
};
class QuestionPreviewModal extends Component {
formRef = React.createRef();
constructor(props) {
super(props);
this.state = {
questionInfo: {},
};
}
componentDidMount() {
this.queryQuestionDetails();
}
// 题目预览
queryQuestionDetails = () => {
let query = {
id: this.props.id,
source: 0,
userId: User.getStoreUserId(),
tenantId: User.getStoreId(),
};
QuestionBankService.queryQuestionDetails(query).then((res) => {
const { result = [] } = res;
this.setState({ questionInfo: result });
});
};
handleScanFile = (scanFileType, scanFileAddress) => {
this.setState({
showScanFile: true,
scanFileAddress,
scanFileType,
});
};
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,
scanFileAddress,
scanFileType,
questionInfo,
} = this.state;
const {
questionTypeEnum,
questionStemList,
gapFillingAnswerList,
optionList,
questionAnswerDescList,
} = questionInfo;
// 查找答案选项
let rightAnswerSort = [];
_.filter(optionList, (optionItem, optionIndex) => {
if (optionItem.isCorrectAnswer === 1) {
rightAnswerSort.push(optionIndex);
}
});
const textDescList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "RICH_TEXT";
});
const pictureDescList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "PICTURE";
});
const voiceDescList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "VOICE";
});
const recordDescList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "RECORD";
});
const videoDeacList = _.filter(questionAnswerDescList, (descItem) => {
return descItem.type === "VIDEO";
});
return (
<div>
<Modal
className="question-preview-modal"
visible={true}
title="题目预览"
width={560}
footer={null}
onCancel={this.props.close}
>
<div className="question-modal-content">
<div className="question-type">
<div className="question-type__title">题型：</div>
<div className="question-type__content">
{questionTypeList[questionTypeEnum]}
</div>
</div>
<div className="question-stem">
<div className="question-stem__title">题目：</div>
<div className="question-stem__content">
{_.map(questionStemList, (item, index) => {
let dom = "";
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}
className="input-box"
dangerouslySetInnerHTML={{
__html: content,
}}
/>
);
break;
case "PICTURE":
dom = (
<div key={index} className="picture-box">
<img
src={content}
onClick={() => this.handleScanFile("JPG", content)}
/>
</div>
);
break;
case "VOICE":
dom = (
<div key={index} className="voice-box">
<XMAudio
forbidParse
url={content}
getDuration={(durationSize) => {
size = durationSize;
this.setState({});
}}
index={index}
size={size || 1000}
/>
</div>
);
break;
}
return dom;
})}
</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">
{_.map(optionList, (optionItem, optionIndex) => {
const { questionOptionContentList } = optionItem;
const inputcontent = _.filter(
questionOptionContentList,
(optionItem) => {
return optionItem.type === "RICH_TEXT";
}
);
return (
<div className="option-box" key={optionIndex}>
<div className="option-box-header">
<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>
{[
"INDEFINITE_CHOICE",
"MULTI_CHOICE",
"SINGLE_CHOICE",
].includes(questionTypeEnum) &&
_.map(questionOptionContentList, (item, index) => {
let dom = "";
let { type, content, size } = item;
switch (type) {
case "PICTURE":
dom = (
<div key={index + 1} className="picture-box">
<img
src={content}
onClick={() =>
this.handleScanFile("JPG", content)
}
/>
</div>
);
break;
case "VOICE":
dom = (
<div key={index + 1} className="voice-box">
<XMAudio
forbidParse
url={content}
getDuration={(durationSize) => {
size = durationSize;
this.setState({});
}}
index={index}
size={size || 1000}
/>
</div>
);
break;
}
return dom;
})}
</div>
);
})}
</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 (
<div className="option-sort" key={index}>
{NUM_TO_WORD_MAP[item]}
</div>
);
})}
</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">
<div className="question-desc__title">答案解析：</div>
<div className="question-desc__content">
<div className="question-desc-box">
{textDescList.length > 0 && (
<div
className="desc-input-box"
dangerouslySetInnerHTML={{
__html: textDescList[0].content,
}}
/>
)}
{pictureDescList.length > 0 && (
<div className="desc-picture-box">
{_.map(pictureDescList, (pictureItem, pictureIndex) => {
let { content } = pictureItem;
return (
<div className="picture-box" key={pictureIndex}>
<img
className="img-box"
src={content}
onClick={() =>
this.handleScanFile("JPG", content)
}
/>
</div>
);
})}
</div>
)}
{recordDescList.length > 0 && (
<div className="desc-audio-box">
{_.map(recordDescList, (recordItem, recordIndex) => {
let { content, size } = recordItem;
return (
<div className="audio-box" key={recordIndex}>
<XMAudio
forbidParse
url={content}
getDuration={(durationSize) => {
size = durationSize;
this.setState({});
}}
index={recordIndex}
size={size || 1000}
/>
</div>
);
})}
</div>
)}
{voiceDescList.length > 0 && (
<div className="desc-audio-box">
{_.map(voiceDescList, (voiceItem, voiceIndex) => {
let { content, size } = voiceItem;
return (
<div className="audio-box" key={voiceIndex}>
<XMAudio
forbidParse
url={content}
getDuration={(durationSize) => {
size = durationSize;
this.setState({});
}}
index={voiceIndex}
size={size || 1000}
/>
</div>
);
})}
</div>
)}
{videoDeacList.length > 0 && (
<div className="desc-video-box">
{_.map(videoDeacList, (videoItem, videoIndex) => {
let { content } = videoItem;
return (
<div className="video-box" key={videoIndex}>
<img
className="video-box_content"
src={`${content}?x-oss-process=video/snapshot,t_0,m_fast`}
/>
<img
className="video-box_btn"
src="https://image.xiaomaiketang.com/xm/r5H8cYm4ch.png"
onClick={() =>
this.handleScanFile("MP4", content)
}
/>
</div>
);
})}
</div>
)}
</div>
</div>
</div>
</div>
</Modal>
{showScanFile && (
<ScanFileModal
modalTitle={scanFileType === "MP4" ? "视频播放" : "查看大图"}
fileType={scanFileType}
item={{
ossAddress: scanFileAddress,
}}
close={() => {
this.setState({ showScanFile: false });
}}
/>
)}
</div>
);
}
}
export default QuestionPreviewModal;
src/modules/teach-tool/modal/QuestionPreviewModal.less 0 → 100644
.question-modal-content {
position: relative;
.question-type {
margin-bottom: 16px;
&__title {
height: 22px;
font-size: 16px;
color: #333333;
line-height: 22px;
margin-bottom: 8px;
}
&__content {
font-size: 14px;
font-weight: 400;
color: #666666;
}
}
.question-stem {
margin-bottom: 16px;
img {
max-width: 88px;
max-height: 88px;
}
&__title {
height: 22px;
font-size: 16px;
color: #333333;
line-height: 22px;
margin-bottom: 8px;
}
&__content {
font-size: 14px;
font-weight: 400;
color: #666666;
.input-box {
margin-bottom: 8px;
* {
display: inline-block;
}
}
.picture-box {
display: inline-flex;
margin: 12px 12px 0 0;
}
.voice-box {
margin-bottom: 12px;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
width: 320px;
}
}
}
.question-option {
margin-bottom: 16px;
img {
max-width: 88px;
max-height: 88px;
}
&__title {
height: 22px;
font-size: 16px;
color: #333333;
line-height: 22px;
margin-bottom: 8px;
}
&__content {
font-size: 14px;
font-weight: 400;
color: #666666;
.option-box {
color: #666666;
margin-bottom: 8px;
.option-box-header {
.option-sort {
display: inline-block;
margin-right: 5px;
}
.input-box {
display: inline-block;
max-width: calc(100% - 20px);
vertical-align: top;
}
}
.picture-box {
display: inline-flex;
margin: 12px 12px 0 0;
}
.voice-box {
margin-bottom: 12px;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
width: 320px;
}
}
}
}
.question-answer {
margin-bottom: 16px;
img {
max-width: 88px;
max-height: 88px;
}
&__title {
height: 22px;
font-size: 16px;
color: #333333;
line-height: 22px;
margin-bottom: 8px;
}
&__content {
font-size: 14px;
font-weight: 400;
color: #666666;
.option-sort {
display: inline-block;
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;
&__title {
height: 22px;
font-size: 16px;
color: #333333;
line-height: 22px;
margin-bottom: 8px;
}
&__content {
font-size: 14px;
font-weight: 400;
color: #666666;
.desc-input-box {
margin-bottom: 8px;
* {
display: inline-block;
}
}
.desc-picture-box {
display: inline-flex;
margin-bottom: 28px;
.picture-box {
width: 88px;
height: 88px;
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
.img-box {
max-width: 88px;
max-height: 88px;
border-radius: 4px;
}
}
}
.desc-audio-box {
margin-bottom: 28px;
.audio-box {
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
width: 320px;
margin-bottom: 12px;
}
}
.desc-video-box {
.video-box {
position: relative;
display: inline-block;
width: 208px;
overflow: hidden;
padding-top: 12px;
margin: 0px 12px 12px 0;
&_content {
max-width: 200px;
max-height: 200px;
border-radius: 4px;
}
&_btn {
width: 32px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -16px;
}
}
}
}
}
}
.question-preview-modal.ant-modal {
max-height: 60% !important;
}
.add-fill-line {
padding: 0 10px;
border-bottom: 1px solid !important;
margin: 0 4px;
text-align: center;
border: none;
width: 54px;
}
src/routes/config/mainRoutes.tsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-04-29 10:26:32 * @Date: 2020-04-29 10:26:32
* @LastEditors: zhangleyuan * @LastEditors: yuananting
* @LastEditTime: 2021-03-02 15:56:22 * @LastEditTime: 2021-03-18 11:30:15
* @Description: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import Home from '@/modules/home/Home'; import Home from '@/modules/home/Home';
...@@ -24,6 +24,9 @@ import PlanPage from '@/modules/plan-manage/PlanPage'; ...@@ -24,6 +24,9 @@ import PlanPage from '@/modules/plan-manage/PlanPage';
import AddPlanPage from '@/modules/plan-manage/AddPlan'; import AddPlanPage from '@/modules/plan-manage/AddPlan';
import LearningDataPage from '@/modules/plan-manage/LearningData'; import LearningDataPage from '@/modules/plan-manage/LearningData';
import StoreInfoPage from '@/modules/store-manage/StoreInfo'; import StoreInfoPage from '@/modules/store-manage/StoreInfo';
import QuestionBankIndex from '@/modules/teach-tool/QuestionBankIndex';
import QuestionCategoryManage from '@/modules/teach-tool/QuestionCategoryManage';
import AddNewQuestion from '@/modules/teach-tool/AddNewQuestion';
const mainRoutes = [ const mainRoutes = [
{ {
...@@ -82,6 +85,21 @@ const mainRoutes = [ ...@@ -82,6 +85,21 @@ const mainRoutes = [
name: '资料云盘' name: '资料云盘'
}, },
{ {
path: '/question-bank-index',
component:QuestionBankIndex,
name: '题库'
},
{
path: '/question-category-manage',
component:QuestionCategoryManage,
name: '分类管理'
},
{
path: '/create-new-question',
component:AddNewQuestion,
name: '新增题目'
},
{
path: '/switch-route', path: '/switch-route',
component: SwitchRoute, component: SwitchRoute,
name: '登录后跳转承载页' name: '登录后跳转承载页'
......
src/routes/config/menuList.tsx
/* /*
* @Author: zhangleyuan * @Author: yuananting
* @Date: 2021-01-19 11:27:56 * @Date: 2021-02-21 15:53:31
* @LastEditors: zhangleyuan * @LastEditors: yuananting
* @LastEditTime: 2021-03-02 15:18:12 * @LastEditTime: 2021-03-18 11:30:55
* @Description: 描述一下 * @Description: 描述一下咯
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
export const menuList: any = [ export const menuList: any = [
{ {
...@@ -46,6 +46,18 @@ export const menuList: any = [ ...@@ -46,6 +46,18 @@ export const menuList: any = [
groupCode: "TrainPlan", groupCode: "TrainPlan",
link: '/plan' link: '/plan'
} }
],
},
{
groupName: "助学工具",
groupCode: "CloudShop",
icon: '&#xe82e;',
children: [
{
groupName: "题库",
groupCode: "ShopStaff",
link: '/question-bank-index'
}
] ]
}, },
{ {
......
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