Skip to content

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

fix:路由调整为2级，试卷样式调整

parent e70744c5
Showing with 419 additions and 311 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-04-01 20:10:29
* @LastEditTime: 2021-04-07 10:09:18
* @Description: 助学工具-课程分类
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -40,7 +40,7 @@ class CourseCategoryManage extends Component {
}
componentDidMount() {
this.queryCategoryTree("search");
this.queryCategoryTree("init");
}
getWholeTree = () => {
......@@ -112,7 +112,7 @@ class CourseCategoryManage extends Component {
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
if (operateType === "search") {
if (operateType === "init") {
this.setState({ expandedKeys: nodeId });
}
}
......@@ -127,7 +127,7 @@ class CourseCategoryManage extends Component {
};
categoryList.unshift(defaultNode);
this.setState({ treeData: this.renderTreeNodes(categoryList, categoryName) });
if (operateType === "search") {
if (operateType === "init") {
this.setState({ expandedKeys: [] });
}
}
......@@ -304,7 +304,7 @@ class CourseCategoryManage extends Component {
title={title}
label={label}
close={() => {
this.queryCategoryTree("change", this.state.categoryName);
this.queryCategoryTree("remain", this.state.categoryName);
this.setState({
operateCourseCategoryModal: null,
});
......@@ -335,7 +335,7 @@ class CourseCategoryManage extends Component {
AidToolService.delCategory(params).then((res) => {
if (res.success) {
message.success("删除分类成功");
this.queryCategoryTree("change", this.state.categoryName);
this.queryCategoryTree("remain", this.state.categoryName);
}
});
},
......@@ -552,7 +552,7 @@ class CourseCategoryManage extends Component {
userId: User.getStoreUserId(),
};
AidToolService.editCategoryTree(params).then((res) => {
this.queryCategoryTree("change");
this.queryCategoryTree("remain");
});
};
......@@ -606,7 +606,7 @@ class CourseCategoryManage extends Component {
<Search
placeholder="请输入名称"
style={{ width: "300px" }}
onSearch={(value) => this.queryCategoryTree("search", value)}
onSearch={(value) => this.queryCategoryTree("init", value)}
className="search-input"
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
......
src/modules/teach-tool/components/CourseCategoryManage.less
.course-category-manage {
position: relative;
.search-condition {
width: 30%;
margin-bottom: 16px;
.search-label {
vertical-align: middle;
......
src/modules/teach-tool/components/CourseCategorySiderTree.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-22 10:59:43
* @LastEditors: yuananting
* @LastEditTime: 2021-04-01 14:15:23
* @LastEditTime: 2021-04-07 12:19:27
* @Description: 助学工具-侧边课程分类树
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -11,6 +11,7 @@ import { Input, Button, Tree } from "antd";
import "./CourseCategorySiderTree.less";
import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import Bus from "@/core/bus";
const { Search } = Input;
const { DirectoryTree } = Tree;
......@@ -28,28 +29,16 @@ class CourseCategorySiderTree extends Component {
}
componentDidMount() {
this.queryCategoryTree("change");
this.props.getSelectedCategoryId(
["QUESTION_INDEX", "PAPER_INDEX"].includes(this.props.fromModule)
? [getParameterByName("categoryId") || "null"]
: ["null"]
);
this.queryCategoryTree("init");
Bus.bind("queryCategoryTree", this.queryCategoryTree);
}
shouldComponentUpdate(nextProps, nextState) {
const { currentTotal, updatedCategoryId } = nextProps;
if (
["QUESTION_INDEX", "PAPER_INDEX"].includes(this.props.fromModule) &&
this.props.currentTotal !== currentTotal &&
this.props.updatedCategoryId === updatedCategoryId
) {
this.queryCategoryTree("remain");
}
return true;
componentWillUnmount() {
Bus.unbind("queryCategoryTree", this.queryCategoryTree);
}
// 查询分类树
queryCategoryTree = (type, categoryName) => {
queryCategoryTree = (type = "init", categoryName) => {
let query = {
bizType: ["QUESTION_INDEX", "QUESTION_MODAL"].includes(
this.props.fromModule
......@@ -75,7 +64,7 @@ class CourseCategorySiderTree extends Component {
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
if (type === "change") {
if (type === "init") {
this.setState({ expandedKeys: nodeId });
}
} else {
......@@ -94,7 +83,7 @@ class CourseCategorySiderTree extends Component {
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
if (type === "change") {
if (type === "init") {
this.setState({ expandedKeys: nodeId });
}
}
......@@ -111,7 +100,7 @@ class CourseCategorySiderTree extends Component {
this.setState({
treeData: this.renderTreeNodes(categoryList, categoryName),
});
if (type === "change") {
if (type === "init") {
this.setState({ expandedKeys: [] });
}
}
......@@ -136,8 +125,15 @@ class CourseCategorySiderTree extends Component {
// 树状选中事件
onSelect = (selectedKeys) => {
this.setState({ selectedKeys });
this.props.getSelectedCategoryId(selectedKeys);
this.setState({ selectedKeys }, () => {
if (this.props.fromModule === "QUESTION_INDEX") {
Bus.trigger("queryQuestionPageList", selectedKeys[0]);
} else if (this.props.fromModule === "QUESTION_MODAL") {
Bus.trigger("queryQuestionModalList", selectedKeys[0]);
} else {
Bus.trigger("queryPaperPageList", selectedKeys[0]);
}
});
};
// 树节点渲染-内容处理
......@@ -214,12 +210,13 @@ class CourseCategorySiderTree extends Component {
className="sider-search"
placeholder="搜索名称分类"
onSearch={(value) => {
this.queryCategoryTree("change", value);
this.queryCategoryTree("init", value);
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
{["QUESTION_INDEX", "PAPER_INDEX"].includes(this.props.fromModule) &&
User.getUserRole() !== "CloudLecturer" && (this.props.type !== 'modal-select') && (
User.getUserRole() !== "CloudLecturer" &&
this.props.type !== "modal-select" && (
<div className="sider-btn">
<Button
onClick={() => {
......
src/modules/teach-tool/paper-manage/OperatePaper.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-27 16:15:13
* @LastEditors: yuananting
* @LastEditTime: 2021-04-06 14:03:49
* @LastEditTime: 2021-04-07 12:56:49
* @Description: 助学工具-新建/复制/编辑试卷
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -27,6 +27,7 @@ import SelectQuestionModal from "./modal/SelectQuestionModal";
import PaperPreviewModal from "./modal/PreviewPaperModal";
import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import Bus from "@/core/bus";
const questionTypeEnum = {
SINGLE_CHOICE: "单选题",
......@@ -294,6 +295,7 @@ class OperatePaper extends Component {
try {
await this.formRef.current.validateFields();
const { selectQuestionList, formData, currentOperate } = this.state;
const categoryId = getParameterByName("categoryId");
let questionList = [];
selectQuestionList.forEach((item, index) => {
questionList.push({
......@@ -320,10 +322,10 @@ class OperatePaper extends Component {
currentOperate === "new" ? "新建成功" : "复制成功"
);
window.RCHistory.push({
pathname: `/paper-manage-index?categoryId=${getParameterByName(
"categoryId"
)}`,
pathname: `/paper-manage-index?categoryId=${categoryId}`,
});
Bus.trigger("queryPaperPageList", categoryId);
Bus.trigger("queryCategoryTree", "remain");
}
});
} else if (currentOperate === "edit") {
......@@ -338,6 +340,7 @@ class OperatePaper extends Component {
"categoryId"
)}`,
});
Bus.trigger("queryPaperPageList", categoryId);
}
});
}
......@@ -446,7 +449,7 @@ class OperatePaper extends Component {
value: "INDEFINITE_CHOICE",
},
],
filterMultiple: false,
filterMultiple: true,
onFilter: (value, record) => record.questionType.indexOf(value) === 0,
render: (val) => questionTypeEnum[val],
},
......@@ -478,7 +481,10 @@ class OperatePaper extends Component {
{
title: (
<Tooltip title="多选题和填空题的漏选/半对得分不能高于题目本身分值">
分值
分值{" "}
<span className="icon iconfont" style={{ color: "#BFBFBF" , fontSize: 14 }}>
&#xe7c4;
</span>
</Tooltip>
),
dataIndex: "score",
......@@ -591,10 +597,6 @@ class OperatePaper extends Component {
};
render() {
const formItemLayout = {
labelCol: { span: 2 },
wrapperCol: { span: 22 },
};
const {
selectQuestionModal,
paperPreviewModal,
......@@ -628,11 +630,7 @@ class OperatePaper extends Component {
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
</div>
<Form
ref={this.formRef}
{...formItemLayout}
style={{ marginTop: 32 }}
>
<Form ref={this.formRef} style={{ marginTop: 24 }}>
<Form.Item
name="paperName"
label="试卷名称："
......@@ -657,6 +655,7 @@ class OperatePaper extends Component {
value={paperName}
autoComplete="off"
maxLength={40}
style={{ width: 300 }}
placeholder="请输入试卷名称（40字以内）"
onChange={(e) => {
this.setState({
......@@ -705,33 +704,43 @@ class OperatePaper extends Component {
/>
</Form.Item>{" "}
%
<span style={{ marginLeft: 20 }}>
<span className="score-info">
总分（{totalScore}）*及格线（{passRate || 0}%）=及格分数（
{passScore}）
</span>
</div>
</Form.Item>
<Button icon={<PlusOutlined />} onClick={this.chooseQuestion}>
<Button
className="choose-btn"
type="primary"
icon={<PlusOutlined />}
onClick={this.chooseQuestion}
>
自选题目
</Button>
<div style={{ margin: "10px 0 20px" }}>
总计{totalScore}分，共{questionCnt}题。{" "}
{singleChoiceCnt > 0 &&
`单选题${singleChoiceCnt}题，共${singleChoiceScore}分；`}
{multiChoiceCnt > 0 &&
`多选题${multiChoiceCnt}题，共${multiChoiceScore}分；`}
{judgeCnt > 0 && `判断题${judgeCnt}题，共${judgeScore}分，`}
{gapFillingCnt > 0 &&
`填空题${gapFillingCnt}题，共${gapFillingScore}分，`}
{indefiniteChoiceCnt > 0 &&
`不定项选择题${indefiniteChoiceCnt}题，共${indefiniteChoiceScore}分`}
</div>
{questionCnt > 0 && (
<div className="paper-info-tip" style={{ margin: "0 auto 12px" }}>
总计<span>{totalScore}</span>分，共<span>{questionCnt}</span>
题。{" "}
{singleChoiceCnt > 0 &&
`单选题${singleChoiceCnt}题，共${singleChoiceScore}分；`}
{multiChoiceCnt > 0 &&
`多选题${multiChoiceCnt}题，共${multiChoiceScore}分；`}
{judgeCnt > 0 && `判断题${judgeCnt}题，共${judgeScore}分，`}
{gapFillingCnt > 0 &&
`填空题${gapFillingCnt}题，共${gapFillingScore}分，`}
{indefiniteChoiceCnt > 0 &&
`不定项选择题${indefiniteChoiceCnt}题，共${indefiniteChoiceScore}分`}
</div>
)}
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
<Table
scroll={{ y: 350 }}
columns={this.parseColumns()}
dataSource={selectQuestionList}
bordered
pagination={false}
/>
</ConfigProvider>
......
src/modules/teach-tool/paper-manage/OperatePaper.less
.operate-paper-page {
position: relative !important;
.box {
margin-bottom: 66px !important;
.ant-tabs {
color: #666666;
}
.score-info {
color: #999999;
margin-left: 12px;
}
.choose-btn {
margin-top: 8px;
margin-bottom: 12px;
}
.paper-info-tip {
height: 20px;
color: #999999;
line-height: 20px;
span {
color: #FFB714;
}
}
.record-operate {
display: flex;
......@@ -18,7 +33,7 @@
}
}
&__ban {
color: gray;
color: #CCCCCC;
pointer-events: none;
}
}
......
src/modules/teach-tool/paper-manage/PaperContent.jsx
......@@ -2,59 +2,44 @@
* @Author: yuananting
* @Date: 2021-03-27 14:55:14
* @LastEditors: yuananting
* @LastEditTime: 2021-04-01 14:00:47
* @LastEditTime: 2021-04-07 10:25:44
* @Description: 助学工具-试卷主页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import "./PaperContent.less"
import "./PaperContent.less";
import CourseCategorySiderTree from "../components/CourseCategorySiderTree";
import PaperList from "./components/PaperList";
class PaperContent extends Component {
constructor(props) {
super(props);
this.state = {};
}
constructor(props) {
super(props);
this.state = {};
}
getCategoryIdFromSider = (selectedCategoryId) => {
if (selectedCategoryId && selectedCategoryId.length > 0) {
this.setState({ selectedCategoryId: selectedCategoryId[0] });
}
};
updatedSiderTreeFromList = (currentTotal, updatedCategoryId) => {
this.setState({ currentTotal, updatedCategoryId });
};
render() {
return (
<div className='paper-content-page'>
<div
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
>
<div className="sider">
<CourseCategorySiderTree
type={this.props.type}
fromModule="PAPER_INDEX"
getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
currentTotal={this.state.currentTotal}
updatedCategoryId={this.state.updatedCategoryId}
/>
</div>
</div>
<div className="content">
<PaperList
paperId={this.props.paperId}
onSelect={this.props.onSelect}
type={this.props.type}
updatedSiderTree={this.updatedSiderTreeFromList.bind(this)}
selectedCategoryId={this.state.selectedCategoryId}
/>
</div>
</div>
);
}
render() {
return (
<div className="paper-content-page">
<div
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
>
<div className="sider">
<CourseCategorySiderTree
type={this.props.type}
fromModule="PAPER_INDEX"
/>
</div>
</div>
<div className="content">
<PaperList
type={this.props.type}
paperId={this.props.paperId}
onSelect={this.props.onSelect}
/>
</div>
</div>
);
}
}
export default PaperContent;
src/modules/teach-tool/paper-manage/components/PaperList.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-04-06 14:36:06
* @LastEditTime: 2021-04-07 15:30:00
* @Description: 助学工具-题库-试卷列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -26,6 +26,9 @@ import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import _ from "underscore";
import PaperPreviewModal from "../modal/PreviewPaperModal";
import { Route, withRouter } from 'react-router-dom';
import OperatePaper from "../OperatePaper";
import Bus from "@/core/bus";
const { Search } = Input;
......@@ -48,27 +51,36 @@ class PaperList extends Component {
};
}
shouldComponentUpdate(nextProps, nextState) {
let { selectedCategoryId } = nextProps;
const _query = this.state.query;
if (this.props.selectedCategoryId !== selectedCategoryId) {
_query.categoryId =
selectedCategoryId === "null" ? null : selectedCategoryId;
_query.paperName = null;
_query.current = 1;
this.setState({ query: _query }, () => this.queryPaperPageList());
}
return true;
componentDidMount() {
this.queryPaperPageList();
Bus.bind('queryPaperPageList', (selectedCategoryId) => {
selectedCategoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
this.InitSearch(selectedCategoryId)
})
}
componentWillUnmount() {
Bus.unbind('queryPaperPageList', this.queryPaperPageList)
}
// 初始化列表查询
InitSearch = (categoryId) => {
const _query = {
...this.state.query,
categoryId,
current: 1,
paperName: null, // 试卷名称
};
this.setState({ query: _query }, () => {
this.queryPaperPageList();
});
};
// 查询试卷列表
queryPaperPageList = () => {
const _query = this.state.query;
AidToolService.queryPaperPageList(_query).then((res) => {
AidToolService.queryPaperPageList(this.state.query).then((res) => {
const { records = [], total = 0 } = res.result;
this.setState({ dataSource: records, total }, () =>
this.props.updatedSiderTree(total, this.props.selectedCategoryId)
);
this.setState({ dataSource: records, total });
});
};
......@@ -92,8 +104,9 @@ class PaperList extends Component {
// 复制试卷
copyPaper = (record) => {
const { categoryId } = this.state.query;
const { match } = this.props;
window.RCHistory.push({
pathname: `/paper-operate-page?type=copy&paperId=${record.paperId}&categoryId=${categoryId}`,
pathname: `${match.url}/paper-operate-page?type=copy&paperId=${record.paperId}&categoryId=${categoryId}`,
});
};
......@@ -101,8 +114,9 @@ class PaperList extends Component {
editPaper = (record) => {
if (record.relatedExam === 0) {
const { categoryId } = this.state.query;
const { match } = this.props;
window.RCHistory.push({
pathname: `/paper-operate-page/operate?type=edit&paperId=${record.paperId}&categoryId=${categoryId}`,
pathname: `${match.url}/paper-operate-page/operate?type=edit&paperId=${record.paperId}&categoryId=${categoryId}`,
});
} else {
return Modal.info({
......@@ -137,7 +151,10 @@ class PaperList extends Component {
_query.current = 1;
}
}
this.setState({ query: _query }, () => this.queryPaperPageList());
this.setState({ query: _query }, () => {
this.queryPaperPageList();
Bus.trigger("queryCategoryTree", "remain");
});
}
});
} else {
......@@ -172,9 +189,9 @@ class PaperList extends Component {
title: "试卷",
key: "paperName",
dataIndex: "paperName",
// ellipsis: {
// showTitle: false,
// },
ellipsis: {
showTitle: false,
},
render: (val, record) => {
var handleVal = val;
handleVal = handleVal.replace(/<(?!img|input).*?>/g, "");
......@@ -198,7 +215,7 @@ class PaperList extends Component {
title: "及格分/总分",
key: "score",
dataIndex: "score",
width: this.props.type !== "modal-select" ? "16%" : "24%",
render: (val, record) => {
return (
<span>
......@@ -211,11 +228,15 @@ class PaperList extends Component {
title: "题目数量",
key: "questionCnt",
dataIndex: "questionCnt",
width: this.props.type !== "modal-select" ? "12%" : "20%",
align: "right",
},
{
title: "关联考试数",
key: "relatedExam",
dataIndex: "relatedExam",
width: this.props.type !== "modal-select" ? "16%" : "24%",
align: "right",
},
];
......@@ -300,7 +321,7 @@ class PaperList extends Component {
onChange: this.onSelectChange,
};
const isPermiss = ["CloudManager", "StoreManager"].includes(User.getUserRole())
const { match } = this.props;
return (
<div className={"paper-list " + this.props.type}>
<div className="paper-list-filter">
......@@ -311,7 +332,7 @@ class PaperList extends Component {
<Search
placeholder="搜索试卷名称"
value={paperName}
style={{ width: 200 }}
style={{ width: 177 }}
onChange={(e) => {
this.setState({
query: {
......@@ -336,7 +357,7 @@ class PaperList extends Component {
type="primary"
onClick={() => {
window.RCHistory.push({
pathname: `/paper-operate-page?type=new&categoryId=${categoryId}`,
pathname: `${match.url}/paper-operate-page?type=new&categoryId=${categoryId}`,
});
}}
>
......@@ -390,9 +411,10 @@ class PaperList extends Component {
)}
{paperPreviewModal}
</div>
<Route path={`${match.url}/paper-operate-page`} component={OperatePaper} />
</div>
);
}
}
export default PaperList;
export default withRouter(PaperList);
src/modules/teach-tool/paper-manage/components/PaperList.less
......@@ -9,8 +9,6 @@
flex-wrap: wrap;
&__item {
width: 30%;
margin-right: 3%;
margin-bottom: 16px;
.search-label {
vertical-align: middle;
......
src/modules/teach-tool/paper-manage/components/SelectQuestionList.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-03-30 18:36:32
* @LastEditTime: 2021-04-07 15:17:55
* @Description: 助学工具-新建试卷-选择题目列表
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -22,6 +22,7 @@ import "./SelectQuestionList.less";
import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import _ from "underscore";
import Bus from "@/core/bus";
const { Search } = Input;
......@@ -76,25 +77,35 @@ class SelectQuestionList extends Component {
};
}
componentDidMount() {}
componentDidMount() {
this.queryQuestionModalList()
Bus.bind('queryQuestionModalList', (selectedCategoryId) => {
selectedCategoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
this.InitSearch(selectedCategoryId)
})
}
shouldComponentUpdate(nextProps, nextState) {
let { selectedCategoryId } = nextProps;
const _query = this.state.query;
if (this.props.selectedCategoryId !== selectedCategoryId) {
_query.categoryId =
selectedCategoryId === "null" ? null : selectedCategoryId;
_query.questionName = null;
_query.questionType = null;
_query.current = 1;
this.setState({ query: _query }, () => this.queryQuestionPageList());
}
return true;
componentWillUnmount() {
Bus.unbind('queryQuestionModalList', this.queryQuestionModalList)
}
queryQuestionPageList = () => {
const _query = this.state.query;
AidToolService.queryQuestionPageList(_query).then((res) => {
// 初始化列表查询
InitSearch = (categoryId) => {
const _query = {
...this.state.query,
categoryId,
current: 1,
order: "UPDATED_DESC", // 排序规则
questionName: null, // 题目名称
questionType: null, // 题目类型
};
this.setState({ query: _query }, () => {
this.queryQuestionModalList();
});
};
queryQuestionModalList = () => {
AidToolService.queryQuestionPageList(this.state.query).then((res) => {
const { records = [], total = 0 } = res.result;
this.setState({ dataSource: records, total });
});
......@@ -110,7 +121,7 @@ class SelectQuestionList extends Component {
questionType: null, // 题目类型
};
this.setState({ query: _query }, () => {
this.queryQuestionPageList();
this.queryQuestionModalList();
});
};
......@@ -184,7 +195,7 @@ class SelectQuestionList extends Component {
}
let _query = this.state.query;
_query.size = size;
this.setState({ query: _query }, () => this.queryQuestionPageList());
this.setState({ query: _query }, () => this.queryQuestionModalList());
};
// 改变搜索条件
......@@ -199,7 +210,7 @@ class SelectQuestionList extends Component {
},
() => {
if (searchType === "questionName") return;
this.queryQuestionPageList();
this.queryQuestionModalList();
}
);
};
......@@ -297,12 +308,12 @@ class SelectQuestionList extends Component {
<Search
placeholder="搜索题目名称"
value={questionName}
style={{ width: "calc(100% - 84px)" }}
style={{ width: 178 }}
onChange={(e) => {
this.handleChangeQuery("questionName", e.target.value);
}}
onSearch={() => {
this.queryQuestionPageList();
this.queryQuestionModalList();
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
......@@ -313,7 +324,7 @@ class SelectQuestionList extends Component {
<Select
placeholder="请选择题目类型"
value={questionType}
style={{ width: "calc(100% - 70px)" }}
style={{ width: 178 }}
showSearch
allowClear
enterButton={<span className="icon iconfont">&#xe832;</span>}
......@@ -355,14 +366,14 @@ class SelectQuestionList extends Component {
<div className="select-tip-box">
<div>
<span className="icon iconfont tip-icon">&#xe61d;</span>
<span>已选{selectQuestionKeys.length}题</span>
<span style={{marginRight: 8}}>已选<span style={{color: "#FFB714"}}>{selectQuestionKeys.length}</span>题</span>
{selectQuestionKeys.length > 0 && (
<span>
{singleCount > 0 && `、单选题${singleCount}题`}
<span>(
{singleCount > 0 && `单选题${singleCount}题`}
{multiCount > 0 && `、多选题${multiCount}题`}
{judgeCount > 0 && `、判断题${judgeCount}题`}
{gapCount > 0 && `、填空题${gapCount}题`}
{indefiniteCount > 0 && `、不定项选择题${indefiniteCount}题`}
{indefiniteCount > 0 && `、不定项选择题${indefiniteCount}题`})
</span>
)}
</div>
......@@ -389,7 +400,7 @@ class SelectQuestionList extends Component {
toPage={(page) => {
const _query = { ...query, current: page + 1 };
this.setState({ query: _query }, () =>
this.queryQuestionPageList()
this.queryQuestionModalList()
);
}}
showSizeChanger={true}
......
src/modules/teach-tool/paper-manage/components/SelectQuestionList.less
......@@ -8,7 +8,6 @@
flex-wrap: wrap;
&__item {
width: 30%;
margin-right: 3%;
margin-bottom: 16px;
.search-label {
......@@ -71,7 +70,6 @@
background: #fff4dd;
border-radius: 4px;
padding: 6px 16px;
margin-right: 8px;
display: flex;
justify-content: space-between;
.tip-icon {
......
src/modules/teach-tool/paper-manage/modal/PreviewPaperModal.jsx
......@@ -2,12 +2,12 @@
* @Author: yuananting
* @Date: 2021-03-27 11:15:03
* @LastEditors: yuananting
* @LastEditTime: 2021-04-02 15:07:17
* @LastEditTime: 2021-04-07 15:09:31
* @Description: 助学工具-试卷-预览试卷
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import { Modal } from "antd";
import { Modal, ConfigProvider, Empty } from "antd";
import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import "./PreviewPaperModal.less";
......@@ -56,7 +56,7 @@ class PreviewPaperModal extends Component {
});
};
// 查看图片或视频
// 查看图片
handleScanFile = (scanFileType, scanFileAddress) => {
this.setState({
showScanFile: true,
......@@ -83,13 +83,14 @@ class PreviewPaperModal extends Component {
disabled
correctAnswerList=""
id=${window.random_string(16)}
value="填空"
value=" "
/>`
);
content = content.replace(/value="填空"/g, "value=' '");
}
let textDom = (
<span
<div
key={0}
className="input-box"
dangerouslySetInnerHTML={{
......@@ -99,12 +100,15 @@ class PreviewPaperModal extends Component {
);
return (
<div className="stem-line__item">
<div className="stem-line-item">
<div className="text">
<span>{questionIndex + 1}.</span>
<span>【{questionTypeList[questionType]}】</span>
<div className="question-tip">
<span className="question-sort">第{questionIndex + 1}题</span>
<span className="question-type-score">
({questionTypeList[questionType]} | {score}分)
</span>
</div>
{textDom}
<span>（{score}分）</span>
</div>
{this.renderMediaContent(mediaContent)}
</div>
......@@ -133,9 +137,9 @@ class PreviewPaperModal extends Component {
/>
);
return (
<div className="option-line__item">
<div className="option-line-item">
<div className="text">
{NUM_TO_WORD_MAP[optionSort]}. {textDom}
{NUM_TO_WORD_MAP[optionSort]}: {textDom}
</div>
{mediaContent.length > 0 && this.renderMediaContent(mediaContent)}
</div>
......@@ -147,29 +151,44 @@ class PreviewPaperModal extends Component {
if (questionType === "GAP_FILLING") {
{
return (
<div className="answer-line__item">
<span>正确答案</span>
<div className="answer-line-item">
<div style={{ marginBottom: 8 }}>正确答案: </div>
{_.map(gapFillingAnswerList, (gapItem, gapIndex) => {
const { correctAnswerList } = gapItem;
return (
<div className="gap-list">
<span>【填空{gapIndex + 1}】</span>
{_.map(correctAnswerList, (answerItem) => {
return <span>{answerItem}</span>;
<span>[填空{gapIndex + 1}] </span>
{_.map(correctAnswerList, (answerItem, answerIndex) => {
return (
<span>
{answerItem}
{answerIndex < correctAnswerList.length - 1 && (
<span>、</span>
)}
</span>
);
})}
<span>; </span>
</div>
);
})}
</div>
)
);
}
} else {
const correctAnswerOption = _.filter(optionList, (item) => item.isCorrectAnswer === 1);
const correctOptionSort = correctAnswerOption.map((item) => { return NUM_TO_WORD_MAP[item.optionSort] });
const correctAnswerOption = _.filter(
optionList,
(item) => item.isCorrectAnswer === 1
);
const correctOptionSort = correctAnswerOption.map((item) => {
return NUM_TO_WORD_MAP[item.optionSort];
});
return (
<div className="answer-line__item">
<span>正确答案</span>
<span>【{correctOptionSort.length > 0 && correctOptionSort.join("、")}】</span>
<div className="answer-line-item">
<div style={{ marginBottom: 8 }}>正确答案: </div>
<span style={{ lineHeight: "20px", color: "#666666" }}>
{correctOptionSort.length > 0 && correctOptionSort.join("、")}
</span>
</div>
);
}
......@@ -231,8 +250,21 @@ class PreviewPaperModal extends Component {
);
};
// 自定义空状态
customizeRenderEmpty = () => {
return (
<Empty
image="https://image.xiaomaiketang.com/xm/emptyTable.png"
imageStyle={{
height: 100,
}}
description={"暂无内容"}
></Empty>
);
};
render() {
const { paperInfo } = this.state;
const { paperInfo, showScanFile, scanFileType, scanFileAddress } = this.state;
const { paperName, questionList } = paperInfo;
return (
<div>
......@@ -245,37 +277,52 @@ class PreviewPaperModal extends Component {
footer={null}
onCancel={this.props.close}
>
<h2 style={{ textAlign: "center" }}>{paperName}</h2>
<div className="question-list-box">
{_.map(questionList, (questionItem, questionIndex) => {
const {
questionStemList,
optionList,
gapFillingAnswerList,
questionType,
score,
} = questionItem;
return (
<div className="question-info-item">
{this.renderStem(
questionStemList,
questionType,
score,
questionIndex
)}
{_.map(optionList, (optionItem, optionIndex) => {
return this.renderOption(optionItem, questionType);
})}
{this.renderAnswer(
optionList,
gapFillingAnswerList,
questionType
)}
</div>
);
})}
</div>
<div className="paper-title">{paperName}</div>
{questionList && questionList.length > 0 ? (
<div className="question-list-box">
{_.map(questionList, (questionItem, questionIndex) => {
const {
questionStemList,
optionList,
gapFillingAnswerList,
questionType,
score,
} = questionItem;
return (
<div className="question-info-item">
{this.renderStem(
questionStemList,
questionType,
score,
questionIndex
)}
{_.map(optionList, (optionItem, optionIndex) => {
return this.renderOption(optionItem, questionType);
})}
{this.renderAnswer(
optionList,
gapFillingAnswerList,
questionType
)}
</div>
);
})}
</div>
) : (
this.customizeRenderEmpty()
)}
</Modal>
{showScanFile && (
<ScanFileModal
fileType={scanFileType}
item={{
ossAddress: scanFileAddress,
}}
close={() => {
this.setState({ showScanFile: false });
}}
/>
)}
</div>
);
}
......
src/modules/teach-tool/paper-manage/modal/PreviewPaperModal.less
.paper-preview-modal {
.paper-title {
width: 400px;
font-size: 19px;
font-weight: 500;
color: #333333;
line-height: 26px;
margin: 0 auto 24px;
text-align: center;
}
.question-list-box {
.question-info-item {
margin-bottom: 16px;
.stem-line {
margin-bottom: 16px;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 16px;
&__item {
font-size: 14px;
font-weight: 400;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e8e8e8;
.stem-line-item {
color: #666666;
margin-bottom: 20px;
.question-sort {
font-size: 16px;
font-weight: 500;
color: #333333;
margin-right: 4px;
}
.question-type-score {
color: #999999;
}
}
.option-line-item {
color: #666666;
margin-top: 12px;
line-height: 20px;
}
.answer-line-item {
color: #333333;
line-height: 20px;
margin-top: 20px;
.gap-list {
display: inline;
color: #666666;
margin-bottom: 16px;
line-height: 20px;
}
}
}
.text {
margin-bottom: 8px;
.input-box {
.question-tip {
margin-bottom: 8px;
}
.input-box {
color: #333333;
line-height: 20px;
* {
display: inline;
}
......@@ -40,6 +72,7 @@
align-items: center;
justify-content: center;
margin-right: 12px;
margin-top: 8px;
position: relative;
display: inline-flex;
border: 1px solid #e8e8e8;
......@@ -65,3 +98,9 @@
}
}
}
.paper-preview-modal.ant-modal {
max-height: 60% !important;
}
.paper-preview-modal.ant-modal .ant-modal-content .ant-modal-body {
min-height: 145px !important;
}
src/modules/teach-tool/paper-manage/modal/SelectQuestionModal.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-03-29 10:52:26
* @LastEditors: yuananting
* @LastEditTime: 2021-04-02 19:41:26
* @LastEditTime: 2021-04-07 15:23:06
* @Description: 助学工具-试卷-新建选择题目弹窗
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -31,19 +31,14 @@ class SelectQuestionModal extends Component {
);
}
getCategoryIdFromSider = (selectedCategoryId) => {
if (selectedCategoryId && selectedCategoryId.length > 0) {
this.setState({ selectedCategoryId: selectedCategoryId[0] });
}
};
render() {
return (
<Modal
className="select-question-modal"
destroyOnClose={true}
title="选择题目"
visible={true}
width={1200}
width={1080}
onOk={() => {
this.props.setSelectedQuestion(
this.listRef.current.state.selectQuestionKeys.map((item) => {
......@@ -62,24 +57,17 @@ class SelectQuestionModal extends Component {
);
}}
onCancel={this.props.close}
className="select-question-modal"
>
<div className="box content-body">
<div
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
>
<div className="sider">
<CourseCategorySiderTree
fromModule="QUESTION_MODAL"
getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
/>
<CourseCategorySiderTree fromModule="QUESTION_MODAL" />
</div>
</div>
<div className="content">
<SelectQuestionList
ref={this.listRef}
selectedCategoryId={this.state.selectedCategoryId}
/>
<SelectQuestionList ref={this.listRef} />
</div>
</div>
</Modal>
......
src/modules/teach-tool/paper-manage/modal/SelectQuestionModal.less
.select-question-modal {
.content-body {
display: flex;
.site-layout-background {
background: #fff;
}
.sider {
min-width: 244px;
}
......@@ -13,4 +10,10 @@
height: calc(100vh - 160px);
}
}
.ant-table-column-sorters {
padding: 0;
}
}
.select-question-modal.ant-modal {
max-height: 70% !important;
}
\ No newline at end of file
src/modules/teach-tool/question-manage/Index.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-21 17:51:01
* @LastEditors: yuananting
* @LastEditTime: 2021-04-01 14:10:41
* @LastEditTime: 2021-04-07 10:45:07
* @Description: 助学工具-题库
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -17,16 +17,6 @@ class QuestionIndex extends Component {
this.state = {};
}
getCategoryIdFromSider = (selectedCategoryId) => {
if (selectedCategoryId && selectedCategoryId.length > 0) {
this.setState({ selectedCategoryId: selectedCategoryId[0] });
}
};
updatedSiderTreeFromList = (currentTotal, updatedCategoryId) => {
this.setState({ currentTotal, updatedCategoryId });
};
render() {
return (
<div className="question-manage-index page">
......@@ -36,19 +26,11 @@ class QuestionIndex extends Component {
style={{ borderRight: "0.5px solid #EEEEEE", paddingRight: "4px" }}
>
<div className="sider">
<CourseCategorySiderTree
fromModule="QUESTION_INDEX"
getSelectedCategoryId={this.getCategoryIdFromSider.bind(this)}
currentTotal={this.state.currentTotal}
updatedCategoryId={this.state.updatedCategoryId}
/>
<CourseCategorySiderTree fromModule="QUESTION_INDEX" />
</div>
</div>
<div className="content">
<QuestionList
updatedSiderTree={this.updatedSiderTreeFromList.bind(this)}
selectedCategoryId={this.state.selectedCategoryId}
/>
<QuestionList />
</div>
</div>
</div>
......
src/modules/teach-tool/question-manage/OperateQuestion.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 13:46:35
* @LastEditors: yuananting
* @LastEditTime: 2021-03-29 20:24:01
* @LastEditTime: 2021-04-07 09:48:34
* @Description: 助学工具-题库-新建/编辑题目
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -19,6 +19,7 @@ import {
} from "../components/model";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import User from "@/common/js/user";
import Bus from '@/core/bus';
const { TabPane } = Tabs;
class OperateQuestion extends Component {
......@@ -248,6 +249,8 @@ class OperateQuestion extends Component {
window.RCHistory.push({
pathname: `/question-manage-index?categoryId=${categoryId}`,
});
Bus.trigger("queryCategoryTree", "remain")
Bus.trigger("queryQuestionPageList", categoryId)
}
}
});
......@@ -269,6 +272,8 @@ class OperateQuestion extends Component {
window.RCHistory.push({
pathname: `/question-manage-index?categoryId=${categoryId}`,
});
Bus.trigger("queryCategoryTree", "remain")
Bus.trigger("queryQuestionPageList", categoryId)
}
}
});
......
src/modules/teach-tool/question-manage/OperateQuestion.less
.operate-question-page {
position: relative !important;
.box {
margin-bottom: 66px !important;
.ant-tabs {
......
src/modules/teach-tool/question-manage/components/QuestionList.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 11:23:47
* @LastEditors: yuananting
* @LastEditTime: 2021-04-06 13:43:08
* @LastEditTime: 2021-04-07 12:07:44
* @Description: 助学工具-题库-题目列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -27,6 +27,9 @@ import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import _ from "underscore";
import PreviewQuestionModal from "../modal/PreviewQuestionModal";
import BatchImportQuestionModal from "../modal/BatchImportQuestionModal";
import { Route, withRouter } from 'react-router-dom';
import OperateQuestion from "../OperateQuestion";
import Bus from "@/core/bus";
const { Search } = Input;
......@@ -81,20 +84,33 @@ class QuestionList extends Component {
batchImportQuestionModal: null, // 批量导入模态框
};
}
componentDidMount() {
this.queryQuestionPageList()
Bus.bind('queryQuestionPageList', (selectedCategoryId) => {
selectedCategoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
this.InitSearch(selectedCategoryId)
})
}
shouldComponentUpdate(nextProps, nextState) {
let { selectedCategoryId } = nextProps;
const _query = this.state.query;
if (this.props.selectedCategoryId !== selectedCategoryId) {
_query.categoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
_query.questionName = null;
_query.questionType = null;
_query.current = 1;
this.setState({ query: _query }, () => this.queryQuestionPageList());
}
return true;
componentWillUnmount() {
Bus.unbind('queryQuestionPageList', this.queryQuestionPageList)
}
// 初始化列表查询
InitSearch = (categoryId) => {
const _query = {
...this.state.query,
categoryId,
current: 1,
order: "UPDATED_DESC", // 排序规则
questionName: null, // 题目名称
questionType: null, // 题目类型
};
this.setState({ query: _query }, () => {
this.queryQuestionPageList();
});
};
// 改变搜索条件
handleChangeQuery = (searchType, value) => {
this.setState(
......@@ -112,7 +128,7 @@ class QuestionList extends Component {
);
};
// 清空搜索条件
// 重置搜索条件
handleReset = () => {
const _query = {
...this.state.query,
......@@ -128,12 +144,9 @@ class QuestionList extends Component {
// 题库列表查询
queryQuestionPageList = () => {
const _query = this.state.query;
AidToolService.queryQuestionPageList(_query).then((res) => {
AidToolService.queryQuestionPageList(this.state.query).then((res) => {
const { records = [], total = 0 } = res.result;
this.setState({ dataSource: records, total }, () =>
this.props.updatedSiderTree(total, this.props.selectedCategoryId)
);
this.setState({ dataSource: records, total })
});
};
......@@ -330,8 +343,9 @@ class QuestionList extends Component {
// 编辑题目
editQuestion = (id, type) => {
const { categoryId } = this.state.query;
const { match } = this.props;
window.RCHistory.push({
pathname: `question-operate-page?id=${id}&type=${type}&categoryId=${categoryId}`,
pathname: `${match.url}/question-operate-page?id=${id}&type=${type}&categoryId=${categoryId}`,
});
};
......@@ -370,15 +384,19 @@ class QuestionList extends Component {
_query.current = 1;
}
}
this.setState({ query: _query }, () => this.queryQuestionPageList());
this.setState({ query: _query }, () => {
this.queryQuestionPageList();
Bus.trigger("queryCategoryTree", "remain");
});
}
});
};
// 创建题目-跳转新建页
handleCreateQuestion = () => {
const { match } = this.props;
window.RCHistory.push({
pathname: `question-operate-page?categoryId=${this.state.query.categoryId}`,
pathname: `${match.url}/question-operate-page?categoryId=${this.state.query.categoryId}`,
});
};
......@@ -390,6 +408,7 @@ class QuestionList extends Component {
close={() => {
this.setState({ batchImportQuestionModal: null }, () => {
this.queryQuestionPageList();
Bus.trigger("queryCategoryTree", "remain");
});
}}
categoryId={categoryId}
......@@ -407,6 +426,7 @@ class QuestionList extends Component {
batchImportQuestionModal,
} = this.state;
const { current, size, categoryId, questionName, questionType } = query;
const { match } = this.props;
return (
<div className="question-list">
<div className="question-list-filter">
......@@ -417,7 +437,7 @@ class QuestionList extends Component {
<Search
placeholder="搜索题目名称"
value={questionName}
style={{ width: "calc(100% - 84px)" }}
style={{ width: 178 }}
onChange={(e) => {
this.handleChangeQuery("questionName", e.target.value);
}}
......@@ -433,7 +453,7 @@ class QuestionList extends Component {
<Select
placeholder="请选择题目类型"
value={questionType}
style={{ width: "calc(100% - 70px)" }}
style={{ width: 178 }}
showSearch
allowClear
enterButton={<span className="icon iconfont">&#xe832;</span>}
......@@ -512,9 +532,10 @@ class QuestionList extends Component {
{previewQuestionModal}
{batchImportQuestionModal}
</div>
<Route path={`${match.url}/question-operate-page`} component={OperateQuestion} />
</div>
);
}
}
export default QuestionList;
export default withRouter(QuestionList);
src/modules/teach-tool/question-manage/components/QuestionList.less
......@@ -8,7 +8,6 @@
flex-wrap: wrap;
&__item {
width: 30%;
margin-right: 3%;
margin-bottom: 16px;
.search-label {
......
src/routes/config/mainRoutes.tsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-04-29 10:26:32
* @LastEditors: yuananting
* @LastEditTime: 2021-03-27 16:54:14
* @LastEditTime: 2021-04-07 10:13:06
* @Description: 内容线路由配置
*/
import Home from '@/modules/home/Home';
......@@ -104,21 +104,11 @@ const mainRoutes = [
name: '题库'
},
{
path: '/question-operate-page',
component:OperateQuestion,
name: '操作题目'
},
{
path: '/paper-manage-index',
component:PaperManageIndex,
name: '试卷'
},
{
path: '/paper-operate-page',
component:OperatePaper,
name: '操作试卷'
},
{
path: '/examination-manage-index',
component:ExaminationManagerIndex,
name: '考试'
......
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