m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

bd

Browse Source
dev_cs
杨树明 5 years ago
parent 03a5e89bc4
commit 971276504b
2 changed files with 600 additions and 600 deletions
Show Stats Download Patch File Download Diff File

832
public/react/src/modules/paths/PathDetail/PathDetailIndex.js
Unescape View File

@ -14,24 +14,24 @@ import TPMRightSection from "../../tpm/component/TPMRightSection";
import styled from "styled-components"; import styled from "styled-components";
const getItemStyle = (isDragging, draggableStyle) => ({ const getItemStyle = (isDragging, draggableStyle) => ({
// change background colour if dragging // change background colour if dragging
background: isDragging ? '#dceeff' : '', background: isDragging ? '#dceeff' : '',
// styles we need to apply on draggables // styles we need to apply on draggables
...draggableStyle, ...draggableStyle,
}); });
const getItems = count => const getItems = count =>
Array.from({ length: count }, (v, k) => k).map(k => ({ Array.from({ length: count }, (v, k) => k).map(k => ({
id: `item-${k}`, id: `item-${k}`,
content: `item ${k}` content: `item ${k}`
})); }));
// a little function to help us with reordering the result // a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => { const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list); const result = Array.from(list);
const [removed] = result.splice(startIndex, 1); const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed); result.splice(endIndex, 0, removed);
return result; return result;
}; };
const List = styled.div` const List = styled.div`
@ -66,90 +66,90 @@ const DragHandle = styled.div`
`; `;
const $ =window.$ const $ =window.$
class PathDetailIndex extends Component{ class PathDetailIndex extends Component{
constructor(props){ constructor(props){
super(props) super(props)
this.state={ this.state={
progress:undefined, progress:undefined,
tags:undefined, tags:undefined,
members:undefined, members:undefined,
detailInfoList:undefined, detailInfoList:undefined,
clickdetailInfoListtype:false, clickdetailInfoListtype:false,
Modalstype:false, Modalstype:false,
Modalstopval:undefined, Modalstopval:undefined,
Modalsbottomval:undefined, Modalsbottomval:undefined,
cardsModalcancel:this.cardsModalcancel, cardsModalcancel:this.cardsModalcancel,
cardsModalsave:this.cardsModalsave, cardsModalsave:this.cardsModalsave,
user_id:undefined, user_id:undefined,
loadtype:false, loadtype:false,
courses:undefined, courses:undefined,
items: getItems(10), items: getItems(10),
pathtopskey:1 pathtopskey:1
} }
this.onDragEnd = this.onDragEnd.bind(this); this.onDragEnd = this.onDragEnd.bind(this);
} }
onDragEnd(result) { onDragEnd(result) {
// dropped outside the list // dropped outside the list
if (!result.destination) { if (!result.destination) {
return; return;
} }
try { try {
}catch (e) { }catch (e) {
} }
const items = reorder( const items = reorder(
this.state.members, this.state.members,
result.source.index, result.source.index,
result.destination.index result.destination.index
); );
this.setState({ this.setState({
detailInfoList:this.state.detailInfoList, detailInfoList:this.state.detailInfoList,
members:items, members:items,
items items
}); });
console.log(this.state.members) console.log(this.state.members)
console.log("items 数组数组数组数组") console.log("items 数组数组数组数组")
console.log(items) console.log(items)
} }
cardsModalcancel=()=>{ cardsModalcancel=()=>{
this.setState({ this.setState({
Modalstype:false, Modalstype:false,
}) })
// TODO 这个是临时处理，还需要优化，这里要看怎么区分处理 // TODO 这个是临时处理，还需要优化，这里要看怎么区分处理
if (this.state.Modalstopval == '你确定要删除该成员吗？') { if (this.state.Modalstopval == '你确定要删除该成员吗？') {
return; return;
} }
this.props.history.goBack() this.props.history.goBack()
} }
cardsModalsave=()=>{ cardsModalsave=()=>{
this.setState({ this.setState({
Modalstype:false, Modalstype:false,
}) })
this.props.history.goBack() this.props.history.goBack()
} }
// 加载markdown // 加载markdown
updatamakedown=(id)=>{ updatamakedown=(id)=>{
setTimeout(()=>{ setTimeout(()=>{
var shixunDescr = window.editormd.markdownToHTML(id, { var shixunDescr = window.editormd.markdownToHTML(id, {
htmlDecode: "style,script,iframe", htmlDecode: "style,script,iframe",
taskList: true, taskList: true,
tex: true, tex: true,
flowChart: true, flowChart: true,
sequenceDiagram: true sequenceDiagram: true
}); });
$("#"+id+" p:first").addClass("ReactMarkdown"); $("#"+id+" p:first").addClass("ReactMarkdown");
}, 200) }, 200)
} }
componentDidMount(){ componentDidMount(){
this.getdatasindex() this.getdatasindex()
} }
getdatasindex=(key)=>{ getdatasindex=(key)=>{
let pathid=this.props.match.params.pathId; let pathid=this.props.match.params.pathId;
let url="/paths/"+pathid+".json"; let url="/paths/"+pathid+".json";
@ -168,7 +168,7 @@ class PathDetailIndex extends Component{
if(result.data.allow_visit===true){ if(result.data.allow_visit===true){
this.setState({ this.setState({
detailInfoList:result.data, detailInfoList:result.data,
courses:result.data.courses, courses:result.data.courses,
pathtopskey:key===undefined?1:key, pathtopskey:key===undefined?1:key,
// items: getItems(result.data.members.length), // items: getItems(result.data.members.length),
}) })
@ -205,157 +205,157 @@ class PathDetailIndex extends Component{
}) })
} }
updatadetailInfoList=()=>{ updatadetailInfoList=()=>{
this.getdatasindex(); this.getdatasindex();
} }
clickNewsubscript=(val)=>{
if(val===0){
this.setState({
clickdetailInfoListtype:true
})
}else{
this.setState({
clickdetailInfoListtype:false
})
}
} 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;
}
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=()=>{ shanchuallow=(id)=>{
let{user_id}=this.state; this.setState({
let pathid=this.props.match.params.pathId; user_id:id,
let url="/paths/"+pathid+"/delete_member.json"; Modalstype:true,
let param={user_id:user_id}; Modalstopval:"你确定要删除该成员吗？",
axios.delete(url,{data:param}).then((response) => { cardsModalsave:this.delectshanchuallow,
if(response.data.status===1){ loadtype:false
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)
})
}
//上移 delectshanchuallow=()=>{
moveup=(data)=>{ let{user_id}=this.state;
// console.log(data); let pathid=this.props.match.params.pathId;
let pathid=this.props.match.params.pathId; let url="/paths/"+pathid+"/delete_member.json";
let url=`/paths/${pathid}/up_member_position.json`; let param={user_id:user_id};
axios.post(url,{ axios.delete(url,{data:param}).then((response) => {
user_id:data.id if(response.data.status===1){
}).then((response) => { if (this.props.current_user.user_id == user_id) {
if(response.status === 200){ this.props.history.push('/paths')
console.log("上移"); return;
// console.log(this.state.detailInfoList.members); }
// console.log(response); this.props.showNotification(response.data.message)
this.setState({
this.setState({ Modalstype:false,
detailInfoList:this.state.detailInfoList, // 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 members:response.data.members
}); });
// console.log(this.state.detailInfoList.members); // console.log(this.state.detailInfoList.members);
} }
}).catch((error) => { }).catch((error) => {
console.log(error) console.log(error)
}) })
} }
//下移 //下移
movedown =(data) => { movedown =(data) => {
// console.log(data); // console.log(data);
let pathid=this.props.match.params.pathId; let pathid=this.props.match.params.pathId;
let url=`/paths/${pathid}/down_member_position.json`; let url=`/paths/${pathid}/down_member_position.json`;
axios.post(url,{ axios.post(url,{
user_id:data.id user_id:data.id
}).then((response) => { }).then((response) => {
if( response.status === 200){ if( response.status === 200){
console.log("下移"); console.log("下移");
// console.log(this.state.detailInfoList.members); // console.log(this.state.detailInfoList.members);
// console.log(response); // console.log(response);
this.setState({ this.setState({
detailInfoList:this.state.detailInfoList, detailInfoList:this.state.detailInfoList,
members:response.data.members members:response.data.members
}); });
// console.log(this.state.detailInfoList.members); // console.log(this.state.detailInfoList.members);
} }
}).catch((error) => { }).catch((error) => {
console.log(error) console.log(error)
}) })
} }
render(){ render(){
this.updatamakedown("shixuns_propaedeutics"); this.updatamakedown("shixuns_propaedeutics");
this.updatamakedown("subject_learning_notes"); this.updatamakedown("subject_learning_notes");
let {detailInfoList, let {detailInfoList,
clickdetailInfoListtype, clickdetailInfoListtype,
Modalstype, Modalstype,
Modalstopval, Modalstopval,
Modalsbottomval, Modalsbottomval,
cardsModalcancel, cardsModalcancel,
cardsModalsave, cardsModalsave,
loadtype, loadtype,
progress, progress,
members, members,
tags, tags,
courses, courses,
} = this.state } = this.state
return( return(
<div className="newContainer"> <div className="newContainer">
<style> <style>
{ {
` `
@ -365,206 +365,206 @@ class PathDetailIndex extends Component{
` `
} }
</style> </style>
<Modals <Modals
modalsType={Modalstype} modalsType={Modalstype}
modalsTopval={Modalstopval} modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval} modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel} modalCancel={cardsModalcancel}
modalSave={cardsModalsave} modalSave={cardsModalsave}
loadtype={loadtype} loadtype={loadtype}
> >
</Modals> </Modals>
<div className="newMain clearfix"> <div className="newMain clearfix">
<DetailTop {...this.state} {...this.props} getdatasindex={(key)=>this.getdatasindex(key)}></DetailTop> <DetailTop {...this.state} {...this.props} getdatasindex={(key)=>this.getdatasindex(key)}></DetailTop>
<div className="educontent clearfix mb80"> <div className="educontent clearfix mb80">
<div className="with65 fl"> <div className="with65 fl">
<div className="produce-content mb10"> <div className="produce-content mb10">
<p className="clearfix mb20"> <p className="clearfix mb20">
<span className="fl font-18 font-bd">简介</span> <span className="fl font-18 font-bd">简介</span>
{/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/} {/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
{/*<Tooltip placement="bottom" title={"编辑"}>*/} {/*<Tooltip placement="bottom" title={"编辑"}>*/}
{/*<Link className="fr" to={"/paths/"+this.props.match.params.pathId+"/edit"}>*/} {/*<Link className="fr" to={"/paths/"+this.props.match.params.pathId+"/edit"}>*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/} {/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
{/*</Link>*/} {/*</Link>*/}
{/*</Tooltip>*/} {/*</Tooltip>*/}
{/*:""*/} {/*:""*/}
{/*}*/} {/*}*/}
</p> </p>
<div className="color-grey-6 clearfix"> <div className="color-grey-6 clearfix">
<div id="shixuns_propaedeutics" className="new_li fl" style={{"padding":" 0px","textAlign": "justify;"}}> <div id="shixuns_propaedeutics" className="new_li fl" style={{"padding":" 0px","textAlign": "justify;"}}>
{detailInfoList === undefined ? "" :detailInfoList.description===null?"": {detailInfoList === undefined ? "" :detailInfoList.description===null?"":
<div className={"markdown-body font-14"} dangerouslySetInnerHTML={{__html: markdownToHTML(detailInfoList.description).replace(/▁/g,"▁▁▁")}}></div> <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">
<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>
</div> </div>
{tags === undefined ? "" :tags === null ? "": </div>
<div className="edu-back-white padding40-20 mb10 relative">
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{tags.length}</span></p> <DetailCards
{...this.props}
<div className={clickdetailInfoListtype===false?"newedbox newedboxheight":"newedbox newminheight"}> {...this.state}
<div className="clearfix" id="boxheight"> updatadetailInfoLists={this.updatadetailInfoList}
{ ></DetailCards>
tags && tags.map((item,key)=>{ </div>
return( <div className="with35 fr pl20">
<span value={key} className = {item.status == true ? "edu-filter-btn29BD8B fl" : "newedu-filter-btn fl"}>{item.tag_name}</span> <div className="edu-back-white mustlearn mb10">
) <p className="clearfix mb30">
}) <span className="font-16">课程须知</span>
} {/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
</div> {/*<Tooltip placement="bottom" title={"编辑"}>*/}
</div> {/*<Link to={"/paths/"+this.props.match.params.pathId+"/edit#learning_notes"} className="fr mtf5">*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
<Tooltip placement="bottom" title={"显示全部"}> {/*</Link>*/}
<div className={tags.length>20&&clickdetailInfoListtype===false?"newsubscript mb9 color-grey-9 fr":"newsubscript mb9 color-grey-9 none"} {/*</Tooltip>*/}
onClick={()=>this.clickNewsubscript(0)} {/*:""*/}
><span className="mr8">...</span><Icon type="caret-down" /> {/*}*/}
</div> </p>
</Tooltip> <div id="subject_learning_notes" className="color-grey-6 new_li markdown-body editormd-html-preview justify">
{detailInfoList === undefined ? "" :detailInfoList.learning_notes===null?"":
<Tooltip placement="bottom" title={"收起"}> <div className={"markdown-body font-14"} dangerouslySetInnerHTML={{__html: markdownToHTML(detailInfoList.learning_notes).replace(/▁/g,"▁▁▁")}}></div>
<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>
</div> </div>
</Tooltip> {tags === undefined ? "" :tags === null ? "":
<div className="edu-back-white padding40-20 mb10 relative">
</div> <p className="font-16 mb20">技能标签 <span className="color-grey-c">{tags.length}</span></p>
}
{ <div className={clickdetailInfoListtype===false?"newedbox newedboxheight":"newedbox newminheight"}>
this.props.checkIfLogin()===false?"":progress === undefined ? "" : progress === null ? "" : <div className="clearfix" id="boxheight">
<div className="edu-back-white myProgress padding40-20 mb10"> {
<p className="mb20"> tags && tags.map((item,key)=>{
<span className="font-16 mr10">关卡数</span> return(
<Tooltip placement="bottom" title="已通过关卡数/总关卡数"> <span value={key} className = {item.status == true ? "edu-filter-btn29BD8B fl" : "newedu-filter-btn fl"}>{item.tag_name}</span>
<span className="color-green" >{progress.my_score} / {progress.all_score}</span> )
</Tooltip> })
</p> }
<p className="clearfix mb10"> </div>
<span className="fl color-green">已学 {progress.learned}%</span> </div>
<span className="fr color-grey-9" id="time-consuming">学习耗时{this.timeStamp(progress.time)} </span>
</p> <Tooltip placement="bottom" title={"显示全部"}>
<div className="myProgressNav"><div className="myProgressGreen" style={{"width":`${progress.learned+"%"}`}}></div></div> <div className={tags.length>20&&clickdetailInfoListtype===false?"newsubscript mb9 color-grey-9 fr":"newsubscript mb9 color-grey-9 none"}
</div> onClick={()=>this.clickNewsubscript(0)}
} ><span className="mr8">...</span><Icon type="caret-down" />
</div>
{ </Tooltip>
members ===undefined ?"":members === null ?"":
<div className="teacherTeam edu-back-white clearfix" id="subject_members"> <Tooltip placement="bottom" title={"收起"}>
<p className="font-16 clearfix">教学团队</p> <div className={clickdetailInfoListtype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9 fr"}
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
{ members===undefined? </div>
members && members.map((item,key)=>{ </Tooltip>
return(
<div className="teacherTeamItem clearfix df" key={key}> </div>
<a href={item.user_url} target="_blank" className="fl"> }
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/> {
</a> this.props.checkIfLogin()===false?"":progress === undefined ? "" : progress === null ? "" :
<div className="edu-back-white myProgress padding40-20 mb10">
<div className="fl ml15 flex1"> <p className="mb20">
<p className="mb10 mt5">{item.name} <span className="font-16 mr10">我的进展</span>
{/*{*/} <Tooltip placement="bottom" title="获得经验值/总经验值">
{/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/} <span className="color-green" >{progress.my_score} / {progress.all_score}</span>
{/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/} </Tooltip>
{/*}*/} </p>
</p> <p className="clearfix mb10">
<div className="clearfix"> <span className="fl color-green">已学 {progress.learned}%</span>
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p> <span className="fr color-grey-9" id="time-consuming">学习耗时{this.timeStamp(progress.time)} </span>
</div> </p>
</div> <div className="myProgressNav"><div className="myProgressGreen" style={{"width":`${progress.learned+"%"}`}}></div></div>
</div> </div>
) }
})
:detailInfoList===undefined?"":detailInfoList.allow_add_member===true? {
members && members.map((item,key)=>{ members ===undefined ?"":members === null ?"":
return( <div className="teacherTeam edu-back-white clearfix" id="subject_members">
<div className="teacherTeamItem clearfix df" key={key}> <p className="font-16 clearfix">教学团队</p>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/> { members===undefined?
</a> members && members.map((item,key)=>{
return(
<div className="fl ml15 flex1"> <div className="teacherTeamItem clearfix df" key={key}>
<p className="mb10 mt5">{item.name} <a href={item.user_url} target="_blank" className="fl">
{/* 新增role 判断是否能删除 1 管理员 2 合作者 */} <img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</a>
{
detailInfoList===undefined?"":detailInfoList.allow_add_member===true && item.role == 2? <div className="fl ml15 flex1">
<a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:"" <p className="mb10 mt5">{item.name}
} {/*{*/}
</p> {/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/}
<div className="clearfix"> {/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/}
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p> {/*}*/}
</div> </p>
{ <div className="clearfix">
detailInfoList===undefined?"":detailInfoList.allow_add_member===true? <div> <p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
{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>:""} </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>
:"" )
} })
:detailInfoList===undefined?"":detailInfoList.allow_add_member===true?
</div> members && members.map((item,key)=>{
</div> return(
) <div className="teacherTeamItem clearfix df" key={key}>
}) <a href={item.user_url} target="_blank" className="fl">
: members && members.map((item,key)=>{ <img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
return( </a>
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl"> <div className="fl ml15 flex1">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/> <p className="mb10 mt5">{item.name}
</a> {/* 新增role 判断是否能删除 1 管理员 2 合作者 */}
<div className="fl ml15 flex1"> {
<p className="mb10 mt5">{item.name} 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>:""
{/* 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> <p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
<div className="clearfix"> </div>
<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>
</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>:""}
</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>
</div>
)
<AddCollaborators {...this.props} {...this.state} updatadetailInfoLists={this.updatadetailInfoList}></AddCollaborators> })
: members && members.map((item,key)=>{
</div> return(
</div> <div className="teacherTeamItem clearfix df" key={key}>
</div> <a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</div> </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; export default PathDetailIndex;

368
public/react/src/modules/tpm/component/TPMRightSection.js
Unescape View File

@ -13,192 +13,192 @@ import {Icon,Tooltip} from 'antd';
// import "antd/dist/antd.css"; // import "antd/dist/antd.css";
class TPMRightSection extends Component { class TPMRightSection extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
TPMRightSection:false, TPMRightSection:false,
clickNewsubscripttype:false clickNewsubscripttype:false
} }
} }
// componentDidMount() { // componentDidMount() {
// let id=this.props.match.params.shixunId; // let id=this.props.match.params.shixunId;
// //
// let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`; // let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
// //
// axios.get(shixunsDetailsURL).then((response)=> { // axios.get(shixunsDetailsURL).then((response)=> {
// if(response.status===200){ // if(response.status===200){
// this.setState({ // this.setState({
// TPMRightSectionData: response.data // TPMRightSectionData: response.data
// }); // });
// } // }
// }).catch((error)=>{ // }).catch((error)=>{
// console.log(error) // console.log(error)
// }); // });
// } // }
// shouldComponentUpdate(nextProps, nextState) { // shouldComponentUpdate(nextProps, nextState) {
// return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData // return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
// } // }
clickNewsubscript=(val)=>{ clickNewsubscript=(val)=>{
if(val===0){ if(val===0){
this.setState({ this.setState({
TPMRightSection:true, TPMRightSection:true,
clickNewsubscripttype:true clickNewsubscripttype:true
}) })
}else{ }else{
this.setState({ this.setState({
TPMRightSection:false, TPMRightSection:false,
clickNewsubscripttype:false clickNewsubscripttype:false
}) })
} }
} }
render() { render() {
let {TPMRightSection,clickNewsubscripttype}=this.state; let {TPMRightSection,clickNewsubscripttype}=this.state;
let {TPMRightSectionData}=this.props let {TPMRightSectionData}=this.props
return ( return (
<div> <div>
{ {
TPMRightSectionData===undefined?"": TPMRightSectionData===undefined?"":
<div> <div>
<div className="edu-back-white padding40-20 mb10"> <div className="edu-back-white padding40-20 mb10">
<p className="font-16 mb20">创建者</p> <p className="font-16 mb20">创建者</p>
<div className="df"> <div className="df">
<a href={TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":`/users/${TPMRightSectionData.creator.login}/courses`}> <a href={TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":`/users/${TPMRightSectionData.creator.login}/courses`}>
<img alt="头像" className="radius mr10" height="80" src={getImageUrl(TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":'images/'+TPMRightSectionData.creator.image_url+"?1532489442")} width="80" /> <img alt="头像" className="radius mr10" height="80" src={getImageUrl(TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":'images/'+TPMRightSectionData.creator.image_url+"?1532489442")} width="80" />
</a> </a>
<div className="flex1"> <div className="flex1">
<p className="mb20">{TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":TPMRightSectionData.creator.name}</p> <p className="mb20">{TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":TPMRightSectionData.creator.name}</p>
<div className="clearfix"> <div className="clearfix">
<span>发布 {TPMRightSectionData.user_shixuns_count}</span> <span>发布 {TPMRightSectionData.user_shixuns_count}</span>
{/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/} {/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/}
{/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&amp;object_id=3039&amp;object_type=user&amp;shixun_id=61&amp;target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */} {/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&amp;object_id=3039&amp;object_type=user&amp;shixun_id=61&amp;target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{ {
TPMRightSectionData === undefined ? "" :TPMRightSectionData.tags===undefined?"": TPMRightSectionData.tags.length === 0 ? "" : TPMRightSectionData === undefined ? "" :TPMRightSectionData.tags===undefined?"": TPMRightSectionData.tags.length === 0 ? "" :
<div className="edu-back-white padding40-20 mb10 relative"> <div className="edu-back-white padding40-20 mb10 relative">
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{TPMRightSectionData.tags.length}</span></p> <p className="font-16 mb20">技能标签 <span className="color-grey-c">{TPMRightSectionData.tags.length}</span></p>
<div className={TPMRightSection===false?"newedbox newedboxheight":"newedbox newminheight"}> <div className={TPMRightSection===false?"newedbox newedboxheight":"newedbox newminheight"}>
<div className="clearfix" id="boxheight"> <div className="clearfix" id="boxheight">
{ TPMRightSectionData.tags.map((item,key)=>{ { TPMRightSectionData.tags.map((item,key)=>{
return( return(
<span className={item.status===false?"newedu-filter-btn fl":"edu-filter-btn29BD8B fl"} <span className={item.status===false?"newedu-filter-btn fl":"edu-filter-btn29BD8B fl"}
style={{display:item.tag_name===" "||item.tag_name===""?"none":""}} style={{display:item.tag_name===" "||item.tag_name===""?"none":""}}
key={key}>{item.tag_name}</span> key={key}>{item.tag_name}</span>
)}) )})
} }
</div> </div>
</div> </div>
<div className={TPMRightSectionData.tags.length>15&&clickNewsubscripttype===false?"newsubscript mb9 color-grey-9":"newsubscript mb9 color-grey-9 none"} <div className={TPMRightSectionData.tags.length>15&&clickNewsubscripttype===false?"newsubscript mb9 color-grey-9":"newsubscript mb9 color-grey-9 none"}
data-tip-down="显示全部" data-tip-down="显示全部"
onClick={()=>this.clickNewsubscript(0)}><span className="mr8">...</span><Icon type="caret-down" /> onClick={()=>this.clickNewsubscript(0)}><span className="mr8">...</span><Icon type="caret-down" />
</div> </div>
<div className={clickNewsubscripttype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9"} <div className={clickNewsubscripttype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9"}
data-tip-down="显示全部" data-tip-down="显示全部"
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" /> onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
</div> </div>
</div> </div>
} }
<div className="padding20 edu-back-white mb10 mt10" style={{ <div className="padding20 edu-back-white mb10 mt10" style={{
display: TPMRightSectionData === undefined?"none":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block" display: TPMRightSectionData === undefined?"none":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block"
}}> }}>
<p className="mb20 font-16 clearfix">所属课程</p> <p className="mb20 font-16 clearfix">相关实践课程</p>
<div className="recommend-list" > <div className="recommend-list" >
{ {
TPMRightSectionData===undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.map((i,k)=>{ TPMRightSectionData===undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.map((i,k)=>{
return( return(
<div className="recomments clearfix df" key={k}> <div className="recomments clearfix df" key={k}>
<a href={"/paths/"+i.id} height="96" width="128" target="_blank"> <a href={"/paths/"+i.id} height="96" width="128" target="_blank">
<img alt="实训" height="96" src={"/"+i.image_url} width="128" /> <img alt="实训" height="96" src={"/"+i.image_url} width="128" />
</a> </a>
<div className="ml10 flex1"> <div className="ml10 flex1">
<a href={"/paths/"+i.id} target="_blank" data-tip-down={i.name} className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a> <a href={"/paths/"+i.id} target="_blank" data-tip-down={i.name} className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a>
<p className="clearfix mt8 font-12 color-grey-B4"> <p className="clearfix mt8 font-12 color-grey-B4">
<Tooltip placement="bottom" title={"章节"}> <Tooltip placement="bottom" title={"章节"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span> <span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span>
</Tooltip> </Tooltip>
{/*<Tooltip placement="bottom" title={"经验值"}>*/} {/*<Tooltip placement="bottom" title={"经验值"}>*/}
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/} {/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
{/*</Tooltip>*/} {/*</Tooltip>*/}
<Tooltip placement="bottom" title={"学习人数"}> <Tooltip placement="bottom" title={"学习人数"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span> <span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
</Tooltip> </Tooltip>
</p> </p>
</div> </div>
</div> </div>
) )
}) })
} }
</div> </div>
</div> </div>
<div className="padding20 edu-back-white" <div className="padding20 edu-back-white"
style={{ style={{
display: display:
TPMRightSectionData === undefined?"none":TPMRightSectionData.recommands===undefined?"none":TPMRightSectionData.recommands.length === 0 ||TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block" TPMRightSectionData === undefined?"none":TPMRightSectionData.recommands===undefined?"none":TPMRightSectionData.recommands.length === 0 ? "none" : "block"
}} }}
> >
<p className="mb20 font-16 clearfix">推荐实训</p> <p className="mb20 font-16 clearfix">推荐实训</p>
<div className="recommend-list"> <div className="recommend-list">
{ {
TPMRightSectionData===undefined?"":TPMRightSectionData.recommands===undefined?"":TPMRightSectionData.recommands.map((item,key)=>{ TPMRightSectionData===undefined?"":TPMRightSectionData.recommands===undefined?"":TPMRightSectionData.recommands.map((item,key)=>{
return( return(
<div className="recomments clearfix df" key={key}> <div className="recomments clearfix df" key={key}>
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank"> <a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank">
<img alt="69?1526971094" height="96" src={"/"+item.pic} width="128"/> <img alt="69?1526971094" height="96" src={"/"+item.pic} width="128"/>
</a> </a>
<div className="ml10 flex1"> <div className="ml10 flex1">
<Tooltip placement="bottom" title={item.name}> <Tooltip placement="bottom" title={item.name}>
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank" className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a> <a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank" className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a>
</Tooltip> </Tooltip>
<p className="clearfix mt8 font-12 color-grey-B4"> <p className="clearfix mt8 font-12 color-grey-B4">
{item.stu_num} 人学习 {item.stu_num} 人学习
</p> </p>
<p className="edu-txt-right color-orange pr10">{item.level}</p> <p className="edu-txt-right color-orange pr10">{item.level}</p>
</div> </div>
</div> </div>
) )
}) })
} }
</div> </div>
</div> </div>
</div> </div>
} }
</div> </div>
) )
} }
} }
export default TPMRightSection; export default TPMRightSection;

Write Preview
Loading…
Cancel
Save