xxq250
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

marked package,去掉实践课程的相关文件

This commit is contained in:
caishi 2020-05-09 11:00:03 +08:00
parent f2f9f27086
commit 1eba2fa5f2
30 changed files with 1 additions and 7842 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -48,6 +48,7 @@
"lodash": "^4.17.15",
"loglevel": "^1.6.8",
"material-ui": "^1.0.0-beta.40",
"marked": "^1.0.0",
"md5": "^2.2.1",
"mini-css-extract-plugin": "^0.9.0",
"moment": "^2.23.0",

59
src/modules/paths/Index.js
View File

@ -1,59 +0,0 @@
import React, { Component } from 'react';
import { SnackbarHOC, CNotificationHOC } from 'educoder';
import { Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Loading from '../../Loading';
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
const PathsDetail = Loadable({
loader: () => import('./PathDetail/PathDetailIndex'),
loading: Loading,
})
const PathsNew = Loadable({
loader: () => import('./PathNew'),
loading: Loading,
})
const Statistics = Loadable({
loader: () => import('./statics'),
loading: Loading
});
const ShixunPaths = Loadable({
loader: () => import('./ShixunPaths'),
loading: Loading,
})
class Index extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Switch {...this.props}>
<Route path="/paths/:pathId/statistics" component={Statistics} {...this.props} {...this.state}></Route>
<Route path="/paths/new"
render={(props) => (<PathsNew {...this.props} {...this.state} {...props} />)}
></Route>
<Route path="/paths/:pathId/edit"
render={(props) => (<PathsNew {...this.props} {...this.state} {...props} />)}
></Route>
{/*编辑页面*/}
<Route path="/paths/:pathId"
render={(props) => (<PathsDetail {...this.props} {...this.state} {...props} />)}
></Route>
{/*<Route path="/paths/:pathId" exact component = {PathsDetail} {...this.props} {...this.state}></Route>*/}
<Route path="/paths" exact
render={(props) => (<ShixunPaths {...this.props} {...this.state} {...props} />)}
></Route>
</Switch>
</div>
)
}
}
export default CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index)));

36
src/modules/paths/NewStatistics/NewStatistics.js
View File

@ -1,36 +0,0 @@
import React,{ Component } from "react";
import { Skeleton ,Spin ,PageHeader} from "antd";
class NewStatistics extends Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return(
<div className="newContainer">
<div className="newMain clearfix">
<div className={"educontent mt20"}>
<div className="clearfix mb30">
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
title="学习统计"
subTitle="| Android综合实训之物联网移动应用"
/>
</div>
</div>
</div>
</div>
)
}
}
export default NewStatistics;

122
src/modules/paths/PathDetail/Addshixuns.js
View File

@ -1,122 +0,0 @@
import React, { Component } from 'react';
import {getImageUrl} from 'educoder';
import {Modal,Input,Form,Radio} from 'antd';
class Addshixuns extends Component {
constructor(props) {
super(props);
this.state = {
shixunname:undefined,
shixunzero:false,
is_jupyter:"1"
}
}
handleChange=(e)=>{
this.setState({
shixunname:e.target.value,
})
if(e.target.value.length>0){
this.setState({
shixunzero:false
})
}
}
modalCancel=()=>{
this.setState({
shixunname:undefined,
})
this.props.modalCancel()
}
//判断是否为空
getshixunname( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
modalSave=()=>{
let {shixunname}=this.state;
if(this.getshixunname(shixunname)===true){
this.setState({
shixunzero:true
})
return
}
if(shixunname===undefined||shixunname.length===0){
this.setState({
shixunzero:true
})
return
}
let is_jupyter=this.state.is_jupyter==="1"?false:true
this.props.Setaddshixuns(shixunname,is_jupyter);
this.props.modalCancel();
}
GrouponChange = e => {
this.setState({
is_jupyter: e.target.value,
});
};
render() {
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
};
return(
<Modal
className={this.props.className}
keyboard={false}
title="新建实训项目"
visible={this.props.Addshixunstype===undefined?false:this.props.Addshixunstype}
closable={false}
footer={null}
destroyOnClose={true}
centered={true}
width="530px"
>
{this.props.Addshixunstype===true?<style>
{
`
body{
overflow: hidden !important;
}
`
}
</style>:""}
<div className="task-popup-content">
<Form {...formItemLayout}>
<Form.Item label="实训类型">
<Radio.Group value={this.state.is_jupyter} onChange={this.GrouponChange}>
<Radio value="1">普通实训</Radio>
<Radio value="2">jupyter实训</Radio>
</Radio.Group>
</Form.Item>
</Form>
<p className="task-popup-text-center font-16">
<span style={{ "line-height":"30px"}}>实训名称：</span>
<span><Input style={{ width:"80%"}} className="yslzxueshisy " placeholder="请输入60字以内的实训名称" onChange={this.handleChange} addonAfter={String(this.state.shixunname===undefined?0:this.state.shixunname.length)+"/60"} maxLength={60} />
</span>
</p>
{this.state.shixunzero===true?<p className={"color-red ml85"}>请输入实训名称</p>:""}
<div className="clearfix mt30 edu-txt-center">
<a className="task-btn mr30 colorFFF" onClick={this.modalCancel}>取消</a>
<a className="task-btn task-btn-orange" onClick={this.modalSave}>确定</a>
</div>
</div>
</Modal>
)
}
}
export default Addshixuns;

688
src/modules/paths/PathDetail/DetailCards.js
View File

@ -1,688 +0,0 @@
import React, { Component } from 'react';
import {getImageUrl} from 'educoder';
import {Tooltip,Modal,Icon,Spin,message} from 'antd';
import DetailCardsEditAndAdd from './DetailCardsEditAndAdd';
import DetailCardsEditAndEdit from './DetailCardsEditAndEdit';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import axios from 'axios';
import { DragDropContext , Draggable, Droppable} from 'react-beautiful-dnd';
import Modals from '../../modals/Modals';
import '../../paths/ShixunPaths.css';
const $ = window.$
//
// //a little function to help us with reordering the result
// const reorder = (list, startIndex, endIndex) => {
// let newlist=list;
// const result = Array.from(newlist.shixuns_list);
// const [removed] = result.splice(startIndex, 1);
// result.splice(endIndex, 0, removed);
// newlist.shixuns_list=result;
// return newlist;
// };
//
class DetailCards extends Component{
constructor(props){
super(props)
this.state={
pathCardsList:undefined,
dropid:undefined,
dropidtype:false,
idsum:undefined,
pathCardsedittype:false,
pathlistedit:undefined,
pathid:undefined,
Modalstype:false,
Modalstopval:'',
Modalsbottomval:'',
cardsModalsave:this.cardsModalsave,
cardsModalcancel:this.cardsModalcancel,
delecttype:false,
editdelectid:undefined,
editbuttomtype:false,
editbuttomtypeadd:false,
showparagraph:false,
showparagraphkey:"",
showparagraphindex:"",
isSpin:false
}
// this.onDragEnd = this.onDragEnd.bind(this);
}
getPathCardsList(){
let pathid=this.props.match.params.pathId;
let url=`/stages.json?subject_id=`+pathid;
axios.get(url).then((result)=>{
if(result.status===200){
this.setState({
pathCardsList:result.data.stages,
})
}
}).catch((error)=>{
console.log(error);
})
}
for_paragraph = (index) =>{
$("#detail_for_paragraph_"+index).slideToggle(500);
}
componentDidMount(){
let pathid=this.props.match.params.pathId;
this.setState({
pathid:pathid
})
this.getPathCardsList();
}
// onDragStart = () => {
// /*...*/
// };
// onDragUpdate = () => {
// /*...*/
// }
//
// onDragEnd (result) {
//
// let{pathCardsList}=this.state;
// // dropped outside the list
// let newpathCardsList=pathCardsList;
// if(!result.destination) {
// return;
// }
// var sum=result.source.droppableId.replace('ids','')
// sum=parseInt(sum)
//
// const items = reorder(
// newpathCardsList[sum],
// result.source.index,
// result.destination.index
// );
// newpathCardsList[sum]=items
// this.setState({
// pathCardsList:newpathCardsList
// })
// }
pathCardsedit=(key,pathid)=>{
let url=`/stages/`+pathid+`/edit.json`;
axios.get(url).then((result)=>{
if(result.status===200){
this.setState({
idsum:key,
pathCardsedittype:true,
pathlistedit:result.data,
editbuttomtype:true,
editbuttomtypeadd:true
})
}
}).catch((error)=>{
console.log(error);
})
}
updatapathCardsedit=()=>{
this.setState({
idsum:undefined,
pathCardsedittype:false,
editbuttomtype:false,
editbuttomtypeadd:false
})
this.getPathCardsList();
this.props.updatadetailInfoLists();
}
delectpathCardsedit=(id)=>{
this.setState({
Modalstype:true,
Modalstopval:'是否删除该章节？',
Modalsbottomval:'',
editdelectid:id,
delecttype:true,
})
}
delectpathCardseditfun=()=>{
let {delecttype,editdelectid}=this.state;
let id=editdelectid;
if(delecttype===true){
let url ='/stages/'+id+'.json'
axios.delete(url).then((response) => {
if(response.data.status===1){
// window.location.href = "/paths/" + response.data.subject_id
this.setState({
idsum:undefined,
pathCardsedittype:false,
Modalstype:false,
Modalstopval:'',
Modalsbottomval:'',
cardsModalsave:this.cardsModalsave,
delecttype:false,
editdelectid:undefined
})
// this.getPathCardsList();
this.updatapathCardsedit()
}
}).catch((error) => {
console.log(error)
})
}
}
// 关卡的上移下移操作
operations = (url) => {
let newurl = url+".json"
axios.get(newurl).then((response) => {
if(response.data.status===1){
this.getPathCardsList();
}
}).catch((error) => {
console.log(error);
})
}
startgameid=(id)=>{
if(this.props.checkIfLogin()===false){
this.props.showLoginDialog()
return
}
if(this.props.checkIfProfileCompleted()===false){
this.props.showProfileCompleteDialog()
return
}
// if(this.props.checkIfProfessionalCertification()===false){
// this.props.showProfileCompleteDialog()
// return
// }
let url = "/shixuns/" + id + "/shixun_exec.json";
axios.get(url).then((response) => {
if (response.data.status === -2) {
this.setState({
shixunsreplace:true,
hidestartshixunsreplacevalue:response.data.message+".json"
})
} else if (response.data.status === -1) {
console.log(response)
}else if(response.data.status===-3){
this.setState({
shixunsmessage:response.data.message,
startshixunCombattype:true,
})
} else {
// window.location.href = "/tasks/" + response.data.game_identifier;
// window.location.href = path
// let path="/tasks/"+response.data.game_identifier;
// this.props.history.push(path);
window.open("/tasks/" + response.data.game_identifier);
}
}).catch((error) => {
});
}
hidestartshixunsreplace=(url)=>{
this.setState({
isSpin:true,
})
axios.get(url).then((response) => {
if(response.status===200){
// let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
// this.props.history.push(path);
message.success('重置成功，正在进入实训！');
this.startgameid(response.data.shixun_identifier);
this.setState({
shixunsreplace:false,
isSpin:false,
startbtn:false,
})
// message.success('重置成功，正在进入实训！');
// this.startshixunCombat();
}}
).catch((error) => {
});
}
cardsModalcancel=()=>{
this.setState({
Modalstype:false,
Modalstopval:'',
Modalsbottomval:'',
editdelectid:undefined
})
}
cardsModalsave=()=>{
this.setState({
Modalstype:false,
Modalstopval:'',
Modalsbottomval:'',
editdelectid:undefined
})
}
editeditbuttomtypecanle=()=>{
this.setState({
editbuttomtype:true,
editbuttomtypeadd:false
})
}
showparagraph=(key,index)=>{
this.setState({
showparagraph:true,
showparagraphkey:key,
showparagraphindex:index
})
}
hideparagraph=()=>{
this.setState({
showparagraph:false
})
}
hidestartshixunCombattype=()=>{
this.setState({
startshixunCombattype:false
})
};
Pathlisteditundefined=()=>{
this.setState({
pathlistedit:undefined
})
};
render(){
let { pathCardsList,
dropid,
idsum,
pathCardsedittype,
pathlistedit,
pathid,
Modalstype,
Modalstopval,
Modalsbottomval,
cardsModalsave,
cardsModalcancel,
delecttype,
hidestartshixunsreplacevalue,
editbuttomtype,
editbuttomtypeadd,
showparagraph,
showparagraphkey,
showparagraphindex
}=this.state;
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
// console.log("zzz"+this.props.MenuItemsindextype)
// console.log(this.props.detailInfoList&&this.props.detailInfoList.allow_visit)
return(
<div>
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel}
modalSave={delecttype===true?this.delectpathCardseditfun:cardsModalsave}
>
</Modals>
<Modal
keyboard={false}
title="提示"
visible={this.state.startshixunCombattype}
closable={false}
footer={null}
>
<div className="task-popup-content">
<p className="task-popup-text-center font-16 pb20">目前该实训项目尚在内测中，将于{this.state.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"
style={{marginRight:'51px'}}
onClick={this.hidestartshixunCombattype}>知道了</a>
</div>
{/*<p className="inviteTipbtn with100 fl">*/}
{/*<a onClick={this.hidestartshixunCombattype}>知道了</a>*/}
{/*</p>*/}
</Modal>
<Modal
keyboard={false}
title="提示"
visible={this.state.shixunsreplace}
closable={false}
footer={null}
>
<Spin indicator={antIcon} spinning={this.state.isSpin}>
<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"
style={{marginRight:'51px'}}
onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
</div>
</Spin>
</Modal>
<style>
{
`
.lessonvalue{
max-width: 556px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
`
}
</style>
<div className="lesson-saved-list">
{
pathCardsList && pathCardsList.map((item,key)=>{
return(
<div className={"lesson-saved-list-item"} id={"stage_div_"+key} >
<p className="clearfix title-line">
<a className="fl ring-blue mr10 mt2">
<img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
</a>
<span className="font-18 font-bd lessonvalue" title={item.stage_name}>{item.stage_name}</span>
{
idsum===key&&pathCardsedittype===true?'':
this.props.detailInfoList===undefined?"":
this.props.current_user&&this.props.current_user.admin===true||this.props.current_user&&this.props.current_user.business===true?
<a>
<a className="fr mtf3">
{ editbuttomtype===true?'':
<Tooltip placement="bottom" title="编辑"
onClick={() => this.pathCardsedit(key, item.stage_id)}>
<i className="iconfont icon-bianjidaibeijing font-22 color-green"></i>
</Tooltip>
}
</a>
{
pathCardsList.length=== key+1?"":<a className="fr ring-op-green mr20" onClick={()=>this.operations(item.down_path)}>
<Tooltip placement="bottom" title="向下移动">
<img src={getImageUrl("images/educoder/icon/movedown.svg")} className="fl mt2 ml4"/>
</Tooltip>
</a>
}
{key===0?"":
<a className="fr ring-op-green mr20" onClick={()=>this.operations(item.up_path)}>
<Tooltip placement="bottom" title="向上移动">
<img src={getImageUrl("images/educoder/icon/moveup.svg")} className="fl mt2 ml4"/>
</Tooltip>
</a>}
</a>:
this.props.detailInfoList.allow_statistics===true?
<a>
<a className="fr mtf3">
{ editbuttomtype===true?'':
<Tooltip placement="bottom" title="编辑"
onClick={() => this.pathCardsedit(key, item.stage_id)}>
<i className="iconfont icon-bianjidaibeijing font-22 color-green"></i>
</Tooltip>
}
</a>
{
pathCardsList.length=== key+1?"":<a className="fr ring-op-green mr20" onClick={()=>this.operations(item.down_path)}>
<Tooltip placement="bottom" title="向下移动">
<img src={getImageUrl("images/educoder/icon/movedown.svg")} className="fl mt2 ml4"/>
</Tooltip>
</a>
}
{key===0?"":
<a className="fr ring-op-green mr20" onClick={()=>this.operations(item.up_path)}>
<Tooltip placement="bottom" title="向上移动">
<img src={getImageUrl("images/educoder/icon/moveup.svg")} className="fl mt2 ml4"/>
</Tooltip>
</a>}
</a>:""
}
{
idsum === key && pathCardsedittype === true ?
this.props.detailInfoList===undefined?"":
this.props.current_user&&this.props.current_user.admin===true||this.props.current_user&&this.props.current_user.business===true?
<a className="fr" onClick={()=>this.delectpathCardsedit(item.stage_id)}>
<Tooltip placement="bottom" title="删除">
<i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i>
</Tooltip>
</a>:
this.props.detailInfoList.allow_statistics===true?
<a className="fr" onClick={()=>this.delectpathCardsedit(item.stage_id)}>
<Tooltip placement="bottom" title="删除">
<i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i>
</Tooltip>
</a>:""
: ''
}
</p>
{
idsum===key&&pathCardsedittype===true?'':
<div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
<p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>
<div>
{this.props.current_user&&this.props.current_user.admin===true?
item.shixuns_list && item.shixuns_list.map((line,index)=>{
return(
<div className="clearfix paragraph lineh-30" onMouseEnter={()=>this.showparagraph(key,index)} onMouseLeave={this.hideparagraph}>
<li className="fl li-width63">
<span className="progressRing mr10">
{
line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
:<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
}
</span>
<span className={"paragraph_name color-grey3"}>
<span className="subject_stage_shixun_index">{key+1}</span>-{index+1}&nbsp;&nbsp;{line.shixun_name}
</span>
</li>
<li className={showparagraph===false?"none":"fr status_li"}>
{
showparagraphkey===key&&showparagraphindex===index?<div>
<Link to={'/shixuns/'+line.identifier+'/challenges'} className="mr30 color-blue_4C shixun_detail pointer fl" target="_blank">查看详情</Link>
{line.shixun_status==="暂未公开"?"":<a onClick={()=>this.startgameid(line.identifier)} className="btn_auto user_bluebg_btn fl" id="shixun_operation" >开始实战</a>}
</div>:""
}
</li>
</div>)
}):item.shixuns_list && item.shixuns_list.map((line,index)=>{
return(
<div className="clearfix paragraph lineh-30" onMouseEnter={()=>this.showparagraph(key,index)} onMouseLeave={this.hideparagraph}>
<li className="fl li-width63">
<span className="progressRing mr10">
{
line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
:<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
}
</span>
<span className={line.allow_visit===false&&line.shixun_status==="暂未公开"?"paragraph_name color204":"paragraph_name color-grey3"}>
<span className="subject_stage_shixun_index">{key+1}</span>-{index+1}&nbsp;&nbsp;{line.shixun_name}
</span>
</li>
{
line.allow_visit===false&&line.shixun_status==="暂未公开"?
<li className="fr status_li"><span className="fr color204">暂未公开</span></li>
:line.allow_visit===false&&line.shixun_status==="已删除"?
<li className="fr status_li"><span className="fr color204">已删除</span></li>
:
<li className={showparagraph===false?"none":"fr status_li"}>
{
showparagraphkey===key&&showparagraphindex===index?this.props.detailInfoList&&this.props.detailInfoList.allow_statistics===false&&this.props.current_user&&this.props.current_user.user_identity==="学生"&&this.props.courses!=undefined?"":<div>
<Link to={'/shixuns/'+line.identifier+'/challenges'} className="mr30 color-blue_4C shixun_detail pointer fl" target="_blank">查看详情</Link>
{line.shixun_status==="暂未公开"?"":<a onClick={()=>this.startgameid(line.identifier)} className="btn_auto user_bluebg_btn fl" id="shixun_operation" >开始实战</a>}
</div>:""
}
</li>
}
</div>)
})
}
</div>
</div>
}
<DetailCardsEditAndEdit
{...this.props}
idsum={idsum}
keys={key}
pathCardsedittype={pathCardsedittype}
updatapathCardsedits={this.updatapathCardsedit}
pathlisteditlist={pathlistedit}
stageid={item.stage_id}
pathid={pathid}
Pathlisteditundefined={this.Pathlisteditundefined}
></DetailCardsEditAndEdit>
</div>
)
})
}
</div>
{ editbuttomtypeadd===true?'':
<DetailCardsEditAndAdd
{...this.props}
sum={ pathCardsList && pathCardsList.length+1}
pathid={pathid}
detailInfoList={this.props.detailInfoList}
getPathCardsLists={this.updatapathCardsedit}
editeditbuttomtypes={this.editeditbuttomtypecanle}
></DetailCardsEditAndAdd>
}
</div>
)
}
}
export default DetailCards;
// {
// idsum===key&&pathCardsedittype===true?'':
// <div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
// <p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>
//
//
// <DragDropContext onDragEnd={this.onDragEnd}>
// <Droppable
// droppableId={'ids'+key}
// >
// {(provided, snapshot) => (
//
// <div
// ref={provided.innerRef}
// {...provided.droppableProps}
// >
//
// {
// item.shixuns_list && item.shixuns_list.map((line,index)=>{
// return(
// <Draggable
// key={'id'+index}
// draggableId={'id'+index}
// index={index}
// >
// {(provided, snapshot) => (
// <div className="clearfix paragraph lineh-30"
// ref={provided.innerRef}
// {...provided.draggableProps}
// {...provided.dragHandleProps}
// >
//
// <li className="fl li-width63">
//
// <span className="progressRing mr10">
// {
// line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
// :<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
// }
//
// </span>
//
// <span className={line.shixun_status==="暂未公开"?"paragraph_name color204":"paragraph_name color-grey3"}>
// <span className="subject_stage_shixun_index">{key+1}</span>-{index+1}&nbsp;&nbsp;{line.shixun_name}
// </span>
//
// </li>
// {
// line.shixun_status==="暂未公开"?
// <li className="fr status_li"><span className="fr color204">暂未公开</span></li>
// :
// <li className="fr status_li">
// <a href={line.shixun_path} className="mr30 color-blue_4C shixun_detail pointer fl" target="_blank">查看详情</a>
// <a href={line.tpi_path} class="btn_auto user_bluebg_btn fl" id="shixun_operation" target="_blank">开始实战</a>
// </li>
// }
// {provided.placeholder}
// </div>
// )}
// </Draggable>
// )
// })
// }
// </div>
// )}
// </Droppable>
// </DragDropContext>
// </div>
// }

770
src/modules/paths/PathDetail/DetailCardsEditAndAdd.js
View File

@ -1,770 +0,0 @@
import React, { Component } from 'react';
import {getImageUrl} from 'educoder';
import {Modal,Input,Checkbox,Tooltip,Spin,notification} from "antd";
import { DragDropContext , Draggable, Droppable} from 'react-beautiful-dnd';
import Modals from '../../modals/Modals';
import Addshixuns from './Addshixuns';
import '../ShixunPaths.css';
import axios from 'axios';
import NewShixunModel from '../../courses/coursesPublic/NewShixunModel';
import GotoQQgroup from "../../../modal/GotoQQgroup";
const $ = window.$;
const Search = Input.Search;
//a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
// console.log(list)
// console.log(startIndex)
// console.log(endIndex)
let newlist=list;
const result = Array.from(newlist);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const getItemStyle = (isDragging, draggableStyle) => ({
// change background colour if dragging
background: isDragging ? '#dceeff' : '',
// styles we need to apply on draggables
...draggableStyle,
});
class DetailCardsEditAndAdd extends Component{
constructor(props){
super(props);
this.state={
selectShixun:false,
editPanel:false,
search:"",
type:0,
page:1,
ChooseShixunList:undefined,
hometypepvisible:true,
shixuns_listedit:[],
shixuns_listeditlist:[],
patheditarry:[],
stage_descriptions:undefined,
stage_names:undefined,
delectfunvalue:undefined,
Modalstype:false,
Modalstopval:"",
Modalsbottomval:"",
ChooseShixunListshixun_list:undefined,
stage_nametype:false,
descriptiontype:false,
Addshixunstype:false,
goshowqqgtounp:false,
}
this.onDragEnd = this.onDragEnd.bind(this);
}
//选择实训弹框
AddShixunBox = () =>{
this.setState({
selectShixun:true,
patheditarry:[],
})
// this.changeTag(0,"");
}
//关闭选择实训弹框
cloasShixunBox =()=>{
this.setState({
selectShixun:false,
patheditarry:[]
})
}
showNotification = (description, message = "提示", icon) => {
const data = {
message,
description
}
if (icon) {
data.icon = icon;
}
notification.open(data);
}
clickShixunchoose=(patheditarry)=>{
let{shixuns_listeditlist,shixuns_listedit}=this.state
let newshixuns_listedit=shixuns_listedit;
let list=shixuns_listeditlist
let url='/paths/append_to_stage.json'
axios.post(url,{
shixun_id:patheditarry
}).then((response) => {
if(response){
if(response.data){
let newshixun_lists=response.data.shixun_lists;
for(var j=0; j<newshixuns_listedit.length; j++){
for(var a=0; a<newshixun_lists.length; a++){
if(newshixuns_listedit[j].shixun_id===newshixun_lists[a].shixun_id){
// this.setState({
// Modalstype:true,
// Modalstopval:'请勿重复选择'+newshixun_lists[a].shixun_name+'实训',
// })
this.showNotification('请勿重复选择：'+newshixun_lists[a].shixun_name+'实训')
return
}
}
}
for(var z=0; z<newshixun_lists.length; z++){
newshixuns_listedit.push(newshixun_lists[z]);
}
for(var i=0; i<newshixun_lists.length; i++){
list.push(newshixun_lists[i].shixun_id);
}
this.setState({
shixuns_listedit:newshixuns_listedit,
shixuns_listeditlist:list,
patheditarry:[],
selectShixun:false,
page:1,
})
}
}
}).catch((error) => {
console.log(error)
});
}
//点击新建阶段
addStage=()=>{
this.setState({
editPanel:true
})
this.props.editeditbuttomtypes();
}
//取消新建阶段
cancelAddState = () =>{
this.setState({
editPanel:false,
stage_names:undefined,
stage_descriptions:undefined,
shixuns_listeditlist:[],
shixuns_listedit:[]
})
this.props.getPathCardsLists();
}
searchNameInput=(e)=>{
this.setState({
search:e.target.value
})
}
//勾选实训
shixunhomeworkedit=(list)=>{
let newpatheditarry=[];
for(var i=0; i<list.length;i++){
newpatheditarry.push(list[i])
}
this.setState({
patheditarry:newpatheditarry
})
}
//双向绑定
updatastage_names=(e)=>{
this.setState({
stage_names:e.target.value
})
}
updatastage_descriptions=(e)=>{
this.setState({
stage_descriptions:e.target.value
})
}
//删除实训
shixunslisteditdelect=(e)=>{
this.setState({
Modalstype:true,
Modalstopval:'是否删除该实训？',
Modalsbottomval:'',
delectfunvalue:e.target.id
})
}
shixunslisteditdelectfun=()=>{
let {delectfunvalue}=this.state;
let sum = parseInt(delectfunvalue);
let {shixuns_listedit,shixuns_listeditlist} =this.state;
let newshixuns_listedit=shixuns_listedit
let newshixuns_listeditlist=shixuns_listeditlist
newshixuns_listedit.splice(sum, 1);
newshixuns_listeditlist.splice(sum, 1);
this.setState({
shixuns_listedit:newshixuns_listedit,
shixuns_listeditlist:newshixuns_listeditlist
})
this.setState({
Modalstype:false,
Modalstopval:'',
Modalsbottomval:'',
delectfunvalue:undefined
})
}
cardsModalcancel=()=>{
this.setState({
Modalstype:false,
Modalstopval:'',
Modalsbottomval:'',
delectfunvalue:undefined,
Addshixunstype:false
})
}
//保存
clickShixunsaves=()=>{
let{stage_names,stage_descriptions,shixuns_listeditlist}=this.state;
let newstage_descriptions=stage_descriptions;
if(stage_names===""||stage_names===undefined){
this.setState({
stage_nametype:true
})
return
}else{
this.setState({
stage_nametype:false
})
}
if(newstage_descriptions!=undefined){
if(newstage_descriptions.length>300){
this.setState({
descriptiontype:true
})
return
}
}else{
newstage_descriptions=""
}
let pathId=this.props.pathid;
let url;
if(this.props.ysldetailcards===undefined){
url='/stages.json?subject_id='+pathId;
}else{
url=`/courses/${this.props.coursesId}/course_stages.json`;
}
axios.post(url, {
name:stage_names,
description:newstage_descriptions,
shixun_id:shixuns_listeditlist
}).then((response) => {
// window.location.href = "/paths/" + response.data.subject_id
this.cancelAddState();
this.setState({
stage_nametype:false,
descriptiontype:false
})
this.props.getPathCardsLists();
}).catch((error) => {
console.log(error)
});
}
onDragEnd (result) {
let {shixuns_listedit,shixuns_listeditlist} =this.state;
const listedit = reorder(
shixuns_listedit,
result.source.index,
result.destination.index
);
const listeditlist = reorder(
shixuns_listeditlist,
result.source.index,
result.destination.index
);
this.setState({
shixuns_listedit:listedit,
shixuns_listeditlist:listeditlist
})
}
Addshixuns=()=>{
// console.log("点击了新建实训Addshixuns");
if(this.props&&this.props.current_user&&this.props.current_user.is_shixun_marker===false){
this.setgoshowqqgtounp(true);
return;
}
this.setState({
Addshixunstype:true,
})
}
Getaddshixuns=(value,is_jupyter)=>{
let {
shixuns_listeditlist,
shixuns_listedit,
} = this.state
let newshixuns_listedit=shixuns_listedit;
let list=shixuns_listeditlist
let url='/paths/add_shixun_to_stage.json';
axios.post(url,{
name:value,
is_jupyter:is_jupyter
}).then((response) => {
if(response){
if(response.data){
newshixuns_listedit.push(response.data);
list.push(response.data.shixun_id);
this.setState({
shixuns_listedit:newshixuns_listedit,
shixuns_listeditlist:list,
patheditarry:[],
selectShixun:false,
page:1,
})
}
}
}).catch((error) => {
console.log(error)
});
}
// 处理弹框
setgoshowqqgtounp=(bool)=>{
this.setState({
goshowqqgtounp:bool
})
}
render(){
let {selectShixun,
editPanel,
ChooseShixunList,
type,
page,
search,
hometypepvisible,
stage_descriptions,
stage_names,
shixuns_listedit,
delectfunvalue,
Modalstype,
Modalstopval,
Modalsbottomval,
ChooseShixunListshixun_list,
stage_nametype,
descriptiontype,
goshowqqgtounp
} = this.state
return(
<div>
{
goshowqqgtounp===true?
<GotoQQgroup {...this.state} {...this.props} setgoshowqqgtounp={(bool)=>this.setgoshowqqgtounp(bool)}></GotoQQgroup>
:
""
}
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={this.cardsModalcancel}
modalSave={this.shixunslisteditdelectfun}
>
</Modals>
{this.state.Addshixunstype===true?<Addshixuns
modalCancel={this.cardsModalcancel}
Setaddshixuns={(value,is_jupyter)=>this.Getaddshixuns(value,is_jupyter)}
{...this.props}
{...this.state}
/>:""}
<style>
{
`
.mb10 {
margin-bottom: 10px !important;
}
`
}
</style>
{ editPanel &&
<div className="lesson-edit-content mb10">
<div className="clearfix edu-back-white pt30 pb30">
<p className="clearfix mb30 font-18 font-bd pl25 pr25">
<a className="fl ring-blue mr10 mt2">
<img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
</a>
<span className="fl">第{this.props.sum}部分</span>
{/*<a className="fr"><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>*/}
</p>
<div className="pl50 pr20 clearfix">
<p className="color-grey-6 font-16 mb20">章节名称</p>
<div className="df mb30">
<span className="mr30 color-orange pt10">*</span>
<div className="flex1 mr20">
<input maxLength="60" type="text" style={{width:'670px'}} className={stage_nametype===false?"input-100-45 greyInput":"input-100-45 greyInput bor-red"} name="stage_name" value={stage_names} onInput={this.updatastage_names} placeholder={"请输入第"+this.props.sum+"阶段名称,最大限制60个字符"}/>
<div className={stage_nametype===true?"red":'none'}>名称不能为空</div>
</div>
<div style={{"width":"60px"}}><span className="color-orange fl mt8 none" id="stage_name_notice"><i className="iconfont icon-tishi font-14 mr3"></i>必填项</span></div>
</div>
<p className="color-grey-6 font-16 mb20">描述</p>
<div className="width89 mb30 pl38">
<textarea className={descriptiontype===false?"winput-100-130":"winput-100-130 bor-red"}
style={{width:'670px'}}
name="stage_des"
value={stage_descriptions}
onInput={this.updatastage_descriptions}
placeholder={"请输入第"+this.props.sum+"阶段描述"}></textarea>
<div className={descriptiontype===true?"red":"none"}>描述不能超多最大限制300个字符</div>
</div>
<p className="clearfix mb10">
<a onClick={()=>this.Addshixuns()} className="fl defalutGreyBorder color-grey-6 ml37">
<i className="iconfont icon-tianjiafangda fl mr5"></i>
新建实训项目</a>
</p>
<p className="clearfix mb10">
<a onClick={()=>this.AddShixunBox()} className="fl defalutGreyBorder color-grey-6 ml37">
<i className="iconfont icon-tianjiafangda fl mr5"></i>
选用实训项目</a>
</p>
<p className="mb30">
<span id="sx_notice" className="ml37 color-grey-9 mt5 ">下面实训可以通过拖拽进行排序调整</span>
</p>
{selectShixun===true?<style>
{
`
body {
overflow: hidden !important;
}
`
}
</style>:""}
{selectShixun===true?<NewShixunModel
NewShixunModelType={selectShixun}
type={'shixuns'}
hideNewShixunModelType={this.cloasShixunBox}
pathShixun={this.clickShixunchoose}
{...this.props}
></NewShixunModel>:""}
</div>
{/* 可拖拽选择实训列表*/}
{shixuns_listedit===undefined?'':
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable
droppableId={'ids2'}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
{shixuns_listedit.map((item,key)=>{
return(
<Draggable
key={'id'+key}
draggableId={'id'+key}
index={key}
>
{(provided, snapshot) => (
<div className="clearfix paragraph lineh-30"
key={key}
ref={provided.innerRef}
{...provided.draggableProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
{...provided.dragHandleProps}
>
<li className="fl li-width63">
<span className="progressRing mr10">
<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
</span>
<a className={ "paragraph_name paragraph_nameid"}
href={/shixuns/+item.shixun_identifier}
target="_blank"
>
<span className="subject_stage_shixun_index">
<span className="subject_stage_shixun_index">{this.props.sum}</span>-{key+1}&nbsp;&nbsp;{item.shixun_name}
</span>
</a>
</li>
<li className="fr status_li">
<Tooltip placement="bottom" title="删除">
<i className="iconfont icon-shanchu color-grey-c font-14 font-n cursor" id={key} onClick={this.shixunslisteditdelect}></i>
</Tooltip>
</li>
{provided.placeholder}
</div>
)}
</Draggable>
)})}
</div>
)}
</Droppable>
</DragDropContext>
}
{/*老版本实训新建卡片*/}
{/*<div className="adding-stage-item clearfix" id="sortable">*/}
{/*<div className="square-Item smallSquare">*/}
{/*<a className="ring-grey font-16 color-white colseThispart">×</a>*/}
{/*<img alt="Shixun0" className="partimg" src={getImageUrl("/images/educoder/index/shixun/shixun0.jpg?1546937140")}/>*/}
{/*<div className="square-main">*/}
{/*<p className="task-hide"><a href="/shixuns/9374npmg" className="justify color-grey-name" target="_blank">frerere</a></p>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
<p className="fr clearfix mt30">
<div className="clearfix">
<a className="defalutCancelbtn fl mr30" onClick={this.cancelAddState}>取消</a>
<a className="defalutSubmitbtn fl mr20" onClick={this.clickShixunsaves}>保存</a>
</div>
</p>
</div>
</div>
}
{this.props.detailInfoList===undefined?"":this.props.detailInfoList.allow_statistics===true?editPanel===false?<div className="click_add color-grey-9" onClick={this.addStage}>
<span className="color-blue_4C" >+点击新建阶段</span>（选择1至多个实训项目，组成一个阶段）
</div>:'':''}
{this.props.detailInfoList===undefined&&this.props.isAdmin()&&editPanel===false?<div className="click_add color-grey-9" onClick={this.addStage}>
<span className="color-blue_4C" >+点击新建阶段</span>（选择1至多个实训项目，组成一个阶段）
</div>:''}
</div>
)
}
}
export default DetailCardsEditAndAdd;
//
// <Modal
// keyboard={false}
// title="选择实训"
// visible={selectShixun}
// closable={false}
// footer={null}
// width="840px"
// destroyOnClose={true}
// >
// <Spin spinning={hometypepvisible} size="large" style={{marginTop:'15%'}}>
// <div className="newupload_conbox">
// <div className="clearfix mb20 shixun_work_div newshixun_tab_div cdefault" style={{"marginRight":"4px"}} id="shixun_tab_div">
// <li className="fl mr5 mt5"> <a onClick={()=>this.changeTag(0,`${search}`)} className={ parseInt(type)===0 ? "active edu-filter-cir-grey font-12":"edu-filter-cir-grey font-12"}>全部</a></li>
// {
// ChooseShixunList && ChooseShixunList.tags.map((item,key)=>{
// return(
// <li className="fl mr5 mt5" key={key}>
// <a onClick={()=>this.changeTag(`${item.tag_id}`,`${search}`)} className={ parseInt(type) === parseInt(item.tag_id) ? "active edu-filter-cir-grey font-12":"edu-filter-cir-grey font-12"}>{item.tag_name}</a>
// </li>
// )
// })
// }
//
//
// </div>
// <div className="clearfix mb20" id="shixun_search_form_div">
// <span className="fl color-grey-9 font-16 mt3">
// <span>共</span>
// <span className="color-orange-tip">{ChooseShixunList && ChooseShixunList.shixuns_count}</span>
// <span>个实训</span>
// </span>
// <div className="fr search-new mb0">
// <Search
// placeholder="请输入创建者或者实训名称进行搜索"
// onInput={this.searchNameInput}
// onSearch={()=>this.changeTag(`${type}`,`${search}`)}
// style={{width: '115%'}}
// ></Search>
// </div>
// </div>
// <ul className="clearfix greybackHead edu-txt-center" style={{marginBottom: '0px'}}>
// <li className="fl with40 paddingleft22">实训名称</li>
// <li className="fl with30 edu-txt-left">使用院校</li>
// <li className="fl with10">使用人数</li>
// <li className="fl with10">评价等级</li>
// <li className="fl with10"></li>
// </ul>
//
// <style>
// {
// `
// .over180{min-height: 180px;max-height: 180px;overflow-y: auto}
// `
// }
// </style>
// {ChooseShixunListshixun_list && ChooseShixunListshixun_list.length===0?"": <div className="over180 pl20 pr20"
// onScroll={this.contentViewScrolladd}
// >
// <Checkbox.Group style={{ width: '100%' }} onChange={this.shixunhomeworkedit}>
// {
// ChooseShixunListshixun_list && ChooseShixunListshixun_list.map((item,key)=>{
// return(
// <div className="clearfix edu-txt-center lineh-40 bor-bottom-greyE" key={key}>
// <li className="fl with40">
// <Checkbox
// id={"shixun_input_"+item.shixun_id}
// value={item.shixun_id}
// key={item.shixun_id}
// className="fl task-hide edu-txt-left"
// style={{"width":"298px"}}
// name="shixun_homework[]"
// >
// <label style={{"textAlign":"left","color":"#05101A"}} className="task-hide color-grey-name" title={item.shixun_name}>{item.shixun_name}</label>
// </Checkbox>
// </li>
// <li className="fl with30 edu-txt-left task-hide paddingl5">{item.school_users}</li>
// <li className="fl with10 paddingl10">{item.myshixuns_count}</li>
// <li className="fl with10 color-orange-tip paddingl10">{item.preference}</li>
// <li className="fl with10"><a className="color-blue" href={"/shixuns/"+item.identifier+"/challenges"} target="_blank">详情</a></li>
// </div>
// )
// })
// }
// </Checkbox.Group>
// </div>}
// <div className="mt20 marginauto clearfix edu-txt-center">
// <a className="pop_close task-btn mr30 margin-tp26" onClick={this.cloasShixunBox}>取消</a>
// <a className="task-btn task-btn-orange margin-tp26" id="submit_send_shixun" onClick={this.clickShixunchoose}>确定</a>
// </div>
// </div>
// </Spin>
// </Modal>
// contentViewScrolladd=(e)=>{
// const {ChooseShixunList}=this.state;
// //滑动到底判断
// let newscrollTop=parseInt(e.currentTarget.scrollTop);
// let allclientHeight=e.currentTarget.clientHeight+newscrollTop;
//
// if(e.currentTarget.scrollHeight-allclientHeight===0||e.currentTarget.scrollHeight-allclientHeight===1||e.currentTarget.scrollHeight-allclientHeight===-1){
//
// if(ChooseShixunList.shixun_list.length===0){
// return
// }else{
// // console.log("到达底部");
// this.setState({
// hometypepvisible:true
// })
// let pathId=this.props.pathid;
// let {search,page,type,ChooseShixunListshixun_list}=this.state;
// let newpage=page+1;
// let newChooseShixunListshixun_list=ChooseShixunListshixun_list;
// let url='/paths/'+pathId+'/choose_subject_shixun.json?page='+newpage
// if(search!="" && search!=undefined){
// url+="&search="+search;
// }
// if(type!=0){
// url+="&type="+type;
// }
// axios.get(encodeURI(url)).then((result)=>{
// if(result.status===200){
// let list =result.data.shixun_list;
//
// for(var i=0; i<list.length; i++){
// newChooseShixunListshixun_list.push(list[i])
// }
// this.setState({
// ChooseShixunList:result.data,
// hometypepvisible:false,
// type:type,
// search:search,
// page:newpage,
// ChooseShixunListshixun_list:newChooseShixunListshixun_list
// })
// }
// }).catch((error)=>{
// console.log(error);
// })
//
// }
//
// }
//
// }
//
// //打开选择实训弹框初始化tag标签和列表
// changeTag=(id,search)=>{
//
// this.setState({
// ChooseShixunListshixun_list:[],
// page:1,
// hometypepvisible:true,
// })
//
// let pathId=this.props.pathid;
//
// let url='/paths/'+pathId+'/choose_subject_shixun.json?page='+1
// if(search!="" && search!=undefined){
// url+="&search="+search;
// }
// if(id!=0){
// url+="&type="+id;
// }
//
// axios.get(encodeURI(url)).then((result)=>{
// if(result.status===200){
// this.setState({
// ChooseShixunList:result.data,
// hometypepvisible:false,
// type:id,
// ChooseShixunListshixun_list:result.data.shixun_list
// })
// }
// }).catch((error)=>{
// console.log(error);
// })
// }

814
src/modules/paths/PathDetail/DetailCardsEditAndEdit.js
View File

@ -1,814 +0,0 @@
import React, { Component } from 'react';
import { getImageUrl } from 'educoder';
import { Modal, Input, Checkbox, Tooltip, Spin, notification } from "antd";
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import Modals from '../../modals/Modals';
import Addshixuns from './Addshixuns';
import NewShixunModel from '../../courses/coursesPublic/NewShixunModel';
import GotoQQgroup from "../../../modal/GotoQQgroup";
import '../ShixunPaths.css';
import axios from 'axios';
const $ = window.$;
const Search = Input.Search;
//a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
// console.log(list)
// console.log(startIndex)
// console.log(endIndex)
let newlist = list;
const result = Array.from(newlist);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const getItemStyle = (isDragging, draggableStyle) => ({
// change background colour if dragging
background: isDragging ? '#dceeff' : '',
// styles we need to apply on draggables
...draggableStyle,
});
class DetailCardsEditAndEdit extends Component {
constructor(props) {
super(props);
this.state = {
selectShixun: false,
editPanel: true,
search: "",
type: 0,
page: 1,
ChooseShixunList: undefined,
hometypepvisible: true,
shixuns_listedit: undefined,
patheditarry: [],
stage_name: undefined,
stage_description: undefined,
stageid: undefined,
Modalstype: false,
Modalstopval: '',
Modalsbottomval: '',
delectfunvalue: undefined,
ChooseShixunListshixun_list: undefined,
stage_nametype: false,
descriptiontype: false,
Addshixunstype: false,
goshowqqgtounp: false,
}
this.onDragEnd = this.onDragEnd.bind(this);
}
//选择实训弹框
AddShixunBox = () => {
this.setState({
selectShixun: true,
patheditarry: []
})
// this.changeTag(0,"");
}
//关闭选择实训弹框
cloasShixunBox = () => {
this.setState({
selectShixun: false,
patheditarry: []
})
}
Addshixuns = () => {
if (this.props && this.props.current_user && this.props.current_user.is_shixun_marker === false) {
this.setgoshowqqgtounp(true);
return;
}
this.setState({
Addshixunstype: true,
})
}
shixunhomeworkedit = (list) => {
let newpatheditarry = [];
for (var i = 0; i < list.length; i++) {
newpatheditarry.push(list[i])
}
this.setState({
patheditarry: newpatheditarry
})
}
componentDidMount() {
}
componentWillReceiveProps(nextProps, nextState) {
if (nextProps.pathlisteditlist != undefined) {
let list = []
for (var i = 0; i < nextProps.pathlisteditlist.shixuns_list.length; i++) {
list.push(nextProps.pathlisteditlist.shixuns_list[i].shixun_id)
}
// console.log("DetailCardsEditAndEdit");
// console.log("componentWillReceiveProps(nextProps, nextState)");
// console.log("nextProps.pathlisteditlist.stage_description");
this.setState({
shixuns_listedit: nextProps.pathlisteditlist.shixuns_list,
shixuns_listeditlist: list,
stage_name: nextProps.pathlisteditlist.stage_name,
stage_description: nextProps.pathlisteditlist.stage_description,
stageid: nextProps.stageid
});
this.props.Pathlisteditundefined();
}
}
//双向绑定
updatastage_name = (e) => {
this.setState({
stage_name: e.target.value
})
}
updatastage_description = (e) => {
//输入数据绑定
this.setState({
stage_description: e.target.value
})
}
clickShixunchoose = (patheditarry) => {
let { shixuns_listedit, shixuns_listeditlist } = this.state
let newshixuns_listedit = shixuns_listedit;
let list = shixuns_listeditlist
let url = '/paths/append_to_stage.json'
axios.post(url, {
shixun_id: patheditarry
}).then((response) => {
let newshixun_lists = response.data.shixun_lists;
for (var j = 0; j < newshixuns_listedit.length; j++) {
for (var a = 0; a < newshixun_lists.length; a++) {
if (newshixuns_listedit[j].shixun_id === newshixun_lists[a].shixun_id) {
// this.setState({
// Modalstype:true,
// Modalstopval:'请勿重复选择'+newshixun_lists[a].shixun_name+'实训',
// })
this.showNotification('请勿重复选择：' + newshixun_lists[a].shixun_name + '实训')
return
}
}
}
for (var z = 0; z < newshixun_lists.length; z++) {
newshixuns_listedit.push(newshixun_lists[z])
}
for (var i = 0; i < newshixun_lists.length; i++) {
list.push(newshixun_lists[i].shixun_id)
}
this.setState({
shixuns_listedit: newshixuns_listedit,
shixuns_listeditlist: list,
patheditarry: [],
selectShixun: false
})
}).catch((error) => {
console.log(error)
});
}
//保存
clickShixunsave = () => {
let { stage_name, stage_description, stageid, shixuns_listeditlist } = this.state;
let newstage_descriptions = stage_description;
if (stage_name === "" || stage_name === undefined) {
this.setState({
stage_nametype: true
})
return
}
if (newstage_descriptions != undefined) {
if (newstage_descriptions.length > 300) {
this.setState({
descriptiontype: true
})
return
}
} else {
newstage_descriptions = ""
}
let url;
if (this.props.ysldetailcards === undefined) {
url = '/stages/' + stageid + '.json';
} else {
url = `/course_stages/${stageid}.json`;
}
axios.put(url, {
name: stage_name,
description: newstage_descriptions,
shixun_id: shixuns_listeditlist
}).then((response) => {
// window.location.href = "/paths/" + response.data.subject_id
this.setState({
stage_name: undefined,
stage_description: undefined,
shixuns_listeditlist: [],
shixuns_listedit: undefined,
stage_nametype: false,
descriptiontype: false
})
this.props.updatapathCardsedits()
}).catch((error) => {
console.log(error)
});
}
//删除实训
shixunslisteditdelect = (e) => {
this.setState({
Modalstype: true,
Modalstopval: '是否删除该实训？',
Modalsbottomval: '',
delectfunvalue: e.target.id
})
}
shixunslisteditdelectfun = () => {
let { delectfunvalue } = this.state;
let sum = parseInt(delectfunvalue);
let { shixuns_listedit, shixuns_listeditlist } = this.state;
let newshixuns_listedit = shixuns_listedit
let newshixuns_listeditlist = shixuns_listeditlist
newshixuns_listedit.splice(sum, 1);
newshixuns_listeditlist.splice(sum, 1);
this.setState({
shixuns_listedit: newshixuns_listedit,
shixuns_listeditlist: newshixuns_listeditlist,
Modalstype: false,
Modalstopval: ' ',
Modalsbottomval: '',
delectfunvalue: undefined
})
}
cardsModalcancel = () => {
this.setState({
Modalstype: false,
Modalstopval: '',
Modalsbottomval: '',
delectfunvalue: undefined,
Addshixunstype: false
})
}
cardsModalsave = () => {
this.setState({
Modalstype: false,
Modalstopval: '',
Modalsbottomval: ''
})
}
onDragStart = () => {
/*...*/
};
onDragUpdate = () => {
/*...*/
}
onDragEnd(result) {
let { shixuns_listedit, shixuns_listeditlist } = this.state;
const listedit = reorder(
shixuns_listedit,
result.source.index,
result.destination.index
);
const listeditlist = reorder(
shixuns_listeditlist,
result.source.index,
result.destination.index
);
this.setState({
shixuns_listedit: listedit,
shixuns_listeditlist: listeditlist
})
}
showNotification = (description, message = "提示", icon) => {
const data = {
message,
description
}
if (icon) {
data.icon = icon;
}
notification.open(data);
}
Getaddshixuns = (value, is_jupyter) => {
let {
shixuns_listeditlist,
shixuns_listedit,
} = this.state
let newshixuns_listedit = shixuns_listedit;
let list = shixuns_listeditlist
let url = '/paths/add_shixun_to_stage.json';
axios.post(url, {
name: value,
is_jupyter: is_jupyter
}).then((response) => {
if (response) {
if (response.data) {
newshixuns_listedit.push(response.data);
list.push(response.data.shixun_id);
this.setState({
shixuns_listedit: newshixuns_listedit,
shixuns_listeditlist: list,
patheditarry: [],
selectShixun: false,
page: 1,
})
}
}
}).catch((error) => {
console.log(error)
});
}
// 处理弹框
setgoshowqqgtounp = (bool) => {
this.setState({
goshowqqgtounp: bool
})
}
render() {
let { selectShixun,
editPanel,
ChooseShixunList,
type,
page,
search,
hometypepvisible,
shixuns_listedit,
patheditarry,
stage_name,
stage_description,
Modalstype,
Modalstopval,
Modalsbottomval,
delectfunvalue,
ChooseShixunListshixun_list,
stage_nametype,
descriptiontype,
goshowqqgtounp
} = this.state
return (
<div>
{
goshowqqgtounp === true ?
<GotoQQgroup {...this.state} {...this.props} setgoshowqqgtounp={(bool) => this.setgoshowqqgtounp(bool)}></GotoQQgroup>
:
""
}
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={this.cardsModalcancel}
modalSave={delectfunvalue === undefined ? () => this.cardsModalsave() : () => this.shixunslisteditdelectfun()}
>
</Modals>
{this.state.Addshixunstype === true ? <Addshixuns
modalCancel={this.cardsModalcancel}
Setaddshixuns={(value, is_jupyter) => this.Getaddshixuns(value, is_jupyter)}
{...this.props}
{...this.state}
/> : ""}
<style>
{
`
.mb10 {
margin-bottom: 10px !important;
}
`
}
</style>
{this.props.idsum === this.props.keys && this.props.pathCardsedittype === true ?
<div className="lesson-edit-content mb10">
<div className="clearfix edu-back-white">
<p className="clearfix mb30 font-18 font-bd pl25 pr25">
{/*<a className="fl ring-blue mr10 mt2">*/}
{/*<img src={getImageUrl("/images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>*/}
{/*</a>*/}
{/*<a className="fr"><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>*/}
</p>
<div className="pl50 pr20 clearfix">
{/*<p className="color-grey-6 font-16 mb20">章节名称</p>*/}
<div className="df mb30">
<span className="mr30 color-orange pt10">*</span>
<div className="flex1 mr20">
<input maxLength="60" type="text" style={{ width: '670px' }} className={stage_nametype === false ? "input-100-45 greyInput" : "input-100-45 greyInput bor-red"} name="stage_name" value={stage_name} onInput={this.updatastage_name} placeholder={"请输入第" + (this.props.keys + 1) + "阶段名称,最大限制60个字符"} />
<div className={stage_nametype === true ? "red" : 'none'}>名称不能为空</div>
</div>
<div style={{ "width": "60px" }}><span className="color-orange fl mt8 none" id="stage_name_notice"><i className="iconfont icon-tishi font-14 mr3"></i>必填项</span></div>
</div>
<p className="color-grey-6 font-16 mb20">描述</p>
<div className="width89 mb30 pl35">
<textarea className={descriptiontype === false ? "winput-100-130" : "winput-100-130 bor-red"} name="stage_des"
value={stage_description}
style={{ width: '670px' }}
onInput={this.updatastage_description}
placeholder={"请输入第" + (this.props.keys + 1) + "阶段描述"}
></textarea>
<div className={descriptiontype === true ? "red" : "none"}>描述不能超多最大限制300个字符</div>
</div>
<p className="clearfix mb10">
<a onClick={this.Addshixuns} className="fl defalutGreyBorder color-grey-6 ml37">
<i className="iconfont icon-tianjiafangda fl mr5"></i>新建实训项目
</a>
</p>
<p className="clearfix mb10">
<a onClick={this.AddShixunBox} className="fl defalutGreyBorder color-grey-6 ml37">
<i className="iconfont icon-tianjiafangda fl mr5"></i>选用实训项目
</a>
</p>
<p className="mb30">
<span id="sx_notice" className="ml37 color-grey-9 mt5 ">下面实训可以通过拖拽进行排序调整</span>
</p>
{selectShixun === true ? <style>
{
`
body {
overflow: hidden !important;
}
`
}
</style> : ""}
{selectShixun === true ? <NewShixunModel
NewShixunModelType={selectShixun}
type={'shixuns'}
hideNewShixunModelType={this.cloasShixunBox}
pathShixun={this.clickShixunchoose}
{...this.props}
></NewShixunModel> : ""}
</div>
{/* 可拖拽选择实训列表*/}
{shixuns_listedit === undefined ? '' :
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable
droppableId={'ids1'}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
{shixuns_listedit.map((item, key) => {
return (
<Draggable
key={'id' + key}
draggableId={'id' + key}
index={key}
>
{(provided, snapshot) => (
<div className="clearfix paragraph lineh-30"
key={key}
ref={provided.innerRef}
{...provided.draggableProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
{...provided.dragHandleProps}
>
<li className="fl li-width63">
<span className="progressRing mr10">
<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
</span>
<a className={"paragraph_name paragraph_nameid"}
href={/shixuns/ + item.shixun_identifier}
target="_blank"
>
<span className="subject_stage_shixun_index">
<span className="subject_stage_shixun_index">{this.props.idsum + 1}</span>-{key + 1}&nbsp;&nbsp;{item.shixun_name}
</span>
</a>
</li>
<li className="fr status_li">
<Tooltip placement="bottom" title="删除">
<i className="iconfont icon-shanchu color-grey-c font-14 font-n cursor" id={key} onClick={this.shixunslisteditdelect}></i>
</Tooltip>
</li>
{provided.placeholder}
</div>
)}
</Draggable>
)
})}
</div>
)}
</Droppable>
</DragDropContext>
}
{/*<div className="adding-stage-item clearfix" id="sortable">*/}
{/*<div className="square-Item smallSquare">*/}
{/*<a className="ring-grey font-16 color-white colseThispart">×</a>*/}
{/*<img alt="Shixun0" className="partimg" src={getImageUrl("/images/educoder/index/shixun/shixun0.jpg?1546937140")}/>*/}
{/*<div className="square-main">*/}
{/*<p className="task-hide"><a href="/shixuns/9374npmg" className="justify color-grey-name" target="_blank">frerere</a></p>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
{/*<p className="clearfix pl50 mb40 mt20">*/}
{/*<a className="color-grey-c mr30 fl mt5" onClick={this.props.updatapathCardsedits}>取消</a>*/}
{/*<a className="fl task-btn task-btn-orange" onClick={this.clickShixunsave}>保存</a>*/}
{/*</p>*/}
<p className="fr clearfix mt30">
<div className="clearfix ">
<a className="defalutCancelbtn fl mr30" onClick={this.props.updatapathCardsedits}>取消</a>
<a className="defalutSubmitbtn fl mr20" onClick={this.clickShixunsave}>保存</a>
</div>
</p>
</div>
</div>
: ''}
</div>
)
}
}
export default DetailCardsEditAndEdit;
// {
// shixuns_listedit===undefined?'':shixuns_listedit.map((item,key)=>{
// return(
// <div className="clearfix paragraph lineh-30" key={key}>
//
// <li className="fl li-width63">
//
// <span className="progressRing mr10">
// <i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
// </span>
//
// <a className={ "paragraph_name paragraph_nameid"}
// href={/shixuns/+item.shixun_identifier}
// >
//
// <span className="subject_stage_shixun_index">
//
// <span className="subject_stage_shixun_index">{this.props.idsum+1}</span>-{key+1}&nbsp;&nbsp;{item.shixun_name}
//
// </span>
//
// </a>
//
// </li>
//
// <li className="fr status_li">
// <Tooltip placement="bottom" title="删除">
// <i className="iconfont icon-shanchu color-grey-c font-14 font-n cursor" key={key} onClick={this.shixunslisteditdelect}></i>
// </Tooltip>
// </li>
//
// </div>
// )
// })
// }
// <Modal
// keyboard={false}
// title="选择实训"
// visible={selectShixun}
// closable={false}
// footer={null}
// width="840px"
// destroyOnClose={true}
// >
// <Spin spinning={hometypepvisible} size="large" style={{marginTop:'15%'}}>
// <div className="newupload_conbox">
// <div className="clearfix mb20 shixun_work_div newshixun_tab_div cdefault" style={{"marginRight":"4px"}} id="shixun_tab_div">
// <li className="fl mr5 mt5"> <a onClick={()=>this.changeTag(0,`${search}`)} className={ parseInt(type)===0 ? "active edu-filter-cir-grey font-12":"edu-filter-cir-grey font-12"}>全部</a></li>
// {
// ChooseShixunList && ChooseShixunList.tags.map((item,key)=>{
// return(
// <li className="fl mr5 mt5" key={key}>
// <a onClick={()=>this.changeTag(`${item.tag_id}`,`${search}`)} className={ parseInt(type) === parseInt(item.tag_id) ? "active edu-filter-cir-grey font-12":"edu-filter-cir-grey font-12"}>{item.tag_name}</a>
// </li>
// )
// })
// }
//
//
// </div>
// <div className="clearfix mb20" id="shixun_search_form_div">
// <span className="fl color-grey-9 font-16 mt3">
// <span>共</span>
// <span className="color-orange-tip">{ChooseShixunList && ChooseShixunList.shixuns_count}</span>
// <span>个实训</span>
// </span>
// <div className="fr search-new mb0">
// <Search
// placeholder="请输入创建者或者实训名称进行搜索"
// onInput={this.searchNameInput}
// onSearch={()=>this.changeTag(`${type}`,`${search}`)}
// style={{width: '115%'}}
// ></Search>
// </div>
// </div>
// <ul className="clearfix greybackHead edu-txt-center" style={{marginBottom: '0px'}}>
// <li className="fl with40 paddingleft22">实训名称</li>
// <li className="fl with30 edu-txt-left">使用院校</li>
// <li className="fl with10">使用人数</li>
// <li className="fl with10">评价等级</li>
// <li className="fl with10"></li>
// </ul>
//
// <style>
// {
// `
// .over180{min-height: 180px;max-height: 180px;overflow-y: auto}
// `
// }
// </style>
// {ChooseShixunListshixun_list && ChooseShixunListshixun_list.length===0?"":<div className="over180 pl20 pr20"
// onScroll={this.contentViewScrolledit}
// >
// <Checkbox.Group style={{ width: '100%' }} onChange={this.shixunhomeworkedit}>
// {
// ChooseShixunListshixun_list && ChooseShixunListshixun_list.map((item,key)=>{
// return(
// <div className="clearfix edu-txt-center lineh-40 bor-bottom-greyE" key={key}>
// <li className="fl with40">
// <Checkbox
// id={"shixun_input_"+item.shixun_id}
// value={item.shixun_id}
// key={item.shixun_id}
// className="fl task-hide edu-txt-left"
// style={{"width":"298px"}}
// name="shixun_homework[]"
// >
// <label style={{"textAlign":"left","color":"#05101A"}} className="task-hide color-grey-name" title={item.shixun_name}>{item.shixun_name}</label>
// </Checkbox>
// </li>
// <li className="fl with30 edu-txt-left task-hide paddingl5">{item.school_users}</li>
// <li className="fl with10 paddingl10">{item.myshixuns_count}</li>
// <li className="fl with10 color-orange-tip paddingl10">{item.preference}</li>
// <li className="fl with10"><a className="color-blue" href={"/shixuns/"+item.identifier+"/challenges"} target="_blank">详情</a></li>
// </div>
// )
// })
// }
// </Checkbox.Group>
// </div>}
// <div className="mt20 marginauto clearfix edu-txt-center">
// <a className="pop_close task-btn mr30 margin-tp26" onClick={this.cloasShixunBox}>取消</a>
// <a className="task-btn task-btn-orange margin-tp26" id="submit_send_shixun" onClick={this.clickShixunchoose}>确定</a>
// </div>
// </div>
// </Spin>
// </Modal>
// //打开选择实训弹框初始化tag标签和列表
// changeTag(id,search){
//
// this.setState({
// ChooseShixunListshixun_list:[],
// page:1,
// hometypepvisible:true
// })
// let pathId=this.props.pathid;
// let url='/paths/'+pathId+'/choose_subject_shixun.json?page='+1
// if(search!="" && search!=undefined){
// url+="&search="+search;
// }
// if(id!=0){
// url+="&type="+id;
// }
// axios.get(encodeURI(url)).then((result)=>{
// if(result.status===200){
// this.setState({
// ChooseShixunList:result.data,
// hometypepvisible:false,
// type:id,
// search:search,
// ChooseShixunListshixun_list:result.data.shixun_list
// })
// }
// }).catch((error)=>{
// console.log(error);
// })
// }
// contentViewScrolledit=(e)=>{
// //滑动到底判断
// const {ChooseShixunList}=this.state;
// let newscrollTop=parseInt(e.currentTarget.scrollTop);
// let allclientHeight=e.currentTarget.clientHeight+newscrollTop;
//
// if(e.currentTarget.scrollHeight-allclientHeight===0||e.currentTarget.scrollHeight-allclientHeight===1||e.currentTarget.scrollHeight-allclientHeight===-1){
//
// if(ChooseShixunList.shixun_list.length===0){
// return
// }else{
// this.setState({
// hometypepvisible:true
// })
// // console.log("到达底部");
//
// let {page,type,search,ChooseShixunListshixun_list}=this.state;
//
// let newpage=page+1;
//
// let pathId=this.props.pathid;
//
// let newChooseShixunListshixun_list=ChooseShixunListshixun_list;
//
// let url='/paths/'+pathId+'/choose_subject_shixun.json?page='+newpage
//
// if(search!="" && search!=undefined){
// url+="&search="+search;
// }
//
// if(type!=0){
// url+="&type="+type;
// }
// axios.get(encodeURI(url)).then((result)=>{
// if(result.status===200){
//
// let list =result.data.shixun_list;
//
// for(var i=0; i<list.length; i++){
// newChooseShixunListshixun_list.push(list[i])
// }
// this.setState({
// ChooseShixunList:result.data,
// hometypepvisible:false,
// type:type,
// page:newpage,
// search:search,
// ChooseShixunListshixun_list:newChooseShixunListshixun_list
// })
// }
// }).catch((error)=>{
// console.log(error);
// })
//
//
// }
//
//
//
// }
//
// }

174
src/modules/paths/PathDetail/DetailCardsTemp.js
View File

@ -1,174 +0,0 @@
import React, { Component } from 'react';
import {getImageUrl} from 'educoder';
import { Tooltip } from 'antd';
import '../../paths/ShixunPaths.css';
import DetailCardsEditAndAdd from './DetailCardsEditAndAdd';
import axios from 'axios';
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const $ = window.$
class DetailCards extends Component{
constructor(props){
super(props)
this.state={
pathCardsList:undefined
}
}
getPathCardsList(){
let pathid = this.props.match.params.PathId
// let pathid= 28;
let url=`/stages.json?subject_id=`+pathid;
axios.get(url).then((result)=>{
if(result.status===200){
this.setState({
pathCardsList:result.data.stages
})
}
}).catch((error)=>{
console.log(error);
})
}
for_paragraph = (index) =>{
$("#detail_for_paragraph_"+index).slideToggle(500);
}
componentDidMount(){
this.getPathCardsList();
}
onDragEnd = (result, shixunIndex) => {
// console.log(result)
// dropped outside the list
if (!result.destination) {
console.log('dropped outside the list')
return;
}
if (result.destination.index === result.source.index) {
console.log('the same')
return;
}
// TODO exchange axios request
const shixuns_list = reorder(
this.state.pathCardsList[shixunIndex].shixuns_list,
result.source.index,
result.destination.index
);
const pathCardsList = this.state.pathCardsList
pathCardsList[shixunIndex].shixuns_list = shixuns_list;
this.setState({
pathCardsList
});
}
render(){
let { pathCardsList }=this.state;
return(
<div>
<div className="lesson-saved-list">
{
pathCardsList && pathCardsList.map((item,key)=>{
return(
<div className="lesson-saved-list-item" id={"stage_div_"+key}>
<p className="clearfix title-line">
<a className="fl ring-blue mr10 mt2">
<img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
</a>
<span className="font-18 font-bd">{item.stage_name}</span>
<Tooltip placement="bottom" title={"编辑"}>
<a className="fr mtf3">
<i className="iconfont icon-bianjidaibeijing font-22 color-green"></i>
</a>
</Tooltip>
<Tooltip placement="bottom" title={"向下移动"}>
<a href="" className="fr ring-op-green mr20">
<img src={getImageUrl("images/educoder/icon/movedown.svg")} className="fl mt2 ml4"/>
</a>
</Tooltip>
<Tooltip placement="bottom" title={"向上移动"}>
<a href="" className="fr ring-op-green mr20">
<img src={getImageUrl("images/educoder/icon/moveup.svg")} className="fl mt2 ml4"/>
</a>
</Tooltip>
</p>
<div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
<p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>
{/*
两个 ref={provided.innerRef}
item 加 {...provided.draggableProps}
handler 加 {...provided.dragHandleProps}
*/}
<DragDropContext onDragEnd={(result) => this.onDragEnd(result, key)}>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div ref={provided.innerRef}>
{
item.shixuns_list && item.shixuns_list.map((line,index)=>{
return(
<Draggable key={line.identifier} draggableId={line.identifier} index={index}>
{(provided, snapshot) => (
<div className="clearfix paragraph lineh-30" ref={provided.innerRef} {...provided.draggableProps}>
<li className="fl li-width63">
<span className="progressRing mr10">
{
line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
:<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
}
</span>
<span className="paragraph_name color-grey3"><span className="subject_stage_shixun_index">{key+1}</span>-{index+1}&nbsp;&nbsp;{line.shixun_name}</span>
</li>
{
line.shixun_status==="暂未公开"?
<li className="fr status_li"><span className="fr color-grey-9">暂未公开</span></li>
:
<li className="fr status_li" >
<a href={"javascript:void(0)"} {...provided.dragHandleProps}
className="mr30 color-blue_4C shixun_detail pointer fl none" target="_blank">drag</a>
<a href={line.shixun_path} className="mr30 color-blue_4C shixun_detail pointer fl none" target="_blank">查看详情</a>
<a href={line.tpi_path} className="btn_auto user_bluebg_btn fl none" id="shixun_operation" target="_blank">开始实战</a>
</li>
}
</div>
)}
</Draggable>
)
})
}
</div>
)}
</Droppable>
</DragDropContext>
</div>
</div>
)
})
}
</div>
<DetailCardsEditAndAdd {...this.props}></DetailCardsEditAndAdd>
</div>
)
}
}
export default DetailCards;

88
src/modules/paths/PathDetail/DetailTop.css
View File

@ -1,88 +0,0 @@
.userbluebgfont{
color:#fff !important;
}
.kaike{
border-radius: 4px;
border: 1px solid rgba(255,255,255);
padding: 0px 10px;
cursor: pointer;
font-size: 14px;
display: block;
width: 120px;
text-align: center;
height: 40px;
line-height: 40px!important;
border-radius: 4px;
box-sizing: border-box;
}
.userNavs{
line-height: 75px;
background: #fff;
height:96px;
background:rgba(255,255,255,1);
box-shadow:3px 5px 11px 1px rgba(230,230,230,0.5);
border-radius:4px;
}
.userNavs li {
display: inline-block;
padding: 0 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.newbianji1{
font-size: 16px !important;
margin-right: 10px;
color: #4CACFF;
margin-bottom: 3px;
display: inline-block;
}
.solidright{
border-right:1px solid #CDCDCD;
height: 42px;
}
.ant-modal-title {
height: 38px;
line-height:38px !important;
}
.ant-modal-title {
font-size: 16px;
font-weight: 500!important;
color: #333;
text-align: center;
}
.pd4020{
padding: 0 40px 0 20px !important;
}
.bannername780{
max-width: 780px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
height: 40px;
}
.mb100{
margin-bottom: 100px !important;
}
.task-btn-28BE6C{
background: #28BE6C !important;
color: #fff!important;
}
.mt43{
margin-top: 43px;
}
.mb120{
margin-bottom: 120px !important;
}
.mb80{
margin-bottom: 80px !important;
}

926
src/modules/paths/PathDetail/DetailTop.js
View File

@ -1,926 +0,0 @@
import React, { Component } from "react";
import { Modal, Radio, Input, Tooltip, Menu, Dropdown, Icon, Breadcrumb } from "antd";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import SendPanel from "./sendPanel.js";
import { getImageUrl } from 'educoder';
import axios from 'axios';
import Modals from '../../modals/Modals';
import OpenCourse from './OpenCourse';
import Jointheclass from '../../modals/Jointheclass';
import './DetailTop.css';
const Search = Input.Search;
const RadioGroup = Radio.Group;
class DetailTop extends Component {
constructor(props) {
super(props)
this.state = {
cardsModalcancel: this.cardsModalcancel,
cardsModalsave: this.cardsModalsave,
Modalstype: false,
Modalstopval: "",
Modalsbottomval: '',
loadtype: false,
deletepathtype: false,
cardsModalsavetype: false,
MenuItemskey: 1,
courseslist: [],
Pathcourseid: undefined,
OpenCourseTypes: false,
putappointmenttype: false,
getappointmenttype: false,
openpathss: false,
cancel_publics: false,
cancel_has_publics: false,
applyissuePaths: false,
cancelText: undefined,
okText: undefined
}
}
componentDidMount() {
this.getdatalist();
}
getdatalist = () => {
let courseslist = [];
let keys = 1;
let listtype = false;
if (this.props.courses != undefined && this.props.courses.length != 0) {
if (this.props.detailInfoList.has_start === true) {
this.props.courses.map((item, key) => {
if (item.course_status.status === 1) {
keys = key + 1
return (
courseslist.push(item)
)
}
})
} else {
let type = undefined;
this.props.courses.map((item, key) => {
let arr = []
keys = key + 1
if (item.course_status.status === 2) {
type = key + 1
arr.push(item)
}
courseslist = arr;
})
this.props.courses.map((item, key) => {
let arr = []
if (listtype === false) {
keys = key + 1
if (item.course_status.status === 0) {
listtype = true
// courseslist.push(item)
arr.push(item)
courseslist = arr
}
}
})
}
if (courseslist.length != 0) {
this.props.getMenuItemsindex(keys, courseslist[0].course_status.status)
}
}
this.setState({
courseslist: courseslist,
MenuItemskey: keys,
})
}
componentDidUpdate = (prevProps) => {
if (prevProps.courses != this.props.courses) {
this.getdatalist();
}
}
allow_deletepath = () => {
this.setState({
Modalstype: true,
Modalstopval: "是否删除路径?",
deletepathtype: true
})
}
applyissuePath = () => {
this.setState({
loadtype: true,
Modalstype: true,
Modalstopval: `课程发布后即可发送课堂使用`,
// modalsMidval:"有人公开可见，若仅本人教学使用则无需申请公开，直接发",
// Modalsbottomval:"送到课堂即可。",
applyissuePaths: true
})
}
showapplyissuePath = () => {
let pathid = this.props.match.params.pathId;
let url = "/paths/" + pathid + "/publish.json";
axios.post(url).then((result) => {
if (result.status === 200) {
if (result.data.status === 0) {
this.props.showNotification(result.data.message)
this.props.getlistdatas();
this.cardsModalcancel()
} else if (result.data.status === 1) {
}
}
}).catch((error) => {
console.log(error);
})
}
postcancelissuePath = () => {
let pathId = this.props.match.params.pathId;
let url = "/paths/" + pathId + "/cancel_publish.json";
axios.post(url).then((result) => {
if (result.status === 200) {
if (result.data.status === 0) {
} else if (result.data.status === 1) {
this.cardsModalcancel()
this.props.showNotification("撤销发布成功")
this.props.getlistdatas()
// window.location.href = "/paths/" + result.data.subject_id
}
}
}).catch((error) => {
console.log(error);
})
}
cancelissuePath = () => {
this.setState({
Modalstype: true,
Modalstopval: "是否确认撤销发布？",
// modalsMidval:"撤销发布后，学员将无法进行练习，若您新增关",
// Modalsbottomval:"卡，学员需要重新体验实训",
cardsModalsavetype: true,
modalstyles: "848282"
})
}
cardsModalcancel = () => {
this.setState({
Modalstype: false,
Modalsbottomval: '',
loadtype: false,
deletepathtype: false,
putappointmenttype: false,
modalsMidval: '',
modalstyles: '',
cardsModalsavetype: false,
applyissuePaths: false,
openpathss: false,
cancel_publics: false,
cancel_has_publics: false,
Modalstopval: ``,
cancelText: undefined,
okText: undefined
})
}
cardsModalsave = () => {
let { loadtype, deletepathtype } = this.state;
//删除路径
if (deletepathtype === true) {
let pathid = this.props.match.params.pathId;
const deleteUrl = `/paths/` + pathid + `.json`;
axios.delete(deleteUrl).then((response) => {
const status = response.data.status
if (status === 1) {
window.location.href = "/paths";
}
}).catch((error) => {
console.log(error)
})
}
this.setState({
Modalstype: false,
Modalsbottomval: ''
})
}
onVisibleChanges = (type) => {
this.setState({
onVisibleChangestype: type
})
}
MenuItems = (keys) => {
let courseslist = []
this.props.courses.map((item, key) => {
if (keys === key + 1) {
return (
courseslist.push(item)
)
}
})
this.props.getMenuItemsindex(keys, courseslist[0].course_status.status)
this.setState({
MenuItemskey: keys,
courseslist: courseslist,
onVisibleChangestype: !this.state.onVisibleChangestype
})
}
JoinnowCourse = (id, typeid) => {
if (this.props.checkIfLogin() === false) {
this.props.showLoginDialog()
return
}
if (this.props.checkIfProfileCompleted() === false) {
this.props.showProfileCompleteDialog()
return
}
this.setState({
yslJointhe: true,
Pathcourseid: id,
pathcousestypeid: typeid
})
}
putappointment = () => {
if (this.props.checkIfLogin() === false) {
this.props.showLoginDialog()
return
}
if (this.props.checkIfProfileCompleted() === false) {
this.props.showProfileCompleteDialog()
return
}
this.setState({
Modalstype: true,
Modalstopval: "是否确认立即预约？",
Modalsbottomval: "",
cardsModalcancel: () => this.cardsModalcancel(),
putappointmenttype: true,
loadtype: false
})
}
ysljoinmodalCancel = () => {
this.setState({
yslJointhe: false
})
};
ysljoinmodalCanceltwo = (key) => {
this.setState({
yslJointhe: false
})
this.props.getdatasindex(key)
};
OpenCoursefun = () => {
this.setState({
OpenCourseTypes: true
})
}
OpenCourseCancel = () => {
this.setState({
OpenCourseTypes: false
})
}
getappointment = () => {
let pathid = this.props.match.params.pathId;
let url = `/paths/${pathid}/appointment.json`
axios.post(url).then((response) => {
if (response.status === 200) {
if (response.data.status === 0) {
this.setState({
getappointmenttype: true
})
this.cardsModalcancel()
// this.props.getlistdatas()
this.props.showNotification(response.data.message)
} else {
this.cardsModalcancel()
this.props.showNotification(response.data.message)
}
}
}).catch((error) => {
console.log(error)
this.cardsModalcancel()
})
}
postopenpaths = () => {
let pathid = this.props.match.params.pathId;
let url = "/paths/" + pathid + "/apply_public.json";
axios.post(url).then((result) => {
if (result.status === 200) {
if (result.data.status === 0) {
this.props.showNotification(result.data.message)
this.props.getlistdatas();
this.cardsModalcancel()
} else if (result.data.status === 1) {
this.props.showNotification(result.data.message)
this.props.getlistdatas();
this.cardsModalcancel()
}
}
}).catch((error) => {
console.log(error);
})
}
openpaths = () => {
this.setState({
Modalstype: true,
openpathss: true,
Modalstopval: "公开课程需经过平台标准化审核，审核周期为1-2天，公开",
modalsMidval: "的课程将对平台所有人可见。若仅本人教学使用则无需",
Modalsbottomval: "申请公开，直接发送到课堂即可",
cancelText: "取消申请",
okText: "确定申请"
})
}
postcancel_public = () => {
let pathid = this.props.match.params.pathId;
let url = "/paths/" + pathid + "/cancel_public.json";
axios.post(url).then((result) => {
if (result.status === 200) {
if (result.data.status === 0) {
this.cardsModalcancel()
this.props.showNotification("撤销申请公开成功")
this.props.getlistdatas();
}
}
}).catch((error) => {
console.log(error);
})
}
cancel_public = () => {
this.setState({
cancel_publics: true,
Modalstype: true,
Modalstopval: "是否确认撤销申请公开？",
modalsMidval: " ",
ModalsBottomval: " ",
})
}
postcancel_has_public = () => {
let pathid = this.props.match.params.pathId;
let url = "/paths/" + pathid + "/cancel_has_public.json";
axios.post(url).then((result) => {
if (result.status === 200) {
if (result.data.status === 0) {
this.cardsModalcancel()
this.props.showNotification("撤消公开成功")
this.props.getlistdatas();
}
}
}).catch((error) => {
console.log(error);
})
}
cancel_has_public = () => {
this.setState({
cancel_has_publics: true,
Modalstype: true,
Modalstopval: "是否确认撤销公开？",
modalsMidval: " ",
ModalsBottomval: " ",
})
}
setCollect = () => {
let pathid = this.props.match.params.pathId;
let url = "/collections.json";
axios.post(url, {
container_id: pathid,
container_type: "Subject"
}).then((result) => {
const status = result.data.status
if (status === 0) {
this.props.getlistdatas()
this.props.showNotification(result.data.message);
}
}).catch((error) => {
console.log(error);
})
}
cancelCollect = () => {
let pathid = this.props.match.params.pathId;
let url = `/collections/cancel.json`;
axios.delete(url, {
data: {
container_id: pathid,
container_type: "Subject"
}
}).then((response) => {
const status = response.data.status
if (status === 0) {
this.props.getlistdatas()
this.props.showNotification(response.data.message);
}
}).catch((error) => {
console.log(error)
})
}
render() {
let { detailInfoList } = this.props;
let { Modalstype, Modalstopval, cardsModalcancel, putappointmenttype, Modalsbottomval, cardsModalsavetype, loadtype, getappointmenttype, openpathss, cancel_publics, cancel_has_publics, applyissuePaths } = this.state;
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px',
};
let menu = (
<Menu>
{this.props.courses === undefined || this.props.courses.length === 0 ? "" : this.props.courses.map((item, key) => {
return (
<Menu.Item>
<a rel="noopener noreferrer" onClick={() => this.MenuItems(key + 1)}>
第{key + 1}次开课
</a>
</Menu.Item>
)
})}
</Menu>
);
let applypath = this.props.detailInfoList && this.props.detailInfoList.participant_count != undefined && this.props.detailInfoList && this.props.detailInfoList.allow_statistics === false;
let coursestypes = this.props.courses != undefined && this.props.courses.length === 0;
let isadminallow_statistics = this.props.courses && this.props.courses.length === 0 && this.props.detailInfoList && this.props.detailInfoList.allow_statistics === true;
const isadmin = this.props.isAdmin()
return (
<div className={this.props.courses === undefined ? "subhead" : this.props.courses.length === 0 ? applypath === true ? "subhead mb100" : "subhead" : applypath === false ? detailInfoList.name.length > 40 ? "subhead mb100" : "subhead mb70" : this.state.MenuItemskey === this.props.courses.length ? "subhead mb120" : detailInfoList.name.length > 40 ? "subhead mb100" : "subhead mb80"}>
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel}
modalSave={applyissuePaths === true ? () => this.showapplyissuePath() : loadtype === true && openpathss === false ? () => this.cardsModalcancel() : cardsModalsavetype === true ? () => this.postcancelissuePath() : openpathss === true ? () => this.postopenpaths() : cancel_publics === true ? () => this.postcancel_public() : cancel_has_publics === true ? () => this.postcancel_has_public() : putappointmenttype === true ? () => this.getappointment() : () => this.cardsModalsave()}
loadtype={loadtype}
cancelText={this.state.cancelText}
okText={this.state.okText}
modalsMidval={this.state.modalsMidval}
modalstyles={this.state.modalstyles}
>
</Modals>
{this.state.yslJointhe === true ? <Jointheclass {...this.props} {...this.state} ysljoinmodalCancel={() => this.ysljoinmodalCancel()} ysljoinmodalCanceltwo={() => this.ysljoinmodalCanceltwo(this.state.MenuItemskey)}></Jointheclass> : ""}
{this.state.OpenCourseTypes === true ? <OpenCourse {...this.props} {...this.state} OpenCourseCancel={() => this.OpenCourseCancel()} /> : ""}
<style>
{
`
.subhead_content{
position: relative;
}
.userNavs{
position: absolute;
width: 1200px;
}
`
}
</style>
{
detailInfoList &&
<div className={this.props.courses === undefined ? "subhead_content" : this.props.courses.length === 0 ? "subhead_content pt40" : "subhead_content "}>
<div className="font-28 color-white clearfix">
{/*<Tooltip placement="bottom" title={detailInfoList.name.length>27?detailInfoList.name:""}>*/}
{/*</Tooltip>*/}
<style>
{
`
.pathoranges{
display: inline-block;
width: 64px;
background-color: #FF6800;
background-size: 100% 100%;
padding: 0px 4px;
color: #fff;
height: 28px;
font-size: 14px;
border-radius: 4px;
position: relative;
top: 5px;
left: 15px;
}
.pathoranges div{
position: absolute;
top: -6px;
}
.xxtjbtn{
width: 103px;
height: 38px;
background: rgba(255,255,255,1);
border-radius: 4px;
border: 1px solid rgba(255,255,255,1);
color: #970084 !important;
font-size: 15px !important;
line-height: 36px !important;
}
.kkbths{
width:103px;
height:38px;
border-radius:4px;
line-height: 36px !important;
border:1px solid rgba(255,255,255,1);
}
.maxwinth600{
width:730px;
}
`
}
</style>
<span className="fl lineh-40">
{detailInfoList.name}
{detailInfoList === undefined ? "" : detailInfoList.excellent === false ? "" :
<span className="pathoranges">
<div>开放课程</div>
</span>
}
</span>
</div>
<div className="clearfix mt20">
{
detailInfoList &&
<ul className="fl color-grey-eb pathInfo">
{detailInfoList.stages_count != 0 ? <li><span>章节</span><span className="ml5">{detailInfoList.stages_count}</span></li> : ""}
{detailInfoList.shixuns_count != 0 ? <li><span>实训</span><span className="ml5">{detailInfoList.shixuns_count}</span></li> : ""}
{detailInfoList.challenge_choose_count != 0 ? <li><span>选择题任务</span><span>{detailInfoList.challenge_choose_count}</span></li> : ""}
{detailInfoList.challenges_count != 0 ? <li><span>实践任务</span><span>{detailInfoList.challenges_count}</span></li> : ""}
{detailInfoList.subject_score != 0 ? <li><span>经验值</span><span>{detailInfoList.subject_score}</span></li> : ""}
{detailInfoList.member_count != 0 ? <li><span>学习人数</span><span>{detailInfoList.member_count}</span></li> : ""}
</ul>
}
<div className="fr pr maxwinth600">
{/*issue-29182 添加状态判断 已公开的才显示学习统计*/}
{detailInfoList === undefined ? "" : detailInfoList.allow_statistics === true && detailInfoList.public_status === 2 ?
<Link to={"/paths/" + this.props.match.params.pathId + "/statistics"} className="user_default_btn fr font-18 xxtjbtn">
学习统计
</Link> : ""
}
{detailInfoList.allow_send === true ?
<SendPanel {...this.props} {...this.state} widths={"80px"}></SendPanel>
: ""
}
{this.props.courses === undefined ? "" : detailInfoList.is_creator === true ? <a className={"fr font-18 color-white kaike mr20 kkbths"} style={{ 'width': '65px' }} onClick={() => this.OpenCoursefun()}>开课</a> : ""}
{isadmin && detailInfoList.allow_statistics === true && detailInfoList.public_status === 2 ?
<a className="fr font-18 color-white kaike mr20 kkbths" onClick={this.cancel_has_public}>撤销公开</a> : ""
}
{detailInfoList.allow_statistics === true && detailInfoList.public_status === 1 ?
<a className="fr font-18 color-white kaike mr20 kkbths" onClick={this.cancel_public} style={{ width: '135px' }}>撤销申请公开</a> : ""
}
{detailInfoList.publish_status === 2 && detailInfoList.allow_statistics === true && detailInfoList.public_status === 0 ?
<a className="fr font-18 color-white kaike mr20 kkbths" onClick={this.openpaths}>申请公开</a> : ""
}
{
detailInfoList.publish_status === 2 && detailInfoList.allow_statistics === true && detailInfoList.public_status === 0 ?
<a className="fr font-18 color-white kaike mr20 kkbths" onClick={this.cancelissuePath}>撤销发布</a> : ""
}
{
detailInfoList.publish_status === 0 && detailInfoList.allow_add_member === true ?
<a className="fr font-18 color-white kaike mr20 kkbths"
style={{ 'width': '95px' }}
onClick={this.applyissuePath}>申请发布</a> : ""
}
{detailInfoList === undefined ? "" : detailInfoList.allow_delete === true ? <a
className={"fr font-18 color-white kaike mr20 kkbths"}
onClick={this.allow_deletepath}
style={{ 'width': '65px' }}
>删除</a> : ""}
{detailInfoList === undefined ? "" : detailInfoList.allow_statistics === true ?
<Link to={"/paths/" + this.props.match.params.pathId + "/edit"}
style={{ 'width': '65px' }}
className="fr font-18 color-white kaike mr20 kkbths" >
编辑
</Link>
: ""
}
{this.props && this.props.user.login === "" ? "" : detailInfoList && detailInfoList.is_collect === false ? <a onClick={() => this.setCollect()}
style={{ 'width': '65px' }}
className="fr font-18 color-white kaike mr20 kkbths" >
收藏
</a> : ""}
{
this.props && this.props.user.login === "" ? "" : detailInfoList && detailInfoList.is_collect === true ?
<a className="fr font-18 color-white kaike mr20 kkbths" onClick={() => this.cancelCollect()}> 取消收藏
</a> : ""
}
</div>
</div>
{this.props.courses === undefined || isadminallow_statistics === true ? "" : <div className="userNavs mt20" style={applypath === false ? {} : this.state.MenuItemskey === this.props.courses.length ? { height: '135px' } : {}}>
<style>
{
`
.anticon-down{
font-size:14px !important;
transform:none !important;
}
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
background-color: rgba(240,240,240,1);
}
.alist{
color:#000;
}
.alist:hover{
color:#000;
}
.aIcons{
color:#CDCDCD;
}
`
}
</style>
{this.props.courses === undefined || this.props.courses.length === 0 ? "" : <li className={"fl pd4020 mt10"}>
{this.state.courseslist.map((item, key) => {
if (item.course_identity < 4) {
return (
<Tooltip placement="bottom" title={"编辑课堂"} key={key}>
<a href={`/classrooms/${item.course_id}/newgolds/settings`} target={"_blank"}>
<i className="iconfont icon-bianji1 newbianji1"></i>
</a>
</Tooltip>
)
}
})
}
<Dropdown
overlay={menu}
onVisibleChange={this.onVisibleChanges}
>
<a className={"alist"}>
第<span className={"color-orange"}> {this.state.MenuItemskey} </span>次开课 <Icon className="aIcons" type={!this.state.onVisibleChangestype ? "down" : "up"} />
</a>
</Dropdown>
</li>}
<style>
{
`
.pdt28{
padding-top: 28px;
}
.ml23{
margin-left:23px;
}
.pathtime{
color: #9B9B9B;
font-size: 12px;
}
.pathtimes{
color: #05101A;
font-size: 14px;
}
`
}
</style>
{this.props.courses === undefined || this.props.courses.length === 0 ? "" : <li className={"ml20"}>
{this.state.courseslist.map((item, key) => {
return (
<div className={"ant-breadcrumb pdt28"} key={key}>
<span>
<div className="ant-breadcrumb-link fl mr23">
<div className={"pathtime"}>
开课时间：
</div>
<div className={"pathtimes"}>
{item.start_date}
</div>
</div>
<div className="fl solidright"></div>
</span>
<span>
<div className="ant-breadcrumb-link fl mr23 ml23">
<div className={"pathtime"}>
结课时间：
</div>
<div className={"pathtimes"}>
{item.end_date}
</div>
</div>
<div className="fl solidright"></div>
</span>
<span>
<div className="ant-breadcrumb-link fl mr23 ml23">
<div className={"pathtime"}>
报名人数：
</div>
<div className={"pathtimes"}>
{item.student_count} 人
</div>
</div>
</span>
</div>
)
})
}
</li>}
<style>
{
`
.user-colorgrey-9b{color:#9B9B9B}
.user-colorgrey-green{color:#7ED321}
.background191{
background: rgba(191,191,191,1) !important;
color: #fff;
}
.mr51{
margin-right: 51px;
}
.pathbtens{
width: 150px !important;
height: 44px !important;
line-height: 44px !important;
}
.pathdefault{
cursor: default !important;
}
.courseslistsa{
color:#fff !important;
}
.pathbtensbox{
width: 215px !important;
height: 46px !important;
background: rgba(76,172,255,1);
border-radius: 4px;
line-height: 46px !important;
}
.lineHeight1{
line-height: 1px;
}
.font153{
font-size: 14px;
font-weight: 400;
color: rgba(153,153,153,1);
margin-left: 30px;
}
.absolutewidth{
position: absolute;
top: 19px;
right: 71px;
}
.relativewidth{
position: relative;
width: 100%;
}
.padding040{
padding: 0 43px;
}
.mt26{
margin-top:26px;
}
.mt10block{
margin-top: 10px;
display: inline-block;
}
`
}
</style>
{this.props.courses === undefined || this.props.courses.length === 0 ? "" : <li className={"fr padding040"}>
{/*
height: 158px;
}*/}
{this.state.courseslist.map((item, key) => {
return (
<div key={key}>
{applypath === false ? "" : this.state.MenuItemskey === this.props.courses.length || coursestypes === true ?
this.props.detailInfoList && this.props.detailInfoList.has_participate === false ?
getappointmenttype === true ? <span className={coursestypes === true ? "fr user_default_btn background191 font-18 pathbtensbox mt5" : "fr user_default_btn background191 font-18 pathbtensbox mt26"}>预约报名成功</span> : <a className={coursestypes === true ? "fr user_default_btn task-btn-28BE6C font-18 pathbtensbox mt5" : "fr user_default_btn task-btn-28BE6C font-18 pathbtensbox mt26"} onClick={() => this.putappointment()}>期待开课并预约报名</a> :
<span className={coursestypes === true ? "fr user_default_btn background191 font-18 pathbtensbox mt5" : "fr user_default_btn background191 font-18 pathbtensbox mt26"}>预约报名成功</span> : ""}
{/*{item.course_status.status===0?<div className="mr51 shixun_detail pointer fl user-colorgrey-green pathdefault">即将开课</div>:""}*/}
{item.course_status.status === 1 ? <div className="mr51 shixun_detail pointer fl color-orange pathdefault mt10">{item.course_status.time}</div> : ""}
{item.course_status.status === 2 && item.course_identity < 6 ? <div className="mr20 shixun_detail pointer fl user-colorgrey-9b pathdefault mt10">已结束</div> : ""}
{/*<div className="fr user_default_btn background191 font-18 mt28 pathbtens pathdefault">已结束</div>*/}
{item.course_status.status === 0 ?
item.course_identity < 5 ? <a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens courseslistsa mr20" href={item.first_category_url} target="_blank">
进入课堂
</a> : item.course_identity < 6 ? <div className="fr user_default_btn background191 font-18 mt28 pathbtens pathdefault mr20">报名成功</div>
: <a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens mr20" onClick={() => this.JoinnowCourse(item.course_id)}>立即报名</a> : ""}
{item.course_status.status === 1 ?
item.course_identity < 5 ? <a className="courseslistsa fr user_default_btn task-btn-orange font-18 mt28 pathbtens mr20" href={item.first_category_url} target="_blank">
进入课堂
</a> : item.course_identity < 6 ? <a className="courseslistsa fr user_default_btn task-btn-orange font-18 mt28 pathbtens mr20" href={item.first_category_url} target="_blank">
立即学习
</a> : <a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens mr20" onClick={() => this.JoinnowCourse(item.course_id, item.course_status.status)}>立即加入</a> : ""}
{item.course_status.status === 2 ?
item.course_identity < 6 ? <a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens courseslistsa mr20" href={item.first_category_url} target="_blank">
进入课堂
</a> : <div className="mr20 shixun_detail pointer fl user-colorgrey-9b pathdefault mt10">已结束</div> : ""}
</div>
)
})}
</li>}
{applypath === false ? "" : this.state.MenuItemskey === this.props.courses.length ? <div className={"clear"}></div> : ""}
{applypath === false ? "" : this.props.courses.length === 0 ? "" : this.state.MenuItemskey === this.props.courses.length || coursestypes === true ? <span className={coursestypes === true ? "fr lineHeight1 relativewidth mt43" : "fl lineHeight1 relativewidth"}>
<span className={"fr mr30"}>当前预约报名人数：<span className={"color-red mr5"}>{getappointmenttype === true ? this.props.detailInfoList && this.props.detailInfoList.participant_count + 1 : this.props.detailInfoList && this.props.detailInfoList.participant_count}</span>人</span>
<span className={"font153 fr mr12"}>当预约报名人数达到 {this.props.detailInfoList && this.props.detailInfoList.student_count} 人时即将开课</span>
{/*{this.props.detailInfoList&&this.props.detailInfoList.has_participate===false?*/}
{/*getappointmenttype===true?<span className={coursestypes===true?"fr user_default_btn background191 font-18 pathbtensbox absolutewidth mt5":"fr user_default_btn background191 font-18 pathbtensbox absolutewidth"}>预约报名成功</span>:<a className={coursestypes===true?"fr user_default_btn task-btn-28BE6C font-18 pathbtensbox absolutewidth mt5":"fr user_default_btn task-btn-28BE6C font-18 pathbtensbox absolutewidth"} onClick={()=>this.putappointment()}>期待开课并预约报名</a>:*/}
{/*<span className={coursestypes===true?"fr user_default_btn background191 font-18 pathbtensbox absolutewidth mt5":"fr user_default_btn background191 font-18 pathbtensbox absolutewidth"}>预约报名成功</span>}*/}
</span>
: ""}
{applypath === true && this.props.courses.length === 0 ? this.state.MenuItemskey === this.props.courses.length || coursestypes === true ? <span className={coursestypes === true ? "fl ml20 lineHeight0 relativewidth" : "fl ml20 lineHeight0 relativewidth"}>
<span className={"mt10block"}>当前预约报名人数：<span className={"color-red mr5"}>{getappointmenttype === true ? this.props.detailInfoList && this.props.detailInfoList.participant_count + 1 : this.props.detailInfoList && this.props.detailInfoList.participant_count}</span>人</span>
<span className={"font153 mt10block"}>当预约报名人数达到 {this.props.detailInfoList && this.props.detailInfoList.student_count} 人时即将开课</span>
{this.props.detailInfoList && this.props.detailInfoList.has_participate === false ?
getappointmenttype === true ? <span className={coursestypes === true ? "fr user_default_btn background191 font-18 pathbtensbox absolutewidth mt5" : "fr user_default_btn background191 font-18 pathbtensbox absolutewidth"}>预约报名成功</span> : <a className={coursestypes === true ? "fr user_default_btn task-btn-28BE6C font-18 pathbtensbox absolutewidth mt5" : "fr user_default_btn task-btn-28BE6C font-18 pathbtensbox absolutewidth"} onClick={() => this.putappointment()}>期待开课并预约报名</a> :
<span className={coursestypes === true ? "fr user_default_btn background191 font-18 pathbtensbox absolutewidth mt5" : "fr user_default_btn background191 font-18 pathbtensbox absolutewidth"}>预约报名成功</span>}
</span> : "" : ""}
</div>}
</div>
}
</div>
)
}
}
export default DetailTop;

185
src/modules/paths/PathDetail/Modifytext.js
View File

@ -1,185 +0,0 @@
import React, {Component} from 'react';
import {Button, Layout, Input, Form} from 'antd';
import axios from 'axios';
import {getImageUrl} from 'educoder';
class Modifytext extends Component {
constructor(props) {
super(props)
this.state = {}
}
componentDidMount() {
}
//重新输入教学模式
Modifytext = () => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
const url = `/paths/${this.props.pathid}/update_team_title.json`;
axios.post(url, {
team_title: values.teachingteam
}).then((response) => {
console.log(response);
if (response) {
if (response.data) {
if (response.data.status === 0) {
try {
this.props.showNotification("修改成功!");
} catch (e) {
}
try {
this.props.modifysy(2);
} catch (e) {
}
}
}
}
}).catch((error) => {
console.log(error)
})
}
})
}
//取消
hideUpdating = () => {
this.props.modifysy(3);
}
render() {
const {getFieldDecorator} = this.props.form;
return (
<div>
<div className="ml38">
<style>{`
.flexRow {
padding: 20px 0;
}
.flexRow .name {
margin-left: 12px;
color: #666666;
text-align: center;
flex: 0 0 100px;
}
.flexRow .description {
margin-left: 10px;
flex: 1;
color: #CDCDCD;
}
.description span {
margin-right: 20px;
color: #05101A;
}
.flexRow .status {
width: 100px;
color: #28AC7F;
text-align: right;
}
.flexTable .flexTable {
border-bottom: 1px solid #EBEBEB;
}
.settingFormsy label{
color: #666666;
font-size: 14px !important ;
}
.settingFormsy input {
width: 200px;
height: 32px;
}
.settingFormsy input.validateInput {
width: 220px;
}
.settingFormsy .formItemInline button {
width: 110px;
margin-left: 10px;
}
.settingFormsy .ant-form-item-label {
width: 60px;
text-align: left;
}
.formItemInline .ant-form-explain{
position:absolute;
bottom:-22px;
left:0px;
width:100%;
}
.yslzxueshi .ant-input{
height: 40px !important;
width: 276px !important
}
// class="ant-col ant-form-item-label"
`}</style>
<div className="settingFormsy">
<React.Fragment>
<Form>
<div style={{
display: "flex",
flexDirection: "initial",
lineHeight: " 51px",
}}>
<Form.Item
label=""
className="formItemInline hideRequireTag mb20 mt20"
>
{getFieldDecorator('teachingteam', {
rules: [{
// initialValue: this.state.cityDefaultValue,
required: true,
message: '请输入模式',
}],
})(
<Input placeholder={`例如：教学团队`}></Input>
)}
</Form.Item>
<div className="flexdirections yslzxueshi ml38 ">
<p className="fontcolorsyslhui1 font-14 myysllineheight myyslminwidth"></p>
<div className=" flexdirections ml10" style={{
display: "flex",
flexDirection: "initial",
marginTop: "24px",
}}>
<Button style={{
border: "0.5px solid #C9C9C9",
background: "#C9C9C9",
color: "#fff",
}} type="primary " onClick={() => this.hideUpdating()}>取消</Button>
<Button style={{
marginLeft: "10px",
}} type="primary" onClick={() => this.Modifytext()}>确定</Button>
</div>
</div>
</div>
</Form>
</React.Fragment>
</div>
</div>
</div>
)
}
}
const Modifytexts = Form.create({name: 'Modifytext'})(Modifytext);
export default Modifytexts;

100
src/modules/paths/PathDetail/OpenCourse.js
View File

@ -1,100 +0,0 @@
import React, { Component } from 'react';
import { Modal, Radio, Input} from 'antd';
import axios from 'axios';
//加入精品课堂
class OpenCourse extends Component {
constructor(props) {
super(props);
this.state={
value:1
}
}
componentDidMount() {
// console.log("加入精品课堂");
// console.log(this.props);
}
modalCancel=()=>{
this.props.OpenCourseCancel();
};
setDownload=()=>{
let {value}=this.state;
console.log(this.props.match.params.pathId)
if(value===0){
window.open(`/classrooms/news/${this.props.match.params.pathId}/newgold/0 `);
}else{
window.open(`/classrooms/news/${this.props.match.params.pathId}/newgold/1`);
}
this.props.OpenCourseCancel();
}
setpathradioChange = e => {
this.setState({
value: e.target.value,
});
};
render() {
// console.log("加入精品课堂2");
//console.log(this.props.Pathcourseid);
const pathradioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px',
color:'#05101A',
textAlign: 'left',
fontSize: '16px'
};
const pathradioStyles={
color:'#999999'
}
return(
<Modal
keyboard={false}
closable={false}
footer={null}
destroyOnClose={true}
title="选择课堂性质"
centered={true}
visible={this.props.OpenCourseTypes===undefined?false:this.props.OpenCourseTypes}
width="600px"
>
<div className="educouddiv">
<div className={"tabeltext-alignleft"}>
<p className={"mt20 mb20 font-16"}>
<Radio.Group onChange={this.setpathradioChange} value={this.state.value}>
<Radio style={pathradioStyle} value={1} className={"mt10"}>
开放课堂：<span style={pathradioStyles}>所有用户可以随时访问</span>
</Radio>
<Radio style={pathradioStyle} value={0} className={"mt10"}>
私有课堂：<span style={pathradioStyles}>仅报名参与的课堂成员可以访问</span>
</Radio>
</Radio.Group>
</p>
</div>
<style>
{
`
a:hover {
color: #fff !important;
}
`
}
</style>
<div className="clearfix edu-txt-center mt20">
<a className="task-btn mr30" onClick={()=>this.modalCancel()}>取消</a>
<a className="task-btn task-btn-orange" onClick={()=>this.setDownload()}>确认</a>
</div>
</div>
</Modal>
)
}
}
export default OpenCourse;

787
src/modules/paths/PathDetail/PathDetailIndex.js
View File

@ -1,787 +0,0 @@
import React, { Component } from 'react';
import { getImageUrl, markdownToHTML, configShareForCustom } from 'educoder';
import DetailTop from './DetailTop.js';
import DetailCards from './DetailCards.js'
import AddCollaborators from "./addCollaborators.js";
import { Icon, Tooltip, Popover } from 'antd';
import '../../paths/ShixunPaths.css';
import Modals from '../../modals/Modals';
import axios from 'axios';
import styled from "styled-components";
import Modifytext from './Modifytext';
const getItems = count =>
Array.from({ length: count }, (v, k) => k).map(k => ({
id: `item-${k}`,
content: `item ${k}`
}));
// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const Item = styled.div`
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 10px;
border: 1px solid grey;
background: white;
&:hover {
background: lightgrey;
}
`;
const DragHandle = styled.div`
width: 15px;
height: 15px;
margin-right: 8px;
background: grey;
visibility: hidden;
&:hover {
background: black;
}
${Item}:hover & {
visibility: visible;
}
`;
const $ = window.$
class PathDetailIndex extends Component {
constructor(props) {
super(props)
this.state = {
progress: undefined,
tags: undefined,
members: undefined,
detailInfoList: undefined,
clickdetailInfoListtype: false,
Modalstype: false,
Modalstopval: undefined,
Modalsbottomval: undefined,
cardsModalcancel: this.cardsModalcancel,
cardsModalsave: this.cardsModalsave,
user_id: undefined,
loadtype: false,
courses: undefined,
items: getItems(10),
pathtopskey: 1,
dataquerys: {},
MenuItemsindex: 1,
MenuItemsindextype: 0,
qrcode_img: null,
team_title: "教学团队",
modify: false,
}
this.onDragEnd = this.onDragEnd.bind(this);
}
onDragEnd(result) {
// dropped outside the list
if (!result.destination) {
return;
}
try {
} catch (e) {
}
const items = reorder(
this.state.members,
result.source.index,
result.destination.index
);
this.setState({
detailInfoList: this.state.detailInfoList,
members: items,
items
});
// console.log(this.state.members)
// console.log("items 数组数组数组数组")
// console.log(items)
}
cardsModalcancel = () => {
this.setState({
Modalstype: false,
})
// TODO 这个是临时处理，还需要优化，这里要看怎么区分处理
if (this.state.Modalstopval == '你确定要删除该成员吗？') {
return;
}
this.props.history.goBack()
}
cardsModalsave = () => {
this.setState({
Modalstype: false,
})
this.props.history.goBack()
}
// 加载markdown
updatamakedown = (id) => {
setTimeout(() => {
var shixunDescr = window.editormd.markdownToHTML(id, {
htmlDecode: "style,script,iframe",
taskList: true,
tex: true,
flowChart: true,
sequenceDiagram: true
});
$("#" + id + " p:first").addClass("ReactMarkdown");
}, 200)
}
componentDidMount() {
this.getlistdatas()
}
getlistdatas = () => {
const query = this.props.location.search;
// const type = query.split('?chinaoocTimestamp=');
// console.log("Eduinforms12345");
// console.log(this.foo(query));
// console.log(JSON.stringify(this.foo(query)));
var dataqueryss = {}
try {
var foqus = this.foo(query);
if (JSON.stringify(foqus) === "{}") {
this.setState({
dataquerys: {},
});
} else {
this.setState({
dataquerys: foqus,
});
dataqueryss = foqus;
}
} catch (e) {
this.setState({
dataquerys: {},
})
}
this.getdatasindexs(undefined, dataqueryss);
}
//截取url 数据的
foo = (url) => {
var json = {};
var regExp = /[\?\&](\w+)(=?)(\w*)/g;
var arr;
do {
arr = regExp.exec(url);
// console.log(arr); // arr = [完整的字符串, key, 等号或'', value或'']
if (arr) {
var key = arr[1];
var value = arr[3];
// arr[2] === ''时, value = undefined
if (!arr[2])
value = undefined;
json[key] = value;
}
} while (arr);
return json;
}
getdatasindexs = (key, yslwebobject) => {
// yslwebobject 后端需要的接口
let pathid = this.props.match.params.pathId;
let url = "/paths/" + pathid + ".json";
axios.get(url,
{ params: yslwebobject }
).then((result) => {
if (result.data.status === 407 || result.data.status === 401) {
return;
}
if (result.data.status === 403) {
// window.location.href = "/403";
return;
}
configShareForCustom(result.data.name, result.data.description)
if (result.data.allow_visit === true) {
this.setState({
detailInfoList: result.data,
courses: result.data.courses,
pathtopskey: key === undefined ? 1 : key,
// items: getItems(result.data.members.length),
})
document.title = result.data.name;
}
}).catch((error) => {
console.log(error);
})
let righturl = "/paths/" + pathid + "/right_banner.json";
axios.get(righturl).then((result) => {
if (result.data.status === 407 || result.data.status === 401) {
return;
}
if (result.data.status === 403) {
// window.location.href = "/403";
return;
}
this.setState({
qrcode_img: result.data.qrcode_img,
tags: result.data.tags,
progress: result.data.progress,
members: result.data.members,
items: getItems(result.data.members.length),
team_title: result.data.team_title
})
}).catch((error) => {
console.log(error);
})
};
getMenuItemsindex = (key, status) => {
this.setState({
MenuItemsindex: key,
MenuItemsindextype: status
})
}
getdatasindex = (key) => {
// yslwebobject 后端需要的接口
let pathid = this.props.match.params.pathId;
let url = "/paths/" + pathid + ".json";
axios.get(url,
{ params: this.state.dataquerys }
).then((result) => {
if (result.data.status === 407 || result.data.status === 401) {
return;
}
if (result.data.status === 403) {
// window.location.href = "/403";
return;
}
configShareForCustom(result.data.name, result.data.description)
if (result.data.allow_visit === true) {
this.setState({
detailInfoList: result.data,
courses: result.data.courses,
pathtopskey: key === undefined ? 1 : key,
// items: getItems(result.data.members.length),
})
}
}).catch((error) => {
console.log(error);
});
let righturl = "/paths/" + pathid + "/right_banner.json";
axios.get(righturl).then((result) => {
if (result.data.status === 407 || result.data.status === 401) {
return;
}
if (result.data.status === 403) {
// window.location.href = "/403";
return;
}
this.setState({
// detailInfoList:result.data,
tags: result.data.tags,
progress: result.data.progress,
members: result.data.members,
items: getItems(result.data.members.length),
team_title: result.data.team_title
})
}).catch((error) => {
console.log(error);
})
}
updatadetailInfoList = () => {
this.getdatasindex();
}
clickNewsubscript = (val) => {
if (val === 0) {
this.setState({
clickdetailInfoListtype: true
})
} else {
this.setState({
clickdetailInfoListtype: false
})
}
}
timeStamp = (value) => {
var secondTime = parseInt(value);// 秒
var minuteTime = 0;// 分
var hourTime = 0;// 小时
if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
//获取分钟，除以60取整数，得到整数分钟
minuteTime = parseInt(secondTime / 60);
//获取秒数，秒数取佘，得到整数秒数
secondTime = parseInt(secondTime % 60);
//如果分钟大于60，将分钟转换成小时
if (minuteTime > 60) {
//获取小时，获取分钟除以60，得到整数小时
hourTime = parseInt(minuteTime / 60);
//获取小时后取佘的分，获取分钟除以60取佘的分
minuteTime = parseInt(minuteTime % 60);
}
}
var result = "" + parseInt(secondTime) + "秒";
if (minuteTime > 0) {
result = "" + parseInt(minuteTime) + "分" + result;
}
if (hourTime > 0) {
result = "" + parseInt(hourTime) + "小时" + result;
}
return result;
}
shanchuallow = (id) => {
this.setState({
user_id: id,
Modalstype: true,
Modalstopval: "你确定要删除该成员吗？",
cardsModalsave: this.delectshanchuallow,
loadtype: false
})
}
delectshanchuallow = () => {
let { user_id } = this.state;
let pathid = this.props.match.params.pathId;
let url = "/paths/" + pathid + "/delete_member.json";
let param = { user_id: user_id };
axios.delete(url, { data: param }).then((response) => {
if (response.data.status === 1) {
if (this.props.current_user.user_id == user_id) {
this.props.history.push('/paths')
return;
}
this.props.showNotification(response.data.message)
this.setState({
Modalstype: false,
// Modalstopval:response.data.message,
loadtype: false,
// cardsModalsave:this.cardsModalsave,
})
this.updatadetailInfoList();
}
}).catch((error) => {
console.log(error)
})
}
//上移
moveup = (data) => {
// console.log(data);
let pathid = this.props.match.params.pathId;
let url = `/paths/${pathid}/up_member_position.json`;
axios.post(url, {
user_id: data.id
}).then((response) => {
if (response.status === 200) {
console.log("上移");
// console.log(this.state.detailInfoList.members);
// console.log(response);
this.setState({
detailInfoList: this.state.detailInfoList,
members: response.data.members
});
// console.log(this.state.detailInfoList.members);
}
}).catch((error) => {
console.log(error)
})
}
//下移
movedown = (data) => {
// console.log(data);
let pathid = this.props.match.params.pathId;
let url = `/paths/${pathid}/down_member_position.json`;
axios.post(url, {
user_id: data.id
}).then((response) => {
if (response.status === 200) {
console.log("下移");
// console.log(this.state.detailInfoList.members);
// console.log(response);
this.setState({
detailInfoList: this.state.detailInfoList,
members: response.data.members
});
// console.log(this.state.detailInfoList.members);
}
}).catch((error) => {
console.log(error)
})
}
modifysy = (i) => {
if (i === 1) {
this.setState({
modify: true
})
} else if (i === 2) {
this.setState({
modify: false
})
let righturl = "/paths/" + this.props.match.params.pathId + "/right_banner.json";
axios.get(righturl).then((result) => {
if (result.data.status === 407 || result.data.status === 401) {
return;
}
if (result.data.status === 403) {
// window.location.href = "/403";
return;
}
this.setState({
// detailInfoList:result.data,
tags: result.data.tags,
progress: result.data.progress,
members: result.data.members,
items: getItems(result.data.members.length),
team_title: result.data.team_title
})
}).catch((error) => {
console.log(error);
})
} else if (i === 3) {
this.setState({
modify: false
})
}
}
setteam_title(name) {
this.setState({
team_title: name
})
}
maincontent = () => {
return (<div className={"sandianbox"}>
<div onClick={() => this.modifysy(1)}>重命名</div>
</div>)
}
render() {
this.updatamakedown("shixuns_propaedeutics");
this.updatamakedown("subject_learning_notes");
let { detailInfoList,
clickdetailInfoListtype,
Modalstype,
Modalstopval,
Modalsbottomval,
cardsModalcancel,
cardsModalsave,
loadtype,
progress,
members,
tags,
qrcode_img,
MenuItemsindex,
MenuItemsindextype,
team_title,
modify
} = this.state
// console.log(MenuItemsindex)
// console.log(MenuItemsindextype===2&&detailInfoList&&detailInfoList.allow_statistics===false)
return (
<div className="newContainer">
<style>
{
`
.head-right{
line-height: 30px;
}
.padding40-20-30{
padding:40px 20px 30px;
}
.pathDetailIndex .markdown-body > p {
line-height: 28px;
}
// #shixuns_propaedeutics{
// width: 100% !important;
// }
`
}
</style>
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel}
modalSave={cardsModalsave}
loadtype={loadtype}
>
</Modals>
<div className="newMain clearfix pathDetailIndex">
<DetailTop {...this.state} {...this.props} getdatasindex={(key) => this.getdatasindex(key)} getMenuItemsindex={(key, status) => this.getMenuItemsindex(key, status)} getlistdatas={() => this.getlistdatas()}></DetailTop>
<div className="educontent clearfix mb80">
<div className="with65 fl">
<div className="produce-content mb10">
<p className="clearfix mb20">
<span className="fl font-18 font-bd">简介</span>
{/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
{/*<Tooltip placement="bottom" title={"编辑"}>*/}
{/*<Link className="fr" to={"/paths/"+this.props.match.params.pathId+"/edit"}>*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
{/*</Link>*/}
{/*</Tooltip>*/}
{/*:""*/}
{/*}*/}
</p>
<div className="color-grey-6 clearfix">
<div id="shixuns_propaedeutics" className="new_li fl" style={{ "padding": " 0px", "textAlign": "justify;" }}>
{detailInfoList === undefined ? "" : detailInfoList.description === null ? "" :
<div className={"markdown-body font-14"} dangerouslySetInnerHTML={{ __html: markdownToHTML(detailInfoList.description).replace(/▁/g, "▁▁▁") }}></div>
}
</div>
</div>
</div>
<DetailCards
{...this.props}
{...this.state}
updatadetailInfoLists={this.updatadetailInfoList}
></DetailCards>
</div>
<div className="with35 fr pl20">
{qrcode_img === null ? "" : <div className="edu-back-white newmustlearn mb10">
<img src={`${qrcode_img}`} />
<div className="font-16 color181818">优惠报名，扫码入群</div>
</div>}
<div className="edu-back-white mustlearn mb10">
<p className="clearfix mb30">
<span className="font-16 ">课程须知</span>
{/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
{/*<Tooltip placement="bottom" title={"编辑"}>*/}
{/*<Link to={"/paths/"+this.props.match.params.pathId+"/edit#learning_notes"} className="fr mtf5">*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
{/*</Link>*/}
{/*</Tooltip>*/}
{/*:""*/}
{/*}*/}
</p>
<div id="subject_learning_notes" className="color-grey-6 new_li markdown-body editormd-html-preview justify">
{detailInfoList === undefined ? "" : detailInfoList.learning_notes === null ? "" :
<div className={"markdown-body font-14"} dangerouslySetInnerHTML={{ __html: markdownToHTML(detailInfoList.learning_notes).replace(/▁/g, "▁▁▁") }}></div>
}
</div>
</div>
{tags === undefined ? "" : tags === null ? "" :
<div className="edu-back-white padding40-20 mb10 relative">
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{tags.length}</span></p>
<div className={clickdetailInfoListtype === false ? "newedbox newedboxheight" : "newedbox newminheight"}>
<div className="clearfix" id="boxheight">
{
tags && tags.map((item, key) => {
return (
<span value={key} className={item.status == true ? "edu-filter-btn29BD8B fl" : "newedu-filter-btn fl"}>{item.tag_name}</span>
)
})
}
</div>
</div>
<Tooltip placement="bottom" title={"显示全部"}>
<div className={tags.length > 20 && clickdetailInfoListtype === false ? "newsubscript mb9 color-grey-9 fr" : "newsubscript mb9 color-grey-9 none"}
onClick={() => this.clickNewsubscript(0)}
><span className="mr8">...</span><Icon type="caret-down" />
</div>
</Tooltip>
<Tooltip placement="bottom" title={"收起"}>
<div className={clickdetailInfoListtype === false ? "newsubscript mb9 color-grey-9 none" : "newsubscript mb9 color-grey-9 fr"}
onClick={() => this.clickNewsubscript(1)}><Icon type="caret-up" />
</div>
</Tooltip>
</div>
}
{
this.props.checkIfLogin() === false ? "" : progress === undefined ? "" : progress === null ? "" :
<div className="edu-back-white myProgress padding40-20-30 mb10">
<p className="mb20">
<span className="font-16 mr10">关卡数</span>
<Tooltip placement="bottom" title="已通关数/关卡总数">
<span className="color-green" >{progress.my_score} / {progress.all_score}</span>
</Tooltip>
</p>
<p className="clearfix mb10">
<span className="fl color-green">已学 {progress.learned}%</span>
<span className="fr color-grey-9" id="time-consuming">学习耗时{this.timeStamp(progress.time)} </span>
</p>
<div className="myProgressNav mb20"><div className="myProgressGreen" style={{ "width": `${progress.learned + "%"}` }}></div></div>
<span className="font-14 color-grey-8">注: “我的进展”以已发布的实训详情关卡数为准。</span>
</div>
}
{
members === undefined ? "" : members === null ? "" :
<div className="teacherTeam edu-back-white clearfix" id="subject_members">
{
detailInfoList === undefined ?
<p className="font-16 clearfix">{team_title}</p> : detailInfoList.allow_add_member === true ?
(
modify === false ?
<div>
<p className="font-16 clearfix fl" onDoubleClick={() => this.modifysy(1)}>{team_title}</p>
<Popover placement="right" content={this.maincontent()} trigger="hover">
<i className={"iconfont icon-sandian fr color999"} style={{
width: "30px",
height: "30px",
textAlign: "right",
}}></i>
</Popover>
</div>
:
<Modifytext {...this.props} {...this.state} pathid={this.props.match.params.pathId}
modifysy={(i) => this.modifysy(i)}
setteam_title={(name) => this.setteam_title(name)}></Modifytext>
)
: <p className="font-16 clearfix">{team_title}</p>
}
{members === undefined ?
members && members.map((item, key) => {
return (
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/" + item.image_url}`)} width="80" />
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/*{*/}
{/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/}
{/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/}
{/*}*/}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl">
<span className="mr10">{item.school}</span>
{/*<span>{item.identity}</span>*/}
</p>
</div>
</div>
</div>
)
})
: detailInfoList === undefined ? "" : detailInfoList.allow_add_member === true ?
members && members.map((item, key) => {
return (
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/" + item.image_url}`)} width="80" />
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/* 新增role 判断是否能删除 1 管理员 2 合作者 */}
{
detailInfoList === undefined ? "" : detailInfoList.allow_add_member === true && item.role == 2 ?
<a className="fr" onClick={() => this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a> : ""
}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span>
{/*<span>{item.identity}</span>*/}
</p>
</div>
{
detailInfoList === undefined ? "" : detailInfoList.allow_add_member === true ? <div>
{key != 0 ? <div className="fr ml15 flex1"><a onClick={() => this.moveup(item)}><Tooltip title="上移"><i className="color-green font-18 iconfont icon-xiangshangyi"></i></Tooltip></a></div> : ""}
{key + 1 == members.length ? "" : <div className="fr ml15 flex1 "><a onClick={() => this.movedown(item)}><Tooltip title="下移"><i className="color-green font-18 iconfont icon-xiangxiayi"></i></Tooltip></a></div>}
</div>
: ""
}
</div>
</div>
)
})
: members && members.map((item, key) => {
return (
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/" + item.image_url}`)} width="80" />
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/*{*/}
{/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/}
{/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/}
{/*}*/}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span>
{/*<span>{item.identity}</span>*/}
</p>
</div>
</div>
</div>
)
})}
</div>
}
<AddCollaborators {...this.props} {...this.state} updatadetailInfoLists={this.updatadetailInfoList}></AddCollaborators>
</div>
</div>
</div>
</div>
)
}
}
export default PathDetailIndex;

233
src/modules/paths/PathDetail/addCollaborators.js
View File

@ -1,233 +0,0 @@
import React, { Component } from 'react';
import { Modal,Checkbox,Input } from "antd";
import axios from 'axios';
const Search = Input.Search;
const CheckboxGroup = Checkbox.Group;
class addCollaborators extends Component{
constructor(props){
super(props);
this.state = {
addPartner:false,
page:1,
partnerList:undefined,
search:'',
partnerListid:[],
checkAll: false,
optionss:[],
useristrue:false
}
}
addBox=()=>{
this.setState({
addPartner:true,
search:"",
page:1,
partnerList:undefined,
optionss:[]
})
this.searchList("")
}
hideAddBox=()=>{
this.setState({
addPartner:false,
optionss:[],
partnerListid:[]
})
}
// 搜索框输入
changeSearchValue=(e)=>{
this.setState({
search: e.target.value
})
}
// 回车搜索--搜索成功后page为1
searchList=()=>{
let id=this.props.match.params.pathId;
let {search,page}=this.state;
let url='/paths/'+id+'/search_members.json?search='+search+"&page="+page;
axios.post(url).then((result)=>{
if(result.status==200){
let list=result.data.users;
let optionss=[]
for(var i=0; i<list.length;i++){
optionss.push(list[i].user_id)
}
this.setState({
partnerList:result.data.users,
page:1,
optionss:optionss
})
}
}).catch((error)=>{
console.log(error);
})
}
SaveAddBox=()=>{
let {partnerListid} =this.state;
let id=this.props.match.params.pathId;
let url="/paths/"+id+"/add_subject_members.json"
if(partnerListid.length===0){
this.setState({
useristrue:true
})
return
}
axios.post(url,{
user_ids:partnerListid
}).then((response) => {
if(response.status==200){
this.setState({
addPartner:false,
optionss:[],
partnerListid:[]
})
this.props.updatadetailInfoLists();
}
}).catch((error) => {
console.log(error)
});
}
addCollaboratorsid=(id)=>{
if(id.length===0){
this.setState({
partnerListid:id,
})
}else{
this.setState({
partnerListid:id,
useristrue:false
})
}
}
onCheckAllChange = (e) => {
let {optionss} =this.state;
if(e.target.checked===true){
this.setState({
checkAll: e.target.checked,
partnerListid:optionss
});
}else{
this.setState({
checkAll: e.target.checked,
partnerListid:[]
});
}
}
contentViewScroll=(e)=>{
//滑动到底判断
let newscrollTop=parseInt(e.currentTarget.scrollTop);
let allclientHeight=e.currentTarget.clientHeight+newscrollTop;
if(e.currentTarget.scrollHeight-allclientHeight===0||e.currentTarget.scrollHeight-allclientHeight===1||e.currentTarget.scrollHeight-allclientHeight===-1){
// console.log("到达底部");
let id=this.props.match.params.pathId;
let {search,page,partnerList,optionss}=this.state;
let newpage=page+1;
let url='/paths/'+id+'/search_members.json?search='+search+"&page="+newpage;
axios.post(url).then((result)=>{
if(result){
let list=result.data.users;
let newlist=partnerList;
for(var j=0; j<list.length;j++){
newlist.push(list[j])
}
let newoptionss=optionss
for(var i=0; i<list.length;i++){
newoptionss.push(list[i].user_id)
}
this.setState({
partnerList:newlist,
page:newpage,
optionss:optionss
})
}
}).catch((error)=>{
console.log(error);
})
}
}
render(){
let {addPartner,search,partnerList,optionss,checkAll,partnerListid,useristrue} = this.state;
return(
this.props.detailInfoList===undefined?"":this.props.detailInfoList.allow_add_member===true?
<div className="edu-back-white bor-top-greyE addTeamMember">
<a onClick = {this.addBox} className="color-blue">+ 添加合作者</a>
<Modal
keyboard={false}
title="添加合作者"
visible={addPartner}
closable={false}
footer={null}
destroyOnClose={true}
>
<div className="newupload_conbox clearfix">
<div className="mb20">
<Search placeholder="输入用户的真实姓名进行搜索" id="search_not_collaborators" style={{"width":"100%"}}
autocomplete="off"
value={search}
onInput={this.changeSearchValue}
onSearch={search => this.searchList(search)} />
</div>
<p className="clearfix pt10 pl10 pr10" style={{"background":"#F4FAFF","marginBottom":"0px"}}>
<Checkbox className="fl"
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
></Checkbox>
<span className="span1 fl edu-txt-w80 task-hide font-bd">姓名</span>
<span className="span3 fl edu-txt-w80 task-hide font-bd">昵称</span>
<span className="span2 fl edu-txt-w80 task-hide font-bd">职位</span>
<span className="span3 fl edu-txt-w260 task-hide font-bd">单位</span>
</p>
<ul className="upload_select_box fl clearfix mb15"
style={{"overflow-y":"auto"}}
id="search_not_members_list"
onScroll={this.contentViewScroll}
>
<CheckboxGroup style={{ width: '100%' }} value={checkAll===true?optionss:partnerListid} onChange={this.addCollaboratorsid}>
{
partnerList && partnerList.map((item,key)=>{
return(
<li className="clearfix" key={key}>
<Checkbox value={item.user_id} key={item.user_id} className="fl"></Checkbox>
<a target="_blank" className="task-hide color-grey3 fl span1 edu-txt-w80">{item.user_name}</a>
<span className="task-hide fl color-grey edu-txt-w80 span2">{item.nickname}</span>
<span className="task-hide fl color-grey edu-txt-w80 span2">{item.identity}</span>
<span className="span3 color-grey fl edu-txt-w260 task-hide">{item.school_name}</span>
</li>
)
})
}
</CheckboxGroup>
</ul>
{useristrue===true?<span className={"color-red"}>请先选择用户</span>:""}
<div className="mt20 marginauto clearfix edu-txt-center">
<a onClick={this.hideAddBox} className="pop_close task-btn mr30">取消</a>
<a className="task-btn task-btn-orange" onClick={this.SaveAddBox} id="submit_send_shixun">确定</a>
</div>
</div>
</Modal>
</div>:""
)
}
}
export default addCollaborators;

282
src/modules/paths/PathDetail/sendPanel.js
View File

@ -1,282 +0,0 @@
import React,{ Component } from "react";
import { Modal,Radio,Input,Tooltip,Checkbox,Select, Row,Col } from "antd";
import axios from 'axios';
import { SnackbarHOC } from 'educoder';
import moment from 'moment';
import Modals from '../../modals/Modals';
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
class sendPanel extends Component{
constructor(props){
super(props);
this.state={
sentShixunPath:false,
sendToCourseList:undefined,
openSearch:false,
sendToCourseId:undefined,
sendToShixunArray:[],
Modalstype:false,
cardsModalcancel:this.cardsModalcancel,
cardsModalsave:this.cardsModalsave,
modalsTopval:'',
Modalsbottomval:'',
courseurl:''
}
}
//发送至
SentToLesson =() =>{
let id=this.props.detailInfoList.id;
let url="/paths/"+id+"/choose_course.json";
axios.get(url).then((result)=>{
if(result.status==200){
if (result.data.status === 403||result.data.status === 402||result.data.status === 407||result.data.status === 408) {
}else{
this.setState({
sendToCourseList:result.data,
sentShixunPath:true
})
}
}
}).catch((error)=>{
console.log(error);
})
// this.setState({
// sentShixunPath:true
// })
}
//隐藏发送至弹框
hideSenttothevalue =()=>{
this.setState({
sentShixunPath:false,
sendToShixunArray:[],
sendToCourseId:undefined,
})
}
//打开课堂列表下拉框
openList=()=>{
this.setState({
openSearch:true
})
}
//关闭课堂列表下拉框
closeList=()=>{
this.setState({
openSearch:false
})
}
// 选择课堂获取选中的Id
selectCloseList=(e)=>{
this.setState({
openSearch:false,
sendToCourseId:e
})
}
//选择checkbox
changeCheckBoxs=(list)=>{
this.setState({
sendToShixunArray:list,
// shixunNum:list.length
})
}
//确认提交
submitInfo=()=>{
let {sendToCourseId,sendToShixunArray}=this.state;
if(sendToCourseId===undefined){
this.props.showSnackbar("您还未选择发送的课堂");
}else if(parseInt(sendToShixunArray.length)==0){
this.props.showSnackbar("您还未选择实训");
}else{
let id=this.props.detailInfoList.id;
let url="/paths/"+id+"/send_to_course.json";
axios.post(url,{
shixun_ids:sendToShixunArray,
course_id:sendToCourseId
}).then((result)=>{
if(result.data.status===1){
this.setState({
Modalstype:true,
sentShixunPath:false,
Modalstopval:result.data.message,
courseurl:result.data.url,
sendToShixunArray:[],
sendToCourseId:undefined,
})
}
}).catch((error)=>{
console.log(error);
})
}
}
componentDidMount(){
// let id=this.props.detailInfoList.id;
// let url="/paths/"+id+"/choose_course.json";
// axios.get(url).then((result)=>{
// if(result.status==200){
// this.setState({
// sendToCourseList:result.data
// })
// }
// }).catch((error)=>{
// console.log(error);
// })
}
cardsModalcancel=()=>{
this.setState({
Modalstype:false,
})
}
cardsModalsave=()=>{
let {courseurl}=this.state;
window.location.href =courseurl;
}
allChange = (e) => {
if(e.target.checked===false){
this.setState({
sendToShixunArray: [],
})
}else{
let { sendToCourseList} = this.state;
let newlist = [];
sendToCourseList.stages.map((item,key)=>{
item.shixuns.map((items,keys)=>{
newlist.push(items.shixun_id)
})
})
this.setState({
sendToShixunArray: newlist,
})
}
}
render(){
let{sentShixunPath,sendToCourseList,Modalstype,Modalstopval,Modalsbottomval,cardsModalcancel,cardsModalsave}= this.state;
return(
<div>
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel}
modalSave={cardsModalsave}
>
</Modals>
{
this.props.detailInfoList===undefined?"":this.props.detailInfoList.allow_send===true?
<Tooltip placement="bottom" title="以实训作业的形式发送到我的课堂">
<a onClick = {this.SentToLesson} className="fr font-18 color-white kaike mr20 kkbths"
style={{width:this.props&&this.props.widths}}
>
发送至
</a>
</Tooltip>:''
}
<Modal
keyboard={false}
title="发送至课堂"
visible={sentShixunPath}
closable={false}
footer={null}
destroyOnClose={true}
>
<div className="newupload_conbox">
{
sentShixunPath&&sentShixunPath===true?<style>
{
`
body{
width: calc(100%) !important;
}
`
}
</style>:""
}
<div className="mb20"
// onMouseLeave={this.closeList}
>
<Select
placeholder="请选择您要发送的课堂"
style={{"width":"100%"}}
onSelect={this.selectCloseList}
// onMouseEnter={this.openList}
defaultOpen={false}
// open={openSearch}
optionLabelProp="name"
>
{
sendToCourseList === undefined ? "": sendToCourseList.courses.map((item,key)=>{
return(
<Option key={item.course_id} id={key} name={item.course_name}>
<Row>
<Col className="fl with70 task-hide">{item.course_name}</Col>
<Col className="fl color-grey-9 with30 edu-txt-center">
{moment( item.created_at ).format('YYYY-MM-DD HH:mm')}
</Col>
</Row>
</Option>
)
})
}
</Select>
</div>
<div className="edu-back-skyblue pl15 pr15 clearfix over280 pt5">
<CheckboxGroup onChange={this.changeCheckBoxs} value={this.state.sendToShixunArray}>
{
sendToCourseList && sendToCourseList.stages.map((item,key)=>{
return(
item.shixuns.map((items,keys)=>{
return(
<div className="mt5" key={keys}>
<Checkbox name={key} value={items.shixun_id} key={items.shixun_id}>{items.shixun_name}</Checkbox>
</div>
)
})
)
})
}
</CheckboxGroup>
</div>
<div className="mt10 clearfix">
<span className="fl ml15">
<Checkbox className="fl"
onChange={(e)=>this.allChange(e)}
>全选</Checkbox>
</span>
</div>
<p className="color-grey-9 pl15 font-12 mt10">已选择 {this.state.sendToShixunArray.length} 个实训</p>
<div className="mt20 clearfix edu-txt-center">
<a onClick={this.hideSenttothevalue} className="pop_close task-btn mr30">取消</a>
<a className="task-btn task-btn-orange" onClick={this.submitInfo}>确定</a>
</div>
</div>
</Modal>
</div>
)
}
}
export default SnackbarHOC()(sendPanel);

244
src/modules/paths/PathNew.js
View File

@ -1,244 +0,0 @@
import React, { Component } from "react";
import { Input } from 'antd';
import TPMMDEditor from "../tpm/challengesnew/TPMMDEditor";
import { Link } from "react-router-dom";
import axios from 'axios';
require('codemirror/lib/codemirror.css');
const $ = window.$;
class PathNew extends Component {
constructor(props) {
super(props);
this.contentMdRef = React.createRef();
this.Point_editMD = React.createRef();
this.state = {
pathName: "",
description: "",
point: "",
flag_name: true,
bottonloading: false
}
}
// 提交
submitNewPath = () => {
let { pathName } = this.state;
if (pathName === "") {
this.props.showSnackbar("请输入实践课程名称");
window.location.href = "#part_Name";
this.setState({
flag_name: false
})
return;
}
let des = this.contentMdRef.current.getValue().trim();
if (des === "") {
this.props.showSnackbar("请输入实践课程的简介");
window.location.href = "#part_Des";
return;
}
if (des.length > 8000) {
this.props.showSnackbar("实践课程的简介最大限制8000个字符");
window.location.href = "#part_Des";
return;
}
let point = this.Point_editMD.current.getValue().trim();
if (point === "") {
this.props.showSnackbar("请输入实践课程的学习须知");
window.location.href = "#part_point";
return;
}
if (point.length > 2000) {
this.props.showSnackbar("实践课程的学习须知最大限制2000个字符");
window.location.href = "#part_point";
return;
}
if (this.isEditPage == true) {
this.setState({
bottonloading: true
})
let pathId = this.props.match.params.pathId;
const editUrl = `/paths/${pathId}.json`
axios.put(editUrl, {
name: pathName,
description: des,
learning_notes: point
}).then((response) => {
// console.log(response.data.subject_id);
if (response.data.subject_id) {
this.props.history.push(`/paths/${response.data.subject_id}`)
} else {
this.setState({
bottonloading: false
})
}
}).catch((error) => {
console.log(error);
this.setState({
bottonloading: false
})
})
} else {
this.setState({
bottonloading: true
})
let url = "/paths.json"
axios.post(url, {
name: pathName,
description: des,
learning_notes: point
}).then((response) => {
// console.log(response.data.subject_id);
if (response.data.subject_id) {
this.props.history.push(`/paths/${response.data.subject_id}`)
} else {
this.setState({
bottonloading: false
})
}
}).catch((error) => {
console.log(error);
this.setState({
bottonloading: false
})
})
}
}
componentDidMount() {
let url = "/paths/new.json"
axios.get(url).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error);
})
let pathId = this.props.match.params.pathId;
if (pathId) {
this.isEditPage = true
// const url = `/paths/${pathId}.json`
const url = `/paths/${pathId}/edit.json`
axios.get(url).then((response) => {
/**
description:
id: 13
learning_notes:
name:
*/
if (response.data.name) {
this.setState({
pathName: response.data.name
})
this.contentMdRef.current.setValue(response.data && response.data.description);
this.Point_editMD.current.setValue(response.data && response.data.learning_notes);
}
}).catch((error) => {
console.log(error);
})
} else {
this.isEditPage = false
this.contentMdRef.current.setValue("");
this.Point_editMD.current.setValue("");
}
}
InputName = (e) => {
this.setState({
pathName: e.target.value,
})
}
render() {
let pathId = this.props.match.params.pathId;
let { pathName, description, point, flag_name } = this.state;
return (
<div className="newContainer">
<div className="newMain clearfix">
<div className="educontent mt10 mb50">
<div className="mb10 edu-back-white">
<p className="padding20 bor-bottom-greyE font-18 color-grey-3">{pathId ? '编辑' : '创建'}实践课程</p>
<div className="padding30-20" id="part_Name">
<p className="color-grey-6 font-16 mb15">实践课程名称</p>
<div className="df">
<span className="mr30 color-orange pt10">*</span>
<div className="flex1 mr20">
<Input className={flag_name === true ? "input-100-45 greyInput" : "input-100-45 greyInput bor-red"}
maxLength="60"
placeholder="例如：从Python程序设计-入门精通"
value={pathName}
onInput={this.InputName}
></Input>
</div>
</div>
</div>
</div>
<div className="mb10 edu-back-white padding30-20" id="part_Des">
<p className="color-grey-6 font-16 mb15">简介</p>
<div className="df">
<span className="mr30 color-orange pt10">*</span>
<div className="flex1 mr20">
<div id="shixun_introduction" className="new_li">
{/*<textarea className="input-100-45" name="description" placeholder="请在此输入实践课程的简介" value={description}></textarea>*/}
<TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入实践课程的简介，最大限制8000个字符" mdID={'courseContentMD'}
refreshTimeout={1500}
className="courseMessageMD"
// initValue={this.state.description === null ? "" : this.state.description}
></TPMMDEditor>
</div>
<p id="e_tip_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
<p id="e_tips_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
</div>
</div>
</div>
<div className="mb10 edu-back-white padding30-20" id="part_point">
<p className="color-grey-6 font-16 mb15" id="learning_notes">学习须知</p>
<div className="df">
<span className="mr30 color-orange pt10">*</span>
<div className="flex1 mr20">
<div id="shixun_propaedeutics" className="new_li ">
{/*<textarea name="learning_notes" placeholder="请在此输入实践课程的学习须知" value={point}></textarea>*/}
<TPMMDEditor ref={this.Point_editMD} placeholder="请在此输入实践课程的学习须知，最大限制2000个字符" mdID={'Point_editMDs'}
refreshTimeout={1500}
className="courseMessageMD"
// initValue={this.state.description === null ? "" : this.state.description}
></TPMMDEditor>
</div>
<p id="e_tip_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
<p id="e_tips_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
</div>
</div>
</div>
<div className="clearfix mb30 mt30">
<button className="defalutSubmitbtn fl mr20" loading={this.state.bottonloading} onClick={this.submitNewPath}>提交</button>
{this.isEditPage ?
<Link to={`/paths/${this.props.match.params.pathId}`}
className="defalutCancelbtn fl">取消</Link>
: <Link to={`/paths`} className="defalutCancelbtn fl">取消</Link>
}
</div>
</div>
</div>
</div>
)
}
}
export default PathNew;

212
src/modules/paths/SchoolStatistics/FirstTab.js
View File

@ -1,212 +0,0 @@
import React,{ Component } from "react";
import {Pagination} from 'antd';
import axios from 'axios';
const $ = window.$;
const echarts = require('echarts');
function InitChapterUsageSituation(_data){
var myChart = echarts.init(document.getElementById('chapterUsageSituation'));
myChart.showLoading({
text: "数据获取中",
effect: 'whirling'
})
var Color = ['#49A9EE', '#FFD86E', '#98D87D', '#8996E6','#F3857B', '#B97BF3','#4DE8B4','#f76d0c','#510cf7','#def70c','#3bf70c','#0cf7e1'];
var option = {
title: {
show:false
},
tooltip : {
trigger: 'item',
formatter: "{d}%"
},
legend: {
//orient: 'vertical',
// top: 'middle',
bottom: 30,
//left: 20,
data:["第1章", "第2章", "第3章", "第4章", "第5章"],
selectedMode:false
},
series : [{
name: '使用情况',
type: 'pie',
radius : '50%',
center: ['50%', '40%'],
selectedMode: 'single',
label: {
normal: {
// {abg|}
// {a|{a}}\n
formatter: ' {b|{b}} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
},
},
data: _data,
// [{"value":19,"name":"\u7b2c1\u7ae0"},{"value":45,"name":"\u7b2c2\u7ae0"},{"value":16,"name":"\u7b2c3\u7ae0"},{"value":10,"name":"\u7b2c4\u7ae0"},{"value":10,"name":"\u7b2c5\u7ae0"}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
show: true,
color: function(params) {
return Color[params.dataIndex]
}
}
}
}]
};
setTimeout(() => {
myChart.setOption(option);
myChart.hideLoading();
}, 1000)
}
class FirstTab extends Component{
constructor(props){
super(props);
this.state = {
page:1,
total:undefined
}
}
onChange=(pageNumber)=>{
this.setState({
page:pageNumber
})
this.getData(pageNumber);
}
getData=(page)=>{
var pathId = this.props.match.params.pathId;
const url = `/paths/${pathId}/statistics.json?page=`+page;
axios.get(url, {
})
.then((response) => {
// TODO 没用，404返回的error
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
return
}
this.setState({ ...response.data })
const _data = response.data.stage_info.map( (item, index) => {
return {
value: item.value,
name: item.stage_no
}
})
InitChapterUsageSituation(_data);
const { course_count, learn_count, school_total_count, subject_name, subject_id } = response.data
this.props.initBannerData({
course_count,
learn_count,
school_total_count,
subject_name,
subject_id
})
this.setState({
total:response.data.school_total_count
})
})
.catch(function (error) {
console.log(error);
});
}
componentDidMount(){
let {page}=this.state;
this.getData(page);
}
render(){
const { schools, stage_info,page,total } = this.state;
return(
<div className="clearfix panelForm-1">
<div className="with60 pr40 fl">
<div className="static_shadow edu-back-white">
<p className="padding30-20 clearfix"><span className="font-24 fl">课堂使用概况</span><span className="fr color-grey-9">共{total}条记录</span></p>
<div className="minH-440">
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead>
<tr><th>序号</th>
<th className="edu-txt-left" width="35%">所属院校</th>
<th>课堂</th>
<th>学生</th>
<th>选用实训</th>
</tr></thead>
{/*
course_count: 30
homework_count: 117
name: "国防科技大学"
student_count: 2700
*/}
<tbody>
{
schools && schools.map( (school, index) => {
return (
<tr>
<td>{ index + 1 }</td>
<td className="edu-txt-left task-hide" style={{"maxWidth":"238px"}}>{school.name}</td>
<td>{school.course_count}</td>
<td>{school.student_count}</td>
<td><span className="color-blue mr3">{school.homework_count}</span>次</td>
</tr>)
})
}
</tbody>
</table>
</div>
<div className="pt35 edu-txt-center" style={{"height":"102px"}}>
{
total > 10 &&
<Pagination showQuickJumper defaultCurrent={page} pageSize={10} total={total} onChange={this.onChange} />
}
</div>
</div>
</div>
<div className="with40 fl static_shadow edu-back-white">
<p className="font-24 padding30-20">章节使用情况</p>
<div id="chapterUsageSituation" style={{"width":"480px","height":"542px"}}></div>
</div>
</div>
)
}
}
export default FirstTab;

291
src/modules/paths/SchoolStatistics/SecondTab.js
View File

@ -1,291 +0,0 @@
import React,{ Component } from "react";
import axios from 'axios';
const $ = window.$;
const echarts = require('echarts');
function InitShixunStudyStatistics(yAxisMonth_a, barData_a, mapByNumber, myChart){
let yAxisMonth = yAxisMonth_a
// [
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1",
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1",
// "1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
let barData = barData_a
// [
// 1164, 739, 784, 720, 726, 556, 381, 432,
// 1164, 739, 784, 720, 726, 556, 381, 432,
// 1164, 739, 784, 720, 726, 556, 381, 432, 239];
// let yAxisMonth = yAxisMonth_a;
// let barData = barData_a;
let barDataTwo = [];
let coordData2 = [];
let coordData = [];
for (let i = 0; i < barData.length; i++) {
barDataTwo.push(Math.max.apply(Math, barData) + 5000);
coordData.push({
"coord": [Number(barData[i]) - 1, i]
});
coordData2.push({
"coord": [Math.max.apply(Math, barData) + 5000, i]
})
}
var option = {
backgroundColor: "#fff",
title: {
text: ''
},
legend: null,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0].name + ":" + (mapByNumber[params[0].name] && mapByNumber[params[0].name].shixun_name) + "<br/>" + '学习人数: ' + params[0].value;
}
},
grid: {
containLabel: true,
left: "30px",
top: "0",
bottom:"10px"
},
yAxis: [{
data: yAxisMonth,
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#747A7F'
},
formatter: function(value) {
return '{Sunny|' + value + '}';
},
rich: {
value: {
lineHeight: 20
},
Sunny: {
height: 25,
padding: [0, 8, 0, 8],
align: 'center',
backgroundColor: '#fff'
}
}
}
},{
data: yAxisMonth,
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}
],
xAxis: [{
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}, {
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}],
series: [{
z: 10,
xAxisIndex: 0,
yAxisIndex: 0,
name: '',
type: 'pictorialBar',
data: barData,
barCategoryGap: '90%',
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
fontSize: 12,
color: '#666'
}
}
},
symbolRepeat: false,
symbolSize: ['100%', 25],
symbolOffset: [-16.5, 0],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFD86E'
}], false),
borderRadius:'10'
}
},
symbolClip: true,
symbolPosition: 'end',
symbol: 'rect'
}]
};
myChart.setOption(option);
}
class SecondTab extends Component{
constructor(props){
super(props);
this.state = {
}
}
componentDidMount(){
var pathId = this.props.match.params.pathId;
var myCharts = echarts.init(document.getElementById('showloding'));
myCharts.showLoading({
text: "数据获取中",
effect: 'whirling'
})
const url = `/paths/${pathId}/shixun_report.json`
axios.get(url, {
})
.then((response) => {
// TODO 没用，404返回的error
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
return
}
/**
let yAxisMonth = ["1-1", "1-2", "1-3", "1-4", "2-1", "2-2", "2-3", "3-1", "3-2"];
let barData = [1164, 739, 784, 720, 726, 556, 381, 432, 239];
{
"number": "6-1",
"shixun_name": "网页抓取及信息提取",
"member_count": 0,
"school_count": 0
}
*/
let yAxisMonth = []
let barData = []
let shixunList = []
let mapByNumber = {}
const _data = response.data.shixun_lists.forEach( (ar, index) => {
ar.forEach( (item, itemIndex) => {
shixunList.push(item)
yAxisMonth.push(item.number)
barData.push(item.member_count)
mapByNumber[item.number] = item
})
})
this.setState({
shixunList
})
var myChart = echarts.init(document.getElementById('shixunStudyStatistics'));
myChart.showLoading({
text: "数据获取中",
effect: 'whirling'
})
setTimeout(() => {
InitShixunStudyStatistics(yAxisMonth, barData, mapByNumber, myChart);
myCharts.hideLoading();
myChart.hideLoading();
}, 1000)
})
.catch(function (error) {
console.log(error);
});
}
render(){
const { shixunList } = this.state;
return(
<div className="clearfix panelForm-2">
<div className="with60 pr40 fl">
<div className="static_shadow edu-back-white">
<div className="font-24 padding30-20">实训使用详情</div>
<div className="minH-440" id="tableHeight">
<table className="edu-pop-table head-color edu-txt-center bor-top-greyE" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<th>章节</th>
<th className="edu-txt-left" width="40%">实训名称</th>
<th>学习人数</th>
<th>受用院校</th>
</tr>
</thead>
<tbody>
{
shixunList && shixunList.map( (shixun, index) => {
return (
<tr>
<td>{shixun.number}</td>
<td className="edu-txt-left task-hide" style={{"maxWidth":"272px"}}>{shixun.shixun_name}</td>
<td>{shixun.member_count}</td>
<td className="color-blue">{shixun.school_count}</td>
</tr>)
})
}
</tbody>
</table>
</div>
</div>
</div>
<div className="with40 fl static_shadow edu-back-white">
<style>
{
`
.padding23-20{
padding: 23px 20px;
box-sizing: border-box;
}
`
}
</style>
<div className="font-24 padding23-20">实训学习统计</div>
{shixunList===undefined?<div id="showloding"
style={{"width":"480px","height":"440px"}}></div>:""}
{shixunList===undefined?"":<div id="shixunStudyStatistics"
style={{"width":"480px","minHeight":`${shixunList&&shixunList.length *50}px`}}></div>}
</div>
</div>
)
}
}
export default SecondTab;

82
src/modules/paths/SchoolStatistics/Statistics.js
View File

@ -1,82 +0,0 @@
import React, { Component } from "react";
import FirstTab from "./FirstTab.js";
import SecondTab from "./SecondTab.js";
import ThirdTab from "./ThirdTab.js";
import '../../paths/ShixunPaths.css'
const $ = window.$;
class Statistics extends Component {
constructor(props) {
super(props);
this.state = {
tabs: 1
}
}
changeTab = (index) => {
let i = parseInt(index);
this.setState({
tabs: i
})
}
initBannerData = (data) => {
this.setState({ ...data })
}
render() {
let { tabs, course_count, learn_count, school_total_count, subject_name, subject_id } = this.state;
return (
<div className="newContainer">
<div className="newMain clearfix">
<div className="subject_statistics_top">
<a href={`/paths/${subject_id}`}><p className="color-blue font-32 edu-txt-center pt50">{subject_name}</p></a>
<div className="statistics_position edu-txt-center">
<ul className="clearfix inline count_ul">
<li>
<span>学员人数</span>
<span>{learn_count}</span>
</li>
<li>
<span>受用课堂</span>
<span>{course_count}</span>
</li>
<li>
<span>受用院校</span>
<span>{school_total_count}</span>
</li>
</ul>
</div>
</div>
<div className="mb30 clearfix pl0 edu-back-white edu-txt-center statisticsNav">
<ul className="inline">
<li className={tabs === 1 ? "active" : ""} onClick={() => this.changeTab(1)}><a >课堂使用</a></li>
<li className={tabs === 2 ? "active" : ""} onClick={() => this.changeTab(2)}><a >实训使用</a></li>
<li className={tabs === 3 ? "active" : ""} onClick={() => this.changeTab(3)}><a >院校学习</a></li>
</ul>
</div>
<div className="educontent">
<div id="statistics_info" className="clearfix mb30">
{/* 课堂使用 */}
{tabs === 1 &&
<FirstTab {...this.props} initBannerData={this.initBannerData}></FirstTab>
}
{/* 实训使用 */}
{tabs === 2 &&
<SecondTab {...this.props}></SecondTab>
}
{/* 院校使用 */}
{tabs === 3 &&
<ThirdTab {...this.props}></ThirdTab>
}
</div>
</div>
</div>
</div>
)
}
}
export default Statistics;

247
src/modules/paths/SchoolStatistics/ThirdTab.js
View File

@ -1,247 +0,0 @@
import React,{ Component } from "react";
import axios from 'axios';
const $ = window.$
const echarts = require('echarts');
function InitCollegeStatistic(_data, myChart){
var data = _data
var _yData = data.map( item => {
return item.name
})
// [{name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4},{name: "长沙理工大学", 已通关: 0, 未通关: 7, sum: 7},{name: "安徽大学", 已通关: 1, 未通关: 8, sum: 9},{name: "湘潭大学兴湘学院", 已通关: 12, 未通关: 0, sum: 12},
// {name: "湖南师范大学", 已通关: 10, 未通关: 2, sum: 12},{name: "湖南软件职业学院", 已通关: 11, 未通关: 1, sum: 12},{name: "湖南科技大学", 已通关: 91, 未通关: 34, sum: 125},{name: "湘潭大学", 已通关: 110, 未通关: 45, sum: 155},
// {name: "湖南工业大学", 已通关: 133, 未通关: 41, sum: 174},{name: "国防科技大学", 已通关: 853, 未通关: 23, sum: 876}];
// <% @schools.each do |s| %>
// data.push({name: "<%= s['name'] %>", '已通关': <%= s['pass_count'] %>, '未通关': <%= s['unpass_count'] %>});
// <% end %>
// =================右边要放的字段名及颜色===========
var items = [{
key: '学习人数', color: "#29BD8B"
}, {
key: '已通关', color: "#FF954C"
}, {
key: '未通关', color: "#CBCBCB"
}]
data.forEach((d) => {
var sum = 0
items.forEach((i) => {
sum += (d[i.key] || 0)
})
d.sum = sum;
})
// =========================排序================
data.sort((a, b) => a.sum - b.sum)
var yData = _yData.reverse();
// ["湖南科技大学潇湘学院", "长沙理工大学", "安徽大学", "湖南软件职业学院", "湖南师范大学", "湘潭大学兴湘学院", "湖南科技大学", "湘潭大学", "湖南工业大学", "国防科技大学"]
var itemSeries = items.map((d, i) => {
var values = data.map((p) => p[d.key])
return {
type: 'bar',
name: d.key,
data: values,
stack: 'all',
xAxisIndex: 1,
yAxisIndex: 1,
label: {
normal: {
color:'#FFF',
// show: ( i == 1 ? true :false),
show: true,
position: 'inside'
}
},
itemStyle: {
normal: {
color: d.color
}
}
}
})
var option = {
backgroundColor: '#fff', // 背景
tooltip : {
trigger: 'axis',
axisPointer : {
type : ''
}
},
legend: {
data: ['学习人数','已通关','未通关'],
textStyle: {
color: '#05101A'
},
right:"20px",
selectedMode:false
},
grid: [{
right: '56%',
top: '20',
containLabel: true
}, {
left: '45%',
width:'100%',
top: '20',
containLabel: true
}],
xAxis: [{
type: 'value',
inverse: true,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
}, {
type: 'value',
gridIndex: 1,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
}],
yAxis: [{
type: 'category',
data: yData,
max:10,
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
}, {
type: 'category',
data: yData,
max:10,
gridIndex: 1,
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [...itemSeries,
{
name: '总计',
type: 'bar',
data: data.map((d) => d.sum),
xAxisIndex: 1,
yAxisIndex: 1,
barCategoryGap:'40%',
stack: 'all',
label: {
normal: {
show: true,
position: 'inside',
color: '#666'
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
// ===================左边===================
{
type: 'bar',
data: data.map((d) => d.sum),
barCategoryGap:'40%',
label: {
normal: {
show: true,
position: 'left',
color: '#29BD8B'
}
},
itemStyle: {
normal: {
color: '#29BD8B'
}
}
}]
}
myChart.setOption(option);
}
class ThirdTab extends Component{
constructor(props){
super(props);
}
componentDidMount(){
var pathId = this.props.match.params.pathId;
var myChart = echarts.init(document.getElementById('collegeStatistic'));
myChart.showLoading({
text: "数据获取中",
effect: 'whirling'
})
const url = `/paths/${pathId}/school_report.json`
axios.get(url, {
})
.then((response) => {
// TODO 没用，404返回的error
if (response.data.status == 404) {
this.props.showSnackbar('未找到对应数据，请查看地址是否正确。')
return
}
this.setState({ ...response.data })
// name: "湖南科技大学潇湘学院", 已通关: 0, 未通关: 4, sum: 4
/**
"name": "国防科技大学",
"student_count": 9269,
"pass_count": 6061,
"unpass_count": 3208
*/
const _data = response.data.schools.map( (item, index) => {
return {
name: item.name,
sum: item.student_count,
已通关: item.pass_count,
未通关: item.unpass_count,
}
})
InitCollegeStatistic(_data, myChart);
myChart.hideLoading()
})
.catch(function (error) {
console.log(error);
});
}
render(){
return(
<div className="clearfix mb30 static_shadow edu-back-white panelForm panelForm-3">
<div className="font-24 padding30-20">院校学习情况</div>
<div id="collegeStatistic" style={{"width":"1200px","height":"540px"}}></div>
</div>
)
}
}
export default ThirdTab;

57
src/modules/paths/ShixunPathCard.js
View File

@ -1,57 +0,0 @@
import React, { Component } from 'react';
import { setImagesUrl } from 'educoder';
import { Link } from "react-router-dom";
import LoadingSpin from '../../common/LoadingSpin';
import NodataPanel from '../../components/nodata-panel';
import './ShixunPaths.css';
class ShixunPathCard extends Component {
constructor(props) {
super(props)
}
render() {
let { pathList } = this.props;
return (
<div className="educontent" id="subjects_list_content">
{
pathList === null ? <LoadingSpin />
: pathList && pathList.length > 0 ?
(
<div className="square-list clearfix">
{
pathList && pathList.map((item, key) => {
return (
<div className="squareCard" id={item.id} key={item.id}>
{
item.excellent === false ? "" :
<div className="tag_open">
<span className="tag_open_name">开放课程</span>
</div>
}
<Link to={"/paths/" + item.id} className="squareImg" target="_blank">
<img alt="详情图片" src={setImagesUrl(item.image_url)} />
</Link>
<div className="mt20" style={{ marginLeft: "1px" }}>
<p className="task-hide mb10">
<Link to={"/paths/" + item.id} className="justify cardName">{item.name}</Link>
</p>
<p className="clearfix squareInfo">
<span className="fl pr squareLine mr20">章节: {item.stages_count}</span>
<span className="fl">学习人数: {item.members_count}</span>
</p>
</div>
</div>
)
})
}
</div>
) : <NodataPanel />
}
</div>
)
}
}
export default ShixunPathCard;

268
src/modules/paths/ShixunPathSearch.js
View File

@ -1,268 +0,0 @@
import React, { Component } from 'react';
import axios from 'axios';
import { Dropdown, Menu } from 'antd';
import { getImageUrl } from 'educoder';
import PathCard from "./ShixunPathCard";
import UpgradeModals from '../modals/UpgradeModals';
import './ShixunPaths.css';
import KeywordList from '../tpm/shixuns/shixun-keyword-list';
import btnUrl from './btn-new.png';
import Pagination from '../../components/mini-pagination'
class ShixunPathSearch extends Component {
constructor(props) {
super(props)
this.state = {
order: "updated_at",
select: undefined,
search: "",
page: 1,
pathList: null,
sortList: '',
total_count: 0,
sort: "desc",
limit: 16,
discipline_id: undefined,
sub_discipline_id: undefined
}
}
//适配器
onChangeLabel(value) {
let rs = value === 'new' ? 'updated_at' : 'myshixuns_count'
let { discipline_id, sub_discipline_id } = this.state;
this.setState({
order: rs,
page: 1
})
this.getList(rs, discipline_id, sub_discipline_id, 1)
}
//选择页数
onChange = (pageNumber) => {
let { order, discipline_id, sub_discipline_id } = this.state;
this.setState({
page: pageNumber
})
this.getList(order, discipline_id, sub_discipline_id, pageNumber);
}
//顶部分类
changeSelect = (e, tag_id, sum) => {
this.setState({
order: "updated_at",
discipline_id: tag_id,
page: 1,
sub_discipline_id: undefined
})
let { order } = this.state;
this.getList(order, tag_id, undefined, 1);
e.stopPropagation();
}
componentDidMount() {
document.title = "实践课程";
const upsystem = `/users/system_update.json`;
axios.get(upsystem).then((response) => {
let updata = response.data;
this.setState({
updata: updata
})
}).catch((error) => {
console.log(error);
})
this.getdisciplines()
let { order, discipline_id, sub_discipline_id, page } = this.state;
this.getList(order, discipline_id, sub_discipline_id, page);
}
getdisciplines = () => {
let url = '/disciplines.json';
axios.get(url, {
params: {
source: "subject"
}
}).then((result) => {
if (result.status == 200) {
// console.log(result.data.disciplines)
this.setState({
sortList: result.data.disciplines
})
}
}).catch((error) => {
console.log(error);
})
}
OnSearchInput = (value, type) => {
this.setState({
search: value,
page: 1
})
const { order, discipline_id, sub_discipline_id } = this.state
this.getList(order, discipline_id, sub_discipline_id, 1, value)
}
getList = (order, discipline_id, sub_discipline_id, page, keyword = '') => {
let url = '/paths.json';
axios.get(url, {
params: {
sort: "desc",
limit: 16,
order: order,
keyword,
page: page,
discipline_id: discipline_id,
sub_discipline_id: sub_discipline_id
}
}).then((result) => {
if (result.status == 200) {
this.setState({
pathList: result.data.subjects,
total_count: result.data.total_count
})
}
}).catch((error) => {
console.log(error);
})
}
//头部获取是否已经登录了
getUser = (url) => {
if (this.props.checkIfLogin() === false) {
this.props.showLoginDialog()
return
}
if (this.props.checkIfProfileCompleted() === false) {
this.props.showProfileCompleteDialog()
return
}
if (url !== undefined || url !== "") {
this.props.history.push(url);
}
}
getshixunchildValues = (e, id, item) => {
this.setState({
discipline_id: item.id,
sub_discipline_id: id,
})
let { order, page } = this.state;
this.getList(order, item.id, id, page);
e.stopPropagation();
}
getmenu = (list, item) => {
return (
<Menu>
<Menu.Item>
<div className="mt5 subshaicontent-part">
<div className="sub-Item clearfix">
{
list.map((tag, e) => {
return (
<a className={parseInt(this.state.sub_discipline_id) === tag.id ? "shixun_repertoire mr20 color-blue" : "shixun_repertoire mr20"}
key={e} id={tag.id} name={tag.id} rel="subshaicontent" onClick={(e) => this.getshixunchildValues(e, tag.id, item)}>{tag.name}</a>
)
})
}
</div>
</div>
</Menu.Item>
</Menu>
)
}
render() {
let { order, sortList, search, page, total_count, discipline_id } = this.state;
let pathstype = false;
if (this.props && this.props.mygetHelmetapi != null) {
let paths = "/paths";
this.props.mygetHelmetapi.navbar.map((item, key) => {
var reg = RegExp(item.link);
if (paths.match(reg)) {
if (item.hidden === true) {
pathstype = true
}
}
})
}
return (
<div className='shixun-path-search-container'>
{this.state.updata === undefined ? "" : <UpgradeModals
{...this.state}
/>}
<style>
{
`
::-webkit-scrollbar {
width: 0px !important;
}
.pathImg{
width: 100%;
height: 300px;
background-image: url(${getImageUrl(this.props.mygetHelmetapi && this.props.mygetHelmetapi.subject_banner_url === null ? `images/path/path.png` : this.props.mygetHelmetapi && this.props.mygetHelmetapi.subject_banner_url)});
background-color: #000a4f;
/* background-size: cover; */
background-position: center;
background-repeat: no-repeat;
}
.ant-dropdown-menu{
max-width:1000px;
}
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title{
white-space: normal !important;
line-height: 28px !important;
}
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover{
background-color: #fff !important;
}
a{text-decoration:none !important;}
`
}
</style>
<div className="pr">
<div className="pathImg"></div>
<div className="edu-back-white padding20 pathIndexNav">
<ul className="educontent clearfix">
<li className={discipline_id > 0 ? "" : "active"}><a onClick={(e) => this.changeSelect(e, undefined)}>全部</a></li>
{
sortList && sortList.map((item, key) => {
return (
<li className={discipline_id == `${item.id}` ? "active" : ""} onClick={(e) => this.changeSelect(e, `${item.id}`, item.sub_disciplines.length)} key={key}>
<Dropdown overlayStyle={{width:600}} disabled={item.sub_disciplines.length === 0} overlay={() => this.getmenu(item.sub_disciplines, item)} placement="bottomLeft">
<a value={item.id}>{item.name}</a>
</Dropdown>
</li>
)
})
}
</ul>
</div>
</div>
<KeywordList btnUrl={btnUrl} onChangeLabel={this.onChangeLabel.bind(this)} OnSearchInput={this.OnSearchInput.bind(this)} onNewHandler={this.getUser.bind(this, '/paths/new')} btnStyle={{ top: '72px' }} />
<PathCard {...this.props} {...this.state}></PathCard>
{
this.state.pathList === null ? "" : total_count > 16 &&
<div className="educontent mb80 edu-txt-center mt10">
<Pagination current={page} total={total_count || 1299} type="mini" pageSize={16} onChange={this.onChange} />
</div>
}
</div>
)
}
}
export default ShixunPathSearch;

327
src/modules/paths/ShixunPaths.css
View File

@ -1,327 +0,0 @@
.pathImg {
background: #4CACFF
}
.pathIndexNav {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
}
.pathIndexNav ul li {
float: left;
margin-right: 10px;
}
.pathIndexNav ul li a {
display: block;
font-size: 15px;
color: #333333;
padding: 0px 20px;
border-radius: 18px;
height: 32px;
line-height: 32px;
margin: 5px 0px;
}
.pathIndexNav ul li.active a,
.pathIndexNav ul li:hover a {
background: #DDECF9;
color: #4CACFF
}
/*.pathImg{*/
/*width: 100%;*/
/*height: 300px;*/
/*background-image: url(../../images/path/path.png);*/
/*background-color: #000a4f;*/
/*!* background-size: cover; *!*/
/*background-position: center;*/
/*background-repeat: no-repeat;*/
/*}*/
/* 首页-最新最热 */
.mainPageArray span {
font-size: 14px;
float: left;
background: #EBEBEB;
padding: 0px 16px;
height: 30px;
line-height: 30px;
color: #666666;
margin-right: 20px;
cursor: pointer;
border-radius: 15px;
}
.mainPageArray span.active {
background: #4CACFF;
color: #fff;
}
/* path-card */
.squareCard {
position: relative;
width: 280px;
margin-right: 26px;
margin-bottom: 40px;
float: left;
border-radius: 6px;
}
.squareCard:nth-child(4n) {
margin-right: 0px;
}
.squareCard .squareImg {
height: 175px;
width: 280px;
overflow: hidden;
display: block;
border-radius: 6px;
position: relative;
}
.squareCard .squareImg img {
transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
width: 100%;
position: absolute;
top: -17.5px;
}
.squareCard .squareImg img:hover {
transform: scale(1.05);
}
/* card info */
.cardName {
font-size: 16px;
font-weight: 600;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
}
.squareLine:after {
position: absolute;
width: 1px;
height: 10px;
background: #adadad;
content: '';
right: -10px;
top: 4px;
}
.squareInfo {
color: #777;
font-size: 12px;
font-weight: 400;
height: 18px;
line-height: 18px;
}
/* tag-开放课程 */
.tag_open {
position: absolute;
left: 0px;
top: 12px;
z-index: 1;
}
.tag_open .tag_open_name {
display: block;
width: auto;
background-color: #FF6800;
background-size: 100% 100%;
padding: 0px 8px;
color: #fff;
display: block;
height: 28px;
line-height: 28px;
border-radius: 0px 15px 15px 0px;
}
.paragraph:hover .status_li a {
display: block;
}
.newedu-filter-btn {
display: block;
float: left;
padding: 0 9px;
/*height: 28px;*/
line-height: 28px;
border-radius: 14px;
background-color: #F5F5F5;
color: #666;
margin-right: 10px;
margin-bottom: 9px;
}
.edu-filter-btn29BD8B {
display: block;
float: left;
padding: 0 9px;
height: 28px;
line-height: 28px;
border-radius: 14px;
background-color: #29BD8B;
color: #FFF;
margin-right: 10px;
margin-bottom: 9px;
}
.lesson-saved-list-item {
border-bottom: none !important;
margin-bottom: 10px;
background-color: #fff;
}
.click_add {
border-top: none !important;
}
/* 选择实训列表 */
.greybackHead {
height: 40px;
line-height: 40px;
padding: 0px 20px;
box-sizing: border-box;
color: #676767;
background-color: #eaeaea;
}
.mtf3 {
margin-top: -3px;
}
.mtf5 {
margin-top: -5px;
}
.color204 {
color: rgba(204, 204, 204, 1);
}
.lesson-saved-list-itemdrop {
height: 93px;
overflow: hidden;
}
.lesson-saved-list {
position: relative;
}
.itempositionleft {
position: absolute;
}
.itempositionright {
position: absolute;
}
.ant-input {
background-color: #fafafa !important;
}
.ant-input:focus {
background-color: #ffffff !important;
}
.pathNavLine {
bottom: -11px;
}
#shixun_operation:hover {
color: #fff !important;
}
.cursor {
cursor: pointer;
}
.paragraph_nameid:hover {
color: #4cacff !important;
}
/* 学习统计 */
.statisticsNav {
height: 100px;
}
.statisticsNav ul {
margin-top: 35px;
}
.statisticsNav ul li {
float: left;
font-size: 18px;
color: #4D4D4D;
height: 64px;
line-height: 64px;
margin: 0px 30px;
cursor: pointer;
}
.statisticsNav ul li a {
color: #4D4D4D !important;
}
.statisticsNav ul li.active {
color: #05101A;
border-bottom: 2px solid #05101A;
}
.statisticsNav ul li.active a {
color: #05101A !important;
text-decoration: none !important;
}
.next-loading {
width: 100%;
}
.paddingleft22 {
text-align: left;
padding-left: 22px;
}
.paddingl5 {
padding-left: 5px;
}
.paddingl10 {
padding-left: 10px;
}
.red {
color: red;
}
.pl38 {
padding-left: 38px;
}
.ml37 {
margin-left: 37px;
}
.newmustlearn {
padding: 34px 25px;
text-align: center;
}
.color181818 {
color: #181818;
}
.colorD5D8D6 {
color: #D5D8D6;
}
.shixun-path-search-container .search-keyword-container {
padding: 20px 0 0 0;
}

29
src/modules/paths/ShixunPaths.js
View File

@ -1,29 +0,0 @@
import React, { Component } from 'react';
import PathSearch from './ShixunPathSearch.js';
import { configShareForPaths } from 'educoder'
class ShixunPath extends Component{
constructor(props) {
super(props)
}
componentDidMount() {
console.log('configShareForPaths')
configShareForPaths()
}
render(){
return(
<div>
<div className="newMain clearfix">
<PathSearch
{...this.state}
{...this.props}
></PathSearch>
</div>
</div>
)
}
}
export default ShixunPath;

BIN
src/modules/paths/btn-new.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

94
src/modules/paths/statics/DisplayTableData.js
View File

@ -1,94 +0,0 @@
/*
* @Description:
* @Author: tangjiang
* @Github:
* @Date: 2020-01-14 13:39:12
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-14 16:30:05
*/
import "./index.scss";
import React, { useRef, useState, useEffect } from "react";
import { Table } from "antd";
import ReactDom from "react-dom";
const DisplayTableData = (props) => {
const {
columns,
datas,
fetchData,
total,
paginationProps,
handleTableChange,
} = props;
let tableEl = useRef(null);
const [loading, setLoading] = useState(false);
const renderFooter = (obj = {}) => {
const {
course_count,
student_count,
choice_shixun_num,
choice_shixun_frequency,
total,
} = obj;
if (!obj) return "";
else {
return (
<ul className="footer_list">
<li className="footer_item footer-total">总计</li>
<li className="footer_name">{total || "-"}</li>
<li className="footer_item">{course_count || "-"}</li>
<li className="footer_item">{student_count || "-"}</li>
<li className="footer_item">{choice_shixun_num || "-"}</li>
<li className="footer_item">{choice_shixun_frequency || "-"}</li>
</ul>
);
}
};
useEffect(() => {
const table = ReactDom.findDOMNode(tableEl);
// console.log(table);
const tableBody = table.querySelector(".ant-table-body");
let _scrollTop = 0; //保存上次滚动距离
let isRun = false; //是否执行查询
tableBody.addEventListener("scroll", () => {
if (tableBody.scrollTop === 0) {
_scrollTop = 0;
}
// 上一次滚动高度与当前滚动高度不同则是纵向滚动
if (_scrollTop !== tableBody.scrollTop) {
//是否滑动到距离底部40px的位置
const scorll =
_scrollTop >= tableBody.scrollHeight - tableBody.clientHeight - 40;
//isRun为true时 代表已经执行查询
if (isRun && scorll) {
return;
}
//_scrollTop < tableBody.scrollTop 判断是否向下滑动
isRun = _scrollTop < tableBody.scrollTop && scorll;
//保存当前滚动位置
_scrollTop = tableBody.scrollTop;
if (isRun) {
fetchData && fetchData();
}
}
});
}, []);
return (
<Table
className="static_table"
rowKey={(record) => record.id}
columns={columns}
dataSource={datas}
loading={loading}
// scroll={{y: 500}}
ref={(ref) => (tableEl = ref)}
footer={total ? () => renderFooter(total) : ""}
pagination={paginationProps}
onChange={handleTableChange}
/>
);
};
export default DisplayTableData;

43
src/modules/paths/statics/StaticNumberAndTxt.js
View File

@ -1,43 +0,0 @@
/*
* @Description: 数字及文字提示
* @Author: tangjiang
* @Github:
* @Date: 2020-01-10 10:26:57
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-10 11:15:28
*/
import './index.scss';
import React from 'react';
import { Tooltip } from 'antd';
const numberal = require('numeral');
const StaticNumberAndTxt = ({
count = 0, // 总数
txt, // 文字描述
type = 'tishi1', // 字体类型
desc // 描述信息
}) => {
const formatNumber = (value, format = '0,0') => {
return numberal(value).format(format);
}
const _classes = `iconfont icon-${type} icon`;
return (
<div className="static-flex-item">
<span className="item-count">{formatNumber(count)}</span>
<span className="item-txt">
{txt}
<Tooltip
placement='bottom'
title={desc}
overlayClassName='tool-clazz'
>
<span className={_classes}></span>
</Tooltip>
</span>
</div>
);
}
export default StaticNumberAndTxt;

429
src/modules/paths/statics/index.js
View File

@ -1,429 +0,0 @@
/*
* @Description: 实践课程统计页面
* @Author: tangjiang
* @Github:
* @Date: 2020-01-10 09:33:45
* @LastEditors : tangjiang
* @LastEditTime : 2020-02-14 17:51:48
*/
import "./index.scss";
import React, { useEffect } from "react";
import StaticNumberAndTxt from "./StaticNumberAndTxt";
import DisplayTableData from "./DisplayTableData";
import { Tabs, Tooltip, Pagination } from "antd";
import { connect } from "react-redux";
import moment from "moment";
import actions from "../../../redux/actions";
// function PadZero(str) {
// //补零
// return new RegExp(/^\d$/g).test(str) ? `0${str}` : str;
// }
const formatTime = (_seconds) => {
_seconds = parseInt(_seconds, 10);
let hours, mins, seconds;
let result = "";
seconds = parseInt(_seconds % 60, 10);
mins = parseInt((_seconds % 3600) / 60, 10);
hours = parseInt(_seconds / 3600, 10);
if (hours) {
result = `${hours}小时${mins}分${seconds}秒`;
} else if (mins) {
result = `${mins}分${seconds}秒`;
} else {
result = `${seconds}秒`;
}
return result;
};
const { TabPane } = Tabs;
const App = (props) => {
const {
subject_info,
other_info,
total,
staticList,
changeParams,
initTotal,
total_count,
params,
} = props;
// const [datas, setDatas] = useState([]);
// const [sortedInfo, setSortedInfo] = useState({});
// console.log(props);
const { pathId } = props.match.params;
const columns = [
{
title: "序号",
dataIndex: "id",
key: "id",
render: (text, record, i) => i + 1,
width: 100,
align: "center",
},
{
title: "使用单位",
// key: 'school_name',
dataIndex: "school_name",
// width: 300,
className: "overflow_hidden",
align: "center",
},
{
// title: '使用课堂/个',
title: () => <Tooltip title="将该课程使用到课堂的数量">使用课堂</Tooltip>,
// key: 'course_count',
width: 150,
dataIndex: "course_count",
align: "center",
sorter: true,
},
{
title: () => (
<Tooltip title="课堂的学生总数（去掉重复）">课堂学生</Tooltip>
),
// key: 'student_count',
width: 150,
dataIndex: "student_count",
align: "center",
sorter: true,
},
{
title: () => (
<Tooltip title="选用该课程实训的个数（去重）">选用实训/个</Tooltip>
),
width: 150,
// key: 'choice_shixun_num',
dataIndex: "choice_shixun_num",
align: "center",
sorter: true,
},
{
title: () => <Tooltip title="选用该课程实训的次数">选用实训/次</Tooltip>,
width: 150,
// key: 'choice_shixun_frequency',
dataIndex: "choice_shixun_frequency",
align: "center",
sorter: true,
},
];
const sxColumns = [
{
title: "序号",
dataIndex: "id",
render: (text, record, i) => i + 1,
width: 60,
align: "center",
},
{
title: "章节",
dataIndex: "stage",
width: 80,
align: "center",
},
{
title: "实训名称",
dataIndex: "shixun_name",
align: "center",
// ellipsis: true
},
{
title: "关卡数",
dataIndex: "challenge_count",
width: 100,
align: "center",
},
{
title: "使用课堂",
dataIndex: "course_count",
width: 110,
align: "center",
sorter: true,
},
{
title: "使用单位",
dataIndex: "school_count",
width: 110,
align: "center",
sorter: true,
},
{
title: "使用人数",
dataIndex: "used_count",
width: 110,
align: "center",
sorter: true,
},
{
title: "通关人数",
dataIndex: "passed_count",
width: 110,
align: "center",
sorter: true,
},
{
title: "评测次数",
dataIndex: "evaluate_count",
width: 110,
align: "center",
sorter: true,
},
{
title: "通关平均时间",
dataIndex: "passed_ave_time",
width: 140,
align: "center",
render: (text) => (text && formatTime(text)) || "-",
sorter: true,
},
];
const stColumns = [
{
title: "序号",
dataIndex: "id",
render: (text, record, i) => i + 1,
width: 60,
align: "center",
},
{
title: "姓名",
dataIndex: "username",
align: "center",
width: 200,
},
{
title: "通关实训数",
dataIndex: "passed_myshixun_count",
align: "center",
with: 130,
render: (val) => val + "",
sorter: true,
},
{
title: "完成关卡",
dataIndex: "passed_games_count",
align: "center",
with: 130,
render: (val) => val + "",
sorter: true,
},
// {
// title: '代码行',
// dataIndex: 'code_line_count',
// align: 'center',
// with: 130,
// render: (val) => val + '',
// sorter: (a, b) => a.code_line_count - b.code_line_count
// },
{
title: "评测次数",
dataIndex: "evaluate_count",
align: "center",
with: 130,
render: (val) => val + "",
sorter: true,
},
{
title: "所用时间",
dataIndex: "cost_time",
align: "center",
with: 200,
render: (text) => (text && formatTime(text)) || "-",
sorter: true,
},
];
useEffect(() => {
changeParams({
page: 1,
type: "subject_info",
});
pathId && staticList(pathId);
}, []);
const handleFetchData = () => {
pathId && staticList(pathId);
};
// const {
// study_count,
// course_study_count,
// initiative_study,
// passed_count,
// course_used_count,
// school_used_count
// } = subject_info;
const maps = {
1: "subject_info", // 实践课程使用情况
2: "shixun_info", // 实训使用情况
3: "user_info", // 用户使用情况
};
const handleTabChange = (key) => {
const type = maps[+key];
// console.log(type);
const params = {
page: 1,
type: type,
sort_by: undefined,
sort_direction: undefined,
};
// 恢复初始值
changeParams(params);
initTotal();
pathId && staticList(pathId);
};
const paginationProps = {
hideOnSinglePage: true,
current: params.page,
pageSize: params.limit,
total: total_count,
onChange: (page, pageSize) => {
changeParams({
page,
limit: pageSize,
});
handleFetchData();
},
};
//改为后端排序 issues/29182
const handleTableChange = (pagination, filters, sorter) => {
console.log(pagination, filters, sorter);
const { field, order } = sorter;
let sort_direction;
if (order === "descend") {
sort_direction = "desc";
} else if (order === "ascend") {
sort_direction = "asc";
}
changeParams({
sort_by: sort_direction ? field : undefined,
sort_direction,
});
handleFetchData();
};
return (
<div className="static_wrap">
<div className="ant-spin-container">
<div className="educontent">
<section className="static_section_header">
<div className="header_title">
<span className="title-p">学习统计</span>
<span className="title-sub"></span>
</div>
<div className="header-number header-flex">
<StaticNumberAndTxt
count={subject_info === null ? 0 : subject_info.study_count} // 总数
txt={"学习总人数"} // 文字描述
desc={
"学习该课程的全部人数（学习总人数=课堂学习人数+自主学习人数）"
}
/>
<StaticNumberAndTxt
count={
subject_info === null ? 0 : subject_info.course_study_count
} // 总数
txt={"课堂学习人数"} // 文字描述
desc={"通过课堂学习该课程的人数"}
/>
<StaticNumberAndTxt
count={
subject_info === null ? 0 : subject_info.initiative_study
} // 总数
txt={"自主学习人数"} // 文字描述
desc={"通过自主学习该课程的人数"}
/>
<StaticNumberAndTxt
count={subject_info === null ? 0 : subject_info.passed_count} // 总数
txt={"通关总人数"} // 文字描述
desc={"通关该课程所有实训的人数（去重。一个人数计算1次）"}
/>
<StaticNumberAndTxt
count={
subject_info === null ? 0 : subject_info.course_used_count
} // 总数
txt={"使用课堂数"} // 文字描述
desc={"使用该课程的课堂数量"}
/>
<StaticNumberAndTxt
count={
subject_info === null ? 0 : subject_info.school_used_count
} // 总数
txt={"使用单位数"} // 文字描述
desc={"使用该课程的单位数量（包括自主学习者所在单位）"}
/>
</div>
</section>
<section className="static_section_table">
<Tabs
defaultActiveKey="1"
onChange={handleTabChange}
style={{ paddingBottom: "15px" }}
>
<TabPane tab="课堂使用情况" key="1">
<DisplayTableData
columns={columns}
datas={other_info}
total={total}
fetchData={handleFetchData}
paginationProps={paginationProps}
handleTableChange={handleTableChange}
/>
{/* <div style={{ textAlign: "center", marginTop: 20 }}>
<Pagination
current={params.page}
pageSize={params.limit}
total={total_count}
></Pagination>
</div> */}
</TabPane>
<TabPane tab="实训使用情况" key="2">
<DisplayTableData
columns={sxColumns}
datas={other_info}
total={total}
fetchData={handleFetchData}
paginationProps={paginationProps}
handleTableChange={handleTableChange}
/>
</TabPane>
<TabPane tab="学员学习情况" key="3">
<DisplayTableData
columns={stColumns}
datas={other_info}
total={total}
fetchData={handleFetchData}
paginationProps={paginationProps}
handleTableChange={handleTableChange}
/>
</TabPane>
</Tabs>
</section>
</div>
</div>
</div>
);
};
const mapStateToProps = (state) => {
const {
staticReducer: { subject_info, other_info, total, total_count, params },
} = state;
return {
subject_info,
other_info,
total,
total_count,
params,
};
};
const mapDispatchToProps = (dispatch) => ({
staticList: (id) => dispatch(actions.staticList(id)),
changeParams: (params) => dispatch(actions.changeParams(params)),
initTotal: () => dispatch(actions.initTotal()),
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
// export default App;

156
src/modules/paths/statics/index.scss
View File

@ -1,156 +0,0 @@
.static_wrap {
.static_section_header,
.static_section_table{
background-color: #fff;
border-radius: 5px;
padding: 30px 20px 0;
margin-top: 20px;
}
.static_section_table{
margin-bottom: 140px;
padding-top: 5px;
}
.static_section_header{
.header_title{
line-height: 1;
.title-p,
.title-sub{
display: inline-block;
vertical-align: bottom;
color: #303133;
}
.title-p{
position: relative;
font-size: 20px;
height: 20px;
line-height: 1;
font-weight: bold;
&::before{
//position: absolute;
//content: '';
//border-left: 1px solid rgba(192,196,204,1);
//right: -10px;
//top: 2px;
//bottom: 0px;
//margin-left: 10px;
}
}
.title-sub{
margin-left: 20px;
font-size: 16px;
max-width: 1000px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
}
.header-number{
height: 158px;
}
.header-flex{
display: flex;
justify-content: space-around;
align-items: center;
.static-flex-item{
display: flex;
flex-direction: column;
justify-content: center;
.item-count{
font-size: 24px;
color: #4CACFF;
font-weight: bold;
}
.item-txt{
font-size: 14px;
line-height: 1.5;
text-align: center;
color: #909399;
margin-top: 20px;
.icon{
margin-left: 5px;
font-size: 16px !important;
}
}
}
}
}
// .static_table{
// // .ant-table-header{
// // overflow: hidden !important;
// // margin-bottom: 0px !important;
// // }
// // .ant-table-row-cell-break-word{
// // background: rgba(241,248,255,1) !important;
// // }
// // .overflow_hidden{
// // max-width: 280px;
// // overflow: hidden;
// // text-overflow:ellipsis;
// // white-space: nowrap;
// // }
// }
.static_table{
.ant-table-header{
margin-bottom: 0px !important;
overflow: hidden !important;
}
.ant-table-thead{
th{
background: rgba(241,248,255,1);
}
.ant-table-column-title{
color: #303133;
font-weight: bold;
}
}
.ant-table-tbody tr:nth-child(2n) {
td{
background: rgba(241,248,255,.4);
}
}
.ant-table-tbody tr td{
color: #303133;
}
}
.ant-table-footer{
background-color: rgba(241,248,255,1);
padding: 16px 0px;
}
.footer_list{
display: flex;
// background: #fff;
box-sizing: border-box;
text-align: center;
li{
color: #303133;
}
// border-top: 1px solid green;
.footer_item{
width: 150px;
}
.footer_item:not(:first-child) {
padding-right: 10px;
}
.footer-total{
width: 100px;
}
.footer_name{
flex: 1;
}
}
}
.tool-clazz{
max-width: 200px !important;
}

99
src/modules/paths/statics/mockData.js
View File

@ -1,99 +0,0 @@
/*
* @Description: 模拟数据
* @Author: tangjiang
* @Github:
* @Date: 2020-01-11 10:55:33
* @LastEditors : tangjiang
* @LastEditTime : 2020-01-14 09:11:36
*/
import { random } from 'lodash';
const getGuid = () =>
'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
/* eslint-disable */
let r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
const fetchData = (startIndex = 0) =>
new Promise(resolve => {
setTimeout(() => {
resolve(
startIndex >= 500 // 总共只有500条数据
? []
: Array.from({ length: 50 }).map((_, i) => {
// 每次返回100条
const index = startIndex + i;
return {
key: getGuid(),
index: `${index}`,
name: '湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学',
age: i+1,
address: 'New York No. ',
address2: 'address2',
bbb: 'address3'
};
}),
);
}, random(0, 1.0) * 1000);
});
const columns = [
{
title: '序号',
dataIndex: 'index',
render: text => text + 1,
width: 80,
align: 'center'
},
{
title: '使用单位',
dataIndex: 'name',
width: 300,
className: 'overflow_hidden',
align: 'center'
},
{
title: '使用课堂/个',
width: 200,
dataIndex: 'age',
align: 'center',
// sorter: (a, b) => a.age - b.age
},
{
title: '课堂学生/个',
width: 200,
dataIndex: 'address',
align: 'center',
// sorter: (a, b) => a.age - b.age
},
{
title: '选用实训/个',
width: 200,
dataIndex: 'address2',
align: 'center',
// sorter: (a, b) => a.age - b.age
},
{
title: '选用实训/个',
width: 200,
dataIndex: 'bbb',
align: 'center',
// sorter: (a, b) => a.bbb - b.bbb
}
];
const sumData = [
{
index: '合计',
key: 6,
name: 'Disabled User',
age: 99,
address: 'Sidney No.',
address2: 'address2',
bbb: 'address3',
}
];
export { columns, fetchData, sumData };