You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/courses/shixunHomework/ShixunhomeWorkItem.js

524 lines
18 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 CoursesListType from '../coursesPublic/CoursesListType';
import { WordsBtn, getTaskUrlById , ConditionToolTip } from 'educoder';
import {Tooltip,message,Modal} from 'antd';
import {Link} from 'react-router-dom';
import axios from 'axios';
import Modals from '../../modals/Modals';
import Associationmodel from '../coursesPublic/Associationmodel';
import ModalsRename from '../coursesPublic/ModalsRename';
// import '../../css/members.css'
import './style.css'
class ShixunhomeWorkItem extends Component{
constructor(props){
super(props);
this.state = {
props:props,
modalname:"关联项目",
visible:false,
startbtn:false,
code_review:false
}
// console.log("获取到this.propssssssssssss")
// console.log(this.props)
}
componentDidMount() {
let query = this.props.location.pathname;
const type = query.split('/');
this.setState({
shixuntypes:type[3]
})
}
componentDidUpdate = (prevProps) => {
if(prevProps.location.pathname != this.props.location.pathname){
let query = this.props.location.pathname;
const type = query.split('/');
this.setState({
shixuntypes:type[3]
})
}
}
Cancel=()=>{
this.setState({
visible:false
})
}
taskoperationId=(list)=>{
this.setState({
startbtn:true,
})
let url= list+".json";
// const w=window.open('about:blank');
axios.get(url).then((response) => {
if(response.status===200){
if(response.data.status===-2){
this.setState({
startbtn:false,
shixunsreplace:true,
hidestartshixunsreplacevalue:response.data.message+".json"
})
// w.close()
}else if(response.data.status===-1){
}else if(response.data.status===-3){
this.setState({
shixunsmessage:response.data.message,
startshixunCombattype:true,
startbtn:false
})
// w.close()
}else{
this.setState({
startbtn:false
})
// if(response.data.status!=401&&response.data.status!=403){
// w.location.href= "/tasks/"+response.data.game_identifier
// }
window.location.href = "/tasks/"+response.data.game_identifier
}
}
}).catch((error) => {
this.setState({
startbtn:false
})
// w.close()
});
}
hidestartshixunsreplace=(url)=>{
axios.get(url).then((response) => {
if(response.status===200){
this.setState({
shixunsreplace:false
})
message.success('重置成功,正在进入实训!');
let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
this.props.history.push(path);
}}
).catch((error) => {
this.setState({
startbtn:false,
shixunsreplace:false
})
});
}
hidestartshixunCombattype=()=>{
this.setState({
startshixunCombattype:false
})
}
// 实训详情,阻止冒泡
stopPro = (event) => {
event.stopPropagation()
}
editname = (name,id,event) => {
this.setState({
ModalsRenametype:true,
NavmodalValue:name,
Navmodalname:"重命名",
url:`/homework_commons/${id}/alter_name.json`
})
event.stopPropagation()
}
cannerNavmoda=()=>{
this.setState({
ModalsRenametype:false,
})
}
hrefjumpskip=(url)=>{
if(this.props.checkIfLogin()===false){
this.props.showLoginDialog()
return
}
// if(this.props.checkIfProfileCompleted()===false){
// this.setState({
// AccountProfiletype:true
// })
// return
// }
// if(this.props.checkIfProfessionalCertification()===false){
// this.props.showProfileCompleteDialog()
// return
// }
this.props.history.push(url);
}
render(){
let {
Modalstype,
Modalstopval,
Modalsbottomval,
cardsModalcancel,
cardsModalsavetype,
loadtype,
modalname,
visible,
shixunsreplace,
hidestartshixunsreplacevalue,
startshixunCombattype,
shixunsmessage,
startbtn,
} = this.state;
const { checkBox,
discussMessage,
taskid,index
} = this.props;
return(
<React.Fragment>
{
this.state.ModalsRenametype===true?
<ModalsRename
{...this.props}
Navmodalnametype={this.state.ModalsRenametype}
NavmodalValue={this.state.NavmodalValue}
Navmodalname={this.state.Navmodalname}
Navname={"作业"}
url={this.state.url}
cannerNavmoda={()=>this.cannerNavmoda()}
/>
:""}
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel}
modalSave={cardsModalsavetype}
loadtype={loadtype}
/>
{visible===true?<Associationmodel
modalname={modalname}
visible={visible}
Cancel={this.Cancel}
taskid={taskid}
funlist={this.props.funlist}
/>:""}
<Modal
keyboard={false}
title="提示"
visible={shixunsreplace}
closable={false}
footer={null}
>
<div className="task-popup-content">
<p className="task-popup-text-center font-16 pb20">实训已经更新了正在为您重置!</p>
</div>
<div className="task-popup-submit clearfix">
<a className="task-btn task-btn-orange fr mr51"
onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
</div>
</Modal>
<Modal
keyboard={false}
title="提示"
visible={startshixunCombattype}
closable={false}
footer={null}
>
<div className="task-popup-content">
<p className="task-popup-text-center font-16 pb20">目前该实训项目尚在内测中将于{shixunsmessage}之后开放谢谢</p>
</div>
<div className="task-popup-submit clearfix">
{/*<a onClick={this.hidestartshixunCombattype} className="task-btn fl">取消</a>*/}
<a className="task-btn task-btn-orange fr mr51" onClick={this.hidestartshixunCombattype}>知道啦</a>
</div>
{/*<p className="inviteTipbtn with100 fl">*/}
{/*<a onClick={this.hidestartshixunCombattype}>知道了</a>*/}
{/*</p>*/}
</Modal>
<div className="graduateTopicList boardsList" style={{cursor : this.props.isAdmin ? "pointer" : "default"}} onClick={() => window.$(`.shixunitem${index} input`).click() } >
<style>{`
.boardsList .ant-checkbox-wrapper{
margin-top: -35px;
}
.graduateTopicList .ant-checkbox-input {
margin-right: 15px;
}
.inlineblock{
display: inline-block;
}
.titleSearch .titleBar {
display: flex;
}
.titleSearch .titleBar .toolbar {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
/*list style*/
.boardsList {
display: flex;
align-items: center;
padding-top: 8px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
}
.boardsList .homepagePostSetting {
position: absolute;
width: 20px;
height: 20px;
}
.boardsList .contentSection {
flex: 1;
}
`}</style>
{this.props.isAdmin?
<span className={`shixunitem${index} fl`} style={{"height":"55px"}}>{checkBox}</span>
:
""
}
<div className="clearfix ds pr pt5 contentSection" >
<style>{`
.maxwidth333{
max-width: 333px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`}</style>
<h6>
{/*to={`/courses/${this.props.match.params.coursesId}/${discussMessage.homework_id}/jobsettings`}*/}
{
this.props.isAdmin?<a onClick={()=>this.hrefjumpskip("/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+discussMessage.homework_id+"/list?tab=0")}
title={discussMessage.name}
className="fl mt3 font-16 font-bd color-dark maxwidth333">{discussMessage.name}</a>:""
}
{
this.props.isStudent? <a onClick={()=>this.hrefjumpskip(`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/list?tab=0`)}
title={discussMessage.name}
className="fl mt3 font-16 font-bd color-dark maxwidth333">{discussMessage.name}</a>:""
}
{
this.props.isNotMember===true? this.props.discussMessage.private_icon===true?
<span className="fl mt3 font-16 font-bd color-dark maxwidth333 pointer" title={"私有属性,非课堂成员不能访问"}>{discussMessage.name}</span>
: <a onClick={()=>this.hrefjumpskip(`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/list?tab=0`)}
title={discussMessage.name}
className="fl mt3 font-16 font-bd color-dark maxwidth333">{discussMessage.name}</a>:""
}
{
this.props.discussMessage.private_icon===true?
<Tooltip title={"私有属性,非课堂成员不能访问"} placement="bottom">
<i className="iconfont icon-guansuo color-grey-c ml10 font-16 fl mt4"></i>
</Tooltip>
:
<div></div>
}
<CoursesListType typelist={discussMessage.status} typesylename={""} />
<style>
{
`
.homepagePostSettingbox{
width:207px !important;
}
.colorfff{
color:#fff !important;
}
.newhomepagePostSettingname{
width: 274px !important;
}
.newwidthSettin{
width:255px !important;
}
`
}
</style>
{this.props.isAdmin?<span onClick={(event)=>this.stopPro(event)} className={discussMessage&&discussMessage.shixun_status>1?this.props.isAdminOrCreator()?"homepagePostSetting newhomepagePostSettingname":"homepagePostSetting homepagePostSettingbox":"homepagePostSetting newwidthSettin"} style={{"right":"-2px","top":"6px","display":"block"}}>
{discussMessage&&discussMessage.shixun_status>1?<a onClick={()=>this.hrefjumpskip("/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+discussMessage.homework_id+"/list?tab=0")} className="btn colorblue font-16 fontweight400 mr20">查看详情</a>:""}
{discussMessage&&discussMessage.shixun_status>1?<Link className="btn colorblue font-16 fontweight400 mr20" to={"/shixuns/"+discussMessage.shixun_identifier+"/challenges"} target={"_blank"}>实训详情</Link>:
<a className={"btn colorfff font-16 fontweight400"}>实训详情</a>
}
{discussMessage&&discussMessage.shixun_status>1?"":<a onClick={()=>this.hrefjumpskip("/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+discussMessage.homework_id+"/list?tab=0")} className="btn colorblue font-16 fontweight400 mr20">查看详情</a>}
{this.props.isAdminOrCreator()?<a onClick={(event)=>this.editname(discussMessage.name,discussMessage.homework_id,event)} className={"btn colorblue font-16 fontweight400"}>重命名</a>:""}
{/*<WordsBtn className="btn colorblue ml20 font-16" to={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/settings?tab=3`} > 设置</WordsBtn>*/}
<WordsBtn className="btn colorblue font-16 ml15 fontweight400" to={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/settings?tab=3`} > 设置</WordsBtn>
</span>:""}
{this.props.isStudent===true?this.props.course_identity===5?
<a onClick={()=>this.hrefjumpskip("/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+discussMessage.homework_id+"/list?tab=0")}
className="btn colorblue colorblue font-16 mr20 fr mt2">查看详情</a>
:"":""
}
{this.props.isStudent===true?this.props.course_identity===5?discussMessage&&discussMessage.shixun_status>1?
discussMessage.time_status<5?
<WordsBtn style="blue" className="colorblue font-16 mr20 fr mt2 ">
{startbtn===false?
(discussMessage.task_operation[0] == '继续挑战' || discussMessage.task_operation[0] == '查看实战' ?
<a className="btn colorblue" href={getTaskUrlById(discussMessage.task_operation[1])}>
{discussMessage.task_operation[0]}
</a>
:
<a className="btn colorblue" onClick={()=>this.taskoperationId(discussMessage.task_operation[1])}>
{discussMessage.task_operation[0]}
</a>):<a className="btn colorblue" ></a>}
</WordsBtn>:"":"":"":""
}
</h6>
<div className="cl"></div>
<p className="color-grey mt16 fl" style={{"width":"820px"}}>
<span >
{/* <a href="/users/innov" className="panel-name-small hide fl mr15 mr30 color-grey3">{discussMessage.author.name}</a> */}
{ discussMessage.author && <span className="mr15 color-grey-3">{discussMessage.author}</span> }
{discussMessage.commit_count===undefined?"":<span className="mr15 color-grey9">已开始做题 {discussMessage.commit_count}</span>}
{discussMessage.uncommit_count===undefined?"":<span className="mr15 color-grey9">未开始做题 {discussMessage.uncommit_count}</span>}
{/*<span className="mr15 color-grey9">{discussMessage.replies_count} 3 未评</span>*/}
{
discussMessage.time_status===1?
<span className="mr15 color-grey9">{discussMessage.status_time}</span>
:discussMessage.time_status===2?
<span className="mr15 color-grey9">{discussMessage.status_time}</span>
:discussMessage.time_status===3?
<span className="mr15 color-grey9">{discussMessage.status_time}</span>
:discussMessage.time_status===4?
<span className="mr15 color-grey9">{discussMessage.status_time}</span>
:
<span className="mr15 color-grey9">{discussMessage.status_time}</span>
}
{
discussMessage && discussMessage.upper_category_name &&
<ConditionToolTip title={discussMessage.upper_category_name} condition={ discussMessage.upper_category_name.length > 22 }>
{ <div className=" color-grey9 task-hide fr" style={discussMessage.time_status===1||discussMessage.time_status===2||discussMessage.time_status===3||discussMessage.time_status===4||discussMessage.time_status===5||discussMessage.time_status===6?{"maxWidth":"216px"}:{"maxWidth":"550px"}} title={discussMessage.upper_category_name}>所属目录{discussMessage.upper_category_name}</div>}
</ConditionToolTip>
}
{/* { discussMessage.replies_count != 0 && <span className="mr15 color-grey9">{discussMessage.replies_count} 回复</span> }
{ discussMessage.praise_num != 0 && <span className="mr15 color-grey9">{discussMessage.praise_num} 点赞</span> }
{ discussMessage.visits != 0 && <span className="mr15 color-grey9">{discussMessage.visits} 浏览</span> } */}
{/* <span className="mr15 color-light-grey-C">{moment(discussMessage.created_on).fromNow()} </span> */}
</span>
</p>
</div>
</div>
</React.Fragment>
)
}
}
export default ShixunhomeWorkItem;
//
// cannelAssociation=()=>{
//
// this.setState({
// Modalstype:true,
// Modalstopval:"确定要取消该项目关联?",
// cardsModalcancel:this.cannerassocition,
// cardsModalsavetype:this.savetassociton
// })
//
// }
// cannerassocition=()=>{
//
// this.setState({
// Modalstype:false,
// Modalstopval:"",
// cardsModalcancel:"",
// cardsModalsavetype:"",
// loadtype:false
// })
//
// }
// savetassociton=()=>{
// this.cannerassocition();
// let taskid=this.props.taskid;
// let url = "/graduation_tasks/"+taskid+"/graduation_works/cancel_relate_project.json";
// axios.get(url).then((result)=>{
//
// if(result.data.status===0){
// this.setState({
// Modalstype:true,
// Modalstopval:result.data.message,
// cardsModalsavetype:this.cannerassocition,
// loadtype:true
// })
// }
//
// }).catch((error)=>{
// console.log(error)
// })
//
// }
//
// saveAssociationItems=()=>{
//
// let coursesId=this.props.coursesId;
// let taskid=this.props.taskid;
// let url="/courses/"+coursesId+"/graduation_tasks/relate_project.json";
// axios.post(url,{
// project_id:taskid
// }).then((result)=>{
// console.log(result)
// if(result.data.status===0){
// this.setState({
// Modalstype:true,
// Modalstopval:result.data.message,
// cardsModalsavetype:this.cannerassocition,
// loadtype:true
// })
// }
// }).catch((error)=>{
// console.log(error)
// })
//
// }
//
//
// AssociationItems=()=>{
// this.setState({
// visible:true
// })
// }