Skip to content

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

fix:loading

parent 0c8b67b7
Showing with 260 additions and 224 deletions
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-07 12:19:27
* @LastEditTime: 2021-04-10 10:59:32
* @Description: 助学工具-侧边课程分类树
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -131,7 +131,7 @@ class CourseCategorySiderTree extends Component {
} else if (this.props.fromModule === "QUESTION_MODAL") {
Bus.trigger("queryQuestionModalList", selectedKeys[0]);
} else {
Bus.trigger("queryPaperPageList", selectedKeys[0]);
Bus.trigger("queryPaperPageList", selectedKeys[0], false);
}
});
};
......
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-07 12:56:49
* @LastEditTime: 2021-04-10 11:04:26
* @Description: 助学工具-新建/复制/编辑试卷
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -18,6 +18,7 @@ import {
Tooltip,
message,
Modal,
Spin,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import ShowTips from "@/components/ShowTips";
......@@ -69,6 +70,7 @@ class OperatePaper extends Component {
currentOperate: "",
currentNav: "",
currentCategoryPapers: [],
loading: false,
};
}
......@@ -110,7 +112,8 @@ class OperatePaper extends Component {
};
// 编辑/复制试卷时获取相应试卷详情
queryPaperDetail = () => {
queryPaperDetail = async () => {
this.setState({ loading: true });
const { currentOperate } = this.state;
let query = {
paperId: getParameterByName("paperId"),
......@@ -118,29 +121,29 @@ class OperatePaper extends Component {
userId: User.getStoreUserId(),
tenantId: User.getStoreId(),
};
AidToolService.queryPaperDetail(query).then((res) => {
const { result } = res;
const { paperName, passRate } = result;
this.setState(
{
selectQuestionList: result.questionList.sort(
(a, b) => b.updateTime - a.updateTime
),
formData: {
...result,
paperName:
currentOperate === "copy" ? paperName + "（复制）" : paperName,
},
const res = await AidToolService.queryPaperDetail(query);
const { result } = res;
const { paperName, passRate } = result;
this.setState(
{
selectQuestionList: result.questionList.sort(
(a, b) => b.updateTime - a.updateTime
),
formData: {
...result,
paperName:
currentOperate === "copy" ? paperName + "（复制）" : paperName,
},
() => {
this.formRef.current.setFieldsValue({
paperName: this.state.formData.paperName,
passRate,
});
this.setFormData(result.questionList);
}
);
});
loading: false,
},
() => {
this.formRef.current.setFieldsValue({
paperName: this.state.formData.paperName,
passRate,
});
this.setFormData(result.questionList);
}
);
};
// 自定义表格空状态
......@@ -324,7 +327,7 @@ class OperatePaper extends Component {
window.RCHistory.push({
pathname: `/paper-manage-index?categoryId=${categoryId}`,
});
Bus.trigger("queryPaperPageList", categoryId);
Bus.trigger("queryPaperPageList", categoryId, true);
Bus.trigger("queryCategoryTree", "remain");
}
});
......@@ -340,7 +343,7 @@ class OperatePaper extends Component {
"categoryId"
)}`,
});
Bus.trigger("queryPaperPageList", categoryId);
Bus.trigger("queryPaperPageList", categoryId, true);
}
});
}
......@@ -482,7 +485,10 @@ class OperatePaper extends Component {
title: (
<Tooltip title="多选题和填空题的漏选/半对得分不能高于题目本身分值">
分值{" "}
<span className="icon iconfont" style={{ color: "#BFBFBF" , fontSize: 14 }}>
<span
className="icon iconfont"
style={{ color: "#BFBFBF", fontSize: 14 }}
>
&#xe7c4;
</span>
</Tooltip>
......@@ -603,6 +609,7 @@ class OperatePaper extends Component {
selectQuestionList,
currentNav,
formData,
loading,
} = this.state;
const {
singleChoiceCnt,
......@@ -626,133 +633,138 @@ class OperatePaper extends Component {
return (
<div className="page operate-paper-page">
<Breadcrumbs navList={currentNav} goBack={() => this.handleGoBack()} />
<div className="box">
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
</div>
<Form ref={this.formRef} style={{ marginTop: 24 }}>
<Form.Item
name="paperName"
label="试卷名称："
required
rules={[
{
required: true,
message: "请输入试卷名称",
},
({ getFieldValue }) => ({
validator(_, value) {
if (_that.checkExist(value)) {
return Promise.reject("该试卷名称已存在");
} else {
return Promise.resolve();
}
<Spin spinning={loading}>
<div className="box">
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
</div>
<Form ref={this.formRef} style={{ marginTop: 24 }}>
<Form.Item
name="paperName"
label="试卷名称："
required
rules={[
{
required: true,
message: "请输入试卷名称",
},
}),
]}
>
<Input
value={paperName}
autoComplete="off"
maxLength={40}
style={{ width: 300 }}
placeholder="请输入试卷名称（40字以内）"
onChange={(e) => {
this.setState({
formData: {
...formData,
paperName: e.target.value.trim(),
({ getFieldValue }) => ({
validator(_, value) {
if (_that.checkExist(value)) {
return Promise.reject("该试卷名称已存在");
} else {
return Promise.resolve();
}
},
});
}}
/>
</Form.Item>
<Form.Item label="及格线：" required>
<div>
<Form.Item
noStyle
initialValue={60}
name="passRate"
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (!value) {
return Promise.reject("请输入及格线");
} else {
return Promise.resolve();
}
}),
]}
>
<Input
value={paperName}
autoComplete="off"
maxLength={40}
style={{ width: 300 }}
placeholder="请输入试卷名称（40字以内）"
onChange={(e) => {
this.setState({
formData: {
...formData,
paperName: e.target.value.trim(),
},
}),
]}
>
<InputNumber
min={1}
max={100}
value={passRate}
onChange={(value) => {
this.setState(
{
formData: {
...formData,
passRate: value,
},
});
}}
/>
</Form.Item>
<Form.Item label="及格线：" required>
<div>
<Form.Item
noStyle
initialValue={60}
name="passRate"
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (!value) {
return Promise.reject("请输入及格线");
} else {
return Promise.resolve();
}
},
() => this.setFormData(selectQuestionList)
);
}}
/>
</Form.Item>{" "}
%
<span className="score-info">
总分（{totalScore}）*及格线（{passRate || 0}%）=及格分数（
{passScore}）
</span>
</div>
</Form.Item>
}),
]}
>
<InputNumber
min={1}
max={100}
value={passRate}
onChange={(value) => {
this.setState(
{
formData: {
...formData,
passRate: value,
},
},
() => this.setFormData(selectQuestionList)
);
}}
/>
</Form.Item>{" "}
%
<span className="score-info">
总分（{totalScore}）*及格线（{passRate || 0}%）=及格分数（
{passScore}）
</span>
</div>
</Form.Item>
<Button
className="choose-btn"
type="primary"
icon={<PlusOutlined />}
onClick={this.chooseQuestion}
>
自选题目
</Button>
{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>
)}
<Button
className="choose-btn"
type="primary"
icon={<PlusOutlined />}
onClick={this.chooseQuestion}
>
自选题目
</Button>
{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>
</Form>
</div>
<div className="footer">
<Button onClick={this.handleGoBack}>取消</Button>
<Button onClick={this.previewPaper}>预览</Button>
<Button type="primary" onClick={this.savePaper}>
保存
</Button>
</div>
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
<Table
scroll={{ y: 350 }}
columns={this.parseColumns()}
dataSource={selectQuestionList}
bordered
pagination={false}
/>
</ConfigProvider>
</Form>
</div>
<div className="footer">
<Button onClick={this.handleGoBack}>取消</Button>
<Button onClick={this.previewPaper}>预览</Button>
<Button type="primary" onClick={this.savePaper}>
保存
</Button>
</div>
</Spin>
{selectQuestionModal}
{paperPreviewModal}
</div>
......
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-08 10:03:45
* @LastEditTime: 2021-04-10 11:03:26
* @Description: 助学工具-题库-试卷列表数据
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -22,7 +22,7 @@ import {
} from "antd";
import { PageControl } from "@/components";
import "./PaperList.less";
import { Route, withRouter } from 'react-router-dom';
import { Route, withRouter } from "react-router-dom";
import OperatePaper from "@/modules/teach-tool/paper-manage/OperatePaper";
import User from "@/common/js/user";
import AidToolService from "@/domains/aid-tool-domain/AidToolService";
......@@ -48,23 +48,32 @@ class PaperList extends Component {
selectedRowKeys: [this.props.paperId],
dataSource: [],
paperPreviewModal: null, // 试卷预览模态框
loading: false,
};
}
componentDidMount() {
this.queryPaperPageList();
Bus.bind('queryPaperPageList', (selectedCategoryId) => {
selectedCategoryId = selectedCategoryId === "null" ? null : selectedCategoryId;
this.InitSearch(selectedCategoryId)
})
Bus.bind("queryPaperPageList", (selectedCategoryId, delay) => {
selectedCategoryId =
selectedCategoryId === "null" ? null : selectedCategoryId;
this.setState({ loading: true });
if (delay) {
setTimeout(() => {
this.InitSearch(selectedCategoryId);
}, 5000);
} else {
this.InitSearch(selectedCategoryId);
}
});
}
componentWillUnmount() {
Bus.unbind('queryPaperPageList', this.queryPaperPageList)
Bus.unbind("queryPaperPageList", this.queryPaperPageList);
}
// 初始化列表查询
InitSearch = (categoryId) => {
InitSearch = (categoryId, delay) => {
const _query = {
...this.state.query,
categoryId,
......@@ -77,11 +86,10 @@ class PaperList extends Component {
};
// 查询试卷列表
queryPaperPageList = () => {
AidToolService.queryPaperPageList(this.state.query).then((res) => {
const { records = [], total = 0 } = res.result;
this.setState({ dataSource: records, total });
});
queryPaperPageList = async () => {
const res = await AidToolService.queryPaperPageList(this.state.query);
const { records = [], total = 0 } = res.result;
this.setState({ dataSource: records, total, loading: false });
};
// 预览试卷
......@@ -112,8 +120,6 @@ class PaperList extends Component {
// 编辑试卷
editPaper = (record) => {
const { match } = this.props;
if (record.relatedExam === 0) {
const { categoryId } = this.state.query;
const { match } = this.props;
......@@ -158,7 +164,7 @@ class PaperList extends Component {
});
}
});
}
};
// 删除试卷确认
confirmDeletePaper = (record) => {
......@@ -249,45 +255,49 @@ class PaperList extends Component {
width: this.props.type !== "modal-select" ? "12%" : "20%",
align: "right",
render: (val, record) => {
return (
this.props.type !== "modal-select" ?
<span>
{record.questionCnt}
</span> :
<Tooltip
overlayClassName="tool-list"
title={
<div>
<div className="item">单选题:{record.singleChoiceCnt || 0}个</div>
<div className="item">多选题:{record.multiChoiceCnt || 0}个</div>
<div className="item">判断题:{record.judgeCnt || 0}个</div>
<div className="item">填空题:{record.gapFillingCnt || 0}个</div>
<div className="item">不定项选择题:{record.indefiniteChoiceCnt || 0}个</div>
return this.props.type !== "modal-select" ? (
<span>{record.questionCnt}</span>
) : (
<Tooltip
overlayClassName="tool-list"
title={
<div>
<div className="item">
单选题:{record.singleChoiceCnt || 0}个
</div>
}
placement="top"
overlayStyle={{ maxWidth: 700 }}
>
<span>
{record.questionCnt}
</span>
</Tooltip>
<div className="item">
多选题:{record.multiChoiceCnt || 0}个
</div>
<div className="item">判断题:{record.judgeCnt || 0}个</div>
<div className="item">
填空题:{record.gapFillingCnt || 0}个
</div>
<div className="item">
不定项选择题:{record.indefiniteChoiceCnt || 0}个
</div>
</div>
}
placement="top"
overlayStyle={{ maxWidth: 700 }}
>
<span>{record.questionCnt}</span>
</Tooltip>
);
},
},
];
if (this.props.type !== "modal-select") {
const isPermiss = ["CloudManager", "StoreManager"].includes(User.getUserRole());
const isPermiss = ["CloudManager", "StoreManager"].includes(
User.getUserRole()
);
columns.push({
title: "关联考试数",
key: "relatedExam",
dataIndex: "relatedExam",
width: this.props.type !== "modal-select" ? "16%" : "24%",
align: "right",
})
});
columns.push({
title: "操作",
key: "operate",
......@@ -302,17 +312,25 @@ class PaperList extends Component {
>
预览
</div>
{isPermiss && <span className="record-operate__item split"> | </span>}
{isPermiss && <div
className="record-operate__item"
onClick={() => this.copyPaper(record)}
>
复制
</div>}
{isPermiss && <span className="record-operate__item split"> | </span>}
{isPermiss && <Dropdown overlay={this.initDropMenu(record)}>
<div className="record-operate__item">更多</div>
</Dropdown>}
{isPermiss && (
<span className="record-operate__item split"> | </span>
)}
{isPermiss && (
<div
className="record-operate__item"
onClick={() => this.copyPaper(record)}
>
复制
</div>
)}
{isPermiss && (
<span className="record-operate__item split"> | </span>
)}
{isPermiss && (
<Dropdown overlay={this.initDropMenu(record)}>
<div className="record-operate__item">更多</div>
</Dropdown>
)}
</div>
);
},
......@@ -359,6 +377,7 @@ class PaperList extends Component {
query,
paperPreviewModal,
selectedRowKeys,
loading,
} = this.state;
const { current, size, categoryId, paperName } = query;
const rowSelection = {
......@@ -366,7 +385,9 @@ class PaperList extends Component {
selectedRowKeys,
onChange: this.onSelectChange,
};
const isPermiss = ["CloudManager", "StoreManager"].includes(User.getUserRole())
const isPermiss = ["CloudManager", "StoreManager"].includes(
User.getUserRole()
);
const { match } = this.props;
return (
<div className={"paper-list " + this.props.type}>
......@@ -397,19 +418,18 @@ class PaperList extends Component {
</div>
</Row>
</div>
{this.props.type !== "modal-select" && isPermiss &&
categoryId && (
<Button
type="primary"
onClick={() => {
window.RCHistory.push({
pathname: `${match.url}/paper-operate-page?type=new&categoryId=${categoryId}`,
});
}}
>
新建试卷
</Button>
)}
{this.props.type !== "modal-select" && isPermiss && categoryId && (
<Button
type="primary"
onClick={() => {
window.RCHistory.push({
pathname: `${match.url}/paper-operate-page?type=new&categoryId=${categoryId}`,
});
}}
>
新建试卷
</Button>
)}
<div className="paper-list-content">
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
......@@ -420,6 +440,7 @@ class PaperList extends Component {
columns={this.parseColumns()}
pagination={false}
bordered
loading={loading}
onChange={this.handleChangeTable}
/>
) : (
......@@ -457,7 +478,10 @@ class PaperList extends Component {
)}
{paperPreviewModal}
</div>
<Route path={`${match.url}/paper-operate-page`} component={OperatePaper} />
<Route
path={`${match.url}/paper-operate-page`}
component={OperatePaper}
/>
</div>
);
}
......
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-04-09 17:21:36
* @LastEditTime: 2021-04-10 09:34:35
* @Description: 助学工具-新建试卷-选择题目列表
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -64,7 +64,7 @@ class SelectQuestionList extends Component {
query: {
current: 1,
size: 10,
order: "ACCURACY_DESC",
order: "UPDATED_DESC",
categoryId: null, // 当前题库分类Id
questionName: null, // 题目名称
questionType: null, // 题目类型
......@@ -95,7 +95,7 @@ class SelectQuestionList extends Component {
...this.state.query,
categoryId,
current: 1,
order: "ACCURACY_DESC", // 排序规则
order: "UPDATED_DESC", // 排序规则
questionName: null, // 题目名称
questionType: null, // 题目类型
};
......@@ -107,7 +107,7 @@ class SelectQuestionList extends Component {
// 排序
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
let sort = null;
let sort = "UPDATED_DESC";
if (order === "ascend") {
sort = "ACCURACY_ASC";
}
......@@ -115,7 +115,7 @@ class SelectQuestionList extends Component {
sort = "ACCURACY_DESC";
}
const _query = this.state.query;
_query.order = sort || "ACCURACY_DESC";
_query.order = sort;
_query.current = 1;
this.setState({ query: _query }, () => this.queryQuestionModalList());
};
......@@ -132,7 +132,7 @@ class SelectQuestionList extends Component {
const _query = {
...this.state.query,
current: 1,
order: "ACCURACY_DESC", // 排序规则
order: "UPDATED_DESC", // 排序规则
questionName: null, // 题目名称
questionType: null, // 题目类型
};
......
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