Skip to content

X
xiaomai-cloud-class-web
Commit 3cfa93ca by yuananting
Options

feat:新建题目

parent f48a2dd4
Showing with 430 additions and 351 deletions
src/modules/teach-tool/components/CourseCategoryManage.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-23 18:28:50
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 19:50:28
* @LastEditTime: 2021-03-30 14:25:47
* @Description: 助学工具-课程分类
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -30,7 +30,7 @@ class CourseCategoryManage extends Component {
constructor(props) {
super(props);
this.state = {
NewEditCourseCategoryModal: null, //新增或编辑分类模态框
newEditCourseCategoryModal: null, //新增或编辑分类模态框
treeData: [],
originTreeData: [],
treeMap: {},
......@@ -302,12 +302,12 @@ class CourseCategoryManage extends Component {
close={() => {
this.queryCategoryTree("change", this.state.categoryName);
this.setState({
NewEditCourseCategoryModal: null,
newEditCourseCategoryModal: null,
});
}}
/>
);
this.setState({ NewEditCourseCategoryModal: m });
this.setState({ newEditCourseCategoryModal: m });
};
// 删除分类
......@@ -582,7 +582,7 @@ class CourseCategoryManage extends Component {
expandedKeys,
selectedKeys,
autoExpandParent,
NewEditCourseCategoryModal,
newEditCourseCategoryModal,
} = this.state;
return (
<div className="page course-category-manage">
......@@ -645,7 +645,7 @@ class CourseCategoryManage extends Component {
></DirectoryTree>
</div>
</div>
{NewEditCourseCategoryModal}
{newEditCourseCategoryModal}
</div>
);
}
......
src/modules/teach-tool/components/CourseCategorySiderTree.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-22 10:59:43
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 16:17:53
* @LastEditTime: 2021-03-30 16:40:58
* @Description: 助学工具-课程分类侧边栏
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -19,22 +19,28 @@ class CourseCategorySiderTree extends Component {
constructor(props) {
super(props);
this.state = {
selectedKeys: [getParameterByName("categoryId") || "null"],
treeData: this.props.treeData || [],
selectedKeys:
props.fromModule === "index"
? [getParameterByName("categoryId") || "null"]
: ["null"],
treeData: props.treeData || [],
autoExpandParent: false,
};
}
componentDidMount() {
this.queryCategoryTree("change");
this.props.getSelectedCategoryId([
getParameterByName("categoryId") || "null",
]);
this.props.getSelectedCategoryId(
this.props.fromModule === "index"
? [getParameterByName("categoryId") || "null"]
: ["null"]
);
}
shouldComponentUpdate(nextProps, nextState) {
const { currentTotal, updatedCategoryId } = nextProps;
if (
this.props.fromModule === "index" &&
this.props.currentTotal !== currentTotal &&
this.props.updatedCategoryId === updatedCategoryId
) {
......@@ -200,7 +206,7 @@ class CourseCategorySiderTree extends Component {
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
{User.getUserRole() !== "CloudLecturer" && (
{this.props.fromModule==="index" && User.getUserRole() !== "CloudLecturer" && (
<div className="sider-btn">
<Button
onClick={() => {
......
src/modules/teach-tool/examination-paper/ExaminationPaperIndex.jsx
......@@ -2,11 +2,10 @@
* @Author: yuananting
* @Date: 2021-03-27 14:55:14
* @LastEditors: yuananting
* @LastEditTime: 2021-03-27 15:21:06
* @LastEditTime: 2021-03-30 16:08:38
* @Description: 助学工具-试卷主页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import "./ExaminationPaperIndex.less";
import CourseCategorySiderTree from "../components/CourseCategorySiderTree";
......@@ -15,13 +14,9 @@ import ExaminationPaperContent from "./components/ExaminationPaperContent";
class ExaminationPaperIndex extends Component {
constructor(props) {
super(props);
this.state = {
selectedCategoryId: "",
};
this.state = {};
}
componentDidMount() {}
getCategoryIdFromSider = (selectedCategoryId) => {
if (selectedCategoryId && selectedCategoryId.length > 0) {
this.setState({ selectedCategoryId: selectedCategoryId[0] });
......@@ -42,6 +37,7 @@ class ExaminationPaperIndex extends Component {
>
<div className="sider">
<CourseCategorySiderTree
fromModule="index"
getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
currentTotal={this.state.currentTotal}
updatedCategoryId={this.state.updatedCategoryId}
......
src/modules/teach-tool/examination-paper/ExaminationPaperIndex.less
/*
* @Author: yuananting
* @Date: 2021-02-21 18:27:43
* @LastEditors: yuananting
* @LastEditTime: 2021-03-27 15:18:26
* @Description: 助学工具-题库-试卷主页面样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
.examination-paper-index {
.examination-paper-index {
.content-body {
display: flex;
.site-layout-background {
......
src/modules/teach-tool/examination-paper/NewExaminationPaper.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-27 16:15:13
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 10:54:49
* @LastEditTime: 2021-03-30 19:38:00
* @Description: 助学工具-新建试卷
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,38 +10,50 @@ import React, { Component } from "react";
import {
Form,
Button,
Select,
Input,
Space,
Table,
InputNumber,
ConfigProvider,
Empty,
Tooltip,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs";
import { PageControl } from "@/components";
import "./NewExaminationPaper.less";
import SelectQuestionModal from "./modal/SelectQuestionModal";
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 22 },
},
const questionTypeEnum = {
SINGLE_CHOICE: "单选题",
MULTI_CHOICE: "多选题",
JUDGE: "判断题",
GAP_FILLING: "填空题",
INDEFINITE_CHOICE: "不定项选择题",
};
class NewExaminationPaper extends Component {
formRef = React.createRef();
constructor(props) {
super(props);
this.state = {
current: 1,
size: 10,
total: 20,
questionFormData: {
examinationPaperName: null, // 试卷名称
passScore: null, // 及格线
questionList: [], // 题目列表
},
questionData: {
totalScore: 0,
totalCount: 0,
singleCount: 0,
singleScore: 0,
multiCount: 0,
multiScore: 0,
judgeCount: 0,
judgeScore: 0,
gapCount: 0,
gapScore: 0,
indefiniteCount: 0,
indefiniteScore: 0,
},
};
}
......@@ -62,25 +74,55 @@ class NewExaminationPaper extends Component {
chooseQuestion = () => {
const m = (
<SelectQuestionModal
setSelectedQuestion={(list) => {
this.setState(
{
questionList: list,
selectQuestionModal: null,
},
() => {
console.log(this.state.questionList);
}
);
}}
close={() => {
this.setState({
SelectQuestionModal: null,
selectQuestionModal: null,
});
}}
/>
);
this.setState({ SelectQuestionModal: m });
}
this.setState({ selectQuestionModal: m });
};
// 保存题目
saveExaminationPaper = async () => {
try {
await this.formRef.current.validateFields();
} catch (e) {
console.log(e);
}
};
render() {
const formItemLayout = {
labelCol: { span: 2 },
wrapperCol: { span: 10 },
};
const columns = [
{
title: "序号",
dataIndex: "index",
width: "10%",
render: (val, record, index) => {
return <span>{index + 1}</span>;
},
},
{
title: "题型",
dataIndex: "questionType",
dataIndex: "questionTypeEnum",
width: "16%",
filters: [
{
text: "单选题",
......@@ -104,21 +146,45 @@ class NewExaminationPaper extends Component {
},
],
filterMultiple: false,
onFilter: (value, record) => record.address.indexOf(value) === 0,
onFilter: (value, record) => record.questionTypeEnum.indexOf(value) === 0,
render: (val) => questionTypeEnum[val]
},
{
title: "题目",
dataIndex: "questionContent",
dataIndex: "questionStem",
ellipsis: {
showTitle: false,
},
render: (val) => {
var handleVal = val;
handleVal = handleVal.replace(/<(?!img|input).*?>/g, "");
handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、");
handleVal = handleVal.replace(/\&nbsp\;/gi, " ");
return (
<Tooltip
overlayClassName="aid-tool-list"
title={
<div style={{ maxWidth: 700, width: "auto" }}>{handleVal}</div>
}
placement="topLeft"
overlayStyle={{ maxWidth: 700 }}
>
{handleVal}
</Tooltip>
);
},
},
{
title: "分值",
dataIndex: "score",
width: "12%",
render: (val) => {
return <InputNumber min={1} max={100} defaultValue={2} />;
},
},
{
dataIndex: "extraScore",
width: "18%",
render: (val) => {
return (
<div>
......@@ -131,12 +197,32 @@ class NewExaminationPaper extends Component {
{
title: "操作",
dataIndex: "operate",
width: "10%",
render: (val, record) => <span>移除</span>,
},
];
const {
selectQuestionModal,
questionData,
examinationPaperName,
passScore = 60,
questionList = [],
} = this.state;
const data = [];
const { current, size, total, SelectQuestionModal } = this.state;
const {
totalScore = 0,
totalCount = 0,
singleCount = 0,
singleScore = 0,
multiCount = 0,
multiScore = 0,
judgeCount = 0,
judgeScore = 0,
gapCount = 0,
gapScore = 0,
indefiniteCount = 0,
indefiniteScore = 0,
} = questionData;
return (
<div className="page new-examination-paper">
......@@ -145,68 +231,100 @@ class NewExaminationPaper extends Component {
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
</div>
<Form {...formItemLayout} style={{ marginTop: 40 }}>
<Form
ref={this.formRef}
{...formItemLayout}
style={{ width: 1020, marginTop: 32 }}
>
<h1 style={{ fontSize: 16 }}>基本信息</h1>
<Form.Item label="试卷名称：">
<Input maxLength={40} placeholder="请输入试卷名称（40字以内）" />
</Form.Item>
<Form.Item label="试卷分类：">
<Select placeholder="请选择试卷分类" />
<Form.Item
name="examinationPaperName"
label="试卷名称："
required
rules={[
{
required: true,
message: "请输入试卷名称",
},
]}
>
<Input
value={examinationPaperName}
autoComplete="off"
maxLength={40}
placeholder="请输入试卷名称（40字以内）"
/>
</Form.Item>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: 30,
marginTop: 32,
}}
>
<h1 style={{ fontSize: 16 }}>题目管理</h1>
<Space>
<Button icon={<PlusOutlined />} onClick={this.chooseQuestion}>自选题目</Button>
<Button icon={<PlusOutlined />}>系统抽题</Button>
<Button icon={<PlusOutlined />}>一人一卷</Button>
</Space>
<Button icon={<PlusOutlined />} onClick={this.chooseQuestion}>
自选题目
</Button>
</div>
<Form.Item>
<div>
总计40分，共20题。
单选题5题，共10分；多选题2题，共4分；判断题3题，共6分，填空题5题，共10分，不定项选择题5题，共10分
</div>
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
<Table columns={columns} dataSource={data} pagination={false} />
</ConfigProvider>
<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>
</Form.Item>
<Form.Item label="及格线：">
<div style={{ margin: "10px 0 20px" }}>
总计{totalScore}分，共{totalCount}题。 单选题{singleCount}题，共
{singleScore}分；多选题{multiCount}题，共{multiScore}分；判断题
{judgeCount}题，共{judgeScore}分，填空题{gapCount}题，共{gapScore}
分，不定项选择题{indefiniteCount}题，共{indefiniteScore}分
</div>
<Form.Item label="及格线：" required>
<div>
<InputNumber min={1} defaultValue={60} /> %
<Form.Item
noStyle
initialValue={60}
name="passScore"
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (!value) {
return Promise.reject("请输入及格线");
} else {
return Promise.resolve();
}
},
}),
]}
>
<InputNumber
min={1}
max={100}
value={passScore}
onChange={(value) => {
this.setState({
passScore: value,
});
}}
/>
</Form.Item>{" "}
%
<span style={{ marginLeft: 20 }}>
总分（0）*及格线（60%）=及格分数（0）
总分（0）*及格线（{passScore || 0}%）=及格分数（0）
</span>
</div>
</Form.Item>
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
<Table
columns={columns}
dataSource={questionList}
pagination={false}
/>
</ConfigProvider>
</Form>
</div>
<div className="footer">
<Button>取消</Button>
<Button>预览</Button>
<Button type="primary">保存</Button>
<Button type="primary" onClick={this.saveExaminationPaper}>
保存
</Button>
</div>
{SelectQuestionModal}
{selectQuestionModal}
</div>
);
}
......
src/modules/teach-tool/examination-paper/NewExaminationPaper.less
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 13:52:01
* @LastEditors: yuananting
* @LastEditTime: 2021-03-27 17:22:05
* @LastEditTime: 2021-03-30 19:34:05
* @Description: 助学工具-新建试卷
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -32,3 +32,9 @@
}
}
}
.aid-tool-list {
.ant-tooltip-inner {
max-width: 700px !important;
}
}
src/modules/teach-tool/examination-paper/components/ExaminationPaperContent.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 13:57:20
* @LastEditTime: 2021-03-30 19:32:28
* @Description: 助学工具-题库-题目管理主页面列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,7 +12,6 @@ import {
Dropdown,
Row,
Input,
Select,
Tooltip,
Menu,
Button,
......@@ -24,34 +23,9 @@ import "./ExaminationPaperContent.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 questionTypeList = [
{
label: "单选题",
value: "SINGLE_CHOICE",
},
{
label: "多选题",
value: "MULTI_CHOICE",
},
{
label: "判断题",
value: "JUDGE",
},
{
label: "填空题",
value: "GAP_FILLING",
},
{
label: "不定项选择题",
value: "INDEFINITE_CHOICE",
},
];
class ExaminationPaperContent extends Component {
constructor(props) {
super(props);
......@@ -59,98 +33,87 @@ class ExaminationPaperContent extends Component {
query: {
current: 1,
size: 10,
order: "UPDATED_DESC", // 排序规则[ ACCURACY_DESC, ACCURACY_ASC, CREATED_DESC, CREATED_ASC, UPDATED_DESC, UPDATED_ASC ]
categoryId: null, // 当前题库分类Id
questionName: null, // 题目名称
questionType: null, // 题目类型
examinationPaperName: null, // 试卷名称
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
},
questionTypeList: [], // 题型列表
dataSource: [],
totalCount: 0,
QuestionPreviewModal: null, // 题目预览模态框
questionPreviewModal: null, // 题目预览模态框
};
}
componentDidMount() {
this.setState({
dataSource: [
{
examinationName: "一二三四五六七八九十",
passScore: 60,
totalScore: 100,
count: 12,
relatedCount: 12,
},
],
});
}
componentDidMount() {}
queryQuestionPageList = (remain) => {
shouldComponentUpdate(nextProps, nextState) {
let { selectedCategoryId } = nextProps;
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 }, () =>
this.props.updatedSiderTree(total, this.props.selectedCategoryId)
);
});
};
if (this.props.selectedCategoryId !== selectedCategoryId) {
_query.categoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
_query.examinationPaperName = null;
_query.current = 1;
this.setState({ query: _query }, () => this.queryExaminationPaperList());
}
return true;
}
// 查询试卷列表
queryExaminationPaperList = () => {};
// 预览试卷
previewExaminationPaper = (record) => {};
// 复制试卷
copyExaminationPaper = (record) => {};
// 编辑试卷
editExaminationPaper = (record) => {};
delCategoryConfirm(record) {
// 删除试卷
delExaminationPaper(record) {
return Modal.confirm({
title: "提示",
content: "确定要删除此题目吗？",
content: "确定要删除此试卷吗？",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
cancelText: "取消",
onOk: () => {
this.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("删除成功");
const { query, total } = this.state;
const { size, current } = query;
const _query = query;
if (total / size < current) {
if (total % size === 1) {
_query.current = 1;
}
}
this.setState({ query: _query }, () =>
this.queryQuestionPageList()
);
}
});
},
});
}
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("删除成功");
const { query, total } = this.state;
const { size, current } = query;
const _query = query;
if (total / size < current) {
if (total % size === 1) {
_query.current = 1;
}
}
this.setState({ query: _query }, () => this.queryQuestionPageList());
}
});
};
// 预览试卷
previewExaminationPaper = () => {};
// 编辑试卷
toEditExaminationPaper = () => {};
// 表头设置
parseColumns = () => {
const columns = [
{
title: "试卷",
key: "examinationName",
dataIndex: "examinationName",
key: "examinationPaperName",
dataIndex: "examinationPaperName",
ellipsis: {
showTitle: false,
},
......@@ -158,7 +121,6 @@ class ExaminationPaperContent extends Component {
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
......@@ -234,19 +196,21 @@ class ExaminationPaperContent extends Component {
return columns;
};
// 操作更多下拉项
initDropMenu = (item) => {
return (
<Menu>
<Menu.Item key="0">
<span>编辑</span>
<Menu.Item key="edit">
<span onClick={() => this.editExaminationPaper(item)}>编辑</span>
</Menu.Item>
<Menu.Item key="1">
<span>删除</span>
<Menu.Item key="del">
<span onClick={() => this.delExaminationPaper(item)}>删除</span>
</Menu.Item>
</Menu>
);
};
// 页展示数修改
onShowSizeChange = (current, size) => {
if (current == size) {
return;
......@@ -303,7 +267,7 @@ class ExaminationPaperContent extends Component {
type="primary"
onClick={() => {
window.RCHistory.push({
pathname: `/new-examination-paper`,
pathname: `/new-examination-paper?categoryId=${this.state.query.categoryId}`,
});
}}
>
......
src/modules/teach-tool/examination-paper/components/SelectQuestionContent.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 14:23:42
* @LastEditTime: 2021-03-30 18:36:32
* @Description: 助学工具-新建试卷-选择题目列表
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -67,7 +67,7 @@ class QuestionListContent extends Component {
query: {
current: 1,
size: 10,
order: "UPDATED_DESC", // 排序规则[ ACCURACY_DESC, ACCURACY_ASC, CREATED_DESC, CREATED_ASC, UPDATED_DESC, UPDATED_ASC ]
order: "ACCURACY_DESC",
categoryId: null, // 当前题库分类Id
questionName: null, // 题目名称
questionType: null, // 题目类型
......@@ -75,10 +75,8 @@ class QuestionListContent extends Component {
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
},
questionTypeList: [], // 题型列表
dataSource: [],
totalCount: 0,
selectedRowKeys: [],
selectQuestionKeys: [],
};
}
......@@ -88,10 +86,8 @@ class QuestionListContent extends Component {
let { selectedCategoryId } = nextProps;
const _query = this.state.query;
if (this.props.selectedCategoryId !== selectedCategoryId) {
if (selectedCategoryId === "null") {
selectedCategoryId = null;
}
_query.categoryId = selectedCategoryId;
_query.categoryId =
selectedCategoryId === "null" ? null : selectedCategoryId;
_query.questionName = null;
_query.questionType = null;
_query.current = 1;
......@@ -100,15 +96,11 @@ class QuestionListContent extends Component {
return true;
}
queryQuestionPageList = (remain) => {
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 }, () =>
this.props.updatedSiderTree(total, this.props.selectedCategoryId)
);
this.setState({ dataSource: records, total });
});
};
......@@ -118,66 +110,6 @@ class QuestionListContent extends Component {
});
};
delQuestionConfirm(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("删除成功");
const { query, total } = this.state;
const { size, current } = query;
const _query = query;
if (total / size < current) {
if (total % size === 1) {
_query.current = 1;
}
}
this.setState({ query: _query }, () => this.queryQuestionPageList());
}
});
};
// 排序
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 || "UPDATED_DESC";
_query.current = 1;
this.setState({ query: _query }, () => this.queryQuestionPageList());
};
// 清空搜索条件
handleReset = () => {
const _query = {
......@@ -192,24 +124,8 @@ class QuestionListContent extends Component {
});
};
toEditQuestion = (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: "题目",
......@@ -218,11 +134,10 @@ class QuestionListContent extends Component {
ellipsis: {
showTitle: false,
},
render: (val, record) => {
render: (val) => {
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
......@@ -262,33 +177,13 @@ class QuestionListContent extends Component {
// 自定义表格空状态
customizeRenderEmpty = () => {
const { categoryId } = this.state.query;
return (
<Empty
image="https://image.xiaomaiketang.com/xm/emptyTable.png"
imageStyle={{
height: 100,
}}
description={
<div>
<span>还没有题目</span>
{["CloudManager", "StoreManager"].includes(User.getUserRole()) &&
!["0", null].includes(categoryId) && (
<span>
，快去
<span
className="empty-list-tip"
onClick={() => {
this.handleCreateQuestionBank();
}}
>
新建一个
</span>
吧！
</span>
)}
</div>
}
description={"还没有题目"}
></Empty>
);
};
......@@ -319,13 +214,89 @@ class QuestionListContent extends Component {
);
};
// 选择题目-单项选择
selectQuestionRow = (record, selected) => {
const { selectQuestionKeys } = this.state;
let _list = [];
if (
selected ||
!_.find(selectQuestionKeys, (item) => item.id == record.id)
) {
_list = _.uniq(
selectQuestionKeys.concat([record]),
false,
(item) => item.id
);
} else {
_list = _.reject(selectQuestionKeys, (item) => item.id === record.id);
}
if (_list.length > 150) {
return message.warning("一份试卷最多支持150道题目");
}
this.setState({ selectQuestionKeys: _list });
};
// 选择题目-当前全选
selectQuestionAll = (selected, selectedRows, changeRows) => {
const { selectQuestionKeys } = this.state;
let _list = [];
if (selected) {
_list = _.uniq(
selectQuestionKeys.concat(changeRows),
false,
(item) => item.id
);
} else {
_list = _.reject(selectQuestionKeys, (item) =>
_.find(changeRows, (data) => data.id === item.id)
);
}
if (_list.length > 150) {
message.warning("一份试卷最多支持150道题目");
const extraLength = _list.length - 150;
_list.splice(_list.length - extraLength, extraLength);
}
this.setState({ selectQuestionKeys: _list });
};
render() {
const { dataSource = [], total, query, selectedRowKeys } = this.state;
const { current, size, categoryId, questionName, questionType } = query;
const {
dataSource = [],
total,
query,
selectQuestionKeys = [],
} = this.state;
const { current, size, questionName, questionType } = query;
const rowSelection = {
selectedRowKeys,
columnWidth: "48px",
columnWidth: 48,
selectedRowKeys: _.pluck(selectQuestionKeys, "id"),
onSelect: (record, selected) => {
this.selectQuestionRow(record, selected);
},
onSelectAll: (selected, selectedRows, changeRows) => {
this.selectQuestionAll(selected, selectedRows, changeRows);
},
};
const singleCount = _.filter(
selectQuestionKeys,
(item) => item.questionTypeEnum === "SINGLE_CHOICE"
).length;
const multiCount = _.filter(
selectQuestionKeys,
(item) => item.questionTypeEnum === "MULTI_CHOICE"
).length;
const judgeCount = _.filter(
selectQuestionKeys,
(item) => item.questionTypeEnum === "JUDGE"
).length;
const gapCount = _.filter(
selectQuestionKeys,
(item) => item.questionTypeEnum === "GAP_FILLING"
).length;
const indefiniteCount = _.filter(
selectQuestionKeys,
(item) => item.questionTypeEnum === "INDEFINITE_CHOICE"
).length;
return (
<div className="select-question-content">
<div className="select-question-filter">
......@@ -391,17 +362,24 @@ class QuestionListContent extends Component {
</div>
</Row>
</div>
<ShowTips
message={
<div>
<div className="select-tip-box">
<div>
<span className="icon iconfont tip-icon">&#xe61d;</span>
<span>已选{selectQuestionKeys.length}题</span>
{selectQuestionKeys.length > 0 && (
<span>
已选{200}题（单选题{1}题、多选题{2}题、判断题{3}
题、填空题{4}题、不定项选择题{5}题）
{singleCount > 0 && `、单选题${singleCount}题`}
{multiCount > 0 && `、多选题${multiCount}题`}
{judgeCount > 0 && `、判断题${judgeCount}题`}
{gapCount > 0 && `、填空题${gapCount}题`}
{indefiniteCount > 0 && `、不定项选择题${indefiniteCount}题`}
</span>
<span style={{marginLeft: 20}}>清空</span>
</div>
}
/>
)}
</div>
{selectQuestionKeys.length > 0 && (
<span className="clear-btn" onClick={() => this.setState({selectQuestionKeys:[]})}>清空</span>
)}
</div>
<div className="question-manage-list">
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
<Table
......@@ -411,7 +389,6 @@ class QuestionListContent extends Component {
columns={this.parseColumns()}
pagination={false}
bordered
onChange={this.handleChangeTable}
/>
</ConfigProvider>
<div className="box-footer">
......
src/modules/teach-tool/examination-paper/components/SelectQuestionContent.less
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:26:28
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 13:39:28
* @LastEditTime: 2021-03-30 18:34:50
* @Description: 助学工具-题库-题目管理右侧内容样式
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -75,6 +75,28 @@
}
}
}
.select-tip-box {
background: #fff4dd;
border-radius: 4px;
padding: 6px 16px;
margin-right: 8px;
display: flex;
justify-content: space-between;
.tip-icon {
color: #ff9d14;
font-size: 14px;
margin-right: 4px;
}
.select-num {
color: #666666;
font-size: 14px;
}
.clear-btn {
color: #5289fa;
font-size: 14px;
cursor: pointer;
}
}
}
.tool-list {
......
src/modules/teach-tool/examination-paper/modal/SelectQuestionModal.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-29 10:52:26
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 14:09:08
* @LastEditTime: 2021-03-30 19:17:30
* @Description: 助学工具-新建试卷-选择题目弹窗
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,13 +10,13 @@ import React, { Component } from "react";
import { Modal } from "antd";
import CourseCategorySiderTree from "../../components/CourseCategorySiderTree";
import SelectQuestionContent from "../components/SelectQuestionContent";
import "./SelectQuestionModal.less"
import "./SelectQuestionModal.less";
class SelectQuestionModal extends Component {
listRef = React.createRef();
constructor(props) {
super(props);
this.state = {
updatedCategoryId: null,
selectedCategoryId: null,
};
}
......@@ -27,18 +27,18 @@ class SelectQuestionModal extends Component {
}
};
updatedSiderTreeFromList = (updatedCategoryId) => {
this.setState({ updatedCategoryId });
};
render() {
const { updatedCategoryId, selectedCategoryId } = this.state;
return (
<Modal
destroyOnClose={true}
title="选择题目"
visible={true}
width={1200}
// onOk={handleOk}
onOk={() =>
this.props.setSelectedQuestion(
this.listRef.current.state.selectQuestionKeys
)
}
onCancel={this.props.close}
className="select-question-modal"
>
......@@ -48,15 +48,16 @@ class SelectQuestionModal extends Component {
>
<div className="sider">
<CourseCategorySiderTree
fromModule="modal"
getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
updatedCategoryId
/>
</div>
</div>
<div className="content">
<SelectQuestionContent
updatedSiderTree={this.updatedSiderTreeFromList.bind(this)}
selectedCategoryId
fromModule="modal"
ref={this.listRef}
selectedCategoryId={this.state.selectedCategoryId}
/>
</div>
</div>
......
src/modules/teach-tool/question-bank/QuestionBankIndex.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-21 17:51:01
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 16:11:41
* @LastEditTime: 2021-03-30 16:08:58
* @Description: 助学工具-题库-题库主页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -37,6 +37,7 @@ class QuestionBankIndex extends Component {
>
<div className="sider">
<CourseCategorySiderTree
fromModule="index"
getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
currentTotal={this.state.currentTotal}
updatedCategoryId={this.state.updatedCategoryId}
......
src/modules/teach-tool/question-bank/components/QuestionManageContent.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 16:21:50
* @LastEditTime: 2021-03-30 19:33:39
* @Description: 助学工具-题库-列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -77,8 +77,8 @@ class QuestionManageContent extends Component {
userId: User.getStoreUserId(),
},
dataSource: [], // 题库列表
QuestionPreviewModal: null, // 题目预览模态框
BatchImportQuestionModal: null, // 批量导入模态框
questionPreviewModal: null, // 题目预览模态框
batchImportQuestionModal: null, // 批量导入模态框
};
}
......@@ -86,10 +86,7 @@ class QuestionManageContent extends Component {
let { selectedCategoryId } = nextProps;
const _query = this.state.query;
if (this.props.selectedCategoryId !== selectedCategoryId) {
if (selectedCategoryId === "null") {
selectedCategoryId = null;
}
_query.categoryId = selectedCategoryId;
_query.categoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
_query.questionName = null;
_query.questionType = null;
_query.current = 1;
......@@ -214,11 +211,10 @@ class QuestionManageContent extends Component {
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
overlayClassName="tool-list"
overlayClassName="aid-tool-list"
title={
<div style={{ maxWidth: 700, width: "auto" }}>{handleVal}</div>
}
......@@ -324,12 +320,12 @@ class QuestionManageContent extends Component {
id={id}
close={() => {
this.setState({
QuestionPreviewModal: null,
questionPreviewModal: null,
});
}}
/>
);
this.setState({ QuestionPreviewModal: m });
this.setState({ questionPreviewModal: m });
};
// 编辑题目
......@@ -393,14 +389,14 @@ class QuestionManageContent extends Component {
const m = (
<BatchImportQuestionModal
close={() => {
this.setState({ BatchImportQuestionModal: null }, () => {
this.setState({ batchImportQuestionModal: null }, () => {
this.queryQuestionPageList();
});
}}
categoryId={categoryId}
/>
);
this.setState({ BatchImportQuestionModal: m });
this.setState({ batchImportQuestionModal: m });
};
render() {
......@@ -408,8 +404,8 @@ class QuestionManageContent extends Component {
dataSource = [],
total,
query,
QuestionPreviewModal,
BatchImportQuestionModal,
questionPreviewModal,
batchImportQuestionModal,
} = this.state;
const { current, size, categoryId, questionName, questionType } = query;
return (
......@@ -514,8 +510,8 @@ class QuestionManageContent extends Component {
/>
</div>
)}
{QuestionPreviewModal}
{BatchImportQuestionModal}
{questionPreviewModal}
{batchImportQuestionModal}
</div>
</div>
);
......
src/modules/teach-tool/question-bank/components/QuestionManageContent.less
......@@ -68,7 +68,7 @@
}
}
}
.tool-list {
.aid-tool-list {
.ant-tooltip-inner {
max-width: 700px !important;
}
......
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