Merge branch 'topic_bank' of https://bdgit.educoder.net/Hjqreturn/educoder into topic_bank
commit
205e2d31b7
@ -0,0 +1,449 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
import {Tooltip,Menu} from 'antd';
|
||||||
|
import Loadable from 'react-loadable';
|
||||||
|
import Loading from '../../../../Loading';
|
||||||
|
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
|
||||||
|
import axios from 'axios';
|
||||||
|
import HomeworkModal from "../../coursesPublic/HomeworkModal";
|
||||||
|
import AccessoryModal from "../../coursesPublic/AccessoryModal";
|
||||||
|
import Associationmodel from '../../coursesPublic/Associationmodel';
|
||||||
|
import CoursesListType from '../../coursesPublic/CoursesListType';
|
||||||
|
import moment from 'moment';
|
||||||
|
import "../../css/members.css"
|
||||||
|
import "../../css/Courses.css"
|
||||||
|
|
||||||
|
import Modals from '../../../modals/Modals';
|
||||||
|
|
||||||
|
|
||||||
|
//毕设描述
|
||||||
|
const GraduationTasksquestions= Loadable({
|
||||||
|
loader: () => import('./GraduationTaskssettingquestions'),
|
||||||
|
loading: Loading,
|
||||||
|
})
|
||||||
|
//毕设任务设置
|
||||||
|
const GraduationTaskssetting=Loadable({
|
||||||
|
loader: () => import('./GraduationTaskssetting'),
|
||||||
|
loading: Loading,
|
||||||
|
})
|
||||||
|
//毕设任务列表
|
||||||
|
const GraduationTaskslist=Loadable({
|
||||||
|
loader: () => import('./GraduationTaskssettinglist'),
|
||||||
|
loading: Loading,
|
||||||
|
})
|
||||||
|
|
||||||
|
class GraduationTaskDetail extends Component{
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state={
|
||||||
|
modalname:undefined,
|
||||||
|
visible:false,
|
||||||
|
Topval:undefined,
|
||||||
|
starttime:undefined,
|
||||||
|
starttimes:undefined,
|
||||||
|
typs:undefined,
|
||||||
|
endtime:undefined,
|
||||||
|
Cancelname:undefined,
|
||||||
|
Savesname:undefined,
|
||||||
|
Cancel:undefined,
|
||||||
|
Saves:undefined,
|
||||||
|
Topvalright:undefined,
|
||||||
|
Botvalleft:undefined,
|
||||||
|
course_groupslist:undefined,
|
||||||
|
course_groups:undefined,
|
||||||
|
questionslist:undefined,
|
||||||
|
tab:"list",
|
||||||
|
visibles:undefined,
|
||||||
|
Modalstype:undefined,
|
||||||
|
Modalstopval:undefined,
|
||||||
|
ModalCancel:undefined,
|
||||||
|
ModalSave:undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
componentDidMount(){
|
||||||
|
this.getdatas()
|
||||||
|
}
|
||||||
|
getdatas=()=>{
|
||||||
|
const task_Id = this.props.match.params.task_Id;
|
||||||
|
let url="/graduation_tasks/"+task_Id+".json";
|
||||||
|
|
||||||
|
axios.get(url).then((result)=>{
|
||||||
|
if(result.status===200){
|
||||||
|
this.setState({
|
||||||
|
questionslist:result.data
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}).catch((error)=>{
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//返回
|
||||||
|
goback=()=>{
|
||||||
|
// let courseId=this.props.match.params.coursesId;
|
||||||
|
// let category_id=this.props.match.params.category_id;
|
||||||
|
// window.location.href="/courses/"+courseId+"/graduation_tasks/"+category_id;
|
||||||
|
// let courseId = this.props.match.params.coursesId;
|
||||||
|
// if(courseId===undefined){
|
||||||
|
// this.props.history.push("/courses");
|
||||||
|
// }else{
|
||||||
|
// this.props.history.push(this.props.current_user.first_category_url);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// this.props.history.goBack()
|
||||||
|
this.props.history.replace(`/courses/${this.state.questionslist.course_id}/graduation_tasks/${this.state.questionslist.graduation_id}`);
|
||||||
|
}
|
||||||
|
//立即发布
|
||||||
|
publish=()=>{
|
||||||
|
let starttime= this.props.getNowFormatDates(1,1);
|
||||||
|
let endtime=this.props.getNowFormatDates(2,1);
|
||||||
|
// this.homeworkstart()
|
||||||
|
this.setState({
|
||||||
|
modalname:"立即发布",
|
||||||
|
visible:true,
|
||||||
|
Topval:"学生将立即收到毕设任务",
|
||||||
|
// Botvalleft:"点击修改",
|
||||||
|
// Botval:`本操作只对"未发布"的分班有效`,
|
||||||
|
starttime:moment(moment(new Date())).format("YYYY-MM-DD HH:mm") ,
|
||||||
|
starttimes:this.props.getNowFormatDates(1),
|
||||||
|
typs:"start",
|
||||||
|
endtime:endtime,
|
||||||
|
Cancelname:"暂不发布",
|
||||||
|
Savesname:"立即发布",
|
||||||
|
Cancel:this.cancelmodel,
|
||||||
|
Saves:this.homepublish,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 确定立即发布
|
||||||
|
homepublish=(ids,endtime)=>{
|
||||||
|
this.cancelmodel();
|
||||||
|
let task_Id=this.props.match.params.task_Id;
|
||||||
|
const cid = this.props.match.params.coursesId;
|
||||||
|
// let url = `/courses/${cid}/graduation_tasks/publish_task.json`;
|
||||||
|
|
||||||
|
let url="/courses/"+cid+"/graduation_tasks/publish_task.json"
|
||||||
|
axios.post(url,{
|
||||||
|
task_ids:[task_Id],
|
||||||
|
group_ids: this.state.course_groupslist,
|
||||||
|
end_time:endtime,
|
||||||
|
}).then((response)=>{
|
||||||
|
if (response.data.status == 0) {
|
||||||
|
this.getdatas()
|
||||||
|
this.props.showNotification(response.data.message);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
// Modalstopval:response.data.message,
|
||||||
|
// ModalSave:this.cancelmodel,
|
||||||
|
// Loadtype:true,
|
||||||
|
course_groupslist:[],
|
||||||
|
checkAllValue:false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).catch((error)=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
resetList=()=>{
|
||||||
|
this.getdatas();
|
||||||
|
this.child && this.child.searchValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 立即截止
|
||||||
|
end=()=>{
|
||||||
|
// this.homeworkstart()
|
||||||
|
this.setState({
|
||||||
|
modalname:"立即截止",
|
||||||
|
visible:true,
|
||||||
|
Topval:"学生将不能再提交作品",
|
||||||
|
// Botvalleft:"暂不截止",
|
||||||
|
// Botval:`本操作只对"提交中"的分班有效`,
|
||||||
|
Cancelname:"暂不截止",
|
||||||
|
Savesname:"立即截止",
|
||||||
|
Cancel:this.cancelmodel,
|
||||||
|
Saves:this.coursetaskend,
|
||||||
|
typs:"end",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 取消
|
||||||
|
cancelmodel=()=>{
|
||||||
|
this.setState({
|
||||||
|
Modalstype:false,
|
||||||
|
Loadtype:false,
|
||||||
|
visible:false,
|
||||||
|
Modulationtype:false,
|
||||||
|
Allocationtype:false,
|
||||||
|
Modalstopval:"",
|
||||||
|
ModalCancel:"",
|
||||||
|
ModalSave:"",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
getcourse_groupslist=(id)=>{
|
||||||
|
this.setState({
|
||||||
|
course_groupslist:id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
setTab = (tab) =>{
|
||||||
|
this.setState({
|
||||||
|
tab
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关联项目
|
||||||
|
AssociationItems=()=>{
|
||||||
|
this.setState({
|
||||||
|
visibles:true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
Cancel=()=>{
|
||||||
|
this.setState({
|
||||||
|
visibles:false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 取消关联
|
||||||
|
cannelAssociation=()=>{
|
||||||
|
this.setState({
|
||||||
|
Modalstype:true,
|
||||||
|
Modalstopval:"确定要取消该项目关联？",
|
||||||
|
ModalCancel:this.cannerassocition,
|
||||||
|
ModalSave:this.savetassociton
|
||||||
|
})
|
||||||
|
}
|
||||||
|
savetassociton=()=>{
|
||||||
|
this.cannerassocition();
|
||||||
|
let {questionslist}=this.state;
|
||||||
|
let url = "/graduation_tasks/"+questionslist.task_id+"/graduation_works/cancel_relate_project.json";
|
||||||
|
console.log(url)
|
||||||
|
axios.get(url).then((result)=>{
|
||||||
|
if(result.data.status===0){
|
||||||
|
this.resetList();
|
||||||
|
}
|
||||||
|
}).catch((error)=>{
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
cannerassocition=()=>{
|
||||||
|
this.setState({
|
||||||
|
Modalstype:false,
|
||||||
|
Modalstopval:"",
|
||||||
|
ModalCancel:"",
|
||||||
|
ModalSave:"",
|
||||||
|
loadtype:false,
|
||||||
|
visibles:false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 补交附件
|
||||||
|
handaccessory=()=>{
|
||||||
|
// let {taskslistdata}=this.state;
|
||||||
|
// let courseId=this.props.match.params.coursesId;
|
||||||
|
//
|
||||||
|
// let url="/courses/"+courseId+"/graduation_tasks/"+taskslistdata.work_id+"/appraise"
|
||||||
|
//
|
||||||
|
// window.location.href=url;
|
||||||
|
this.setState({
|
||||||
|
avisible:true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
Cancelvisible=()=>{
|
||||||
|
this.setState({
|
||||||
|
avisible:false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
bindRef = ref => { this.child = ref } ;
|
||||||
|
render(){
|
||||||
|
|
||||||
|
let courseId=this.props.match.params.coursesId;
|
||||||
|
let category_id=this.props.match.params.category_id;
|
||||||
|
let task_Id=this.props.match.params.task_Id;
|
||||||
|
let {
|
||||||
|
questionslist ,
|
||||||
|
tab ,
|
||||||
|
visibles ,
|
||||||
|
Modalstype,
|
||||||
|
Modalstopval,
|
||||||
|
ModalCancel,
|
||||||
|
ModalSave
|
||||||
|
} = this.state
|
||||||
|
|
||||||
|
const commom = {
|
||||||
|
setTab:this.setTab
|
||||||
|
}
|
||||||
|
return(
|
||||||
|
<div className="newMain clearfix">
|
||||||
|
{
|
||||||
|
questionslist &&
|
||||||
|
<div className={"educontent mb20"}>
|
||||||
|
<HomeworkModal
|
||||||
|
starttimes={this.state.starttimes}
|
||||||
|
typs={this.state.typs}
|
||||||
|
modalname={this.state.modalname}
|
||||||
|
visible={this.state.visible}
|
||||||
|
Topval={this.state.Topval}
|
||||||
|
Topvalright={this.state.Topvalright}
|
||||||
|
Botvalleft={this.state.Botvalleft}
|
||||||
|
Botval={this.state.Botval}
|
||||||
|
starttime={this.state.starttime}
|
||||||
|
endtime={this.state.endtime}
|
||||||
|
Cancelname={this.state.Cancelname}
|
||||||
|
Savesname={this.state.Savesname}
|
||||||
|
Cancel={this.state.Cancel}
|
||||||
|
Saves={this.state.Saves}
|
||||||
|
course_groups={this.state.course_groups}
|
||||||
|
modaltype={this.state.modaltype}
|
||||||
|
getcourse_groupslist={(id) => this.getcourse_groupslist(id)}
|
||||||
|
/>
|
||||||
|
{/*关联项目*/}
|
||||||
|
{visibles===true?
|
||||||
|
<Associationmodel
|
||||||
|
modalname={"关联项目"}
|
||||||
|
visible={visibles}
|
||||||
|
Cancel={()=>this.Cancel()}
|
||||||
|
taskid={ questionslist && questionslist.task_id }
|
||||||
|
funlist={this.resetList}
|
||||||
|
/>
|
||||||
|
:""}
|
||||||
|
|
||||||
|
{this.state.avisible===true?<AccessoryModal
|
||||||
|
{...this.props}
|
||||||
|
modalname={"补交附件"}
|
||||||
|
visible={this.state.avisible}
|
||||||
|
Cancelname={"取消"}
|
||||||
|
Savesname={"确认"}
|
||||||
|
Cancel={this.Cancelvisible}
|
||||||
|
categoryid={questionslist.work_id}
|
||||||
|
setupdate={this.resetList}
|
||||||
|
/>:""}
|
||||||
|
{/*提示*/}
|
||||||
|
<Modals
|
||||||
|
modalsType={Modalstype}
|
||||||
|
modalsTopval={Modalstopval}
|
||||||
|
modalCancel={ModalCancel}
|
||||||
|
modalSave={ModalSave}
|
||||||
|
closable={false}
|
||||||
|
footer={null}
|
||||||
|
destroyOnClose={true}
|
||||||
|
centered={true}
|
||||||
|
/>
|
||||||
|
<p className="clearfix mt10">
|
||||||
|
<a onClick={this.goback} className="color-grey-9 fl">{questionslist.course_name}</a>
|
||||||
|
<span className="color-grey-9 fl ml3 mr3">></span>
|
||||||
|
<Link to={`/courses/${courseId}/graduation_tasks/${category_id}`} className="color-grey-9 fl">{questionslist.graduation_name}</Link>
|
||||||
|
<span className="color-grey-9 fl ml3 mr3">></span>
|
||||||
|
<span className="color-grey-6">任务详情</span>
|
||||||
|
</p>
|
||||||
|
<div className="clearfix mt20 mb20 lineh-25 linbox">
|
||||||
|
<p className=" fl color-black summaryname">
|
||||||
|
<Link to={`/courses/${courseId}/graduation_tasks/${category_id}`} className="color-grey-3">{questionslist.task_name}</Link>
|
||||||
|
</p>
|
||||||
|
<CoursesListType
|
||||||
|
typelist={questionslist.task_status}
|
||||||
|
/>
|
||||||
|
<a className="color-grey-3 fr font-16 ml30 mr20" onClick={this.goback}>返回</a>
|
||||||
|
</div>
|
||||||
|
<div className="stud-class-set bor-bottom-greyE">
|
||||||
|
<div className="clearfix edu-back-white pl30 pr30 graduationTaskMenu">
|
||||||
|
|
||||||
|
<Link className={tab && tab == "list" ? "active" : ""} to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/list"}>任务列表</Link>
|
||||||
|
<Link className={tab && tab == "questions" ? "active" : ""} to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/questions"}>毕设描述</Link>
|
||||||
|
<Link className={tab && tab == "setting" ? "active" : ""} to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/setting?tab=3"}>设置</Link>
|
||||||
|
|
||||||
|
{/*<a className={"fr color-blue font-16"}>导出成绩</a>*/}
|
||||||
|
{/*{this.props.isAdmin()?<a href={"/api/graduation_tasks/"+task_Id+"/tasks_list.xls"} className={"fr color-blue font-16"}>导出成绩</a>:""}*/}
|
||||||
|
{/*{this.props.isAdmin()?<a href={"/api/graduation_tasks/"+task_Id+"/tasks_list.zip"} className={"fr color-blue font-16"}>导出作品附件</a>:""}*/}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
{ `
|
||||||
|
.drop_down_menu{
|
||||||
|
height: 118px;
|
||||||
|
left:0px;
|
||||||
|
width: 121px;
|
||||||
|
}
|
||||||
|
.drop_down_menu li {
|
||||||
|
overflow: visible;
|
||||||
|
width: 121px;
|
||||||
|
}
|
||||||
|
.drop_down_menu li a{
|
||||||
|
padding: 0px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.mt19{
|
||||||
|
margin-top:19px;
|
||||||
|
}
|
||||||
|
.drop_down_menu, .drop_down_normal{
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.drop_down_menu li .color-dark{
|
||||||
|
color: #666 !important;
|
||||||
|
}
|
||||||
|
.linbox{
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
{this.props.isAdmin()? <li className="li_line drop_down fr color-blue font-16 mt20" style={{"paddingLeft":"0px"}}>
|
||||||
|
导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>
|
||||||
|
<ul className="drop_down_menu" style={{"right":"-34px","left":"unset","height":"auto"}}>
|
||||||
|
<li><a onClick={()=>this.confirmysl("/graduation_tasks/"+task_Id+"/tasks_list.xlsx")} className="color-dark">导出成绩</a></li>
|
||||||
|
<li><a onClick={()=>this.confirmysl("/graduation_tasks/"+task_Id+"/tasks_list.zip")} className="color-dark">导出作品附件</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>:""}
|
||||||
|
{questionslist.work_status===undefined||questionslist.work_status===null||questionslist.work_status.length===0?"":questionslist.work_status.map((item,key)=>{
|
||||||
|
return(
|
||||||
|
<span key={key}>
|
||||||
|
{item==="提交作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/works/new"}>提交作品</a>:""}
|
||||||
|
{item==="补交作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/works/new"}>补交作品</a>:""}
|
||||||
|
{item==="修改作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+questionslist.work_id+"/works/edit"}>修改作品</a>:""}
|
||||||
|
{item==="查看作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+questionslist.work_id+"/works/edit"}>查看作品</a> :""}
|
||||||
|
{item==="创建项目"?<a className={"fr color-blue font-16"} href={'/projects/new'} target="_blank">创建项目</a>:""}
|
||||||
|
{item==="关联项目"?<a className={"fr color-blue font-16"} onClick={this.AssociationItems}>关联项目</a>:""}
|
||||||
|
{item==="取消关联"?<a className={"fr color-blue font-16"} onClick={this.cannelAssociation}>取消关联</a>:""}
|
||||||
|
{item==="补交附件"?<a className={"fr color-blue font-16"} onClick={this.handaccessory}>补交附件</a>:""}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/*<a className={"fr color-blue font-16"}>项目在线质量检测</a>*/}
|
||||||
|
{ this.props.isAdmin() ? questionslist.status===1 ? <a className={"fr color-blue font-16 mr20"} onClick={() => { this.end()} }>立即截止</a> : "" : "" }
|
||||||
|
{ this.props.isAdmin() ? questionslist.status===0 ? <a className={"fr color-blue font-16 mr20"} onClick={() => { this.publish()} }>立即发布</a> : "" : "" }
|
||||||
|
|
||||||
|
{ this.props.isAdmin() ? <a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+task_Id+"/edit"}>编辑任务</a> : "" }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Switch {...this.props}>
|
||||||
|
|
||||||
|
<Route exact path="/courses/:coursesId/graduation_tasks/:category_id/:task_Id/list"
|
||||||
|
render={
|
||||||
|
(props) => (<GraduationTaskslist {...this.props} {...props} {...this.state} {...commom} triggerRef={this.bindRef} tab={`list`}/>)
|
||||||
|
}
|
||||||
|
></Route>
|
||||||
|
|
||||||
|
<Route exact path="/courses/:coursesId/graduation_tasks/:category_id/:task_Id/setting"
|
||||||
|
render={
|
||||||
|
(props) => (<GraduationTaskssetting {...this.props} {...props} {...this.state} {...commom} tab={`setting`}/>)
|
||||||
|
}
|
||||||
|
></Route>
|
||||||
|
|
||||||
|
<Route exact path="/courses/:coursesId/graduation_tasks/:category_id/:task_Id/questions"
|
||||||
|
render={
|
||||||
|
(props) => (<GraduationTasksquestions {...this.props} {...props} {...this.state} {...commom} tab={`questions`}/>)
|
||||||
|
}></Route>
|
||||||
|
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC))
|
||||||
|
export default (GraduationTaskDetail) ;
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
.float_button {
|
||||||
|
background-image: url(./images/float_switch.jpg);
|
||||||
|
height: 112px;
|
||||||
|
width: 38px;
|
||||||
|
position: absolute;
|
||||||
|
left: -38px;
|
||||||
|
top: 32%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.float_button .text {
|
||||||
|
position: relative;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
top: 36px;
|
||||||
|
color: #fff;
|
||||||
|
left: 13px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
@ -0,0 +1,187 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import axios from 'axios'
|
||||||
|
import { Spin } from 'antd'
|
||||||
|
import ClipboardJS from 'clipboard'
|
||||||
|
|
||||||
|
import VNCDisplay from './VNCDisplay'
|
||||||
|
import FloatButton from './component/FloatButton'
|
||||||
|
import SecondDrawer from './component/SecondDrawer'
|
||||||
|
import RepoTree from './component/repo/RepoTree'
|
||||||
|
import TPIMonaco from './component/monaco/TPIMonaco'
|
||||||
|
import notEditablePathImg from '../../images/tpi/notEditablePath.png'
|
||||||
|
|
||||||
|
import './VNC.css'
|
||||||
|
const $ = window.$;
|
||||||
|
const firstDrawerWidth = 260;
|
||||||
|
class VNCContainer extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
fileTreeSelectedKeys: [],
|
||||||
|
repositoryCode: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
componentDidMount() {
|
||||||
|
if (!this.clipboard) {
|
||||||
|
const clipboard = new ClipboardJS('.copybtn');
|
||||||
|
clipboard.on('success', (e) => {
|
||||||
|
this.props.showSnackbar('复制成功')
|
||||||
|
});
|
||||||
|
this.clipboard = clipboard
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
getSecondDrawerWidth = () => {
|
||||||
|
return $('#game_right_contents').width() - firstDrawerWidth
|
||||||
|
}
|
||||||
|
renderSecondDrawerChildren = () => {
|
||||||
|
const { readingCodeLoading, repositoryCode } = this.state;
|
||||||
|
const height = $(window).height() - 130
|
||||||
|
|
||||||
|
const isEditablePath = false;
|
||||||
|
return (
|
||||||
|
<Spin tip="加载中..." spinning={readingCodeLoading}>
|
||||||
|
<div style={{ height: `${height}px` }}>
|
||||||
|
<div className="codemirrorBackground"
|
||||||
|
style={{ backgroundImage: `url('${notEditablePathImg}')`, display: (isEditablePath ? 'none' : 'block') }}></div>
|
||||||
|
<TPIMonaco
|
||||||
|
{...this.state}
|
||||||
|
codeLoading={readingCodeLoading}
|
||||||
|
repositoryCode={repositoryCode}
|
||||||
|
isEditablePath={false}
|
||||||
|
></TPIMonaco>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Spin>);
|
||||||
|
}
|
||||||
|
fetchReadRepositoryCode = (path) => {
|
||||||
|
const status = 1
|
||||||
|
const fetchRepoCodeUrl = `/tasks/${this.props.game.identifier}/rep_content.json?path=${path}&status=${status}`
|
||||||
|
this.setState({ readingCodeLoading: true });
|
||||||
|
axios.get(fetchRepoCodeUrl, {
|
||||||
|
}).then((fetchReadRepositoryCodeResponse) => {
|
||||||
|
|
||||||
|
|
||||||
|
if (fetchReadRepositoryCodeResponse.data.content || fetchReadRepositoryCodeResponse.data.content == "") {
|
||||||
|
this.setState({
|
||||||
|
repositoryCode: fetchReadRepositoryCodeResponse.data.content,
|
||||||
|
readingCodeLoading: false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.setState({ readingCodeLoading: false });
|
||||||
|
}
|
||||||
|
// this.setState({ isEditablePath, currentPath: path });
|
||||||
|
|
||||||
|
}).catch(error =>{
|
||||||
|
console.log(error)
|
||||||
|
this.setState({ readingCodeLoading: false });
|
||||||
|
this.props.showSnackbar(`服务端异常，请联系管理员！`);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onTreeSelect = (selectedKeys, info) => {
|
||||||
|
const isLeaf = info.node.props.isLeaf;
|
||||||
|
if (isLeaf) { // 叶子节点
|
||||||
|
selectedKeys.length && this.setState({
|
||||||
|
fileTreeSelectedKeys: selectedKeys
|
||||||
|
})
|
||||||
|
this.refs["secondDrawer"].showSecondDrawer()
|
||||||
|
|
||||||
|
console.log('leaf clicked')
|
||||||
|
const nodePath = info.node.props.eventKey;
|
||||||
|
if (nodePath) {
|
||||||
|
const filetype = nodePath.split('.').pop().toLowerCase();
|
||||||
|
if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
|
||||||
|
|| filetype == 'jar' || filetype == 'exe'
|
||||||
|
|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
|
||||||
|
this.props.showSnackbar(`不支持加载${filetype}类型的文件。`)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.fetchReadRepositoryCode(nodePath);
|
||||||
|
} else {
|
||||||
|
console.error('no eventKey:', info.node)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
selectedKeys={fileTreeSelectedKeys}
|
||||||
|
onSelect={onTreeSelect}
|
||||||
|
*/
|
||||||
|
render() {
|
||||||
|
const { challenge, vnc_url, git_url } = this.props
|
||||||
|
|
||||||
|
const secondDrawerChildren = this.renderSecondDrawerChildren();
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<SecondDrawer
|
||||||
|
ref="secondDrawer"
|
||||||
|
floatText={'版本库'}
|
||||||
|
maskClosable={false}
|
||||||
|
secondDrawerChildren={secondDrawerChildren}
|
||||||
|
firstDrawerWidth={firstDrawerWidth}
|
||||||
|
getSecondDrawerWidth={this.getSecondDrawerWidth}
|
||||||
|
|
||||||
|
firstDrawerClassName="repoFilesDrawer vncDrawer"
|
||||||
|
secondDrawerClassName="codeInDrawer"
|
||||||
|
>
|
||||||
|
<style>{`
|
||||||
|
.vncDrawer .ant-drawer-body {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.vncDrawer .rc-tree {
|
||||||
|
padding: 16px;
|
||||||
|
max-width: 220px;
|
||||||
|
color: #CBCBCB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vncDrawer .ant-drawer-wrapper-body {
|
||||||
|
background: #242324;
|
||||||
|
}
|
||||||
|
.codeInDrawer .ant-drawer-wrapper-body {
|
||||||
|
background: #1D1C1D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vncDrawer .ant-drawer-header, .codeInDrawer .ant-drawer-header {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vncDrawer > div:nth-child(1) {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
.vncDrawer > div:nth-child(2) {
|
||||||
|
top: 0px !important;
|
||||||
|
height: 100% !important;
|
||||||
|
min-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codeInDrawer .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
<div style={{ 'padding': '16px', 'border-bottom': '1px solid #3A383A' }}>
|
||||||
|
<div style={{ color: '#888888' }}>网址克隆</div>
|
||||||
|
<div>
|
||||||
|
<input value={git_url} readonly={true} style={{ color: '#BABABA', width: '203px', background: 'transparent', border: 'none' }}></input>
|
||||||
|
<i class="iconfont icon-fuzhi font-14 ml10 copybtn"
|
||||||
|
style={{color: '#4CACFF', cursor: 'pointer', verticalAlign: 'baseline'}} data-clipboard-text={git_url} ></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<RepoTree
|
||||||
|
{...this.props}
|
||||||
|
fileTreeSelectedKeys={this.state.fileTreeSelectedKeys}
|
||||||
|
onTreeSelect={this.onTreeSelect}
|
||||||
|
|
||||||
|
></RepoTree>
|
||||||
|
</SecondDrawer>
|
||||||
|
<FloatButton></FloatButton>
|
||||||
|
<VNCDisplay
|
||||||
|
{...this.props}
|
||||||
|
></VNCDisplay>
|
||||||
|
|
||||||
|
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VNCContainer;
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
const $ = window.$;
|
||||||
|
class FloatButton extends Component {
|
||||||
|
componentDidMount() {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { challenge, vnc_url, children } = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="float_button" onClick={this.props.onClick}>
|
||||||
|
<style>{`
|
||||||
|
|
||||||
|
`}</style>
|
||||||
|
<span class="text">{children || '版本库'}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FloatButton;
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import React, { useState, useEffect, useContext, useRef, memo } from 'react';
|
||||||
|
|
||||||
|
// import { Tree } from 'antd';
|
||||||
|
// const { TreeNode } = Tree;
|
||||||
|
import Tree, { TreeNode } from 'rc-tree';
|
||||||
|
import 'rc-tree/assets/index.css';
|
||||||
|
|
||||||
|
const $ = window.$;
|
||||||
|
export default function RepoTree(props) {
|
||||||
|
const { fileTreeData, onLoadData, onTreeSelect, fileTreeSelectedKeys, loadRepoFiles } = props;
|
||||||
|
const [expandedKeys, setExpandedKeys] = useState([])
|
||||||
|
useEffect(() => {
|
||||||
|
loadRepoFiles()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (!fileTreeData || fileTreeData.length === 0) {
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
|
||||||
|
const onExpand = (expandedKeys) => {
|
||||||
|
// console.log('onExpand', arguments);
|
||||||
|
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||||
|
// or, you can remove all expanded children keys.
|
||||||
|
setExpandedKeys(expandedKeys)
|
||||||
|
}
|
||||||
|
|
||||||
|
const loop = (data) => {
|
||||||
|
return data.map((item) => {
|
||||||
|
if (item.children) {
|
||||||
|
return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} />
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const treeNodes = loop(fileTreeData);
|
||||||
|
|
||||||
|
|
||||||
|
// selectable={false}
|
||||||
|
return (
|
||||||
|
<Tree
|
||||||
|
onExpand={onExpand}
|
||||||
|
expandedKeys={expandedKeys}
|
||||||
|
// autoExpandParent={this.state.autoExpandParent}
|
||||||
|
loadData={onLoadData}
|
||||||
|
|
||||||
|
selectedKeys={fileTreeSelectedKeys}
|
||||||
|
onSelect={onTreeSelect}
|
||||||
|
>
|
||||||
|
{treeNodes}
|
||||||
|
</Tree>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in new issue