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

教学案例--issue

Browse Source
dev_hjm
caishi 6 years ago
parent a901c12d52
commit acd96fc822
8 changed files with 144 additions and 52 deletions
Show Stats Download Patch File Download Diff File

32
public/react/src/modules/courses/common/CNotificationHOC.js
Unescape View File

@ -13,7 +13,8 @@ export function CNotificationHOC(options = {}) {
});
this.state = {
dialogOpen: false
dialogOpen: false,
defineOpen:false
}
}
@ -126,8 +127,21 @@ export function CNotificationHOC(options = {}) {
this.onCancel = null
this.onOk = null
}
// 附件太大提示框
define = (object) =>{
const { title, content } = object;
this.setState({ title, content, defineOpen: true })
}
onDialogdefineOkBtnClick = () =>{
this.onCancel && this.onCancel();
this.setState({ defineOpen: false })
this.onCancel = null
this.onOk = null
}
render() {
const { snackbarOpen, snackbarText, snackbarHorizontal, snackbarVertical, dialogOpen, content } = this.state;
const { snackbarOpen, snackbarText, snackbarHorizontal, snackbarVertical, dialogOpen, content ,defineOpen } = this.state;
return (
@ -136,19 +150,31 @@ export function CNotificationHOC(options = {}) {
modalsType={dialogOpen}
modalsTopval={
content
}
}
modalsBottomval={""}
modalCancel={this.handleDialogClose}
modalSave={this.onDialogOkBtnClick}
okText={this.okText}
>
</Modals>
<Modals
modalsType={defineOpen}
modalsTopval={
content
}
loadtype={true}
modalsBottomval={""}
modalCancel={undefined}
modalSave={this.onDialogdefineOkBtnClick}
>
</Modals>
<WrappedComponent {...this.props}
showNotification= { this.showNotification }
bytesToSize={this.bytesToSize}
getNowFormatDates={(value,type)=>this.getNowFormatDates(value,type)}
configNotification={ this.configNotification }
confirm={ this.confirm }
define={ this.define }
>
</WrappedComponent>
</React.Fragment>

15
public/react/src/modules/moop_cases/CaseDetail.js
Unescape View File

@ -85,12 +85,18 @@ class CaseDetail extends Component{
{
CaseDetail && CaseDetail.status == "pending" && <span class="edu-filter-btn fl cdefault edu-activity-green ml10">草稿</span>
}
{
CaseDetail && CaseDetail.status == "processing" && <span class="edu-filter-btn fl cdefault edu-activity-green ml10">审核中</span>
}
{
CaseDetail && CaseDetail.status == "refused" && <span class="edu-filter-btn fl cdefault edu-activity-orange ml10">未通过</span>
}
</span>
<a href="/moop_cases" className="fr color-grey-9 mt5">返回</a>
</p>
<div className="edu-back-white">
<div className="padding30">
<div className="df">
<div className="df mb5">
<a href="/users/moop"><img alt="82274?1563067098" className="radius mr15 mt3" height="50" src={getImageUrl(`images/${creator && creator.image_url}`)} width="50" /></a>
<div className="flex1">
<li className="clearfix mb5">
@ -103,11 +109,16 @@ class CaseDetail extends Component{
operation && operation.can_editable ? <ActionBtn style="colorBlue" to={`/moop_cases/${this.props.match.params.caseID}/edit`} className="fr mr20">编辑</ActionBtn>:""
}
</li>
<li className="clearfix">
<li className="clearfix lineh-20">
<span className="fl color-grey-9 mr20">{creator && creator.school_name}</span>
<span className="fr">
<span className="fl color-grey-9 mr30">编码：<span className="color-grey-6">{CaseDetail && CaseDetail.uuid}</span></span>
{
CaseDetail && CaseDetail.status=="published" ?
<span className="fl color-grey-9">发布时间：<span className="color-grey-6">{CaseDetail && CaseDetail.published_at}</span></span>
:
<span className="fl color-grey-9">上传时间：<span className="color-grey-6">{CaseDetail && CaseDetail.created_at}</span></span>
}
</span>
</li>
</div>

15
public/react/src/modules/moop_cases/CaseItem.js
Unescape View File

@ -30,9 +30,18 @@ class CaseItem extends Component{
<span className="color-grey-3 mr10">{item.author_name}</span>
<span className="color-grey-3 mr20">{item.author_school_name}</span>
<span className="color-grey-c fr">
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-eye"></i></span>{item.visited_count} 浏览</span>
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-thumbs-o-up"></i></span>{item.praise_count} 赞</span>
<span className="color-grey-c"><span className=" item-group-icon mr5"><i className="fa fa-download"></i></span>{item.download_count} 下载</span>
{
item.visited_count && item.visited_count != 0 ?
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-eye"></i></span>{item.visited_count} 浏览</span>:""
}
{
item.praise_count && item.praise_count != 0 ?
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-thumbs-o-up"></i></span>{item.praise_count} 赞</span>:""
}
{
item.download_count && item.download_count != 0 ?
<span className="color-grey-c" style={{"marginRight":'1px'}}><span className=" item-group-icon mr5"><i className="fa fa-download"></i></span>{item.download_count} 下载</span>:""
}
</span>
</p>
</div>

54
public/react/src/modules/moop_cases/CaseList.js
Unescape View File

@ -3,7 +3,7 @@ import { Input , Spin , Pagination } from "antd";
import './css/moopCases.css'
import '../courses/css/Courses.css'
import { ActionBtn } from 'educoder';
import { ActionBtn , LinkAfterLogin } from 'educoder';
import axios from 'axios'
@ -13,6 +13,8 @@ import mainImg from '../../images/moop_cases/teach_ex.jpg'
import CaseItem from './CaseItem'
const Search = Input.Search;
class CaseList extends Component{
constructor(props){
@ -23,7 +25,8 @@ class CaseList extends Component{
page:1,
pageSize:20,
libraries:undefined,
totalCount:undefined
totalCount:undefined,
isSpin:false
}
}
@ -44,7 +47,8 @@ class CaseList extends Component{
if(result){
this.setState({
libraries:result.data.libraries,
totalCount:result.data.count
totalCount:result.data.count,
isSpin:false
})
}
}).catch((error)=>{
@ -71,6 +75,9 @@ class CaseList extends Component{
// 搜索
searchInfo = () =>{
this.setState({
isSpin:true
})
let { type , search , pageSize } = this.state;
this.InitList( type , search , 1 , pageSize );
}
@ -86,6 +93,9 @@ class CaseList extends Component{
render(){
let { type , search ,libraries , totalCount ,pageSize ,page } = this.state;
let { current_user } = this.props;
console.log(current_user);
console.log(this.props);
return(
<React.Fragment>
<img src={mainImg} width="100%" />
@ -93,16 +103,20 @@ class CaseList extends Component{
<div className="edu-back-white mb30 mt30">
<p className="padding20-30 clearfix bor-bottom-greyE">
<span className="font-18 fl color-grey-3">教学案例</span>
<ActionBtn style="colorBlue" className="fr" to="/moop_cases/new">发布案例</ActionBtn>
<LinkAfterLogin {...this.props} to={'/moop_cases/new'} className="fr edu-default-btn edu-blueline-btn">发布案例</LinkAfterLogin>
{/* <ActionBtn style="colorBlue" className="fr" to="/moop_cases/new">发布案例</ActionBtn> */}
</p>
<div className="clearfix pl30 pr30">
<ul className="fl library_nav mt25">
<li className={type == 0 ? "active" :""} onClick={()=>this.changeType(0)}>
<a href="javascript:void(0)">全部</a>
</li>
<li className={type == 1 ? "active" :""} onClick={()=>this.changeType(1)}>
<a href="javascript:void(0)">我的</a>
</li>
{
current_user &&
<li className={type == 1 ? "active" :""} onClick={()=>this.changeType(1)}>
<a href="javascript:void(0)">我的</a>
</li>
}
</ul>
<div className="fr mt16 mb16 searchView"style={{width:"300px"}}>
<Search
@ -114,18 +128,20 @@ class CaseList extends Component{
</div>
</div>
</div>
{
libraries && libraries.length > 0 && <CaseItem {...this.props} {...this.state} libraries={libraries}></CaseItem>
}
{
libraries && libraries.length == 0 && <div className="mb50"><NoneData></NoneData></div>
}
{
totalCount && totalCount > pageSize &&
<div className="mb50 edu-txt-center clearfix">
<Pagination defaultCurrent={page} current={page} pageSize={pageSize} showQuickJumper onChange={this.onChangePage} total={totalCount}></Pagination>
</div>
}
<Spin size="large" spinning={this.state.isSpin}>
{
libraries && libraries.length > 0 && <CaseItem {...this.props} {...this.state} libraries={libraries}></CaseItem>
}
{
libraries && libraries.length == 0 && <div className="mb50"><NoneData></NoneData></div>
}
{
totalCount && totalCount > pageSize &&
<div className="mb50 edu-txt-center clearfix">
<Pagination defaultCurrent={page} current={page} pageSize={pageSize} showQuickJumper onChange={this.onChangePage} total={totalCount}></Pagination>
</div>
}
</Spin>
</div>
</React.Fragment>
)

58
public/react/src/modules/moop_cases/CaseNew.js
Unescape View File

@ -3,7 +3,7 @@ import './css/moopCases.css'
import '../courses/css/Courses.css'
import { Form , Input , Upload , Button , Icon , message , Tooltip } from "antd";
import { getImageUrl , MarkdownToHtml , ActionBtn , appendFileSizeToUploadFile , appendFileSizeToUploadFileAll , getUrl , getUploadActionUrl } from 'educoder';
import { getImageUrl , setImagesUrl , MarkdownToHtml , ActionBtn , appendFileSizeToUploadFile , appendFileSizeToUploadFileAll , getUrl , getUploadActionUrl } from 'educoder';
import Tags from './CaseTags'
@ -87,20 +87,18 @@ class CaseNew extends Component{
}
// 上传附件-change
handleContentUploadChange = (info) => {
let contentFileList = info.fileList;
this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList)});
let list = appendFileSizeToUploadFileAll(contentFileList);
let arr = list.map(item=>{
return ( item.response && item.response.id )
})
this.setState({
filesID:arr,
checkFile:arr.length > 0 ? false : true
})
console.log("fujian");
console.log(list.map(item=>{
return ( item.response && item.response.id )
}));
if (info.file.status === 'done' || info.file.status === 'uploading') {
let contentFileList = info.fileList;
this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList)});
let list = appendFileSizeToUploadFileAll(contentFileList);
let arr = list.map(item=>{
return ( item.response && item.response.id )
})
this.setState({
filesID:arr,
checkFile:arr.length > 0 ? false : true
})
}
}
// 上传封面图-change
@ -139,7 +137,7 @@ class CaseNew extends Component{
userUnit:this.props.CaseDetail.author_school_name,
})
this.setState({
contentFileList:this.props.CaseDetail.attachments.map(item => {
contentFileList:this.props.attachments.map(item => {
return {
id: item.id,
uid: item.id,
@ -149,12 +147,18 @@ class CaseNew extends Component{
status: 'done'
}
}),
filesID:this.props.attachments.map(item => {
return ( item.id )
}),
coverID:this.props.cover && this.props.cover.id,
imageUrl:this.props.CaseDetail.cover && getImageUrl(this.props.CaseDetail.cover.url),
imageUrl:this.props.CaseDetail.cover && setImagesUrl(this.props.CaseDetail.cover.url),
casesTags:this.props.tags.map(item=>{
return (item.id);
})
})
console.log(this.props.attachments.map(item => {
return ( item.id )
}))
}
}
@ -183,7 +187,11 @@ class CaseNew extends Component{
})
return;
}
//const mdContnet = this.DescMdRef.current.getValue().trim();
const mdContnet = this.DescMdRef.current.getValue().trim();
console.log(mdContnet)
values.description = mdContnet;
console.log(values);
let url = caseID ? `/libraries/${caseID}.json`: `/libraries.json`;
if(caseID){
@ -260,9 +268,13 @@ class CaseNew extends Component{
beforeUpload: (file) => {
const isLt150M = file.size / 1024 / 1024 < 150;
if (!isLt150M) {
message.error('文件大小必须小于150MB!');
//message.error('文件大小必须小于150MB!');
this.props.define({
title:'提示',
content:"该文件无法上传。超过文件大小限制(150MB),建议上传到百度云等其它共享工具里，然后再txt文档里给出链接以及共享密码并上传"
})
return isLt150M;
}
return isLt150M;
}
};
// 上传封面图-html
@ -279,6 +291,8 @@ class CaseNew extends Component{
action:`${getUploadActionUrl()}`,
onChange:this.handleChange,
}
console.log('111');
console.log(!caseID || (CaseDetail && CaseDetail.status == "pending"));
return(
<div className="educontent mt10 mb50">
<style>
@ -379,7 +393,7 @@ class CaseNew extends Component{
<p className="ant-upload-text color-grey-c">从我的电脑选择要上传的文档：按住CTRL可以上传多份文档。单个文件最大限制：150MB</p>
</Dragger>
{
checkFile && <div style={{left:"0px",bottom:"-21px"}} class="ant-form-explain">请先上传附件</div>
checkFile == true && <div style={{left:"0px",bottom:"-21px"}} class="ant-form-explain">请先上传附件</div>
}
</div>
<p className="lineh-25 mt20 mb10 clearfix">
@ -419,7 +433,7 @@ class CaseNew extends Component{
<Form.Item>
<div className="clearfix mt30 mb30">
{
!caseID && <Button type="primary" onClick={()=>this.handleSubmit("submit")} className="defalutSubmitbtn fl mr20">申请发布</Button>
(!caseID || (CaseDetail && CaseDetail.status == "pending")) ? <Button type="primary" onClick={()=>this.handleSubmit("submit")} className="defalutSubmitbtn fl mr20">申请发布</Button> : ""
}
<a className="defalutCancelbtn fl" onClick={()=>this.handleSubmit("save")}>保存</ a>
</div>

10
public/react/src/modules/moop_cases/css/moopCases.css
Unescape View File

@ -48,6 +48,13 @@
border: 1px solid green;
line-height: 17px;
}
.edu-activity-orange {
background-color: #ff6800;
color: #fff!important;
cursor: pointer;
border: 1px solid #ff6800;
line-height: 17px;
}
.edu-activity-blue {
background-color: #4CACFF;
color: #fff!important;
@ -132,6 +139,9 @@
display: block;
cursor: pointer;
}
.librariesField .ant-upload.ant-upload-drag{
border:none!important;
}
.uploadImage .ant-upload.ant-upload-select-picture-card{
width:120px;
height: 90px;

3
public/react/src/modules/moop_cases/index.js
Unescape View File

@ -46,6 +46,9 @@ class Index extends Component{
user_praised:true,
}
}
componentDidMount(){
window.document.title = '教学案例'
}
// 获取案例详情
getDetail = (caseID) =>{
let url=`/libraries/${caseID}.json`

7
public/react/src/modules/tpm/NewHeader.js
Unescape View File

@ -628,6 +628,7 @@ submittojoinclass=(value)=>{
let activePaths = false;
let coursestype=false;
let activePackages=false;
let activeMoopCases=false;
if (match.path === '/forums') {
@ -640,7 +641,9 @@ submittojoinclass=(value)=>{
coursestype = true;
}else if (match.path.startsWith('/crowdsourcing')) {
activePackages = true;
}else {
}else if(match.path.startsWith('/moop_cases')){
activeMoopCases = true;
}else {
activeIndex = true;
}
@ -725,7 +728,7 @@ submittojoinclass=(value)=>{
src={require('./roundedRectangle.png')}
/>
</li>
<li className=""><a href={this.props.Headertop===undefined?"":this.props.Headertop.moop_cases_url}>教学案例</a></li>
<li className={`${activeMoopCases === true ? 'pr active' : 'pr'}`}><a href={this.props.Headertop===undefined?"":this.props.Headertop.moop_cases_url}>教学案例</a></li>
<li className={`${activePackages === true ? 'pr active' : 'pr'}`}>
<a href={'/crowdsourcing'}>众包创新</a>
</li>

Write Preview
Loading…
Cancel
Save