educoder/public/react/src/modules/question/Question.js

672 lines
17 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React, {Component} from "react";
import {Link, NavLink} from 'react-router-dom';
import {WordsBtn, ActionBtn, SnackbarHOC, getImageUrl} from 'educoder';
import axios from 'axios';
import {
notification,
Spin,
Table,
Pagination,
Drawer,
Input
} from "antd";
import Headplugselection from "./component/Headplugselection";
import QuestionModal from "./component/QuestionModal";
import QuestionModals from "./component/QuestionModals";
import Contentpart from "./component/Contentpart";
import {TPMIndexHOC} from "../tpm/TPMIndexHOC";
import NoneData from './component/NoneData';
import './questioncss/questioncom.css';
import SiderBar from "../tpm/SiderBar";
class Question extends Component {
constructor(props) {
super(props);
this.state = {
page: 1,
limit: 20,
count: 50,
defaultActiveKey: 1,
Headertop: "",
Footerdown: "",
visible: false,
placement: 'right',
modalsType: false,
modalsTypes:false,
titilesm: "设为公开后,所有成员均可使用试题",
titiless: "是否设置为公开?",
titilesms:"单选题",
titbool: false,
Contentdata: [],
difficulty: null,
visiblemys: false,
visiblemyss: false,
item_type: null,
keyword: null,
timuid: null,
items_count: 0,
basket_list: [],
completion_questions_count: 0,
judgement_questions_count: 0,
multiple_questions_count: 0,
practical_questions_count: 0,
program_questions_count: 0,
single_questions_count: 0,
subjective_questions_count: 0,
}
}
//初始化
componentDidMount() {
let {defaultActiveKey} = this.state;
var data = {
public: defaultActiveKey
};
this.getdata(data);
let url = `/users/get_navigation_info.json`;
axios.get(url, {}).then((response) => {
// //console.log("开始请求/get_navigation_info.json");
// //console.log(response);
if (response != undefined) {
if (response.status === 200) {
this.setState({
Headertop: response.data.top,
Footerdown: response.data.down
})
}
}
});
this.getbasket_listdata();
}
callback = (key) => {
this.setState({
defaultActiveKey: key,
})
var data = {
public: key,
item_type: this.state.item_type,
difficulty: this.state.difficulty,
};
this.getdata(data);
}
getdata = (data) => {
const url = `/item_banks.json`;
axios.get((url), {params: data}).then((response) => {
if (response === null || response === undefined) {
return
}
if (response.data.status === 403 || response.data.status === 401 || response.data.status === 500) {
} else {
}
//console.log("item_banks");
//console.log(response);
this.setState({
Contentdata: response.data,
items_count: response.data.items_count,
})
}).catch((error) => {
//console.log(error)
});
}
paginationonChange = () => {
}
showDrawer = () => {
this.setState({
visible: true,
});
this.getbasket_listdata();
};
onClose = () => {
this.setState({
visible: false,
});
};
onChange = e => {
this.setState({
placement: e.target.value,
});
};
getContainer = () => {
return this.container;
};
saveContainer = container => {
this.container = container;
};
showmodels = (id) => {
this.setState({
modalsType: true,
titilesm: "设为公开后,所有成员均可使用试题",
titiless: "是否设置为公开?",
titbool: true,
timuid: id
})
};
showmodelysl = (id) => {
this.setState({
modalsType: true,
titilesm: "确认删除后,无法撤销",
titiless: "是否确认删除?",
titbool: false,
timuid: id
})
};
modalCancel = () => {
this.setState({
modalsType: false
})
}
modalCancels=()=>{
this.setState({
modalsTypes: false
})
}
showQuestionModals =(item_type)=>{
this.setState({
modalsTypes: true,
titilesms:item_type,
})
}
setDownloads=(item_type)=>{
this.Deletebigquestiontype(item_type);
}
setDownload = () => {
//确认
if (this.state.titbool === true) {
//公开
this.publicopentimu(this.state.timuid);
} else {
// 删除
this.deletetimu(this.state.timuid);
}
this.setState({
modalsType: false
})
}
setdifficulty = (difficulty) => {
this.setState({
difficulty: difficulty,
visiblemys: false,
})
var data = {
public: this.state.defaultActiveKey,
difficulty: difficulty,
item_type: this.state.item_type,
};
this.getdata(data);
}
setitem_types = (item_type) => {
this.setState({
item_type: item_type,
visiblemyss: false,
})
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: item_type,
};
this.getdata(data);
}
handleVisibleChange = (boll) => {
if (this.state.visiblemyss === true) {
this.setState({
visiblemys: boll,
visiblemyss: false,
})
} else {
this.setState({
visiblemys: boll,
})
}
}
handleVisibleChanges = (boll) => {
if (this.state.visiblemys === true) {
this.setState({
visiblemyss: boll,
visiblemys: false,
})
} else {
this.setState({
visiblemyss: boll,
})
}
}
setdatafunsval = (e) => {
this.setState({
keywords: e.target.value
})
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: this.state.item_type,
keywords: e.target.value,
};
this.getdata(data);
}
setdatafuns = (value) => {
this.setState({
keywords: value,
})
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: this.state.item_type,
keywords: value,
};
this.getdata(data);
}
deletetimu = (id) => {
const url = `/item_banks/${id}.json`;
axios.delete(url)
.then((response) => {
if (response.data.status == 0) {
this.props.showNotification('删除试题成功')
// props.history.push(response.data.right_url)
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: this.state.item_type,
keywords: this.state.keywords,
};
this.getdata(data);
}
})
.catch(function (error) {
console.log(error);
});
}
publicopentimu = (id) => {
const url = `/item_banks/${id}/set_public.json`;
axios.post(url)
.then((result) => {
if (result.data.status == 0) {
this.props.showNotification(`公开题目成功`);
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: this.state.item_type,
keywords: this.state.keywords,
};
this.getdata(data);
}
}).catch((error) => {
console.log(error);
})
}
getbasket_listdata = () => {
// 获取试题篮展开的数据
const url = "/item_baskets/basket_list.json";
axios.get(url)
.then((result) => {
// console.log("getbasket_listdata");
// console.log(result.data);
this.setState({
completion_questions_count: result.data.completion_questions_count,
judgement_questions_count: result.data.judgement_questions_count,
multiple_questions_count: result.data.multiple_questions_count,
practical_questions_count: result.data.practical_questions_count,
program_questions_count: result.data.program_questions_count,
single_questions_count: result.data.single_questions_count,
subjective_questions_count: result.data.subjective_questions_count,
})
}).catch((error) => {
// console.log(error);
this.setState({
completion_questions_count: 0,
judgement_questions_count: 0,
multiple_questions_count: 0,
practical_questions_count: 0,
program_questions_count: 0,
single_questions_count: 0,
subjective_questions_count: 0,
})
})
}
//选用
getitem_baskets=(data)=>{
//选用题型可以上传单个 或者多个题型
let url="/item_baskets.json";
axios.post(url, data)
.then((result) => {
if (result.data.status == 0) {
this.props.showNotification(`选用成功`);
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: this.state.item_type,
keywords: this.state.keywords,
};
this.getdata(data);
this.getbasket_listdata();
}
}).catch((error) => {
console.log(error);
})
}
// 撤销
getitem_basketss=(id)=>{
//选用题型可以上传单个 或者多个题型
let url=`/item_baskets/${id}.json`;
axios.delete(url)
.then((result) => {
if (result.data.status == 0) {
this.props.showNotification(`撤销成功`);
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: this.state.item_type,
keywords: this.state.keywords,
};
this.getdata(data);
this.getbasket_listdata();
}
}).catch((error) => {
console.log(error);
})
}
//全选试题库
selectallquestionsonthispage=()=>{
var item_idsdata=[];
var arr= this.state.Contentdata.items;
for(let data of arr) {
item_idsdata.push(data.id);
}
const data={
item_ids:item_idsdata
}
this.getitem_baskets(data);
}
//删除大题型
Deletebigquestiontype =(item_type)=>{
const url=`/item_baskets/delete_item_type.json`;
axios.delete((url), { data: {
item_type:item_type
}})
.then((response) => {
if (response.data.status == 0) {
this.props.showNotification('删除成功');
var data = {
public: this.state.defaultActiveKey,
difficulty: this.state.difficulty,
item_type: this.state.item_type,
keywords: this.state.keywords,
};
this.getdata(data);
this.getbasket_listdata();
}
})
.catch(function (error) {
console.log(error);
});
}
render() {
let {
page, limit, count, Headertop, visible, placement, modalsType, modalsTypes,basket_list,
completion_questions_count, judgement_questions_count, multiple_questions_count, practical_questions_count,
program_questions_count, single_questions_count, subjective_questions_count
} = this.state;
const Datacount = completion_questions_count + judgement_questions_count
+ multiple_questions_count + practical_questions_count
+ program_questions_count
+ single_questions_count
+ subjective_questions_count;
return (
<div className="newMain clearfix" ref={this.saveContainer}>
{
visible===true?
<style>
{
`
.newHeaders{
position: fixed;
top: 0px;
z-index: 999 !important;
}
.ant-drawer {
z-index: 800 !important;
}
.ant-notification{
position: fixed;
z-index: 1500 !important;
}
.newFooter{
position: relative;
z-index: 9999999 ;
}
`
}
</style>
:""
}
{
visible===true?
<div
style={{
marginTop: "60px"
}}></div>
:""}
<QuestionModals {...this.props}{...this.state} modalsTypes={modalsTypes} modalCancels={() => this.modalCancels()}
setDownloads={(e) => this.setDownloads(e)}></QuestionModals>
<QuestionModal {...this.props}{...this.state} modalsType={modalsType} modalCancel={() => this.modalCancel()}
setDownload={() => this.setDownload()}></QuestionModal>
<SiderBar
{...this.props}
{...this.state}
showDrawer={() => this.showDrawer()}
Headertop={Headertop}/>
{/*顶部*/}
<Headplugselection></Headplugselection>
{/*头部*/}
<Contentpart {...this.state} {...this.props}
getitem_basketss={(id)=>this.getitem_basketss(id)}
selectallquestionsonthispage={()=>this.selectallquestionsonthispage()}
getitem_baskets={(e)=>this.getitem_baskets(e)}
setdatafuns={(e) => this.setdatafuns(e)}
setdatafunsval={(e) => this.setdatafunsval(e)}
handleVisibleChanges={(e) => this.handleVisibleChanges(e)}
setitem_types={(e) => this.setitem_types(e)}
handleVisibleChange={(e) => this.handleVisibleChange(e)}
setdifficulty={(e) => this.setdifficulty(e)}
showmodels={(e) => this.showmodels(e)}
showmodelysl={(e) => this.showmodelysl(e)}
callback={(e) => this.callback(e)}></Contentpart>
{/*分页*/}
{/*<div className="clearfix mt5">*/}
{/*<div className="educontent mt10 pb20 w1200s">*/}
{/* fenye*/}
<div className="mb30 clearfix educontent mt40 intermediatecenter">
<Pagination showQuickJumper current={page} onChange={this.paginationonChange}
pageSize={limit}
total={count}></Pagination>
</div>
{/*抽屉效果*/}
<style>
{
`
.ant-drawer-content-wrapper{
width: 200px !important;
overflowhidden;
margin-top: 62px;
}
.ant-drawer-body{
height: 100%;
background:rgba(234,234,234,1);
}
`
}
</style>
<Drawer
className="drawercontainer"
placement={placement}
closable={false}
onClose={() => this.onClose()}
visible={visible}
mask={false}
closable={true}
>
{Datacount && Datacount > 0 ?
<div>
<div className="mt25 mb26">
<Input placeholder="未命名试卷"/>
</div>
{
single_questions_count === 0 ?
""
: <div className="sortinxdirection" onClick={()=>this.showQuestionModals("SINGLE")} >
<p
className="w50s intermediatecenterysls sortinxdirection font-14">单选题{'('}{single_questions_count}{')'}</p>
<p className="w50s intermediatecenterysls xaxisreverseorder"><i
className="iconfont icon-shanchu1 font-14 lg lh30 icondrawercolor "></i></p>
</div>
}
{
multiple_questions_count === 0 ?
""
:
<div className="sortinxdirection" onClick={()=>this.showQuestionModals("MULTIPLE")}>
<p
className="w50s intermediatecenterysls sortinxdirection font-14">多选题{'('}{multiple_questions_count}{')'}</p>
<p className="w50s intermediatecenterysls xaxisreverseorder"><i
className="iconfont icon-shanchu1 font-14 lg lh30 icondrawercolor "></i></p>
</div>
}
{
judgement_questions_count === 0 ?
""
:
<div className="sortinxdirection" onClick={()=>this.showQuestionModals("JUDGMENT")}>
<p
className="w50s intermediatecenterysls sortinxdirection font-14">判断题{'('}{judgement_questions_count}{')'}</p>
<p className="w50s intermediatecenterysls xaxisreverseorder"><i
className="iconfont icon-shanchu1 font-14 lg lh30 icondrawercolor "></i></p>
</div>
}
{
completion_questions_count === 0 ?
""
:
<div className="sortinxdirection" onClick={()=>this.showQuestionModals("COMPLETION")}>
<p
className="w50s intermediatecenterysls sortinxdirection font-14">填空题{'('}{completion_questions_count}{')'}</p>
<p className="w50s intermediatecenterysls xaxisreverseorder"><i
className="iconfont icon-shanchu1 font-14 lg lh30 icondrawercolor "></i></p>
</div>
}
{
subjective_questions_count === 0 ?
""
:
<div className="sortinxdirection" onClick={()=>this.showQuestionModals("SUBJECTIVE")}>
<p
className="w50s intermediatecenterysls sortinxdirection font-14">简答题{'('}{subjective_questions_count}{')'}</p>
<p className="w50s intermediatecenterysls xaxisreverseorder"><i
className="iconfont icon-shanchu1 font-14 lg lh30 icondrawercolor "></i></p>
</div>
}
{
practical_questions_count === 0 ?
""
:
<div className="sortinxdirection">
<p
className="w50s intermediatecenterysls sortinxdirection font-14">实训题{'('}{practical_questions_count}{')'}</p>
<p className="w50s intermediatecenterysls xaxisreverseorder"><i
className="iconfont icon-shanchu1 font-14 lg lh30 icondrawercolor "></i></p>
</div>
}
{
program_questions_count === 0 ?
""
:
<div className="sortinxdirection" onClick={()=>this.showQuestionModals("PROGRAM")}>
<p
className="w50s intermediatecenterysls sortinxdirection font-14">编程题{'('}{program_questions_count}{')'}</p>
<p className="w50s intermediatecenterysls xaxisreverseorder"><i
className="iconfont icon-shanchu1 font-14 lg lh30 icondrawercolor "></i></p>
</div>
}
<div className="intermediatecenter verticallayout mt42">
<div className="drawerbutton">
试卷预览
</div>
</div>
</div>
:
<div className="drawernonedatadiv intermediatecenter">
<NoneData></NoneData>
</div>
}
</Drawer>
</div>
)
}
}
export default SnackbarHOC()(TPMIndexHOC(Question));